store/blocks/pdp/product.jsonc

@@ -126,7 +126,6 @@
       "flex-layout.row#cart",
       "product-assembly-options",
       "product-gifts",
-
       "availability-subscriber",
       "shipping-simulator"
     ]
@@ -200,7 +199,13 @@
     }
   },
   "tab-list#product": {
-    "children": ["tab-list.item#product1", "tab-list.item#product2"]
+    "children": [
+      "tab-list.item#product1",
+      "tab-list.item#product2",
+      "tab-list.item#product3",
+      "tab-list.item#product4",
+      "tab-list.item#product5"
+    ]
   },
   "tab-list.item#product1": {
     "props": {
@@ -215,8 +220,32 @@
       "label": "Descrição"
     }
   },
+  "tab-list.item#product3": {
+    "props": {
+      "tabId": "product3",
+      "label": "Descrição"
+    }
+  },
+  "tab-list.item#product4": {
+    "props": {
+      "tabId": "product4",
+      "label": "Descrição"
+    }
+  },
+  "tab-list.item#product5": {
+    "props": {
+      "tabId": "product5",
+      "label": "Descrição"
+    }
+  },
   "tab-content#product": {
-    "children": ["tab-content.item#product1", "tab-content.item#product2"]
+    "children": [
+      "tab-content.item#product1",
+      "tab-content.item#product2",
+      "tab-content.item#product3",
+      "tab-content.item#product4",
+      "tab-content.item#product5"
+    ]
   },
   "tab-content.item#product1": {
     "children": ["product-images#descricao", "product-description"],
@@ -225,11 +254,29 @@
     }
   },
   "tab-content.item#product2": {
-    "children": ["product-description"],
+    "children": ["product-images#descricao", "product-description"],
     "props": {
       "tabId": "product2"
     }
   },
+  "tab-content.item#product3": {
+    "children": ["product-images#descricao", "product-description"],
+    "props": {
+      "tabId": "product3"
+    }
+  },
+  "tab-content.item#product4": {
+    "children": ["product-images#descricao", "product-description"],
+    "props": {
+      "tabId": "product4"
+    }
+  },
+  "tab-content.item#product5": {
+    "children": ["product-images#descricao", "product-description"],
+    "props": {
+      "tabId": "product5"
+    }
+  },
   "list-context.product-list#shelf": {
     "blocks": ["product-summary.shelf#shelf"],
     "children": ["slider-layout#shelf-products"]

styles/css/vtex.store-components.css

@@ -157,4 +157,21 @@
   position: relative;
   left: 70px;
   top: 8px;
+}
+
+.productDescriptionContainer .productDescriptionTitle {
+  font-family: "Open Sans";
+  font-style: normal;
+  font-weight: 400;
+  font-size: 24px;
+  line-height: 32px;
+  color: #575757;
+}
+.productDescriptionContainer .productDescriptionText {
+  font-family: "Open Sans";
+  font-style: normal;
+  font-weight: 400;
+  font-size: 16px;
+  line-height: 22px;
+  color: #929292;
 }

styles/css/vtex.tab-layout.css

@@ -1,4 +1,64 @@
+/*
+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");
+/* Grid breakpoints */
+.container {
+  margin-bottom: 16px;
+}
+
+.listContainer {
+  display: flex;
+  justify-content: space-between;
+  border-bottom: 1px solid #b9b9b9;
+  margin-bottom: 32px;
+}
+.listContainer .listItem {
+  padding: 0;
+  margin: 0;
+}
+.listContainer .listItem :global(.vtex-button) {
+  background: white;
+  border: none;
+  border-radius: 0;
+}
+.listContainer .listItem :global(.vtex-button) :global(.vtex-button__label) {
+  font-family: "Open Sans";
+  font-style: normal;
+  font-weight: 400;
+  font-size: 18px;
+  line-height: 38px;
+  display: flex;
+  align-items: center;
+  text-align: center;
+  color: #bfbfbf;
+  text-transform: initial;
+}
+.listContainer .listItemActive :global(.vtex-button) {
+  background: white;
+  border-bottom: 2px solid #000000;
+  border-radius: 0;
+}
+.listContainer .listItemActive :global(.vtex-button) :global(.vtex-button__label) {
+  font-family: "Open Sans";
+  font-style: normal;
+  font-weight: 400;
+  font-size: 18px;
+  line-height: 38px;
+  display: flex;
+  align-items: center;
+  text-align: center;
+  color: #000000;
+  text-transform: initial;
+}
+
 .contentItem {
   display: flex;
   flex-direction: row;
-}
+  gap: 32px;
+}

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

@@ -159,3 +159,23 @@
     top: 8px;
   }
 }
+
+//Estilização da descrição do produto
+.productDescriptionContainer {
+  .productDescriptionTitle {
+    font-family: "Open Sans";
+    font-style: normal;
+    font-weight: 400;
+    font-size: 24px;
+    line-height: 32px;
+    color: #575757;
+  }
+  .productDescriptionText {
+    font-family: "Open Sans";
+    font-style: normal;
+    font-weight: 400;
+    font-size: 16px;
+    line-height: 22px;
+    color: #929292;
+  }
+}

styles/sass/pages/product/vtex.tab-layout.scss

@@ -0,0 +1,54 @@
+.container {
+  margin-bottom: 16px;
+}
+.listContainer {
+  display: flex;
+  justify-content: space-between;
+  border-bottom: 1px solid #b9b9b9;
+  margin-bottom: 32px;
+  .listItem {
+    padding: 0;
+    margin: 0;
+    :global(.vtex-button) {
+      background: white;
+      border: none;
+      border-radius: 0;
+      :global(.vtex-button__label) {
+        font-family: "Open Sans";
+        font-style: normal;
+        font-weight: 400;
+        font-size: 18px;
+        line-height: 38px;
+        display: flex;
+        align-items: center;
+        text-align: center;
+        color: #bfbfbf;
+        text-transform: initial;
+      }
+    }
+  }
+  .listItemActive {
+    :global(.vtex-button) {
+      background: white;
+      border-bottom: 2px solid #000000;
+      border-radius: 0;
+      :global(.vtex-button__label) {
+        font-family: "Open Sans";
+        font-style: normal;
+        font-weight: 400;
+        font-size: 18px;
+        line-height: 38px;
+        display: flex;
+        align-items: center;
+        text-align: center;
+        color: #000000;
+        text-transform: initial;
+      }
+    }
+  }
+}
+.contentItem {
+  display: flex;
+  flex-direction: row;
+  gap: 32px;
+}