Compare commits

..

No commits in common. "e0bb44b65af3cee51f331ed410ad92679773a3f3" and "f6f1f6286ca9ca39f425e282730b444c3ee7e20e" have entirely different histories.

5 changed files with 384 additions and 351 deletions

View File

@ -103,8 +103,8 @@
"productCard": { "productCard": {
"badgeText": "Bestseller", "badgeText": "Bestseller",
"card": "relative flex flex-col items-center bg-transparent shadow-none border-none p-0", "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" }, "badge": { "container": "absolute top-4 left-4", "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" }, "thumbnail": { "className": "rounded-2xl bg-white h-[320px] object-contain", "size": "full" },
"content": "flex flex-col items-center justify-start text-center p-0 mt-6", "content": "flex flex-col items-center justify-start text-center p-0 mt-6",
"title": "text-[#003F31] text-[28px] font-semibold", "title": "text-[#003F31] text-[28px] font-semibold",
"description": "order-3 text-[#003f31b3]", "description": "order-3 text-[#003f31b3]",

View File

@ -1,128 +1,385 @@
{ [
"layout": [ {
{ "Header": {
"Header": { "config": {
"config": { "sticky": true
"sticky": true },
"children": [
{
"Banner": {
"config": {
"variant": "nav",
"className": "h-12 bg-[#e6c981] text-black gap-12",
"center": [
{
"Link": {
"config": {
"label": "BLACK FRIDAY",
"href": "/",
"className": "font-bold text-[1rem] flex items-center gap-1"
}
}
},
{
"Link": {
"config": {
"label": "Up to 55% off Bundles",
"href": "/",
"className": "text-[1rem] flex items-center gap-1"
}
}
},
{
"Link": {
"config": {
"label": "SHOP NOW",
"href": "/",
"className": "font-bold text-[1rem] flex items-center gap-1 underline"
}
}
}
]
}
}
}, },
"children": [ {
"Nav": {
"config": {
"className": "h-24 bg-[#1f3521] text-white gap-12",
"left": [
{
"Logo": {
"config": {
"src": "/drsquatch-logo.webp",
"alt": "MyShop",
"className": "h-auto w-40 mr-24",
"objectFit": "contain"
}
}
},
{
"Link": {
"config": {
"label": "SUBCRIBE",
"href": "/",
"className": "font-bold text-[1rem] text-white flex items-center mr-8 gap-1 hover:underline hover:text-white"
}
}
},
{
"Link": {
"config": {
"label": "REWARD",
"href": "/",
"className": "font-bold text-[1rem] text-white flex items-center mr-8 gap-1 hover:underline hover:text-white"
}
}
},
{
"VtMegaMenu": {
"config": {
"navLabel": {
"text": "SHOP",
"className": "font-bold text-[1rem] flex items-center mr-8 gap-1 hover:bg-transparent hover:underline hover:text-white"
}
}
}
},
{
"VtMegaMenu": {
"config": {
"navLabel": {
"text": "OUR STORY",
"className": "font-bold text-[1rem] text-white flex items-center hover:bg-transparent hover:underline hover:text-white"
}
}
}
}
],
"right": [
{
"VtCountryCodeSelect": {
"config": {
"trigger": {
"className": "w-auto font-bold text-[13px] text-white flex justify-start items-center gap-1 hover:text-[#009b93] bg-transparent shadow-none hover:bg-transparent",
"isFlag": true
}
}
}
},
{
"Button": {
"config": {
"icon": "User",
"className": "shadow-none bg-transparent text-white hover:text-black"
}
}
},
{
"VtCartButton": {
"config": {
"icon": "ShoppingCart",
"className": "shadow-none bg-transparent text-black w-[50px]"
}
}
}
]
}
}
}
]
}
},
{
"Hero": {
"config": {
"className": "h-[35rem]",
"ImageDisplayer": {
"config": {
"duration": 0,
"images": [
"./drsquatch-banner.jpg"
],
"links": [
"/account"
]
}
},
"left": [
{ {
"Banner": { "VtCtaBanner": {
"config": { "config": {
"variant": "nav", "variant": "default",
"className": "h-12 bg-[#e6c981] text-black gap-12", "className": "left-[120px] top-[120px] bg-transparent border-none text-white text-center",
"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",
"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"
}
}
}
}
}
},
{
"CartMismatchBanner": {
"config": {
"show": true
}
}
},
{
"FreeShippingPriceNudge": {
"config": {
"variant": "popup"
}
}
},
{
"PropsChildren": {}
},
{
"Footer": {
"config": {
"className": "content-container border-none bg-[#1f3621] flex w-full border justify-between pb-8 gap-10 pt-16 px-[120px]",
"leftClassName": "flex ml-6 gap-x-24",
"centerClassName": "flex",
"rightClassName": "flex",
"left": [
{
"VtMenuItem": {
"config": {
"title": "Help",
"className": "flex flex-col gap-y-2 text-[16px] font-semibold text-white gap-8",
"itemClassName": "text-[14px] font-[400] mt-3",
"items": [
{ {
"Link": { "text": "FAQ",
"config": { "href": "/"
"label": "BLACK FRIDAY",
"href": "/",
"className": "font-bold text-[1rem] flex items-center gap-1"
}
}
}, },
{ {
"Link": { "text": "Track my order",
"config": { "href": "/categories/shoes"
"label": "Up to 55% off Bundles",
"href": "/",
"className": "text-[1rem] flex items-center gap-1"
}
}
}, },
{ {
"Link": { "text": "Placeholder",
"config": { "href": "/categories/accessories"
"label": "SHOP NOW", },
"href": "/", {
"className": "font-bold text-[1rem] flex items-center gap-1 underline" "text": "Placeholder",
} "href": "/categories/accessories"
} },
{
"text": "Placeholder",
"href": "/categories/accessories"
},
{
"text": "Placeholder",
"href": "/categories/accessories"
} }
] ]
} }
} }
}, },
{ {
"Nav": { "VtMenuItem": {
"config": { "config": {
"className": "h-24 bg-[#1f3521] text-white gap-12", "title": "Shop",
"left": [ "className": "flex flex-col gap-y-2 text-[16px] font-semibold text-white",
"itemClassName": "text-[14px] font-[400] flex items-center mt-3",
"items": [
{ {
"Logo": { "text": "Twitter",
"config": { "href": "/"
"src": "/drsquatch-logo.webp",
"alt": "MyShop",
"className": "h-auto w-40 mr-24",
"objectFit": "contain"
}
}
}, },
{ {
"Link": { "text": "Facebook",
"config": { "href": "/categories/shoes"
"label": "SUBCRIBE",
"href": "/",
"className": "font-bold text-[1rem] text-white flex items-center mr-8 gap-1 hover:underline hover:text-white"
}
}
}, },
{ {
"Link": { "text": "Pinterest",
"config": { "href": "/categories/accessories"
"label": "REWARD",
"href": "/",
"className": "font-bold text-[1rem] text-white flex items-center mr-8 gap-1 hover:underline hover:text-white"
}
}
}, },
{ {
"VtMegaMenu": { "text": "Placeholder",
"config": { "href": "/categories/accessories"
"navLabel": {
"text": "SHOP",
"className": "font-bold text-[1rem] flex items-center mr-8 gap-1 hover:bg-transparent hover:underline hover:text-white"
}
}
}
}, },
{ {
"VtMegaMenu": { "text": "Placeholder",
"config": { "href": "/categories/accessories"
"navLabel": { },
"text": "OUR STORY", {
"className": "font-bold text-[1rem] text-white flex items-center hover:bg-transparent hover:underline hover:text-white" "text": "Placeholder",
} "href": "/categories/accessories"
} },
} {
"text": "Placeholder",
"href": "/categories/accessories"
} }
], ]
"right": [ }
}
},
{
"VtMenuItem": {
"config": {
"title": "Info",
"className": "flex flex-col gap-y-2 text-[16px] font-semibold text-white",
"itemClassName": "text-[14px] font-[400] w-[200px] mt-3",
"items": [
{ {
"VtCountryCodeSelect": { "text": "The Squatch Difference",
"config": { "href": "/"
"trigger": {
"className": "w-auto font-bold text-[13px] text-white flex justify-start items-center gap-1 hover:text-[#009b93] bg-transparent shadow-none hover:bg-transparent",
"isFlag": true
}
}
}
}, },
{ {
"Button": { "text": "Why Natural Products",
"config": { "href": "/categories/shoes"
"icon": "User",
"className": "shadow-none bg-transparent text-white hover:text-black"
}
}
}, },
{ {
"VtCartButton": { "text": "No Harmful Ingredients",
"config": { "href": "/categories/accessories"
"icon": "ShoppingCart", }
"className": "shadow-none bg-transparent text-black w-[50px]" ]
} }
} }
}
],
"center": [
{
"Logo": {
"config": {
"src": "/b-corp-logo.webp",
"alt": "MyShop",
"className": "h-auto w-[90px] mr-24",
"objectFit": "contain"
}
}
}
],
"right": [
{
"VtFooterSignUp": {
"config": {
"title": "Don't miss out on hot deals! Sign up and get up to 30% off.",
"className": "max-w-[760px]",
"titleClassName": "text-white text-[18px]",
"formClassName": "mt-2 w-full",
"inputClassName": "w-full",
"buttonClassName": "bg-[#C4622C] w-[90px]",
"socialsClassName": "mt-4 gap-8",
"socials": [
{
"icon": "Twitter",
"href": "/",
"className": "w-5 h-5 text-white"
},
{
"icon": "Twitter",
"href": "/",
"className": "w-5 h-5 text-white"
},
{
"icon": "Twitter",
"href": "/",
"className": "w-5 h-5 text-white"
},
{
"icon": "Twitter",
"href": "/",
"className": "w-5 h-5 text-white"
} }
] ]
} }
@ -130,203 +387,29 @@
} }
] ]
} }
}, }
{ "PropsChildren": {} }, },
{ {
"Footer": { "VtFooterBottom": {
"config": { "config": {
"className": "content-container border-none bg-[#1f3621] flex w-full border justify-between pb-8 gap-10 pt-16 px-[120px]", "className": "text-white text-[14px] font-[400] bg-[#1f3621] flex items-center justify-center",
"leftClassName": "flex ml-6 gap-x-24", "text": "©2025 Vibentec IT. All rights reserved",
"centerClassName": "flex", "linksClassName": "flex items-center text-orange-500 mt-2 pl-2",
"rightClassName": "flex", "links": [
"left": [ {
{ "label": "Privacy Policy",
"VtMenuItem": { "href": "/"
"config": { },
"title": "Help", {
"className": "flex flex-col gap-y-2 text-[16px] font-semibold text-white gap-8", "label": "Terms of Service",
"itemClassName": "text-[14px] font-[400] mt-3", "href": "/categories/shoes"
"items": [ },
{ "text": "FAQ", "href": "/" }, {
{ "text": "Track my order", "href": "/categories/shoes" }, "label": "Cookie Policy",
{ "text": "Placeholder", "href": "/categories/accessories" }, "href": "/categories/accessories"
{ "text": "Placeholder", "href": "/categories/accessories" }, }
{ "text": "Placeholder", "href": "/categories/accessories" }, ]
{ "text": "Placeholder", "href": "/categories/accessories" }
]
}
}
},
{
"VtMenuItem": {
"config": {
"title": "Shop",
"className": "flex flex-col gap-y-2 text-[16px] font-semibold text-white",
"itemClassName": "text-[14px] font-[400] flex items-center mt-3",
"items": [
{ "text": "Twitter", "href": "/" },
{ "text": "Facebook", "href": "/categories/shoes" },
{ "text": "Pinterest", "href": "/categories/accessories" },
{ "text": "Placeholder", "href": "/categories/accessories" },
{ "text": "Placeholder", "href": "/categories/accessories" },
{ "text": "Placeholder", "href": "/categories/accessories" },
{ "text": "Placeholder", "href": "/categories/accessories" }
]
}
}
},
{
"VtMenuItem": {
"config": {
"title": "Info",
"className": "flex flex-col gap-y-2 text-[16px] font-semibold text-white",
"itemClassName": "text-[14px] font-[400] w-[200px] mt-3",
"items": [
{ "text": "The Squatch Difference", "href": "/" },
{ "text": "Why Natural Products", "href": "/categories/shoes" },
{ "text": "No Harmful Ingredients", "href": "/categories/accessories" }
]
}
}
}
],
"center": [
{
"Logo": {
"config": {
"src": "/b-corp-logo.webp",
"alt": "MyShop",
"className": "h-auto w-[90px] mr-24",
"objectFit": "contain"
}
}
}
],
"right": [
{
"VtFooterSignUp": {
"config": {
"title": "Don't miss out on hot deals! Sign up and get up to 30% off.",
"className": "max-w-[760px]",
"titleClassName": "text-white text-[18px]",
"formClassName": "mt-2 w-full",
"inputClassName": "w-full",
"buttonClassName": "bg-[#C4622C] w-[90px]",
"socialsClassName": "mt-4 gap-8",
"socials": [
{ "icon": "Twitter", "href": "/", "className": "w-5 h-5 text-white" },
{ "icon": "Twitter", "href": "/", "className": "w-5 h-5 text-white" },
{ "icon": "Twitter", "href": "/", "className": "w-5 h-5 text-white" },
{ "icon": "Twitter", "href": "/", "className": "w-5 h-5 text-white" }
]
}
}
}
]
}
}
},
{
"VtFooterBottom": {
"config": {
"className": "text-white text-[14px] font-[400] bg-[#1f3621] flex items-center justify-center",
"text": "©2025 Vibentec IT. All rights reserved",
"linksClassName": "flex items-center text-orange-500 mt-2 pl-2",
"links": [
{ "label": "Privacy Policy", "href": "/" },
{ "label": "Terms of Service", "href": "/categories/shoes" },
{ "label": "Cookie Policy", "href": "/categories/accessories" }
]
}
} }
} }
],
"pages": {
"Home": [
{
"Hero": {
"config": {
"className": "h-[35rem]",
"ImageDisplayer": {
"config": {
"duration": 0,
"images": ["./drsquatch-banner.jpg"],
"links": ["/account"]
}
},
"left": [
{
"VtCtaBanner": {
"config": {
"variant": "default",
"className": "left-[120px] top-[120px] bg-transparent border-none text-white text-center",
"tagTextClassName": "text-white bg-transparent",
"titleTextClassName": "text-white font-bold leading-normal text-[30px]",
"descriptionTextClassName": "text-white text-[1rem] w-[300px] ml-[6.6rem]",
"buttonTextClassName": "text-white bg-orange-500 w-[300px]",
"tagText": "ALL NEW!",
"titleText": "LUMBERJACK LODGE",
"descriptionText": "Step into the lodge with the warm, sweet scent of maple and vanilla.",
"buttonText": "SHOP NOW"
}
}
}
],
"center": [],
"right": []
}
}
},
{
"VtFeaturedProducts": {
"config": {
"title": "drsquatch-best-seller",
"styles": {
"container": "content-container py-12 px-[100px] small:py-24",
"header": {
"container": "flex justify-center mb-8",
"title": "text-[28px] font-bold text-[#1f3521]",
"isShowViewAll": false
},
"list": "grid grid-cols-2 small:grid-cols-3 gap-x-6 gap-y-24 small:gap-y-36",
"productCard": {
"card": "shadow-none border-none",
"className": "relative overflow-hidden rounded-2xl bg-white shadow-elevation-card-rest h-full flex flex-col",
"badgeText": "LIMITED EDITION",
"badge": {
"container": "absolute z-[1] top-0 left-0 pt-4",
"text": "uppercase px-4 py-2 bg-[#3B6F47] text-white"
},
"thumbnail": { "className": "rounded-none h-[300px] shadow-none", "size": "full" },
"content": " flex flex-col flex-1",
"title": "mt-2 text-[#1f3521] text-[22px] font-bold",
"price": "mt-2 text-[#3B6F47] font-bold text-[20px] flex gap-3 flex-row-reverse justify-end",
"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"
}
}
}
}
}
},
{ "CartMismatchBanner": { "config": { "show": true } } },
{ "FreeShippingPriceNudge": { "config": { "variant": "popup" } } }
],
"Product": [
{ "VtFeaturedProducts": { "config": { "title": "drsquatch-best-seller" } } }
],
"StorePage": [
{ "VtFeaturedProducts": { "config": { "title": "drsquatch-best-seller" } } }
]
} }
} ]

View File

@ -352,38 +352,6 @@
} }
} }
}, },
{
"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"
}
}
}
}
}
},
{ "CartMismatchBanner": { "config": { "show": true } } }, { "CartMismatchBanner": { "config": { "show": true } } },
{ "FreeShippingPriceNudge": { "config": { "variant": "popup" } } } { "FreeShippingPriceNudge": { "config": { "variant": "popup" } } }
] ]

