feat(product): adicionando footer newsletter

store/blocks/footer/footer.json

@@ -7,6 +7,7 @@
   },
   "footer-layout.desktop": {
     "children": [
+      "flex-layout.row#newsletter",
       "flex-layout.row#footer-1-desktop",
       "flex-layout.row#footer-2-desktop",
       "flex-layout.row#footer-3-desktop"
@@ -27,6 +28,21 @@
       "paddingBottom": 3
     }
   },
+
+  "flex-layout.row#newsletter":{
+    "children": ["newsletter"],
+    "props": {
+      "blockClass": "newsletter__footer"
+    }
+  },
+
+  "newsletter": {
+    "props": {
+      "label": "Asssine nossa newsletter",
+      "placeholder": "Digite seu e-mail"
+    }
+  },
+
   "social-networks": {
     "props": {
       "socialNetworks": [
@@ -82,6 +98,7 @@
   },
   "footer-layout.mobile": {
     "children": [
+      "flex-layout.row#newsletter",
       "flex-layout.row#1-footer-mobile",
       "flex-layout.row#2-footer-mobile"
     ]

styles/css/vtex.flex-layout.css

@@ -268,7 +268,7 @@
 .flexColChild--info-availability .flexRow--message-availability :global(.vtex-store-components-3-x-form) :global(.vtex-styleguide-9-x-input) {
   height: 40px;
   display: flex;
-  align-items: center;
+  align-items: flex-start;
   justify-content: flex-start;
   padding: 0 0 0 14px;
   font-family: "Open Sans", sans-serif;
@@ -314,4 +314,141 @@
   font-size: 18px;
   line-height: 25px;
   color: #fff;
+}
+
+.flexRow--newsletter__footer {
+  height: 175px;
+}
+.flexRow--newsletter__footer :global(.vtex-store-components-3-x-container) {
+  padding: 0;
+  margin: 0;
+}
+.flexRow--newsletter__footer .flexRowContent--newsletter__footer {
+  padding: 32px 0 16px 0;
+  width: 100%;
+  background: #000;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.flexRow--newsletter__footer .flexRowContent--newsletter__footer .stretchChildrenWidth {
+  width: 774px !important;
+  height: 127px;
+}
+@media (min-width: 769px) and (max-width: 1024px), (min-width: 280px) and (max-width: 768px) {
+  .flexRow--newsletter__footer .flexRowContent--newsletter__footer .stretchChildrenWidth {
+    width: 100% !important;
+    height: auto;
+  }
+}
+.flexRow--newsletter__footer .flexRowContent--newsletter__footer .stretchChildrenWidth :global(.vtex-store-components-3-x-label) {
+  font-family: "Open Sans", sans-serif;
+  font-style: normal;
+  font-weight: 400;
+  font-size: 24px;
+  line-height: 38px;
+  color: #fff;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  gap: 16px;
+  margin-bottom: 16px;
+}
+.flexRow--newsletter__footer .flexRowContent--newsletter__footer .stretchChildrenWidth :global(.vtex-store-components-3-x-label)::after {
+  content: "Receba ofertas e  novidades por e-mail";
+  font-family: "Open Sans", sans-serif;
+  font-style: normal;
+  font-weight: 400;
+  font-size: 18px;
+  line-height: 25px;
+  color: #929292;
+}
+@media (min-width: 769px) and (max-width: 1024px), (min-width: 280px) and (max-width: 768px) {
+  .flexRow--newsletter__footer .flexRowContent--newsletter__footer .stretchChildrenWidth :global(.vtex-store-components-3-x-label)::after {
+    font-size: 16px;
+    line-height: 22px;
+  }
+}
+.flexRow--newsletter__footer .flexRowContent--newsletter__footer .stretchChildrenWidth :global(.vtex-store-components-3-x-form) {
+  max-width: 774px;
+}
+.flexRow--newsletter__footer .flexRowContent--newsletter__footer .stretchChildrenWidth :global(.vtex-store-components-3-x-inputGroup) {
+  padding: 0;
+  margin: 0;
+  display: flex;
+  align-items: center;
+}
+.flexRow--newsletter__footer .flexRowContent--newsletter__footer .stretchChildrenWidth :global(.vtex-input) {
+  width: 690px;
+  height: 32px;
+}
+@media (min-width: 769px) and (max-width: 1024px), (min-width: 280px) and (max-width: 768px) {
+  .flexRow--newsletter__footer .flexRowContent--newsletter__footer .stretchChildrenWidth :global(.vtex-input) {
+    width: calc(100% - 84px);
+  }
+}
+.flexRow--newsletter__footer .flexRowContent--newsletter__footer .stretchChildrenWidth :global(.vtex-input) :global(.vtex-input-prefix__group) {
+  border: none;
+  height: 32px;
+}
+.flexRow--newsletter__footer .flexRowContent--newsletter__footer .stretchChildrenWidth :global(.vtex-input) :global(.vtex-styleguide-9-x-input) {
+  background: transparent;
+  border: none;
+  border-bottom: 1px solid #929292;
+  font-family: "Open Sans", sans-serif;
+  font-style: normal;
+  font-weight: 400;
+  font-size: 18px;
+  line-height: 25px;
+  color: #929292;
+  padding: 0;
+  height: 32px;
+}
+@media (min-width: 769px) and (max-width: 1024px), (min-width: 280px) and (max-width: 768px) {
+  .flexRow--newsletter__footer .flexRowContent--newsletter__footer .stretchChildrenWidth :global(.vtex-input) :global(.vtex-styleguide-9-x-input) {
+    padding-left: 20px;
+    font-size: 12px;
+    line-height: 16px;
+  }
+}
+.flexRow--newsletter__footer .flexRowContent--newsletter__footer .stretchChildrenWidth :global(.vtex-input) :global(.vtex-styleguide-9-x-input)::placeholder {
+  font-family: "Open Sans", sans-serif;
+  font-style: normal;
+  font-weight: 400;
+  font-size: 18px;
+  line-height: 25px;
+  color: #929292;
+}
+@media (min-width: 769px) and (max-width: 1024px), (min-width: 280px) and (max-width: 768px) {
+  .flexRow--newsletter__footer .flexRowContent--newsletter__footer .stretchChildrenWidth :global(.vtex-input) :global(.vtex-styleguide-9-x-input)::placeholder {
+    padding-left: 20px;
+    font-size: 12px;
+    line-height: 16px;
+  }
+}
+.flexRow--newsletter__footer .flexRowContent--newsletter__footer .stretchChildrenWidth :global(.vtex-store-components-3-x-buttonContainer) {
+  padding: 0;
+  margin: 0;
+  width: 84px;
+}
+.flexRow--newsletter__footer .flexRowContent--newsletter__footer .stretchChildrenWidth :global(.vtex-store-components-3-x-buttonContainer) :global(.vtex-button) {
+  padding: 0;
+  border: none;
+  background: transparent;
+  height: 32px;
+  width: 100%;
+}
+.flexRow--newsletter__footer .flexRowContent--newsletter__footer .stretchChildrenWidth :global(.vtex-store-components-3-x-buttonContainer) :global(.vtex-button) :global(.vtex-button__label) {
+  background: transparent;
+  border: none;
+  border-bottom: 3px solid #BFBFBF;
+  cursor: pointer;
+  font-family: "Open Sans", sans-serif;
+  font-style: normal;
+  font-weight: 700;
+  font-size: 14px;
+  line-height: 19px;
+  color: #fff;
+  height: 32px;
 }

styles/css/vtex.store-components.css

@@ -378,7 +378,7 @@
 }
 @media (min-width: 280px) and (max-width: 768px) {
   .shippingTable .shippingTableHead .shippingTableRow {
-    grid-template-columns: repeat(3, 1fr);
+    grid-template-columns: 30% 18% 39%;
   }
 }
 .shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryName,
@@ -424,7 +424,8 @@
 }
 @media (min-width: 280px) and (max-width: 768px) {
   .shippingTable .shippingTableBody .shippingTableRow {
-    grid-template-columns: repeat(3, 1fr);
+    grid-template-columns: 30% 18% 39%;
+    column-gap: 16px;
   }
 }
 .shippingTable .shippingTableBody .shippingTableRow .shippingTableCellDeliveryName {

styles/css/vtex.store-footer.css

@@ -1,11 +1,13 @@
-.row--menu-row {
+/*
-  padding-right: 24px;
+0 - 600PX: Phone
-}
+600 - 900px: Table portrait
-
+900 - 1200px: Tablet landscape
-.row--menu-row .rowContainer {
+[1200 - 1800] is where our nortal styles apply
-  align-items: flex-start;
+1800px + : Big desktop
-}
+*/
-
+/* Media Query M3 */
-.row--payment-methods {
+@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700&display=swap");
-  padding-top: 16px;
+/* Grid breakpoints */
-}
+.footerLayout {
+  background: #000;
+}

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

@@ -409,7 +409,7 @@
       grid-template-areas: "entrega frete prazo";
 
       @media #{$mq-mobile}{
-        grid-template-columns: repeat(3, 1fr);
+        grid-template-columns: 30% 18% 39%;
       }
 
       .shippingTableHeadDeliveryName,
@@ -458,7 +458,8 @@
       margin-top: 15px;
 
       @media #{$mq-mobile}{
-        grid-template-columns: repeat(3, 1fr);
+        grid-template-columns: 30% 18% 39%;
+        column-gap: 16px;
       }
 
       .shippingTableCellDeliveryName {

styles/sass/pages/product/vtexFlexLayout/vtex.flex-layout.scss

@@ -281,7 +281,7 @@
       :global(.vtex-styleguide-9-x-input) {
         height: 40px;
         display: flex;
-        align-items: center;
+        align-items: flex-start;
         justify-content: flex-start;
         padding: 0 0 0 14px;
         font-family: $font-family;
@@ -338,3 +338,153 @@
 
   }
 }
+.flexRow--newsletter__footer {
+  height: 175px;
+
+  :global(.vtex-store-components-3-x-container ){
+    padding: 0;
+    margin: 0;
+  }
+
+  .flexRowContent--newsletter__footer {
+    padding: 32px 0 16px 0;
+    width: 100%;
+    background: $color-black0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    .stretchChildrenWidth {
+      width: 774px !important;
+      height: 127px;
+
+      @media #{$mq-tablet}, #{$mq-mobile}{
+        width: 100% !important;
+        height: auto;
+      }
+
+      :global(.vtex-store-components-3-x-label) {
+        font-family: $font-family;
+        font-style: normal;
+        font-weight: 400;
+        font-size: 24px;
+        line-height: 38px;
+        color: $color-white;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-direction: column;
+        gap: 16px;
+        margin-bottom: 16px;
+
+        &::after {
+          content: "Receba ofertas e  novidades por e-mail";
+          font-family: $font-family;
+          font-style: normal;
+          font-weight: 400;
+          font-size: 18px;
+          line-height: 25px;
+          color: $color-gray6;
+
+          @media #{$mq-tablet}, #{$mq-mobile} {
+            font-size: 16px;
+            line-height: 22px;
+          }
+        }
+      }
+
+      :global(.vtex-store-components-3-x-form) {
+        max-width: 774px;
+      }
+
+      :global(.vtex-store-components-3-x-inputGroup) {
+        padding: 0;
+        margin: 0;
+        display: flex;
+        align-items: center;
+      }
+
+      :global(.vtex-input ) {
+        width: 690px;
+        height: 32px;
+
+        @media #{$mq-tablet}, #{$mq-mobile}{
+          width: calc(100% - 84px);
+        }
+
+        :global(.vtex-input-prefix__group) {
+          border: none;
+          height: 32px;
+        }
+
+        :global(.vtex-styleguide-9-x-input){
+          background: transparent;
+          border: none;
+          border-bottom: 1px solid $color-gray6;
+          font-family: $font-family;
+          font-style: normal;
+          font-weight: 400;
+          font-size: 18px;
+          line-height: 25px;
+          color: $color-gray6;
+          padding: 0;
+          height: 32px;
+
+          @media #{$mq-tablet}, #{$mq-mobile} {
+            padding-left: 20px;
+            font-size: 12px;
+            line-height: 16px;
+          }
+
+          &::placeholder {
+            font-family: $font-family;
+            font-style: normal;
+            font-weight: 400;
+            font-size: 18px;
+            line-height: 25px;
+            color: $color-gray6;
+
+            @media #{$mq-tablet}, #{$mq-mobile} {
+              padding-left: 20px;
+              font-size: 12px;
+              line-height: 16px;
+            }
+          }
+        }
+
+      }
+
+
+      :global(.vtex-store-components-3-x-buttonContainer) {
+        padding: 0;
+        margin: 0;
+        width: 84px;
+
+        :global(.vtex-button) {
+          padding: 0;
+          border: none;
+          background: transparent;
+          height: 32px;
+          width: 100%;
+
+          :global(.vtex-button__label) {
+            background: transparent;
+            border: none;
+            border-bottom: 3px solid #BFBFBF;
+            cursor: pointer;
+            font-family: $font-family;
+            font-style: normal;
+            font-weight: 700;
+            font-size: 14px;
+            line-height: 19px;
+            color: $color-white;
+            height: 32px;
+
+          }
+
+        }
+      }
+    }
+  }
+}
+

styles/sass/pages/product/vtexStoreFooter/vtex.store-footer.scss

@@ -0,0 +1,3 @@
+.footerLayout {
+  background: $color-black0;
+}