diff --git a/config/nam.3bear.design.json b/config/nam.3bear.design.json
index c017b62..f32909a 100644
--- a/config/nam.3bear.design.json
+++ b/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"
}
}
diff --git a/config/nam.drsquatch.design.json b/config/nam.drsquatch.design.json
new file mode 100644
index 0000000..e896c2a
--- /dev/null
+++ b/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"
+ }
+ }
+ }
+]
diff --git a/public/drsquatch-logo.webp b/public/drsquatch-logo.webp
new file mode 100644
index 0000000..11ae0eb
Binary files /dev/null and b/public/drsquatch-logo.webp differ
diff --git a/src/modules/layout/components/vt-cartbutton/index.tsx b/src/modules/layout/components/vt-cartbutton/index.tsx
index 1893c48..781b9c1 100644
--- a/src/modules/layout/components/vt-cartbutton/index.tsx
+++ b/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 (
-
+
)
}
@@ -28,7 +33,8 @@ export const VtCartButton = ({
const variants = {
link: ,
- button: ,
+ shoppingBagbutton: ,
+ cartIconButton: ,
}
if (!props.variant) return null
const fallBackComp = variants[props.variant as keyof typeof variants]
diff --git a/src/modules/layout/components/vt-mega-menu/mega-menu.tsx b/src/modules/layout/components/vt-mega-menu/mega-menu.tsx
index b6cdd75..2bdf372 100644
--- a/src/modules/layout/components/vt-mega-menu/mega-menu.tsx
+++ b/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)}
diff --git a/src/modules/layout/templates/vt-banner/banner-nav.tsx b/src/modules/layout/templates/vt-banner/banner-nav.tsx
index 361e8be..598c485 100644
--- a/src/modules/layout/templates/vt-banner/banner-nav.tsx
+++ b/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 (
-