Shop
/
Shop-Storefront
4
0
Fork 0
Code Issues 25 Pull Requests Packages Projects 1 Releases Wiki Activity

Compare commits

merge into: Shop:namds/implement-hero-banner
Branches Tags
Shop:main
Shop:namds/implement-highlight-and-subcription-section
Shop:namds/implement-brand
Shop:namds/implement-highlight-category
Shop:namds/implement-best-seller
Shop:namds/implement-hero-banner
Shop:namds/refactor-base-layout
Shop:layout-system-basics
Shop:namds/layout-system-basics
...
pull from: Shop:main
Branches Tags
Shop:main
Shop:namds/implement-highlight-and-subcription-section
Shop:namds/implement-brand
Shop:namds/implement-highlight-category
Shop:namds/implement-best-seller
Shop:namds/implement-hero-banner
Shop:namds/refactor-base-layout
Shop:layout-system-basics
Shop:namds/layout-system-basics

18 Commits
namds/impl ... main

Author SHA1 Message Date
Nam Doan b55e3d7a1a bugfix: restyle vt-subcription 3bear json config file 2026-01-09 14:14:41 +07:00
Nam Doan 9622af2c9e bugfix: add optional check undefind subtext susbcription 2026-01-09 13:54:08 +07:00
namds29 973b1bdb68 Merge pull request 'update: add vt-subcription component into design vibentec json file' (#37) from namds/implement-highlight-and-subcription-section into main 
Reviewed-on: #37
 2026-01-09 03:01:59 +00:00
Nam Doan bb116162f9 update: add vt-subcription component into design vibentec json file 2026-01-08 11:18:54 +07:00
namds29 cf4aedab84 Merge pull request 'namds/implement-highlight-and-subcription-section' (#35) from namds/implement-highlight-and-subcription-section into main 
Reviewed-on: #35
 2026-01-07 03:16:53 +00:00
namds29 d645c01323 Merge pull request 'feat: create highlight category component and config with json file' (#34) from namds/implement-highlight-category into main 
Reviewed-on: #34
 2026-01-06 16:13:39 +00:00
Nam Doan ad1e782713 feat: implmement feedback card and subcription section component 2026-01-06 11:06:01 +07:00
Nam Doan 1716ef2cf4 feat: implement vt feedback component 2026-01-05 09:49:35 +07:00
Nam Doan c800f87ffe feat; implement brand 2025-12-30 09:47:20 +07:00
Nam Doan c3e00ee204 bugfix: style of card product card homepage 2025-12-29 11:25:46 +07:00
Nam Doan 4327676cb4 feat: create highlight category component and config with json file 2025-12-26 15:47:35 +07:00
namds29 e0bb44b65a Merge pull request 'feat: hovering thumbnail will jump to 2nd image thumbnail' (#33) from namds/implement-best-seller into main 
Reviewed-on: #33
 2025-12-26 03:35:04 +00:00
Nam Doan af3246770a feat: hovering thumbnail will jump to 2nd image thumbnail 2025-12-26 10:25:11 +07:00
namds29 f6f1f6286c Merge pull request 'Implement Section Product Grid' (#25) from namds/implement-best-seller into main 
Reviewed-on: #25
Reviewed-by: Yen Nguyen <yen.nguyen@vibentec-it.io>
 2025-12-25 10:22:06 +00:00
Nam Doan 15011607ae update: refactor construct json file to map with each router with component 2025-12-25 17:19:11 +07:00
Nam Doan 005b10484b update: style of show button icon product card 2025-12-24 13:43:08 +07:00
Nam Doan 6912f2605c feat: clone product card and create design UI to map with json file 2025-12-22 14:12:43 +07:00
Yen Nguyen 389cf1c856 Merge pull request 'feat: add medusa starter design hero banner' (#13) from namds/implement-hero-banner into main 
Reviewed-on: #13
 2025-12-19 08:04:10 +00:00
24 changed files with 2805 additions and 1286 deletions
Show Stats Expand all files Collapse all files

913
config/nam.3bear.design.json
View File

@ -1,383 +1,592 @@
[ {
{ "layout": [
"Header": { {
"config": { "Header": {
"sticky": true, "config": {
"variant": "ticker" "sticky": true,
}, "variant": "ticker"
"children": [ },
{ "children": [
"Banner": { {
"config": { "Banner": {
"variant": "ticker", "config": {
"className": "h-12 bg-[#009b93] text-[#fff] gap-12", "variant": "ticker",
"speed": 24, "className": "h-12 bg-[#009b93] text-[#fff] gap-12",
"items": [ "speed": 24,
{ "items": [
"Link": { {
"config": { "Link": {
"label": "NEU: Overnight Oats – Sallys Nussecke 😍", "config": {
"href": "/" "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": "Versandkostenfrei ab 45 € 💛", {
"href": "/" "Nav": {
"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]"
}
} }
} }
}, ],
{ "right": [
"Link": { {
"config": { "VtCountryCodeSelect": {
"label": "Gratis Geschenk ab 60 € Warenkorbwert 🎁", "config": {
"href": "/" "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]"
}
} }
} }
} ]
] }
} }
} }
}, ]
{ }
"Nav": { },
"config": { {
"className": "h-24 bg-white text-[#003F31] gap-12", "PropsChildren": {}
"left": [ },
{ {
"Logo": { "Footer": {
"config": { "config": {
"src": "/3bear-logo.png", "className": "content-container border-none flex w-full bg-[#003f31] text-white border justify-between pb-8 pt-14",
"alt": "MyShop", "leftClassName": "flex-col ml-3",
"className": "h-[150px] w-[180px]", "centerClassName": "",
"objectFit": "contain" "rightClassName": "flex gap-[10rem] mr-[80px]",
} "left": [
} {
}, "VtFooterHero": {
{ "config": {
"VtMegaMenu": { "logoClassName": "h-[100px] w-[200px]",
"config": { "logoSrc": "/3bear-white-logo.avif",
"navLabel": { "logoAlt": "3Bear",
"text": "Shop", "title": "Melde dich für unsere Oatnews an 💛",
"className": "font-bold text-[1rem] text-[#003F31] flex items-center mr-8 gap-1 hover:text-[#009b93]", "email": {
"isShowArrow": true "emailInputClassName": "w-[300px] ml-8"
} },
} "socials": [
} {
}, "icon": "Twitter",
{
"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": "/", "href": "/",
"className": "font-bold text-[1rem] text-[#003F31] flex items-center mr-8 gap-1 hover:text-[#009b93]" "className": "w-5 h-5 text-white"
} },
} {
}, "icon": "Twitter",
{
"Link": {
"config": {
"label": "Triff Harry Kane",
"href": "/", "href": "/",
"className": "font-bold text-[1rem] text-[#003F31] flex items-center gap-1 hover:text-[#009b93]" "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"
}
]
}
}
}
]
}
}
},
{
"Footer": {
"config": {
"className": "content-container bg-[#003f31] w-full text text-[#11314E] flex items-center justify-between",
"leftClassName": "w-full",
"left": [],
"center": [],
"right": [
{
"VtFooterBottom": {
"config": {
"className": " mr-[80px]",
"icons": [
"Mastercard",
"PayPal",
"Visa",
"Mastercard",
"Mastercard",
"Mastercard",
"Mastercard"
]
}
}
}
]
}
}
}
],
"pages": {
"Home": [
{
"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"
} }
} }
], }
"right": [ ],
{ "center": [],
"VtCountryCodeSelect": { "right": []
"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 "VtFeaturedProducts": {
} "config": {
} "title": "best-seller",
} "styles": {
"container": "content-container py-12 small:py-20",
"header": {
"container": "ml-16",
"title": "text-2xl mb-12",
"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": {
"Button": { "className": "rounded-2xl bg-white h-[320px] object-contain shadow-none",
"config": { "size": "full"
"icon": "MagnifyingGlass",
"className": "shadow-none"
}
}
}, },
{ "content": "flex flex-col items-center justify-start text-center p-0 mt-6",
"AccountButton": { "title": "text-[#003F31] text-[28px] font-semibold",
"config": { "description": "order-3 text-[#003f31b3]",
"icon": "User", "price": "mt-2 text-[#0D382E] text-[24px] font-bold order-2 flex gap-2",
"className": " flex items-center gap-1 shadow-none" "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": {
"VtCartButton": { "addToCart": "hidden",
"config": { "moreInfo": "hidden",
"icon": "ShoppingBag", "isShowIcon": false
"className": "shadow-none bg-transparent text-black w-[50px]"
}
}
} }
] }
} }
} }
} }
] },
} {
}, "CartMismatchBanner": {
{
"Hero": {
"config": {
"className": "h-[35rem]",
"ImageDisplayer": {
"config": { "config": {
"duration": 0, "show": true
"images": ["./banner-hero.webp"],
"links": ["/account"]
} }
}, }
"left": [ },
{ {
"VtCtaBanner": { "VtCategoryHighlight": {
"config": { "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", "title": "Oder lieber stöbern? Hier findest du sicher deine neuen Hafer-Favoriten.",
"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", "className": "content-container py-12 small:py-20",
"tagTextClassName": "text-[#0D382E] text-lg font-medium mb-2 bg-transparent", "gridClassName": "grid grid-cols-4 gap-6 w-full",
"tagText": "So einfach kann Frühstück sein – mit unseren leckeren Overnight Oats.", "labelClassName": "absolute left-4 bottom-4 text-[#003F31] text-[18px] font-semibold",
"titleText": "breakfast made easy.", "items": [
"buttonText": "Jetzt entdecken" {
"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"
} }
} ]
} }
], }
"center": [], },
"right": [] {
} "VtBrand": {
} "config": {
}, "className": "w-full py-12 bg-[#CFECD9]",
{ "innerClassName": "content-container flex flex-col items-center",
"CartMismatchBanner": { "title": "Trusted By",
"config": { "titleClassName": "text-[#003F31] text-[20px] font-semibold mb-8",
"show": true "brandsClassName": "flex w-full items-center justify-between gap-12",
} "items": [
} {
}, "label": "Men'sHealth",
{ "containerClassName": "",
"FreeShippingPriceNudge": { "className": "text-[#003F31] text-[36px] font-semibold italic"
"config": { },
"variant": "popup" {
} "label": "GQ",
} "containerClassName": "",
}, "className": "text-[#003F31] text-[44px] font-black tracking-tight"
{ },
"PropsChildren": {} {
}, "label": "BIRCHBOX",
{ "containerClassName": "",
"Footer": { "className": "text-[#003F31] text-[36px] font-semibold tracking-[0.2em]"
"config": {
"className": "content-container border-none flex w-full bg-[#003f31] text-white border justify-between pb-8 pt-14",
"leftClassName": "flex-col ml-3",
"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"
} }
} ]
} }
], }
"center": [], },
"right": [ {
{ "VtFeedbackCard": {
"VtMenuItem": { "config": {
"config": { "className": "content-container py-16 bg-[#CFECD9] mt-16",
"title": "Information", "title": "Der Hafer-Hype ist real. Finden nicht nur 100.000+ zufriedene 3Bears Fans.",
"className": "flex flex-col gap-y-2 text-[24px] font-semibold text-white hover:text-white", "gridClassName": "grid grid-cols-1 small:grid-cols-2 xl:grid-cols-4 gap-6",
"itemClassName": "text-[1rem] font-[400] opacity-70 hover:text-white", "cardClassName": "rounded-2xl overflow-hidden",
"items": [ "imageClassName": "w-full h-[260px] object-cover",
{ "contentClassName": "p-6",
"text": "Über Uns", "nameClassName": "text-[#003F31] text-[20px] font-bold",
"href": "/" "subtitleClassName": "mt-1 text-[#003f31b3] text-[14px]",
}, "quoteClassName": "mt-4 text-[#003F31] text-[16px]",
{ "ctaClassName": "mt-6 inline-flex items-center justify-center bg-[#FCEE56] text-[#0D382E] px-6 py-2 rounded-full font-bold",
"text": "Placeholder", "items": [
"href": "/categories/shoes" {
}, "imageSrc": "/overnight-oat.webp",
{ "name": "Harry Kane",
"text": "Placeholder", "subtitle": "Profißballer, Kapitän engl. Nationalmannschaft, Stürmer FC Bayern",
"href": "/categories/accessories" "quote": "Als Sportler ist das Frühstück die wichtigste Mahlzeit für mich, und natürlich achte ich sehr darauf, was ich esse. Als ich 3Bears entdeckt habe, hat mich nachhaltig beeindruckt, dass die Haferflocken auf ein neues Level heben.",
} "cta": {
] "label": "Mehr erfahren",
"href": "/"
}
},
{
"imageSrc": "/overnight-oat.webp",
"name": "Sally Özcan",
"subtitle": "Foodcreatorin & Unternehmerin",
"quote": "Ich liebe Frühstück, weil es für mich der Start in einen guten Tag ist, mit meiner Familie, meinem Team oder unterwegs. Ich mag Produkte, die einfach einen Sinn ergeben, natürlich, lecker und ohne Schnickschnack. Genau das ist 3Bears für mich."
},
{
"imageSrc": "/overnight-oat.webp",
"name": "Sarah Harrison",
"subtitle": "Unternehmerin & Influencerin",
"quote": "3Bears teilt meine Leidenschaft für hochwertige Lebensmittel, die nicht nur mega lecker, sondern auch vollwertig sind. Deswegen war ich so begeistert von der Idee, gemeinsam ein Granola zu entwickeln.",
"cta": {
"label": "Mehr erfahren",
"href": "/"
}
},
{
"imageSrc": "/overnight-oat.webp",
"name": "Hendrik Pfeiffer",
"subtitle": "Profi-Läufer & German Champion",
"quote": "Als Profisportler spielt meine bewusste Ernährung eine absolute Schlüsselrolle, um vorne mitmischen zu können. Die Produkte von 3Bears passen dabei wie die Faust aufs Auge.",
"cta": {
"label": "Mehr erfahren",
"href": "/"
}
} }
} ]
},
{
"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"
}
]
}
}
} }
] }
} },
} {
}, "VtSubcription": {
{ "config": {
"Footer": { "className": "content-container py-12 flex justify-center",
"config": { "cardClassName": "rounded-2xl overflow-hidden bg-[#CFECD9] w-[800px] p-10",
"className": "content-container bg-[#003f31] w-full text text-[#11314E] flex items-center justify-between", "title": "10% für dich!",
"leftClassName": "w-full", "titleClassName": "text-[#003F31] text-[28px] font-bold text-center",
"left": [], "highlightClassName": "text-[#003F31] font-bold",
"center": [], "description": true,
"right": [ "formClassName": "mt-8 flex flex-col items-center gap-4",
{ "descriptionClassName": "text-[#003F31] text-[16px] text-center",
"VtFooterBottom": { "fieldsClassName": "grid grid-cols-1 small:grid-cols-2 gap-4 w-full",
"config": { "descriptionPrefix": "Melde dich jetzt zum 3Bears Newsletter an und sichere dir",
"className": " mr-[80px]", "descriptionHighlight": "10% Rabatt auf deinen nächsten Einkauf!",
"icons": [ "subtextClassName": "text-[#003F31] text-[16px] text-center",
"Mastercard", "descriptionSuffix": "",
"PayPal", "subtext": "Deinen Rabattcode bekommst du von uns per Mail.",
"Visa", "firstName": { "placeholder": "Vorname" },
"Mastercard", "email": { "placeholder": "E-Mail-Adresse" },
"Mastercard", "policyLabel": "Ich habe die DSGVO gelesen und akzeptiere sie.",
"Mastercard", "cta": { "label": "Anmelden", "className": "bg-[#FCEE56] text-[#0D382E] px-6 py-2 rounded-full w-fit font-bold" }
"Mastercard"
]
}
}
} }
] }
},
{
"FreeShippingPriceNudge": {
"config": {
"variant": "popup"
}
}
} }
} ]
} }
] }

