x

apps/spa/src/pages/CategoryPage.tsx

@@ -7,6 +7,7 @@ import ProductCard from '../components/ProductCard'
 import DynamicPageRenderer from '../components/DynamicPageRenderer'
 import { API_BASE, getCategoryImage, type Category, type Product, type PageSection } from '../types'
 import { getLocalizedField } from '../utils/localization'
+import { Sparkles, Layers, Grid3X3, ArrowRight } from 'lucide-react'
 
 export default function CategoryPage() {
   const { id } = useParams<{ id: string }>()
@@ -101,6 +102,20 @@ export default function CategoryPage() {
 
   const categoryName = getLocalizedField(category?.name, lang)
   const categoryImageUrl = category?.imageUrl || (categoryName ? 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-6 md:gap-10'
+      case 'dense_catalog':
+        return 'grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-3 md:gap-4'
+      case 'split_showcase':
+      default:
+        return 'grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 md:gap-6'
+    }
+  }
 
   return (
     <div className="min-h-screen bg-surface-page text-text-main">
@@ -114,7 +129,7 @@ export default function CategoryPage() {
 
       <Navbar categories={categories} />
 
-      {/* Hero Banner for Category */}
+      {/* Hero / Banner Area */}
       {heroSections.length > 0 ? (
         <div className="pt-20">
           <DynamicPageRenderer
@@ -123,12 +138,97 @@ export default function CategoryPage() {
             categoriesLoading={loading}
           />
         </div>
+      ) : 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-white/10 bg-night-950">
+          {/* Immersive Background Image with Dark Gradient Overlays */}
+          {categoryImageUrl && (
+            <div className="absolute inset-0 z-0">
+              <img
+                src={categoryImageUrl}
+                alt={categoryName}
+                className="w-full h-full object-cover object-center filter brightness-[0.45] saturate-125 scale-105 transform transition-transform duration-1000"
+              />
+              <div className="absolute inset-0 bg-gradient-to-t from-night-950 via-night-950/70 to-night-950/40" />
+              <div className="absolute inset-0 bg-radial-gradient from-transparent via-night-950/40 to-night-950/90" />
+            </div>
+          )}
+
+          <div className="relative z-10 mx-auto max-w-4xl px-6 pt-32 pb-16 text-center space-y-5 animate-fade-in">
+            {/* Breadcrumb */}
+            <div className="flex items-center justify-center gap-2 text-xs font-semibold uppercase tracking-widest text-slate-300/80">
+              <Link to="/" className="transition hover:text-amber-300">{t('nav.home', 'Home')}</Link>
+              <span>/</span>
+              <Link to="/shop" className="transition hover:text-amber-300">{t('nav.shop', 'Shop')}</Link>
+              <span>/</span>
+              <span className="text-amber-300 font-bold">{categoryName || '...'}</span>
+            </div>
+
+            {/* Exclusive Badge */}
+            <div className="inline-flex items-center gap-2 px-3.5 py-1 rounded-full text-[11px] font-bold uppercase tracking-widest bg-amber-500/10 text-amber-300 border border-amber-500/30 backdrop-blur-md shadow-lg shadow-amber-500/10">
+              <Sparkles className="w-3.5 h-3.5 text-amber-300" />
+              <span>Curated Aroma Collection</span>
+            </div>
+
+            {/* Title */}
+            <h1 className="text-4xl sm:text-5xl md:text-6xl font-serif font-bold text-white tracking-tight leading-tight">
+              {loading ? (
+                <div className="h-12 w-64 bg-white/10 animate-pulse rounded-xl mx-auto" />
+              ) : (
+                categoryName
+              )}
+            </h1>
+
+            {/* Subtitle & Item Count */}
+            {!loading && category?._count !== undefined && (
+              <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-night-900/80 border-b border-white/5 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-slate-400">
+                <Link to="/" className="transition hover:text-cyan-glow">{t('nav.home', 'Home')}</Link>
+                <span>/</span>
+                <Link to="/shop" className="transition hover:text-cyan-glow">{t('nav.shop', 'Shop')}</Link>
+                <span>/</span>
+                <span className="text-cyan-glow font-bold">{categoryName || '...'}</span>
+              </div>
+
+              <div className="flex items-center gap-3">
+                <h1 className="text-2xl sm:text-3xl font-extrabold text-white tracking-tight">
+                  {loading ? (
+                    <div className="h-8 w-40 bg-white/10 animate-pulse rounded-lg" />
+                  ) : (
+                    categoryName
+                  )}
+                </h1>
+                {!loading && category?._count !== undefined && (
+                  <span className="px-2.5 py-0.5 rounded-full text-xs font-mono font-bold bg-cyan-glow/10 text-cyan-glow border border-cyan-glow/20">
+                    {category._count.products} items
+                  </span>
+                )}
+              </div>
+            </div>
+
+            <div className="flex items-center gap-2 text-xs text-slate-400">
+              <Grid3X3 className="w-4 h-4 text-slate-400" />
+              <span>High-Density Catalog View</span>
+            </div>
+          </div>
+        </section>
       ) : (
+        /* ── Archetype 1: Split Showcase Layout (Default) ── */
         <section className="relative overflow-hidden bg-night-900/60 border-b border-white/5">
           <div className="relative mx-auto max-w-7xl px-6 pt-32 pb-12 md:pt-36 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="flex-1 text-center md:text-left space-y-4">
               {/* Breadcrumb */}
-              <div className="mb-4 flex items-center justify-center md:justify-start gap-2 text-xs font-semibold uppercase tracking-widest text-slate-400">
+              <div className="flex items-center justify-center md:justify-start gap-2 text-xs font-semibold uppercase tracking-widest text-slate-400">
                 <Link to="/" className="transition hover:text-cyan-glow">{t('nav.home', 'Home')}</Link>
                 <span>/</span>
                 <Link to="/shop" className="transition hover:text-cyan-glow">{t('nav.shop', 'Shop')}</Link>
@@ -136,29 +236,36 @@ export default function CategoryPage() {
                 <span className="text-cyan-glow font-bold">{categoryName || '...'}</span>
               </div>
               
-              <h1 className="text-3xl sm:text-4xl md:text-5xl font-extrabold text-white tracking-tight">
-                {loading ? (
-                  <div className="h-10 w-48 bg-white/10 animate-pulse rounded-lg mx-auto md:mx-0" />
-                ) : (
-                  categoryName
-                )}
-              </h1>
+              <div className="space-y-2">
+                <div className="inline-flex items-center gap-1.5 px-3 py-0.5 rounded-full text-[11px] font-bold uppercase tracking-wider bg-cyan-glow/10 text-cyan-glow border border-cyan-glow/20">
+                  <Layers className="w-3 h-3 text-cyan-glow" />
+                  <span>Category Showcase</span>
+                </div>
+                <h1 className="text-3xl sm:text-4xl md:text-5xl font-extrabold text-white tracking-tight">
+                  {loading ? (
+                    <div className="h-10 w-48 bg-white/10 animate-pulse rounded-lg mx-auto md:mx-0" />
+                  ) : (
+                    categoryName
+                  )}
+                </h1>
+              </div>
 
               {!loading && category?._count !== undefined && (
-                <p className="text-slate-400 text-sm mt-3">
-                  {category._count.products} {t('categories.itemCount', 'products available')}
+                <p className="text-slate-400 text-sm">
+                  {category._count.products} {t('categories.itemCount', 'products available in this collection')}
                 </p>
               )}
             </div>
 
             {categoryImageUrl && (
-              <div className="relative w-48 h-48 md:w-64 md:h-64 shrink-0 rounded-3xl overflow-hidden shadow-2xl border border-white/10 bg-night-950">
+              <div className="relative w-48 h-48 md:w-64 md:h-64 shrink-0 rounded-3xl overflow-hidden shadow-2xl border border-white/10 bg-night-950 group">
                 <img
                   src={categoryImageUrl}
                   alt={categoryName}
-                  className="absolute inset-0 w-full h-full object-cover"
+                  className="absolute inset-0 w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"
                   onError={(e) => { (e.target as HTMLImageElement).style.display = 'none' }}
                 />
+                <div className="absolute inset-0 bg-gradient-to-t from-night-950/60 via-transparent to-transparent pointer-events-none" />
               </div>
             )}
           </div>
@@ -166,9 +273,9 @@ export default function CategoryPage() {
       )}
 
       {/* Products & Category Navigation */}
-      <div className="mx-auto max-w-7xl space-y-10 px-6 py-12">
-        {/* Other Category Pills */}
-        <div className="flex flex-wrap gap-2.5">
+      <div className="mx-auto max-w-7xl space-y-8 px-6 py-10 md:py-12">
+        {/* Category Pills Navigation */}
+        <div className={`flex flex-wrap gap-2 ${layoutType === 'editorial_hero' ? 'justify-center' : 'justify-start'}`}>
           {categories.map((cat) => {
             const catItemName = getLocalizedField(cat.name, lang)
             const isActive = String(cat.id) === String(id)
@@ -179,7 +286,9 @@ export default function CategoryPage() {
                 to={`/category/${cat.id}`}
                 className={`px-4 py-2 rounded-xl text-xs font-bold uppercase tracking-wider transition-all duration-200 border cursor-pointer ${
                   isActive
-                    ? 'bg-cyan-glow text-night-950 border-cyan-glow shadow-md shadow-cyan-glow/20 font-black'
+                    ? layoutType === 'editorial_hero'
+                      ? 'bg-amber-400 text-night-950 border-amber-400 shadow-lg shadow-amber-500/20 font-black'
+                      : 'bg-cyan-glow text-night-950 border-cyan-glow shadow-md shadow-cyan-glow/20 font-black'
                     : 'bg-night-900/80 text-slate-400 border-white/10 hover:border-cyan-glow/40 hover:text-white'
                 }`}
               >
@@ -198,24 +307,25 @@ export default function CategoryPage() {
             </Link>
           </div>
         ) : loading ? (
-          <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 md:gap-6">
-            {Array.from({ length: 8 }).map((_, i) => (
+          <div className={getProductGridClass()}>
+            {Array.from({ length: layoutType === 'dense_catalog' ? 10 : 8 }).map((_, i) => (
               <div key={i} className="rounded-2xl bg-white/5 animate-pulse h-80 border border-white/5" />
             ))}
           </div>
         ) : products.length === 0 ? (
-          <div className="text-center py-20 bg-night-900/40 rounded-2xl border border-white/5 space-y-3">
+          <div className="text-center py-20 bg-night-900/40 rounded-2xl border border-white/5 space-y-4">
             <p className="text-4xl">📦</p>
             <p className="text-slate-300 font-medium text-base">
               {t('category.noProducts', 'No products in this category yet.')}
             </p>
-            <Link to="/shop" className="text-cyan-glow font-bold text-xs uppercase tracking-wider hover:underline inline-block pt-2">
-              &larr; {t('shop.exploreAllProducts', 'Explore All Products')}
+            <Link to="/shop" className="inline-flex items-center gap-2 px-5 py-2.5 rounded-xl bg-white/5 hover:bg-white/10 text-cyan-glow font-bold text-xs uppercase tracking-wider transition-all">
+              <span>{t('shop.exploreAllProducts', 'Explore All Products')}</span>
+              <ArrowRight className="w-3.5 h-3.5" />
             </Link>
           </div>
         ) : (
           <div>
-            <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 md:gap-6">
+            <div className={getProductGridClass()}>
               {products.slice(0, displayCount).map((p) => (
                 <ProductCard key={p.id} product={p} />
               ))}