diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index 37a0f4e..9a065e0 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -5,7 +5,8 @@ "condition-layout.product#availability", "tab-layout#description", "flex-layout.row#shelf", - "product-questions-and-answers" + "product-questions-and-answers", + "newsletter" ] }, "html#breadcrumb": { @@ -245,6 +246,14 @@ "children": ["vtex.store-components:product-name"] }, + "newsletter": { + "props": { + "blockClass": "newsletter", + "label": "Assine nossa Newsletter", + "placeholder": "Digite seu e-mail" + } + }, + "sku-selector": { "props": { "variationsSpacing": 3, diff --git a/styles/css/vtex.slider-layout.css b/styles/css/vtex.slider-layout.css index 9d49fec..004650a 100644 --- a/styles/css/vtex.slider-layout.css +++ b/styles/css/vtex.slider-layout.css @@ -14,6 +14,10 @@ } .sliderLayoutContainer--carousel .sliderTrackContainer { margin: 32px 27px 32px 27px; + padding-bottom: 32px; +} +.sliderLayoutContainer--carousel .sliderTrackContainer .sliderTrack { + margin-bottom: 32px; } .sliderLayoutContainer--carousel .slide { width: 100%; diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index e800822..28ea8dc 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -11,9 +11,6 @@ .container { padding: 0 40px; } -.container .newsletter { - background: red; -} .container .productNameContainer--quickview { font-weight: 300; font-size: 20px; @@ -319,4 +316,73 @@ max-width: 90px; max-height: 90px !important; margin: 0 16px 0 0; +} + +.newsletter--newsletter { + display: flex; + flex-direction: column; + height: 175px; + background-color: black; + padding-bottom: 16px; + padding-top: 32px; +} +.newsletter--newsletter .container--newsletter { + margin: 0; +} +.newsletter--newsletter .container--newsletter .form--newsletter { + max-width: 774px !important; +} +.newsletter--newsletter .container--newsletter .form--newsletter .label--newsletter { + display: flex; + flex-direction: column; + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 400; + font-size: 24px; + line-height: 38px; + text-align: center; + color: #ffffff; +} +.newsletter--newsletter .container--newsletter .form--newsletter .label--newsletter::after { + content: "Receba ofertas e novidades por e-mail"; + font-family: "Open Sans", sans-serif; + font-size: 18px; + line-height: 25px; + color: #929292; + margin-top: 16px; +} +.newsletter--newsletter .container--newsletter .form--newsletter .inputGroup--newsletter { + padding-top: 16px; + border-bottom: 1px solid #929292; +} +.newsletter--newsletter .container--newsletter .form--newsletter .inputGroup--newsletter :global(.vtex-input-prefix__group) { + border: none; + height: 32px; + padding-bottom: 7px; +} +.newsletter--newsletter .container--newsletter .form--newsletter .inputGroup--newsletter :global(.vtex-input-prefix__group) :global(.vtex-styleguide-9-x-input) { + background-color: transparent; + padding: 0; + font-family: "Open Sans", sans-serif; + font-size: 18px; + line-height: 25px; + color: #929292; +} +.newsletter--newsletter .container--newsletter .form--newsletter .inputGroup--newsletter .buttonContainer--newsletter { + padding: 0; + border-bottom: 3px solid white; + height: 32px; +} +.newsletter--newsletter .container--newsletter .form--newsletter .inputGroup--newsletter .buttonContainer--newsletter :global(.vtex-button) { + background-color: transparent; + border: none; +} +.newsletter--newsletter .container--newsletter .form--newsletter .inputGroup--newsletter .buttonContainer--newsletter :global(.vtex-button) :global(.vtex-button__label) { + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 700; + font-size: 14px; + line-height: 19px; + color: #ffffff; + padding: 0px 16px 13px 16px !important; } \ No newline at end of file diff --git a/styles/sass/pages/product/vtex.rich-text.scss b/styles/sass/pages/product/vtex.rich-text.scss index e69de29..8b13789 100644 --- a/styles/sass/pages/product/vtex.rich-text.scss +++ b/styles/sass/pages/product/vtex.rich-text.scss @@ -0,0 +1 @@ + diff --git a/styles/sass/pages/product/vtex.slider-layout.scss b/styles/sass/pages/product/vtex.slider-layout.scss index 2826fee..c87a094 100644 --- a/styles/sass/pages/product/vtex.slider-layout.scss +++ b/styles/sass/pages/product/vtex.slider-layout.scss @@ -4,6 +4,11 @@ .sliderTrackContainer { margin: 32px 27px 32px 27px; + padding-bottom: 32px; + + .sliderTrack { + margin-bottom: 32px; + } } .slide { diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index 83b9531..ef7ac46 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -1,8 +1,5 @@ .container { padding: 0 40px; - .newsletter { - background: red; - } .productNameContainer--quickview { font-weight: 300; @@ -350,3 +347,81 @@ max-height: 90px !important; margin: 0 16px 0 0; } + +.newsletter--newsletter { + display: flex; + flex-direction: column; + height: 175px; + background-color: black; + padding-bottom: 16px; + padding-top: 32px; + + .container--newsletter { + margin: 0; + + .form--newsletter { + max-width: 774px !important; + .label--newsletter { + display: flex; + flex-direction: column; + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 400; + font-size: 24px; + line-height: 38px; + text-align: center; + color: #ffffff; + + &::after { + content: "Receba ofertas e novidades por e-mail"; + font-family: "Open Sans", sans-serif; + font-size: 18px; + line-height: 25px; + color: #929292; + margin-top: 16px; + } + } + + .inputGroup--newsletter { + padding-top: 16px; + border-bottom: 1px solid #929292; + + :global(.vtex-input-prefix__group) { + border: none; + height: 32px; + padding-bottom: 7px; + + :global(.vtex-styleguide-9-x-input) { + background-color: transparent; + padding: 0; + font-family: "Open Sans", sans-serif; + font-size: 18px; + line-height: 25px; + color: #929292; + } + } + + .buttonContainer--newsletter { + padding: 0; + border-bottom: 3px solid white; + height: 32px; + + :global(.vtex-button) { + background-color: transparent; + border: none; + + :global(.vtex-button__label) { + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 700; + font-size: 14px; + line-height: 19px; + color: #ffffff; + padding: 0px 16px 13px 16px !important; + } + } + } + } + } + } +}