872
config/nam.drsquatch.design.json
View File

@ -1,369 +1,571 @@
[ {
{ "layout": [
"Header": { {
"config": { "Header": {
"sticky": true "config": {
}, "sticky": true
"children": [ },
{ "children": [
"Banner": { {
"config": { "Banner": {
"variant": "nav", "config": {
"className": "h-12 bg-[#e6c981] text-black gap-12", "variant": "nav",
"center": [ "className": "h-12 bg-[#e6c981] text-black gap-12",
{ "center": [
"Link": { {
"config": { "Link": {
"label": "BLACK FRIDAY", "config": {
"href": "/", "label": "BLACK FRIDAY",
"className": "font-bold text-[1rem] flex items-center gap-1" "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"
}
} }
} }
}, ]
{ }
"Link": { }
"config": { },
"label": "Up to 55% off Bundles", {
"href": "/", "Nav": {
"className": "text-[1rem] flex items-center gap-1" "config": {
"className": "h-24 bg-[#1f3521] text-white gap-12",
"left": [
{
"Logo": {
"config": {
"src": "/drsquatch-logo.webp",
"alt": "MyShop",
"className": "h-auto w-40 mr-24",
"objectFit": "contain"
}
}
},
{
"Link": {
"config": {
"label": "SUBCRIBE",
"href": "/",
"className": "font-bold text-[1rem] text-white flex items-center mr-8 gap-1 hover:underline hover:text-white"
}
}
},
{
"Link": {
"config": {
"label": "REWARD",
"href": "/",
"className": "font-bold text-[1rem] text-white flex items-center mr-8 gap-1 hover:underline hover:text-white"
}
}
},
{
"VtMegaMenu": {
"config": {
"navLabel": {
"text": "SHOP",
"className": "font-bold text-[1rem] flex items-center mr-8 gap-1 hover:bg-transparent hover:underline hover:text-white"
}
}
}
},
{
"VtMegaMenu": {
"config": {
"navLabel": {
"text": "OUR STORY",
"className": "font-bold text-[1rem] text-white flex items-center hover:bg-transparent hover:underline hover:text-white"
}
}
} }
} }
}, ],
{ "right": [
"Link": { {
"config": { "VtCountryCodeSelect": {
"label": "SHOP NOW", "config": {
"href": "/", "trigger": {
"className": "font-bold text-[1rem] flex items-center gap-1 underline" "className": "w-auto font-bold text-[13px] text-white flex justify-start items-center gap-1 hover:text-[#009b93] bg-transparent shadow-none hover:bg-transparent",
"isFlag": true
}
}
}
},
{
"Button": {
"config": {
"icon": "User",
"className": "shadow-none bg-transparent text-white hover:text-black"
}
}
},
{
"VtCartButton": {
"config": {
"icon": "ShoppingCart",
"className": "shadow-none bg-transparent text-black w-[50px]"
}
} }
} }
} ]
] }
} }
} }
}, ]
{ }
"Nav": { },
"config": { {
"className": "h-24 bg-[#1f3521] text-white gap-12", "PropsChildren": {}
"left": [ },
{ {
"Logo": { "Footer": {
"config": { "config": {
"src": "/drsquatch-logo.webp", "className": "content-container border-none bg-[#1f3621] flex w-full border justify-between pb-8 gap-10 pt-16 px-[120px]",
"alt": "MyShop", "leftClassName": "flex ml-6 gap-x-24",
"className": "h-auto w-40 mr-24", "centerClassName": "flex",
"objectFit": "contain" "rightClassName": "flex",
"left": [
{
"VtMenuItem": {
"config": {
"title": "Help",
"className": "flex flex-col gap-y-2 text-[16px] font-semibold text-white gap-8",
"itemClassName": "text-[14px] font-[400] mt-3",
"items": [
{
"text": "FAQ",
"href": "/"
},
{
"text": "Track my order",
"href": "/categories/shoes"
},
{
"text": "Placeholder",
"href": "/categories/accessories"
},
{
"text": "Placeholder",
"href": "/categories/accessories"
},
{
"text": "Placeholder",
"href": "/categories/accessories"
},
{
"text": "Placeholder",
"href": "/categories/accessories"
} }
} ]
}, }
{ }
"Link": { },
"config": { {
"label": "SUBCRIBE", "VtMenuItem": {
"config": {
"title": "Shop",
"className": "flex flex-col gap-y-2 text-[16px] font-semibold text-white",
"itemClassName": "text-[14px] font-[400] flex items-center mt-3",
"items": [
{
"text": "Twitter",
"href": "/"
},
{
"text": "Facebook",
"href": "/categories/shoes"
},
{
"text": "Pinterest",
"href": "/categories/accessories"
},
{
"text": "Placeholder",
"href": "/categories/accessories"
},
{
"text": "Placeholder",
"href": "/categories/accessories"
},
{
"text": "Placeholder",
"href": "/categories/accessories"
},
{
"text": "Placeholder",
"href": "/categories/accessories"
}
]
}
}
},
{
"VtMenuItem": {
"config": {
"title": "Info",
"className": "flex flex-col gap-y-2 text-[16px] font-semibold text-white",
"itemClassName": "text-[14px] font-[400] w-[200px] mt-3",
"items": [
{
"text": "The Squatch Difference",
"href": "/"
},
{
"text": "Why Natural Products",
"href": "/categories/shoes"
},
{
"text": "No Harmful Ingredients",
"href": "/categories/accessories"
}
]
}
}
}
],
"center": [
{
"Logo": {
"config": {
"src": "/b-corp-logo.webp",
"alt": "MyShop",
"className": "h-auto w-[90px] mr-24",
"objectFit": "contain"
}
}
}
],
"right": [
{
"VtFooterSignUp": {
"config": {
"title": "Don't miss out on hot deals! Sign up and get up to 30% off.",
"className": "max-w-[760px]",
"titleClassName": "text-white text-[18px]",
"formClassName": "mt-2 w-full",
"inputClassName": "w-full",
"buttonClassName": "bg-[#C4622C] w-[90px]",
"socialsClassName": "mt-4 gap-8",
"socials": [
{
"icon": "Twitter",
"href": "/", "href": "/",
"className": "font-bold text-[1rem] text-white flex items-center mr-8 gap-1 hover:underline hover:text-white" "className": "w-5 h-5 text-white"
} },
} {
}, "icon": "Twitter",
{
"Link": {
"config": {
"label": "REWARD",
"href": "/", "href": "/",
"className": "font-bold text-[1rem] text-white flex items-center mr-8 gap-1 hover:underline hover:text-white" "className": "w-5 h-5 text-white"
} },
} {
}, "icon": "Twitter",
{ "href": "/",
"VtMegaMenu": { "className": "w-5 h-5 text-white"
"config": { },
"navLabel": { {
"text": "SHOP", "icon": "Twitter",
"className": "font-bold text-[1rem] flex items-center mr-8 gap-1 hover:bg-transparent hover:underline hover:text-white" "href": "/",
} "className": "w-5 h-5 text-white"
}
}
},
{
"VtMegaMenu": {
"config": {
"navLabel": {
"text": "OUR STORY",
"className": "font-bold text-[1rem] text-white flex items-center hover:bg-transparent hover:underline hover:text-white"
}
} }
]
}
}
}
]
}
}
},
{
"VtFooterBottom": {
"config": {
"className": "text-white text-[14px] font-[400] bg-[#1f3621] flex items-center justify-center",
"text": "©2025 Vibentec IT. All rights reserved",
"linksClassName": "flex items-center text-orange-500 mt-2 pl-2",
"links": [
{
"label": "Privacy Policy",
"href": "/"
},
{
"label": "Terms of Service",
"href": "/categories/shoes"
},
{
"label": "Cookie Policy",
"href": "/categories/accessories"
}
]
}
}
}
],
"pages": {
"Home": [
{
"Hero": {
"config": {
"className": "h-[35rem]",
"ImageDisplayer": {
"config": {
"duration": 0,
"images": [
"./drsquatch-banner.jpg"
],
"links": [
"/account"
]
}
},
"left": [
{
"VtCtaBanner": {
"config": {
"variant": "default",
"className": "left-[120px] top-[120px] bg-transparent border-none text-white text-center",
"tagTextClassName": "text-white bg-transparent",
"titleTextClassName": "text-white font-bold leading-normal text-[30px]",
"descriptionTextClassName": "text-white text-[1rem] w-[300px] ml-[6.6rem]",
"buttonTextClassName": "text-white bg-orange-500 w-[300px]",
"tagText": "ALL NEW!",
"titleText": "LUMBERJACK LODGE",
"descriptionText": "Step into the lodge with the warm, sweet scent of maple and vanilla.",
"buttonText": "SHOP NOW"
} }
} }
], }
"right": [ ],
{ "center": [],
"VtCountryCodeSelect": { "right": []
"config": { }
"trigger": { }
"className": "w-auto font-bold text-[13px] text-white flex justify-start items-center gap-1 hover:text-[#009b93] bg-transparent shadow-none hover:bg-transparent", },
"isFlag": true {
} "VtFeaturedProducts": {
} "config": {
} "title": "drsquatch-best-seller",
"styles": {
"container": "content-container py-12 px-[100px] small:py-24",
"header": {
"container": "flex justify-center mb-8",
"title": "text-[28px] font-bold text-[#1f3521]",
"isShowViewAll": false
},
"list": "grid grid-cols-2 small:grid-cols-3 gap-x-6 gap-y-24 small:gap-y-36",
"productCard": {
"card": "shadow-none border-none",
"className": "relative overflow-hidden rounded-2xl bg-white shadow-elevation-card-rest h-full flex flex-col",
"badgeText": "LIMITED EDITION",
"badge": {
"container": "absolute z-[1] top-0 left-0 pt-4",
"text": "uppercase px-4 py-2 bg-[#3B6F47] text-white"
}, },
{ "thumbnail": {
"Button": { "className": "rounded-none h-[300px] shadow-none",
"config": { "size": "full"
"icon": "User",
"className": "shadow-none bg-transparent text-white hover:text-black"
}
}
}, },
{ "content": " flex flex-col flex-1",
"VtCartButton": { "title": "mt-2 text-[#1f3521] text-[22px] font-bold",
"config": { "price": "mt-2 text-[#3B6F47] font-bold text-[20px] flex gap-3 flex-row-reverse justify-end",
"icon": "ShoppingCart", "description": "mt-2",
"className": "shadow-none bg-transparent text-black w-[50px]" "reviews": {
} "container": "mt-3 flex items-center gap-2",
} "stars": "flex gap-1",
"star": "text-[#C4622C] text-xl leading-none",
"emptyStar": "text-[#C4622C] text-xl opacity-30 leading-none",
"text": "text-[#1f3521]",
"rating": 3.6,
"count": 59
},
"button": {
"addToCart": "mt-6 w-full bg-[#C4622C] hover:bg-[#C4622C]/90 shadow-none text-white rounded-none h-fit font-bold",
"moreInfo": "hidden"
} }
] }
} }
} }
} }
] },
} {
}, "VtCategoryHighlight": {
{
"Hero": {
"config": {
"className": "h-[35rem]",
"ImageDisplayer": {
"config": { "config": {
"duration": 0, "title": "Oder lieber stöbern? Hier findest du sicher deine neuen Hafer-Favoriten.",
"images": [ "className": "content-container py-12 small:py-20",
"./drsquatch-banner.jpg" "gridClassName": "grid grid-cols-2 gap-6 w-full",
], "labelClassName": "absolute left-4 bottom-4 text-[#003F31] text-[18px] font-semibold",
"links": [ "items": [
"/account" {
"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"
}
] ]
} }
}, }
"left": [ },
{ {
"VtCtaBanner": { "VtBrand": {
"config": { "config": {
"variant": "default", "className": "w-full py-12 bg-[#CFECD9]",
"className": "left-[120px] top-[120px] bg-transparent border-none text-white text-center", "innerClassName": "content-container flex flex-col items-center",
"tagTextClassName": "text-white bg-transparent", "title": "",
"titleTextClassName": "text-white font-bold leading-normal text-[30px]", "titleClassName": "text-[#1f3521] text-[20px] font-bold mb-8",
"descriptionTextClassName": "text-white text-[1rem] w-[300px] ml-[6.6rem]", "brandsClassName": "flex w-full items-center justify-between gap-12",
"buttonTextClassName": "text-white bg-orange-500 w-[300px]", "items": [
"tagText": "ALL NEW!", {
"titleText": "LUMBERJACK LODGE", "imageSrc": "/brand-logo.png",
"descriptionText": "Step into the lodge with the warm, sweet scent of maple and vanilla.", "alt": "Men's Health",
"buttonText": "SHOP NOW" "containerClassName": "",
"imageClassName": "h-[40px] object-contain"
},
{
"imageSrc": "/brand-logo.png",
"alt": "GQ",
"containerClassName": "",
"imageClassName": "h-[40px] object-contain"
},
{
"imageSrc": "/brand-logo.png",
"alt": "Birchbox",
"containerClassName": "",
"imageClassName": "h-[40px] object-contain"
} }
]
}
}
},
{
"VtSubcription": {
"config": {
"className": "w-full",
"cardClassName": "overflow-hidden bg-[#F3EDE3] p-10",
"title": "SUBSCRIBE & SAVE",
"titleClassName": "text-[#003F31] text-[28px] font-bold text-center",
"description": true,
"policyLabel": "Ich habe die DSGVO gelesen und akzeptiere sie.",
"benefits": [
{
"icon": "🗓",
"title": "Ships Every 3 Months",
"description": "Customize your picks and scents, upgrade anytime, or hit snooze if you want. You're in control."
},
{
"icon": "🚚",
"title": "Free Delivery",
"description": "Subscribe once and relax. All your shipping expenses are covered by Squatch."
},
{
"icon": "⭐",
"title": "Exclusive Benefits",
"description": "Gain exclusive, subscriber-only benefits. Enjoy early access to new products and limited edition releases!"
}
],
"formClassName": "flex justify-center",
"cta": {
"label": "SUBSCRIBE & SAVE",
"className": "w-fit mt-12 px-[30px] h-[56px] rounded-full bg-orange-500 text-white font-bold"
} }
} }
], }
"center": [], },
"right": [] {
} "VtFeedback": {
} "config": {
}, "title": "100,000+ Reviews From Squatchers",
{ "className": "content-container py-16",
"CartMismatchBanner": { "titleClassName": "text-[#1f3521] text-[28px] font-bold text-center mb-10",
"config": { "duration": 5,
"show": true "options": {
} "loop": true
} },
}, "itemClassName": "min-w-full px-6",
{ "starsClassName": "text-[#C4622C] text-xl leading-none",
"FreeShippingPriceNudge": { "reviewTitleClassName": "text-[#1f3521] font-bold",
"config": { "reviewTextClassName": "text-[#1f3521]",
"variant": "popup" "authorClassName": "italic text-[#1f3521]",
} "controls": "mt-6 flex items-center justify-center gap-4",
} "items": [
}, {
{ "rating": 5,
"PropsChildren": {} "title": "Ah-freaking-amazing!",
}, "text": "So I just had my first shower with Dr. Squatch Cool Fresh Aloe. Holy sh*t this stuff is Ah-freaking-amazing! Talk about a life hack!",
{ "author": "Stephen B."
"Footer": { },
"config": { {
"className": "content-container border-none bg-[#1f3621] flex w-full border justify-between pb-8 gap-10 pt-16 px-[120px]", "rating": 5,
"leftClassName": "flex ml-6 gap-x-24", "title": "Best damn soap ever…period.",
"centerClassName": "flex", "text": "Best Damn Soap I EVER bought! Super smooth on the skin, smells awesome, makes you feel good showering, and yes…the wife approves.",
"rightClassName": "flex", "author": "Chris H."
"left": [ },
{ {
"VtMenuItem": { "rating": 5,
"config": { "title": "Hilarious…products awesome too",
"title": "Help", "text": "Ok…the Dr. Squatch commercials are just freakin hilarious…plus the products are awesome too! So yes, buy it now and subscribe to it!",
"className": "flex flex-col gap-y-2 text-[16px] font-semibold text-white gap-8", "author": "Mike C."
"itemClassName": "text-[14px] font-[400] mt-3",
"items": [
{
"text": "FAQ",
"href": "/"
},
{
"text": "Track my order",
"href": "/categories/shoes"
},
{
"text": "Placeholder",
"href": "/categories/accessories"
},
{
"text": "Placeholder",
"href": "/categories/accessories"
},
{
"text": "Placeholder",
"href": "/categories/accessories"
},
{
"text": "Placeholder",
"href": "/categories/accessories"
}
]
} }
} ]
},
{
"VtMenuItem": {
"config": {
"title": "Shop",
"className": "flex flex-col gap-y-2 text-[16px] font-semibold text-white",
"itemClassName": "text-[14px] font-[400] flex items-center mt-3",
"items": [
{
"text": "Twitter",
"href": "/"
},
{
"text": "Facebook",
"href": "/categories/shoes"
},
{
"text": "Pinterest",
"href": "/categories/accessories"
},
{
"text": "Placeholder",
"href": "/categories/accessories"
},
{
"text": "Placeholder",
"href": "/categories/accessories"
},
{
"text": "Placeholder",
"href": "/categories/accessories"
},
{
"text": "Placeholder",
"href": "/categories/accessories"
}
]
}
}
},
{
"VtMenuItem": {
"config": {
"title": "Info",
"className": "flex flex-col gap-y-2 text-[16px] font-semibold text-white",
"itemClassName": "text-[14px] font-[400] w-[200px] mt-3",
"items": [
{
"text": "The Squatch Difference",
"href": "/"
},
{
"text": "Why Natural Products",
"href": "/categories/shoes"
},
{
"text": "No Harmful Ingredients",
"href": "/categories/accessories"
}
]
}
}
} }
], }
"center": [ },
{ {
"Logo": { "CartMismatchBanner": {
"config": { "config": {
"src": "/b-corp-logo.webp", "show": true
"alt": "MyShop",
"className": "h-auto w-[90px] mr-24",
"objectFit": "contain"
}
}
} }
], }
"right": [ },
{ {
"VtFooterSignUp": { "FreeShippingPriceNudge": {
"config": { "config": {
"title": "Don't miss out on hot deals! Sign up and get up to 30% off.", "variant": "popup"
"className": "max-w-[760px]",
"titleClassName": "text-white text-[18px]",
"formClassName": "mt-2 w-full",
"inputClassName": "w-full",
"buttonClassName": "bg-[#C4622C] w-[90px]",
"socialsClassName": "mt-4 gap-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"
}
]
}
}
} }
] }
} }
} ],
}, "Product": [
{ {
"VtFooterBottom": { "VtFeaturedProducts": {
"config": { "config": {
"className": "text-white text-[14px] font-[400] bg-[#1f3621] flex items-center justify-center", "title": "drsquatch-best-seller"
"text": "©2025 Vibentec IT. All rights reserved",
"linksClassName": "flex items-center text-orange-500 mt-2 pl-2",
"links": [
{
"label": "Privacy Policy",
"href": "/"
},
{
"label": "Terms of Service",
"href": "/categories/shoes"
},
{
"label": "Cookie Policy",
"href": "/categories/accessories"
} }
] }
} }
} ],
"StorePage": [
{
"VtFeaturedProducts": {
"config": {
"title": "drsquatch-best-seller"
}
}
}
]
} }
] }

