x
This commit is contained in:
Your Name committed
1 parent
e9f6e7201a
commit
7abbcfebd2
8 files changed
+405
-42
No files matched your search
@@ -93,6 +93,21 @@ export default async function CategoryPage({ params }: { params: Promise<{ id: s
|
||||
const category = categoryProductsResult.data.category
|
||||
const products = categoryProductsResult.data.data ?? []
|
||||
const categoryName = resolveLocalized(category.name, lang)
|
||||
const categoryImageUrl = category.imageUrl || getCategoryImage(categoryName)
|
||||
const layoutType = category.layoutType || 'split_showcase'
|
||||
|
||||
// Determine Product Grid Class based on layout archetype
|
||||
const getProductGridClass = () => {
|
||||
switch (layoutType) {
|
||||
case 'editorial_hero':
|
||||
return 'grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8 md:gap-10'
|
||||
case 'dense_catalog':
|
||||
return 'grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-4 md:gap-6'
|
||||
case 'split_showcase':
|
||||
default:
|
||||
return 'grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6 md:gap-8'
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-surface-page text-text-main">
|
||||
@@ -101,23 +116,92 @@ export default async function CategoryPage({ params }: { params: Promise<{ id: s
|
||||
)}
|
||||
{heroSections.length > 0 ? (
|
||||
<DynamicPageRenderer sections={heroSections} categories={categories} lang={lang} />
|
||||
) : (
|
||||
<section className="relative overflow-hidden bg-surface-card border-b border-line-primary/10">
|
||||
<div className="relative mx-auto max-w-7xl px-6 pt-32 pb-12 md:pt-32 md:pb-20 flex flex-col-reverse md:flex-row items-center gap-10 md:gap-16">
|
||||
<div className="flex-1 text-center md:text-left">
|
||||
<div className="mb-5 flex items-center justify-center md:justify-start gap-2 text-xs font-semibold uppercase tracking-widest text-muted-text">
|
||||
) : layoutType === 'editorial_hero' ? (
|
||||
/* ── Archetype 2: Editorial Hero Layout ── */
|
||||
<section className="relative overflow-hidden min-h-[380px] md:min-h-[460px] flex items-center justify-center border-b border-line-primary/10 bg-black">
|
||||
{categoryImageUrl && (
|
||||
<div className="absolute inset-0 z-0">
|
||||
<Image
|
||||
src={categoryImageUrl}
|
||||
alt={categoryName}
|
||||
fill
|
||||
unoptimized
|
||||
className="object-cover object-center filter brightness-[0.45] saturate-125 scale-105"
|
||||
/>
|
||||
<div className="absolute inset-0 bg-gradient-to-t from-black via-black/70 to-black/40" />
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="relative z-10 mx-auto max-w-4xl px-6 pt-32 pb-16 text-center space-y-5">
|
||||
<div className="flex items-center justify-center gap-2 text-xs font-semibold uppercase tracking-widest text-slate-300">
|
||||
<Link href="/" className="transition hover:text-brand-primary">Home</Link>
|
||||
<span>/</span>
|
||||
<Link href="/shop" className="transition hover:text-brand-primary">Shop</Link>
|
||||
<span>/</span>
|
||||
<span className="text-brand-primary font-bold">{categoryName}</span>
|
||||
</div>
|
||||
|
||||
<div className="inline-flex items-center gap-2 px-3.5 py-1 rounded-full text-[11px] font-bold uppercase tracking-widest bg-white/10 text-white border border-white/20 backdrop-blur-md">
|
||||
<span>Curated Aroma Collection</span>
|
||||
</div>
|
||||
|
||||
<h1 className="text-4xl font-serif font-bold text-white md:text-6xl tracking-tight leading-tight">
|
||||
{categoryName}
|
||||
</h1>
|
||||
|
||||
{category._count && (
|
||||
<p className="text-slate-300 text-sm md:text-base max-w-xl mx-auto font-light leading-relaxed">
|
||||
Discover {category._count.products} handcrafted scents and artisanal essences designed to elevate your living spaces.
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</section>
|
||||
) : layoutType === 'dense_catalog' ? (
|
||||
/* ── Archetype 3: Dense Catalog Layout ── */
|
||||
<section className="relative overflow-hidden bg-surface-card border-b border-line-primary/10 pt-28 pb-6 md:pt-32 md:pb-8">
|
||||
<div className="mx-auto max-w-7xl px-6 flex flex-col md:flex-row md:items-center justify-between gap-4">
|
||||
<div className="space-y-1.5">
|
||||
<div className="flex items-center gap-2 text-[11px] font-semibold uppercase tracking-wider text-muted-text">
|
||||
<Link href="/" className="transition hover:text-brand-primary">Home</Link>
|
||||
<span>/</span>
|
||||
<Link href="/shop" className="transition hover:text-brand-primary">Shop</Link>
|
||||
<span>/</span>
|
||||
<span className="text-text-main">{categoryName}</span>
|
||||
<span className="text-text-main font-bold">{categoryName}</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
<h1 className="text-2xl font-bold text-text-main sm:text-3xl tracking-tight">{categoryName}</h1>
|
||||
{category._count && (
|
||||
<span className="px-2.5 py-0.5 rounded-full text-xs font-mono font-bold bg-brand-primary/10 text-brand-primary border border-brand-primary/20">
|
||||
{category._count.products} items
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-xs text-muted-text">
|
||||
High-Density Catalog View
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
) : (
|
||||
/* ── Archetype 1: Split Showcase Layout (Default) ── */
|
||||
<section className="relative overflow-hidden bg-surface-card border-b border-line-primary/10">
|
||||
<div className="relative mx-auto max-w-7xl px-6 pt-32 pb-12 md:pt-32 md:pb-20 flex flex-col-reverse md:flex-row items-center gap-10 md:gap-16">
|
||||
<div className="flex-1 text-center md:text-left space-y-4">
|
||||
<div className="flex items-center justify-center md:justify-start gap-2 text-xs font-semibold uppercase tracking-widest text-muted-text">
|
||||
<Link href="/" className="transition hover:text-brand-primary">Home</Link>
|
||||
<span>/</span>
|
||||
<Link href="/shop" className="transition hover:text-brand-primary">Shop</Link>
|
||||
<span>/</span>
|
||||
<span className="text-text-main font-bold">{categoryName}</span>
|
||||
</div>
|
||||
<div>
|
||||
<h1 className="text-4xl font-semibold text-text-main md:text-6xl">{categoryName}</h1>
|
||||
{category._count && <p className="mt-3 text-muted-text text-sm">{category._count.products} products available in this collection</p>}
|
||||
</div>
|
||||
<h1 className="text-4xl font-semibold text-text-main md:text-6xl">{categoryName}</h1>
|
||||
{category._count && <p className="mt-4 text-muted-text">{category._count.products} products available</p>}
|
||||
</div>
|
||||
<div className="relative w-48 h-48 md:w-72 md:h-72 shrink-0 rounded-3xl overflow-hidden shadow-lg border border-line-primary/5">
|
||||
<Image
|
||||
src={category.imageUrl || getCategoryImage(categoryName)}
|
||||
src={categoryImageUrl}
|
||||
alt={categoryName}
|
||||
fill
|
||||
unoptimized
|
||||
@@ -129,7 +213,7 @@ export default async function CategoryPage({ params }: { params: Promise<{ id: s
|
||||
)}
|
||||
|
||||
<div className="mx-auto max-w-7xl space-y-10 px-6 py-12">
|
||||
<div className="flex flex-wrap gap-3">
|
||||
<div className={`flex flex-wrap gap-3 ${layoutType === 'editorial_hero' ? 'justify-center' : 'justify-start'}`}>
|
||||
{!categoriesResult.ok && (
|
||||
<span className="rounded-full border border-rose-100 bg-surface-card px-5 py-2 text-xs font-bold uppercase tracking-widest text-rose-500">
|
||||
Categories unavailable
|
||||
@@ -160,7 +244,7 @@ export default async function CategoryPage({ params }: { params: Promise<{ id: s
|
||||
<Link href="/shop" className="mt-4 inline-flex font-semibold text-brand-primary">Back to Shop</Link>
|
||||
</div>
|
||||
) : (
|
||||
<div className="grid grid-cols-1 gap-8 md:grid-cols-3">
|
||||
<div className={getProductGridClass()}>
|
||||
{products.map((product) => <ProductCard key={product.id} product={product} />)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
Reference in new issue
Block a user