feat: adiciona breadcrumbs e product description

manifest.json

@@ -15,7 +15,6 @@
     "postreleasy": "vtex publish --verbose"
   },
   "dependencies": {
-    "agenciamagma.store-theme": "5.x",
     "vtex.store": "2.x",
     "vtex.store-header": "2.x",
     "vtex.product-summary": "2.x",

react/components/Html/index.tsx

@@ -1,5 +1,6 @@
 import React, { ReactNode } from "react";
 import { useCssHandles } from "vtex.css-handles";
+import "./style.css"
 
 const CSS_HANDLES = ["html"] as const;
 

react/components/Html/style.css

@@ -0,0 +1,3 @@
+[class*="html--pdp-breadcrumb"] {
+  margin-left: 40px;
+}

store/blocks/pdp/product.jsonc

@@ -3,13 +3,113 @@
     "children": [
       "html#breadcrumb",
       "condition-layout.product#availability",
-      "flex-layout.row#description",
+      "tab-layout#desc",
       "flex-layout.row#specifications-title",
       "product-specification-group#table",
       "shelf.relatedProducts",
       "product-questions-and-answers"
     ]
   },
+  "tab-layout#desc":{
+  "children": [
+    "tab-list#home",
+    "tab-content#desc"
+  ],
+  "props": {
+    "blockClass": "desc",
+    "defaultActiveTabId": "desc1"
+  }
+},
+"tab-list#home": {
+  "children": [
+    "tab-list.item#desc1",
+    "tab-list.item#desc2",
+    "tab-list.item#desc3",
+    "tab-list.item#desc4",
+    "tab-list.item#desc5"
+  ]
+},
+"tab-list.item#desc1": {
+  "props": {
+    "tabId": "desc1",
+    "label": "Descrição",
+    "defaultActiveTab": true
+  }
+},
+"tab-list.item#desc2": {
+  "props": {
+    "tabId": "desc2",
+    "label": "Descrição"
+  }
+},
+"tab-list.item#desc3": {
+  "props": {
+    "tabId": "desc3",
+    "label": "Descrição"
+  }
+},
+"tab-list.item#desc4": {
+  "props": {
+    "tabId": "desc4",
+    "label": "Descrição"
+  }
+},
+"tab-list.item#desc5": {
+  "props": {
+    "tabId": "desc5",
+    "label": "Descrição"
+  }
+},
+ "tab-content#desc": {
+   "children": [
+     "tab-content.item#desc1",
+     "tab-content.item#desc2",
+     "tab-content.item#desc3",
+     "tab-content.item#desc4",
+     "tab-content.item#desc5"
+   ]
+ },
+ "tab-content.item#desc1": {
+   "children": [
+    
+    "flex-layout.row#description"
+   ],
+   "props": {
+     "tabId": "desc1"
+   }
+ },
+ "tab-content.item#desc2": {
+   "children": [
+
+   ],
+   "props": {
+     "tabId": "desc2"
+   }
+ },
+ "tab-content.item#desc3": {
+  "children": [
+
+  ],
+  "props": {
+    "tabId": "desc2"
+  }
+},
+"tab-content.item#desc4": {
+  "children": [
+
+  ],
+  "props": {
+    "tabId": "desc2"
+  }
+},
+"tab-content.item#desc5": {
+  "children": [
+
+  ],
+  "props": {
+    "tabId": "desc2"
+  }
+},
   "html#breadcrumb": {
     "props": {
       "tag": "section",

styles/css/agenciamagma.store-theme.css

@@ -12,5 +12,5 @@
 }
 
 .html--pdp-breadcrumb {
-  background-color: green;
+  background-color: white;
 }

styles/css/vtex.breadcrumb.css

@@ -0,0 +1,30 @@
+/*
+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 */
+.container {
+  display: flex;
+  align-items: center;
+}
+.container .homeLink .homeIcon {
+  display: none;
+}
+.container .homeLink::before {
+  content: "Home";
+  font-size: 16px;
+}
+.container .arrow--1 {
+  display: none;
+}
+.container .arrow--1 .Link {
+  font-size: 0px;
+}
+.container .arrow--1 .Link::before {
+  content: "Sapatos";
+  font-size: 16px;
+}

styles/css/vtex.store-components.css

@@ -7,6 +7,25 @@
 */
 /* Media Query M3 */
 /* Grid breakpoints */
+@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;700&display=swap");
 .newsletter {
   background: red;
 }
+
+.productNameContainer {
+  display: flex;
+  justify-content: right;
+}
+.productNameContainer .productBrand--quickview {
+  font-family: "Open Sans";
+  font-style: normal;
+  font-weight: 300;
+  font-size: 20px;
+  line-height: 34px;
+  text-align: right;
+  color: #575757;
+}
+
+.productDescriptionContainer {
+  width: 50% !important;
+}

styles/sass/pages/product/agenciamagma.store-theme.scss

@@ -3,6 +3,6 @@
 }
 
 .html--pdp-breadcrumb {
-  background-color: green;
+  background-color: white;
 }
 

styles/sass/pages/product/vtex.breadcrumb.scss

@@ -0,0 +1,24 @@
+.container{
+  display: flex;
+  align-items: center;
+
+  .homeLink{
+    .homeIcon{
+      display: none;
+    }
+  }
+  .homeLink::before{
+    content: "Home";
+    font-size: 16px;
+  }
+  .arrow--1 {
+    display: none;
+    .Link{
+      font-size: 0px;
+    }
+    .Link::before{
+      content: "Sapatos";
+      font-size: 16px;
+    }
+  }
+}

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

@@ -1,3 +1,22 @@
+@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;700&display=swap');
+
 .newsletter{
     background: red;
 }
+.productNameContainer{
+  display: flex;
+  justify-content: right;
+
+  .productBrand--quickview{
+    font-family: 'Open Sans';
+    font-style: normal;
+    font-weight: 300;
+    font-size: 20px;
+    line-height: 34px;
+    text-align: right;
+    color: #575757;
+  }
+}
+.productDescriptionContainer{
+  width: 50% !important;
+}