435
config/nam.mds-starter-design.json
View File

@ -1,229 +1,264 @@
[ {
{ "layout": [
"Header": { {
"config": { "Header": {
"sticky": true "config": {
}, "sticky": true
"children": [
{
"Banner": {
"config": {
"variant": "nav",
"className": "h-12 bg-[#E6EFFC] text-[#11314E] gap-12 pl-16",
"left": [
{
"Link": {
"config": {
"label": "Über Uns",
"href": "/",
"className": "text-[13px] flex items-center gap-1 cursor-pointer"
}
}
},
{
"Link": {
"config": {
"label": "Kontaktieren Uns",
"href": "/",
"className": "text-[13px] flex items-center gap-1"
}
}
}
],
"center": [
{
"Link": {
"config": {
"label": "Einsparung durch Digitalisierung in der Arztpraxis",
"href": "/",
"className": "text-[13px] flex items-center gap-1 "
}
}
},
{
"Button": {
"config": {
"label": "Mehr Info",
"href": "/",
"className": "text-[13px] flex items-center bg-[#112638] gap-1 "
}
}
}
],
"right": [
{
"Dropdown": {
"config": {
"trigger": {
"text": "EURO",
"className": "font-bold text-[13px] text-[#11314E] 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": "EURO",
"href": "/"
}
]
}
}
},
{
"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": false
}
}
}
}
]
}
}
}, },
{ "children": [
"Nav": { {
"config": { "Banner": {
"left": [ "config": {
{ "variant": "nav",
"VtSideMenu": {} "className": "h-12 bg-[#E6EFFC] text-[#11314E] gap-12 pl-16",
}, "left": [
{ {
"VtMegaMenu": { "Link": {
"config": { "config": {
"navLabel": { "label": "Über Uns",
"text": "Sale", "href": "/",
"className": "text-[13px] text-[#11314E] flex items-center mr-8 gap-1 hover:bg-transparent hover:underline hover:text-[#009b93]" "className": "text-[13px] flex items-center gap-1 cursor-pointer"
}
}
},
{
"Link": {
"config": {
"label": "Kontaktieren Uns",
"href": "/",
"className": "text-[13px] flex items-center gap-1"
} }
} }
} }
} ],
], "center": [
"center": [
{
"HomeButton": {
"config": {
"label": "Medusa Store"
}
}
}
],
"right": [
{
"AccountButton": {
"config": {
"label": "Account",
"className": "hover:text-ui-fg-base"
}
}
},
{
"VtCartButton": {
"config": {
"variant": "link",
"className": "hover:text-ui-fg-base"
}
}
}
]
}
}
}
]
}
},
{
"Hero": {
"config": {
"variant": "default",
"className": "bg-custom-gradient"
}
}
},
{
"CartMismatchBanner": {
"config": {
"show": true
}
}
},
{
"FreeShippingPriceNudge": {
"config": {
"variant": "popup"
}
}
},
{
"PropsChildren": {}
},
{
"Footer": {
"config": {
"className": "content-container flex w-full border h-[300px] justify-between",
"left": [
{
"VtMenuItem": {
"config": {
"title": "category",
"className": "flex flex-col gap-y-2",
"itemClassName": "text-ui-fg-subtle txt-small ml-3",
"items": [
{ {
"text": "Clothing", "Link": {
"href": "/" "config": {
"label": "Einsparung durch Digitalisierung in der Arztpraxis",
"href": "/",
"className": "text-[13px] flex items-center gap-1 "
}
}
}, },
{ {
"text": "Shoes", "Button": {
"href": "/categories/shoes" "config": {
"label": "Mehr Info",
"href": "/",
"className": "text-[13px] flex items-center bg-[#112638] gap-1 "
}
}
}
],
"right": [
{
"Dropdown": {
"config": {
"trigger": {
"text": "EURO",
"className": "font-bold text-[13px] text-[#11314E] 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": "EURO",
"href": "/"
}
]
}
}
}, },
{ {
"text": "Accessories", "VtCountryCodeSelect": {
"href": "/categories/accessories" "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": false
}
}
}
} }
] ]
} }
} }
} },
],
"center": [
{ {
"VtMenuItem": { "Nav": {
"config": { "config": {
"title": "category", "left": [
"className": "flex flex-col gap-y-2",
"itemClassName": "text-ui-fg-subtle txt-small ml-3",
"items": [
{ {
"text": "Clothing", "VtSideMenu": {}
"href": "/"
}, },
{ {
"text": "Shoes", "VtMegaMenu": {
"href": "/categories/shoes" "config": {
"navLabel": {
"text": "Sale",
"className": "text-[13px] text-[#11314E] flex items-center mr-8 gap-1 hover:bg-transparent hover:underline hover:text-[#009b93]"
}
}
}
}
],
"center": [
{
"HomeButton": {
"config": {
"label": "Medusa Store"
}
}
}
],
"right": [
{
"AccountButton": {
"config": {
"label": "Account",
"className": "hover:text-ui-fg-base"
}
}
}, },
{ {
"text": "Accessories", "VtCartButton": {
"href": "/categories/accessories" "config": {
"variant": "link",
"className": "hover:text-ui-fg-base"
}
}
} }
] ]
} }
} }
} }
],
"right": [
{
"Text": {
"config": {
"label": "Medusa Check",
"className": "text-[13px] text-[#A6A6A6]"
}
}
}
] ]
} }
},
{ "PropsChildren": {} },
{
"Footer": {
"config": {
"className": "content-container flex w-full border h-[300px] justify-between",
"left": [
{
"VtMenuItem": {
"config": {
"title": "category",
"className": "flex flex-col gap-y-2",
"itemClassName": "text-ui-fg-subtle txt-small ml-3",
"items": [
{ "text": "Clothing", "href": "/" },
{ "text": "Shoes", "href": "/categories/shoes" },
{ "text": "Accessories", "href": "/categories/accessories" }
]
}
}
}
],
"center": [
{
"VtMenuItem": {
"config": {
"title": "category",
"className": "flex flex-col gap-y-2",
"itemClassName": "text-ui-fg-subtle txt-small ml-3",
"items": [
{ "text": "Clothing", "href": "/" },
{ "text": "Shoes", "href": "/categories/shoes" },
{ "text": "Accessories", "href": "/categories/accessories" }
]
}
}
}
],
"right": [
{
"Text": {
"config": {
"label": "Medusa Check",
"className": "text-[13px] text-[#A6A6A6]"
}
}
}
]
}
}
} }
],
"pages": {
"Home": [
{
"Hero": {
"config": {
"variant": "default",
"className": "bg-custom-gradient"
}
}
},
{
"VtFeaturedProducts": {
"config": {
"title": "best-seller"
}
}
},
{
"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" }
}
}
],
"Product": [
{
"VtFeaturedProducts": {
"config": {
"title": "best-seller"
}
}
}
],
"StorePage": [
{
"VtFeaturedProducts": {
"config": {
"title": "best-seller"
}
}
}
]
} }
] }

