diff --git a/react/components/Html/styles.css b/react/components/Html/styles.css
index e62f510..186743f 100644
--- a/react/components/Html/styles.css
+++ b/react/components/Html/styles.css
@@ -16,3 +16,7 @@
border: none;
border-radius: 0;
}
+
+[class*="html--descriptionText"] {
+ width: 50%;
+}
diff --git a/react/components/PixPrice/PixPrice.tsx b/react/components/PixPrice/PixPrice.tsx
index 792763b..1909a52 100644
--- a/react/components/PixPrice/PixPrice.tsx
+++ b/react/components/PixPrice/PixPrice.tsx
@@ -3,9 +3,9 @@ import { useProduct } from "vtex.product-context";
import styles from "./styles.module.css";
const PixPrice = () => {
- const inputCep = document.querySelectorAll(".vtex-address-form-4-x-input");
+ // const inputCep = document.querySelectorAll(".vtex-address-form-4-x-input");
- console.log(inputCep);
+ // console.log(inputCep);
// .placeholder = "Type name here..";
diff --git a/store/blocks/pdp/product-description.jsonc b/store/blocks/pdp/product-description.jsonc
new file mode 100644
index 0000000..eddb3cf
--- /dev/null
+++ b/store/blocks/pdp/product-description.jsonc
@@ -0,0 +1,110 @@
+{
+ "tab-layout#productPage": {
+ "children": ["tab-list#description", "tab-content#description"],
+ "props": {
+ "blockClass": "description",
+ "defaultActiveTabId": "description1"
+ }
+ },
+ "tab-list#description": {
+ "children": [
+ "tab-list.item#description1",
+ "tab-list.item#description2",
+ "tab-list.item#description3",
+ "tab-list.item#description4",
+ "tab-list.item#description5"
+ ]
+ },
+ "tab-list.item#description1": {
+ "props": {
+ "tabId": "description1",
+ "label": "Descrição",
+ "defaultActiveTab": true
+ }
+ },
+ "tab-list.item#description2": {
+ "props": {
+ "tabId": "description2",
+ "label": "Descrição",
+ "defaultActiveTab": true
+ }
+ },
+ "tab-list.item#description3": {
+ "props": {
+ "tabId": "description3",
+ "label": "Descrição",
+ "defaultActiveTab": true
+ }
+ },
+ "tab-list.item#description4": {
+ "props": {
+ "tabId": "description4",
+ "label": "Descrição",
+ "defaultActiveTab": true
+ }
+ },
+ "tab-list.item#description5": {
+ "props": {
+ "tabId": "description5",
+ "label": "Descrição",
+ "defaultActiveTab": true
+ }
+ },
+ "tab-content#description": {
+ "children": [
+ "tab-content.item#description1",
+ "tab-content.item#description2",
+ "tab-content.item#description3",
+ "tab-content.item#description4",
+ "tab-content.item#description5"
+ ]
+ },
+ "tab-content.item#description1": {
+ "children": ["html#descriptionImage", "html#descriptionText"],
+ "props": {
+ "tabId": "description1"
+ }
+ },
+ "tab-content.item#description2": {
+ "children": ["html#descriptionImage", "html#descriptionText"],
+ "props": {
+ "tabId": "description2"
+ }
+ },
+ "tab-content.item#description3": {
+ "children": ["html#descriptionImage", "html#descriptionText"],
+ "props": {
+ "tabId": "description3"
+ }
+ },
+ "tab-content.item#description4": {
+ "children": ["html#descriptionImage", "html#descriptionText"],
+ "props": {
+ "tabId": "description4"
+ }
+ },
+ "tab-content.item#description5": {
+ "children": ["html#descriptionImage", "html#descriptionText"],
+ "props": {
+ "tabId": "description5"
+ }
+ },
+ "html#descriptionImage": {
+ "props": {
+ "blockClass": "descriptionImage"
+ },
+ "children": ["product-images#description"]
+ },
+ "html#descriptionText": {
+ "props": {
+ "blockClass": "descriptionText"
+ },
+ "children": ["product-description"]
+ },
+ "product-images#description": {
+ "props": {
+ "displayMode": "first-image",
+ "zoomMode": "disabled"
+ }
+ }
+}
diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc
index 0b03d0c..d0e2bbf 100644
--- a/store/blocks/pdp/product.jsonc
+++ b/store/blocks/pdp/product.jsonc
@@ -3,9 +3,10 @@
"children": [
"html#breadcrumb",
"flex-layout.row#product-container",
- "flex-layout.row#description",
- "flex-layout.row#specifications-title",
- "product-specification-group#table",
+ // "flex-layout.row#description",
+ "tab-layout#productPage",
+ // "flex-layout.row#specifications-title",
+ // "product-specification-group#table",
"shelf.relatedProducts",
"product-questions-and-answers"
]
diff --git a/styles/css/vtex.tab-layout.css b/styles/css/vtex.tab-layout.css
new file mode 100644
index 0000000..58dbc7d
--- /dev/null
+++ b/styles/css/vtex.tab-layout.css
@@ -0,0 +1,57 @@
+/*
+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 */
+@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap%27");
+/* Grid breakpoints */
+.container--description {
+ margin-top: 16px;
+}
+
+.contentItem {
+ display: flex;
+ justify-content: center;
+ gap: 32px;
+ margin-top: 32px;
+}
+
+.listContainer {
+ display: flex;
+ justify-content: space-evenly;
+ border-bottom: 1px solid #bfbfbf;
+}
+
+.listItem {
+ padding-top: 0;
+ padding-bottom: 0;
+ margin: 0;
+}
+
+.listItem :global(.vtex-button) {
+ border: none;
+ background: transparent;
+ font-style: normal;
+ font-weight: 400;
+ font-size: 18px;
+ line-height: 38px;
+ color: #bfbfbf;
+ text-transform: capitalize;
+ margin: 0;
+}
+
+.listItemActive :global(.vtex-button) {
+ border: none;
+ background: transparent;
+ font-style: normal;
+ font-weight: 400;
+ font-size: 18px;
+ line-height: 38px;
+ color: #292929;
+ border-bottom: 2px solid #292929;
+ border-radius: 0;
+ text-transform: capitalize;
+}
\ No newline at end of file
diff --git a/styles/sass/pages/product/vtex.tab-layout.scss b/styles/sass/pages/product/vtex.tab-layout.scss
new file mode 100644
index 0000000..24a8c41
--- /dev/null
+++ b/styles/sass/pages/product/vtex.tab-layout.scss
@@ -0,0 +1,47 @@
+.container--description {
+ margin-top: 16px;
+}
+
+.contentItem {
+ display: flex;
+ justify-content: center;
+ gap: 32px;
+ margin-top: 32px;
+}
+
+.listContainer {
+ display: flex;
+ justify-content: space-evenly;
+ border-bottom: 1px solid $color-gray10;
+}
+
+.listItem {
+ padding-top: 0;
+ padding-bottom: 0;
+ margin: 0;
+}
+
+.listItem :global(.vtex-button) {
+ border: none;
+ background: transparent;
+ font-style: normal;
+ font-weight: 400;
+ font-size: 18px;
+ line-height: 38px;
+ color: $color-gray10;
+ text-transform: capitalize;
+ margin: 0;
+}
+
+.listItemActive :global(.vtex-button) {
+ border: none;
+ background: transparent;
+ font-style: normal;
+ font-weight: 400;
+ font-size: 18px;
+ line-height: 38px;
+ color: $color-black;
+ border-bottom: 2px solid $color-black;
+ border-radius: 0;
+ text-transform: capitalize;
+}
diff --git a/styles/sass/utils/_vars.scss b/styles/sass/utils/_vars.scss
index 1f5de96..0dd6147 100644
--- a/styles/sass/utils/_vars.scss
+++ b/styles/sass/utils/_vars.scss
@@ -13,6 +13,7 @@ $color-gray6: #cccccc;
$color-gray7: #929292;
$color-gray8: #575757;
$color-gray9: #afafaf;
+$color-gray10: #bfbfbf;
$color-blue: #4267b2;