feat(breadcrumb): adiciona breadcrumb conforme o figma

store/blocks/home/home.jsonc

@@ -2,9 +2,9 @@
   "store.home": {
     "blocks": [
       "list-context.image-list#demo",
-      "example-component",      /* You can make references to blocks defined in other files.
-       * For example, `flex-layout.row#deals` is defined in the `deals.json` file. */
-      "flex-layout.row#deals",
+      "example-component",
+      /* You can make references to blocks defined in other files.
+       * For example, `flex-layout.row#deals` is defined in the `deals.json` file. */ "flex-layout.row#deals",
       "__fold__",
       "rich-text#shelf-title",
       "flex-layout.row#shelf",
@@ -40,7 +40,7 @@
         "phone": 1
       },
       "infinite": true,
-      "showNavigationArrows": "desktopOnly",
+      "showNavigationArrows": "never",
       "blockClass": "carousel"
     }
   },

store/blocks/pdp/product.jsonc

@@ -91,7 +91,10 @@
         "desktop": "auto",
         "phone": "16:9"
       },
-      "displayThumbnailsArrows": true
+      "displayThumbnailsArrows": false,
+      "showNavigationArrows": false,
+      "showPaginationDots": false,
+      "thumbnailsOrientation": "horizontal"
     }
   },
   "flex-layout.col#right-col": {

store/blocks/product-summary/quickview.json

@@ -1,9 +1,6 @@
 {
   "modal-trigger#quickview": {
-    "children": [
-      "icon-expand",
-      "modal-layout#quickview"
-    ],
+    "children": ["icon-expand", "modal-layout#quickview"],
     "props": {
       "blockClass": "quickview"
     }
@@ -63,9 +60,7 @@
   },
 
   "flex-layout.col#quickview-product-quantity": {
-    "children": [
-      "product-summary-quantity#quickview"
-    ]
+    "children": ["product-summary-quantity#quickview"]
   },
   "product-summary-quantity#quickview": {
     "props": {
@@ -74,18 +69,14 @@
     }
   },
   "flex-layout.col#quickview-add-to-card-button": {
-    "children": [
-      "add-to-cart-button"
-    ],
+    "children": ["add-to-cart-button"],
     "props": {
       "width": "grow"
     }
   },
 
   "flex-layout.row#quickview-actions-2": {
-    "children": [
-      "link.product#button-pdp"
-    ]
+    "children": ["link.product#button-pdp"]
   },
   "link.product#button-pdp": {
     "props": {
@@ -107,15 +98,10 @@
     }
   },
   "flex-layout.col#quickview-images": {
-    "children": [
-      "product-images#quickview"
-    ]
+    "children": ["product-images#quickview"]
   },
   "flex-layout.col#quickview-product-details": {
-    "children": [
-      "modal-content#quickview",
-      "modal-actions#quickview"
-    ],
+    "children": ["modal-content#quickview", "modal-actions#quickview"],
     "props": {
       "preventVerticalStretch": true,
       "blockClass": "quickviewDetails"
@@ -134,7 +120,7 @@
       "blockClass": "quickview"
     }
   },
-  "product-images#quickview" : {
+  "product-images#quickview": {
     "props": {
       "blockClass": "quickview",
       "showNavigationArrows": true

styles/css/agenciamagma.store-theme.css

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

styles/css/vtex.breadcrumb.css

@@ -0,0 +1,27 @@
+/*
+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 .link {
+  font-size: 0;
+}
+.container .arrow--1 .link::before {
+  content: "Sapatos";
+  font-size: 16px;
+}

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

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

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

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