754
config/nam.vibentec.design.json
View File

@ -1,382 +1,412 @@
[ {
{ "layout": [
"Header": { {
"config": { "Header": {
"sticky": true "config": {
}, "sticky": true
"children": [ },
{ "children": [
"Banner": { {
"config": { "Banner": {
"variant": "nav", "config": {
"className": "h-12 bg-[#E6EFFC] text-[#11314E] gap-12 pl-16", "variant": "nav",
"left": [ "className": "h-12 bg-[#E6EFFC] text-[#11314E] gap-12 pl-16",
{ "left": [
"Link": { {
"config": { "Link": {
"label": "Über Uns", "config": {
"href": "/", "label": "Über Uns",
"className": "text-[13px] flex items-center gap-1 cursor-pointer" "href": "/",
"className": "text-[13px] flex items-center gap-1 cursor-pointer"
}
} }
} },
}, {
{ "Link": {
"Link": { "config": {
"config": { "label": "Kontaktieren Uns",
"label": "Kontaktieren Uns", "href": "/",
"href": "/", "className": "text-[13px] flex items-center gap-1"
"className": "text-[13px] flex items-center gap-1"
}
}
}
],
"center": [
{
"Link": {
"config": {
"label": "Einsparung durch Digitalisierung in der Arztpraxis",
"href": "/",
"className": "text-[13px] flex items-center gap-1 "
}
}
},
{
"Link": {
"config": {
"label": "Mehr Info",
"href": "/",
"className": "text-[13px] rounded-md hover:text-white w-[80px] text-white text-center flex items-center bg-[#112638] flex justify-center h-[28px] "
}
}
}
],
"right": [
{
"Dropdown": {
"config": {
"trigger": {
"text": "EURO",
"className": "font-bold text-[13px] text-[#11314E] 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": "EURO",
"href": "/"
}
]
}
}
},
{
"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": false
} }
} }
} }
} ],
] "center": [
{
"Link": {
"config": {
"label": "Einsparung durch Digitalisierung in der Arztpraxis",
"href": "/",
"className": "text-[13px] flex items-center gap-1 "
}
}
},
{
"Link": {
"config": {
"label": "Mehr Info",
"href": "/",
"className": "text-[13px] rounded-md hover:text-white w-[80px] text-white text-center flex items-center bg-[#112638] flex justify-center h-[28px] "
}
}
}
],
"right": [
{
"Dropdown": {
"config": {
"trigger": {
"text": "EURO",
"className": "font-bold text-[13px] text-[#11314E] 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": "EURO",
"href": "/"
}
]
}
}
},
{
"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": false
}
}
}
}
]
}
}
},
{
"Nav": {
"config": {
"className": "h-24 bg-[white] text-[#11314E] gap-12 pl-16",
"left": [
{
"Logo": {
"config": {
"src": "/VibentecIT-logo.svg",
"alt": "MyShop",
"className": "h-full w-[180px] mr-4",
"objectFit": "contain"
}
}
},
{
"Link": {
"config": {
"label": "Home",
"href": "/",
"className": "text-[13px] text-[#11314E] flex items-center mr-8 gap-1 hover:underline hover:text-[#009b93]"
}
}
},
{
"Link": {
"config": {
"label": "Shop",
"href": "/",
"className": "text-[13px] text-[#11314E] flex items-center mr-6 gap-1 hover:underline hover:text-[#009b93]"
}
}
},
{
"VtMegaMenu": {
"config": {
"navLabel": {
"text": "Sale",
"className": "text-[13px] text-[#11314E] flex items-center mr-8 gap-1 hover:bg-transparent hover:underline hover:text-[#009b93]"
}
}
}
},
{
"VtMegaMenu": {
"config": {
"navLabel": {
"text": "OUR STORY",
"className": "font-bold text-[1rem] text-white flex items-center mr-8 gap-1 hover:bg-transparent hover:underline hover:text-white"
}
}
}
}
],
"right": [
{
"SearchInput": {
"config": {
"placeholder": "Search"
}
}
},
{
"AccountButton": {
"config": {
"icon": "User",
"className": " flex items-center gap-1 shadow-none"
}
}
},
{
"Button": {
"config": {
"icon": "Heart",
"className": " flex items-center gap-1 shadow-none w-[50px]"
}
}
},
{
"VtCartButton": {
"config": {
"icon": "ShoppingCart",
"className": "shadow-none bg-transparent text-black w-[50px]"
}
}
}
]
}
} }
} }
}, ]
{ }
"Nav": { },
"config": { { "PropsChildren": {} },
"className": "h-24 bg-[white] text-[#11314E] gap-12 pl-16", {
"left": [ "Footer": {
{ "config": {
"Logo": { "className": "content-container flex w-full border justify-between pb-8",
"config": { "leftClassName": "flex-col ml-6",
"src": "/VibentecIT-logo.svg", "centerClassName": "flex mt-[130px] gap-24",
"alt": "MyShop", "rightClassName": "flex mt-[160px]",
"className": "h-full w-[180px] mr-4", "left": [
"objectFit": "contain" {
} "VtFooterHero": {
} "config": {
}, "logoClassName": "h-[100px] w-[255px]",
{ "logoSrc": "/VibentecIT-logo.svg",
"Link": { "logoAlt": "Vibentec IT",
"config": { "title": "Der Wegbereiter für innovative IT-Lösungen",
"label": "Home", "description": "Tauchen Sie ein in eine Welt modernster Technologien, zuverlässiger Support und proaktiver Innovation – gemeinsam gestalten wir die digitale Zukunft Ihres Unternehmens.",
"href": "/", "cta": {
"className": "text-[13px] text-[#11314E] flex items-center mr-8 gap-1 hover:underline hover:text-[#009b93]" "label": "Kontaktieren Sie uns",
} "href": "/"
} },
}, "className": "",
{ "ctaClassName": "ml-8",
"Link": { "titleClassName": "ml-8",
"config": { "descriptionClassName": "ml-8 w-[320px]"
"label": "Shop", }
"href": "/", }
"className": "text-[13px] text-[#11314E] flex items-center mr-6 gap-1 hover:underline hover:text-[#009b93]" }
} ],
} "center": [
}, {
{ "VtMenuItem": {
"VtMegaMenu": { "config": {
"config": { "title": "Unternehmen",
"navLabel": { "className": "flex flex-col gap-y-2 text-[24px] font-semibold text-[#11314E]",
"text": "Sale", "itemClassName": "text-[1rem] font-[400]",
"className": "text-[13px] text-[#11314E] flex items-center mr-8 gap-1 hover:bg-transparent hover:underline hover:text-[#009b93]" "items": [
} { "text": "Über Uns", "href": "/" },
} { "text": "Placeholder", "href": "/categories/shoes" },
} { "text": "Placeholder", "href": "/categories/accessories" }
}, ]
{ }
"VtMegaMenu": { }
"config": { },
"navLabel": { {
"text": "OUR STORY", "VtMenuItem": {
"className": "font-bold text-[1rem] text-white flex items-center mr-8 gap-1 hover:bg-transparent hover:underline hover:text-white" "config": {
} "title": "Social Media",
} "className": "flex flex-col gap-y-2 text-[24px] font-semibold text-[#11314E]",
"itemClassName": "text-[1rem] font-[400] flex items-center",
"items": [
{ "text": "Twitter", "href": "/", "icon": "X" },
{ "text": "Facebook", "href": "/categories/shoes", "icon": "X" },
{ "text": "Pinterest", "href": "/categories/accessories", "icon": "X" }
]
}
}
},
{
"VtMenuItem": {
"config": {
"title": "Addresse",
"className": "flex flex-col gap-y-2 text-[24px] font-semibold text-[#11314E]",
"itemClassName": "text-[1rem] font-[400] w-[150px]",
"items": [
{ "text": "Hopfenstr. 10c76185 Karlsruhe Deutschland", "href": "/" },
{ "text": "+497271 5970098", "href": "/categories/shoes" },
{ "text": "info@vibentec-it.io", "href": "/categories/accessories" }
]
}
}
}
],
"right": [
{
"VtMenuItem": {
"config": {
"className": "flex flex-col gap-y-2 text-[24px] font-semibold text-[#11314E]",
"itemClassName": "text-[1rem] font-[400] w-[150px]",
"items": [
{ "text": "Datenschutz", "href": "/" },
{ "text": "Impressum", "href": "/categories/shoes" },
{ "text": "Installation Info", "href": "/categories/accessories" }
]
}
}
}
]
}
}
},
{
"Footer": {
"config": {
"className": "content-container h-[128px] w-full text text-[#11314E] flex items-center justify-between px-20 mt-2",
"leftClassName": "w-full",
"left": [
{
"VtFooterBottom": {
"config": {
"text": "©2025 Vibentec IT. All rights reserved",
"icons": ["Mastercard", "PayPal", "Visa"]
}
}
}
]
}
}
}
],
"pages": {
"Home": [
{
"Hero": {
"config": {
"className": "h-[35rem]",
"ImageDisplayer": {
"config": {
"duration": 5,
"images": ["./banner-hero.webp", "./banner-hero-1.webp", "./banner-hero-2.webp"],
"links": ["/", "/account", "/product"]
}
},
"left": [
{
"VtCtaBanner": {
"config": {
"variant": "default",
"className": "left-[120px] top-[80px]",
"titleTextClassName": "leading-normal",
"tagText": "Besonders Aktion",
"titleText": "Willkommen in Vibentec IT Shop",
"descriptionText": "Insert the accordion description here. It would look better as two lines of text or more.",
"buttonText": "Zum Einkaufen"
} }
} }
], }
"right": [ ],
{ "center": [],
"SearchInput": { "right": []
"config": { }
"placeholder": "Search" }
} },
} {
"VtFeaturedProducts": {
"config": {
"title": "best-seller",
"styles": {
"container": "content-container py-12 px-[100px] small:py-24",
"header": {
"container": "flex justify-between mb-8",
"title": "text-[56px] text-[#11314E]",
"isShowViewAll": false
},
"list": "grid grid-cols-2 small:grid-cols-3 gap-x-6 gap-y-24 small:gap-y-36",
"productCard": {
"card": "relative overflow-hidden rounded-2xl border border-[#285A86] bg-ui-bg-base shadow-elevation-card-rest h-full flex flex-col",
"badge": {
"container": "p-4",
"text": "z-20 px-3 py-1 border-[0.5px] rounded bg-[#c9e0f5] txt-compact-small-plus shadow-borders-base text-[#285A86]"
}, },
{ "thumbnail": { "className": "rounded-none h-[240px]", "size": "full" },
"AccountButton": { "subtitle": "text-ui-fg-subtle text-[14px]",
"config": { "content": "flex flex-col flex-1 justify-between p-4",
"icon": "User", "title": "text-ui-fg-subtle text-[18px]",
"className": " flex items-center gap-1 shadow-none" "description": "mt-2 text-ui-fg-subtle text-[14px]",
} "price": "flex items-center gap-x-1 text-[#285A86] font-bold border-b pb-4",
} "button": {
}, "addToCart": "w-fit h-[40px] bg-black text-white rounded-md",
{ "moreInfo": "w-fit h-[40px] border border-[#285A86] text-[#285A86] rounded-md"
"Button": {
"config": {
"icon": "Heart",
"className": " flex items-center gap-1 shadow-none w-[50px]"
}
}
},
{
"VtCartButton": {
"config": {
"icon": "ShoppingCart",
"className": "shadow-none bg-transparent text-black w-[50px]"
}
}
} }
] }
} }
} }
} }
] },
} {
}, "VtFeaturedProducts": {
{
"Hero": {
"config": {
"className": "h-[35rem]",
"ImageDisplayer": {
"config": { "config": {
"duration": 5, "title": "produkten",
"images": [ "styles": {
"./banner-hero.webp", "container": "content-container py-12 px-[100px] small:py-24",
"./banner-hero-1.webp", "header": {
"./banner-hero-2.webp" "container": "flex justify-between mb-8",
], "title": "text-[56px] text-[#11314E]",
"links": ["/", "/account", "/product"] "isShowViewAll": false
} },
}, "list": "grid grid-cols-2 small:grid-cols-3 gap-x-6 gap-y-24 small:gap-y-36",
"left": [ "productCard": {
{ "card": "relative overflow-hidden rounded-2xl border border-[#285A86] bg-ui-bg-base shadow-elevation-card-rest h-full flex flex-col",
"VtCtaBanner": { "badge": {
"config": { "container": "p-4",
"variant": "default", "text": "z-20 px-3 py-1 border-[0.5px] rounded bg-[#c9e0f5] txt-compact-small-plus shadow-borders-base text-[#285A86]"
"className": "left-[120px] top-[80px]",
"titleTextClassName": "leading-normal",
"tagText": "Besonders Aktion",
"titleText": "Willkommen in Vibentec IT Shop",
"descriptionText": "Insert the accordion description here. It would look better as two lines of text or more.",
"buttonText": "Zum Einkaufen"
}
}
}
],
"center": [],
"right": []
}
}
},
{
"CartMismatchBanner": {
"config": {
"show": true
}
}
},
{
"FreeShippingPriceNudge": {
"config": {
"variant": "popup"
}
}
},
{
"PropsChildren": {}
},
{
"Footer": {
"config": {
"className": "content-container flex w-full border justify-between pb-8",
"leftClassName": "flex-col ml-6",
"centerClassName": "flex mt-[130px] gap-24",
"rightClassName": "flex mt-[160px]",
"left": [
{
"VtFooterHero": {
"config": {
"logoClassName": "h-[100px] w-[255px]",
"logoSrc": "/VibentecIT-logo.svg",
"logoAlt": "Vibentec IT",
"title": "Der Wegbereiter für innovative IT-Lösungen",
"description": "Tauchen Sie ein in eine Welt modernster Technologien, zuverlässiger Support und proaktiver Innovation – gemeinsam gestalten wir die digitale Zukunft Ihres Unternehmens.",
"cta": {
"label": "Kontaktieren Sie uns",
"href": "/"
}, },
"className": "", "thumbnail": { "className": "rounded-none h-[240px]", "size": "full" },
"ctaClassName": "ml-8", "subtitle": "text-ui-fg-subtle text-[14px]",
"titleClassName": "ml-8", "content": "flex flex-col flex-1 justify-between p-4",
"descriptionClassName": "ml-8 w-[320px]" "title": "text-ui-fg-subtle text-[18px]",
"price": "flex items-center gap-x-1 text-[#285A86] font-bold border-b pb-4",
"button": {
"addToCart": "w-fit h-[40px] bg-black text-white rounded-md",
"moreInfo": "w-fit h-[40px] border border-[#285A86] text-[#285A86] rounded-md"
}
} }
} }
} }
], }
"center": [ },
{ {
"VtMenuItem": { "VtSubcription": {
"config": { "config": {
"title": "Unternehmen", "className": "content-container py-12 flex justify-center",
"className": "flex flex-col gap-y-2 text-[24px] font-semibold text-[#11314E]", "leftClassName": "w-1/2 bg-[#132437]",
"itemClassName": "text-[1rem] font-[400]", "cardClassName": "overflow-hidden bg-[#132437] w-1/2 p-10 text-left flex flex-col items-start",
"items": [ "title": "Subscribe our newsletter!",
{ "titleClassName": "text-white text-[28px] font-bold border-b-2 border-white",
"text": "Über Uns", "description": true,
"href": "/" "descriptionPrefix": "Subscribe to our newsletter and be the first to receive insights, updates, and expert tips",
}, "subtext": "Stay up to date!",
{ "email": { "placeholder": "E-Mail-Adresse", "className": "border border-white w-full h-[40px] mt-4" },
"text": "Placeholder", "policyLabel": "Ich habe die DSGVO gelesen und akzeptiere sie.",
"href": "/categories/shoes" "formClassName": "flex gap-4",
}, "fieldsClassName": "w-[390px]",
{ "cta": { "label": "Subcribe", "className": "w-fit h-[40px] px-6 mt-4 bg-white text-[#132437] font-bold rounded-md" },
"text": "Placeholder", "subtextSubcribe": { "label": "By subscribing, you agree to our terms.!", "className": "text-white text-[13px]" }
"href": "/categories/accessories"
}
]
}
}
},
{
"VtMenuItem": {
"config": {
"title": "Social Media",
"className": "flex flex-col gap-y-2 text-[24px] font-semibold text-[#11314E]",
"itemClassName": "text-[1rem] font-[400] flex items-center",
"items": [
{
"text": "Twitter",
"href": "/",
"icon": "X"
},
{
"text": "Facebook",
"href": "/categories/shoes",
"icon": "X"
},
{
"text": "Pinterest",
"href": "/categories/accessories",
"icon": "X"
}
]
}
}
},
{
"VtMenuItem": {
"config": {
"title": "Addresse",
"className": "flex flex-col gap-y-2 text-[24px] font-semibold text-[#11314E]",
"itemClassName": "text-[1rem] font-[400] w-[150px]",
"items": [
{
"text": "Hopfenstr. 10c76185 Karlsruhe Deutschland",
"href": "/"
},
{
"text": "+497271 5970098",
"href": "/categories/shoes"
},
{
"text": "info@vibentec-it.io",
"href": "/categories/accessories"
}
]
}
}
} }
], }
"right": [ },
{ { "CartMismatchBanner": { "config": { "show": true } } },
"VtMenuItem": { { "FreeShippingPriceNudge": { "config": { "variant": "popup" } } }
"config": { ]
"className": "flex flex-col gap-y-2 text-[24px] font-semibold text-[#11314E]",
"itemClassName": "text-[1rem] font-[400] w-[150px]",
"items": [
{
"text": "Datenschutz",
"href": "/"
},
{
"text": "Impressum",
"href": "/categories/shoes"
},
{
"text": "Installation Info",
"href": "/categories/accessories"
}
]
}
}
}
]
}
}
},
{
"Footer": {
"config": {
"className": "content-container h-[128px] w-full text text-[#11314E] flex items-center justify-between px-20 mt-2",
"leftClassName": "w-full",
"left": [
{
"VtFooterBottom": {
"config": {
"text": "©2025 Vibentec IT. All rights reserved",
"icons": [
"Mastercard",
"PayPal",
"Visa"
]
}
}
}
]
}
}
} }
] }

