feat: cria e estiliza o bloco para newsletter

react/components/Html/styles.css

@@ -254,3 +254,61 @@
 [class*="html--description5"] h2::after {
   content: " 5";
 }
+
+[class*="html--newsletter"] {
+  padding: 64px 0 32px 0;
+}
+
+[class*="html--newsletter"] input {
+  background-color: transparent;
+
+  font-weight: 400;
+  font-size: 18px;
+  line-height: 25px;
+  color: #929292;
+}
+@media screen and (max-width: 1024px) {
+  [class*="html--newsletter"] input {
+    font-size: 12px;
+    line-height: 16px;
+  }
+}
+
+[class*="html--newsletter"] button {
+  background-color: transparent;
+  border: none;
+  border-radius: 0;
+
+  font-weight: 700;
+  font-size: 14px;
+  line-height: 19px;
+  text-align: center;
+  color: #FFFFFF;
+
+  border-bottom: 2px solid #FFFFFF;
+}
+@media screen and ((min-width: 640px) and (max-width: 1024px)) {
+  [class*="html--newsletter"] button {
+    font-size: 14px;
+    line-height: 19px;
+  }
+}
+@media screen and (max-width: 639px) {
+  [class*="html--newsletter"] button {
+    font-size: 14px;
+    line-height: 19px;
+    position: absolute;
+    right: 0;
+    top: -31px;
+  }
+}
+
+[class*="html--newsletter"] div {
+  border: none;
+}
+@media screen and (max-width: 639px) {
+  [class*="html--newsletter"] div {
+    position: relative;
+  }
+}
+

store/blocks/pdp/product.jsonc

@@ -7,7 +7,8 @@
       //"html#specifications-title",
       //"product-specification-group#table",
       "shelf.relatedProducts",
-      "product-questions-and-answers"
+      "product-questions-and-answers",
+      "html#newsletter"
     ]
   },
 
@@ -109,14 +110,14 @@
     ]
   },
 
-  "product-specification-badges": {
+  //"product-specification-badges": {
-    "props": {
+  // "props": {
-      "specificationGroupName": "Group",
+  //    "specificationGroupName": "Group",
-      "specificationName": "On Sale",
+  //    "specificationName": "On Sale",
-      "visibleWhen": "True",
+  //   "visibleWhen": "True",
-      "displayValue": "SPECIFICATION_NAME"
+  //    "displayValue": "SPECIFICATION_NAME"
-    }
+  //  }
-  },
+  //},
 
   "html#stack": {
     "props": {
@@ -411,6 +412,29 @@
       "tabId": "product5"
     },
     "children": ["product-images#description", "html#description5"]
+  },
+
+  "newsletter#newsletter-product": {
+    "props": {
+      "blockClass": "newsletter-product",
+      "label": "Receba ofertas e novidades por e-mail",
+      "placeholder": "Digite seu e-mail",
+      "submit": "ENVIAR"
+    }
+  },
+
+  "rich-text#newsletter-title": {
+    "props": {
+      "text": "Assine nossa newsletter",
+      "blockClass": "newsletter-title"
+    }
+  },
+
+  "html#newsletter": {
+    "props": {
+      "blockClass": "newsletter"
+    },
+    "children": ["rich-text#newsletter-title" , "newsletter#newsletter-product"]
   }
 
 }

styles/css/vtex.rich-text.css

@@ -7,3 +7,22 @@
 */
 /* Media Query M3 */
 /* Grid breakpoints */
+.container--newsletter-title {
+  background-color: #000000;
+  justify-content: center;
+}
+
+.paragraph--newsletter-title {
+  font-weight: 400;
+  font-size: 24px;
+  line-height: 38px;
+  text-align: center;
+  color: #FFFFFF;
+  margin: 32px 0 0 0;
+  height: 38px;
+}
+@media screen and (max-width: 1024px) {
+  .paragraph--newsletter-title {
+    margin-top: 64px;
+  }
+}

styles/css/vtex.store-components.css

@@ -502,3 +502,48 @@
   margin: 0;
   display: inline-block;
 }
+
+.label--newsletter-product {
+  font-weight: 400;
+  font-size: 18px;
+  line-height: 25px;
+  color: #929292;
+}
+@media screen and (max-width: 1024px) {
+  .label--newsletter-product {
+    font-size: 16px;
+    line-height: 22px;
+  }
+}
+
+.inputGroup--newsletter-product {
+  border-bottom: 1px solid #929292 !important;
+}
+
+.newsletter--newsletter-product .container {
+  padding: 16px 0;
+  margin: 0 auto;
+  background-color: #000000;
+}
+@media screen and (max-width: 1024px) {
+  .newsletter--newsletter-product .container {
+    padding: 16px 0 29px 0;
+  }
+}
+
+.form--newsletter-product {
+  max-width: 53.75%;
+  padding: 0;
+}
+@media screen and ((min-width: 769px) and (max-width: 1024px)) {
+  .form--newsletter-product {
+    max-width: 96.875%;
+    margin: 0 16px;
+  }
+}
+@media screen and (max-width: 768px) {
+  .form--newsletter-product {
+    max-width: 95.833333%;
+    margin: 0 16px;
+  }
+}

styles/sass/pages/product/vtex.rich-text.scss

@@ -0,0 +1,18 @@
+.container--newsletter-title {
+  background-color: #000000;
+  justify-content: center;
+}
+
+.paragraph--newsletter-title {
+  font-weight: 400;
+  font-size: 24px;
+  line-height: 38px;
+  text-align: center;
+  color: #FFFFFF;
+  margin: 32px 0 0 0;
+  height: 38px;
+
+  @media screen and (max-width: 1024px) {
+    margin-top: 64px;
+  }
+}

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

@@ -516,3 +516,46 @@
    margin: 0;
   display: inline-block;
 }
+
+.label--newsletter-product {
+  font-weight: 400;
+  font-size: 18px;
+  line-height: 25px;
+  color: #929292;
+
+  @media screen and (max-width: 1024px) {
+    font-size: 16px;
+    line-height: 22px;
+  }
+}
+
+.inputGroup--newsletter-product{
+  border-bottom: 1px solid #929292 !important;
+}
+
+.newsletter--newsletter-product {
+  .container {
+    padding: 16px 0;
+    margin: 0 auto;
+    background-color: #000000;
+
+    @media screen and (max-width: 1024px) {
+      padding: 16px 0 29px 0;
+    }
+  }
+}
+
+.form--newsletter-product {
+  max-width: 53.75%;
+  padding: 0;
+
+  @media screen and ((min-width: 769px) and (max-width: 1024px)) {
+    max-width: 96.875%;
+    margin: 0 16px;
+  }
+
+  @media screen and (max-width: 768px) {
+    max-width: 95.833333%;
+    margin: 0 16px;
+  }
+}