diff --git a/config/nam.3bear.design.json b/config/nam.3bear.design.json
index 60c3c86..743f04a 100644
--- a/config/nam.3bear.design.json
+++ b/config/nam.3bear.design.json
@@ -14,9 +14,30 @@
"className": "h-12 bg-[#009b93] text-[#fff] gap-12",
"speed": 24,
"items": [
- { "Link": { "config": { "label": "NEU: Overnight Oats – Sallys Nussecke 😍", "href": "/" } } },
- { "Link": { "config": { "label": "Versandkostenfrei ab 45 € 💛", "href": "/" } } },
- { "Link": { "config": { "label": "Gratis Geschenk ab 60 € Warenkorbwert 🎁", "href": "/" } } }
+ {
+ "Link": {
+ "config": {
+ "label": "NEU: Overnight Oats – Sallys Nussecke 😍",
+ "href": "/"
+ }
+ }
+ },
+ {
+ "Link": {
+ "config": {
+ "label": "Versandkostenfrei ab 45 € 💛",
+ "href": "/"
+ }
+ }
+ },
+ {
+ "Link": {
+ "config": {
+ "label": "Gratis Geschenk ab 60 € Warenkorbwert 🎁",
+ "href": "/"
+ }
+ }
+ }
]
}
}
@@ -26,18 +47,130 @@
"config": {
"className": "h-24 bg-white text-[#003F31] gap-12",
"left": [
- { "Logo": { "config": { "src": "/3bear-logo.png", "alt": "MyShop", "className": "h-[150px] w-[180px]", "objectFit": "contain" } } },
- { "VtMegaMenu": { "config": { "navLabel": { "text": "Shop", "className": "font-bold text-[1rem] text-[#003F31] flex items-center mr-8 gap-1 hover:text-[#009b93]", "isShowArrow": true } } } },
- { "Dropdown": { "config": { "trigger": { "text": "Über Uns", "className": "font-bold text-[1rem] text-[#003F31] flex items-center mr-8 gap-1 hover:text-[#009b93]", "isShowArrow": true }, "items": [ { "text": "Unser Unternehmen", "href": "/" }, { "text": "Loren ipsum", "href": "/" }, { "text": "Not a Link" } ] } } },
- { "Dropdown": { "config": { "trigger": { "text": "Über unsere Produkte", "className": "font-bold text-[1rem] text-[#003F31] flex items-center mr-8 gap-1 hover:text-[#009b93]", "isShowArrow": true }, "items": [ { "text": "Unser Unternehmen", "href": "/" }, { "text": "Loren ipsum", "href": "/" }, { "text": "Not a Link" } ] } } },
- { "Link": { "config": { "label": "Rezepte", "href": "/", "className": "font-bold text-[1rem] text-[#003F31] flex items-center mr-8 gap-1 hover:text-[#009b93]" } } },
- { "Link": { "config": { "label": "Triff Harry Kane", "href": "/", "className": "font-bold text-[1rem] text-[#003F31] flex items-center gap-1 hover:text-[#009b93]" } } }
+ {
+ "Logo": {
+ "config": {
+ "src": "/3bear-logo.png",
+ "alt": "MyShop",
+ "className": "h-[150px] w-[180px]",
+ "objectFit": "contain"
+ }
+ }
+ },
+ {
+ "VtMegaMenu": {
+ "config": {
+ "navLabel": {
+ "text": "Shop",
+ "className": "font-bold text-[1rem] text-[#003F31] flex items-center mr-8 gap-1 hover:text-[#009b93]",
+ "isShowArrow": true
+ }
+ }
+ }
+ },
+ {
+ "Dropdown": {
+ "config": {
+ "trigger": {
+ "text": "Über Uns",
+ "className": "font-bold text-[1rem] text-[#003F31] flex items-center mr-8 gap-1 hover:text-[#009b93]",
+ "isShowArrow": true
+ },
+ "items": [
+ {
+ "text": "Unser Unternehmen",
+ "href": "/"
+ },
+ {
+ "text": "Loren ipsum",
+ "href": "/"
+ },
+ {
+ "text": "Not a Link"
+ }
+ ]
+ }
+ }
+ },
+ {
+ "Dropdown": {
+ "config": {
+ "trigger": {
+ "text": "Über unsere Produkte",
+ "className": "font-bold text-[1rem] text-[#003F31] flex items-center mr-8 gap-1 hover:text-[#009b93]",
+ "isShowArrow": true
+ },
+ "items": [
+ {
+ "text": "Unser Unternehmen",
+ "href": "/"
+ },
+ {
+ "text": "Loren ipsum",
+ "href": "/"
+ },
+ {
+ "text": "Not a Link"
+ }
+ ]
+ }
+ }
+ },
+ {
+ "Link": {
+ "config": {
+ "label": "Rezepte",
+ "href": "/",
+ "className": "font-bold text-[1rem] text-[#003F31] flex items-center mr-8 gap-1 hover:text-[#009b93]"
+ }
+ }
+ },
+ {
+ "Link": {
+ "config": {
+ "label": "Triff Harry Kane",
+ "href": "/",
+ "className": "font-bold text-[1rem] text-[#003F31] flex items-center gap-1 hover:text-[#009b93]"
+ }
+ }
+ }
],
"right": [
- { "VtCountryCodeSelect": { "config": { "trigger": { "className": "w-auto font-bold text-[13px] text-[#11314E] flex justify-start items-center gap-1 hover:text-[#009b93] bg-transparent shadow-none hover:bg-transparent", "isFlag": true, "isDisplayFullname": true } } } },
- { "Button": { "config": { "icon": "MagnifyingGlass", "className": "shadow-none" } } },
- { "AccountButton": { "config": { "icon": "User", "className": " flex items-center gap-1 shadow-none" } } },
- { "VtCartButton": { "config": { "icon": "ShoppingBag", "className": "shadow-none bg-transparent text-black w-[50px]" } } }
+ {
+ "VtCountryCodeSelect": {
+ "config": {
+ "trigger": {
+ "className": "w-auto font-bold text-[13px] text-[#11314E] flex justify-start items-center gap-1 hover:text-[#009b93] bg-transparent shadow-none hover:bg-transparent",
+ "isFlag": true,
+ "isDisplayFullname": true
+ }
+ }
+ }
+ },
+ {
+ "Button": {
+ "config": {
+ "icon": "MagnifyingGlass",
+ "className": "shadow-none"
+ }
+ }
+ },
+ {
+ "AccountButton": {
+ "config": {
+ "icon": "User",
+ "className": " flex items-center gap-1 shadow-none"
+ }
+ }
+ },
+ {
+ "VtCartButton": {
+ "config": {
+ "icon": "ShoppingBag",
+ "className": "shadow-none bg-transparent text-black w-[50px]"
+ }
+ }
+ }
]
}
}
@@ -45,7 +178,9 @@
]
}
},
- { "PropsChildren": {} },
+ {
+ "PropsChildren": {}
+ },
{
"Footer": {
"config": {
@@ -54,13 +189,122 @@
"centerClassName": "",
"rightClassName": "flex gap-[10rem] mr-[80px]",
"left": [
- { "VtFooterHero": { "config": { "logoClassName": "h-[100px] w-[200px]", "logoSrc": "/3bear-white-logo.avif", "logoAlt": "3Bear", "title": "Melde dich für unsere Oatnews an 💛", "email": { "emailInputClassName": "w-[300px] ml-8" }, "socials": [ { "icon": "Twitter", "href": "/", "className": "w-5 h-5 text-white" }, { "icon": "Twitter", "href": "/", "className": "w-5 h-5 text-white" }, { "icon": "Twitter", "href": "/", "className": "w-5 h-5 text-white" }, { "icon": "Twitter", "href": "/", "className": "w-5 h-5 text-white" } ], "socialsClassName": "ml-8 mt-10", "className": "", "ctaClassName": "ml-8", "titleClassName": "ml-8 text-white w-full", "descriptionClassName": "ml-8" } } }
+ {
+ "VtFooterHero": {
+ "config": {
+ "logoClassName": "h-[100px] w-[200px]",
+ "logoSrc": "/3bear-white-logo.avif",
+ "logoAlt": "3Bear",
+ "title": "Melde dich für unsere Oatnews an 💛",
+ "email": {
+ "emailInputClassName": "w-[300px] ml-8"
+ },
+ "socials": [
+ {
+ "icon": "Twitter",
+ "href": "/",
+ "className": "w-5 h-5 text-white"
+ },
+ {
+ "icon": "Twitter",
+ "href": "/",
+ "className": "w-5 h-5 text-white"
+ },
+ {
+ "icon": "Twitter",
+ "href": "/",
+ "className": "w-5 h-5 text-white"
+ },
+ {
+ "icon": "Twitter",
+ "href": "/",
+ "className": "w-5 h-5 text-white"
+ }
+ ],
+ "socialsClassName": "ml-8 mt-10",
+ "className": "",
+ "ctaClassName": "ml-8",
+ "titleClassName": "ml-8 text-white w-full",
+ "descriptionClassName": "ml-8"
+ }
+ }
+ }
],
"center": [],
"right": [
- { "VtMenuItem": { "config": { "title": "Information", "className": "flex flex-col gap-y-2 text-[24px] font-semibold text-white hover:text-white", "itemClassName": "text-[1rem] font-[400] opacity-70 hover:text-white", "items": [ { "text": "Über Uns", "href": "/" }, { "text": "Placeholder", "href": "/categories/shoes" }, { "text": "Placeholder", "href": "/categories/accessories" } ] } } },
- { "VtMenuItem": { "config": { "title": "Kundendienst", "className": "flex flex-col gap-y-2 text-[24px] font-semibold text-white hover:text-white", "itemClassName": "text-[1rem] font-[400] flex items-center opacity-70 hover:text-white", "items": [ { "text": "Twitter", "href": "/" }, { "text": "Facebook", "href": "/categories/shoes" }, { "text": "Pinterest", "href": "/categories/accessories" } ] } } },
- { "VtMenuItem": { "config": { "title": "Weiteres", "className": "flex flex-col gap-y-2 text-[24px] font-semibold text-white", "itemClassName": "text-[1rem] font-[400] w-[150px] opacity-70 hover:text-white", "items": [ { "text": "Karriere", "href": "/" }, { "text": "Unser Team", "href": "/categories/shoes" }, { "text": "B2B", "href": "/categories/accessories" }, { "text": "Presse", "href": "/categories/accessories" } ] } } }
+ {
+ "VtMenuItem": {
+ "config": {
+ "title": "Information",
+ "className": "flex flex-col gap-y-2 text-[24px] font-semibold text-white hover:text-white",
+ "itemClassName": "text-[1rem] font-[400] opacity-70 hover:text-white",
+ "items": [
+ {
+ "text": "Über Uns",
+ "href": "/"
+ },
+ {
+ "text": "Placeholder",
+ "href": "/categories/shoes"
+ },
+ {
+ "text": "Placeholder",
+ "href": "/categories/accessories"
+ }
+ ]
+ }
+ }
+ },
+ {
+ "VtMenuItem": {
+ "config": {
+ "title": "Kundendienst",
+ "className": "flex flex-col gap-y-2 text-[24px] font-semibold text-white hover:text-white",
+ "itemClassName": "text-[1rem] font-[400] flex items-center opacity-70 hover:text-white",
+ "items": [
+ {
+ "text": "Twitter",
+ "href": "/"
+ },
+ {
+ "text": "Facebook",
+ "href": "/categories/shoes"
+ },
+ {
+ "text": "Pinterest",
+ "href": "/categories/accessories"
+ }
+ ]
+ }
+ }
+ },
+ {
+ "VtMenuItem": {
+ "config": {
+ "title": "Weiteres",
+ "className": "flex flex-col gap-y-2 text-[24px] font-semibold text-white",
+ "itemClassName": "text-[1rem] font-[400] w-[150px] opacity-70 hover:text-white",
+ "items": [
+ {
+ "text": "Karriere",
+ "href": "/"
+ },
+ {
+ "text": "Unser Team",
+ "href": "/categories/shoes"
+ },
+ {
+ "text": "B2B",
+ "href": "/categories/accessories"
+ },
+ {
+ "text": "Presse",
+ "href": "/categories/accessories"
+ }
+ ]
+ }
+ }
+ }
]
}
}
@@ -73,7 +317,22 @@
"left": [],
"center": [],
"right": [
- { "VtFooterBottom": { "config": { "className": " mr-[80px]", "icons": [ "Mastercard", "PayPal", "Visa", "Mastercard", "Mastercard", "Mastercard", "Mastercard" ] } } }
+ {
+ "VtFooterBottom": {
+ "config": {
+ "className": " mr-[80px]",
+ "icons": [
+ "Mastercard",
+ "PayPal",
+ "Visa",
+ "Mastercard",
+ "Mastercard",
+ "Mastercard",
+ "Mastercard"
+ ]
+ }
+ }
+ }
]
}
}
@@ -85,8 +344,31 @@
"Hero": {
"config": {
"className": "h-[35rem]",
- "ImageDisplayer": { "config": { "duration": 0, "images": ["./banner-hero.webp"], "links": ["/account"] } },
- "left": [ { "VtCtaBanner": { "config": { "className": "left-[120px] top-[80px] relative w-full p-12 flex flex-col items-start justify-center text-left bg-transperant border-none shadow-none", "buttonTextClassName": "inline-flex items-center justify-center bg-[#FCEE56] hover:bg-[#FCEE56]/90 text-[#0D382E] px-8 py-3 rounded-full font-bold text-lg shadow-none border-none", "tagTextClassName": "text-[#0D382E] text-lg font-medium mb-2 bg-transparent", "tagText": "So einfach kann Frühstück sein – mit unseren leckeren Overnight Oats.", "titleText": "breakfast made easy.", "buttonText": "Jetzt entdecken" } } } ],
+ "ImageDisplayer": {
+ "config": {
+ "duration": 0,
+ "images": [
+ "./banner-hero.webp"
+ ],
+ "links": [
+ "/account"
+ ]
+ }
+ },
+ "left": [
+ {
+ "VtCtaBanner": {
+ "config": {
+ "className": "left-[120px] top-[80px] relative w-full p-12 flex flex-col items-start justify-center text-left bg-transperant border-none shadow-none",
+ "buttonTextClassName": "inline-flex items-center justify-center bg-[#FCEE56] hover:bg-[#FCEE56]/90 text-[#0D382E] px-8 py-3 rounded-full font-bold text-lg shadow-none border-none",
+ "tagTextClassName": "text-[#0D382E] text-lg font-medium mb-2 bg-transparent",
+ "tagText": "So einfach kann Frühstück sein – mit unseren leckeren Overnight Oats.",
+ "titleText": "breakfast made easy.",
+ "buttonText": "Jetzt entdecken"
+ }
+ }
+ }
+ ],
"center": [],
"right": []
}
@@ -98,26 +380,107 @@
"title": "best-seller",
"styles": {
"container": "content-container py-12 small:py-20",
- "header": { "container": "hidden", "title": "hidden", "isShowViewAll": false },
+ "header": {
+ "container": "hidden",
+ "title": "hidden",
+ "isShowViewAll": false
+ },
"list": "grid grid-cols-2 small:grid-cols-3 gap-x-6 gap-y-24 small:gap-y-36",
"productCard": {
"badgeText": "Bestseller",
"card": "relative flex flex-col items-center bg-transparent shadow-none border-none p-0",
- "badge": { "container": "absolute top-0 left-0 z-[1]", "text": "px-3 py-1 rounded-full bg-[#009b93] text-white text-[12px] font-semibold" },
- "thumbnail": { "className": "rounded-2xl bg-white h-[320px] object-contain shadow-none", "size": "full" },
+ "badge": {
+ "container": "absolute top-0 left-0 z-[1]",
+ "text": "px-3 py-1 rounded-full bg-[#009b93] text-white text-[12px] font-semibold"
+ },
+ "thumbnail": {
+ "className": "rounded-2xl bg-white h-[320px] object-contain shadow-none",
+ "size": "full"
+ },
"content": "flex flex-col items-center justify-start text-center p-0 mt-6",
"title": "text-[#003F31] text-[28px] font-semibold",
"description": "order-3 text-[#003f31b3]",
"price": "mt-2 text-[#0D382E] text-[24px] font-bold order-2 flex gap-2",
- "reviews": { "container": "mt-3 flex items-center gap-2 order-1", "stars": "flex gap-1", "star": "text-[#F59E0B] text-xl leading-none", "emptyStar": "text-[#F59E0B] text-xl opacity-30 leading-none", "text": "text-[#003F31] text-[14px]", "rating": 4.5, "count": 38 },
- "button": { "addToCart": "hidden", "moreInfo": "hidden", "isShowIcon": false }
+ "reviews": {
+ "container": "mt-3 flex items-center gap-2 order-1",
+ "stars": "flex gap-1",
+ "star": "text-[#F59E0B] text-xl leading-none",
+ "emptyStar": "text-[#F59E0B] text-xl opacity-30 leading-none",
+ "text": "text-[#003F31] text-[14px]",
+ "rating": 4.5,
+ "count": 38
+ },
+ "button": {
+ "addToCart": "hidden",
+ "moreInfo": "hidden",
+ "isShowIcon": false
+ }
}
}
}
}
},
- { "CartMismatchBanner": { "config": { "show": true } } },
- { "FreeShippingPriceNudge": { "config": { "variant": "popup" } } }
+ {
+ "CartMismatchBanner": {
+ "config": {
+ "show": true
+ }
+ }
+ },
+ {
+ "VtCategoryHighlight": {
+ "config": {
+ "title": "Oder lieber stöbern? Hier findest du sicher deine neuen Hafer-Favoriten.",
+ "className": "content-container py-12 small:py-20",
+ "gridClassName": "grid grid-cols-4 gap-6 w-full",
+ "labelClassName": "absolute left-4 bottom-4 text-[#003F31] text-[18px] font-semibold",
+ "items": [
+ {
+ "imageSrc": "/overnight-oat.webp",
+ "href": "/categories/overnight-oats",
+ "label": "Overnight Oats",
+ "className": "bg-[#CFECD9] col-start-1 col-end-3 row-start-1 row-end-3",
+ "imageClassName": "object-contain"
+ },
+ {
+ "imageSrc": "/overnight-oat.webp",
+ "href": "/categories/porridge",
+ "label": "Porridge",
+ "className": "bg-[#F9E0B0]",
+ "imageClassName": "object-contain"
+ },
+ {
+ "imageSrc": "/overnight-oat.webp",
+ "href": "/categories/cereals",
+ "label": "Cereals",
+ "className": "bg-[#F59E0B]",
+ "imageClassName": "object-contain"
+ },
+ {
+ "imageSrc": "/overnight-oat.webp",
+ "href": "/categories/granola",
+ "label": "Granola",
+ "className": "bg-[#A7D8F0]",
+ "imageClassName": "object-contain"
+ },
+ {
+ "imageSrc": "/overnight-oat.webp",
+ "href": "/categories/oat-bars",
+ "label": "Oat Bars",
+ "className": "bg-[#EED7F2]",
+ "imageClassName": "object-contain"
+ }
+ ]
+ }
+ }
+ },
+ {
+ "FreeShippingPriceNudge": {
+ "config": {
+ "variant": "popup"
+ }
+ }
+ }
]
}
}
diff --git a/config/nam.drsquatch.design.json b/config/nam.drsquatch.design.json
index f0bd29b..210a4a9 100644
--- a/config/nam.drsquatch.design.json
+++ b/config/nam.drsquatch.design.json
@@ -319,6 +319,34 @@
}
}
},
+ {
+ "VtCategoryHighlight": {
+ "config": {
+ "title": "Oder lieber stöbern? Hier findest du sicher deine neuen Hafer-Favoriten.",
+ "className": "content-container py-12 small:py-20",
+ "gridClassName": "grid grid-cols-2 gap-6 w-full",
+ "labelClassName": "absolute left-4 bottom-4 text-[#003F31] text-[18px] font-semibold",
+ "items": [
+ {
+ "imageSrc": "/overnight-oat.webp",
+ "href": "/categories/overnight-oats",
+ "label": "Overnight Oats",
+ "className": "bg-[#CFECD9] h-[250px]",
+ "imageClassName": "object-contain"
+ },
+ {
+ "headingLabel": "The Squatch Difference",
+ "descriptionLabel": "Learn why men everywhere are loving Dr. Squatch.",
+ "buttonLabel": "Learn more",
+ "className": "flex-col bg-[#F9E0B0] p-6 justify-center",
+ "headingClassName": "text-[#003F31] text-[28px] font-semibold",
+ "descriptionClassName": "text-[#003f31b3]",
+ "buttonClassName": "mt-4 text-[#003F31] text-[18px] font-semibold bg-orange-500 py-2 px-16 rounded text-white"
+ }
+ ]
+ }
+ }
+ },
{ "CartMismatchBanner": { "config": { "show": true } } },
{ "FreeShippingPriceNudge": { "config": { "variant": "popup" } } }
],
diff --git a/config/nam.mds-starter-design.json b/config/nam.mds-starter-design.json
index d402af5..b4d7423 100644
--- a/config/nam.mds-starter-design.json
+++ b/config/nam.mds-starter-design.json
@@ -203,6 +203,34 @@
}
}
},
+ {
+ "VtCategoryHighlight": {
+ "config": {
+ "title": "Oder lieber stöbern? Hier findest du sicher deine neuen Hafer-Favoriten.",
+ "className": "content-container py-12 small:py-20",
+ "gridClassName": "grid grid-cols-2 gap-6 w-full",
+ "labelClassName": "absolute left-4 bottom-4 text-[#003F31] text-[18px] font-semibold",
+ "items": [
+ {
+ "imageSrc": "/overnight-oat.webp",
+ "href": "/categories/overnight-oats",
+ "label": "Overnight Oats",
+ "className": "bg-[#CFECD9] h-[250px]",
+ "imageClassName": "object-contain"
+ },
+ {
+ "headingLabel": "The Squatch Difference",
+ "descriptionLabel": "Learn why men everywhere are loving Dr. Squatch.",
+ "buttonLabel": "Learn more",
+ "className": "flex-col bg-[#F9E0B0] p-6 justify-center",
+ "headingClassName": "text-[#003F31] text-[28px] font-semibold",
+ "descriptionClassName": "text-[#003f31b3]",
+ "buttonClassName": "mt-4 text-[#003F31] text-[18px] font-semibold bg-orange-500 py-2 px-16 rounded text-white"
+ }
+ ]
+ }
+ }
+ },
{
"CartMismatchBanner": {
"config": { "show": true }
diff --git a/public/overnight-oat.webp b/public/overnight-oat.webp
new file mode 100644
index 0000000..1ddd5c0
Binary files /dev/null and b/public/overnight-oat.webp differ
diff --git a/src/modules/home/components/vt-category-highlight/index.tsx b/src/modules/home/components/vt-category-highlight/index.tsx
new file mode 100644
index 0000000..8f0fd0f
--- /dev/null
+++ b/src/modules/home/components/vt-category-highlight/index.tsx
@@ -0,0 +1,86 @@
+import { clx } from "@medusajs/ui"
+import LocalizedClientLink from "@modules/common/components/localized-client-link"
+import {
+ LayoutComponentDefinition,
+ LayoutContext,
+} from "@vibentec/component-map"
+
+export default async function VtCategoryHighlight({
+ nodes,
+ context,
+}: {
+ nodes: LayoutComponentDefinition
+ context: LayoutContext
+}) {
+ const props = nodes.config ?? {}
+
+ const title: string = props.title ?? ""
+ const items = props.items ?? []
+
+ const classes = {
+ container: props.className ?? "content-container py-12",
+ title:
+ props.titleClassName ?? "text-[#003F31] text-[28px] font-semibold mb-6",
+ grid: props.gridClassName ?? "grid grid-cols-3 gap-6 w-full",
+ tile:
+ props.tileClassName ??
+ "relative rounded-2xl overflow-hidden bg-white aspect-square w-full",
+ label: props.labelClassName ?? "text-[#003F31] text-[18px] font-semibold",
+ image: props.imageClassName ?? "w-full h-full object-contain",
+ }
+
+ if (!items || items.length === 0) {
+ return null
+ }
+
+ const renderTile = (tile: any, idx: number) => {
+ const imageEl = tile.imageSrc ? (
+
+ ) : (
+