feat:#3 Slider produtos

store/blocks/pdp/product-assembly.jsonc

@@ -3,46 +3,26 @@
     "props": {
       "position": "bottom"
     },
-    "children": ["flex-layout.row#buy-button"]
+    "children": ["html#buy-button"]
-  },
-  "product-assembly-options": {
-    "children": [
-      "flex-layout.row#product-assembly-options",
-      "assembly-option-input-values"
-    ]
   },
+
   "assembly-option-input-values": {
     "props": {
       "optionsDisplay": "box"
     }
   },
-  "flex-layout.row#product-assembly-options": {
+
-    "props": {
-      "colGap": 2,
-      "preserveLayoutOnMobile": true,
-      "colSizing": "auto"
-    },
-    "children": [
-      "flex-layout.col#product-assembly-image",
-      "flex-layout.col#product-assembly-middle",
-      "flex-layout.col#product-assembly-quantity"
-    ]
-  },
   "flex-layout.col#product-assembly-quantity": {
     "props": {
       "verticalAlign": "middle"
     },
-    "children": [
+    "children": ["assembly-option-item-quantity-selector"]
-      "assembly-option-item-quantity-selector"
-    ]
   },
   "flex-layout.col#product-assembly-image": {
     "props": {
       "marginRight": 4
     },
-    "children": [
+    "children": ["assembly-option-item-image"]
-      "assembly-option-item-image"
-    ]
   },
   "flex-layout.col#product-assembly-middle": {
     "props": {
@@ -96,9 +76,7 @@
       "horizontalAlign": "right",
       "verticalAlign": "middle"
     },
-    "children": [
+    "children": ["assembly-option-item-quantity-selector"]
-      "assembly-option-item-quantity-selector"
-    ]
   },
   "assembly-option-item-customize#sec-level": {
     "props": {

store/blocks/pdp/product-specifications-table.jsonc

@@ -1,83 +1,63 @@
 {
-  "product-specification-group#table": {
+  // "product-specification-group#table": {
-    "children": [
+  //   "children": ["flex-layout.row#spec-group"]
-      "flex-layout.row#spec-group"
+  // },
-    ]
+  // "flex-layout.row#spec-group": {
-  },
+  //   "props": {
-  "flex-layout.row#spec-group": {
+  //     "blockClass": "productSpecificationGroup"
-    "props": {
+  //   },
-      "blockClass": "productSpecificationGroup"
+  //   "children": ["flex-layout.col#spec-group"]
-    },
+  // },
-    "children": [
+  // "flex-layout.col#spec-group": {
-      "flex-layout.col#spec-group"
+  //   "children": ["flex-layout.row#spec-group-name", "product-specification"]
-    ]
+  // },
-  },
+  // "flex-layout.row#spec-group-name": {
-  "flex-layout.col#spec-group": {
+  //   "props": {
-    "children": [
+  //     "blockClass": "productSpecificationGroupName"
-      "flex-layout.row#spec-group-name",
+  //   },
-      "product-specification"
+  //   "children": ["product-specification-text#group"]
-    ]
+  // },
-  },
+  // "product-specification": {
-  "flex-layout.row#spec-group-name": {
+  //   "children": ["flex-layout.row#spec-item"]
-    "props": {
+  // },
-      "blockClass": "productSpecificationGroupName"
+  // "flex-layout.row#spec-item": {
-    },
+  //   "props": {
-    "children": [
+  //     "blockClass": "productSpecification"
-      "product-specification-text#group"
+  //   },
-    ]
+  //   "children": ["flex-layout.col#spec-name", "flex-layout.col#spec-value"]
-  },
+  // },
-  "product-specification": {
+  // "flex-layout.col#spec-name": {
-    "children": [
+  //   "props": {
-      "flex-layout.row#spec-item"
+  //     "blockClass": "productSpecificationName",
-    ]
+  //     "width": {
-  },
+  //       "mobile": "50%",
-  "flex-layout.row#spec-item": {
+  //       "desktop": "25%"
-    "props": {
+  //     }
-      "blockClass": "productSpecification"
+  //   },
-    },
+  //   "children": ["product-specification-text#specification"]
-    "children": [
+  // },
-      "flex-layout.col#spec-name",
+  // "flex-layout.col#spec-value": {
-      "flex-layout.col#spec-value"
+  //   "props": {
-    ]
+  //     "blockClass": "productSpecificationValue"
-  },
+  //   },
-  "flex-layout.col#spec-name": {
+  //   "children": ["product-specification-values"]
-    "props": {
+  // },
-      "blockClass": "productSpecificationName",
+  // "product-specification-values": {
-      "width": {
+  //   "children": ["product-specification-text#value"]
-        "mobile": "50%",
+  // },
-        "desktop": "25%"
+  // "product-specification-text#group": {
-      }
+  //   "props": {
-    },
+  //     "message": "{groupName}"
-    "children": [
+  //   }
-      "product-specification-text#specification"
+  // },
-    ]
+  // "product-specification-text#specification": {
-  },
+  //   "props": {
-  "flex-layout.col#spec-value": {
+  //     "message": "{specificationName}"
-    "props": {
+  //   }
-      "blockClass": "productSpecificationValue"
+  // },
-    },
+  // "product-specification-text#value": {
-    "children": [
+  //   "props": {
-      "product-specification-values"
+  //     "message": "{specificationValue}"
-    ]
+  //   }
-  },
+  // }
-  "product-specification-values": {
-    "children": [
-      "product-specification-text#value"
-    ]
-  },
-  "product-specification-text#group": {
-    "props": {
-      "message": "{groupName}"
-    }
-  },
-  "product-specification-text#specification": {
-    "props": {
-      "message": "{specificationName}"
-    }
-  },
-  "product-specification-text#value": {
-    "props": {
-      "message": "{specificationValue}"
-    }
-  }
 }

store/blocks/product-price.jsonc

@@ -6,9 +6,7 @@
       "preventHorizontalStretch": true,
       "marginBottom": 4
     },
-    "children": [
+    "children": ["product-selling-price"]
-      "product-selling-price"
-    ]
   },
 
   "flex-layout.row#list-price-savings": {
@@ -19,9 +17,6 @@
       "marginBottom": 2,
       "marginTop": 5
     },
