feat: created Drsquatch header component and json file

config/nam.3bear.design.json

@@ -156,7 +156,7 @@
                           "href": "/"
                         },
                         {
-                          "icon": "https://upload.wikimedia.org/wikipedia/commons/8/88/Flag_of_Australia_%28converted%29.svg",
+                          "icon": "https://cdn.shopify.com/s/files/1/0275/7784/3817/files/Australia_Flag.svg?v=1657674627",
                           "text": "Australia (AUD)",
                           "href": "/"
                         }
@@ -183,7 +183,7 @@
                 {
                   "VtCartButton": {
                     "config": {
-                      "variant": "button",
+                      "variant": "shoppingBagbutton",
                       "className": "shadow-none"
                     }
                   }

config/nam.drsquatch.design.json

@@ -0,0 +1,176 @@
+[
+  {
+    "Header": {
+      "config": {
+        "sticky": true
+      },
+      "children": [
+        {
+          "Banner": {
+            "config": {
+              "variant": "nav",
+              "className": "h-12 bg-[#e6c981] text-black gap-12",
+              "center": [
+                {
+                  "Link": {
+                    "config": {
+                      "label": "BLACK FRIDAY",
+                      "href": "/",
+                      "className": "font-bold text-[1rem] flex items-center gap-1"
+                    }
+                  }
+                },
+                {
+                  "Link": {
+                    "config": {
+                      "label": "Up to 55% off Bundles",
+                      "href": "/",
+                      "className": "text-[1rem] flex items-center gap-1"
+                    }
+                  }
+                },
+                {
+                  "Link": {
+                    "config": {
+                      "label": "SHOP NOW",
+                      "href": "/",
+                      "className": "font-bold text-[1rem] flex items-center gap-1 underline"
+                    }
+                  }
+                }
+              ]
+            }
+          }
+        },
+        {
+          "Nav": {
+            "config": {
+              "className": "h-24 bg-[#1f3521] text-white gap-12",
+              "left": [
+                {
+                  "Image": {
+                    "config": {
+                      "src": "/drsquatch-logo.webp",
+                      "alt": "MyShop",
+                      "className": "h-[150px] w-[180px] mr-24",
+                      "objectFit": "contain"
+                    }
+                  }
+                },
+                {
+                  "Link": {
+                    "config": {
+                      "label": "SUBCRIBE",
+                      "href": "/",
+                      "className": "font-bold text-[1rem] text-white flex items-center mr-8 gap-1 hover:text-[#009b93]"
+                    }
+                  }
+                },
+                {
+                  "Link": {
+                    "config": {
+                      "label": "REWARD",
+                      "href": "/",
+                      "className": "font-bold text-[1rem] text-white flex items-center mr-8 gap-1 hover:text-[#009b93]"
+                    }
+                  }
+                },
+                {
+                  "VtMegaMenu": {
+                    "config": {
+                      "navLabel": {
+                        "text": "SHOP",
+                        "className": "font-bold text-[1rem] flex items-center mr-8 gap-1 hover:text-[#009b93]"
+                      }
+                    }
+                  }
+                },
+                {
+                  "VtMegaMenu": {
+                    "config": {
+                      "navLabel": {
+                        "text": "OUR STORY",
+                        "className": "font-bold text-[1rem] text-white flex items-center mr-8 gap-1 hover:text-[#009b93]"
+                      }
+                    }
+                  }
+                }
+              ],
+              "right": [
+                {
+                  "Dropdown": {
+                    "config": {
+                      "trigger": {
+                        "icon": "https://upload.wikimedia.org/wikipedia/commons/thumb/b/ba/Flag_of_Germany.svg/1200px-Flag_of_Germany.svg.png",
+                        "text": "DE",
+                        "className": "font-bold text-[1rem] text-white flex items-center gap-1 hover:text-[#009b93]",
+                        "isShowArrow": true
+                      },
+                      "items": [
+                        {
+                          "icon": "https://upload.wikimedia.org/wikipedia/commons/thumb/b/ba/Flag_of_Germany.svg/1200px-Flag_of_Germany.svg.png",
+                          "text": "DE",
+                          "href": "/"
+                        },
+                        {
+                          "icon": "https://cdn.shopify.com/s/files/1/0275/7784/3817/files/EU_Flag.svg?v=1652208424",
+                          "text": "EU",
+                          "href": "/"
+                        },
+                        {
+                          "icon": "https://cdn.shopify.com/s/files/1/0275/7784/3817/files/Australia_Flag.svg?v=1657674627",
+                          "text": "AU",
+                          "href": "/"
+                        }
+                      ]
+                    }
+                  }
+                },
+                {
+                  "IconButton": {
+                    "config": {
+                      "variant": "user",
+                      "className": "shadow-none bg-transparent text-white"
+                    }
+                  }
+                },
+                {
+                  "VtCartButton": {
+                    "config": {
+                      "variant": "cartIconButton",
+                      "className": "shadow-none bg-transparent text-white"
+                    }
+                  }
+                }
+              ]
+            }
+          }
+        }
+      ]
+    }
+  },
+  {
+    "CartMismatchBanner": {
+      "config": {
+        "show": true
+      }
+    }
+  },
+  {
+    "FreeShippingPriceNudge": {
+      "config": {
+        "variant": "popup"
+      }
+    }
+  },
+  {
+    "PropsChildren": {}
+  },
+  {
+    "Footer": {
+      "config": {
+        "copyrightText": "© 2025 MyShop"
+      }
+    }
+  }
+]

src/modules/layout/components/vt-cartbutton/index.tsx

@@ -6,12 +6,17 @@ import {
 import { clx, IconButton } from "@medusajs/ui"
 import { Suspense } from "react"
 import CartButton from "@modules/layout/components/cart-button"
-import { ShoppingBag } from "@medusajs/icons"
+import { ShoppingBag, ShoppingCart } from "@medusajs/icons"
 
-const CartIconButtonComponent = ({ className }: { className?: string }) => {
+const IconButtonComponent = ({ className, variant }: { className?: string; variant?: "shoppingBag" | "cart" }) => {
+  const variants = {
+    shoppingBag: ShoppingBag,
+    cart: ShoppingCart,
+  }
+  const Icon = variants[variant ?? "shoppingBag"]
   return (
     <IconButton className={className}>
-      <ShoppingBag />
+      <Icon />
     </IconButton>
   )
 }
@@ -28,7 +33,8 @@ export const VtCartButton = ({
 
   const variants = {
     link: <CartButton />,
-    button: <CartIconButtonComponent className={className} />,
+    shoppingBagbutton: <IconButtonComponent className={className} variant="shoppingBag" />,
+    cartIconButton: <IconButtonComponent className={className} variant="cart" />,
   }
   if (!props.variant) return null
   const fallBackComp = variants[props.variant as keyof typeof variants]

src/modules/layout/components/vt-mega-menu/mega-menu.tsx

@@ -101,7 +101,7 @@ const MegaMenu = ({
                   key={category.id}
                   href={`/categories/${category.handle}`}
                   className={clx(
-                    "hover:bg-neutral-100 hover:cursor-pointer rounded-full px-3 py-2 w-fit font-medium",
+                    "hover:bg-neutral-100 text-black hover:cursor-pointer rounded-full px-3 py-2 w-fit font-medium",
                     selectedCategory === category.id && "bg-neutral-100"
                   )}
                   onMouseEnter={() => handleCategoryHover(category.id)}

src/modules/layout/templates/vt-banner/banner-nav.tsx

@@ -10,7 +10,7 @@ export default function BannerNav({ node, context }: { node: LayoutComponentDefi
   const props = node.config as BannerNavProps ?? {};
 
   return (
-    <nav className="content-container txt-xsmall-plus text-ui-fg-subtle flex items-center justify-between w-full h-full text-small-regular">
+    <nav className="content-container txt-xsmall-plus flex items-center justify-between w-full h-full text-small-regular">
       <div className="flex items-center gap-x-4">
         {props.left && <DynamicLayoutRenderer nodes={props.left} context={context} />}
       </div>

src/modules/layout/templates/vt-nav/index.tsx

@@ -1,5 +1,6 @@
 import { DynamicLayoutRenderer } from "vibentec/renderer"
 import { LayoutComponentDefinition, LayoutContext } from "vibentec/component-map";
+import { clx } from "@medusajs/ui";
 
 interface BannerNavProps {
   className?: string;
@@ -12,7 +13,7 @@ export default function VtNav({ nodes, context }: { nodes: LayoutComponentDefini
 
   return (
     <div className="relative mx-auto border-b duration-200 bg-white border-ui-border-base">
-      <nav className="content-container txt-xsmall-plus text-ui-fg-subtle flex items-center justify-between w-full h-full text-small-regular">
+      <nav className={clx("content-container txt-xsmall-plus flex items-center justify-between w-full h-full text-small-regular", props.className)}>
         <div className="flex items-center gap-x-4">
           {props.left && <DynamicLayoutRenderer nodes={props.left} context={context} />}
         </div>

src/vibentec/configloader.ts

@@ -2,7 +2,7 @@ import fs from "fs"
 import path from "path"
 import { jsonFileNames } from "./devJsonFileNames";
 
-const fileName = jsonFileNames.nam3Bear;
+const fileName = jsonFileNames.namDrsquatch;
 
 export async function loadDesignConfig() {
   const filePath = path.join(process.cwd(), "config", fileName)

src/vibentec/devJsonFileNames.ts

@@ -2,4 +2,5 @@ export const jsonFileNames = {
   steMedusaStarter: "ste.medusa-starter.design.json",
   stePlayGround: "ste.playground.design.json",
   nam3Bear: "nam.3bear.design.json",
+  namDrsquatch: "nam.drsquatch.design.json",
 };