BIN
public/brand-logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 20 KiB

BIN
public/overnight-oat.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 195 KiB

18
src/app/[countryCode]/(main)/layout.tsx
View File

@ -5,14 +5,22 @@ import { retrieveCustomer } from "@lib/data/customer"
import { getBaseURL } from "@lib/util/env" import { getBaseURL } from "@lib/util/env"
import { StoreCartShippingOption } from "@medusajs/types" import { StoreCartShippingOption } from "@medusajs/types"
import { DynamicLayoutRenderer } from "../../../vibentec/renderer" import { DynamicLayoutRenderer } from "../../../vibentec/renderer"
import { LayoutContext, LayoutComponentNode, } from "../../../vibentec/component-map" import { LayoutContext, LayoutComponentNode } from "../../../vibentec/component-map"
import { loadDesignConfig } from "vibentec/configloader" import { loadLayoutConfig } from "vibentec/configloader"
import { getRegion } from "@lib/data/regions"
export const metadata: Metadata = { export const metadata: Metadata = {
metadataBase: new URL(getBaseURL()), metadataBase: new URL(getBaseURL()),
} }
export default async function PageLayout(props: { children: React.ReactNode }) { export default async function PageLayout(props: {
children: React.ReactNode
params: Promise<{ countryCode: string }>
}) {
const params = await props.params
const { countryCode } = params
const region = await getRegion(countryCode)
const customer = await retrieveCustomer() const customer = await retrieveCustomer()
const cart = await retrieveCart() const cart = await retrieveCart()
let shippingOptions: StoreCartShippingOption[] = [] let shippingOptions: StoreCartShippingOption[] = []
@ -23,12 +31,14 @@ export default async function PageLayout(props: { children: React.ReactNode }) {
shippingOptions = shipping_options shippingOptions = shipping_options
} }
const nodes: LayoutComponentNode[] = await loadDesignConfig() const nodes: LayoutComponentNode[] = await loadLayoutConfig()
const context: LayoutContext = { const context: LayoutContext = {
customer, customer,
cart, cart,
shippingOptions, shippingOptions,
contentChildren: props.children, contentChildren: props.children,
countryCode,
region,
} }

36
src/app/[countryCode]/(main)/page.tsx
View File

@ -4,6 +4,10 @@ import FeaturedProducts from "@modules/home/components/featured-products"
import Hero from "@modules/home/components/hero" import Hero from "@modules/home/components/hero"
import { listCollections } from "@lib/data/collections" import { listCollections } from "@lib/data/collections"
import { getRegion } from "@lib/data/regions" import { getRegion } from "@lib/data/regions"
import VtFeaturedProducts from "@modules/home/components/vt-featured-products"
import { DynamicLayoutRenderer } from "@vibentec/renderer"
import { LayoutContext, LayoutComponentNode } from "@vibentec/component-map"
import { loadPageConfig } from "@vibentec/configloader"
export const metadata: Metadata = { export const metadata: Metadata = {
title: "Medusa Next.js Starter Template", title: "Medusa Next.js Starter Template",
@ -23,22 +27,26 @@ export default async function Home(props: {
const { collections } = await listCollections({ const { collections } = await listCollections({
fields: "id, handle, title", fields: "id, handle, title",
}) })
const res = await listCollections({
fields: "id, handle, title", console.log('collections:',collections)
})
if (!collections || !region) { if (!collections || !region) {
return null return null
} }
console.log(res, '--------------') const nodes: LayoutComponentNode[] = await loadPageConfig("Home")
return (
<> if (!region) {
{/* <Hero /> */} return null
<div className="py-12"> }
<ul className="flex flex-col gap-x-6">
<FeaturedProducts collections={collections} region={region} /> const context: LayoutContext = {
</ul> customer: null,
</div> cart: null,
</> shippingOptions: [],
) contentChildren: null,
countryCode,
region,
}
return <DynamicLayoutRenderer nodes={nodes} context={context} />
} }

27
src/app/[countryCode]/(main)/products/[handle]/page.tsx
View File

@ -3,6 +3,9 @@ import { notFound } from "next/navigation"
import { listProducts } from "@lib/data/products" import { listProducts } from "@lib/data/products"
import { getRegion, listRegions } from "@lib/data/regions" import { getRegion, listRegions } from "@lib/data/regions"
import ProductTemplate from "@modules/products/templates" import ProductTemplate from "@modules/products/templates"
import { DynamicLayoutRenderer } from "@vibentec/renderer"
import { LayoutContext, LayoutComponentNode } from "@vibentec/component-map"
import { loadPageConfig } from "@vibentec/configloader"
type Props = { type Props = {
params: Promise<{ countryCode: string; handle: string }> params: Promise<{ countryCode: string; handle: string }>
@ -96,11 +99,25 @@ export default async function ProductPage(props: Props) {
notFound() notFound()
} }
const nodes: LayoutComponentNode[] = await loadPageConfig("Product")
const context: LayoutContext = {
customer: null,
cart: null,
shippingOptions: [],
contentChildren: null,
countryCode: params.countryCode,
region,
}
return ( return (
<ProductTemplate <>
product={pricedProduct} <ProductTemplate
region={region} product={pricedProduct}
countryCode={params.countryCode} region={region}
/> countryCode={params.countryCode}
/>
<DynamicLayoutRenderer nodes={nodes} context={context} />
</>
) )
} }

31
src/app/[countryCode]/(main)/store/page.tsx
View File

@ -2,6 +2,10 @@ import { Metadata } from "next"
import { SortOptions } from "@modules/store/components/refinement-list/sort-products" import { SortOptions } from "@modules/store/components/refinement-list/sort-products"
import StoreTemplate from "@modules/store/templates" import StoreTemplate from "@modules/store/templates"
import { LayoutComponentNode, LayoutContext } from "@vibentec/component-map"
import { getRegion } from "@lib/data/regions"
import { loadPageConfig } from "@vibentec/configloader"
import { DynamicLayoutRenderer } from "@vibentec/renderer"
export const metadata: Metadata = { export const metadata: Metadata = {
title: "Store", title: "Store",
@ -19,15 +23,28 @@ type Params = {
} }
export default async function StorePage(props: Params) { export default async function StorePage(props: Params) {
const params = await props.params; const params = await props.params
const searchParams = await props.searchParams; const searchParams = await props.searchParams
const region = await getRegion(params.countryCode)
const { sortBy, page } = searchParams const { sortBy, page } = searchParams
const nodes: LayoutComponentNode[] = await loadPageConfig("Store")
const context: LayoutContext = {
customer: null,
cart: null,
shippingOptions: [],
contentChildren: null,
countryCode: params.countryCode,
region,
}
return ( return (
<StoreTemplate <>
sortBy={sortBy} <StoreTemplate
page={page} sortBy={sortBy}
countryCode={params.countryCode} page={page}
/> countryCode={params.countryCode}
/>
<DynamicLayoutRenderer nodes={nodes} context={context} />
</>
) )
} }

1
src/lib/data/collections.ts
View File

@ -36,7 +36,6 @@ export const listCollections = async (
{ {
query: queryParams, query: queryParams,
next, next,
cache: "force-cache",
} }
) )
.then(({ collections }) => ({ collections, count: collections.length })) .then(({ collections }) => ({ collections, count: collections.length }))

3
src/lib/data/products.ts
View File

@ -63,12 +63,11 @@ export const listProducts = async ({
offset, offset,
region_id: region?.id, region_id: region?.id,
fields: fields:
"*variants.calculated_price,+variants.inventory_quantity,+metadata,+tags", "*variants.calculated_price,+variants.inventory_quantity,*metadata,+tags",
...queryParams, ...queryParams,
}, },
headers, headers,
next, next,
cache: "force-cache",
} }
) )
.then(({ products, count }) => { .then(({ products, count }) => {

72
src/modules/home/components/vt-brand/index.tsx Normal file
View File

@ -0,0 +1,72 @@
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 VtBrand({
nodes,
context,
}: {
nodes: LayoutComponentDefinition
context: LayoutContext
}) {
const props = nodes.config ?? {}
const title: string = props.title ?? "Trusted By"
const items = props.items ?? []
const classes = {
container: props.className ?? "w-full py-12 bg-[#CFECD9]",
inner: props.innerClassName ?? "content-container flex flex-col items-center",
title: props.titleClassName ?? "text-[#1f3521] text-[20px] font-bold mb-8",
brands: props.brandsClassName ?? "flex w-full items-center justify-between gap-12",
item: props.itemClassName ?? "opacity-90",
image: props.imageClassName ?? "h-[48px] w-auto object-contain",
label: props.labelClassName ?? "text-[#1f3521] text-[36px] font-semibold",
}
if (!items || items.length === 0) {
return null
}
const renderItem = (brand: any, idx: number) => {
const content = brand.imageSrc ? (
<img
src={brand.imageSrc}
alt={brand.alt ?? brand.label ?? `brand-${idx}`}
className={clx(classes.image, brand.imageClassName)}
/>
) : (
<span className={clx(classes.label, brand.className)}>
{brand.label ?? ""}
</span>
)
return brand.href ? (
<LocalizedClientLink
key={`brand-${idx}`}
href={brand.href}
className={clx(classes.item, brand.containerClassName)}
>
{content}
</LocalizedClientLink>
) : (
<div className={clx(classes.item, brand.containerClassName)} key={`brand-${idx}`}>
{content}
</div>
)
}
return (
<section className={classes.container}>
<div className={classes.inner}>
{title && <div className={classes.title}>{title}</div>}
<div className={classes.brands}>
{items.map((brand: any, idx: number) => renderItem(brand, idx))}
</div>
</div>
</section>
)
}

86
src/modules/home/components/vt-category-highlight/index.tsx Normal file
View File

@ -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 ? (
<img
src={tile.imageSrc}
alt={tile.label ?? `category-${idx}`}
className={clx(classes.image, tile.imageClassName)}
/>
) : (
<div
className={clx(
"w-full h-full flex items-center justify-center",
tile.className
)}
>
<div className={clx(tile.headingClassName)}>{tile.headingLabel}</div>
<div className={tile.descriptionClassName}>{tile.descriptionLabel}</div>
<button className={tile.buttonClassName}>{tile.buttonLabel}</button>
</div>
)
const content = (
<div className={clx("relative w-full h-full")}>
{imageEl}
{tile.label && <span className={classes.label}>{tile.label}</span>}
</div>
)
return tile.href ? (
<LocalizedClientLink
key={`tile-${idx}`}
href={tile.href}
className={clx("w-full h-full", tile.className)}
>
{content}
</LocalizedClientLink>
) : (
<div className={clx(tile.className, "w-full h-full")} key={`tile-${idx}`}>
{content}
</div>
)
}
return (
<section className={classes.container}>
{title && <h2 className={classes.title}>{title}</h2>}
<div className={classes.grid}>
{items.map((tile: any, idx: number) => renderTile(tile, idx))}
</div>
</section>
)
}

52
src/modules/home/components/vt-featured-products/index.tsx Normal file
View File

@ -0,0 +1,52 @@
import { HttpTypes } from "@medusajs/types"
import ProductRail from "./product-rail"
import { listCollections } from "@lib/data/collections"
import { LayoutComponentDefinition, LayoutContext } from "@vibentec/component-map"
export default async function VtFeaturedProducts(props: {
collections?: HttpTypes.StoreCollection[]
region?: HttpTypes.StoreRegion
countryCode?: string
nodes?: LayoutComponentDefinition
context?: LayoutContext
}) {
let { collections, region, countryCode } = props
const { nodes, context } = props
if (context) {
if (!region) region = context.region
if (!countryCode) countryCode = context.countryCode
}
if (!collections && region) {
const result = await listCollections({
fields: "id, handle, title",
})
collections = result.collections
}
if (!collections || !region || !countryCode) {
return null
}
const configTitle = nodes?.config?.title
const styles = nodes?.config?.styles
let displayCollections = collections
if (configTitle) {
displayCollections = collections.filter(
(c) => c.handle === configTitle || c.title === configTitle
)
}
return displayCollections.map((collection) => (
<li key={collection.id}>
<ProductRail
collection={collection}
region={region}
countryCode={countryCode}
styles={styles}
/>
</li>
))
}

68
src/modules/home/components/vt-featured-products/product-rail/index.tsx Normal file
View File

@ -0,0 +1,68 @@
import { listProducts } from "@lib/data/products"
import { HttpTypes } from "@medusajs/types"
import { Text, clx } from "@medusajs/ui"
import InteractiveLink from "@modules/common/components/interactive-link"
import ProductCard from "@modules/products/components/vt-product-card"
export default async function ProductRail({
collection,
region,
countryCode,
styles,
}: {
collection: HttpTypes.StoreCollection
region: HttpTypes.StoreRegion
countryCode: string
styles?: any
}) {
const {
response: { products: pricedProducts },
} = await listProducts({
regionId: region.id,
queryParams: {
collection_id: collection.id,
fields: "*variants.calculated_price",
},
})
if (!pricedProducts) {
return null
}
const classes = {
container: styles?.container ?? "content-container py-12 px-[100px] small:py-24",
header: {
container: styles?.header?.container ?? "flex justify-between mb-8",
title: styles?.header?.title ?? "txt-xlarge",
isShowViewAll: styles?.header.isShowViewAll ?? true,
},
list: styles?.list ?? "grid grid-cols-2 small:grid-cols-3 gap-x-6 gap-y-24 small:gap-y-36",
}
return (
<div className={classes.container}>
<div className={classes.header.container}>
<Text className={classes.header.title}>{collection.title}</Text>
{classes.header.isShowViewAll && (
<InteractiveLink href={`/collections/${collection.handle}`}>
View all
</InteractiveLink>
)}
</div>
<ul className={classes.list}>
{pricedProducts &&
pricedProducts.map((product) => (
<li key={product.id}>
<ProductCard
product={product}
countryCode={countryCode}
styles={styles?.productCard}
badgeText={styles?.productCard?.badgeText}
/>
</li>
))}
</ul>
</div>
)
}

74
src/modules/home/components/vt-feedback-card/index.tsx Normal file
View File

@ -0,0 +1,74 @@
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 VtFeedbackCard({
nodes,
context,
}: {
nodes: LayoutComponentDefinition
context: LayoutContext
}) {
const props = nodes.config ?? {}
const title: string = props.title ?? ""
const items = props.items ?? []
const classes = {
container: props.className ?? "",
title: props.titleClassName ?? "text-[#003F31] text-[28px] font-semibold mb-10",
grid: props.gridClassName ?? "grid grid-cols-1 small:grid-cols-2 xl:grid-cols-4 gap-6",
card: props.cardClassName ?? "rounded-2xl overflow-hidden bg-[#CFECD9]",
image: props.imageClassName ?? "w-full h-[260px] object-cover",
content: props.contentClassName ?? "p-6",
name: props.nameClassName ?? "text-[#003F31] text-[20px] font-bold",
subtitle: props.subtitleClassName ?? "mt-1 text-[#003f31b3] text-[14px]",
quote: props.quoteClassName ?? "mt-4 text-[#003F31] text-[16px]",
cta: props.ctaClassName ?? "mt-6 inline-flex items-center justify-center bg-[#FCEE56] text-[#0D382E] px-6 py-2 rounded-full font-bold",
}
if (!items || items.length === 0) return null
const renderCard = (entry: any, idx: number) => {
const imageEl = entry.imageSrc ? (
<img
src={entry.imageSrc}
alt={entry.imageAlt ?? entry.name ?? `feedback-card-${idx}`}
className={classes.image}
/>
) : null
const ctaEl = entry.cta?.href ? (
<LocalizedClientLink href={entry.cta.href} className={clx(classes.cta, entry.cta?.className)}>
{entry.cta.label ?? "Mehr erfahren"}
</LocalizedClientLink>
) : entry.cta?.label ? (
<button className={clx(classes.cta, entry.cta?.className)}>{entry.cta.label}</button>
) : null
return (
<div className={clx(classes.card, entry.className)} key={`vt-feedback-card-${idx}`}>
{imageEl}
<div className={clx(classes.content)}>
{entry.name && <div className={clx(classes.name, entry.nameClassName)}>{entry.name}</div>}
{entry.subtitle && (
<div className={clx(classes.subtitle, entry.subtitleClassName)}>{entry.subtitle}</div>
)}
{entry.quote && <div className={clx(classes.quote, entry.quoteClassName)}>{entry.quote}</div>}
{ctaEl}
</div>
</div>
)
}
return (
<section className={classes.container}>
{title && <h2 className={classes.title}>{title}</h2>}
<div className={classes.grid}>{items.map((it: any, idx: number) => renderCard(it, idx))}</div>
</section>
)
}

91
src/modules/home/components/vt-feedback/index.tsx Normal file
View File

@ -0,0 +1,91 @@
"use client"
import useEmblaCarousel from "embla-carousel-react"
import Autoplay from "embla-carousel-autoplay"
import { useMemo } from "react"
import { clx } from "@medusajs/ui"
import {
LayoutComponentDefinition,
LayoutContext,
} from "@vibentec/component-map"
import { NextButton, PrevButton, usePrevNextButtons } from "@modules/layout/templates/vt-carousel/carousel-arrow-button"
export default function VtFeedback({
nodes,
context,
}: {
nodes: LayoutComponentDefinition
context: LayoutContext
}) {
const props = nodes.config ?? {}
const title: string = props.title ?? ""
const items = props.items ?? []
const durationSeconds: number = props.duration ?? 5
const options = props.options ?? { loop: true }
const plugins = useMemo(() => {
if (!durationSeconds || durationSeconds <= 0) return []
return [
Autoplay({
delay: durationSeconds * 1000,
stopOnInteraction: false,
stopOnMouseEnter: true,
}),
]
}, [durationSeconds])
const [emblaRef, emblaApi] = useEmblaCarousel(options, plugins)
const { prevBtnDisabled, nextBtnDisabled, onPrevButtonClick, onNextButtonClick } = usePrevNextButtons(emblaApi)
const classes = {
container: props.className ?? "content-container py-16",
title: props.titleClassName ?? "text-[#1f3521] text-[28px] font-bold text-center mb-10",
viewport: "relative overflow-hidden",
containerInner: "flex",
slide: props.itemClassName ?? "min-w-full px-6",
slideInner: "flex flex-col items-center text-center gap-3",
stars: props.starsClassName ?? "text-[#C4622C] text-xl leading-none",
reviewTitle: props.reviewTitleClassName ?? "text-[#1f3521] font-bold",
reviewText: props.reviewTextClassName ?? "text-[#1f3521]",
author: props.authorClassName ?? "italic text-[#1f3521]",
controls: props.controls,
}
if (!items || items.length === 0) return null
const showControls = items.length > 1 && classes.controls
const renderStars = (rating?: number) => {
const count = Math.max(0, Math.min(5, Math.round(rating ?? 5)))
return "★★★★★".slice(0, count)
}
return (
<section className={classes.container}>
{title && <h2 className={classes.title}>{title}</h2>}
<div className={classes.viewport} ref={emblaRef}>
<div className={classes.containerInner}>
{items.map((it: any, idx: number) => (
<div className={classes.slide} key={`feedback-${idx}`}>
<div className={classes.slideInner}>
<div className={classes.stars}>{renderStars(it.rating)}</div>
{it.title && <div className={classes.reviewTitle}>{it.title}</div>}
{it.text && <div className={classes.reviewText}>{it.text}</div>}
{it.author && <div className={classes.author}>{it.author}</div>}
</div>
</div>
))}
</div>
{showControls && (
<div className="absolute top-1/2 -translate-y-1/2 left-0 right-0 flex items-center justify-between px-4">
<div className="pointer-events-auto">
<PrevButton onClick={onPrevButtonClick} disabled={prevBtnDisabled} />
</div>
<div className="pointer-events-auto">
<NextButton onClick={onNextButtonClick} disabled={nextBtnDisabled} />
</div>
</div>
)}
</div>
</section>
)
}

205
src/modules/home/components/vt-subcription/index.tsx Normal file
View File

@ -0,0 +1,205 @@
"use client"
import { Button } from "@medusajs/ui"
import { clx } from "@medusajs/ui"
import {
LayoutComponentDefinition,
LayoutContext,
} from "@vibentec/component-map"
import React, { useState } from "react"
interface BenefitItem {
icon?: string
imgSrc?: string
title?: string
description?: string
className?: string
iconClassName?: string
titleClassName?: string
descriptionClassName?: string
}
export default function VtSubcription({
nodes,
context,
}: {
nodes: LayoutComponentDefinition
context: LayoutContext
}) {
const props = nodes.config ?? {}
const [firstName, setFirstName] = useState("")
const [email, setEmail] = useState("")
const [accepted, setAccepted] = useState(false)
const [submitted, setSubmitted] = useState(false)
const classes = {
container: props.className ?? "content-container",
left: props.leftClassName ?? "",
card: props.cardClassName ?? "rounded-2xl bg-[#CFECD9] p-8 small:p-12",
title:
props.titleClassName ??
"text-white text-[28px] font-bold text-center",
description:
props.descriptionClassName ?? "mt-2 text-white",
highlight: props.highlightClassName ?? "font-bold",
form: props.formClassName ?? "mt-8 flex flex-col gap-6",
fields: props.fieldsClassName ?? "grid grid-cols-1 small:grid-cols-2 gap-4",
input:
props.inputClassName ??
"h-[52px] rounded-md border border-[#003F31]/40 px-4 bg-transparent text-white",
checkboxRow: props.checkboxRowClassName ?? "flex items-center gap-3",
checkbox:
props.checkboxClassName ??
"w-5 h-5 rounded-md border border-[#003F31]/60",
checkboxLabel: props.checkboxLabelClassName ?? "text-white text-[16px]",
subtextClass: props.subtextClassName ?? "text-white",
submit:
props.submitClassName ?? "",
success: props.successClassName ?? "mt-4 text-center text-white",
benefits:
props.benefitsClassName ??
"mt-8 grid grid-cols-1 small:grid-cols-3 gap-8",
benefitItem:
props.benefitItemClassName ??
"flex flex-col items-center text-center gap-3",
benefitIcon:
props.benefitIconClassName ??
"w-12 h-12 rounded-full bg-[#003F31] text-white flex items-center justify-center",
benefitTitle: props.benefitTitleClassName ?? "text-white font-semibold",
benefitDesc: props.benefitDescClassName ?? "text-white opacity-80",
subtextSubcribe: props.subtextSubcribe ?? {},
}
const submitConfig = props.cta ?? {}
const policyLabel: string =
props.policyLabel ?? "Ich habe die DSGVO gelesen und akzeptiere sie."
const firstNameField = props.firstName ?? null
const emailField = props.email ?? null
const onSubmit = (e: React.FormEvent) => {
e.preventDefault()
if (!accepted) return
setSubmitted(true)
console.log("subscription_submit", { firstName, email, accepted })
}
return (
<section className={classes.container}>
{classes.left && <div className={classes.left}>
half
</div>}
<div className={classes.card}>
{props.title && <h2 className={classes.title}>{props.title}</h2>}
{props.description && (
<p className={classes.description}>
{props.descriptionPrefix}{" "}
<span className={classes.highlight}>
{props.descriptionHighlight}
</span>{" "}
{props.descriptionSuffix}
</p>
)}
{Array.isArray(props.benefits) && props.benefits.length > 0 && (
<div className={classes.benefits}>
{props.benefits.map((b: BenefitItem, i: number) => (
<div
key={`benefit-${i}`}
className={clx(classes.benefitItem, b.className)}
>
{b.imgSrc ? (
<img
src={b.imgSrc}
alt={b.title ?? `benefit-${i}`}
className={clx(classes.benefitIcon, b.iconClassName)}
/>
) : (
<div
className={clx(classes.benefitIcon, b.iconClassName)}
aria-hidden="true"
>
{b.icon ?? ""}
</div>
)}
{b.title && (
<div className={clx(classes.benefitTitle, b.titleClassName)}>
{b.title}
</div>
)}
{b.description && (
<div
className={clx(classes.benefitDesc, b.descriptionClassName)}
>
{b.description}
</div>
)}
</div>
))}
</div>
)}
{props.subtext && (
<p
className={clx(
"mt-2 text-center", classes?.subtextClass ?? "text-[#003F31]"
)}
>
{props.subtext}
</p>
)}
<form className={classes.form} onSubmit={onSubmit}>
<div className={classes.fields}>
{firstNameField && (
<input
type="text"
placeholder={firstNameField.placeholder ?? "Vorname"}
value={firstName}
onChange={(e) => setFirstName(e.target.value)}
className={clx(classes.input, firstNameField.className)}
/>
)}
{emailField && (
<input
type="email"
placeholder={emailField.placeholder ?? "E-Mail-Adresse"}
value={email}
onChange={(e) => setEmail(e.target.value)}
className={clx(classes.input, emailField.className)}
required
/>
)}
</div>
{props.newCheckboxRowClassName && (
<label className={classes.checkboxRow}>
<input
type="checkbox"
checked={accepted}
onChange={(e) => setAccepted(e.target.checked)}
className={classes.checkbox}
/>
<span className={classes.checkboxLabel}>{policyLabel}</span>
</label>
)}
<button
type="submit"
className={clx(classes.submit, submitConfig.className)}
>
{submitConfig.label ?? "Anmelden"}
</button>
</form>
{classes?.subtextSubcribe && (
<div className={props.subtextSubcribe?.className}>
{props.subtextSubcribe?.label}
</div>
)}
{submitted && (
<div className={classes.success}>
{props.successMessage ??
"Danke! Prüfe deine E-Mails für den Rabattcode."}
</div>
)}
</div>
</section>
)
}

2
src/modules/products/components/product-preview/price.tsx
View File

@ -18,7 +18,7 @@ export default async function PreviewPrice({ price }: { price: VariantPrice }) {
)} )}
<Text <Text
className={clx("text-ui-fg-muted", { className={clx("text-ui-fg-muted", {
"text-ui-fg-interactive": price.price_type === "sale", "text-green-700": price.price_type === "sale",
})} })}
data-testid="price" data-testid="price"
> >

