feat: Estiliza bloco de Newsletter desktop

store/blocks/pdp/product.jsonc

@@ -336,7 +336,7 @@
 
   "newsletter": {
     "props": {
-      "label": "Assine nossa newsletter \n Receba ofertas e novidades por e-mail",
+      "label": "Assine nossa newsletter",
       "placeholder": "Digite seu e-mail",
       "submit": "ENVIAR"
     }

styles/css/vtex.shelf.css

@@ -0,0 +1,14 @@
+/*
+0 - 600PX: Phone
+600 - 900px: Table portrait
+900 - 1200px: Tablet landscape
+[1200 - 1800] is where our nortal styles apply
+1800px + : Big desktop
+*/
+/* Media Query M3 */
+/* Grid breakpoints */
+.title {
+  font-weight: 400;
+  font-size: 24px;
+  line-height: 38px;
+}

styles/css/vtex.store-components.css

@@ -8,23 +8,6 @@
 */
 /* Media Query M3 */
 /* Grid breakpoints */
-.newsletter {
-  display: block;
-  background: #000000;
-}
-.newsletter :global(.vtex-input-prefix__group) {
-  border: none;
-}
-.newsletter .label {
-  color: #fff;
-  font-weight: 400;
-  font-size: 18px;
-  line-height: 25px;
-}
-.newsletter .button-container :global(.vtex-button__label) {
-  background-color: transparent;
-}
-
 .container {
   padding: 0 40px;
 }
@@ -342,3 +325,61 @@
   font-size: 12px;
   line-height: 16px;
 }
+
+.newsletter {
+  display: block;
+  background: #000000;
+}
+.newsletter :global(.vtex-store-components-3-x-form) {
+  padding: 32px 0 13px;
+  width: 774px;
+  max-width: 774px;
+  position: relative;
+}
+.newsletter :global(.vtex-store-components-3-x-form) .label {
+  color: #fff;
+  font-weight: 400;
+  font-size: 24px;
+  line-height: 38px;
+}
+.newsletter :global(.vtex-store-components-3-x-form) .label::after {
+  content: "Receba ofertas e novidades por e-mail";
+  font-size: 18px;
+  line-height: 25px;
+  color: #929292;
+  position: absolute;
+  top: 85px;
+  right: 225px;
+}
+.newsletter :global(.vtex-store-components-3-x-form) :global(.vtex-store-components-3-x-inputGroup) {
+  padding-top: 52px;
+}
+.newsletter :global(.vtex-store-components-3-x-form) :global(.vtex-store-components-3-x-inputGroup) :global(.vtex-input-prefix__group) {
+  border: none;
+  border-radius: 0;
+}
+.newsletter :global(.vtex-store-components-3-x-form) :global(.vtex-store-components-3-x-inputGroup) :global(.vtex-input-prefix__group) :global(.vtex-styleguide-9-x-input) {
+  font-weight: 400;
+  font-size: 18px;
+  line-height: 25px;
+  color: #929292;
+  border-radius: 0;
+  border-bottom: 1px solid #929292;
+  background: transparent;
+  padding: 0;
+}
+.newsletter :global(.vtex-store-components-3-x-form) .buttonContainer {
+  padding: 0;
+}
+.newsletter :global(.vtex-store-components-3-x-form) .buttonContainer :global(.vtex-button) {
+  font-weight: 700;
+  font-size: 14px;
+  line-height: 19px;
+  color: #fff;
+  background-color: transparent;
+  border: none;
+}
+.newsletter :global(.vtex-store-components-3-x-form) .buttonContainer :global(.vtex-button__label) {
+  border-bottom: 3px solid #929292;
+  padding: 6px 17px 12px !important;
+}

styles/css/vtex.tab-layout.css

@@ -52,7 +52,7 @@
   flex-direction: row;
   gap: 32px;
   align-items: flex-start;
-  padding: 32px;
+  padding: 32px 32px 16px;
 }
 :global(.vtex-tab-layout-0-x-container) :global(.vtex-tab-layout-0-x-contentContainer) .contentItem :global(.vtex-store-components-3-x-productImageTag) {
   width: inherit !important;

styles/sass/pages/product/vtex.shelf.scss

@@ -0,0 +1,5 @@
+.title {
+  font-weight: 400;
+  font-size: 24px;
+  line-height: 38px;
+}

styles/sass/pages/product/vtex.store-components.scss

@@ -1,29 +1,3 @@
-.newsletter {
-  display: block;
-  background: $black;
-
-  :global(.vtex-input-prefix__group) {
-    border: none;
-
-    // background: $black;
-  }
-
-  .label {
-    color: $white;
-    font-weight: 400;
-    // font-size: 24px;
-    // line-height: 38px;
-    font-size: 18px;
-    line-height: 25px;
-  }
-
-  .button-container {
-    :global(.vtex-button__label) {
-      background-color: transparent;
-    }
-  }
-}
-
 .container {
   padding: 0 40px;
 
@@ -397,3 +371,69 @@
     }
   }
 }
+
+.newsletter {
+  display: block;
+  background: $black;
+  :global(.vtex-store-components-3-x-form) {
+    padding: 32px 0 13px;
+    width: 774px;
+    max-width: 774px;
+    position: relative;
+
+    .label {
+      color: $white;
+      font-weight: 400;
+      font-size: 24px;
+      line-height: 38px;
+
+      &::after {
+        content: "Receba ofertas e novidades por e-mail";
+        font-size: 18px;
+        line-height: 25px;
+        color: $gray-500;
+        position: absolute;
+        top: 85px;
+        right: 225px;
+      }
+    }
+
+    :global(.vtex-store-components-3-x-inputGroup) {
+      padding-top: 52px;
+
+      :global(.vtex-input-prefix__group) {
+        border: none;
+        border-radius: 0;
+
+        :global(.vtex-styleguide-9-x-input) {
+          font-weight: 400;
+          font-size: 18px;
+          line-height: 25px;
+          color: $gray-500;
+          border-radius: 0;
+          border-bottom: 1px solid $gray-500;
+          background: transparent;
+          padding: 0;
+        }
+      }
+    }
+
+    .buttonContainer {
+      padding: 0;
+
+      :global(.vtex-button) {
+        font-weight: 700;
+        font-size: 14px;
+        line-height: 19px;
+        color: $white;
+        background-color: transparent;
+        border: none;
+      }
+
+      :global(.vtex-button__label) {
+        border-bottom: 3px solid $gray-500;
+        padding: 6px 17px 12px !important;
+      }
+    }
+  }
+}

styles/sass/pages/product/vtex.tab-layout.scss

@@ -35,6 +35,7 @@
     }
 
     .listItemActive {
+
       :global(.vtex-button) {
         background-color: white;
         border: none;
@@ -58,7 +59,7 @@
       flex-direction: row;
       gap: 32px;
       align-items: flex-start;
-      padding: 32px;
+      padding: 32px 32px 16px;
 
       // :global(.vtex-store-components-3-x-content) {
       //   max-width: 100%;