Compare commits
1 Commits
main
...
namds/refa
| Author | SHA1 | Date |
|---|---|---|
 Nam Doan
|
e30230d338 |
|
|
@ -1,5 +1,4 @@
|
||||||
{
|
[
|
||||||
"layout": [
|
|
||||||
{
|
{
|
||||||
"Header": {
|
"Header": {
|
||||||
"config": {
|
"config": {
|
||||||
|
|
@ -178,6 +177,20 @@
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
"CartMismatchBanner": {
|
||||||
|
"config": {
|
||||||
|
"show": true
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"FreeShippingPriceNudge": {
|
||||||
|
"config": {
|
||||||
|
"variant": "popup"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
{
|
{
|
||||||
"PropsChildren": {}
|
"PropsChildren": {}
|
||||||
},
|
},
|
||||||
|
|
@ -200,26 +213,10 @@
|
||||||
"emailInputClassName": "w-[300px] ml-8"
|
"emailInputClassName": "w-[300px] ml-8"
|
||||||
},
|
},
|
||||||
"socials": [
|
"socials": [
|
||||||
{
|
{ "icon": "Twitter", "href": "/", "className": "w-5 h-5 text-white" },
|
||||||
"icon": "Twitter",
|
{ "icon": "Twitter", "href": "/", "className": "w-5 h-5 text-white" },
|
||||||
"href": "/",
|
{ "icon": "Twitter", "href": "/", "className": "w-5 h-5 text-white" },
|
||||||
"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"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"icon": "Twitter",
|
|
||||||
"href": "/",
|
|
||||||
"className": "w-5 h-5 text-white"
|
|
||||||
}
|
|
||||||
],
|
],
|
||||||
"socialsClassName": "ml-8 mt-10",
|
"socialsClassName": "ml-8 mt-10",
|
||||||
"className": "",
|
"className": "",
|
||||||
|
|
@ -314,22 +311,15 @@
|
||||||
"config": {
|
"config": {
|
||||||
"className": "content-container bg-[#003f31] w-full text text-[#11314E] flex items-center justify-between",
|
"className": "content-container bg-[#003f31] w-full text text-[#11314E] flex items-center justify-between",
|
||||||
"leftClassName": "w-full",
|
"leftClassName": "w-full",
|
||||||
"left": [],
|
"left": [
|
||||||
|
],
|
||||||
"center": [],
|
"center": [],
|
||||||
"right": [
|
"right": [
|
||||||
{
|
{
|
||||||
"VtFooterBottom": {
|
"VtFooterBottom": {
|
||||||
"config": {
|
"config": {
|
||||||
"className": " mr-[80px]",
|
"className": " mr-[80px]",
|
||||||
"icons": [
|
"icons": ["Mastercard", "PayPal", "Visa", "Mastercard","Mastercard","Mastercard","Mastercard"]
|
||||||
"Mastercard",
|
|
||||||
"PayPal",
|
|
||||||
"Visa",
|
|
||||||
"Mastercard",
|
|
||||||
"Mastercard",
|
|
||||||
"Mastercard",
|
|
||||||
"Mastercard"
|
|
||||||
]
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -337,256 +327,4 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
],
|
]
|
||||||
"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,5 +1,4 @@
|
||||||
{
|
[
|
||||||
"layout": [
|
|
||||||
{
|
{
|
||||||
"Header": {
|
"Header": {
|
||||||
"config": {
|
"config": {
|
||||||
|
|
@ -131,6 +130,20 @@
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
"CartMismatchBanner": {
|
||||||
|
"config": {
|
||||||
|
"show": true
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"FreeShippingPriceNudge": {
|
||||||
|
"config": {
|
||||||
|
"variant": "popup"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
{
|
{
|
||||||
"PropsChildren": {}
|
"PropsChildren": {}
|
||||||
},
|
},
|
||||||
|
|
@ -264,26 +277,10 @@
|
||||||
"buttonClassName": "bg-[#C4622C] w-[90px]",
|
"buttonClassName": "bg-[#C4622C] w-[90px]",
|
||||||
"socialsClassName": "mt-4 gap-8",
|
"socialsClassName": "mt-4 gap-8",
|
||||||
"socials": [
|
"socials": [
|
||||||
{
|
{ "icon": "Twitter", "href": "/", "className": "w-5 h-5 text-white" },
|
||||||
"icon": "Twitter",
|
{ "icon": "Twitter", "href": "/", "className": "w-5 h-5 text-white" },
|
||||||
"href": "/",
|
{ "icon": "Twitter", "href": "/", "className": "w-5 h-5 text-white" },
|
||||||
"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"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"icon": "Twitter",
|
|
||||||
"href": "/",
|
|
||||||
"className": "w-5 h-5 text-white"
|
|
||||||
}
|
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -315,257 +312,4 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
],
|
]
|
||||||
"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,5 +1,4 @@
|
||||||
{
|
[
|
||||||
"layout": [
|
|
||||||
{
|
{
|
||||||
"Header": {
|
"Header": {
|
||||||
"config": {
|
"config": {
|
||||||
|
|
@ -135,7 +134,30 @@
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{ "PropsChildren": {} },
|
{
|
||||||
|
"Hero": {
|
||||||
|
"config": {
|
||||||
|
"variant": "default"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"CartMismatchBanner": {
|
||||||
|
"config": {
|
||||||
|
"show": true
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"FreeShippingPriceNudge": {
|
||||||
|
"config": {
|
||||||
|
"variant": "popup"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"PropsChildren": {}
|
||||||
|
},
|
||||||
{
|
{
|
||||||
"Footer": {
|
"Footer": {
|
||||||
"config": {
|
"config": {
|
||||||
|
|
@ -148,9 +170,18 @@
|
||||||
"className": "flex flex-col gap-y-2",
|
"className": "flex flex-col gap-y-2",
|
||||||
"itemClassName": "text-ui-fg-subtle txt-small ml-3",
|
"itemClassName": "text-ui-fg-subtle txt-small ml-3",
|
||||||
"items": [
|
"items": [
|
||||||
{ "text": "Clothing", "href": "/" },
|
{
|
||||||
{ "text": "Shoes", "href": "/categories/shoes" },
|
"text": "Clothing",
|
||||||
{ "text": "Accessories", "href": "/categories/accessories" }
|
"href": "/"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"text": "Shoes",
|
||||||
|
"href": "/categories/shoes"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"text": "Accessories",
|
||||||
|
"href": "/categories/accessories"
|
||||||
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -164,9 +195,18 @@
|
||||||
"className": "flex flex-col gap-y-2",
|
"className": "flex flex-col gap-y-2",
|
||||||
"itemClassName": "text-ui-fg-subtle txt-small ml-3",
|
"itemClassName": "text-ui-fg-subtle txt-small ml-3",
|
||||||
"items": [
|
"items": [
|
||||||
{ "text": "Clothing", "href": "/" },
|
{
|
||||||
{ "text": "Shoes", "href": "/categories/shoes" },
|
"text": "Clothing",
|
||||||
{ "text": "Accessories", "href": "/categories/accessories" }
|
"href": "/"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"text": "Shoes",
|
||||||
|
"href": "/categories/shoes"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"text": "Accessories",
|
||||||
|
"href": "/categories/accessories"
|
||||||
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -185,80 +225,4 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
],
|
]
|
||||||
"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,5 +1,4 @@
|
||||||
{
|
[
|
||||||
"layout": [
|
|
||||||
{
|
{
|
||||||
"Header": {
|
"Header": {
|
||||||
"config": {
|
"config": {
|
||||||
|
|
@ -177,7 +176,32 @@
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{ "PropsChildren": {} },
|
{
|
||||||
|
"Hero": {
|
||||||
|
"config": {
|
||||||
|
"variant": "vibentec",
|
||||||
|
"text": "alo",
|
||||||
|
"className": "bg-custom-gradient"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"CartMismatchBanner": {
|
||||||
|
"config": {
|
||||||
|
"show": true
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"FreeShippingPriceNudge": {
|
||||||
|
"config": {
|
||||||
|
"variant": "popup"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"PropsChildren": {}
|
||||||
|
},
|
||||||
{
|
{
|
||||||
"Footer": {
|
"Footer": {
|
||||||
"config": {
|
"config": {
|
||||||
|
|
@ -194,10 +218,7 @@
|
||||||
"logoAlt": "Vibentec IT",
|
"logoAlt": "Vibentec IT",
|
||||||
"title": "Der Wegbereiter für innovative IT-Lösungen",
|
"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.",
|
"description": "Tauchen Sie ein in eine Welt modernster Technologien, zuverlässiger Support und proaktiver Innovation – gemeinsam gestalten wir die digitale Zukunft Ihres Unternehmens.",
|
||||||
"cta": {
|
"cta": { "label": "Kontaktieren Sie uns", "href": "/" },
|
||||||
"label": "Kontaktieren Sie uns",
|
|
||||||
"href": "/"
|
|
||||||
},
|
|
||||||
"className": "",
|
"className": "",
|
||||||
"ctaClassName": "ml-8",
|
"ctaClassName": "ml-8",
|
||||||
"titleClassName": "ml-8",
|
"titleClassName": "ml-8",
|
||||||
|
|
@ -214,9 +235,18 @@
|
||||||
"className": "flex flex-col gap-y-2 text-[24px] font-semibold text-[#11314E]",
|
"className": "flex flex-col gap-y-2 text-[24px] font-semibold text-[#11314E]",
|
||||||
"itemClassName": "text-[1rem] font-[400]",
|
"itemClassName": "text-[1rem] font-[400]",
|
||||||
"items": [
|
"items": [
|
||||||
{ "text": "Über Uns", "href": "/" },
|
{
|
||||||
{ "text": "Placeholder", "href": "/categories/shoes" },
|
"text": "Über Uns",
|
||||||
{ "text": "Placeholder", "href": "/categories/accessories" }
|
"href": "/"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"text": "Placeholder",
|
||||||
|
"href": "/categories/shoes"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"text": "Placeholder",
|
||||||
|
"href": "/categories/accessories"
|
||||||
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -228,9 +258,21 @@
|
||||||
"className": "flex flex-col gap-y-2 text-[24px] font-semibold text-[#11314E]",
|
"className": "flex flex-col gap-y-2 text-[24px] font-semibold text-[#11314E]",
|
||||||
"itemClassName": "text-[1rem] font-[400] flex items-center",
|
"itemClassName": "text-[1rem] font-[400] flex items-center",
|
||||||
"items": [
|
"items": [
|
||||||
{ "text": "Twitter", "href": "/", "icon": "X" },
|
{
|
||||||
{ "text": "Facebook", "href": "/categories/shoes", "icon": "X" },
|
"text": "Twitter",
|
||||||
{ "text": "Pinterest", "href": "/categories/accessories", "icon": "X" }
|
"href": "/",
|
||||||
|
"icon": "X"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"text": "Facebook",
|
||||||
|
"href": "/categories/shoes",
|
||||||
|
"icon": "X"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"text": "Pinterest",
|
||||||
|
"href": "/categories/accessories",
|
||||||
|
"icon": "X"
|
||||||
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -242,9 +284,18 @@
|
||||||
"className": "flex flex-col gap-y-2 text-[24px] font-semibold text-[#11314E]",
|
"className": "flex flex-col gap-y-2 text-[24px] font-semibold text-[#11314E]",
|
||||||
"itemClassName": "text-[1rem] font-[400] w-[150px]",
|
"itemClassName": "text-[1rem] font-[400] w-[150px]",
|
||||||
"items": [
|
"items": [
|
||||||
{ "text": "Hopfenstr. 10c76185 Karlsruhe Deutschland", "href": "/" },
|
{
|
||||||
{ "text": "+497271 5970098", "href": "/categories/shoes" },
|
"text": "Hopfenstr. 10c76185 Karlsruhe Deutschland",
|
||||||
{ "text": "info@vibentec-it.io", "href": "/categories/accessories" }
|
"href": "/"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"text": "+497271 5970098",
|
||||||
|
"href": "/categories/shoes"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"text": "info@vibentec-it.io",
|
||||||
|
"href": "/categories/accessories"
|
||||||
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -257,9 +308,18 @@
|
||||||
"className": "flex flex-col gap-y-2 text-[24px] font-semibold text-[#11314E]",
|
"className": "flex flex-col gap-y-2 text-[24px] font-semibold text-[#11314E]",
|
||||||
"itemClassName": "text-[1rem] font-[400] w-[150px]",
|
"itemClassName": "text-[1rem] font-[400] w-[150px]",
|
||||||
"items": [
|
"items": [
|
||||||
{ "text": "Datenschutz", "href": "/" },
|
{
|
||||||
{ "text": "Impressum", "href": "/categories/shoes" },
|
"text": "Datenschutz",
|
||||||
{ "text": "Installation Info", "href": "/categories/accessories" }
|
"href": "/"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"text": "Impressum",
|
||||||
|
"href": "/categories/shoes"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"text": "Installation Info",
|
||||||
|
"href": "/categories/accessories"
|
||||||
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -286,127 +346,4 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
],
|
]
|
||||||
"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",
|
"@radix-ui/react-accordion": "^1.2.1",
|
||||||
"@stripe/react-stripe-js": "^1.7.2",
|
"@stripe/react-stripe-js": "^1.7.2",
|
||||||
"@stripe/stripe-js": "^1.29.0",
|
"@stripe/stripe-js": "^1.29.0",
|
||||||
"embla-carousel-autoplay": "^8.6.0",
|
|
||||||
"embla-carousel-react": "^8.6.0",
|
|
||||||
"lodash": "^4.17.21",
|
"lodash": "^4.17.21",
|
||||||
"next": "^15.3.1",
|
"next": "^15.3.1",
|
||||||
"pg": "^8.11.3",
|
"pg": "^8.11.3",
|
||||||
|
|
|
||||||
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: 195 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 393 KiB |
|
|
@ -5,22 +5,14 @@ import { retrieveCustomer } from "@lib/data/customer"
|
||||||
import { getBaseURL } from "@lib/util/env"
|
import { getBaseURL } from "@lib/util/env"
|
||||||
import { StoreCartShippingOption } from "@medusajs/types"
|
import { StoreCartShippingOption } from "@medusajs/types"
|
||||||
import { DynamicLayoutRenderer } from "../../../vibentec/renderer"
|
import { DynamicLayoutRenderer } from "../../../vibentec/renderer"
|
||||||
import { LayoutContext, LayoutComponentNode } from "../../../vibentec/component-map"
|
import { LayoutContext, LayoutComponentNode, } from "../../../vibentec/component-map"
|
||||||
import { loadLayoutConfig } from "vibentec/configloader"
|
import { loadDesignConfig } from "vibentec/configloader"
|
||||||
|
|
||||||
import { getRegion } from "@lib/data/regions"
|
|
||||||
|
|
||||||
export const metadata: Metadata = {
|
export const metadata: Metadata = {
|
||||||
metadataBase: new URL(getBaseURL()),
|
metadataBase: new URL(getBaseURL()),
|
||||||
}
|
}
|
||||||
|
|
||||||
export default async function PageLayout(props: {
|
export default async function PageLayout(props: { children: React.ReactNode }) {
|
||||||
children: React.ReactNode
|
|
||||||
params: Promise<{ countryCode: string }>
|
|
||||||
}) {
|
|
||||||
const params = await props.params
|
|
||||||
const { countryCode } = params
|
|
||||||
const region = await getRegion(countryCode)
|
|
||||||
const customer = await retrieveCustomer()
|
const customer = await retrieveCustomer()
|
||||||
const cart = await retrieveCart()
|
const cart = await retrieveCart()
|
||||||
let shippingOptions: StoreCartShippingOption[] = []
|
let shippingOptions: StoreCartShippingOption[] = []
|
||||||
|
|
@ -31,14 +23,12 @@ export default async function PageLayout(props: {
|
||||||
shippingOptions = shipping_options
|
shippingOptions = shipping_options
|
||||||
}
|
}
|
||||||
|
|
||||||
const nodes: LayoutComponentNode[] = await loadLayoutConfig()
|
const nodes: LayoutComponentNode[] = await loadDesignConfig()
|
||||||
const context: LayoutContext = {
|
const context: LayoutContext = {
|
||||||
customer,
|
customer,
|
||||||
cart,
|
cart,
|
||||||
shippingOptions,
|
shippingOptions,
|
||||||
contentChildren: props.children,
|
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 Hero from "@modules/home/components/hero"
|
||||||
import { listCollections } from "@lib/data/collections"
|
import { listCollections } from "@lib/data/collections"
|
||||||
import { getRegion } from "@lib/data/regions"
|
import { getRegion } from "@lib/data/regions"
|
||||||
import VtFeaturedProducts from "@modules/home/components/vt-featured-products"
|
|
||||||
import { DynamicLayoutRenderer } from "@vibentec/renderer"
|
|
||||||
import { LayoutContext, LayoutComponentNode } from "@vibentec/component-map"
|
|
||||||
import { loadPageConfig } from "@vibentec/configloader"
|
|
||||||
|
|
||||||
export const metadata: Metadata = {
|
export const metadata: Metadata = {
|
||||||
title: "Medusa Next.js Starter Template",
|
title: "Medusa Next.js Starter Template",
|
||||||
|
|
@ -28,25 +24,18 @@ export default async function Home(props: {
|
||||||
fields: "id, handle, title",
|
fields: "id, handle, title",
|
||||||
})
|
})
|
||||||
|
|
||||||
console.log('collections:',collections)
|
|
||||||
|
|
||||||
if (!collections || !region) {
|
if (!collections || !region) {
|
||||||
return null
|
return null
|
||||||
}
|
}
|
||||||
const nodes: LayoutComponentNode[] = await loadPageConfig("Home")
|
|
||||||
|
|
||||||
if (!region) {
|
return (
|
||||||
return null
|
<>
|
||||||
}
|
{/* <Hero /> */}
|
||||||
|
<div className="py-12">
|
||||||
const context: LayoutContext = {
|
<ul className="flex flex-col gap-x-6">
|
||||||
customer: null,
|
<FeaturedProducts collections={collections} region={region} />
|
||||||
cart: null,
|
</ul>
|
||||||
shippingOptions: [],
|
</div>
|
||||||
contentChildren: null,
|
</>
|
||||||
countryCode,
|
)
|
||||||
region,
|
|
||||||
}
|
|
||||||
|
|
||||||
return <DynamicLayoutRenderer nodes={nodes} context={context} />
|
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -3,9 +3,6 @@ import { notFound } from "next/navigation"
|
||||||
import { listProducts } from "@lib/data/products"
|
import { listProducts } from "@lib/data/products"
|
||||||
import { getRegion, listRegions } from "@lib/data/regions"
|
import { getRegion, listRegions } from "@lib/data/regions"
|
||||||
import ProductTemplate from "@modules/products/templates"
|
import ProductTemplate from "@modules/products/templates"
|
||||||
import { DynamicLayoutRenderer } from "@vibentec/renderer"
|
|
||||||
import { LayoutContext, LayoutComponentNode } from "@vibentec/component-map"
|
|
||||||
import { loadPageConfig } from "@vibentec/configloader"
|
|
||||||
|
|
||||||
type Props = {
|
type Props = {
|
||||||
params: Promise<{ countryCode: string; handle: string }>
|
params: Promise<{ countryCode: string; handle: string }>
|
||||||
|
|
@ -99,25 +96,11 @@ export default async function ProductPage(props: Props) {
|
||||||
notFound()
|
notFound()
|
||||||
}
|
}
|
||||||
|
|
||||||
const nodes: LayoutComponentNode[] = await loadPageConfig("Product")
|
|
||||||
|
|
||||||
const context: LayoutContext = {
|
|
||||||
customer: null,
|
|
||||||
cart: null,
|
|
||||||
shippingOptions: [],
|
|
||||||
contentChildren: null,
|
|
||||||
countryCode: params.countryCode,
|
|
||||||
region,
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
|
||||||
<ProductTemplate
|
<ProductTemplate
|
||||||
product={pricedProduct}
|
product={pricedProduct}
|
||||||
region={region}
|
region={region}
|
||||||
countryCode={params.countryCode}
|
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 { SortOptions } from "@modules/store/components/refinement-list/sort-products"
|
||||||
import StoreTemplate from "@modules/store/templates"
|
import StoreTemplate from "@modules/store/templates"
|
||||||
import { LayoutComponentNode, LayoutContext } from "@vibentec/component-map"
|
|
||||||
import { getRegion } from "@lib/data/regions"
|
|
||||||
import { loadPageConfig } from "@vibentec/configloader"
|
|
||||||
import { DynamicLayoutRenderer } from "@vibentec/renderer"
|
|
||||||
|
|
||||||
export const metadata: Metadata = {
|
export const metadata: Metadata = {
|
||||||
title: "Store",
|
title: "Store",
|
||||||
|
|
@ -23,28 +19,15 @@ type Params = {
|
||||||
}
|
}
|
||||||
|
|
||||||
export default async function StorePage(props: Params) {
|
export default async function StorePage(props: Params) {
|
||||||
const params = await props.params
|
const params = await props.params;
|
||||||
const searchParams = await props.searchParams
|
const searchParams = await props.searchParams;
|
||||||
const region = await getRegion(params.countryCode)
|
|
||||||
const { sortBy, page } = searchParams
|
const { sortBy, page } = searchParams
|
||||||
const nodes: LayoutComponentNode[] = await loadPageConfig("Store")
|
|
||||||
|
|
||||||
const context: LayoutContext = {
|
|
||||||
customer: null,
|
|
||||||
cart: null,
|
|
||||||
shippingOptions: [],
|
|
||||||
contentChildren: null,
|
|
||||||
countryCode: params.countryCode,
|
|
||||||
region,
|
|
||||||
}
|
|
||||||
return (
|
return (
|
||||||
<>
|
|
||||||
<StoreTemplate
|
<StoreTemplate
|
||||||
sortBy={sortBy}
|
sortBy={sortBy}
|
||||||
page={page}
|
page={page}
|
||||||
countryCode={params.countryCode}
|
countryCode={params.countryCode}
|
||||||
/>
|
/>
|
||||||
<DynamicLayoutRenderer nodes={nodes} context={context} />
|
|
||||||
</>
|
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -36,6 +36,7 @@ export const listCollections = async (
|
||||||
{
|
{
|
||||||
query: queryParams,
|
query: queryParams,
|
||||||
next,
|
next,
|
||||||
|
cache: "force-cache",
|
||||||
}
|
}
|
||||||
)
|
)
|
||||||
.then(({ collections }) => ({ collections, count: collections.length }))
|
.then(({ collections }) => ({ collections, count: collections.length }))
|
||||||
|
|
|
||||||
|
|
@ -63,11 +63,12 @@ export const listProducts = async ({
|
||||||
offset,
|
offset,
|
||||||
region_id: region?.id,
|
region_id: region?.id,
|
||||||
fields:
|
fields:
|
||||||
"*variants.calculated_price,+variants.inventory_quantity,*metadata,+tags",
|
"*variants.calculated_price,+variants.inventory_quantity,+metadata,+tags",
|
||||||
...queryParams,
|
...queryParams,
|
||||||
},
|
},
|
||||||
headers,
|
headers,
|
||||||
next,
|
next,
|
||||||
|
cache: "force-cache",
|
||||||
}
|
}
|
||||||
)
|
)
|
||||||
.then(({ products, count }) => {
|
.then(({ products, count }) => {
|
||||||
|
|
|
||||||
|
|
@ -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,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>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
@ -0,0 +1,31 @@
|
||||||
|
import { Github } from "@medusajs/icons"
|
||||||
|
import { Button, Heading } from "@medusajs/ui"
|
||||||
|
export default function HeroDefault() {
|
||||||
|
return (
|
||||||
|
<div className="absolute inset-0 z-10 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>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,48 @@
|
||||||
|
import { Github } from "@medusajs/icons"
|
||||||
|
import { Button, clx, Heading } from "@medusajs/ui"
|
||||||
|
import {
|
||||||
|
LayoutComponentDefinition,
|
||||||
|
LayoutContext,
|
||||||
|
} from "@vibentec/component-map"
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
node: LayoutComponentDefinition
|
||||||
|
context: LayoutContext
|
||||||
|
}
|
||||||
|
const HeroVibentec = ({ node, context }: Props) => {
|
||||||
|
const props = node.config ?? {}
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
className={clx(
|
||||||
|
"absolute inset-0 z-10 flex flex-col justify-center items-center text-center small:p-32 gap-6",
|
||||||
|
props.className
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
<span>
|
||||||
|
<Heading
|
||||||
|
level="h1"
|
||||||
|
className="text-3xl leading-10 text-ui-fg-base font-normal"
|
||||||
|
>
|
||||||
|
{props.text ?? "Ecommerce Starter Template Vibentec"}
|
||||||
|
</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>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default HeroVibentec
|
||||||
|
|
@ -3,9 +3,14 @@ import {
|
||||||
LayoutContext,
|
LayoutContext,
|
||||||
} from "vibentec/component-map"
|
} from "vibentec/component-map"
|
||||||
import { clx } from "@medusajs/ui"
|
import { clx } from "@medusajs/ui"
|
||||||
import BannerHero from "./banner-hero"
|
import BannerHeroVibentec from "../hero/hero-vibentec"
|
||||||
import { DynamicLayoutRenderer } from "vibentec/renderer"
|
import BannerHeroDefault from "../hero/hero-default"
|
||||||
|
|
||||||
|
interface BannerProps {
|
||||||
|
variant: "vibentec" | "default"
|
||||||
|
className?: string
|
||||||
|
speed?: number
|
||||||
|
}
|
||||||
export default async function Hero({
|
export default async function Hero({
|
||||||
nodes,
|
nodes,
|
||||||
context,
|
context,
|
||||||
|
|
@ -13,33 +18,23 @@ export default async function Hero({
|
||||||
nodes: LayoutComponentDefinition
|
nodes: LayoutComponentDefinition
|
||||||
context: LayoutContext
|
context: LayoutContext
|
||||||
}) {
|
}) {
|
||||||
const props = nodes.config ?? {}
|
const props = (nodes.config as BannerProps) ?? {}
|
||||||
const left = nodes.config?.left ?? []
|
|
||||||
const center = nodes.config?.center ?? []
|
|
||||||
const right = nodes.config?.right ?? []
|
|
||||||
const heroClassName = clx(
|
const heroClassName = clx(
|
||||||
"min-h-[30rem] w-full border-b border-ui-border-base relative",
|
"h-[75vh] w-full border-b border-ui-border-base relative bg-ui-bg-subtle",
|
||||||
props.className
|
props.className
|
||||||
)
|
)
|
||||||
|
if (!props.variant) return null
|
||||||
|
|
||||||
|
const variants = {
|
||||||
|
vibentec: BannerHeroVibentec,
|
||||||
|
default: BannerHeroDefault
|
||||||
|
}
|
||||||
|
|
||||||
|
const Component = variants[props.variant]
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className={heroClassName}>
|
<div className={heroClassName}>
|
||||||
<BannerHero node={nodes} context={context} />
|
<Component 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>
|
</div>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -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>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
@ -23,6 +23,7 @@ export default function VtCountrySelectClient({
|
||||||
const triggerText = props?.trigger?.text
|
const triggerText = props?.trigger?.text
|
||||||
const [items, setItems] = useState<{ text: string; label?: string }[]>([])
|
const [items, setItems] = useState<{ text: string; label?: string }[]>([])
|
||||||
const { countryCode } = useParams()
|
const { countryCode } = useParams()
|
||||||
|
console.log(regions)
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (!regions || regions.length === 0) {
|
if (!regions || regions.length === 0) {
|
||||||
setItems([])
|
setItems([])
|
||||||
|
|
@ -38,6 +39,7 @@ export default function VtCountrySelectClient({
|
||||||
.flat()
|
.flat()
|
||||||
.filter((o) => o.text)
|
.filter((o) => o.text)
|
||||||
.sort((a, b) => (a.label ?? "").localeCompare(b.label ?? ""))
|
.sort((a, b) => (a.label ?? "").localeCompare(b.label ?? ""))
|
||||||
|
console.log(opts)
|
||||||
setItems(opts)
|
setItems(opts)
|
||||||
}, [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} />
|
|
||||||
}
|
|
||||||
|
|
@ -18,7 +18,7 @@ export default async function PreviewPrice({ price }: { price: VariantPrice }) {
|
||||||
)}
|
)}
|
||||||
<Text
|
<Text
|
||||||
className={clx("text-ui-fg-muted", {
|
className={clx("text-ui-fg-muted", {
|
||||||
"text-green-700": price.price_type === "sale",
|
"text-ui-fg-interactive": price.price_type === "sale",
|
||||||
})}
|
})}
|
||||||
data-testid="price"
|
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
|
|
||||||
|
|
@ -23,16 +23,8 @@ import VtFooterBottom from "@modules/layout/templates/vt-footer/vt-footer-bottom
|
||||||
import VtLogo from "@modules/layout/templates/vt-logo"
|
import VtLogo from "@modules/layout/templates/vt-logo"
|
||||||
import VtFooterSignUp from "@modules/layout/templates/vt-footer/vt-footer-signup"
|
import VtFooterSignUp from "@modules/layout/templates/vt-footer/vt-footer-signup"
|
||||||
import Hero from "@modules/layout/templates/hero"
|
import Hero from "@modules/layout/templates/hero"
|
||||||
import { VtCarousel } from "@modules/layout/templates/vt-carousel"
|
|
||||||
import { 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 {
|
export interface LayoutComponentDefinition {
|
||||||
config?: ComponentConfig
|
config?: ComponentConfig
|
||||||
|
|
@ -40,40 +32,28 @@ export interface LayoutComponentDefinition {
|
||||||
}
|
}
|
||||||
|
|
||||||
export interface LayoutContext {
|
export interface LayoutContext {
|
||||||
customer: any
|
customer: any;
|
||||||
cart: any
|
cart: any;
|
||||||
shippingOptions: any[]
|
shippingOptions: any[];
|
||||||
contentChildren: React.ReactNode
|
contentChildren: React.ReactNode;
|
||||||
countryCode?: string
|
|
||||||
region?: any
|
|
||||||
}
|
}
|
||||||
|
|
||||||
export type ComponentRenderer = {
|
export type ComponentRenderer = {
|
||||||
render: (
|
render: (entry: LayoutComponentDefinition, ctx: LayoutContext) => React.ReactNode
|
||||||
entry: LayoutComponentDefinition,
|
|
||||||
ctx: LayoutContext
|
|
||||||
) => React.ReactNode
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// Utility methods
|
// Utility methods
|
||||||
const configOnly = (
|
const configOnly = (Component: React.ComponentType<any>): ComponentRenderer => ({
|
||||||
Component: React.ComponentType<any>
|
render: (entry) => <Component {...entry.config} />
|
||||||
): ComponentRenderer => ({
|
|
||||||
render: (entry) => <Component {...entry.config} />,
|
|
||||||
})
|
})
|
||||||
|
|
||||||
const nodesContextRenderer = (
|
const nodesContextRenderer = (Component: React.ComponentType<any>): ComponentRenderer => ({
|
||||||
Component: React.ComponentType<any>
|
render: (entry: any, ctx: LayoutContext) => <Component nodes={entry} context={ctx} />
|
||||||
): ComponentRenderer => ({
|
});
|
||||||
render: (entry: any, ctx: LayoutContext) => (
|
|
||||||
<Component nodes={entry} context={ctx} />
|
|
||||||
),
|
|
||||||
})
|
|
||||||
|
|
||||||
const renderChildren = (entry: LayoutComponentDefinition, ctx: LayoutContext) =>
|
const renderChildren = (entry: LayoutComponentDefinition, ctx: LayoutContext) =>
|
||||||
entry.children ? (
|
entry.children ? <DynamicLayoutRenderer nodes={entry.children} context={ctx} /> : null
|
||||||
<DynamicLayoutRenderer nodes={entry.children} context={ctx} />
|
|
||||||
) : null
|
|
||||||
|
|
||||||
// Component Map
|
// Component Map
|
||||||
export const componentMap: Record<string, ComponentRenderer> = {
|
export const componentMap: Record<string, ComponentRenderer> = {
|
||||||
|
|
@ -99,24 +79,15 @@ export const componentMap: Record<string, ComponentRenderer> = {
|
||||||
PropsChildren: {
|
PropsChildren: {
|
||||||
render: (_props, ctx) => ctx.contentChildren, // PageLayout's props.children
|
render: (_props, ctx) => ctx.contentChildren, // PageLayout's props.children
|
||||||
},
|
},
|
||||||
VtCtaBanner: nodesContextRenderer(VtCtaBanner),
|
|
||||||
VtFooterHero: nodesContextRenderer(VtFooterHero),
|
VtFooterHero: nodesContextRenderer(VtFooterHero),
|
||||||
VtFooterBottom: nodesContextRenderer(VtFooterBottom),
|
VtFooterBottom: nodesContextRenderer(VtFooterBottom),
|
||||||
VtFooterSignUp: nodesContextRenderer(VtFooterSignUp),
|
VtFooterSignUp: nodesContextRenderer(VtFooterSignUp),
|
||||||
Footer: nodesContextRenderer(VtFooter),
|
Footer: nodesContextRenderer(VtFooter)
|
||||||
ImageDisplayer: nodesContextRenderer(VtCarousel),
|
|
||||||
VtFeaturedProducts: nodesContextRenderer(VtFeaturedProducts),
|
|
||||||
VtCategoryHighlight: nodesContextRenderer(VtCategoryHighlight),
|
|
||||||
VtBrand: nodesContextRenderer(VtBrand),
|
|
||||||
VtFeedback: nodesContextRenderer(VtFeedback),
|
|
||||||
VtFeedbackCard: nodesContextRenderer(VtFeedbackCard),
|
|
||||||
VtSubcription: nodesContextRenderer(VtSubcription),
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
export type ComponentName = keyof typeof componentMap
|
export type ComponentName = keyof typeof componentMap
|
||||||
|
|
||||||
// //maps key = componentName to value = props + children
|
// //maps key = componentName to value = props + children
|
||||||
// export type LayoutComponentNode = Record<string, LayoutComponentDefinition>
|
// export type LayoutComponentNode = Record<string, LayoutComponentDefinition>
|
||||||
export type LayoutComponentNode = {
|
export type LayoutComponentNode = { [K in ComponentName]: LayoutComponentDefinition }[ComponentName]
|
||||||
[K in ComponentName]: LayoutComponentDefinition
|
|
||||||
}[ComponentName]
|
|
||||||
|
|
@ -1,29 +1,11 @@
|
||||||
import fs from "fs"
|
import fs from "fs"
|
||||||
import path from "path"
|
import path from "path"
|
||||||
import { jsonFileNames } from "./devJsonFileNames"
|
import { jsonFileNames } from "./devJsonFileNames";
|
||||||
|
|
||||||
const fileName = jsonFileNames.namVibentec
|
const fileName = jsonFileNames.namVibentec;
|
||||||
|
|
||||||
async function readDesignFile() {
|
export async function loadDesignConfig() {
|
||||||
const filePath = path.join(process.cwd(), "config", fileName)
|
const filePath = path.join(process.cwd(), "config", fileName)
|
||||||
const fileData = await fs.promises.readFile(filePath, "utf-8")
|
const fileData = await fs.promises.readFile(filePath, "utf-8")
|
||||||
return JSON.parse(fileData)
|
return JSON.parse(fileData)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
export async function loadLayoutConfig() {
|
|
||||||
const config = await readDesignFile()
|
|
||||||
if (Array.isArray(config)) return config
|
|
||||||
return config.layout ?? []
|
|
||||||
}
|
|
||||||
|
|
||||||
export async function loadPageConfig(pageKey: string) {
|
|
||||||
const config = await readDesignFile()
|
|
||||||
if (Array.isArray(config)) return []
|
|
||||||
const pages = config.pages ?? {}
|
|
||||||
return pages[pageKey] ?? []
|
|
||||||
}
|
|
||||||
|
|
||||||
export async function loadDesignConfig() {
|
|
||||||
return loadLayoutConfig()
|
|
||||||
}
|
|
||||||
|
|
|
||||||
|
|
@ -13,6 +13,9 @@ module.exports = {
|
||||||
],
|
],
|
||||||
theme: {
|
theme: {
|
||||||
extend: {
|
extend: {
|
||||||
|
backgroundImage: {
|
||||||
|
'custom-gradient': 'linear-gradient(90deg, #E6EFFC 0%, #285A86 100%)',
|
||||||
|
},
|
||||||
transitionProperty: {
|
transitionProperty: {
|
||||||
width: "width margin",
|
width: "width margin",
|
||||||
height: "height",
|
height: "height",
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue