Compare commits
No commits in common. "main" and "layout-system-basics" have entirely different histories.
main
...
layout-sys
|
|
@ -1,592 +0,0 @@
|
|||
{
|
||||
"layout": [
|
||||
{
|
||||
"Header": {
|
||||
"config": {
|
||||
"sticky": true,
|
||||
"variant": "ticker"
|
||||
},
|
||||
"children": [
|
||||
{
|
||||
"Banner": {
|
||||
"config": {
|
||||
"variant": "ticker",
|
||||
"className": "h-12 bg-[#009b93] text-[#fff] gap-12",
|
||||
"speed": 24,
|
||||
"items": [
|
||||
{
|
||||
"Link": {
|
||||
"config": {
|
||||
"label": "NEU: Overnight Oats – Sallys Nussecke 😍",
|
||||
"href": "/"
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"Link": {
|
||||
"config": {
|
||||
"label": "Versandkostenfrei ab 45 € 💛",
|
||||
"href": "/"
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"Link": {
|
||||
"config": {
|
||||
"label": "Gratis Geschenk ab 60 € Warenkorbwert 🎁",
|
||||
"href": "/"
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"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": [
|
||||
{
|
||||
"VtCountryCodeSelect": {
|
||||
"config": {
|
||||
"trigger": {
|
||||
"className": "w-auto font-bold text-[13px] text-[#11314E] flex justify-start items-center gap-1 hover:text-[#009b93] bg-transparent shadow-none hover:bg-transparent",
|
||||
"isFlag": true,
|
||||
"isDisplayFullname": true
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"Button": {
|
||||
"config": {
|
||||
"icon": "MagnifyingGlass",
|
||||
"className": "shadow-none"
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"AccountButton": {
|
||||
"config": {
|
||||
"icon": "User",
|
||||
"className": " flex items-center gap-1 shadow-none"
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"VtCartButton": {
|
||||
"config": {
|
||||
"icon": "ShoppingBag",
|
||||
"className": "shadow-none bg-transparent text-black w-[50px]"
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
"PropsChildren": {}
|
||||
},
|
||||
{
|
||||
"Footer": {
|
||||
"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": [
|
||||
{
|
||||
"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"
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
"center": [],
|
||||
"right": []
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"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": {
|
||||
"className": "rounded-2xl bg-white h-[320px] object-contain shadow-none",
|
||||
"size": "full"
|
||||
},
|
||||
"content": "flex flex-col items-center justify-start text-center p-0 mt-6",
|
||||
"title": "text-[#003F31] text-[28px] font-semibold",
|
||||
"description": "order-3 text-[#003f31b3]",
|
||||
"price": "mt-2 text-[#0D382E] text-[24px] font-bold order-2 flex gap-2",
|
||||
"reviews": {
|
||||
"container": "mt-3 flex items-center gap-2 order-1",
|
||||
"stars": "flex gap-1",
|
||||
"star": "text-[#F59E0B] text-xl leading-none",
|
||||
"emptyStar": "text-[#F59E0B] text-xl opacity-30 leading-none",
|
||||
"text": "text-[#003F31] text-[14px]",
|
||||
"rating": 4.5,
|
||||
"count": 38
|
||||
},
|
||||
"button": {
|
||||
"addToCart": "hidden",
|
||||
"moreInfo": "hidden",
|
||||
"isShowIcon": false
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"CartMismatchBanner": {
|
||||
"config": {
|
||||
"show": true
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"VtCategoryHighlight": {
|
||||
"config": {
|
||||
"title": "Oder lieber stöbern? Hier findest du sicher deine neuen Hafer-Favoriten.",
|
||||
"className": "content-container py-12 small:py-20",
|
||||
"gridClassName": "grid grid-cols-4 gap-6 w-full",
|
||||
"labelClassName": "absolute left-4 bottom-4 text-[#003F31] text-[18px] font-semibold",
|
||||
"items": [
|
||||
{
|
||||
"imageSrc": "/overnight-oat.webp",
|
||||
"href": "/categories/overnight-oats",
|
||||
"label": "Overnight Oats",
|
||||
"className": "bg-[#CFECD9] col-start-1 col-end-3 row-start-1 row-end-3",
|
||||
"imageClassName": "object-contain"
|
||||
},
|
||||
{
|
||||
"imageSrc": "/overnight-oat.webp",
|
||||
"href": "/categories/porridge",
|
||||
"label": "Porridge",
|
||||
"className": "bg-[#F9E0B0]",
|
||||
"imageClassName": "object-contain"
|
||||
},
|
||||
{
|
||||
"imageSrc": "/overnight-oat.webp",
|
||||
"href": "/categories/cereals",
|
||||
"label": "Cereals",
|
||||
"className": "bg-[#F59E0B]",
|
||||
"imageClassName": "object-contain"
|
||||
},
|
||||
{
|
||||
"imageSrc": "/overnight-oat.webp",
|
||||
"href": "/categories/granola",
|
||||
"label": "Granola",
|
||||
"className": "bg-[#A7D8F0]",
|
||||
"imageClassName": "object-contain"
|
||||
},
|
||||
{
|
||||
"imageSrc": "/overnight-oat.webp",
|
||||
"href": "/categories/oat-bars",
|
||||
"label": "Oat Bars",
|
||||
"className": "bg-[#EED7F2]",
|
||||
"imageClassName": "object-contain"
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"VtBrand": {
|
||||
"config": {
|
||||
"className": "w-full py-12 bg-[#CFECD9]",
|
||||
"innerClassName": "content-container flex flex-col items-center",
|
||||
"title": "Trusted By",
|
||||
"titleClassName": "text-[#003F31] text-[20px] font-semibold mb-8",
|
||||
"brandsClassName": "flex w-full items-center justify-between gap-12",
|
||||
"items": [
|
||||
{
|
||||
"label": "Men'sHealth",
|
||||
"containerClassName": "",
|
||||
"className": "text-[#003F31] text-[36px] font-semibold italic"
|
||||
},
|
||||
{
|
||||
"label": "GQ",
|
||||
"containerClassName": "",
|
||||
"className": "text-[#003F31] text-[44px] font-black tracking-tight"
|
||||
},
|
||||
{
|
||||
"label": "BIRCHBOX",
|
||||
"containerClassName": "",
|
||||
"className": "text-[#003F31] text-[36px] font-semibold tracking-[0.2em]"
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"VtFeedbackCard": {
|
||||
"config": {
|
||||
"className": "content-container py-16 bg-[#CFECD9] mt-16",
|
||||
"title": "Der Hafer-Hype ist real. Finden nicht nur 100.000+ zufriedene 3Bears Fans.",
|
||||
"gridClassName": "grid grid-cols-1 small:grid-cols-2 xl:grid-cols-4 gap-6",
|
||||
"cardClassName": "rounded-2xl overflow-hidden",
|
||||
"imageClassName": "w-full h-[260px] object-cover",
|
||||
"contentClassName": "p-6",
|
||||
"nameClassName": "text-[#003F31] text-[20px] font-bold",
|
||||
"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",
|
||||
"items": [
|
||||
{
|
||||
"imageSrc": "/overnight-oat.webp",
|
||||
"name": "Harry Kane",
|
||||
"subtitle": "Profißballer, Kapitän engl. Nationalmannschaft, Stürmer FC Bayern",
|
||||
"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": "/"
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"VtSubcription": {
|
||||
"config": {
|
||||
"className": "content-container py-12 flex justify-center",
|
||||
"cardClassName": "rounded-2xl overflow-hidden bg-[#CFECD9] w-[800px] p-10",
|
||||
"title": "10% für dich!",
|
||||
"titleClassName": "text-[#003F31] text-[28px] font-bold text-center",
|
||||
"highlightClassName": "text-[#003F31] font-bold",
|
||||
"description": true,
|
||||
"formClassName": "mt-8 flex flex-col items-center gap-4",
|
||||
"descriptionClassName": "text-[#003F31] text-[16px] text-center",
|
||||
"fieldsClassName": "grid grid-cols-1 small:grid-cols-2 gap-4 w-full",
|
||||
"descriptionPrefix": "Melde dich jetzt zum 3Bears Newsletter an und sichere dir",
|
||||
"descriptionHighlight": "10% Rabatt auf deinen nächsten Einkauf!",
|
||||
"subtextClassName": "text-[#003F31] text-[16px] text-center",
|
||||
"descriptionSuffix": "",
|
||||
"subtext": "Deinen Rabattcode bekommst du von uns per Mail.",
|
||||
"firstName": { "placeholder": "Vorname" },
|
||||
"email": { "placeholder": "E-Mail-Adresse" },
|
||||
"policyLabel": "Ich habe die DSGVO gelesen und akzeptiere sie.",
|
||||
"cta": { "label": "Anmelden", "className": "bg-[#FCEE56] text-[#0D382E] px-6 py-2 rounded-full w-fit font-bold" }
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"FreeShippingPriceNudge": {
|
||||
"config": {
|
||||
"variant": "popup"
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
|
|
@ -1,571 +0,0 @@
|
|||
{
|
||||
"layout": [
|
||||
{
|
||||
"Header": {
|
||||
"config": {
|
||||
"sticky": true
|
||||
},
|
||||
"children": [
|
||||
{
|
||||
"Banner": {
|
||||
"config": {
|
||||
"variant": "nav",
|
||||
"className": "h-12 bg-[#e6c981] text-black gap-12",
|
||||
"center": [
|
||||
{
|
||||
"Link": {
|
||||
"config": {
|
||||
"label": "BLACK FRIDAY",
|
||||
"href": "/",
|
||||
"className": "font-bold text-[1rem] flex items-center gap-1"
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"Link": {
|
||||
"config": {
|
||||
"label": "Up to 55% off Bundles",
|
||||
"href": "/",
|
||||
"className": "text-[1rem] flex items-center gap-1"
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"Link": {
|
||||
"config": {
|
||||
"label": "SHOP NOW",
|
||||
"href": "/",
|
||||
"className": "font-bold text-[1rem] flex items-center gap-1 underline"
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"Nav": {
|
||||
"config": {
|
||||
"className": "h-24 bg-[#1f3521] text-white gap-12",
|
||||
"left": [
|
||||
{
|
||||
"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": [
|
||||
{
|
||||
"VtCountryCodeSelect": {
|
||||
"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
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"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]"
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
"PropsChildren": {}
|
||||
},
|
||||
{
|
||||
"Footer": {
|
||||
"config": {
|
||||
"className": "content-container border-none bg-[#1f3621] flex w-full border justify-between pb-8 gap-10 pt-16 px-[120px]",
|
||||
"leftClassName": "flex ml-6 gap-x-24",
|
||||
"centerClassName": "flex",
|
||||
"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"
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"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": "/",
|
||||
"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"
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"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"
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
"center": [],
|
||||
"right": []
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"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": {
|
||||
"className": "rounded-none h-[300px] shadow-none",
|
||||
"size": "full"
|
||||
},
|
||||
"content": " flex flex-col flex-1",
|
||||
"title": "mt-2 text-[#1f3521] text-[22px] font-bold",
|
||||
"price": "mt-2 text-[#3B6F47] font-bold text-[20px] flex gap-3 flex-row-reverse justify-end",
|
||||
"description": "mt-2",
|
||||
"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": {
|
||||
"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"
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"VtBrand": {
|
||||
"config": {
|
||||
"className": "w-full py-12 bg-[#CFECD9]",
|
||||
"innerClassName": "content-container flex flex-col items-center",
|
||||
"title": "",
|
||||
"titleClassName": "text-[#1f3521] text-[20px] font-bold mb-8",
|
||||
"brandsClassName": "flex w-full items-center justify-between gap-12",
|
||||
"items": [
|
||||
{
|
||||
"imageSrc": "/brand-logo.png",
|
||||
"alt": "Men's Health",
|
||||
"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"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"VtFeedback": {
|
||||
"config": {
|
||||
"title": "100,000+ Reviews From Squatchers",
|
||||
"className": "content-container py-16",
|
||||
"titleClassName": "text-[#1f3521] text-[28px] font-bold text-center mb-10",
|
||||
"duration": 5,
|
||||
"options": {
|
||||
"loop": true
|
||||
},
|
||||
"itemClassName": "min-w-full px-6",
|
||||
"starsClassName": "text-[#C4622C] text-xl leading-none",
|
||||
"reviewTitleClassName": "text-[#1f3521] font-bold",
|
||||
"reviewTextClassName": "text-[#1f3521]",
|
||||
"authorClassName": "italic text-[#1f3521]",
|
||||
"controls": "mt-6 flex items-center justify-center gap-4",
|
||||
"items": [
|
||||
{
|
||||
"rating": 5,
|
||||
"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."
|
||||
},
|
||||
{
|
||||
"rating": 5,
|
||||
"title": "Best damn soap ever…period.",
|
||||
"text": "Best Damn Soap I EVER bought! Super smooth on the skin, smells awesome, makes you feel good showering, and yes…the wife approves.",
|
||||
"author": "Chris H."
|
||||
},
|
||||
{
|
||||
"rating": 5,
|
||||
"title": "Hilarious…products awesome too",
|
||||
"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!",
|
||||
"author": "Mike C."
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"CartMismatchBanner": {
|
||||
"config": {
|
||||
"show": true
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"FreeShippingPriceNudge": {
|
||||
"config": {
|
||||
"variant": "popup"
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
"Product": [
|
||||
{
|
||||
"VtFeaturedProducts": {
|
||||
"config": {
|
||||
"title": "drsquatch-best-seller"
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
"StorePage": [
|
||||
{
|
||||
"VtFeaturedProducts": {
|
||||
"config": {
|
||||
"title": "drsquatch-best-seller"
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
|
|
@ -1,264 +0,0 @@
|
|||
{
|
||||
"layout": [
|
||||
{
|
||||
"Header": {
|
||||
"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
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"Nav": {
|
||||
"config": {
|
||||
"left": [
|
||||
{
|
||||
"VtSideMenu": {}
|
||||
},
|
||||
{
|
||||
"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]"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
"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"
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
{ "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"
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
|
|
@ -1,412 +0,0 @@
|
|||
{
|
||||
"layout": [
|
||||
{
|
||||
"Header": {
|
||||
"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 "
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"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]"
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
{ "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": "",
|
||||
"ctaClassName": "ml-8",
|
||||
"titleClassName": "ml-8",
|
||||
"descriptionClassName": "ml-8 w-[320px]"
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
"center": [
|
||||
{
|
||||
"VtMenuItem": {
|
||||
"config": {
|
||||
"title": "Unternehmen",
|
||||
"className": "flex flex-col gap-y-2 text-[24px] font-semibold text-[#11314E]",
|
||||
"itemClassName": "text-[1rem] font-[400]",
|
||||
"items": [
|
||||
{ "text": "Über Uns", "href": "/" },
|
||||
{ "text": "Placeholder", "href": "/categories/shoes" },
|
||||
{ "text": "Placeholder", "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": [
|
||||
{
|
||||
"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"
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
"center": [],
|
||||
"right": []
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"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" },
|
||||
"subtitle": "text-ui-fg-subtle text-[14px]",
|
||||
"content": "flex flex-col flex-1 justify-between p-4",
|
||||
"title": "text-ui-fg-subtle text-[18px]",
|
||||
"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"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"VtFeaturedProducts": {
|
||||
"config": {
|
||||
"title": "produkten",
|
||||
"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" },
|
||||
"subtitle": "text-ui-fg-subtle text-[14px]",
|
||||
"content": "flex flex-col flex-1 justify-between p-4",
|
||||
"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"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"VtSubcription": {
|
||||
"config": {
|
||||
"className": "content-container py-12 flex justify-center",
|
||||
"leftClassName": "w-1/2 bg-[#132437]",
|
||||
"cardClassName": "overflow-hidden bg-[#132437] w-1/2 p-10 text-left flex flex-col items-start",
|
||||
"title": "Subscribe our newsletter!",
|
||||
"titleClassName": "text-white text-[28px] font-bold border-b-2 border-white",
|
||||
"description": true,
|
||||
"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" },
|
||||
"policyLabel": "Ich habe die DSGVO gelesen und akzeptiere sie.",
|
||||
"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" },
|
||||
"subtextSubcribe": { "label": "By subscribing, you agree to our terms.!", "className": "text-white text-[13px]" }
|
||||
}
|
||||
}
|
||||
},
|
||||
{ "CartMismatchBanner": { "config": { "show": true } } },
|
||||
{ "FreeShippingPriceNudge": { "config": { "variant": "popup" } } }
|
||||
]
|
||||
}
|
||||
}
|
||||
|
|
@ -21,8 +21,6 @@
|
|||
"@radix-ui/react-accordion": "^1.2.1",
|
||||
"@stripe/react-stripe-js": "^1.7.2",
|
||||
"@stripe/stripe-js": "^1.29.0",
|
||||
"embla-carousel-autoplay": "^8.6.0",
|
||||
"embla-carousel-react": "^8.6.0",
|
||||
"lodash": "^4.17.21",
|
||||
"next": "^15.3.1",
|
||||
"pg": "^8.11.3",
|
||||
|
|
|
|||
Binary file not shown.
Binary file not shown.
|
|
@ -1,69 +0,0 @@
|
|||
<svg width="212" height="84" viewBox="0 0 212 84" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M29.0472 45.9341L28.8138 46.7324L27.3831 51.6197L26.498 47.2394L29.0472 45.9341Z" fill="url(#paint0_linear_13381_50018)"/>
|
||||
<path d="M36.7918 41.5841C36.9009 41.7298 36.8524 41.9393 36.6917 42.0212L29.0503 45.9341L26.5011 47.2394L26.4344 46.9176L22.7364 23.3434C22.697 23.0824 23.0244 22.9428 23.179 23.1522L36.7887 41.5841H36.7918Z" fill="url(#paint1_linear_13381_50018)"/>
|
||||
<path d="M41.8506 55.0225L36.9978 58.134L32.1904 54.8799L27.3861 51.6258L27.3831 51.6197V51.6167L28.8137 46.7324L41.8506 55.0225Z" fill="url(#paint2_linear_13381_50018)"/>
|
||||
<path d="M54.8693 46.6687L41.8506 55.0195L36.9978 58.134L38.4709 59.1145L41.6809 61.2485C41.7779 61.3122 41.9022 61.3122 41.9992 61.2485L56.3 51.5529L54.8693 46.6687ZM42.1538 58.8807C41.8234 59.1054 41.3748 59.0143 41.1535 58.6774C40.9322 58.3404 41.0231 57.8851 41.3535 57.6635C41.6839 57.4389 42.1325 57.5299 42.3538 57.8669C42.5751 58.2038 42.4841 58.6591 42.1538 58.8807ZM44.0391 57.6058C43.7087 57.8304 43.2601 57.7394 43.0388 57.4024C42.8176 57.0655 42.9085 56.6101 43.2389 56.3885C43.5693 56.1639 44.0179 56.255 44.2392 56.5919C44.4604 56.9289 44.3695 57.3842 44.0391 57.6088V57.6058ZM45.9214 56.3278C45.591 56.5525 45.1424 56.4614 44.9212 56.1245C44.6999 55.7875 44.7908 55.3322 45.1212 55.1075C45.4516 54.8829 45.9002 54.974 46.1215 55.3109C46.3428 55.6479 46.2518 56.1032 45.9214 56.3248V56.3278ZM51.8018 52.3482L47.4946 55.2654C47.3582 55.3565 47.1763 55.32 47.0854 55.1834L46.6125 54.464C46.5216 54.3274 46.558 54.1422 46.6944 54.0481L51.0046 51.131C51.138 51.0399 51.3229 51.0763 51.4108 51.2129L51.8837 51.9324C51.9716 52.069 51.9382 52.2541 51.8018 52.3482Z" fill="url(#paint3_linear_13381_50018)"/>
|
||||
<path d="M51.8018 52.3482L47.4946 55.2654C47.3582 55.3565 47.1763 55.32 47.0854 55.1834L46.6125 54.464C46.5216 54.3274 46.558 54.1422 46.6944 54.0481L51.0046 51.131C51.138 51.0399 51.3229 51.0763 51.4108 51.2129L51.8837 51.9324C51.9716 52.069 51.9382 52.2541 51.8018 52.3482Z" fill="url(#paint4_linear_13381_50018)"/>
|
||||
<path d="M57.1852 47.1726L56.3001 51.5529L54.8694 46.6687L54.636 45.8673L57.1852 47.1726Z" fill="url(#paint5_linear_13381_50018)"/>
|
||||
<path d="M46.8944 41.5204C46.7853 41.6661 46.8338 41.8755 46.9944 41.9575L54.6359 45.8703L57.1851 47.1756L57.2518 46.8539L60.9224 23.4436C60.9709 23.1431 60.589 22.9761 60.4072 23.222L46.8944 41.5204Z" fill="url(#paint6_linear_13381_50018)"/>
|
||||
<path d="M42.1538 58.8807C41.8234 59.1054 41.3748 59.0143 41.1535 58.6774C40.9323 58.3404 41.0232 57.8851 41.3536 57.6635C41.684 57.4389 42.1326 57.5299 42.3539 57.8669C42.5751 58.2038 42.4842 58.6592 42.1538 58.8807Z" fill="url(#paint7_linear_13381_50018)"/>
|
||||
<path d="M44.0391 57.6058C43.7087 57.8304 43.2601 57.7394 43.0388 57.4024C42.8175 57.0655 42.9085 56.6101 43.2389 56.3885C43.5692 56.1639 44.0178 56.255 44.2391 56.5919C44.4604 56.9289 44.3695 57.3842 44.0391 57.6088V57.6058Z" fill="url(#paint8_linear_13381_50018)"/>
|
||||
<path d="M45.9214 56.3278C45.591 56.5525 45.1424 56.4614 44.9211 56.1245C44.6999 55.7875 44.7908 55.3322 45.1212 55.1075C45.4516 54.8829 45.9002 54.974 46.1214 55.3109C46.3427 55.6479 46.2518 56.1032 45.9214 56.3248V56.3278Z" fill="url(#paint9_linear_13381_50018)"/>
|
||||
<path d="M51.8018 52.3482L47.4946 55.2654C47.3582 55.3565 47.1763 55.32 47.0854 55.1834L46.6125 54.464C46.5216 54.3274 46.558 54.1422 46.6944 54.0481L51.0046 51.131C51.138 51.0399 51.3229 51.0763 51.4108 51.2129L51.8837 51.9324C51.9716 52.069 51.9382 52.2541 51.8018 52.3482Z" fill="url(#paint10_linear_13381_50018)"/>
|
||||
<path d="M74.205 39.8053C74.1201 39.5989 74.114 39.3925 74.1989 39.186C74.2777 38.9796 74.4202 38.8309 74.6263 38.7459C74.8324 38.6609 75.0385 38.6548 75.2446 38.7307C75.4507 38.8157 75.5993 38.9584 75.6841 39.1648L79.7883 48.572L83.8985 39.1648C83.9834 38.9584 84.1319 38.8157 84.338 38.7307C84.5441 38.6518 84.7502 38.6609 84.9564 38.7459C85.1625 38.8309 85.3049 38.9796 85.3837 39.186C85.4686 39.3925 85.4626 39.5989 85.3777 39.8053L80.537 50.9003C80.3945 51.2281 80.146 51.386 79.7913 51.386C79.4367 51.386 79.2033 51.222 79.0608 50.9003L74.2201 39.8053H74.214H74.205Z" fill="#112638"/>
|
||||
<path d="M89.1545 51.392C88.9272 51.392 88.7423 51.3131 88.5877 51.1492C88.4301 50.9913 88.3452 50.8062 88.3452 50.5785V39.4683C88.3452 39.2468 88.424 39.0616 88.5877 38.8977C88.7514 38.7337 88.9272 38.6548 89.1545 38.6548C89.3819 38.6548 89.5728 38.7337 89.7304 38.8977C89.8881 39.0616 89.9729 39.2468 89.9729 39.4683V50.5785C89.9729 50.8062 89.8941 50.9913 89.7304 51.1492C89.5728 51.307 89.3819 51.392 89.1545 51.392Z" fill="#112638"/>
|
||||
<path d="M93.6255 51.392C93.3981 51.392 93.2132 51.3131 93.0587 51.1492C92.901 50.9913 92.8162 50.8062 92.8162 50.5785V39.4683C92.8162 39.2468 92.895 39.0616 93.0587 38.8977C93.2223 38.7337 93.3981 38.6548 93.6255 38.6548H98.0055C98.9906 38.6548 99.8302 39.0039 100.533 39.7082C101.237 40.4124 101.576 41.2472 101.576 42.2368C101.576 43.1626 101.264 43.967 100.646 44.65C101.206 44.9627 101.655 45.3968 101.988 45.9462C102.328 46.5169 102.501 47.1271 102.501 47.7979C102.501 48.7875 102.152 49.6284 101.449 50.3265C100.755 51.0308 99.909 51.3799 98.9209 51.3799H93.6194L93.6255 51.386V51.392ZM94.4409 44.222H98.0115C98.5511 44.222 99.0118 44.0308 99.3967 43.6453C99.7787 43.2598 99.9727 42.7984 99.9727 42.258C99.9727 41.7177 99.7817 41.2624 99.3967 40.8768C99.0148 40.4913 98.5511 40.3001 98.0115 40.3001H94.4409V44.2251V44.222ZM94.4409 49.768H98.9269C99.4665 49.768 99.9272 49.5768 100.312 49.1912C100.694 48.8057 100.888 48.3443 100.888 47.8101C100.888 47.2758 100.697 46.8053 100.312 46.4228C99.9302 46.0373 99.4665 45.8461 98.9269 45.8461H94.4409V49.771V49.768Z" fill="#112638"/>
|
||||
<path d="M113.77 38.673C113.998 38.673 114.189 38.752 114.346 38.9159C114.504 39.0798 114.589 39.265 114.589 39.4866C114.589 39.7082 114.51 39.9055 114.346 40.0633C114.183 40.2212 113.998 40.3062 113.77 40.3062H106.162C105.935 40.3062 105.75 40.2272 105.595 40.0633C105.438 39.9055 105.353 39.7142 105.353 39.4866C105.353 39.2589 105.432 39.0798 105.595 38.9159C105.759 38.752 105.935 38.673 106.162 38.673H113.77ZM113.77 44.222C113.998 44.222 114.189 44.301 114.346 44.4649C114.504 44.6288 114.589 44.814 114.589 45.0416C114.589 45.2693 114.51 45.4484 114.346 45.6123C114.183 45.7762 113.998 45.8552 113.77 45.8552H106.162C105.935 45.8552 105.75 45.7762 105.595 45.6123C105.438 45.4545 105.353 45.2632 105.353 45.0416C105.353 44.82 105.432 44.6227 105.595 44.4649C105.753 44.307 105.935 44.222 106.162 44.222H113.77ZM114.586 50.5876C114.586 50.8153 114.507 51.0004 114.343 51.1583C114.186 51.3161 113.995 51.4011 113.767 51.4011H106.159C105.932 51.4011 105.747 51.3222 105.592 51.1583C105.435 51.0004 105.35 50.8153 105.35 50.5876C105.35 50.3599 105.429 50.1687 105.592 50.0108C105.75 49.853 105.932 49.768 106.159 49.768H113.767C113.995 49.768 114.186 49.8469 114.343 50.0108C114.501 50.1748 114.586 50.3599 114.586 50.5876Z" fill="#112638"/>
|
||||
<path d="M118.235 51.392C118.008 51.392 117.823 51.3131 117.668 51.1492C117.511 50.9913 117.426 50.8062 117.426 50.5785V39.4683C117.426 39.0828 117.611 38.8278 117.971 38.7064C118.332 38.585 118.638 38.67 118.872 38.9827L125.949 48.2047V39.4744C125.949 39.2528 126.028 39.0677 126.192 38.9037C126.355 38.7398 126.54 38.6609 126.768 38.6609C126.995 38.6609 127.171 38.7398 127.335 38.9037C127.498 39.0677 127.577 39.2528 127.577 39.4744V50.5846C127.577 50.9701 127.392 51.2251 127.031 51.3465C126.947 51.3738 126.862 51.389 126.777 51.389C126.513 51.389 126.295 51.2827 126.131 51.0672L119.053 41.8452V50.5755C119.053 50.8031 118.975 50.9883 118.811 51.1461C118.653 51.304 118.462 51.389 118.235 51.389V51.392Z" fill="#112638"/>
|
||||
<path d="M131.229 40.291C131.002 40.291 130.817 40.2121 130.663 40.0481C130.505 39.8903 130.42 39.699 130.42 39.4714C130.42 39.2437 130.499 39.0646 130.663 38.9007C130.82 38.7428 131.002 38.6579 131.229 38.6579H139.762C139.983 38.6579 140.165 38.7368 140.329 38.9007C140.493 39.0646 140.571 39.2498 140.571 39.4714C140.571 39.693 140.493 39.8903 140.329 40.0481C140.165 40.206 139.98 40.291 139.762 40.291H136.298V50.5815C136.298 50.8092 136.219 50.9944 136.07 51.1522C135.922 51.3101 135.722 51.3951 135.494 51.3951C135.267 51.3951 135.076 51.3161 134.918 51.1522C134.761 50.9883 134.691 50.8092 134.691 50.5815V40.291H131.226H131.229Z" fill="#112638"/>
|
||||
<path d="M151.835 38.673C152.063 38.673 152.253 38.752 152.411 38.9159C152.569 39.0798 152.654 39.265 152.654 39.4866C152.654 39.7082 152.575 39.9055 152.411 40.0633C152.247 40.2212 152.063 40.3062 151.835 40.3062H144.227C144 40.3062 143.815 40.2272 143.66 40.0633C143.503 39.9055 143.418 39.7142 143.418 39.4866C143.418 39.2589 143.497 39.0798 143.66 38.9159C143.818 38.758 144 38.673 144.227 38.673H151.835ZM151.835 44.222C152.063 44.222 152.253 44.301 152.411 44.4649C152.569 44.6288 152.654 44.814 152.654 45.0416C152.654 45.2693 152.575 45.4484 152.411 45.6123C152.247 45.7762 152.063 45.8552 151.835 45.8552H144.227C144 45.8552 143.815 45.7762 143.66 45.6123C143.503 45.4545 143.418 45.2632 143.418 45.0416C143.418 44.82 143.497 44.6227 143.66 44.4649C143.818 44.307 144 44.222 144.227 44.222H151.835ZM152.654 50.5876C152.654 50.8153 152.575 51.0004 152.411 51.1583C152.253 51.3161 152.063 51.4011 151.835 51.4011H144.227C144 51.4011 143.815 51.3222 143.66 51.1583C143.503 51.0004 143.418 50.8153 143.418 50.5876C143.418 50.3599 143.497 50.1687 143.66 50.0108C143.818 49.853 144 49.768 144.227 49.768H151.835C152.063 49.768 152.253 49.8469 152.411 50.0108C152.569 50.1748 152.654 50.3599 152.654 50.5876Z" fill="#112638"/>
|
||||
<path d="M161.838 51.392C160.092 51.392 158.595 50.7728 157.358 49.5343C156.124 48.2958 155.506 46.7932 155.506 45.0416C155.506 43.2901 156.124 41.7814 157.358 40.5399C158.592 39.3014 160.092 38.6821 161.838 38.6821C163.584 38.6821 165.09 39.3014 166.324 40.5399C166.482 40.6977 166.566 40.889 166.566 41.1167C166.566 41.3443 166.488 41.5295 166.324 41.6873C166.166 41.8452 165.975 41.9302 165.748 41.9302C165.521 41.9302 165.336 41.8513 165.181 41.6873C164.26 40.7676 163.144 40.3062 161.832 40.3062C160.519 40.3062 159.419 40.7676 158.488 41.6873C157.573 42.6132 157.112 43.7394 157.112 45.0477C157.112 46.356 157.573 47.4701 158.488 48.402C159.41 49.3218 160.525 49.7832 161.832 49.7832C163.138 49.7832 164.254 49.3218 165.181 48.402C165.339 48.2441 165.521 48.1592 165.748 48.1592C165.975 48.1592 166.166 48.2381 166.324 48.402C166.482 48.5598 166.566 48.745 166.566 48.9727C166.566 49.2003 166.488 49.3916 166.324 49.5494C165.09 50.7879 163.59 51.4072 161.838 51.4072V51.392Z" fill="#112638"/>
|
||||
<path d="M175.508 51.392C175.281 51.392 175.096 51.3131 174.941 51.1492C174.784 50.9913 174.699 50.8062 174.699 50.5785V39.4683C174.699 39.2468 174.778 39.0616 174.941 38.8977C175.099 38.7398 175.281 38.6548 175.508 38.6548C175.736 38.6548 175.927 38.7337 176.084 38.8977C176.242 39.0616 176.327 39.2468 176.327 39.4683V50.5785C176.327 50.8062 176.248 50.9913 176.084 51.1492C175.927 51.307 175.736 51.392 175.508 51.392Z" fill="#112638"/>
|
||||
<path d="M179.979 40.291C179.752 40.291 179.567 40.2121 179.412 40.0481C179.255 39.8903 179.17 39.699 179.17 39.4714C179.17 39.2437 179.249 39.0646 179.412 38.9007C179.57 38.7428 179.752 38.6579 179.979 38.6579H188.512C188.733 38.6579 188.915 38.7368 189.079 38.9007C189.242 39.0646 189.321 39.2498 189.321 39.4714C189.321 39.693 189.242 39.8903 189.079 40.0481C188.915 40.206 188.73 40.291 188.512 40.291H185.047V50.5815C185.047 50.8092 184.968 50.9944 184.82 51.1522C184.671 51.3101 184.471 51.3951 184.244 51.3951C184.017 51.3951 183.826 51.3161 183.668 51.1522C183.511 50.9883 183.441 50.8092 183.441 50.5815V40.291H179.976H179.979Z" fill="#112638"/>
|
||||
<defs>
|
||||
<linearGradient id="paint0_linear_13381_50018" x1="26.498" y1="48.7754" x2="29.0472" y2="48.7754" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#2477B7"/>
|
||||
<stop offset="1" stop-color="#0BA1CE"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint1_linear_13381_50018" x1="22.7334" y1="35.1457" x2="36.8493" y2="35.1457" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#2477B7"/>
|
||||
<stop offset="1" stop-color="#233166"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint2_linear_13381_50018" x1="27.3831" y1="52.4332" x2="41.8506" y2="52.4332" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#0BA1CE"/>
|
||||
<stop offset="1" stop-color="#2477B7"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint3_linear_13381_50018" x1="36.9978" y1="53.9844" x2="56.3" y2="53.9844" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#233166"/>
|
||||
<stop offset="1" stop-color="#2477B7"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint4_linear_13381_50018" x1="51.6169" y1="51.5043" x2="46.8716" y2="54.8824" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#2477B7"/>
|
||||
<stop offset="1" stop-color="#233166"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint5_linear_13381_50018" x1="54.636" y1="48.7116" x2="57.1852" y2="48.7116" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#0BA1CE"/>
|
||||
<stop offset="1" stop-color="#2477B7"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint6_linear_13381_50018" x1="60.9255" y1="35.1366" x2="46.8368" y2="35.1366" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#2477B7"/>
|
||||
<stop offset="1" stop-color="#233166"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint7_linear_13381_50018" x1="42.4751" y1="58.2706" x2="41.0353" y2="58.2706" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#C25119"/>
|
||||
<stop offset="1" stop-color="#F26522"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint8_linear_13381_50018" x1="44.3604" y1="56.9957" x2="42.9176" y2="56.9957" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#C25119"/>
|
||||
<stop offset="1" stop-color="#F26522"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint9_linear_13381_50018" x1="46.2427" y1="55.7207" x2="44.8029" y2="55.7207" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#C25119"/>
|
||||
<stop offset="1" stop-color="#F26522"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint10_linear_13381_50018" x1="51.9322" y1="53.1982" x2="46.561" y2="53.1982" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#C25119"/>
|
||||
<stop offset="1" stop-color="#F26522"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 14 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 9.7 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 168 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 20 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 403 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 41 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 195 KiB |
|
|
@ -5,22 +5,14 @@ import { retrieveCustomer } from "@lib/data/customer"
|
|||
import { getBaseURL } from "@lib/util/env"
|
||||
import { StoreCartShippingOption } from "@medusajs/types"
|
||||
import { DynamicLayoutRenderer } from "../../../vibentec/renderer"
|
||||
import { LayoutContext, LayoutComponentNode } from "../../../vibentec/component-map"
|
||||
import { loadLayoutConfig } from "vibentec/configloader"
|
||||
|
||||
import { getRegion } from "@lib/data/regions"
|
||||
import { LayoutContext, LayoutComponentNode, } from "../../../vibentec/component-map"
|
||||
import { loadDesignConfig } from "vibentec/configloader"
|
||||
|
||||
export const metadata: Metadata = {
|
||||
metadataBase: new URL(getBaseURL()),
|
||||
}
|
||||
|
||||
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)
|
||||
export default async function PageLayout(props: { children: React.ReactNode }) {
|
||||
const customer = await retrieveCustomer()
|
||||
const cart = await retrieveCart()
|
||||
let shippingOptions: StoreCartShippingOption[] = []
|
||||
|
|
@ -31,14 +23,12 @@ export default async function PageLayout(props: {
|
|||
shippingOptions = shipping_options
|
||||
}
|
||||
|
||||
const nodes: LayoutComponentNode[] = await loadLayoutConfig()
|
||||
const nodes: LayoutComponentNode[] = await loadDesignConfig()
|
||||
const context: LayoutContext = {
|
||||
customer,
|
||||
cart,
|
||||
shippingOptions,
|
||||
contentChildren: props.children,
|
||||
countryCode,
|
||||
region,
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -4,10 +4,6 @@ import FeaturedProducts from "@modules/home/components/featured-products"
|
|||
import Hero from "@modules/home/components/hero"
|
||||
import { listCollections } from "@lib/data/collections"
|
||||
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 = {
|
||||
title: "Medusa Next.js Starter Template",
|
||||
|
|
@ -28,25 +24,18 @@ export default async function Home(props: {
|
|||
fields: "id, handle, title",
|
||||
})
|
||||
|
||||
console.log('collections:',collections)
|
||||
|
||||
if (!collections || !region) {
|
||||
return null
|
||||
}
|
||||
const nodes: LayoutComponentNode[] = await loadPageConfig("Home")
|
||||
|
||||
if (!region) {
|
||||
return null
|
||||
}
|
||||
|
||||
const context: LayoutContext = {
|
||||
customer: null,
|
||||
cart: null,
|
||||
shippingOptions: [],
|
||||
contentChildren: null,
|
||||
countryCode,
|
||||
region,
|
||||
}
|
||||
|
||||
return <DynamicLayoutRenderer nodes={nodes} context={context} />
|
||||
return (
|
||||
<>
|
||||
<Hero />
|
||||
<div className="py-12">
|
||||
<ul className="flex flex-col gap-x-6">
|
||||
<FeaturedProducts collections={collections} region={region} />
|
||||
</ul>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,9 +3,6 @@ import { notFound } from "next/navigation"
|
|||
import { listProducts } from "@lib/data/products"
|
||||
import { getRegion, listRegions } from "@lib/data/regions"
|
||||
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 = {
|
||||
params: Promise<{ countryCode: string; handle: string }>
|
||||
|
|
@ -99,25 +96,11 @@ export default async function ProductPage(props: Props) {
|
|||
notFound()
|
||||
}
|
||||
|
||||
const nodes: LayoutComponentNode[] = await loadPageConfig("Product")
|
||||
|
||||
const context: LayoutContext = {
|
||||
customer: null,
|
||||
cart: null,
|
||||
shippingOptions: [],
|
||||
contentChildren: null,
|
||||
countryCode: params.countryCode,
|
||||
region,
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<ProductTemplate
|
||||
product={pricedProduct}
|
||||
region={region}
|
||||
countryCode={params.countryCode}
|
||||
/>
|
||||
<DynamicLayoutRenderer nodes={nodes} context={context} />
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,10 +2,6 @@ import { Metadata } from "next"
|
|||
|
||||
import { SortOptions } from "@modules/store/components/refinement-list/sort-products"
|
||||
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 = {
|
||||
title: "Store",
|
||||
|
|
@ -23,28 +19,15 @@ type Params = {
|
|||
}
|
||||
|
||||
export default async function StorePage(props: Params) {
|
||||
const params = await props.params
|
||||
const searchParams = await props.searchParams
|
||||
const region = await getRegion(params.countryCode)
|
||||
const params = await props.params;
|
||||
const searchParams = await props.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 (
|
||||
<>
|
||||
<StoreTemplate
|
||||
sortBy={sortBy}
|
||||
page={page}
|
||||
countryCode={params.countryCode}
|
||||
/>
|
||||
<DynamicLayoutRenderer nodes={nodes} context={context} />
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -36,6 +36,7 @@ export const listCollections = async (
|
|||
{
|
||||
query: queryParams,
|
||||
next,
|
||||
cache: "force-cache",
|
||||
}
|
||||
)
|
||||
.then(({ collections }) => ({ collections, count: collections.length }))
|
||||
|
|
|
|||
|
|
@ -63,11 +63,12 @@ export const listProducts = async ({
|
|||
offset,
|
||||
region_id: region?.id,
|
||||
fields:
|
||||
"*variants.calculated_price,+variants.inventory_quantity,*metadata,+tags",
|
||||
"*variants.calculated_price,+variants.inventory_quantity,+metadata,+tags",
|
||||
...queryParams,
|
||||
},
|
||||
headers,
|
||||
next,
|
||||
cache: "force-cache",
|
||||
}
|
||||
)
|
||||
.then(({ products, count }) => {
|
||||
|
|
|
|||
|
|
@ -1,19 +0,0 @@
|
|||
export { default as Back } from "./back"
|
||||
export { default as Bancontact } from "./bancontact"
|
||||
export { default as ChevronDown } from "./chevron-down"
|
||||
export { default as Eye } from "./eye"
|
||||
export { default as EyeOff } from "./eye-off"
|
||||
export { default as FastDelivery } from "./fast-delivery"
|
||||
export { default as Ideal } from "./ideal"
|
||||
export { default as MapPin } from "./map-pin"
|
||||
export { default as Medusa } from "./medusa"
|
||||
export { default as Nextjs } from "./nextjs"
|
||||
export { default as Package } from "./package"
|
||||
export { default as PayPal } from "./paypal"
|
||||
export { default as PlaceholderImage } from "./placeholder-image"
|
||||
export { default as Refresh } from "./refresh"
|
||||
export { default as Spinner } from "./spinner"
|
||||
export { default as Trash } from "./trash"
|
||||
export { default as User } from "./user"
|
||||
export { default as X } from "./x"
|
||||
export { default as Twitter } from "./twitter"
|
||||
|
|
@ -1,27 +0,0 @@
|
|||
import React from "react"
|
||||
|
||||
import { IconProps } from "types/icon"
|
||||
|
||||
const Twitter: React.FC<IconProps> = ({
|
||||
size = "20",
|
||||
color = "currentColor",
|
||||
...attributes
|
||||
}) => {
|
||||
return (
|
||||
<svg
|
||||
width={size}
|
||||
height={size}
|
||||
viewBox="0 0 15 12"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
{...attributes}
|
||||
>
|
||||
<path
|
||||
d="M12.8069 2.87388C12.8069 3.01339 12.8069 3.125 12.8069 3.26451C12.8069 7.14286 9.8772 11.5792 4.49215 11.5792C2.81805 11.5792 1.28345 11.1049 -3.52859e-05 10.2679C0.223179 10.2958 0.446393 10.3237 0.697509 10.3237C2.0647 10.3237 3.32028 9.84933 4.32474 9.06808C3.04126 9.04018 1.95309 8.20312 1.59037 7.03125C1.78568 7.05915 1.95309 7.08705 2.1484 7.08705C2.39952 7.08705 2.67854 7.03125 2.90175 6.97545C1.56246 6.69643 0.558 5.52455 0.558 4.10156V4.07366C0.948625 4.29687 1.42296 4.40848 1.89729 4.43638C1.08813 3.90625 0.585902 3.01339 0.585902 2.00893C0.585902 1.45089 0.725411 0.94866 0.976527 0.530133C2.42742 2.28795 4.60376 3.45982 7.03122 3.59933C6.97541 3.37612 6.94751 3.1529 6.94751 2.92969C6.94751 1.31138 8.25889 -6.37025e-07 9.8772 -6.37025e-07C10.7143 -6.37025e-07 11.4676 0.334821 12.0256 0.920758C12.6674 0.781249 13.3091 0.530133 13.8672 0.195312C13.6439 0.892857 13.1975 1.45089 12.5837 1.81362C13.1696 1.75781 13.7555 1.5904 14.2578 1.36719C13.8672 1.95312 13.3649 2.45536 12.8069 2.87388Z"
|
||||
fill={color}
|
||||
/>
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
export default Twitter
|
||||
|
|
@ -1,72 +0,0 @@
|
|||
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>
|
||||
)
|
||||
}
|
||||
|
|
@ -1,86 +0,0 @@
|
|||
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>
|
||||
)
|
||||
}
|
||||
|
|
@ -1,52 +0,0 @@
|
|||
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>
|
||||
))
|
||||
}
|
||||
|
|
@ -1,68 +0,0 @@
|
|||
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>
|
||||
)
|
||||
}
|
||||
|
|
@ -1,74 +0,0 @@
|
|||
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>
|
||||
)
|
||||
}
|
||||
|
||||
|
|
@ -1,91 +0,0 @@
|
|||
"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>
|
||||
)
|
||||
}
|
||||
|
|
@ -1,205 +0,0 @@
|
|||
"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>
|
||||
)
|
||||
}
|
||||
|
|
@ -1,8 +1,8 @@
|
|||
import { retrieveCart } from "@lib/data/cart"
|
||||
import CartDropdown from "../cart-dropdown"
|
||||
|
||||
export default async function CartButton({ iconName }: { iconName?: string }) {
|
||||
export default async function CartButton() {
|
||||
const cart = await retrieveCart().catch(() => null)
|
||||
|
||||
return <CartDropdown cart={cart} iconName={iconName} />
|
||||
return <CartDropdown cart={cart} />
|
||||
}
|
||||
|
|
|
|||
|
|
@ -9,7 +9,6 @@ import {
|
|||
import { convertToLocale } from "@lib/util/money"
|
||||
import { HttpTypes } from "@medusajs/types"
|
||||
import { Button } from "@medusajs/ui"
|
||||
import * as MedusaIcons from "@medusajs/icons"
|
||||
import DeleteButton from "@modules/common/components/delete-button"
|
||||
import LineItemOptions from "@modules/common/components/line-item-options"
|
||||
import LineItemPrice from "@modules/common/components/line-item-price"
|
||||
|
|
@ -20,10 +19,8 @@ import { Fragment, useEffect, useRef, useState } from "react"
|
|||
|
||||
const CartDropdown = ({
|
||||
cart: cartState,
|
||||
iconName,
|
||||
}: {
|
||||
cart?: HttpTypes.StoreCart | null
|
||||
iconName?: string
|
||||
}) => {
|
||||
const [activeTimer, setActiveTimer] = useState<NodeJS.Timer | undefined>(
|
||||
undefined
|
||||
|
|
@ -76,10 +73,6 @@ const CartDropdown = ({
|
|||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [totalItems, itemRef.current])
|
||||
|
||||
const Icon = iconName
|
||||
? (MedusaIcons as Record<string, React.ComponentType<any>>)[iconName]
|
||||
: undefined
|
||||
|
||||
return (
|
||||
<div
|
||||
className="h-full z-50"
|
||||
|
|
@ -88,15 +81,11 @@ const CartDropdown = ({
|
|||
>
|
||||
<Popover className="relative h-full">
|
||||
<PopoverButton className="h-full">
|
||||
{Icon ? (
|
||||
<Icon />
|
||||
) : (
|
||||
<LocalizedClientLink
|
||||
className="hover:text-ui-fg-base"
|
||||
href="/cart"
|
||||
data-testid="nav-cart-link"
|
||||
>{`Cart (${totalItems})`}</LocalizedClientLink>
|
||||
)}
|
||||
</PopoverButton>
|
||||
<Transition
|
||||
show={cartDropdownOpen}
|
||||
|
|
|
|||
|
|
@ -1,36 +1,24 @@
|
|||
import LocalizedClientLink from "@modules/common/components/localized-client-link"
|
||||
import {
|
||||
LayoutComponentDefinition,
|
||||
LayoutContext,
|
||||
} from "vibentec/component-map"
|
||||
import { LayoutComponentDefinition, LayoutContext } from "vibentec/component-map";
|
||||
import { clx } from "@medusajs/ui"
|
||||
import * as MedusaIcons from "@medusajs/icons"
|
||||
export const AccountButton = ({
|
||||
nodes,
|
||||
context,
|
||||
}: {
|
||||
nodes: LayoutComponentDefinition
|
||||
context: LayoutContext
|
||||
}) => {
|
||||
|
||||
export const AccountButton = ({ nodes, context }: { nodes: LayoutComponentDefinition; context: LayoutContext }) => {
|
||||
const props = nodes.config ?? {}
|
||||
const className = clx("hover:text-ui-fg-base", props.className)
|
||||
const style: React.CSSProperties = {}
|
||||
if (props.bgColor) style.backgroundColor = props.bgColor
|
||||
if (props.textColor) style.color = props.textColor
|
||||
const className = clx("hover:text-ui-fg-base", props.className);
|
||||
const style: React.CSSProperties = {};
|
||||
if (props.bgColor) style.backgroundColor = props.bgColor;
|
||||
if (props.textColor) style.color = props.textColor;
|
||||
const href = props.href ?? "/account"
|
||||
const label = props.label ?? "Account"
|
||||
const iconName = props.icon
|
||||
const Icon = iconName
|
||||
? (MedusaIcons as Record<string, React.ComponentType<any>>)[iconName]
|
||||
: undefined
|
||||
|
||||
return (
|
||||
<div className="flex items-center h-full">
|
||||
<div className="flex items-center h-full" style={style}>
|
||||
<LocalizedClientLink
|
||||
href={href}
|
||||
className={className}
|
||||
data-testid="nav-account-link"
|
||||
>
|
||||
{Icon ? <Icon /> : label}
|
||||
{label}
|
||||
</LocalizedClientLink>
|
||||
</div>
|
||||
)
|
||||
|
|
|
|||
|
|
@ -1,21 +1,13 @@
|
|||
import LocalizedClientLink from "@modules/common/components/localized-client-link"
|
||||
import {
|
||||
LayoutComponentDefinition,
|
||||
LayoutContext,
|
||||
} from "vibentec/component-map"
|
||||
import { LayoutComponentDefinition, LayoutContext } from "vibentec/component-map";
|
||||
import { clx } from "@medusajs/ui"
|
||||
import { Suspense } from "react"
|
||||
import CartButton from "@modules/layout/components/cart-button"
|
||||
import { Suspense } from "react";
|
||||
import CartButton from "@modules/layout/components/cart-button";
|
||||
|
||||
export const VtCartButton = ({
|
||||
nodes,
|
||||
context,
|
||||
}: {
|
||||
nodes: LayoutComponentDefinition
|
||||
context: LayoutContext
|
||||
}) => {
|
||||
export const VtCartButton = ({ nodes, context }: { nodes: LayoutComponentDefinition; context: LayoutContext }) => {
|
||||
const props = nodes.config ?? {}
|
||||
const className = clx("hover:text-ui-fg-base flex gap-2", props.className)
|
||||
|
||||
return (
|
||||
<Suspense
|
||||
fallback={
|
||||
|
|
@ -28,7 +20,7 @@ export const VtCartButton = ({
|
|||
</LocalizedClientLink>
|
||||
}
|
||||
>
|
||||
<CartButton iconName={props.icon} />
|
||||
<CartButton />
|
||||
</Suspense>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,13 +2,8 @@ import LocalizedClientLink from "@modules/common/components/localized-client-lin
|
|||
import { LayoutComponentDefinition, LayoutContext } from "vibentec/component-map";
|
||||
import { clx } from "@medusajs/ui"
|
||||
|
||||
interface VtLinkProps {
|
||||
className?: string
|
||||
href?: string
|
||||
label?: string
|
||||
}
|
||||
export const VtLink = ({ nodes, context }: { nodes: LayoutComponentDefinition; context: LayoutContext }) => {
|
||||
const props = nodes.config as VtLinkProps ?? {}
|
||||
const props = nodes.config ?? {}
|
||||
const className = clx("txt-compact-xlarge-plus hover:text-ui-fg-base", props.className)
|
||||
const href = props.href ?? "/"
|
||||
const label = props.label ?? "Medusa Store"
|
||||
|
|
|
|||
|
|
@ -1,34 +1,19 @@
|
|||
import {
|
||||
LayoutComponentDefinition,
|
||||
LayoutContext,
|
||||
} from "vibentec/component-map"
|
||||
import React, { Suspense } from "react"
|
||||
import SkeletonMegaMenu from "@modules/skeletons/components/vt-skeleton-mega-menu"
|
||||
import MegaMenuWrapper from "@modules/layout/components/vt-mega-menu/mega-menu-wrapper"
|
||||
import { LayoutComponentDefinition, LayoutContext } from "vibentec/component-map";
|
||||
import React, { Suspense } from "react";
|
||||
import SkeletonMegaMenu from "@modules/skeletons/components/vt-skeleton-mega-menu";
|
||||
import MegaMenuWrapper from "@modules/layout/components/vt-mega-menu/mega-menu-wrapper";
|
||||
|
||||
interface MegaMenuProps {
|
||||
navLabel: {
|
||||
text: string
|
||||
className?: string
|
||||
}
|
||||
}
|
||||
export default function VtMegaMenu({
|
||||
nodes,
|
||||
context,
|
||||
}: {
|
||||
nodes: LayoutComponentDefinition
|
||||
context: LayoutContext
|
||||
}) {
|
||||
const { navLabel } = nodes.config as MegaMenuProps ?? {}
|
||||
export default function VtMegaMenu({ nodes, context }: { nodes: LayoutComponentDefinition; context: LayoutContext }) {
|
||||
return (
|
||||
<nav>
|
||||
<ul className="space-x-4 hidden small:flex">
|
||||
<li>
|
||||
<Suspense fallback={<SkeletonMegaMenu />}>
|
||||
<MegaMenuWrapper navLabel={navLabel} />
|
||||
<MegaMenuWrapper />
|
||||
</Suspense>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
)
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,12 +1,10 @@
|
|||
import { listCategories } from "@lib/data/categories"
|
||||
import MegaMenu from "./mega-menu"
|
||||
|
||||
|
||||
|
||||
export async function MegaMenuWrapper({ navLabel }: { navLabel: { text: string; className?: string } }) {
|
||||
export async function MegaMenuWrapper() {
|
||||
const categories = await listCategories().catch(() => [])
|
||||
|
||||
return <MegaMenu navLabel={navLabel} categories={categories} />
|
||||
return <MegaMenu categories={categories} />
|
||||
}
|
||||
|
||||
export default MegaMenuWrapper
|
||||
|
|
|
|||
|
|
@ -3,16 +3,12 @@
|
|||
import { HttpTypes } from "@medusajs/types"
|
||||
import { clx } from "@medusajs/ui"
|
||||
import LocalizedClientLink from "@modules/common/components/localized-client-link"
|
||||
import ChevronDown from "@modules/common/icons/chevron-down"
|
||||
import { usePathname } from "next/navigation"
|
||||
import { useEffect, useState } from "react"
|
||||
|
||||
|
||||
const MegaMenu = ({
|
||||
navLabel,
|
||||
categories,
|
||||
}: {
|
||||
navLabel: { text: string; className?: string, isShowArrow?: boolean },
|
||||
categories: HttpTypes.StoreProductCategory[]
|
||||
}) => {
|
||||
const [isHovered, setIsHovered] = useState(false)
|
||||
|
|
@ -85,13 +81,10 @@ const MegaMenu = ({
|
|||
className="z-50"
|
||||
>
|
||||
<LocalizedClientLink
|
||||
className={clx(
|
||||
"hover:text-ui-fg-base hover:bg-neutral-100 rounded-full px-3 py-2",
|
||||
navLabel?.className
|
||||
)}
|
||||
className="hover:text-ui-fg-base hover:bg-neutral-100 rounded-full px-3 py-2"
|
||||
href="/store"
|
||||
>
|
||||
{navLabel?.text ?? "Product"} {navLabel?.isShowArrow && <ChevronDown />}
|
||||
Products
|
||||
</LocalizedClientLink>
|
||||
{isHovered && (
|
||||
<div className="absolute top-full left-0 right-0 flex gap-32 py-10 px-20 bg-white border-b border-neutral-200 ">
|
||||
|
|
@ -101,7 +94,7 @@ const MegaMenu = ({
|
|||
key={category.id}
|
||||
href={`/categories/${category.handle}`}
|
||||
className={clx(
|
||||
"hover:bg-neutral-100 text-black hover:cursor-pointer rounded-full px-3 py-2 w-fit font-medium",
|
||||
"hover:bg-neutral-100 hover:cursor-pointer rounded-full px-3 py-2 w-fit font-medium",
|
||||
selectedCategory === category.id && "bg-neutral-100"
|
||||
)}
|
||||
onMouseEnter={() => handleCategoryHover(category.id)}
|
||||
|
|
|
|||
|
|
@ -1,45 +0,0 @@
|
|||
import { Github } from "@medusajs/icons"
|
||||
import { Button, Heading } from "@medusajs/ui"
|
||||
import { VtCarousel } from "../vt-carousel"
|
||||
import { LayoutComponentDefinition, LayoutContext } from "vibentec/component-map"
|
||||
|
||||
export default function HeroDefault({ node, context }: { node: LayoutComponentDefinition; context: LayoutContext }) {
|
||||
const props = node.config ?? {}
|
||||
const imageDisplayer = props.ImageDisplayer
|
||||
|
||||
if (imageDisplayer) {
|
||||
return (
|
||||
<div className="absolute inset-0 z-auto w-full h-full">
|
||||
<VtCarousel nodes={{ config: imageDisplayer.config }} context={context} />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="absolute inset-0 z-auto flex flex-col justify-center items-center text-center small:p-32 gap-6">
|
||||
<span>
|
||||
<Heading
|
||||
level="h1"
|
||||
className="text-3xl leading-10 text-ui-fg-base font-normal"
|
||||
>
|
||||
Ecommerce Starter Template
|
||||
</Heading>
|
||||
<Heading
|
||||
level="h2"
|
||||
className="text-3xl leading-10 text-ui-fg-subtle font-normal"
|
||||
>
|
||||
Powered by Medusa and Next.js
|
||||
</Heading>
|
||||
</span>
|
||||
<a
|
||||
href="https://github.com/medusajs/nextjs-starter-medusa"
|
||||
target="_blank"
|
||||
>
|
||||
<Button variant="secondary">
|
||||
View on GitHub
|
||||
<Github />
|
||||
</Button>
|
||||
</a>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
@ -1,45 +0,0 @@
|
|||
import {
|
||||
LayoutComponentDefinition,
|
||||
LayoutContext,
|
||||
} from "vibentec/component-map"
|
||||
import { clx } from "@medusajs/ui"
|
||||
import BannerHero from "./banner-hero"
|
||||
import { DynamicLayoutRenderer } from "vibentec/renderer"
|
||||
|
||||
export default async function Hero({
|
||||
nodes,
|
||||
context,
|
||||
}: {
|
||||
nodes: LayoutComponentDefinition
|
||||
context: LayoutContext
|
||||
}) {
|
||||
const props = nodes.config ?? {}
|
||||
const left = nodes.config?.left ?? []
|
||||
const center = nodes.config?.center ?? []
|
||||
const right = nodes.config?.right ?? []
|
||||
const heroClassName = clx(
|
||||
"min-h-[30rem] w-full border-b border-ui-border-base relative",
|
||||
props.className
|
||||
)
|
||||
|
||||
return (
|
||||
<div className={heroClassName}>
|
||||
<BannerHero node={nodes} context={context} />
|
||||
<div className="absolute z-20">
|
||||
<nav className="content-container txt-xsmall-plus flex items-center justify-between text-small-regular">
|
||||
<div className="flex items-center gap-x-4">
|
||||
{left && <DynamicLayoutRenderer nodes={left} context={context} />}
|
||||
</div>
|
||||
<div className="flex items-center gap-x-4">
|
||||
{center && (
|
||||
<DynamicLayoutRenderer nodes={center} context={context} />
|
||||
)}
|
||||
</div>
|
||||
<div className="flex items-center gap-x-4 justify-end">
|
||||
{right && <DynamicLayoutRenderer nodes={right} context={context} />}
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
@ -12,15 +12,8 @@ interface BannerCTAProps {
|
|||
context: LayoutContext
|
||||
}
|
||||
|
||||
interface BannerConfigProps {
|
||||
text?: string
|
||||
href?: string
|
||||
iconLeft?: string
|
||||
iconRight?: string
|
||||
className?: string
|
||||
}
|
||||
export default function BannerCTA({ node, context }: BannerCTAProps) {
|
||||
const props = node.config as BannerConfigProps ?? {}
|
||||
const props = node.config ?? {}
|
||||
const text = props.text ?? ""
|
||||
const href = props.href ?? undefined
|
||||
const iconLeft = props.iconLeft
|
||||
|
|
|
|||
|
|
@ -1,23 +1,18 @@
|
|||
import { DynamicLayoutRenderer } from "vibentec/renderer"
|
||||
import { LayoutComponentDefinition, LayoutContext } from "vibentec/component-map";
|
||||
|
||||
interface BannerNavProps {
|
||||
left?: LayoutComponentDefinition[]
|
||||
center?: LayoutComponentDefinition[]
|
||||
right?: LayoutComponentDefinition[]
|
||||
}
|
||||
export default function BannerNav({ node, context }: { node: LayoutComponentDefinition; context: LayoutContext }) {
|
||||
const props = node.config as BannerNavProps ?? {};
|
||||
export default function BannerNav({ node: node, context }: { node: LayoutComponentDefinition; context: LayoutContext }) {
|
||||
const props = node.config ?? {};
|
||||
|
||||
return (
|
||||
<nav className="content-container txt-xsmall-plus flex items-center justify-between w-full h-full text-small-regular">
|
||||
<div className="flex items-center gap-x-4 w-full h-full">
|
||||
<nav className="content-container txt-xsmall-plus text-ui-fg-subtle flex items-center justify-between w-full h-full text-small-regular">
|
||||
<div className="flex items-center gap-x-4">
|
||||
{props.left && <DynamicLayoutRenderer nodes={props.left} context={context} />}
|
||||
</div>
|
||||
<div className="flex items-center gap-x-4 w-full h-full">
|
||||
<div className="flex items-center gap-x-4">
|
||||
{props.center && <DynamicLayoutRenderer nodes={props.center} context={context} />}
|
||||
</div>
|
||||
<div className="flex items-center gap-x-4 w-full h-full justify-end">
|
||||
<div className="flex items-center gap-x-4">
|
||||
{props.right && <DynamicLayoutRenderer nodes={props.right} context={context} />}
|
||||
</div>
|
||||
</nav>
|
||||
|
|
|
|||
|
|
@ -1,10 +1,6 @@
|
|||
@keyframes bannerTicker {
|
||||
0% {
|
||||
transform: translateX(100%);
|
||||
}
|
||||
100% {
|
||||
transform: translateX(-100%);
|
||||
}
|
||||
0% { transform: translateX(100%); }
|
||||
100% { transform: translateX(-100%); }
|
||||
}
|
||||
|
||||
.ticker {
|
||||
|
|
@ -13,5 +9,4 @@
|
|||
align-items: center;
|
||||
animation: bannerTicker linear infinite;
|
||||
height: 100%;
|
||||
gap: 3rem
|
||||
}
|
||||
|
|
@ -2,21 +2,13 @@ import styles from "./banner-ticker.module.css"
|
|||
import { DynamicLayoutRenderer } from "vibentec/renderer"
|
||||
import { LayoutComponentDefinition, LayoutContext } from "vibentec/component-map"
|
||||
|
||||
interface BannerTickerProps {
|
||||
node: LayoutComponentDefinition
|
||||
context: LayoutContext
|
||||
}
|
||||
interface BannerConfigProps {
|
||||
items?: LayoutComponentDefinition[]
|
||||
speed?: number
|
||||
}
|
||||
export default function BannerTicker({ node, context }: BannerTickerProps) {
|
||||
const props = node.config as BannerConfigProps ?? {}
|
||||
export default function BannerTicker({ node, context }: { node: LayoutComponentDefinition; context: LayoutContext }) {
|
||||
const props = node.config ?? {}
|
||||
const speed = props.speed ?? 10;
|
||||
return (
|
||||
<div className="relative overflow-hidden w-full h-full">
|
||||
<div className={styles.ticker} style={{ animationDuration: `${speed}s` }} >
|
||||
<DynamicLayoutRenderer nodes={props.items ?? []} context={context} />
|
||||
<DynamicLayoutRenderer nodes={props.items} context={context} />
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
|
|
|
|||
|
|
@ -1,42 +1,26 @@
|
|||
import {
|
||||
LayoutComponentDefinition,
|
||||
LayoutContext,
|
||||
} from "vibentec/component-map"
|
||||
import { clx } from "@medusajs/ui"
|
||||
import BannerNav from "./banner-nav"
|
||||
import BannerCTA from "./banner-cta"
|
||||
import BannerTicker from "./banner-ticker"
|
||||
import { LayoutComponentDefinition, LayoutContext } from "vibentec/component-map";
|
||||
import { clx } from "@medusajs/ui";
|
||||
import BannerNav from "./banner-nav";
|
||||
import BannerCTA from "./banner-cta";
|
||||
import BannerTicker from "./banner-ticker";
|
||||
|
||||
interface BannerProps {
|
||||
variant: "nav" | "cta" | "ticker"
|
||||
className?: string
|
||||
speed?: number
|
||||
}
|
||||
export default async function Banner({
|
||||
nodes,
|
||||
context,
|
||||
}: {
|
||||
nodes: LayoutComponentDefinition
|
||||
context: LayoutContext
|
||||
}) {
|
||||
const props = (nodes.config as BannerProps) ?? {}
|
||||
const bannerClassName = clx(
|
||||
"relative h-8 mx-auto border-b duration-200 bg-white border-ui-border-base",
|
||||
props.className
|
||||
)
|
||||
if (!props.variant) return null
|
||||
export default async function Banner({ nodes, context }: { nodes: LayoutComponentDefinition; context: LayoutContext }) {
|
||||
const props = nodes.config ?? {};
|
||||
const bannerClassName = clx("relative h-8 mx-auto border-b duration-200 bg-white border-ui-border-base", props.className);
|
||||
const bannerVariant = props.variant as "nav" | "cta" | "ticker";
|
||||
if (!bannerVariant) return null;
|
||||
|
||||
const variants = {
|
||||
nav: BannerNav,
|
||||
cta: BannerCTA,
|
||||
ticker: BannerTicker,
|
||||
}
|
||||
"nav": BannerNav,
|
||||
"cta": BannerCTA,
|
||||
"ticker": BannerTicker,
|
||||
};
|
||||
|
||||
const Component = variants[props.variant]
|
||||
const Component = variants[bannerVariant];
|
||||
|
||||
return (
|
||||
<div className={bannerClassName}>
|
||||
<Component node={nodes} context={context}/>
|
||||
</div>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,32 +0,0 @@
|
|||
import { Button, IconButton } from "@medusajs/ui"
|
||||
import * as MedusaIcons from "@medusajs/icons"
|
||||
import * as CustomIcons from "@modules/common/icons"
|
||||
import {
|
||||
LayoutComponentDefinition,
|
||||
LayoutContext,
|
||||
} from "@vibentec/component-map"
|
||||
|
||||
export default function VtButton({
|
||||
nodes,
|
||||
context,
|
||||
}: {
|
||||
nodes: LayoutComponentDefinition
|
||||
context: LayoutContext
|
||||
}) {
|
||||
const props = nodes.config || {}
|
||||
const iconName = props.icon as string | undefined
|
||||
const IconComponent = iconName
|
||||
? (MedusaIcons as Record<string, any>)[iconName] ??
|
||||
(CustomIcons as Record<string, any>)[iconName]
|
||||
: undefined
|
||||
return (
|
||||
<IconButton className={props?.className ?? ""}>
|
||||
{IconComponent && (
|
||||
<IconComponent className={props?.iconClassName ?? ""} />
|
||||
)}
|
||||
{props?.label && (
|
||||
<span className={props?.labelClassName ?? ""}>{props.label}</span>
|
||||
)}
|
||||
</IconButton>
|
||||
)
|
||||
}
|
||||
|
|
@ -1,75 +0,0 @@
|
|||
import React, { useCallback, useEffect, useState } from 'react'
|
||||
import style from './index.module.css'
|
||||
export const usePrevNextButtons = (emblaApi: any) => {
|
||||
const [prevBtnDisabled, setPrevBtnDisabled] = useState(true)
|
||||
const [nextBtnDisabled, setNextBtnDisabled] = useState(true)
|
||||
|
||||
const onPrevButtonClick = useCallback(() => {
|
||||
if (!emblaApi) return
|
||||
emblaApi.scrollPrev()
|
||||
}, [emblaApi])
|
||||
|
||||
const onNextButtonClick = useCallback(() => {
|
||||
if (!emblaApi) return
|
||||
emblaApi.scrollNext()
|
||||
}, [emblaApi])
|
||||
|
||||
const onSelect = useCallback((emblaApi: any) => {
|
||||
setPrevBtnDisabled(!emblaApi.canScrollPrev())
|
||||
setNextBtnDisabled(!emblaApi.canScrollNext())
|
||||
}, [])
|
||||
|
||||
useEffect(() => {
|
||||
if (!emblaApi) return
|
||||
|
||||
onSelect(emblaApi)
|
||||
emblaApi.on('reInit', onSelect).on('select', onSelect)
|
||||
}, [emblaApi, onSelect])
|
||||
|
||||
return {
|
||||
prevBtnDisabled,
|
||||
nextBtnDisabled,
|
||||
onPrevButtonClick,
|
||||
onNextButtonClick
|
||||
}
|
||||
}
|
||||
|
||||
export const PrevButton = (props: any) => {
|
||||
const { children, ...restProps } = props
|
||||
|
||||
return (
|
||||
<button
|
||||
className={style['embla__button']}
|
||||
type="button"
|
||||
{...restProps}
|
||||
>
|
||||
<svg className={style['embla__button__svg']} viewBox="0 0 532 532">
|
||||
<path
|
||||
fill="currentColor"
|
||||
d="M355.66 11.354c13.793-13.805 36.208-13.805 50.001 0 13.785 13.804 13.785 36.238 0 50.034L201.22 266l204.442 204.61c13.785 13.805 13.785 36.239 0 50.044-13.793 13.796-36.208 13.796-50.002 0a5994246.277 5994246.277 0 0 0-229.332-229.454 35.065 35.065 0 0 1-10.326-25.126c0-9.2 3.393-18.26 10.326-25.2C172.192 194.973 332.731 34.31 355.66 11.354Z"
|
||||
/>
|
||||
</svg>
|
||||
{children}
|
||||
</button>
|
||||
)
|
||||
}
|
||||
|
||||
export const NextButton = (props: any) => {
|
||||
const { children, ...restProps } = props
|
||||
|
||||
return (
|
||||
<button
|
||||
className={style['embla__button']}
|
||||
type="button"
|
||||
{...restProps}
|
||||
>
|
||||
<svg className={style['embla__button__svg']} viewBox="0 0 532 532">
|
||||
<path
|
||||
fill="currentColor"
|
||||
d="M176.34 520.646c-13.793 13.805-36.208 13.805-50.001 0-13.785-13.804-13.785-36.238 0-50.034L330.78 266 126.34 61.391c-13.785-13.805-13.785-36.239 0-50.044 13.793-13.796 36.208-13.796 50.002 0 22.928 22.947 206.395 206.507 229.332 229.454a35.065 35.065 0 0 1 10.326 25.126c0 9.2-3.393 18.26-10.326 25.2-45.865 45.901-206.404 206.564-229.332 229.52Z"
|
||||
/>
|
||||
</svg>
|
||||
{children}
|
||||
</button>
|
||||
)
|
||||
}
|
||||
|
|
@ -1,46 +0,0 @@
|
|||
import React, { useCallback, useEffect, useState } from 'react'
|
||||
|
||||
export const useDotButton = (emblaApi: any) => {
|
||||
const [selectedIndex, setSelectedIndex] = useState(0)
|
||||
const [scrollSnaps, setScrollSnaps] = useState([])
|
||||
|
||||
const onDotButtonClick = useCallback(
|
||||
(index: number) => {
|
||||
if (!emblaApi) return
|
||||
emblaApi.scrollTo(index)
|
||||
},
|
||||
[emblaApi]
|
||||
)
|
||||
|
||||
const onInit = useCallback((emblaApi: any) => {
|
||||
setScrollSnaps(emblaApi.scrollSnapList())
|
||||
}, [])
|
||||
|
||||
const onSelect = useCallback((emblaApi: any) => {
|
||||
setSelectedIndex(emblaApi.selectedScrollSnap())
|
||||
}, [])
|
||||
|
||||
useEffect(() => {
|
||||
if (!emblaApi) return
|
||||
|
||||
onInit(emblaApi)
|
||||
onSelect(emblaApi)
|
||||
emblaApi.on('reInit', onInit).on('reInit', onSelect).on('select', onSelect)
|
||||
}, [emblaApi, onInit, onSelect])
|
||||
|
||||
return {
|
||||
selectedIndex,
|
||||
scrollSnaps,
|
||||
onDotButtonClick
|
||||
}
|
||||
}
|
||||
|
||||
export const DotButton = (props: any) => {
|
||||
const { children, ...restProps } = props
|
||||
|
||||
return (
|
||||
<button type="button" {...restProps}>
|
||||
{children}
|
||||
</button>
|
||||
)
|
||||
}
|
||||
|
|
@ -1,139 +0,0 @@
|
|||
.embla {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
margin: auto;
|
||||
--slide-height: 19rem;
|
||||
--slide-spacing: 1rem;
|
||||
--slide-size: 100%;
|
||||
}
|
||||
.embla__viewport {
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
.embla__container {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
touch-action: pan-y pinch-zoom;
|
||||
margin-left: calc(var(--slide-spacing) * -1);
|
||||
--slide-spacing: 1rem;
|
||||
}
|
||||
.embla__slide {
|
||||
--slide-size: 100%;
|
||||
--slide-spacing: 1rem;
|
||||
transform: translate3d(0, 0, 0);
|
||||
flex: 0 0 var(--slide-size);
|
||||
min-width: 0;
|
||||
padding-left: var(--slide-spacing);
|
||||
}
|
||||
.embla__slide__number {
|
||||
height: 100%;
|
||||
font-size: 4rem;
|
||||
font-weight: 600;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
user-select: none;
|
||||
}
|
||||
.embla__slide__image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
.embla__controls {
|
||||
display: grid;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
z-index: 1000;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
grid-template-columns: auto 1fr;
|
||||
justify-content: space-between;
|
||||
gap: 1.2rem;
|
||||
}
|
||||
.embla__buttons {
|
||||
position: absolute;
|
||||
top: 45%;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
z-index: 1000;
|
||||
}
|
||||
.embla__button {
|
||||
--text-high-contrast-rgb-value: 49, 49, 49;
|
||||
--detail-high-contrast: rgb(192, 192, 192);
|
||||
--text-body: rgb(54, 49, 61);
|
||||
-webkit-tap-highlight-color: rgba(var(--text-high-contrast-rgb-value), 0.5);
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
background-color: transparent;
|
||||
touch-action: manipulation;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
border: 0;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
width: 3.6rem;
|
||||
height: 3.6rem;
|
||||
z-index: 1001;
|
||||
border-radius: 50%;
|
||||
color: var(--text-body);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.embla__button:disabled {
|
||||
--detail-high-contrast: rgb(192, 192, 192);
|
||||
color: var(--detail-high-contrast);
|
||||
}
|
||||
.embla__button__svg {
|
||||
width: 35%;
|
||||
height: 35%;
|
||||
}
|
||||
.embla__dots {
|
||||
display: flex;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 48%;
|
||||
flex-wrap: wrap;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
z-index: 1000;
|
||||
}
|
||||
.embla__dot {
|
||||
--text-high-contrast-rgb-value: 49, 49, 49;
|
||||
--text-body: rgb(54, 49, 61);
|
||||
-webkit-tap-highlight-color: rgba(var(--text-high-contrast-rgb-value), 0.5);
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
background-color: transparent;
|
||||
touch-action: manipulation;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
border: 0;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
width: 1.6rem;
|
||||
height: 1.6rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 50%;
|
||||
}
|
||||
.embla__dot:after {
|
||||
--detail-medium-contrast: rgb(234, 234, 234);
|
||||
--detail-medium-contrast-rgb-value: 234, 234, 234;
|
||||
box-shadow: inset 0 0 0 0.2rem var(--detail-medium-contrast);
|
||||
width: 0.42rem;
|
||||
height: 0.42rem;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
content: "";
|
||||
}
|
||||
.embla__dot--selected:after {
|
||||
--text-body: black;
|
||||
box-shadow: inset 0 0 0 0.2rem var(--text-body);
|
||||
}
|
||||
|
|
@ -1,92 +0,0 @@
|
|||
"use client"
|
||||
import {
|
||||
LayoutComponentDefinition,
|
||||
LayoutContext,
|
||||
} from "@vibentec/component-map"
|
||||
import styles from "./index.module.css"
|
||||
import useEmblaCarousel from "embla-carousel-react"
|
||||
import Autoplay from "embla-carousel-autoplay"
|
||||
import { useMemo } from "react"
|
||||
import { DotButton, useDotButton } from "./carousel-dot-button"
|
||||
import { NextButton, PrevButton, usePrevNextButtons } from "./carousel-arrow-button"
|
||||
import LocalizedClientLink from "@modules/common/components/localized-client-link"
|
||||
|
||||
export function VtCarousel({
|
||||
nodes,
|
||||
context,
|
||||
}: {
|
||||
nodes: LayoutComponentDefinition
|
||||
context: LayoutContext
|
||||
}) {
|
||||
const props = nodes.config ?? {}
|
||||
const { options } = props as any
|
||||
const images: string[] = props.images ?? props.slides ?? []
|
||||
const links: (string | undefined)[] = props.links ?? []
|
||||
const durationSeconds: number = props.duration ?? 4
|
||||
const showControls = images.length > 1
|
||||
|
||||
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 { selectedIndex, scrollSnaps, onDotButtonClick } =
|
||||
useDotButton(emblaApi)
|
||||
|
||||
const {
|
||||
prevBtnDisabled,
|
||||
nextBtnDisabled,
|
||||
onPrevButtonClick,
|
||||
onNextButtonClick,
|
||||
} = usePrevNextButtons(emblaApi)
|
||||
return (
|
||||
<section className={styles["embla"]}>
|
||||
<div className={styles["embla__viewport"]} ref={emblaRef}>
|
||||
<div className={styles["embla__container"]}>
|
||||
{images && images.map((src: string, index: number) => (
|
||||
<div className={styles["embla__slide"]} key={index + src}>
|
||||
<div className={styles["embla__slide__number"]}>
|
||||
{links[index] ? (
|
||||
<LocalizedClientLink href={links[index]}>
|
||||
<img src={src} alt={`slide-${index + 1}`} className={styles["embla__slide__image"]} />
|
||||
</LocalizedClientLink>
|
||||
) : (
|
||||
<img src={src} alt={`slide-${index + 1}`} className={styles["embla__slide__image"]} />
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{showControls && (
|
||||
<div className={styles["embla__controls"]}>
|
||||
<div className={styles["embla__buttons"]}>
|
||||
<PrevButton onClick={onPrevButtonClick} disabled={prevBtnDisabled} />
|
||||
<NextButton onClick={onNextButtonClick} disabled={nextBtnDisabled} />
|
||||
</div>
|
||||
|
||||
<div className={styles["embla__dots"]}>
|
||||
{scrollSnaps.map((_, index) => (
|
||||
<DotButton
|
||||
key={index}
|
||||
onClick={() => onDotButtonClick(index)}
|
||||
className={[
|
||||
styles["embla__dot"],
|
||||
index === selectedIndex ? styles["embla__dot--selected"] : "",
|
||||
].filter(Boolean).join(" ")}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</section>
|
||||
)
|
||||
}
|
||||
|
|
@ -1,110 +0,0 @@
|
|||
"use client"
|
||||
import { Select } from "@medusajs/ui"
|
||||
import ChevronDown from "@modules/common/icons/chevron-down"
|
||||
import {
|
||||
LayoutComponentDefinition,
|
||||
LayoutContext,
|
||||
} from "@vibentec/component-map"
|
||||
import { useMemo, useState, useEffect } from "react"
|
||||
import { useParams, usePathname, useRouter } from "next/navigation"
|
||||
import ReactCountryFlag from "react-country-flag"
|
||||
import { HttpTypes } from "@medusajs/types"
|
||||
|
||||
export default function VtCountrySelectClient({
|
||||
nodes,
|
||||
context,
|
||||
regions,
|
||||
}: {
|
||||
nodes: LayoutComponentDefinition
|
||||
context: LayoutContext
|
||||
regions?: HttpTypes.StoreRegion[]
|
||||
}) {
|
||||
const props = nodes.config ?? {}
|
||||
const triggerText = props?.trigger?.text
|
||||
const [items, setItems] = useState<{ text: string; label?: string }[]>([])
|
||||
const { countryCode } = useParams()
|
||||
useEffect(() => {
|
||||
if (!regions || regions.length === 0) {
|
||||
setItems([])
|
||||
return
|
||||
}
|
||||
const opts = regions
|
||||
.map((r) =>
|
||||
(r.countries || []).map((c) => ({
|
||||
text: c.iso_2 ?? "",
|
||||
label: c.display_name,
|
||||
}))
|
||||
)
|
||||
.flat()
|
||||
.filter((o) => o.text)
|
||||
.sort((a, b) => (a.label ?? "").localeCompare(b.label ?? ""))
|
||||
setItems(opts)
|
||||
}, [regions])
|
||||
|
||||
const initialValue = (countryCode as string) || triggerText || ""
|
||||
const [value, setValue] = useState(initialValue)
|
||||
const pathname = usePathname()
|
||||
const router = useRouter()
|
||||
|
||||
const handleChange = (next: string) => {
|
||||
setValue(next)
|
||||
if (!pathname || !next) return
|
||||
const parts = pathname.split("/")
|
||||
if (parts.length > 1) {
|
||||
parts[1] = next.toLowerCase()
|
||||
const newPath = parts.join("/")
|
||||
router.replace(newPath)
|
||||
}
|
||||
}
|
||||
const selectedItem = useMemo(() => {
|
||||
return items.find((i) => i.text === value)
|
||||
}, [items, value])
|
||||
if (!triggerText && items.length === 0) {
|
||||
return null
|
||||
}
|
||||
return (
|
||||
<Select value={value} onValueChange={handleChange}>
|
||||
<Select.Trigger
|
||||
className={
|
||||
(props.trigger?.className ?? "") +
|
||||
"flex items-center gap-1 [&_svg:not(:first-of-type)]:hidden"
|
||||
}
|
||||
>
|
||||
<span className="txt-compact-small flex items-center">
|
||||
{/* @ts-ignore */}
|
||||
{props.trigger?.isFlag && (
|
||||
<ReactCountryFlag
|
||||
svg
|
||||
style={{
|
||||
width: "16px",
|
||||
height: "16px",
|
||||
}}
|
||||
countryCode={value ?? ""}
|
||||
/>
|
||||
)}
|
||||
</span>
|
||||
{props.trigger?.isDisplayFullname ? (selectedItem?.label || value) : (selectedItem?.text.toUpperCase() || value)} <ChevronDown />
|
||||
</Select.Trigger>
|
||||
<Select.Content>
|
||||
{items.length > 0 &&
|
||||
items.map((item: { text: string; label?: string }, index: number) => (
|
||||
<Select.Item value={item.text || ""} key={item.text + index}>
|
||||
<div className="flex items-center w-full gap-3">
|
||||
{props.trigger?.isFlag && item.text && (
|
||||
<ReactCountryFlag
|
||||
svg
|
||||
style={{
|
||||
width: "16px",
|
||||
height: "16px",
|
||||
}}
|
||||
countryCode={item.text ?? ""}
|
||||
/>
|
||||
)}
|
||||
{item.text.toUpperCase()}
|
||||
</div>
|
||||
</Select.Item>
|
||||
))}
|
||||
</Select.Content>
|
||||
</Select>
|
||||
)
|
||||
}
|
||||
|
|
@ -1,22 +0,0 @@
|
|||
import { listRegions, getRegion } from "@lib/data/regions"
|
||||
import { HttpTypes } from "@medusajs/types"
|
||||
import {
|
||||
LayoutComponentDefinition,
|
||||
LayoutContext,
|
||||
} from "@vibentec/component-map"
|
||||
import VtCountryCodeSelectClient from "./index"
|
||||
|
||||
export default async function VtCountryCodeSelect({
|
||||
nodes,
|
||||
context,
|
||||
}: {
|
||||
nodes: LayoutComponentDefinition
|
||||
context: LayoutContext
|
||||
}) {
|
||||
const regions = (await listRegions()) as HttpTypes.StoreRegion[]
|
||||
|
||||
return (
|
||||
<VtCountryCodeSelectClient nodes={nodes} context={context} regions={regions} />
|
||||
)
|
||||
}
|
||||
|
||||
|
|
@ -1,68 +0,0 @@
|
|||
"use client"
|
||||
import { Button, clx } from "@medusajs/ui"
|
||||
import { ChevronRightMini } from "@medusajs/icons"
|
||||
import {
|
||||
LayoutComponentDefinition,
|
||||
LayoutContext,
|
||||
} from "@vibentec/component-map"
|
||||
|
||||
export function DefaultCtaBanner({
|
||||
nodes,
|
||||
context,
|
||||
}: {
|
||||
nodes: LayoutComponentDefinition
|
||||
context: LayoutContext
|
||||
}) {
|
||||
const props = nodes.config ?? {}
|
||||
return (
|
||||
<div
|
||||
className={clx(
|
||||
"relative w-[544px] bg-white rounded-[24px] border border-[#E6EFFC] shadow-[0_12px_40px_rgba(17,49,78,0.10)] p-6",
|
||||
props.className
|
||||
)}
|
||||
>
|
||||
{props.tagText && (
|
||||
<div
|
||||
className={clx(
|
||||
"inline-flex items-center rounded-full bg-[#FCE9DA] text-[#E68445] px-3 py-1 text-sm font-medium",
|
||||
props.tagTextClassName
|
||||
)}
|
||||
>
|
||||
{props.tagText}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{props.titleText && (
|
||||
<h1
|
||||
className={clx(
|
||||
"mt-4 text-[#11314E] font-semibold leading-normal text-[56px]",
|
||||
props.titleTextClassName
|
||||
)}
|
||||
>
|
||||
{props.titleText}
|
||||
</h1>
|
||||
)}
|
||||
|
||||
{props.descriptionText && (
|
||||
<p
|
||||
className={clx(
|
||||
"mt-5 text-[#285A86] text-[16px] sm:text-xl opacity-80",
|
||||
props.descriptionTextClassName
|
||||
)}
|
||||
>
|
||||
{props.descriptionText}
|
||||
</p>
|
||||
)}
|
||||
|
||||
<Button
|
||||
className={clx(
|
||||
"mt-8 inline-flex items-center gap-2 bg-[#0F2740] hover:bg-[#173551] text-white px-6 py-3 rounded-[12px] shadow-md",
|
||||
props.buttonTextClassName
|
||||
)}
|
||||
>
|
||||
{props.buttonText}
|
||||
<ChevronRightMini />
|
||||
</Button>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
@ -1,25 +0,0 @@
|
|||
"use client"
|
||||
import {
|
||||
LayoutComponentDefinition,
|
||||
LayoutContext,
|
||||
} from "@vibentec/component-map"
|
||||
import { DefaultCtaBanner } from "./default-cta"
|
||||
|
||||
export function VtCtaBanner({
|
||||
nodes,
|
||||
context,
|
||||
}: {
|
||||
nodes: LayoutComponentDefinition
|
||||
context: LayoutContext
|
||||
}) {
|
||||
const props = nodes.config ?? {}
|
||||
const variant = props.variant ?? "default"
|
||||
|
||||
const variants: Record<string, any> = {
|
||||
default: DefaultCtaBanner,
|
||||
}
|
||||
|
||||
const Component = variants[variant] || DefaultCtaBanner
|
||||
|
||||
return <Component nodes={nodes} context={context} />
|
||||
}
|
||||
|
|
@ -1,72 +0,0 @@
|
|||
"use client"
|
||||
import { Select } from "@medusajs/ui"
|
||||
import LocalizedClientLink from "@modules/common/components/localized-client-link"
|
||||
import ChevronDown from "@modules/common/icons/chevron-down"
|
||||
import {
|
||||
LayoutComponentDefinition,
|
||||
LayoutContext,
|
||||
} from "@vibentec/component-map"
|
||||
|
||||
export default function VtCurrencySelect({
|
||||
nodes,
|
||||
context,
|
||||
}: {
|
||||
nodes: LayoutComponentDefinition
|
||||
context: LayoutContext
|
||||
}) {
|
||||
const props = nodes.config ?? {}
|
||||
if (!props.trigger.text || props.items.length === 0) {
|
||||
return null
|
||||
}
|
||||
return (
|
||||
<Select>
|
||||
<Select.Trigger
|
||||
className={props.trigger.className + " flex items-center gap-1"}
|
||||
>
|
||||
{props.trigger.icon && (
|
||||
<img
|
||||
src={props.trigger.icon}
|
||||
alt={props.trigger.text}
|
||||
className="w-5 h-5 rounded-[50%] mr-3"
|
||||
/>
|
||||
)}
|
||||
{props.trigger.text} {props.trigger.isShowArrow && <ChevronDown />}
|
||||
</Select.Trigger>
|
||||
<Select.Content>
|
||||
{props.items.length > 0 &&
|
||||
props.items.map(
|
||||
(
|
||||
item: {
|
||||
text: string
|
||||
className?: string
|
||||
href?: string
|
||||
icon?: string
|
||||
},
|
||||
index: number
|
||||
) => (
|
||||
<Select.Item
|
||||
value={item.text || ""}
|
||||
key={item.text + index}
|
||||
className={item.className || ""}
|
||||
>
|
||||
{item.icon && (
|
||||
<img
|
||||
src={item.icon}
|
||||
alt={item.text}
|
||||
className="w-5 h-5 rounded-[50%] mr-3"
|
||||
/>
|
||||
)}
|
||||
{item.href ? (
|
||||
<LocalizedClientLink href={item.href}>
|
||||
{item.text}
|
||||
</LocalizedClientLink>
|
||||
) : (
|
||||
item.text
|
||||
)}
|
||||
</Select.Item>
|
||||
)
|
||||
)}
|
||||
</Select.Content>
|
||||
</Select>
|
||||
)
|
||||
}
|
||||
|
|
@ -1,71 +0,0 @@
|
|||
"use client"
|
||||
import { DropdownMenu } from "@medusajs/ui"
|
||||
import LocalizedClientLink from "@modules/common/components/localized-client-link"
|
||||
import ChevronDown from "@modules/common/icons/chevron-down"
|
||||
import {
|
||||
LayoutComponentDefinition,
|
||||
LayoutContext,
|
||||
} from "@vibentec/component-map"
|
||||
|
||||
export default function VtDropdown({
|
||||
nodes,
|
||||
context,
|
||||
}: {
|
||||
nodes: LayoutComponentDefinition
|
||||
context: LayoutContext
|
||||
}) {
|
||||
const props = nodes.config ?? {}
|
||||
if (!props.trigger.text || props.items.length === 0) {
|
||||
return null
|
||||
}
|
||||
return (
|
||||
<DropdownMenu>
|
||||
<DropdownMenu.Trigger
|
||||
className={props.trigger.className + " flex items-center gap-1"}
|
||||
>
|
||||
{props.trigger.icon && (
|
||||
<img
|
||||
src={props.trigger.icon}
|
||||
alt={props.trigger.text}
|
||||
className="w-5 h-5 rounded-[50%] mr-3"
|
||||
/>
|
||||
)}
|
||||
{props.trigger.text} {props.trigger.isShowArrow && <ChevronDown />}
|
||||
</DropdownMenu.Trigger>
|
||||
<DropdownMenu.Content>
|
||||
{props.items.length > 0 &&
|
||||
props.items.map(
|
||||
(
|
||||
item: {
|
||||
text: string
|
||||
className?: string
|
||||
href?: string
|
||||
icon?: string
|
||||
},
|
||||
index: number
|
||||
) => (
|
||||
<DropdownMenu.Item
|
||||
key={item.text + index}
|
||||
className={item.className || ""}
|
||||
>
|
||||
{item.icon && (
|
||||
<img
|
||||
src={item.icon}
|
||||
alt={item.text}
|
||||
className="w-5 h-5 rounded-[50%] mr-3"
|
||||
/>
|
||||
)}
|
||||
{item.href ? (
|
||||
<LocalizedClientLink href={item.href}>
|
||||
{item.text}
|
||||
</LocalizedClientLink>
|
||||
) : (
|
||||
item.text
|
||||
)}
|
||||
</DropdownMenu.Item>
|
||||
)
|
||||
)}
|
||||
</DropdownMenu.Content>
|
||||
</DropdownMenu>
|
||||
)
|
||||
}
|
||||
|
|
@ -3,42 +3,157 @@ import { listCollections } from "@lib/data/collections"
|
|||
import { Text, clx } from "@medusajs/ui"
|
||||
import LocalizedClientLink from "@modules/common/components/localized-client-link"
|
||||
import MedusaCTA from "@modules/layout/components/medusa-cta"
|
||||
import { DynamicLayoutRenderer } from "@vibentec/renderer"
|
||||
import {
|
||||
LayoutComponentDefinition,
|
||||
LayoutContext,
|
||||
} from "vibentec/component-map"
|
||||
import { LayoutComponentDefinition, LayoutContext } from "vibentec/component-map";
|
||||
|
||||
export default async function VtFooter({
|
||||
nodes,
|
||||
context,
|
||||
}: {
|
||||
nodes?: LayoutComponentDefinition
|
||||
context: LayoutContext
|
||||
}) {
|
||||
export default async function VtFooter({ nodes, context }: { nodes?: LayoutComponentDefinition; context: LayoutContext }) {
|
||||
const { collections } = await listCollections({
|
||||
fields: "*products",
|
||||
})
|
||||
const productCategories = await listCategories()
|
||||
const props = nodes?.config ?? {}
|
||||
const copyrightText = props.copyrightText ?? "";
|
||||
|
||||
return (
|
||||
<footer className={props?.className ?? ""}>
|
||||
{props?.left && (
|
||||
<div className={clx("flex h-full", props?.leftClassName)}>
|
||||
<DynamicLayoutRenderer nodes={props?.left} context={context} />
|
||||
<footer className="border-t border-ui-border-base w-full">
|
||||
<div className="content-container flex flex-col w-full">
|
||||
<div className="flex flex-col gap-y-6 xsmall:flex-row items-start justify-between py-40">
|
||||
<div>
|
||||
<LocalizedClientLink
|
||||
href="/"
|
||||
className="txt-compact-xlarge-plus text-ui-fg-subtle hover:text-ui-fg-base uppercase"
|
||||
>
|
||||
Medusa Store
|
||||
</LocalizedClientLink>
|
||||
</div>
|
||||
<div className="text-small-regular gap-10 md:gap-x-16 grid grid-cols-2 sm:grid-cols-3">
|
||||
{productCategories && productCategories?.length > 0 && (
|
||||
<div className="flex flex-col gap-y-2">
|
||||
<span className="txt-small-plus txt-ui-fg-base">
|
||||
Categories
|
||||
</span>
|
||||
<ul
|
||||
className="grid grid-cols-1 gap-2"
|
||||
data-testid="footer-categories"
|
||||
>
|
||||
{productCategories?.slice(0, 6).map((c) => {
|
||||
if (c.parent_category) {
|
||||
return
|
||||
}
|
||||
|
||||
const children =
|
||||
c.category_children?.map((child) => ({
|
||||
name: child.name,
|
||||
handle: child.handle,
|
||||
id: child.id,
|
||||
})) || null
|
||||
|
||||
return (
|
||||
<li
|
||||
className="flex flex-col gap-2 text-ui-fg-subtle txt-small"
|
||||
key={c.id}
|
||||
>
|
||||
<LocalizedClientLink
|
||||
className={clx(
|
||||
"hover:text-ui-fg-base",
|
||||
children && "txt-small-plus"
|
||||
)}
|
||||
href={`/categories/${c.handle}`}
|
||||
data-testid="category-link"
|
||||
>
|
||||
{c.name}
|
||||
</LocalizedClientLink>
|
||||
{children && (
|
||||
<ul className="grid grid-cols-1 ml-3 gap-2">
|
||||
{children &&
|
||||
children.map((child) => (
|
||||
<li key={child.id}>
|
||||
<LocalizedClientLink
|
||||
className="hover:text-ui-fg-base"
|
||||
href={`/categories/${child.handle}`}
|
||||
data-testid="category-link"
|
||||
>
|
||||
{child.name}
|
||||
</LocalizedClientLink>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
)}
|
||||
</li>
|
||||
)
|
||||
})}
|
||||
</ul>
|
||||
</div>
|
||||
)}
|
||||
{props?.center && (
|
||||
<div className={clx("flex h-full", props?.centerClassName)}>
|
||||
<DynamicLayoutRenderer nodes={props?.center} context={context} />
|
||||
{collections && collections.length > 0 && (
|
||||
<div className="flex flex-col gap-y-2">
|
||||
<span className="txt-small-plus txt-ui-fg-base">
|
||||
Collections
|
||||
</span>
|
||||
<ul
|
||||
className={clx(
|
||||
"grid grid-cols-1 gap-2 text-ui-fg-subtle txt-small",
|
||||
{
|
||||
"grid-cols-2": (collections?.length || 0) > 3,
|
||||
}
|
||||
)}
|
||||
>
|
||||
{collections?.slice(0, 6).map((c) => (
|
||||
<li key={c.id}>
|
||||
<LocalizedClientLink
|
||||
className="hover:text-ui-fg-base"
|
||||
href={`/collections/${c.handle}`}
|
||||
>
|
||||
{c.title}
|
||||
</LocalizedClientLink>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
)}
|
||||
{props?.right && (
|
||||
<div className={clx("flex h-full", props?.rightClassName)}>
|
||||
<DynamicLayoutRenderer nodes={props?.right} context={context} />
|
||||
<div className="flex flex-col gap-y-2">
|
||||
<span className="txt-small-plus txt-ui-fg-base">Medusa</span>
|
||||
<ul className="grid grid-cols-1 gap-y-2 text-ui-fg-subtle txt-small">
|
||||
<li>
|
||||
<a
|
||||
href="https://github.com/medusajs"
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
className="hover:text-ui-fg-base"
|
||||
>
|
||||
GitHub
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="https://docs.medusajs.com"
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
className="hover:text-ui-fg-base"
|
||||
>
|
||||
Documentation
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="https://github.com/medusajs/nextjs-starter-medusa"
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
className="hover:text-ui-fg-base"
|
||||
>
|
||||
Source code
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex w-full mb-16 justify-between text-ui-fg-muted">
|
||||
<Text className="txt-compact-small">
|
||||
{copyrightText || `© ${new Date().getFullYear()} Medusa Store. All rights reserved.`}
|
||||
</Text>
|
||||
<MedusaCTA />
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</footer>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,74 +0,0 @@
|
|||
import * as MedusaIcons from "@medusajs/icons"
|
||||
import { clx } from "@medusajs/ui"
|
||||
import {
|
||||
LayoutComponentDefinition,
|
||||
LayoutContext,
|
||||
} from "@vibentec/component-map"
|
||||
import LocalizedClientLink from "@modules/common/components/localized-client-link"
|
||||
|
||||
export default function VtFooterBottom({
|
||||
nodes,
|
||||
context,
|
||||
}: {
|
||||
nodes: LayoutComponentDefinition
|
||||
context: LayoutContext
|
||||
}) {
|
||||
const props = nodes.config ?? {}
|
||||
|
||||
const renderIcon = (name: string, idx: number) => {
|
||||
const IconComp = (MedusaIcons as Record<string, any>)[name]
|
||||
if (!IconComp) return null
|
||||
return <IconComp key={`${name}-${idx}`} className="shadow-none" />
|
||||
}
|
||||
|
||||
const renderLink = (item: any, idx: number, total: number) => {
|
||||
const LinkEl = (
|
||||
<LocalizedClientLink
|
||||
href={item?.href ?? "#"}
|
||||
className={clx(
|
||||
"hover:underline",
|
||||
props.linkClassName
|
||||
)}
|
||||
>
|
||||
{item?.label ?? ""}
|
||||
</LocalizedClientLink>
|
||||
)
|
||||
|
||||
return (
|
||||
<span
|
||||
key={`link-${idx}`}
|
||||
className={clx("flex items-center", props.linkItemClassName)}
|
||||
>
|
||||
{LinkEl}
|
||||
{idx < total - 1 && (
|
||||
<span className={clx("mx-2 text-white", props.separatorClassName)}>|</span>
|
||||
)}
|
||||
</span>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<div
|
||||
className={clx(
|
||||
"flex w-full items-center justify-between",
|
||||
props.className
|
||||
)}
|
||||
>
|
||||
<span className={clx("text-[14px] font-[400] pt-2", props.textClassName)}>
|
||||
{props.text}
|
||||
</span>
|
||||
<div className={clx("flex items-center gap-4")}>
|
||||
{props.links && props.links.length > 0 && (
|
||||
<div className={clx("flex items-center", props.linksClassName)}>
|
||||
{props.links.map((l: any, idx: number) =>
|
||||
renderLink(l, idx, props.links.length)
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
<div className={clx("flex items-center gap-2", props.iconsClassName)}>
|
||||
{(props.icons ?? []).map(renderIcon)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
@ -1,158 +0,0 @@
|
|||
import { clx } from "@medusajs/ui"
|
||||
import { ChevronRightMini } from "@medusajs/icons"
|
||||
import {
|
||||
LayoutComponentDefinition,
|
||||
LayoutContext,
|
||||
} from "@vibentec/component-map"
|
||||
import * as MedusaIcons from "@medusajs/icons"
|
||||
import * as CustomIcons from "@modules/common/icons"
|
||||
import LocalizedClientLink from "@modules/common/components/localized-client-link"
|
||||
|
||||
interface SocialIcon {
|
||||
href?: string
|
||||
icon?: string
|
||||
imgSrc?: string
|
||||
className?: string
|
||||
}
|
||||
|
||||
export default function VtFooterHero({
|
||||
nodes,
|
||||
context,
|
||||
}: {
|
||||
nodes: LayoutComponentDefinition
|
||||
context: LayoutContext
|
||||
}) {
|
||||
const props = nodes.config ?? {}
|
||||
const IconComp = (name?: string) => {
|
||||
if (!name) return null
|
||||
return (
|
||||
(MedusaIcons as Record<string, any>)[name] ||
|
||||
(CustomIcons as Record<string, any>)[name] ||
|
||||
null
|
||||
)
|
||||
}
|
||||
const renderSocialContent = (item: SocialIcon) => {
|
||||
const Icon = IconComp(item.icon)
|
||||
if (Icon) return <Icon className={item.className} />
|
||||
if (item.imgSrc)
|
||||
return (
|
||||
<img
|
||||
src={item.imgSrc}
|
||||
alt={item.icon ?? "social"}
|
||||
className={item.className}
|
||||
/>
|
||||
)
|
||||
return (
|
||||
<span className="w-4 h-4 rounded-md bg-white/10 text-white flex items-center justify-center text-sm">
|
||||
{item.icon?.[0] ?? "?"}
|
||||
</span>
|
||||
)
|
||||
}
|
||||
|
||||
const renderSocialIcon = (icon: SocialIcon, idx: number) => {
|
||||
const content = renderSocialContent(icon)
|
||||
return icon.href ? (
|
||||
<a
|
||||
key={idx}
|
||||
href={icon.href}
|
||||
className={clx("hover:opacity-80", icon.className)}
|
||||
>
|
||||
{content}
|
||||
</a>
|
||||
) : (
|
||||
<span key={idx} className={clx("", icon.className)}>
|
||||
{content}
|
||||
</span>
|
||||
)
|
||||
}
|
||||
return (
|
||||
<div className={clx("flex flex-col items-start", props.className)}>
|
||||
{props.logoSrc && (
|
||||
<img
|
||||
src={props.logoSrc}
|
||||
alt={props.logoAlt ?? "logo"}
|
||||
className={clx("object-contain", props.logoClassName)}
|
||||
/>
|
||||
)}
|
||||
{props.title && (
|
||||
<h2
|
||||
className={clx(
|
||||
"mt-4 w-[320px] text-[24px] font-semibold text-[#11314E]",
|
||||
props.titleClassName
|
||||
)}
|
||||
>
|
||||
{props.title}
|
||||
</h2>
|
||||
)}
|
||||
{props.description && (
|
||||
<p
|
||||
className={clx(
|
||||
"mt-2 text-ui-fg-subtle txt-small",
|
||||
props.descriptionClassName
|
||||
)}
|
||||
>
|
||||
{props.description}
|
||||
</p>
|
||||
)}
|
||||
{props.cta && (
|
||||
<LocalizedClientLink
|
||||
href={props.cta.href}
|
||||
className={clx(
|
||||
"bg-black text-white items-center flex gap-2 px-4 mt-[24px] py-2 rounded-md w-fit text-[14px]",
|
||||
props.ctaClassName
|
||||
)}
|
||||
>
|
||||
<span>{props.cta.label}</span>
|
||||
<ChevronRightMini className="order-1" />
|
||||
</LocalizedClientLink>
|
||||
)}
|
||||
|
||||
{props.email && (
|
||||
<form
|
||||
className={clx(
|
||||
"mt-4 w-full max-w-[500px]",
|
||||
props.email?.emailInputClassName
|
||||
)}
|
||||
>
|
||||
<div className="relative flex items-center justify-between border border-white/40 rounded-md px-4 py-3">
|
||||
<input
|
||||
id="vt-footer-hero-email"
|
||||
type="email"
|
||||
name="contact[email]"
|
||||
placeholder=" "
|
||||
autoComplete="email"
|
||||
required
|
||||
className="peer bg-transparent outline-none text-white/90 placeholder-transparent flex-1"
|
||||
/>
|
||||
<label
|
||||
htmlFor="vt-footer-hero-email"
|
||||
className="absolute left-4 text-white/60 pointer-events-none transition-all duration-300
|
||||
peer-placeholder-shown:top-1/2 peer-placeholder-shown:-translate-y-1/2 peer-placeholder-shown:text-white/50
|
||||
peer-focus:top-3 peer-focus:-translate-y-2 peer-focus:left-3 peer-focus:text-white
|
||||
peer-[:not(:placeholder-shown)]:translate-y-[-0.85rem]"
|
||||
>
|
||||
E-Mail
|
||||
</label>
|
||||
<button
|
||||
type="submit"
|
||||
className="ml-4 w-8 h-8 rounded-full bg-white/10 hover:bg-white/20 flex items-center justify-center"
|
||||
>
|
||||
<span className="sr-only">Abonnieren</span>
|
||||
<ChevronRightMini />
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
)}
|
||||
{props.socials && props.socials.length > 0 ? (
|
||||
<div
|
||||
className={clx(
|
||||
"flex items-center gap-4 mt-2",
|
||||
props.socialsClassName
|
||||
)}
|
||||
>
|
||||
{props.socials.map(renderSocialIcon)}
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
@ -1,114 +0,0 @@
|
|||
"use client"
|
||||
import { Button, Input } from "@medusajs/ui"
|
||||
import { clx } from "@medusajs/ui"
|
||||
import * as MedusaIcons from "@medusajs/icons"
|
||||
import * as CustomIcons from "@modules/common/icons"
|
||||
import { LayoutComponentDefinition, LayoutContext } from "@vibentec/component-map"
|
||||
import React, { useState } from "react"
|
||||
|
||||
interface SocialIcon {
|
||||
href?: string
|
||||
icon?: string
|
||||
imgSrc?: string
|
||||
className?: string
|
||||
}
|
||||
|
||||
interface VtFooterSignupConfig {
|
||||
title?: string
|
||||
placeholder?: string
|
||||
buttonLabel?: string
|
||||
className?: string
|
||||
titleClassName?: string
|
||||
formClassName?: string
|
||||
inputClassName?: string
|
||||
buttonClassName?: string
|
||||
socialsClassName?: string
|
||||
socials?: SocialIcon[]
|
||||
}
|
||||
|
||||
export default function VtFooterSignUp({
|
||||
nodes,
|
||||
context,
|
||||
}: {
|
||||
nodes: LayoutComponentDefinition
|
||||
context: LayoutContext
|
||||
}) {
|
||||
const props = (nodes.config as VtFooterSignupConfig) ?? {}
|
||||
const [email, setEmail] = useState("")
|
||||
|
||||
const IconComp = (name?: string) => {
|
||||
if (!name) return null
|
||||
return (
|
||||
(MedusaIcons as Record<string, any>)[name] ||
|
||||
(CustomIcons as Record<string, any>)[name] ||
|
||||
null
|
||||
)
|
||||
}
|
||||
|
||||
const onSubmit = (e: React.FormEvent) => {
|
||||
e.preventDefault()
|
||||
console.log("newsletter_signup", { email })
|
||||
}
|
||||
|
||||
const renderSocialContent = (item: SocialIcon) => {
|
||||
const Icon = IconComp(item.icon)
|
||||
if (Icon) return <Icon className={item.className} />
|
||||
if (item.imgSrc) return <img src={item.imgSrc} alt={item.icon ?? "social"} className={item.className} />
|
||||
return (
|
||||
<span className="w-4 h-4 rounded-md bg-white/10 text-white flex items-center justify-center text-sm">
|
||||
{item.icon?.[0] ?? "?"}
|
||||
</span>
|
||||
)
|
||||
}
|
||||
|
||||
const renderSocialIcon = (icon: SocialIcon, idx: number) => {
|
||||
const content = renderSocialContent(icon)
|
||||
return icon.href ? (
|
||||
<a key={idx} href={icon.href} className={clx("hover:opacity-80", icon.className)}>
|
||||
{content}
|
||||
</a>
|
||||
) : (
|
||||
<span key={idx} className={clx("", icon.className)}>
|
||||
{content}
|
||||
</span>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={clx("flex flex-col gap-4", props.className)}>
|
||||
{props.title && (
|
||||
<p className={clx("text-white text-[18px]", props.titleClassName)}>
|
||||
{props.title}
|
||||
</p>
|
||||
)}
|
||||
|
||||
<form onSubmit={onSubmit} className={clx("flex items-center gap-4", props.formClassName)}>
|
||||
<input
|
||||
type="email"
|
||||
placeholder={props.placeholder ?? "Email"}
|
||||
value={email}
|
||||
onChange={(e) => setEmail(e.target.value)}
|
||||
className={clx(
|
||||
"h-[48px] rounded-lg bg-white text-black px-4",
|
||||
props.inputClassName
|
||||
)}
|
||||
/>
|
||||
<Button
|
||||
type="submit"
|
||||
className={clx(
|
||||
"h-[48px] rounded-lg bg-[#C4622C] text-white",
|
||||
props.buttonClassName
|
||||
)}
|
||||
>
|
||||
{props.buttonLabel ?? "Sign Up"}
|
||||
</Button>
|
||||
</form>
|
||||
|
||||
{props.socials && props.socials.length > 0 ? (
|
||||
<div className={clx("flex items-center gap-4 mt-2", props.socialsClassName)}>
|
||||
{props.socials.map(renderSocialIcon)}
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
@ -1,25 +0,0 @@
|
|||
import { clx } from "@medusajs/ui"
|
||||
import {
|
||||
LayoutComponentDefinition,
|
||||
LayoutContext,
|
||||
} from "@vibentec/component-map"
|
||||
export interface VtImageConfig {
|
||||
src: string
|
||||
alt: string
|
||||
className?: string,
|
||||
objectFit?: string,
|
||||
}
|
||||
export default function VtLogo({
|
||||
nodes,
|
||||
context,
|
||||
}: {
|
||||
nodes: LayoutComponentDefinition
|
||||
context: LayoutContext
|
||||
}) {
|
||||
const props = (nodes.config as VtImageConfig) ?? {}
|
||||
return (
|
||||
<div className={clx("relative", props.className)}>
|
||||
<img src={props.src} alt={props.alt} className={clx("w-full h-full", props.objectFit)} />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
@ -1,56 +0,0 @@
|
|||
"use client"
|
||||
import {
|
||||
LayoutComponentDefinition,
|
||||
LayoutContext,
|
||||
} from "@vibentec/component-map"
|
||||
import LocalizedClientLink from "@modules/common/components/localized-client-link"
|
||||
import * as MedusaIcons from "@medusajs/icons"
|
||||
import * as CustomIcons from "@modules/common/icons"
|
||||
export default function VtMenuItem({
|
||||
nodes,
|
||||
context,
|
||||
}: {
|
||||
nodes: LayoutComponentDefinition
|
||||
context: LayoutContext
|
||||
}) {
|
||||
const props = nodes.config ?? {}
|
||||
const title = props.title ?? ""
|
||||
const items = props.items ?? []
|
||||
const icon = props.icon ?? ""
|
||||
|
||||
const getIconComponent = (icon: string | undefined) => {
|
||||
return icon
|
||||
? (MedusaIcons as Record<string, any>)[icon] ??
|
||||
(CustomIcons as Record<string, any>)[icon]
|
||||
: undefined
|
||||
}
|
||||
return (
|
||||
<div className={props.className ?? "flex flex-col gap-y-2"}>
|
||||
<span>{title}</span>
|
||||
<ul className="grid grid-cols-1 gap-2" data-testid="footer-categories">
|
||||
{items.map((item: { text: string; href?: string; icon?: string }, index: number) => {
|
||||
const Icon = getIconComponent(item.icon)
|
||||
return (
|
||||
<li
|
||||
key={`${item.text}-${index}`}
|
||||
className={props.itemClassName ?? "text-ui-fg-subtle txt-small"}
|
||||
>
|
||||
{Icon && <Icon className={props.iconClassName ?? "inline-block mr-2"} />}
|
||||
{item.href ? (
|
||||
<LocalizedClientLink
|
||||
className="hover:text-ui-fg-base"
|
||||
href={item.href}
|
||||
data-testid="category-link"
|
||||
>
|
||||
{item.text}
|
||||
</LocalizedClientLink>
|
||||
) : (
|
||||
<span className="hover:text-ui-fg-base">{item.text}</span>
|
||||
)}
|
||||
</li>
|
||||
)
|
||||
})}
|
||||
</ul>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
@ -1,26 +1,19 @@
|
|||
import { DynamicLayoutRenderer } from "vibentec/renderer"
|
||||
import { LayoutComponentDefinition, LayoutContext } from "vibentec/component-map";
|
||||
import { clx } from "@medusajs/ui";
|
||||
|
||||
interface BannerNavProps {
|
||||
className?: string;
|
||||
left?: LayoutComponentDefinition[];
|
||||
center?: LayoutComponentDefinition[];
|
||||
right?: LayoutComponentDefinition[];
|
||||
}
|
||||
export default function VtNav({ nodes, context }: { nodes: LayoutComponentDefinition; context: LayoutContext }) {
|
||||
const props = nodes.config as BannerNavProps ?? {}
|
||||
const props = nodes.config ?? {}
|
||||
|
||||
return (
|
||||
<div className="relative mx-auto border-b duration-200 bg-white border-ui-border-base">
|
||||
<nav className={clx("content-container txt-xsmall-plus flex items-center justify-between w-full h-full text-small-regular", props.className)}>
|
||||
<div className="flex items-center gap-x-4 h-full">
|
||||
<div className="relative h-16 mx-auto border-b duration-200 bg-white border-ui-border-base">
|
||||
<nav className="content-container txt-xsmall-plus text-ui-fg-subtle flex items-center justify-between w-full h-full text-small-regular">
|
||||
<div className="flex items-center gap-x-4">
|
||||
{props.left && <DynamicLayoutRenderer nodes={props.left} context={context} />}
|
||||
</div>
|
||||
<div className="flex items-center gap-x-4 h-full">
|
||||
<div className="flex items-center gap-x-4">
|
||||
{props.center && <DynamicLayoutRenderer nodes={props.center} context={context} />}
|
||||
</div>
|
||||
<div className="flex items-center gap-x-4 h-full justify-end">
|
||||
<div className="flex items-center gap-x-4">
|
||||
{props.right && <DynamicLayoutRenderer nodes={props.right} context={context} />}
|
||||
</div>
|
||||
</nav>
|
||||
|
|
|
|||
|
|
@ -1,40 +0,0 @@
|
|||
import React from "react"
|
||||
import { MagnifyingGlass } from "@medusajs/icons"
|
||||
import {
|
||||
LayoutComponentDefinition,
|
||||
LayoutContext,
|
||||
} from "@vibentec/component-map"
|
||||
|
||||
export default function VtSearchInput({
|
||||
nodes,
|
||||
context,
|
||||
}: {
|
||||
nodes: LayoutComponentDefinition
|
||||
context: LayoutContext
|
||||
}) {
|
||||
const props = nodes.config || {}
|
||||
const placeholder = props.placeholder ?? "Search"
|
||||
const shortcut = props.shortcut ?? "⌘K"
|
||||
|
||||
return (
|
||||
<div
|
||||
className={
|
||||
`flex items-center gap-3 w-full max-w-xl bg-white border border-grey-20 rounded-rounded shadow-sm px-4 py-2 ${
|
||||
props?.className ?? ""
|
||||
}`
|
||||
}
|
||||
>
|
||||
<MagnifyingGlass className="text-[#11314E]" />
|
||||
<input
|
||||
type="search"
|
||||
placeholder={placeholder}
|
||||
className="flex-1 bg-transparent outline-none text-[#11314E] placeholder:text-[#11314E]"
|
||||
/>
|
||||
{shortcut && (
|
||||
<span className="text-[#11314E] border border-grey-30 rounded-rounded px-2 py-0.5 text-sm">
|
||||
{shortcut}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
@ -1,17 +0,0 @@
|
|||
import { LayoutComponentDefinition, LayoutContext } from "@vibentec/component-map"
|
||||
import { DynamicLayoutRenderer } from "@vibentec/renderer"
|
||||
|
||||
export default function VtSocialLinks({
|
||||
nodes,
|
||||
context,
|
||||
}: {
|
||||
nodes: LayoutComponentDefinition
|
||||
context: LayoutContext
|
||||
}) {
|
||||
const props = nodes.config ?? {}
|
||||
return (
|
||||
<div className={props.className ?? ""}>
|
||||
{nodes.children && <DynamicLayoutRenderer nodes={nodes.children} context={context} />}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
@ -1,18 +0,0 @@
|
|||
import { LayoutComponentDefinition } from "@vibentec/component-map"
|
||||
|
||||
import { LayoutContext } from "@vibentec/component-map"
|
||||
|
||||
export default function VtText({
|
||||
nodes,
|
||||
context,
|
||||
}: {
|
||||
nodes: LayoutComponentDefinition
|
||||
context: LayoutContext
|
||||
}) {
|
||||
const props = nodes.config || {}
|
||||
return (
|
||||
<span className={props?.className ?? ""}>
|
||||
{props?.label ?? ""}
|
||||
</span>
|
||||
)
|
||||
}
|
||||
|
|
@ -18,7 +18,7 @@ export default async function PreviewPrice({ price }: { price: VariantPrice }) {
|
|||
)}
|
||||
<Text
|
||||
className={clx("text-ui-fg-muted", {
|
||||
"text-green-700": price.price_type === "sale",
|
||||
"text-ui-fg-interactive": price.price_type === "sale",
|
||||
})}
|
||||
data-testid="price"
|
||||
>
|
||||
|
|
|
|||
|
|
@ -1,225 +0,0 @@
|
|||
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>
|
||||
)
|
||||
}
|
||||
|
|
@ -1,88 +0,0 @@
|
|||
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
|
||||
|
|
@ -51,8 +51,7 @@
|
|||
|
||||
@layer components {
|
||||
.content-container {
|
||||
/* @apply max-w-[1440px] w-full mx-auto px-6; */
|
||||
@apply w-full mx-auto px-6;
|
||||
@apply max-w-[1440px] w-full mx-auto px-6;
|
||||
}
|
||||
|
||||
.contrast-btn {
|
||||
|
|
@ -111,6 +110,3 @@
|
|||
@apply text-[32px] leading-[44px] font-semibold;
|
||||
}
|
||||
}
|
||||
[data-radix-popper-content-wrapper]{
|
||||
z-index: 51 !important;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -12,27 +12,8 @@ import Banner from "@modules/layout/templates/vt-banner"
|
|||
import VtMegaMenu from "@modules/layout/components/vt-mega-menu"
|
||||
import VtLink from "@modules/layout/components/vt-linkbutton"
|
||||
import VtSideMenu from "@modules/layout/components/vt-sidemenu"
|
||||
import VtDropdown from "@modules/layout/templates/vt-dropdown"
|
||||
import VtSearchInput from "@modules/layout/templates/vt-search-input"
|
||||
import VtCurrencySelect from "@modules/layout/templates/vt-currency-select"
|
||||
import VtMenuItem from "@modules/layout/templates/vt-menu-item"
|
||||
import VtCountryCodeSelect from "@modules/layout/templates/vt-country-select/server"
|
||||
import VtSocialLinks from "@modules/layout/templates/vt-social-link"
|
||||
import VtFooterHero from "@modules/layout/templates/vt-footer/vt-footer-hero"
|
||||
import VtFooterBottom from "@modules/layout/templates/vt-footer/vt-footer-bottom"
|
||||
import VtLogo from "@modules/layout/templates/vt-logo"
|
||||
import VtFooterSignUp from "@modules/layout/templates/vt-footer/vt-footer-signup"
|
||||
import Hero from "@modules/layout/templates/hero"
|
||||
import { VtCarousel } from "@modules/layout/templates/vt-carousel"
|
||||
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>;
|
||||
|
||||
export interface LayoutComponentDefinition {
|
||||
config?: ComponentConfig
|
||||
|
|
@ -40,83 +21,51 @@ export interface LayoutComponentDefinition {
|
|||
}
|
||||
|
||||
export interface LayoutContext {
|
||||
customer: any
|
||||
cart: any
|
||||
shippingOptions: any[]
|
||||
contentChildren: React.ReactNode
|
||||
countryCode?: string
|
||||
region?: any
|
||||
customer: any;
|
||||
cart: any;
|
||||
shippingOptions: any[];
|
||||
contentChildren: React.ReactNode;
|
||||
}
|
||||
|
||||
export type ComponentRenderer = {
|
||||
render: (
|
||||
entry: LayoutComponentDefinition,
|
||||
ctx: LayoutContext
|
||||
) => React.ReactNode
|
||||
render: (entry: LayoutComponentDefinition, ctx: LayoutContext) => React.ReactNode
|
||||
}
|
||||
|
||||
// Utility methods
|
||||
const configOnly = (
|
||||
Component: React.ComponentType<any>
|
||||
): ComponentRenderer => ({
|
||||
render: (entry) => <Component {...entry.config} />,
|
||||
const configOnly = (Component: React.ComponentType<any>): ComponentRenderer => ({
|
||||
render: (entry) => <Component {...entry.config} />
|
||||
})
|
||||
|
||||
const nodesContextRenderer = (
|
||||
Component: React.ComponentType<any>
|
||||
): ComponentRenderer => ({
|
||||
render: (entry: any, ctx: LayoutContext) => (
|
||||
<Component nodes={entry} context={ctx} />
|
||||
),
|
||||
})
|
||||
const nodesContextRenderer = (Component: React.ComponentType<any>): ComponentRenderer => ({
|
||||
render: (entry: any, ctx: LayoutContext) => <Component nodes={entry} context={ctx} />
|
||||
});
|
||||
|
||||
const renderChildren = (entry: LayoutComponentDefinition, ctx: LayoutContext) =>
|
||||
entry.children ? (
|
||||
<DynamicLayoutRenderer nodes={entry.children} context={ctx} />
|
||||
) : null
|
||||
entry.children ? <DynamicLayoutRenderer nodes={entry.children} context={ctx} /> : null
|
||||
|
||||
|
||||
// Component Map
|
||||
export const componentMap: Record<string, ComponentRenderer> = {
|
||||
Header: nodesContextRenderer(VtHeader),
|
||||
Nav: nodesContextRenderer(VtNav),
|
||||
Hero: nodesContextRenderer(Hero),
|
||||
VtMegaMenu: nodesContextRenderer(VtMegaMenu),
|
||||
VtSideMenu: nodesContextRenderer(VtSideMenu),
|
||||
Banner: nodesContextRenderer(Banner),
|
||||
HomeButton: nodesContextRenderer(HomeButton),
|
||||
Logo: nodesContextRenderer(VtLogo),
|
||||
AccountButton: nodesContextRenderer(AccountButton),
|
||||
SearchInput: nodesContextRenderer(VtSearchInput),
|
||||
VtCartButton: nodesContextRenderer(VtCartButton),
|
||||
VtCurrencySelect: nodesContextRenderer(VtCurrencySelect),
|
||||
VtCountryCodeSelect: nodesContextRenderer(VtCountryCodeSelect),
|
||||
VtSocialLinks: nodesContextRenderer(VtSocialLinks),
|
||||
Link: nodesContextRenderer(VtLink),
|
||||
Dropdown: nodesContextRenderer(VtDropdown),
|
||||
VtMenuItem: nodesContextRenderer(VtMenuItem),
|
||||
CartMismatchBanner: configOnly(CartMismatchBanner),
|
||||
FreeShippingPriceNudge: configOnly(FreeShippingPriceNudge),
|
||||
PropsChildren: {
|
||||
render: (_props, ctx) => ctx.contentChildren, // PageLayout's props.children
|
||||
},
|
||||
VtCtaBanner: nodesContextRenderer(VtCtaBanner),
|
||||
VtFooterHero: nodesContextRenderer(VtFooterHero),
|
||||
VtFooterBottom: nodesContextRenderer(VtFooterBottom),
|
||||
VtFooterSignUp: nodesContextRenderer(VtFooterSignUp),
|
||||
Footer: nodesContextRenderer(VtFooter),
|
||||
ImageDisplayer: nodesContextRenderer(VtCarousel),
|
||||
VtFeaturedProducts: nodesContextRenderer(VtFeaturedProducts),
|
||||
VtCategoryHighlight: nodesContextRenderer(VtCategoryHighlight),
|
||||
VtBrand: nodesContextRenderer(VtBrand),
|
||||
VtFeedback: nodesContextRenderer(VtFeedback),
|
||||
VtFeedbackCard: nodesContextRenderer(VtFeedbackCard),
|
||||
VtSubcription: nodesContextRenderer(VtSubcription),
|
||||
Footer: nodesContextRenderer(VtFooter)
|
||||
}
|
||||
|
||||
|
||||
export type ComponentName = keyof typeof componentMap
|
||||
|
||||
// //maps key = componentName to value = props + children
|
||||
// export type LayoutComponentNode = Record<string, LayoutComponentDefinition>
|
||||
export type LayoutComponentNode = {
|
||||
[K in ComponentName]: LayoutComponentDefinition
|
||||
}[ComponentName]
|
||||
export type LayoutComponentNode = { [K in ComponentName]: LayoutComponentDefinition }[ComponentName]
|
||||
|
|
@ -1,29 +1,11 @@
|
|||
import fs from "fs"
|
||||
import path from "path"
|
||||
import { jsonFileNames } from "./devJsonFileNames"
|
||||
import { jsonFileNames } from "./devJsonFileNames";
|
||||
|
||||
const fileName = jsonFileNames.namVibentec
|
||||
const fileName = jsonFileNames.stePlayGround;
|
||||
|
||||
async function readDesignFile() {
|
||||
export async function loadDesignConfig() {
|
||||
const filePath = path.join(process.cwd(), "config", fileName)
|
||||
const fileData = await fs.promises.readFile(filePath, "utf-8")
|
||||
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()
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,8 +1,4 @@
|
|||
export const jsonFileNames = {
|
||||
steMedusaStarter: "ste.medusa-starter.design.json",
|
||||
stePlayGround: "ste.playground.design.json",
|
||||
nam3Bear: "nam.3bear.design.json",
|
||||
namDrsquatch: "nam.drsquatch.design.json",
|
||||
namVibentec: "nam.vibentec.design.json",
|
||||
namStarter: "nam.mds-starter-design.json",
|
||||
stePlayGround: "ste.playground.design.json"
|
||||
};
|
||||
Loading…
Reference in New Issue