225
src/modules/products/components/vt-product-card/index.tsx Normal file
View File

@ -0,0 +1,225 @@
import { HttpTypes } from "@medusajs/types"
import { Button, Heading, Text, clx } from "@medusajs/ui"
import LocalizedClientLink from "@modules/common/components/localized-client-link"
import Divider from "@modules/common/components/divider"
import PreviewPrice from "@modules/products/components/product-preview/price"
import { getProductPrice } from "@lib/util/get-product-price"
import { addToCart } from "@lib/data/cart"
import VtThumbnail from "../vt-thumbnail"
import { Plus, ChevronRight } from "@medusajs/icons"
type ProductCardProps = {
product: HttpTypes.StoreProduct
badgeText?: string
deliveryTime?: string
className?: string
countryCode: string
styles?: any
}
export default function ProductCard({
product,
badgeText = "Saved up to 20%",
deliveryTime = "2-4 Wochen",
className,
countryCode,
styles,
}: ProductCardProps) {
const firstVariant = product.variants?.[0]
const inStock = (() => {
if (!firstVariant) return false
if (!firstVariant.manage_inventory) return true
if (firstVariant.allow_backorder) return true
return (firstVariant.inventory_quantity || 0) > 0
})()
console.dir(product, { depth: null })
const { cheapestPrice } = getProductPrice({ product })
async function handleAddToCart() {
"use server"
if (!firstVariant?.id) return
await addToCart({
variantId: firstVariant.id,
quantity: 1,
countryCode,
})
}
const description = (() => {
const prodDescription = product.description || ""
const textSlice =
prodDescription.length > 120
? prodDescription.slice(0, 117) + "…"
: prodDescription
return textSlice
})()
const classes = {
card: styles?.card ?? className ?? "",
badge: {
container: styles?.badge?.container ?? " pb-4",
text:
styles?.badge?.text ??
"z-20 px-3 py-1 border-[0.5px] rounded bg-[#c9e0f5] txt-compact-small-plus shadow-borders-base text-[#285A86] ",
},
thumbnail: {
className: styles?.thumbnail?.className ?? "rounded-none h-[240px]",
size: styles?.thumbnail?.size ?? "full",
},
subtitle: styles?.subtitle ?? "",
content: styles?.content ?? "p-6 flex flex-col flex-1",
title: styles?.title ?? "",
price: styles?.price ?? "",
description: styles?.description ?? "",
reviews: {
container: styles?.reviews?.container ?? undefined,
stars: styles?.reviews?.stars ?? "flex gap-1",
star: styles?.reviews?.star ?? "text-[#C4622C] text-xl leading-none",
emptyStar:
styles?.reviews?.emptyStar ??
"text-[#C4622C] text-xl opacity-30 leading-none",
text: styles?.reviews?.text ?? "txt-small text-ui-fg-subtle",
rating: styles?.reviews?.rating,
count: styles?.reviews?.count,
},
button: {
addToCart: styles?.button?.addToCart ?? "",
moreInfo: styles?.button?.moreInfo ?? "",
isShowIcon: styles?.button?.isShowIcon ?? false,
},
}
return (
<div className={clx(classes.card)}>
<LocalizedClientLink
href={`/products/${product.handle}`}
className="block"
>
<div className="relative">
{badgeText && (
<div className={classes.badge.container}>
<span className={classes.badge.text}>{badgeText}</span>
</div>
)}
<VtThumbnail
thumbnail={product.thumbnail}
className={classes.thumbnail.className}
images={product.images}
size={classes.thumbnail.size}
isFeatured
/>
</div>
</LocalizedClientLink>
<div className={classes.content}>
{classes.subtitle && product.collection && (
<LocalizedClientLink
href={`/collections/${product.collection.handle}`}
className="txt-small text-ui-fg-muted hover:text-ui-fg-subtle"
>
{product.subtitle}
</LocalizedClientLink>
)}
<LocalizedClientLink
href={`/products/${product.handle}`}
className="block"
>
<Heading
level="h3"
className={classes.title}
data-testid="product-card-title"
>
{product.title}
</Heading>
</LocalizedClientLink>
{classes.price && (
<div className={classes.price}>
{cheapestPrice && <PreviewPrice price={cheapestPrice} />}
</div>
)}
{(classes.reviews.rating !== undefined ||
classes.reviews.count !== undefined) && (
<div
className={
classes.reviews.container || "mt-2 flex items-center gap-3"
}
>
<div className="relative inline-block">
<div className={classes.reviews.stars}>
{Array.from({ length: 5 }).map((_, i) => (
<span
key={`star-empty-${i}`}
className={classes.reviews.emptyStar}
>
★
</span>
))}
</div>
<div
className="absolute inset-0 overflow-hidden"
style={{
width: `${Math.max(
0,
Math.min(
100,
(((classes.reviews.rating as number) ?? 0) / 5) * 100
)
)}%`,
}}
>
<div className={classes.reviews.stars}>
{Array.from({ length: 5 }).map((_, i) => (
<span
key={`star-fills-${i}`}
className={classes.reviews.star}
>
★
</span>
))}
</div>
</div>
</div>
{typeof classes.reviews.count === "number" && (
<span className={classes.reviews.text}>
{classes.reviews.count} Reviews
</span>
)}
</div>
)}
{classes.description && (
<Text className={clx(classes.description, "txt-small my-4")}>
{description}
</Text>
)}
<div className="flex gap-3 mt-auto">
{classes.button?.addToCart && (
<Button
formAction={handleAddToCart}
disabled={!inStock}
variant="primary"
className={classes.button.addToCart}
>
Add to cart {classes.button.isShowIcon && <Plus />}
</Button>
)}
{classes.button?.moreInfo && (
<LocalizedClientLink
href={`/products/${product.handle}`}
className="flex-1"
>
<Button variant="secondary" className={classes.button.moreInfo}>
More Info {classes.button.isShowIcon && <ChevronRight />}
</Button>
</LocalizedClientLink>
)}
</div>
</div>
</div>
)
}

