feat(pdp): Adiciona newsletter

store/blocks/pdp/product.jsonc

@@ -12,10 +12,28 @@
 
       "list-context.product-list#prateleira",
       /*"shelf.relatedProducts",*/
-      "product-questions-and-answers"
+      /*"product-questions-and-answers",*/
+      "newsletter"
     ]
   },
 
+  "newsletter": {
+    "props": {
+      "label": "Assine nossa newsletter",
+      "placeholder": "Digite seu e-mail",
+      "blockClass": "newsletter"
+    },
+    "blocks": ["rich-text#newsletter"]
+  },
+  "rich-text#newsletter": {
+    "props": {
+      "textAlignment": "CENTER",
+      "textPosition": "CENTER",
+      "text": "Receba ofertas e novidades por e-mail",
+      "blockClass": "news-msg"
+    }
+  },
+
   "list-context.product-list#prateleira": {
     "blocks": ["product-summary.shelf"],
     "children": ["rich-text#prateleira", "slider-layout#prateleira"]

styles/css/vtex.store-components.css

@@ -13,10 +13,6 @@
   padding: 0;
 }
 
-.newsletter {
-  background: red;
-}
-
 .productImageTag--main {
   max-height: max-content !important;
 }
@@ -411,4 +407,52 @@
   top: 90px;
   font-size: 12px;
   line-height: 16px;
+}
+
+.newsletter--newsletter {
+  margin-top: 64px;
+  padding-top: 32px;
+  padding-bottom: 16px;
+  background-color: #000000;
+}
+
+.container--newsletter {
+  color: #fff;
+}
+
+.form--newsletter {
+  position: relative;
+}
+.form--newsletter :global(.vtex-styleguide-9-x-noAppearance) {
+  background-color: #000000;
+  padding: 0;
+}
+.form--newsletter :global(.vtex-input-prefix__group) {
+  border: none;
+  border-bottom: 1px solid #929292;
+  border-radius: 0%;
+  padding-bottom: 4px;
+  align-items: flex-end;
+}
+
+.label--newsletter {
+  font-weight: 400;
+  font-size: 24px;
+  line-height: 38px;
+  color: #fff;
+}
+.label--newsletter::after {
+  content: "Receba ofertas e novidades por e-mail";
+  position: absolute;
+  right: 100px;
+  top: 42px;
+  font-weight: 400;
+  font-size: 18px;
+  line-height: 25px;
+  color: #929292;
+}
+
+.inputGroup--newsletter {
+  margin-top: 40px;
+  padding: 0;
 }

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

@@ -3,10 +3,6 @@
   padding: 0;
 }
 
-.newsletter {
-  background: red;
-}
-
 //IMAGENS
 .productImageTag--main {
   max-height: max-content !important;
@@ -469,3 +465,54 @@
     line-height: 16px;
   }
 }
+
+//NEWSLETTER
+
+.newsletter--newsletter {
+  margin-top: 64px;
+  padding-top: 32px;
+  padding-bottom: 16px;
+  background-color: $color-black-100;
+}
+.container--newsletter {
+  color: $color-white;
+}
+
+.form--newsletter {
+  position: relative;
+
+  :global(.vtex-styleguide-9-x-noAppearance) {
+    background-color: $color-black-100;
+    padding: 0;
+  }
+
+  :global(.vtex-input-prefix__group) {
+    border: none;
+    border-bottom: 1px solid $color-gray6;
+    border-radius: 0%;
+    padding-bottom: 4px;
+    align-items: flex-end;
+  }
+}
+
+.label--newsletter {
+  font-weight: 400;
+  font-size: 24px;
+  line-height: 38px;
+  color: $color-white;
+  &::after {
+    content: "Receba ofertas e novidades por e-mail";
+    position: absolute;
+    right: 100px;
+    top: 42px;
+    font-weight: 400;
+    font-size: 18px;
+    line-height: 25px;
+    color: $color-gray6;
+  }
+}
+
+.inputGroup--newsletter {
+  margin-top: 40px;
+  padding: 0;
+}