View File

@ -22,18 +22,12 @@ const VtThumbnail: React.FC<ThumbnailProps> = ({
className, className,
"data-testid": dataTestid, "data-testid": dataTestid,
}) => { }) => {
const imageUrls = images?.map((i: any) => i.url) || [] const initialImage = thumbnail || images?.[0]?.url
const initialImage = thumbnail || imageUrls?.[0]
let hoverImage: string | undefined = initialImage
if (imageUrls.length > 1) {
hoverImage = imageUrls.find((u) => u !== initialImage)
}
return ( return (
<Container <Container
className={clx( 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", "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, className,
{ {
"aspect-[11/14]": isFeatured, "aspect-[11/14]": isFeatured,
@ -47,18 +41,7 @@ const VtThumbnail: React.FC<ThumbnailProps> = ({
)} )}
data-testid={dataTestid} data-testid={dataTestid}
> >
<ImageOrPlaceholder <ImageOrPlaceholder image={initialImage} size={size} />
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> </Container>
) )
} }
@ -66,20 +49,19 @@ const VtThumbnail: React.FC<ThumbnailProps> = ({
const ImageOrPlaceholder = ({ const ImageOrPlaceholder = ({
image, image,
size, size,
className, }: Pick<ThumbnailProps, "size"> & { image?: string }) => {
}: Pick<ThumbnailProps, "size"> & { image?: string; className?: string }) => {
return image ? ( return image ? (
<Image <Image
src={image} src={image}
alt="Thumbnail" alt="Thumbnail"
className={clx("absolute inset-0 object-cover object-center", className)} className="absolute inset-0 object-cover object-center"
draggable={false} draggable={false}
quality={50} quality={50}
sizes="(max-width: 576px) 280px, (max-width: 768px) 360px, (max-width: 992px) 480px, 800px" sizes="(max-width: 576px) 280px, (max-width: 768px) 360px, (max-width: 992px) 480px, 800px"
fill fill
/> />
) : ( ) : (
<div className={clx("w-full h-full absolute inset-0 flex items-center justify-center", className)}> <div className="w-full h-full absolute inset-0 flex items-center justify-center">
<PlaceholderImage size={size === "small" ? 16 : 24} /> <PlaceholderImage size={size === "small" ? 16 : 24} />
</div> </div>
) )

View File

@ -2,7 +2,7 @@ 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.nam3Bear
async function readDesignFile() { async function readDesignFile() {
const filePath = path.join(process.cwd(), "config", fileName) const filePath = path.join(process.cwd(), "config", fileName)