88
src/modules/products/components/vt-thumbnail/index.tsx Normal file
View File

@ -0,0 +1,88 @@
import { Container, clx } from "@medusajs/ui"
import Image from "next/image"
import React from "react"
import PlaceholderImage from "@modules/common/icons/placeholder-image"
type ThumbnailProps = {
thumbnail?: string | null
// TODO: Fix image typings
images?: any[] | null
size?: "small" | "medium" | "large" | "full" | "square"
isFeatured?: boolean
className?: string
"data-testid"?: string
}
const VtThumbnail: React.FC<ThumbnailProps> = ({
thumbnail,
images,
size = "small",
isFeatured,
className,
"data-testid": dataTestid,
}) => {
const imageUrls = images?.map((i: any) => i.url) || []
const initialImage = thumbnail || imageUrls?.[0]
let hoverImage: string | undefined = initialImage
if (imageUrls.length > 1) {
hoverImage = imageUrls.find((u) => u !== initialImage)
}
return (
<Container
className={clx(
"group relative w-full overflow-hidden p-4 bg-ui-bg-subtle shadow-elevation-card-rest group-hover:shadow-elevation-card-hover transition-shadow ease-in-out duration-150",
className,
{
"aspect-[11/14]": isFeatured,
"aspect-[9/16]": !isFeatured && size !== "square",
"aspect-[1/1]": size === "square",
"w-[180px]": size === "small",
"w-[290px]": size === "medium",
"w-[440px]": size === "large",
"w-full": size === "full",
}
)}
data-testid={dataTestid}
>
<ImageOrPlaceholder
image={initialImage}
size={size}
className="opacity-100 group-hover:opacity-0 transition-opacity duration-300"
/>
{hoverImage && (
<ImageOrPlaceholder
image={hoverImage}
size={size}
className="opacity-0 group-hover:opacity-100 transition-opacity duration-300"
/>
)}
</Container>
)
}
const ImageOrPlaceholder = ({
image,
size,
className,
}: Pick<ThumbnailProps, "size"> & { image?: string; className?: string }) => {
return image ? (
<Image
src={image}
alt="Thumbnail"
className={clx("absolute inset-0 object-cover object-center", className)}
draggable={false}
quality={50}
sizes="(max-width: 576px) 280px, (max-width: 768px) 360px, (max-width: 992px) 480px, 800px"
fill
/>
) : (
<div className={clx("w-full h-full absolute inset-0 flex items-center justify-center", className)}>
<PlaceholderImage size={size === "small" ? 16 : 24} />
</div>
)
}
export default VtThumbnail