-    "children": [
+    "children": ["product-list-price", "product-price-savings"]
-      "product-list-price",
-      "product-price-savings"
-    ]
   }
 }

store/blocks/product-summary/product-summary-list.jsonc

@@ -1,5 +1,5 @@
 {
-  "product-summary.shelf#listLayout": {
+  "product-summary.shelf# Layout": {
     "props": {
       "blockClass": "listLayout"
     },
@@ -9,14 +9,10 @@
     ]
   },
   "responsive-layout.desktop#productSummaryList": {
-    "children": [
+    "children": ["flex-layout.row#summaryListDesktop"]
-      "flex-layout.row#summaryListDesktop"
-    ]
   },
   "responsive-layout.mobile#productSummaryList": {
-    "children": [
+    "children": ["flex-layout.row#summaryListMobile"]
-      "flex-layout.row#summaryListMobile"
-    ]
   },
   "product-price-savings#summaryPercentage": {
     "props": {
@@ -36,7 +32,7 @@
     ]
   },
   "flex-layout.row#summaryListDesktop": {
-    "props":{
+    "props": {
       "fullWidth": true,
       "colSizing": "auto",
       "blockClass": "summaryListDesktop"
@@ -69,9 +65,7 @@
     ]
   },
   "flex-layout.row#productSpecifications": {
-    "children": [
+    "children": ["product-specification-group#summary"]
-      "product-specification-group#summary"
-    ]
   },
   "product-summary-name#summaryListDesktop": {
     "props": {
@@ -100,18 +94,13 @@
       "colSizing": "auto",
       "colGap": 5
     },
-    "children": [
+    "children": ["add-to-cart-button", "flex-layout.row#buyNowButton"]
-      "add-to-cart-button",
-      "flex-layout.row#buyNowButton"
-    ]
   },
   "flex-layout.row#buyNowButton": {
     "props": {
       "blockClass": "buyNowButton"
     },
-    "children": [
+    "children": ["add-to-cart-button#buyNow"]
-      "add-to-cart-button#buyNow"
-    ]
   },
 
   "add-to-cart-button#buyNow": {
@@ -123,16 +112,12 @@
     }
   },
   "flex-layout.col#priceSummaryListDesktop": {
-    "children": [
+    "children": ["product-selling-price#summary", "product-list-price#summary"]
-      "product-selling-price#summary",
-      "product-list-price#summary"
-    ]
   },
   "stack-layout#summaryListDesktop": {
     "children": [
       "product-summary-image#summaryListDesktop",
-      "vtex.product-highlights@2.x:product-highlights#collection",
+      "vtex.product-highlights@2.x:product-highlights#collection" // Check quickview.jsonc
-      "modal-trigger#quickview" // Check quickview.jsonc
     ]
   },
   "product-summary-image#summaryListDesktop": {
@@ -144,7 +129,7 @@
     }
   },
   "flex-layout.row#summaryListMobile": {
-    "props":{
+    "props": {
       "preserveLayoutOnMobile": true,
       "colSizing": "auto",
       "blockClass": "summaryListMobile",
@@ -158,8 +143,7 @@
   "stack-layout#summaryListMobile": {
     "children": [
       "product-summary-image#summaryListMobile",
-      "vtex.product-highlights@2.x:product-highlights#collection",
+      "vtex.product-highlights@2.x:product-highlights#collection" // Check quickview.jsonc
-      "modal-trigger#quickview" // Check quickview.jsonc
     ]
   },
   "product-summary-image#summaryListMobile": {

store/blocks/product-summary/product-summary.jsonc

@@ -6,9 +6,7 @@
       "flex-layout.col#productRating",
       "product-summary-space",
       "product-list-price#summary",
-      "flex-layout.row#selling-price-savings",
+      "flex-layout.row#selling-price-savings"
-      "product-installments#summary",
-      "add-to-cart-button"
     ]
   },
   "flex-layout.col#productRating": {
@@ -21,8 +19,7 @@
   "stack-layout#prodsum": {
     "children": [
       "product-summary-image#shelf",
-      "vtex.product-highlights@2.x:product-highlights#collection",
+      "vtex.product-highlights@2.x:product-highlights#collection" // Check quickview.jsonc
-      "modal-trigger#quickview" // Check quickview.jsonc
     ]
   },
 
@@ -62,7 +59,8 @@
       "colGap": 2,
       "preserveLayoutOnMobile": true,
       "preventHorizontalStretch": true,
-      "marginBottom": 4
+      "marginBottom": 4,
+      "blockClass": "container-price-slider"
     },
     "children": [
       "product-selling-price#summary",
@@ -81,10 +79,23 @@
   },
   "product-price-savings#summary": {
     "props": {
-      "markers": [
+      "markers": ["discount"],
-        "discount"
-      ],
       "blockClass": "summary"
     }
+  },
+
+  "list-context.product-list#container-products": {
+    "blocks": ["product-summary.shelf"],
+    "children": ["html#slider-layout#demo-products"]
+  },
+
+  "rich-text#slider-text": {
+    "props": {
+      "text": "#### Você também pode gostar:",
+      "textAlignment": "CENTER",
+      "textPosition": "CENTER",
+      "textColor": "#575757",
+      "blockClass": "slider-text"
+    }
   }
 }

store/blocks/search.jsonc

@@ -108,7 +108,10 @@
     }
   },
   "flex-layout.row#searchinfo": {
-    "children": ["flex-layout.col#productCount", "flex-layout.row#orderByAndSwitcher"]
+    "children": [
+      "flex-layout.col#productCount",
+      "flex-layout.row#orderByAndSwitcher"
+    ]
   },
   "flex-layout.row#orderByAndSwitcher": {
     "children": ["order-by.v2", "gallery-layout-switcher"],
@@ -254,7 +257,7 @@
           "itemsPerRow": 1
         }
       ],
