feat: estiliza o newsletter

react/components/Html/styles.css

@@ -157,8 +157,54 @@
   background: none;
 }
 
-
 [class*="imageNormal"] {
   max-width: 434.4px;
   max-height: 434.4px;
 }
+
+[class*="newsletter"] {
+  color: white;
+}
+
+[id*="newsletter-input"] {
+  color: white;
+  background: black;
+  border: none;
+}
+
+[class*="t-heading-3"] {
+  content: "Teste \n teste 2";
+  margin-bottom: 57px;
+  font-size: 0;
+}
+[class*="t-heading-3"]::after {
+  content: "Assine nossa newsletter";
+  font-family: "Open Sans";
+  font-style: normal;
+  font-weight: 400;
+  font-size: 24px;
+  line-height: 38px;
+  position: relative;
+  bottom: 47px;
+}
+
+[class*="textNewsletter"] {
+  color: white;
+  position: relative;
+  top: 38px;
+}
+
+[class*="vtex-input-prefix__group"] {
+  border: none;
+  border-bottom: 1px solid white;
+  border-radius: 0;
+}
+
+[class*="buttonContainer"] :global(.vtex-button) {
+  border: none;
+  border-bottom: 2px solid white;
+  background-color: black;
+  border-radius: 0;
+  position: relative;
+  right: 12px;
+}

store/blocks/pdp/product.jsonc

@@ -6,17 +6,26 @@
       "tab-layout#home",
       "rich-text#textproducts",
       "list-context.product-list#demo1",
+      "rich-text#textnewsletter",
       "newsletter",
       "product-questions-and-answers"
     ]
   },
 
-  "newsletter-form": {
-    "children": [
-      "newsletter-input-email",
-      "newsletter-input-name",
-      "newsletter-submit"
-    ]
+  "newsletter": {
+    "props": {
+      "text": "Você também pode gostar:"
+    }
+  },
+
+  "rich-text#textnewsletter": {
+    "props": {
+      "textAlignment": "CENTER",
+      "textPosition": "CENTER",
+      "text": "Receba ofertas e novidades por e-mail",
+      "id": "textNewsletter",
+      "blockClass": "textNewsletter"
+    }
   },
 
   "rich-text#textproducts": {

styles/css/vtex.store-components.css

@@ -9,5 +9,4 @@
 /* Grid breakpoints */
 .newsletter {
   background: black;
-  color: white;
-}
+}