diff --git a/react/Newsletter.tsx b/react/Newsletter.tsx
new file mode 100644
index 0000000..a5771bd
--- /dev/null
+++ b/react/Newsletter.tsx
@@ -0,0 +1,3 @@
+import Newsletter from './components/Newsletter/Newsletter';
+
+export default Newsletter;
diff --git a/react/components/Newsletter/Newsletter.tsx b/react/components/Newsletter/Newsletter.tsx
new file mode 100644
index 0000000..b829a2a
--- /dev/null
+++ b/react/components/Newsletter/Newsletter.tsx
@@ -0,0 +1,17 @@
+import React from 'react'
+import styles from './styles.css'
+
+const Newsletter = () => {
+ return (
+
+
Assine nossa newsletter
+
Receba ofertas e novidades por e-mail
+
+
+
+
+
+ )
+}
+
+export default Newsletter;
diff --git a/react/components/Newsletter/styles.css b/react/components/Newsletter/styles.css
new file mode 100644
index 0000000..e2e84af
--- /dev/null
+++ b/react/components/Newsletter/styles.css
@@ -0,0 +1,45 @@
+.newsletter {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ background-color: #000;
+ color: #fff;
+ padding: 32px 0 15px 0;
+}
+
+.newsletter-title {
+ font-weight: 400;
+ font-size: 24px;
+ line-height: 38px;
+}
+
+.newsletter-description {
+ font-weight: 400;
+ font-size: 18px;
+ line-height: 25px;
+}
+
+.newsletter-input {
+ background-color: #000;
+ color: #929292;
+ border-top: none;
+ border-left: none;
+ border-right: none;
+ border-bottom: solid 1px #929292;
+ font-weight: 400;
+ font-size: 18px;
+ line-height: 25px;
+}
+
+.newsletter-btn {
+ border-top: none;
+ border-left: none;
+ border-right: none;
+ border-bottom: 3px solid #bfbfbf;
+ background-color: #000;
+ color: #fff;
+ text-transform: uppercase;
+ font-weight: 700;
+ font-size: 14px;
+ line-height: 19px;
+}
diff --git a/react/index.d.ts b/react/index.d.ts
new file mode 100644
index 0000000..0e304d2
--- /dev/null
+++ b/react/index.d.ts
@@ -0,0 +1,7 @@
+declare module "*.css" {
+ interface IClassNames{
+ [className: string]: string;
+ }
+ const classNames: IClassNames;
+ export = classNames;
+}
diff --git a/react/tsconfig.json b/react/tsconfig.json
index a26a540..5c9a527 100644
--- a/react/tsconfig.json
+++ b/react/tsconfig.json
@@ -2,10 +2,16 @@
"extends": "@vtex/tsconfig",
"compilerOptions": {
"noEmitOnError": false,
- "lib": ["dom"],
+ "lib": [
+ "dom"
+ ],
"module": "esnext",
"moduleResolution": "node",
"target": "es2017"
},
- "include": ["./typings/*.d.ts", "./**/*.tsx", "./**/*.ts"]
-}
\ No newline at end of file
+ "include": [
+ "./typings/*.d.ts",
+ "./**/*.tsx",
+ "./**/*.ts"
+ ]
+}
diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc
index 6e28988..848fa4f 100644
--- a/store/blocks/pdp/product.jsonc
+++ b/store/blocks/pdp/product.jsonc
@@ -7,7 +7,8 @@
"flex-layout.row#specifications-title",
"product-specification-group#table",
"shelf.relatedProducts",
- "product-questions-and-answers"
+ "product-questions-and-answers",
+ "custom-newsletter"
]
},
"html#breadcrumb": {
@@ -91,6 +92,16 @@
}
},
"flex-layout.row#product-image": {
+ "children": [
+ "html#product-image"
+ ]
+ },
+ "html#product-image": {
+ "props": {
+ "tag": "section",
+ "testId": "product-image",
+ "blockClass": "product-image"
+ },
"children": [
"product-images"
]
@@ -116,7 +127,6 @@
"flex-layout.row#selling-price",
"product-installments",
"product-separator",
- "product-identifier.product",
"sku-selector",
"product-quantity",
"product-assembly-options",
@@ -170,7 +180,6 @@
},
"children": [
"flex-layout.row#product-name",
- "product-identifier.product",
"sku-selector",
"flex-layout.row#availability"
]
diff --git a/store/blocks/product-price.jsonc b/store/blocks/product-price.jsonc
index 3035106..6adb024 100644
--- a/store/blocks/product-price.jsonc
+++ b/store/blocks/product-price.jsonc
@@ -10,7 +10,6 @@
"product-selling-price"
]
},
-
"flex-layout.row#list-price-savings": {
"props": {
"colGap": 2,
@@ -20,8 +19,12 @@
"marginTop": 5
},
"children": [
- "product-list-price",
- "product-price-savings"
+ "product-identifier.product"
]
+ },
+ "product-identifier.product": {
+ "props": {
+ "label": "hide"
+ }
}
}
diff --git a/store/interfaces.json b/store/interfaces.json
index c4b2ac4..80695ac 100644
--- a/store/interfaces.json
+++ b/store/interfaces.json
@@ -5,5 +5,8 @@
"html": {
"component": "html",
"composition": "children"
+ },
+ "custom-newsletter": {
+ "component": "Newsletter"
}
}
diff --git a/styles/configs/style.json b/styles/configs/style.json
index ee3264d..addb2a5 100644
--- a/styles/configs/style.json
+++ b/styles/configs/style.json
@@ -253,91 +253,91 @@
"measure": [30, 34, 20],
"styles": {
"heading-1": {
- "fontFamily": "Open Sans, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
+ "fontFamily": "Open Sans, sans-serif",
"fontWeight": "700",
"fontSize": "3rem",
"textTransform": "initial",
"letterSpacing": "0"
},
"heading-2": {
- "fontFamily": "Open Sans, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
+ "fontFamily": "Open Sans, sans-serif",
"fontWeight": "700",
"fontSize": "2.25rem",
"textTransform": "initial",
"letterSpacing": "0"
},
"heading-3": {
- "fontFamily": "Open Sans, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
+ "fontFamily": "Open Sans, sans-serif",
"fontWeight": "700",
"fontSize": "1.75rem",
"textTransform": "initial",
"letterSpacing": "0"
},
"heading-4": {
- "fontFamily": "Open Sans, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
+ "fontFamily": "Open Sans, sans-serif",
"fontWeight": "normal",
"fontSize": "1.5rem",
"textTransform": "initial",
"letterSpacing": "0"
},
"heading-5": {
- "fontFamily": "Open Sans, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
+ "fontFamily": "Open Sans, sans-serif",
"fontWeight": "normal",
"fontSize": "1.25rem",
"textTransform": "initial",
"letterSpacing": "0"
},
"heading-6": {
- "fontFamily": "Open Sans, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
+ "fontFamily": "Open Sans, sans-serif",
"fontWeight": "normal",
"fontSize": "1.25rem",
"textTransform": "initial",
"letterSpacing": "0"
},
"body": {
- "fontFamily": "Open Sans, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
+ "fontFamily": "Open Sans, sans-serif",
"fontWeight": "normal",
"fontSize": "1rem",
"textTransform": "initial",
"letterSpacing": "0"
},
"small": {
- "fontFamily": "Open Sans, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
+ "fontFamily": "Open Sans, sans-serif",
"fontWeight": "normal",
"fontSize": "0.875rem",
"textTransform": "initial",
"letterSpacing": "0"
},
"mini": {
- "fontFamily": "Open Sans, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
+ "fontFamily": "Open Sans, sans-serif",
"fontWeight": "normal",
"fontSize": "0.75rem",
"textTransform": "initial",
"letterSpacing": "0"
},
"action": {
- "fontFamily": "Open Sans, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
+ "fontFamily": "Open Sans, sans-serif",
"fontWeight": "500",
"fontSize": "1rem",
"textTransform": "uppercase",
"letterSpacing": "0"
},
"action--small": {
- "fontFamily": "Open Sans, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
+ "fontFamily": "Open Sans, sans-serif",
"fontWeight": "500",
"fontSize": "0.875rem",
"textTransform": "uppercase",
"letterSpacing": "0"
},
"action--large": {
- "fontFamily": "Open Sans, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
+ "fontFamily": "Open Sans, sans-serif",
"fontWeight": "500",
"fontSize": "1.25rem",
"textTransform": "uppercase",
"letterSpacing": "0"
},
"code": {
- "fontFamily": "Consolas, monaco, monospace",
+ "fontFamily": "Open Sans, sans-serif",
"fontWeight": "normal",
"fontSize": "1rem",
"textTransform": "initial",
diff --git a/styles/css/vtex.breadcrumb.css b/styles/css/vtex.breadcrumb.css
index 1d449d8..adbeda5 100644
--- a/styles/css/vtex.breadcrumb.css
+++ b/styles/css/vtex.breadcrumb.css
@@ -5,6 +5,7 @@
line-height: 19px;
font-weight: 400;
color: #929292 !important;
+ padding: 0 40px;
}
.homeIcon {
diff --git a/styles/css/vtex.flex-layout.css b/styles/css/vtex.flex-layout.css
index a7c5732..8edbfc4 100644
--- a/styles/css/vtex.flex-layout.css
+++ b/styles/css/vtex.flex-layout.css
@@ -43,7 +43,7 @@
}
.flexRow--deals {
- background-color: #0F3E99;
+ background-color: #0f3e99;
padding: 14px 0px;
}
diff --git a/styles/css/vtex.product-identifier.css b/styles/css/vtex.product-identifier.css
index e3aa6d5..8b6103c 100644
--- a/styles/css/vtex.product-identifier.css
+++ b/styles/css/vtex.product-identifier.css
@@ -1,3 +1,10 @@
.product-identifier--productReference {
margin-bottom: 1rem;
}
+
+.product-identifier__value {
+ font-weight: 300;
+ font-size: 20px;
+ line-height: 34px;
+ color: #575757;
+}
diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css
index f8fa6cb..19752ec 100644
--- a/styles/css/vtex.store-components.css
+++ b/styles/css/vtex.store-components.css
@@ -8,5 +8,41 @@
/* Media Query M3 */
/* Grid breakpoints */
.newsletter {
- background: red;
-}
\ No newline at end of file
+ background: rgb(0, 0, 0);
+ color: #ffff;
+}
+
+.swiperCaret {
+ display: none;
+}
+
+.swiper-pagination {
+ display: none;
+}
+
+.thumbImg,
+.carouselThumbBorder,
+.productImagesThumb,
+.productImagesThumbActive,
+.figure {
+ width: 90px !important;
+ height: 90px !important;
+ margin-bottom: 0 !important;
+}
+
+.carouselGaleryThumbs :first-child {
+ display: flex;
+ gap: 16px;
+}
+
+.productImageTag {
+ width: 664px !important;
+}
+
+.productNameContainer {
+ text-align: right;
+ font-weight: 300;
+ font-size: 20px;
+ line-height: 34px;
+ color: #575757;
+}
diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss
index 36d0f22..b9aa284 100644
--- a/styles/sass/pages/product/vtex.store-components.scss
+++ b/styles/sass/pages/product/vtex.store-components.scss
@@ -1,3 +1,3 @@
-.newsletter{
- background: red;
-}
\ No newline at end of file
+.newsletter {
+ background: red;
+}