-      "ListSummary": "product-summary.shelf#listLayout",
+      // "ListSummary": "product-summary.shelf#listLayout",
       "GridSummary": "product-summary.shelf"
     }
   },
@@ -272,29 +275,19 @@
     "props": {
       "name": "grid"
     },
-    "children": [
+    "children": ["icon-grid", "responsive-layout.desktop#textOptionGrid"]
-      "icon-grid",
-      "responsive-layout.desktop#textOptionGrid"
-    ]
   },
   "gallery-layout-option#list": {
     "props": {
       "name": "list"
     },
-    "children": [
+    "children": ["icon-inline-grid", "responsive-layout.desktop#textOptionList"]
-      "icon-inline-grid",
-      "responsive-layout.desktop#textOptionList"
-    ]
   },
   "responsive-layout.desktop#textOptionGrid": {
-    "children": [
+    "children": ["rich-text#option-grid"]
-      "rich-text#option-grid"
-    ]
   },
   "responsive-layout.desktop#textOptionList": {
-    "children": [
+    "children": ["rich-text#option-list"]
-      "rich-text#option-list"
-    ]
   },
   "rich-text#option-grid": {
     "props": {

styles/css/vtex.button.css

@@ -0,0 +1,12 @@
+/*
+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 */
+.buttonText {
+  font-size: 0;
+}

styles/css/vtex.flex-layout.css

@@ -1,98 +1,99 @@
-.flexRowContent--menu-link,
+@charset "UTF-8";
-.flexRowContent--main-header {
+/*
-  padding: 0 0.5rem;
+0 - 600PX: Phone
-}
+600 - 900px: Table portrait
-
+900 - 1200px: Tablet landscape
-@media screen and (min-width: 40em) {
+[1200 - 1800] is where our nortal styles apply
-  .flexRowContent--menu-link,
+1800px + : Big desktop
-  .flexRowContent--main-header {
+*/
-    padding: 0 1rem;
+/* Media Query M3 */
-  }
+/* Grid breakpoints */
-}
+.flexRowContent--container-main {
-
-@media screen and (min-width: 80rem) {
-  .flexRowContent--menu-link,
-  .flexRowContent--main-header {
-    padding: 0 0.25rem;
-  }
-}
-
-.flexRowContent--menu-link {
-  background-color: #03044e;
-  color: #fff;
-}
-
-.flexRowContent--main-header {
-  background-color: #f0f0f0;
-}
-
-.flexRowContent--main-header-mobile {
-  align-items: center;
-  padding: 0.625rem 0.5rem;
-  background-color: #f0f0f0;
-}
-
-.flexRowContent--menu-link :global(.vtex-menu-2-x-styledLink) {
-  color: #ffffff;
-  font-size: 14px;
-}
-
-.flexRowContent--main-header :global(.vtex-menu-2-x-styledLink) {
-  color: #727273;
-  font-size: 14px;
-}
-
-.flexRow--deals {
-  background-color: #0f3e99;
-  padding: 14px 0px;
-}
-
-.flexRow--deals .stretchChildrenWidth {
-  align-items: center;
-}
-
-.flexRow--deals .flexCol {
-  align-items: center;
-  margin-bottom: 5px;
-  padding-top: 5px;
-}
-
-.flexCol--filterCol {
-  max-width: 500px;
-  min-width: 230px;
-}
-
-.flexCol--productCountCol {
-  align-items: flex-start;
-}
-
-.flexCol--orderByCol {
-  align-items: flex-end;
-}
-
-.flexCol--orderByMobileCol {
-  width: 42%;
-}
-
-.flexCol--filterMobileCol {
-  width: 38%;
-}
-
-.flexRow--quickviewMainRow {
   display: flex;
-  max-height: 100%;
+  padding: 0;
+}
+@media only screen and (max-width: 1919px) {
+  .flexRowContent--container-main {
+    padding: 0 40px;
+  }
+}
+@media only screen and (max-width: 1023px) {
+  .flexRowContent--container-main {
+    display: block;
+    padding: 0;
+  }
+}
+.flexRowContent--container-main :global(.vtex-flex-layout-0-x-stretchChildrenWidth) {
+  padding: 0;
+}
+@media only screen and (max-width: 1023px) {
+  .flexRowContent--container-main :global(.vtex-flex-layout-0-x-stretchChildrenWidth) {
+    width: 100% !important;
+  }
+}
+.flexRowContent--container-main :global(.vtex-flex-layout-0-x-stretchChildrenWidth) :global(.vtex-flex-layout-0-x-flexCol--description-main) {
+  margin-left: 32px;
+}
+@media only screen and (max-width: 1023px) {
+  .flexRowContent--container-main :global(.vtex-flex-layout-0-x-stretchChildrenWidth) :global(.vtex-flex-layout-0-x-flexCol--description-main) {
+    margin-left: 0;
+  }
+}
+.flexRowContent--container-main :global(.vtex-flex-layout-0-x-stretchChildrenWidth) :global(.vtex-button) {
+  background-color: #000;
+  border: none;
+}
+.flexRowContent--container-main :global(.vtex-flex-layout-0-x-stretchChildrenWidth) :global(.vtex-button) :global(.vtex-button__label) {
+  height: fit-content;
+}
+.flexRowContent--container-main :global(.vtex-flex-layout-0-x-stretchChildrenWidth) :global(.vtex-button) :global(.vtex-button__label) :global(.vtex-add-to-cart-button-0-x-buttonDataContainer) {
+  font-size: 0;
+}
+.flexRowContent--container-main :global(.vtex-flex-layout-0-x-stretchChildrenWidth) :global(.vtex-button) :global(.vtex-button__label) :global(.vtex-add-to-cart-button-0-x-buttonDataContainer)::after {
+  font-family: "Open sans", sans-serif;
+  content: "ADICIONAR À SACOLA";
+  font-size: 18px;
+  font-weight: 400;
+  line-height: 22px;
 }
 
-.flexColChild--quickviewDetails:first-child {
+.flexRow--container-price-slider {
-  overflow-y: auto;
+  display: flex;
-  height: 66% !important;
+  justify-content: center;
-  overflow-x: hidden;
 }
 
-.flexColChild--quickviewDetails:last-child {
+@media only screen and (max-width: 1023px) {
-  height: 34% !important;
+  .flexRowContent--product-description {
+    display: block;
+  }
+}
+@media only screen and (max-width: 1023px) {
+  .flexRowContent--product-description :global(.vtex-flex-layout-0-x-stretchChildrenWidth) {
+    width: 100% !important;
+    display: block;
+  }
 }
 
-.flexRow--addToCartRow {
+@media only screen and (max-width: 1023px) {
-  padding-bottom: 1rem;
+  .flexRow--product-description :global(.vtex-store-components-3-x-container) {
+    padding: 0 !important;
+    margin: 0 !important;
+  }
+}
+
+.flexRow--container-newsletter {
+  margin-top: 64px;
+  width: 100%;
+  background-color: #000;
+}
+.flexRow--container-newsletter .flexRowContent--container-newsletter {
+  display: flex;
+  flex-direction: column;
+}
+.flexRow--container-newsletter .flexRowContent--container-newsletter .stretchChildrenWidth {
+  width: 100% !important;
+}
+.flexRow--container-newsletter .flexRowContent--container-newsletter .flexRowContent--text-newsletter {
+  display: flex;
+  flex-direction: column;
 }

styles/css/vtex.product-highlights.css

@@ -1,12 +1,12 @@
-.productHighlightWrapper--collection {
+/*
-  position: absolute;
+0 - 600PX: Phone
-  top: 10px;
+600 - 900px: Table portrait
-  left: 5px;
+900 - 1200px: Tablet landscape
-  width: 200px;
+[1200 - 1800] is where our nortal styles apply
-}
+1800px + : Big desktop
-
+*/
-.productHighlightText {
+/* Media Query M3 */
-  background: antiquewhite;
+/* Grid breakpoints */
-  border-radius: 20px;
+.productHighlightWrapper {
-  padding: 5px 10px;
+  display: none;
 }

styles/css/vtex.product-summary.css

@@ -1,42 +1,18 @@
-.skuSelectorContainer--quickview .skuSelectorItemImage .frameAround, .skuSelectorContainer--quickview .skuSelectorItemImage .skuSelectorInternalBox {
+/*
-  border-radius: 50%;
+0 - 600PX: Phone
-}
+600 - 900px: Table portrait
-
+900 - 1200px: Tablet landscape
-.container :global(.vtex-modal-layout-0-x-triggerContainer) {
+[1200 - 1800] is where our nortal styles apply
-  opacity: 0;
+1800px + : Big desktop
-  transition: opacity 200ms ease-in-out;
+*/
-}
+/* Media Query M3 */
-
+/* Grid breakpoints */
-.container:hover :global(.vtex-modal-layout-0-x-triggerContainer) {
-  opacity: 1;
-}
-
-@media screen and (max-width: 40em) {
-  .container :global(.vtex-modal-layout-0-x-triggerContainer) {
-    display: none;
-  }
-}
-
 .nameContainer {
-  justify-content: start;
+  padding: 16px 0 8px 0;
-  padding-top: 1rem;
-  padding-bottom: 1rem;
 }
-
+.nameContainer .productNameContainer .productBrand {
-.brandName {
+  font-family: "Open Sans", sans-serif;
-  font-weight: 600;
   font-size: 18px;
-  color: #2E2E2E;
+  font-weight: 400;
-}
+  line-height: 24px;
-
-.container {
-  text-align: start;
-}
-
-.imageContainer {
-  text-align: center;
-}
-
-.image {
-  border-radius: 0.25rem;
 }

styles/css/vtex.slider-layout.css

@@ -1,31 +1,26 @@
+/*
+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 */
 .sliderLayoutContainer {
-  justify-content: center;
+  padding: 0 67px 36px 67px;
+}
+.sliderLayoutContainer .slide--carousel {
+  margin-right: 16px;
+}
+.sliderLayoutContainer .paginationDotsContainer .paginationDot--isActive {
+  background-color: #000;
 }
 
-.sliderLayoutContainer--carousel {
+.sliderRightArrow {
-  background-color: #F0F0F0;
+  margin-right: 25px;
-  min-height: 450px;
 }
 
-.sliderTrackContainer {
+.sliderLeftArrow {
-  max-width: 100%;
+  margin-left: 25px;
-}
-
-.paginationDotsContainer {
-  margin-top: .5rem;
-  margin-bottom: .5rem;
-}
-
-.layoutContainer--shelf {
-  margin-top: 20px;
-  margin-bottom: 20px;
-  max-width: 96rem;
-  min-height: 550px;
-}
-
-.slide--shelf {
-  margin-bottom: 25px;
-  padding-left: .5rem;
-  padding-right: .5rem;
-  min-height: 550px;
 }

styles/css/vtex.stack-layout.css

@@ -1,10 +1,12 @@
-.stackItem--product {
+/*
-  width: 100%;
+0 - 600PX: Phone
-  min-height: 257px
+600 - 900px: Table portrait
-}
+900 - 1200px: Tablet landscape
-
+[1200 - 1800] is where our nortal styles apply
-.stackItem--quickview {
+1800px + : Big desktop
-  right: 0;
+*/
-  top: 0;
+/* Media Query M3 */
-  left: auto;
+/* Grid breakpoints */
+.stackItem--first .stackItem {
+  display: none;
 }

styles/sass/pages/product/vtex.product-quantity.scss

@@ -0,0 +1,42 @@
+.quantitySelectorContainer {
+  margin-bottom: 0;
+  margin-right: 16px;
+  @include mq(sm, max) {
+    margin-bottom: 8px;
+  }
+  :global(.vtex-numeric-stepper__input) {
+    height: 49px;
+    width: 31px;
+    font-size: 16px;
+    line-height: 22px;
+    border-left: 0;
+    border-right: 0;
+    border-top: 1px solid $color-gray4;
+    border-bottom: 1px solid $color-gray4;
+    color: $color-gray6;
+  }
+  :global(.vtex-numeric-stepper__plus-button) {
+    height: 49px;
+    font-size: 16px;
+    line-height: 22px;
+    border-right: 1px solid $color-gray4;
+    border-bottom: 1px solid $color-gray4;
+    border-top: 1px solid $color-gray4;
+    background: $color-white;
+    color: $color-black;
+  }
+  :global(.vtex-numeric-stepper__minus-button) {
+    height: 49px;
+    width: 10px;
+    font-size: 16px;
+    line-height: 22px;
+    border-left: 1px solid $color-gray4;
+    border-bottom: 1px solid $color-gray4;
+    border-top: 1px solid $color-gray4;
+    background: $color-white;
+    color: $color-black;
+  }
+  .quantitySelectorTitle {
+    display: none;
+  }
+}

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

@@ -0,0 +1,76 @@
+.heading {
+  margin: 16px 0 8px 0;
+}
+
+.wrapper--message-newsletter {
+  margin-top: 16px;
+
+  .paragraph--message-newsletter {
+    font-family: "Open Sans", sans-serif;
+    font-size: 24px;
+    font-weight: 400;
+    line-height: 38px;
+    color: $color-white;
+    margin-bottom: 0;
+  }
+}
+
+.paragraph {
+  font-family: "Open Sans", sans-serif;
+  font-size: 18px;
+  color: $color-gray6;
+  line-height: 24px;
+  font-weight: 400;
+  @include mq(sm, max) {
+    font-size: 16px;
+  }
+}
+
+.container--title-newsletter {
+  justify-content: center;
+  width: 100%;
+  margin: 32px 0 16px 0;
+  padding: 0 40px;
+  @include mq(md, max) {
+    margin: 64px 0 16px 0;
+  }
+  @include mq(sm, max) {
+    padding: 0;
+  }
+  .wrapper--title-newsletter {
+    align-items: center;
+    .paragraph--title-newsletter {
+      margin: 0;
+      font-weight: 400;
+      font-size: 24px;
+      line-height: 38px;
+      color: $color-white;
+    }
+  }
+}
+
+.wrapper--email-phrase-newsletter {
+  display: flex;
+  justify-content: center;
+  width: 100%;
+  margin-bottom: 16px;
+  padding: 0 40px;
+  @include mq(sm, max) {
+    padding: 0;
+  }
+  .wrapper--email-phrase-newsletter {
+    display: flex;
+    align-items: center;
+    .paragraph--email-phrase-newsletter {
+      margin: 0;
+      font-weight: 400;
+      font-size: 18px;
+      line-height: 25px;
+      color: $color-gray6;
+      @include mq(md, max) {
+        font-size: 16px;
+        line-height: 22px;
+      }
+    }
+  }
+}