14
src/vibentec/component-map.tsx
View File

@ -25,6 +25,12 @@ import VtFooterSignUp from "@modules/layout/templates/vt-footer/vt-footer-signup
import Hero from "@modules/layout/templates/hero" import Hero from "@modules/layout/templates/hero"
import { VtCarousel } from "@modules/layout/templates/vt-carousel" import { VtCarousel } from "@modules/layout/templates/vt-carousel"
import { VtCtaBanner } from "@modules/layout/templates/vt-cta-banner" import { VtCtaBanner } from "@modules/layout/templates/vt-cta-banner"
import VtFeaturedProducts from "@modules/home/components/vt-featured-products"
import VtCategoryHighlight from "@modules/home/components/vt-category-highlight"
import VtBrand from "@modules/home/components/vt-brand"
import VtFeedback from "@modules/home/components/vt-feedback"
import VtFeedbackCard from "@modules/home/components/vt-feedback-card"
import VtSubcription from "@modules/home/components/vt-subcription"
type ComponentConfig = Record<string, any> type ComponentConfig = Record<string, any>
@ -38,6 +44,8 @@ export interface LayoutContext {
cart: any cart: any
shippingOptions: any[] shippingOptions: any[]
contentChildren: React.ReactNode contentChildren: React.ReactNode
countryCode?: string
region?: any
} }
export type ComponentRenderer = { export type ComponentRenderer = {
@ -97,6 +105,12 @@ export const componentMap: Record<string, ComponentRenderer> = {
VtFooterSignUp: nodesContextRenderer(VtFooterSignUp), VtFooterSignUp: nodesContextRenderer(VtFooterSignUp),
Footer: nodesContextRenderer(VtFooter), Footer: nodesContextRenderer(VtFooter),
ImageDisplayer: nodesContextRenderer(VtCarousel), ImageDisplayer: nodesContextRenderer(VtCarousel),
VtFeaturedProducts: nodesContextRenderer(VtFeaturedProducts),
VtCategoryHighlight: nodesContextRenderer(VtCategoryHighlight),
VtBrand: nodesContextRenderer(VtBrand),
VtFeedback: nodesContextRenderer(VtFeedback),
VtFeedbackCard: nodesContextRenderer(VtFeedbackCard),
VtSubcription: nodesContextRenderer(VtSubcription),
} }
export type ComponentName = keyof typeof componentMap export type ComponentName = keyof typeof componentMap

24
src/vibentec/configloader.ts
View File

@ -1,11 +1,29 @@
import fs from "fs" import fs from "fs"
import path from "path" import path from "path"
import { jsonFileNames } from "./devJsonFileNames"; import { jsonFileNames } from "./devJsonFileNames"
const fileName = jsonFileNames.namStarter; const fileName = jsonFileNames.namVibentec
export async function loadDesignConfig() { async function readDesignFile() {
const filePath = path.join(process.cwd(), "config", fileName) const filePath = path.join(process.cwd(), "config", fileName)
const fileData = await fs.promises.readFile(filePath, "utf-8") const fileData = await fs.promises.readFile(filePath, "utf-8")
return JSON.parse(fileData) return JSON.parse(fileData)
} }
export async function loadLayoutConfig() {
const config = await readDesignFile()
if (Array.isArray(config)) return config
return config.layout ?? []
}
export async function loadPageConfig(pageKey: string) {
const config = await readDesignFile()
if (Array.isArray(config)) return []
const pages = config.pages ?? {}
return pages[pageKey] ?? []
}
export async function loadDesignConfig() {
return loadLayoutConfig()
}