Rename ssr to website, website to spa, add spa nginx config

apps/spa/src/pages/AboutPage.tsx

@@ -0,0 +1,144 @@
+import { useEffect, useState } from 'react'
+import { Link } from 'react-router-dom'
+import Navbar from '../components/Navbar'
+import Footer from '../components/Footer'
+import { API_BASE, type Category } from '../types'
+
+const PILLARS = [
+  {
+    icon: '🌱',
+    title: 'Pure Origins',
+    desc: 'Every extract is sourced directly from certified organic farms in Northern Thailand, Vietnam, and Southern France. We work exclusively with small-batch artisan growers.',
+  },
+  {
+    icon: '⚗️',
+    title: 'Artisan Craft',
+    desc: 'Each formula is cold-extracted and hand-blended in our Bangkok studio. No heat processing means every aromatic molecule remains intact and therapeutically potent.',
+  },
+  {
+    icon: '♾️',
+    title: 'Zero Compromise',
+    desc: 'No synthetic fragrance. No parabens. No animal testing. Our commitment to clean formulation is absolute — what touches your senses should honour your wellbeing.',
+  },
+]
+
+const STATS = [
+  { value: '45+', label: 'Unique Scents' },
+  { value: '5', label: 'Product Lines' },
+  { value: '2019', label: 'Founded' },
+  { value: '100%', label: 'Natural Extracts' },
+]
+
+export default function AboutPage() {
+  const [categories, setCategories] = useState<Category[]>([])
+
+  useEffect(() => {
+    fetch(`${API_BASE}/categories`).then(r => r.json()).then(setCategories).catch(console.error)
+  }, [])
+
+  return (
+    <div className="min-h-screen">
+      <Navbar categories={categories} />
+
+      {/* Hero */}
+      <section className="relative min-h-[60vh] flex items-center justify-center overflow-hidden pt-24">
+        <div className="absolute inset-0 bg-gradient-to-br from-night-800/60 via-night-900 to-night-900" />
+        <div className="absolute inset-0 opacity-10"
+          style={{ backgroundImage: 'radial-gradient(circle at 30% 50%, rgba(102,252,241,0.3) 0%, transparent 60%), radial-gradient(circle at 80% 20%, rgba(69,162,158,0.2) 0%, transparent 50%)' }}
+        />
+        <div className="relative z-10 text-center px-6 max-w-3xl mx-auto space-y-6 animate-fade-in">
+          <p className="text-cyan-glow uppercase tracking-[0.4em] text-xs font-semibold opacity-70">Our Story</p>
+          <h1 className="text-6xl font-bold leading-tight">
+            Born from a passion for <span className="text-transparent bg-clip-text bg-gradient-to-r from-cyan-glow to-night-700 italic font-serif">stillness</span>
+          </h1>
+          <p className="text-slate-300 text-lg leading-relaxed">
+            iRelax began in 2019 as a one-person studio in Bangkok, crafting small batches of botanical aroma blends for friends and family. What started as a personal journey toward calm became a philosophy — that our environment shapes how we feel, think, and rest.
+          </p>
+        </div>
+      </section>
+
+      {/* Stats Band */}
+      <section className="py-12 px-6 bg-white/3 border-y border-white/5">
+        <div className="max-w-4xl mx-auto grid grid-cols-2 md:grid-cols-4 gap-8 text-center">
+          {STATS.map(s => (
+            <div key={s.label} className="space-y-1">
+              <div className="text-4xl font-bold text-cyan-glow">{s.value}</div>
+              <div className="text-xs uppercase tracking-widest text-slate-400">{s.label}</div>
+            </div>
+          ))}
+        </div>
+      </section>
+
+      {/* Mission Section */}
+      <section className="py-24 px-6">
+        <div className="max-w-6xl mx-auto grid md:grid-cols-2 gap-16 items-center">
+          <div className="space-y-6">
+            <p className="text-cyan-glow uppercase tracking-[0.3em] text-xs font-semibold opacity-70">Our Mission</p>
+            <h2 className="text-4xl font-bold leading-tight">
+              Transforming spaces into sanctuaries of peace
+            </h2>
+            <p className="text-slate-300 leading-relaxed">
+              We believe that scent is the fastest pathway to emotional transformation. A single breath of the right blend can dissolve anxiety, sharpen focus, or unlock creativity. Our mission is to make that transformation accessible — through products that are as beautiful as they are effective.
+            </p>
+            <p className="text-slate-400 leading-relaxed text-sm">
+              Every iRelax product is designed with intention: the glass bottles are reusable, the packaging is recycled, and the formulas are written to be understood by anyone — not hidden behind chemical jargon.
+            </p>
+          </div>
+          <div className="relative h-80 rounded-2xl overflow-hidden glass border border-white/5">
+            <div className="absolute inset-0 bg-gradient-to-br from-teal-900/30 via-night-800/30 to-purple-900/20" />
+            <div className="absolute inset-0 flex items-center justify-center">
+              <div className="text-center space-y-3">
+                <div className="text-7xl">🌿</div>
+                <p className="text-white/30 text-sm uppercase tracking-widest">iRelax Studio, Bangkok</p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* Three Pillars */}
+      <section className="py-24 px-6 bg-night-800/20 border-y border-white/5">
+        <div className="max-w-6xl mx-auto space-y-12">
+          <div className="text-center space-y-3">
+            <p className="text-cyan-glow uppercase tracking-[0.3em] text-xs font-semibold opacity-70">What We Stand For</p>
+            <h2 className="text-4xl font-bold">Three Pillars</h2>
+            <div className="w-12 h-px bg-cyan-glow mx-auto" />
+          </div>
+          <div className="grid md:grid-cols-3 gap-8">
+            {PILLARS.map(p => (
+              <div key={p.title} className="glass rounded-2xl p-8 border border-white/5 hover:border-cyan-glow/20 transition-all duration-500 space-y-4">
+                <div className="text-4xl">{p.icon}</div>
+                <h3 className="text-xl font-bold">{p.title}</h3>
+                <p className="text-slate-400 text-sm leading-relaxed">{p.desc}</p>
+              </div>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* CTA */}
+      <section className="py-24 px-6 text-center space-y-6">
+        <h2 className="text-4xl font-bold">Ready to find your scent?</h2>
+        <p className="text-slate-400 max-w-md mx-auto">
+          Let our Scent Guide help you discover the perfect blend for your moment.
+        </p>
+        <div className="flex flex-col sm:flex-row gap-4 justify-center pt-4">
+          <Link
+            to="/scent-guide"
+            className="px-10 py-4 bg-white text-night-900 font-bold rounded-sm tracking-widest uppercase hover:bg-cyan-glow hover:shadow-[0_0_30px_rgba(102,252,241,0.4)] transition-all duration-500"
+          >
+            Take the Scent Guide
+          </Link>
+          <Link
+            to="/shop"
+            className="px-10 py-4 glass text-white font-bold rounded-sm tracking-widest uppercase hover:bg-white/10 transition-all duration-300"
+          >
+            Shop All Products
+          </Link>
+        </div>
+      </section>
+
+      <Footer categories={categories} />
+    </div>
+  )
+}

apps/spa/src/pages/ArticleReaderPage.tsx

@@ -0,0 +1,85 @@
+import { useState, useEffect } from 'react'
+import { useParams, Link } from 'react-router-dom'
+import { API_BASE, type Article, type Category } from '../types'
+import Navbar from '../components/Navbar'
+import Footer from '../components/Footer'
+import { ArrowLeft, Loader2 } from 'lucide-react'
+
+export default function ArticleReaderPage() {
+  const { slug } = useParams()
+  const [article, setArticle] = useState<Article | null>(null)
+  const [categories, setCategories] = useState<Category[]>([])
+  const [loading, setLoading] = useState(true)
+
+  useEffect(() => {
+    fetch(`${API_BASE}/categories`).then(r => r.json()).then(setCategories).catch(console.error)
+    fetch(`${API_BASE}/articles/${slug}`)
+      .then(res => {
+         if (!res.ok) throw new Error()
+         return res.json()
+      })
+      .then(setArticle)
+      .catch(() => setArticle(null))
+      .finally(() => setLoading(false))
+  }, [slug])
+
+  if (loading) return (
+    <div className="min-h-screen flex items-center justify-center bg-black">
+      <Loader2 className="w-8 h-8 animate-spin text-cyan-glow" />
+    </div>
+  )
+
+  if (!article) return (
+    <div className="min-h-screen flex flex-col bg-black">
+      <Navbar categories={categories} />
+      <div className="flex-1 flex flex-col items-center justify-center px-6 text-center space-y-4">
+        <h1 className="text-4xl font-bold">Article not found</h1>
+        <Link to="/scent-guide" className="btn-secondary px-6 py-3">Return to Scent Guide</Link>
+      </div>
+      <Footer categories={categories} />
+    </div>
+  )
+
+  return (
+    <div className="min-h-screen flex flex-col bg-night-950">
+      <Navbar categories={categories} />
+
+      <main className="flex-1 pt-24 pb-20">
+        <article className="max-w-4xl mx-auto w-full animate-fade-in relative mt-8">
+          
+          <Link to="/scent-guide" className="absolute -left-16 xl:-left-24 top-0 mt-8 hidden lg:flex p-4 glass border border-white/5 rounded-full hover:bg-white/10 transition-colors">
+             <ArrowLeft className="w-5 h-5 text-slate-300" />
+          </Link>
+
+          {/* Header */}
+          <div className="text-center px-6 py-12 space-y-6">
+            <Link to="/scent-guide" className="lg:hidden text-slate-400 text-sm hover:text-white inline-flex items-center gap-2 mb-4">
+               <ArrowLeft className="w-4 h-4" /> Go Back
+            </Link>
+            <p className="text-cyan-glow uppercase tracking-[0.3em] font-bold text-xs">
+              {new Date(article.createdAt).toLocaleDateString('en-US', { month: 'long', day: 'numeric', year: 'numeric' })}
+            </p>
+            <h1 className="text-4xl md:text-5xl lg:text-6xl font-bold leading-tight max-w-3xl mx-auto font-serif">
+              {article.title}
+            </h1>
+          </div>
+
+          {/* Cover Image */}
+          {article.coverImage && (
+            <div className="w-full aspect-[16/7] bg-night-900 md:rounded-[2rem] overflow-hidden shadow-2xl mb-16 border border-white/5">
+              <img src={article.coverImage} alt={article.title} className="w-full h-full object-cover" />
+            </div>
+          )}
+
+          {/* Content Body */}
+          <div className="px-6 md:px-12 prose prose-invert prose-lg prose-cyan mx-auto max-w-3xl pb-16">
+            <div dangerouslySetInnerHTML={{ __html: article.content }} className="space-y-6" />
+          </div>
+
+        </article>
+      </main>
+
+      <Footer categories={categories} />
+    </div>
+  )
+}

apps/spa/src/pages/CategoryPage.tsx

@@ -0,0 +1,174 @@
+import { useState, useEffect, useRef } from 'react'
+import { useParams, Link } from 'react-router-dom'
+import Navbar from '../components/Navbar'
+import Footer from '../components/Footer'
+import ProductCard from '../components/ProductCard'
+import { API_BASE, getCategoryImage, type Category, type Product } from '../types'
+
+export default function CategoryPage() {
+  const { id } = useParams<{ id: string }>()
+
+  const [categories, setCategories] = useState<Category[]>([])
+  const [category, setCategory] = useState<Category | null>(null)
+  const [products, setProducts] = useState<Product[]>([])
+  
+  // Local progressive rendering
+  const [displayCount, setDisplayCount] = useState(24)
+  const loaderRef = useRef<HTMLDivElement>(null)
+  
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState<string | null>(null)
+
+  useEffect(() => {
+    fetch(`${API_BASE}/categories`)
+      .then((r) => r.json())
+      .then(setCategories)
+      .catch(console.error)
+  }, [])
+
+  // Reset state when category changes
+  useEffect(() => {
+    window.scrollTo({ top: 0, behavior: 'smooth' })
+    setDisplayCount(24)
+  }, [id])
+
+  useEffect(() => {
+    if (!id) return
+    setLoading(true)
+    setError(null)
+
+    Promise.all([
+      // Fetch up to 1000 items (essentially all) in one go
+      fetch(`${API_BASE}/categories/${id}/products?limit=1000`),
+      fetch(`${API_BASE}/categories`),
+    ])
+      .then(async ([catRes, allCatsRes]) => {
+        if (!catRes.ok) throw new Error('Category not found')
+        const catPaginated = await catRes.json()
+        const allCats: Category[] = await allCatsRes.json()
+        
+        setCategory(catPaginated.category)
+        setProducts(catPaginated.data || [])
+        setCategories(allCats)
+      })
+      .catch((err) => setError(err.message))
+      .finally(() => setLoading(false))
+  }, [id])
+
+  // Intersection Observer for infinite scroll
+  useEffect(() => {
+    const observer = new IntersectionObserver(
+      (entries) => {
+        if (entries[0].isIntersecting && products.length > displayCount) {
+          setDisplayCount((prev) => Math.min(prev + 12, products.length))
+        }
+      },
+      { threshold: 0.1, rootMargin: '200px' } // Pre-load slightly before seeing the loader
+    )
+
+    if (loaderRef.current) {
+      observer.observe(loaderRef.current)
+    }
+
+    return () => observer.disconnect()
+  }, [products.length, displayCount, loading])
+
+  return (
+    <div className="min-h-screen">
+      <Navbar categories={categories} />
+
+      {/* Hero Banner for category */}
+      <div className="relative h-64 md:h-80 overflow-hidden">
+        <img
+          src={getCategoryImage(category?.name ?? '')}
+          className="absolute inset-0 w-full h-full object-cover brightness-30 scale-105"
+          alt={category?.name}
+          onError={(e) => { (e.target as HTMLImageElement).style.display = 'none' }}
+        />
+        <div className="absolute inset-0 bg-gradient-to-t from-night-900 via-night-900/60 to-transparent" />
+        <div className="absolute bottom-0 left-0 right-0 px-6 pb-10 pt-20">
+          <div className="max-w-7xl mx-auto">
+            {/* Breadcrumb */}
+            <div className="flex items-center gap-2 text-xs text-slate-400 uppercase tracking-widest mb-4">
+              <Link to="/" className="hover:text-white transition-colors">Home</Link>
+              <span>/</span>
+              <Link to="/shop" className="hover:text-white transition-colors">Shop</Link>
+              <span>/</span>
+              <span className="text-cyan-glow">{category?.name ?? '...'}</span>
+            </div>
+            <h1 className="text-4xl md:text-5xl font-bold">
+              {loading ? (
+                <div className="h-10 w-48 bg-white/10 animate-pulse rounded-lg" />
+              ) : (
+                category?.name
+              )}
+            </h1>
+            {!loading && category?._count && (
+              <p className="text-slate-400 mt-2">
+                {category._count.products} products available
+              </p>
+            )}
+          </div>
+        </div>
+      </div>
+
+      {/* Products Grid */}
+      <div className="max-w-7xl mx-auto px-6 py-16 space-y-10">
+        {/* Other Category Pills */}
+        <div className="flex flex-wrap gap-3">
+          {categories.map((cat) => (
+            <Link
+              key={cat.id}
+              to={`/category/${cat.id}`}
+              className={`px-4 py-1.5 rounded-full text-xs font-bold uppercase tracking-widest transition-all duration-300 ${
+                cat.id === category?.id
+                  ? 'bg-cyan-glow text-night-900 shadow-[0_0_15px_rgba(102,252,241,0.3)]'
+                  : 'glass hover:bg-white/10'
+              }`}
+            >
+              {cat.name}
+            </Link>
+          ))}
+        </div>
+
+        {error ? (
+          <div className="text-center py-24 space-y-3">
+            <p className="text-4xl">⚠️</p>
+            <p className="text-slate-400">{error}</p>
+            <Link to="/shop" className="text-cyan-glow text-sm hover:underline">
+              Back to Shop
+            </Link>
+          </div>
+        ) : loading ? (
+          <div className="grid grid-cols-2 md:grid-cols-3 gap-4 md:gap-8">
+            {Array.from({ length: 9 }).map((_, i) => (
+              <div key={i} className="rounded-2xl bg-white/5 animate-pulse h-96" />
+            ))}
+          </div>
+        ) : products.length === 0 ? (
+          <div className="text-center py-24 text-slate-500 space-y-3">
+            <p className="text-4xl">🌿</p>
+            <p>No products in this category yet.</p>
+          </div>
+        ) : (
+          <div>
+            <div className="grid grid-cols-2 md:grid-cols-3 gap-4 md:gap-8">
+              {products.slice(0, displayCount).map((p) => (
+                 <ProductCard key={p.id} product={p} />
+              ))}
+            </div>
+
+            {/* Invisible target for IntersectionObserver */}
+            {displayCount < products.length && (
+              <div ref={loaderRef} className="py-12 flex justify-center">
+                <div className="w-8 h-8 rounded-full border-2 border-cyan-glow border-t-transparent animate-spin" />
+              </div>
+            )}
+          </div>
+        )}
+      </div>
+
+      <Footer categories={categories} />
+    </div>
+  )
+}

apps/spa/src/pages/CheckoutPage.tsx

@@ -0,0 +1,384 @@
+import { useState, useEffect } from 'react'
+import { useNavigate } from 'react-router-dom'
+import Navbar from '../components/Navbar'
+import Footer from '../components/Footer'
+import { API_BASE, formatPrice, type Category } from '../types'
+import { useCartStore } from '../store/cartStore'
+import { useAuthStore } from '../store/authStore'
+import { Loader2 } from 'lucide-react'
+
+export default function CheckoutPage() {
+  const navigate = useNavigate()
+  const { items, getCartTotal, clearCart } = useCartStore()
+  const { customer } = useAuthStore()
+  const [categories, setCategories] = useState<Category[]>([])
+  
+  const [shippingFee, setShippingFee] = useState<number>(35)
+  const [loading, setLoading] = useState(false)
+  const [loadingSettings, setLoadingSettings] = useState(true)
+
+  const [couponCode, setCouponCode] = useState('')
+  const [appliedCoupon, setAppliedCoupon] = useState<string | null>(null)
+  const [discountAmount, setDiscountAmount] = useState<number>(0)
+  const [isFreeShipping, setIsFreeShipping] = useState<boolean>(false)
+  const [couponLoading, setCouponLoading] = useState(false)
+  const [couponError, setCouponError] = useState('')
+
+  const [formData, setFormData] = useState({
+    name: '',
+    email: '',
+    phone: '',
+    address: ''
+  })
+
+  // Prefill form with LINE customer data
+  useEffect(() => {
+    if (customer) {
+      setFormData(prev => ({
+        ...prev,
+        name: prev.name || customer.displayName || '',
+        email: prev.email || customer.email || '',
+        phone: prev.phone || customer.phone || ''
+      }))
+    }
+  }, [customer])
+
+  // Load Settings (for dynamic shipping fee)
+  useEffect(() => {
+    fetch(`${API_BASE}/settings`)
+      .then(res => res.json())
+      .then(data => {
+        if (data.shippingFee !== undefined) setShippingFee(data.shippingFee)
+      })
+      .catch(err => console.error("Could not load settings:", err))
+      .finally(() => setLoadingSettings(false))
+
+    fetch(`${API_BASE}/categories`)
+      .then(res => res.json())
+      .then(setCategories)
+
+    // Check if there's an active coupon saved in localStorage
+    const savedCoupon = localStorage.getItem('irelax_active_coupon')
+    if (savedCoupon) {
+      setCouponCode(savedCoupon)
+      // We will trigger handleApplyCoupon but we need to wait for items/subtotal to be ready.
+      // So we'll handle this in another effect or let the user click apply if needed.
+      // Better yet, we can validate it immediately if subtotal is available.
+    }
+  }, [])
+
+  // Kick out if cart empty
+  useEffect(() => {
+    if (items.length === 0) {
+      navigate('/shop')
+    }
+  }, [items, navigate])
+
+  const subtotal = getCartTotal()
+  const effectiveShippingFee = isFreeShipping ? 0 : shippingFee
+  const total = Math.max(0, subtotal + effectiveShippingFee - discountAmount)
+
+  // Auto-apply saved coupon if subtotal is ready
+  useEffect(() => {
+    const savedCoupon = localStorage.getItem('irelax_active_coupon')
+    if (savedCoupon && subtotal > 0 && !appliedCoupon && !couponError && !couponLoading) {
+      setCouponCode(savedCoupon)
+      // trigger fetch to validate
+      fetch(`${API_BASE}/coupons/validate`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ code: savedCoupon, cartTotal: subtotal })
+      })
+      .then(r => r.json())
+      .then(data => {
+        if (data.valid) {
+          setAppliedCoupon(data.coupon.code)
+          setDiscountAmount(data.discountAmount)
+          setIsFreeShipping(data.isFreeShipping)
+        } else {
+          localStorage.removeItem('irelax_active_coupon') // Remove invalid
+        }
+      })
+      .catch(console.error)
+    }
+  }, [subtotal, appliedCoupon])
+
+  // Re-validate applied coupon if subtotal changes
+  useEffect(() => {
+    if (appliedCoupon && subtotal > 0) {
+      fetch(`${API_BASE}/coupons/validate`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ code: appliedCoupon, cartTotal: subtotal })
+      })
+      .then(r => r.json())
+      .then(data => {
+        if (data.valid) {
+          setDiscountAmount(data.discountAmount)
+          setIsFreeShipping(data.isFreeShipping)
+        } else {
+          removeCoupon()
+          setCouponError(data.error || 'Coupon is no longer valid for this cart')
+        }
+      })
+    }
+  }, [subtotal, appliedCoupon])
+
+  const handleApplyCoupon = async () => {
+    if (!couponCode.trim()) return
+    setCouponLoading(true)
+    setCouponError('')
+    
+    try {
+      const res = await fetch(`${API_BASE}/coupons/validate`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ code: couponCode, cartTotal: subtotal })
+      })
+      const data = await res.json()
+      
+      if (res.ok && data.valid) {
+        setAppliedCoupon(data.coupon.code)
+        setDiscountAmount(data.discountAmount)
+        setIsFreeShipping(data.isFreeShipping)
+      } else {
+        setCouponError(data.error || 'Invalid coupon')
+        setAppliedCoupon(null)
+        setDiscountAmount(0)
+        setIsFreeShipping(false)
+      }
+    } catch (err) {
+      setCouponError('Error validating coupon')
+    } finally {
+      setCouponLoading(false)
+    }
+  }
+
+  const removeCoupon = () => {
+    setAppliedCoupon(null)
+    setCouponCode('')
+    setDiscountAmount(0)
+    setIsFreeShipping(false)
+    setCouponError('')
+    localStorage.removeItem('irelax_active_coupon')
+  }
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault()
+    setLoading(true)
+
+    try {
+      const orderData = {
+        customerId: customer ? customer.id : null,
+        customerName: formData.name,
+        customerEmail: formData.email,
+        customerPhone: formData.phone,
+        shippingAddress: formData.address,
+        totalAmount: total,
+        shippingFee: effectiveShippingFee,
+        couponCode: appliedCoupon || undefined,
+        discountAmount: discountAmount || undefined,
+        items: items.map(item => ({
+          productId: item.productId,
+          variantId: item.variantId,
+          quantity: item.quantity,
+          priceAtPurchase: item.price,
+          productName: item.productName,
+          variantSize: item.variantSize,
+          productImage: item.productImage
+        }))
+      }
+
+      const res = await fetch(`${API_BASE}/orders`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(orderData)
+      })
+      
+      const responseData = await res.json()
+
+      if (res.ok) {
+        clearCart()
+        
+        const existingStr = localStorage.getItem('irelax_local_orders')
+        const existing = existingStr ? JSON.parse(existingStr) : []
+        if (!existing.includes(responseData.id)) {
+          localStorage.setItem('irelax_local_orders', JSON.stringify([responseData.id, ...existing]))
+        }
+        
+        navigate(`/order/${responseData.id}`)
+      } else {
+        alert(responseData.error || 'Failed to place order')
+      }
+    } catch (err) {
+      console.error(err)
+      alert('An error occurred. Please try again.')
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  return (
+    <div className="min-h-screen">
+      <Navbar categories={categories} />
+
+      <main className="max-w-6xl mx-auto px-6 pt-32 pb-24">
+        <h1 className="text-4xl font-bold mb-12">Checkout</h1>
+
+        <div className="flex flex-col lg:flex-row gap-12">
+          {/* Form Section */}
+          <div className="flex-1 space-y-8">
+            <form id="checkout-form" onSubmit={handleSubmit} className="space-y-6">
+              <div className="bg-night-900/50 p-8 rounded-2xl border border-white/5 space-y-6">
+                <h2 className="text-xl font-bold uppercase tracking-widest text-cyan-glow border-b border-white/10 pb-4">Shipping Information</h2>
+                
+                <div className="grid md:grid-cols-2 gap-6">
+                  <div className="space-y-2">
+                    <label className="text-xs uppercase tracking-widest text-slate-400">Full Name *</label>
+                    <input 
+                      type="text" 
+                      required 
+                      value={formData.name}
+                      onChange={e => setFormData({ ...formData, name: e.target.value })}
+                      className="w-full bg-night-950 border border-white/10 rounded-lg p-3 text-white focus:border-cyan-glow focus:ring-1 focus:ring-cyan-glow outline-none transition-all"
+                      placeholder="Jane Doe"
+                    />
+                  </div>
+                  <div className="space-y-2">
+                    <label className="text-xs uppercase tracking-widest text-slate-400">Phone Number *</label>
+                    <input 
+                      type="tel" 
+                      required 
+                      value={formData.phone}
+                      onChange={e => setFormData({ ...formData, phone: e.target.value })}
+                      className="w-full bg-night-950 border border-white/10 rounded-lg p-3 text-white focus:border-cyan-glow focus:ring-1 focus:ring-cyan-glow outline-none transition-all"
+                      placeholder="0812345678"
+                    />
+                  </div>
+                  <div className="md:col-span-2 space-y-2">
+                    <label className="text-xs uppercase tracking-widest text-slate-400">Email Address *</label>
+                    <input 
+                      type="email" 
+                      required 
+                      value={formData.email}
+                      onChange={e => setFormData({ ...formData, email: e.target.value })}
+                      className="w-full bg-night-950 border border-white/10 rounded-lg p-3 text-white focus:border-cyan-glow focus:ring-1 focus:ring-cyan-glow outline-none transition-all"
+                      placeholder="jane@example.com"
+                    />
+                  </div>
+                  <div className="md:col-span-2 space-y-2">
+                    <label className="text-xs uppercase tracking-widest text-slate-400">Shipping Address *</label>
+                    <textarea 
+                      required 
+                      rows={3}
+                      value={formData.address}
+                      onChange={e => setFormData({ ...formData, address: e.target.value })}
+                      className="w-full bg-night-950 border border-white/10 rounded-lg p-3 text-white focus:border-cyan-glow focus:ring-1 focus:ring-cyan-glow outline-none transition-all resize-none"
+                      placeholder="123 Serenity Street..."
+                    />
+                  </div>
+                </div>
+              </div>
+            </form>
+          </div>
+
+          {/* Summary Section */}
+          <div className="lg:w-96 space-y-6">
+            <div className="bg-night-900/50 p-8 rounded-2xl border border-white/5 sticky top-32">
+              <h2 className="text-xl font-bold uppercase tracking-widest text-cyan-glow border-b border-white/10 pb-4 mb-6">Order Summary</h2>
+              
+              {/* Coupon Section */}
+              <div className="mb-6 pb-6 border-b border-white/10">
+                {!appliedCoupon ? (
+                  <div className="space-y-2">
+                    <label className="text-[10px] uppercase font-bold tracking-widest text-slate-500">Discount Code</label>
+                    <div className="flex gap-2">
+                      <input
+                        type="text"
+                        value={couponCode}
+                        onChange={e => setCouponCode(e.target.value.toUpperCase())}
+                        placeholder="e.g. SUMMER2026"
+                        className="flex-1 bg-night-950 border border-white/10 rounded-lg px-3 text-sm text-white focus:border-cyan-glow outline-none uppercase tracking-widest"
+                      />
+                      <button
+                        type="button"
+                        onClick={handleApplyCoupon}
+                        disabled={couponLoading || !couponCode.trim()}
+                        className="px-4 bg-white/5 hover:bg-white/10 border border-white/10 rounded-lg text-xs font-bold uppercase tracking-widest disabled:opacity-50 transition-all"
+                      >
+                        {couponLoading ? <Loader2 className="w-4 h-4 animate-spin" /> : 'Apply'}
+                      </button>
+                    </div>
+                    {couponError && <p className="text-xs text-rose-500 mt-1">{couponError}</p>}
+                  </div>
+                ) : (
+                  <div className="flex items-center justify-between bg-cyan-glow/10 border border-cyan-glow/20 rounded-lg px-4 py-3">
+                    <div className="flex items-center gap-2">
+                      <svg className="w-4 h-4 text-cyan-glow" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
+                      </svg>
+                      <span className="text-sm font-bold tracking-widest text-cyan-glow">{appliedCoupon}</span>
+                    </div>
+                    <button type="button" onClick={removeCoupon} className="text-xs text-slate-400 hover:text-rose-500 uppercase tracking-widest font-bold">Remove</button>
+                  </div>
+                )}
+              </div>
+              
+              <div className="space-y-4 mb-6">
+                {items.map(item => (
+                  <div key={item.cartItemId} className="flex justify-between items-start gap-4 text-sm">
+                    <div className="flex-1">
+                      <p className="font-bold">{item.productName}</p>
+                      <p className="text-slate-400 text-xs mt-0.5">{item.variantSize} x {item.quantity}</p>
+                    </div>
+                    <p className="font-medium text-cyan-glow">{formatPrice(item.price * item.quantity)}</p>
+                  </div>
+                ))}
+              </div>
+
+              <div className="border-t border-white/10 pt-4 space-y-3 font-medium">
+                <div className="flex justify-between text-sm text-slate-300">
+                  <span>Subtotal</span>
+                  <span>{formatPrice(subtotal)}</span>
+                </div>
+                <div className="flex justify-between text-sm text-slate-300">
+                  <span>Shipping Fee</span>
+                  {loadingSettings ? <Loader2 className="w-4 h-4 animate-spin" /> : 
+                    <span className={isFreeShipping ? "line-through text-slate-500" : ""}>{formatPrice(shippingFee)}</span>
+                  }
+                </div>
+                {isFreeShipping && (
+                  <div className="flex justify-between text-sm text-emerald-400">
+                    <span>Shipping Discount</span>
+                    <span>- {formatPrice(shippingFee)}</span>
+                  </div>
+                )}
+                {discountAmount > 0 && (
+                  <div className="flex justify-between text-sm text-cyan-glow">
+                    <span>Discount</span>
+                    <span>- {formatPrice(discountAmount)}</span>
+                  </div>
+                )}
+                <div className="border-t border-white/10 pt-3 mt-3 flex justify-between text-lg font-bold">
+                  <span>Total</span>
+                  <span className="text-cyan-glow">{formatPrice(total)}</span>
+                </div>
+              </div>
+
+              <button 
+                form="checkout-form"
+                type="submit"
+                disabled={loading || loadingSettings}
+                className="w-full mt-8 py-4 bg-white text-night-900 font-bold rounded-lg tracking-widest uppercase hover:bg-cyan-glow hover:shadow-[0_0_25px_rgba(102,252,241,0.4)] transition-all duration-500 disabled:opacity-50 disabled:cursor-not-allowed flex justify-center items-center gap-2"
+              >
+                {loading ? <Loader2 className="w-5 h-5 animate-spin" /> : 'Confirm Order'}
+              </button>
+            </div>
+          </div>
+        </div>
+      </main>
+
+      <Footer categories={categories} />
+    </div>
+  )
+}

apps/spa/src/pages/ContactPage.tsx

@@ -0,0 +1,183 @@
+import { useState, useEffect } from 'react'
+import Navbar from '../components/Navbar'
+import Footer from '../components/Footer'
+import { API_BASE, type Category } from '../types'
+
+type FormState = { name: string; email: string; subject: string; message: string }
+type Status = 'idle' | 'sending' | 'sent' | 'error'
+
+const SUBJECTS = ['Product Inquiry', 'Order Support', 'Custom Blending', 'Wholesale', 'Partnership', 'Other']
+
+export default function ContactPage() {
+  const [categories, setCategories] = useState<Category[]>([])
+  const [form, setForm] = useState<FormState>({ name: '', email: '', subject: '', message: '' })
+  const [status, setStatus] = useState<Status>('idle')
+
+  useEffect(() => {
+    fetch(`${API_BASE}/categories`).then(r => r.json()).then(setCategories).catch(console.error)
+  }, [])
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>) => {
+    setForm(prev => ({ ...prev, [e.target.name]: e.target.value }))
+  }
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault()
+    setStatus('sending')
+    // Simulate API call (replace with real endpoint later)
+    await new Promise(r => setTimeout(r, 1500))
+    setStatus('sent')
+    setForm({ name: '', email: '', subject: '', message: '' })
+  }
+
+  return (
+    <div className="min-h-screen">
+      <Navbar categories={categories} />
+
+      {/* Header */}
+      <div className="pt-32 pb-16 px-6 text-center space-y-4 border-b border-white/5 bg-night-800/20">
+        <p className="text-cyan-glow uppercase tracking-[0.4em] text-xs font-semibold opacity-70">Get in Touch</p>
+        <h1 className="text-5xl font-bold">Contact Us</h1>
+        <p className="text-slate-400 max-w-lg mx-auto">
+          Have a question, custom request, or partnership idea? We'd love to hear from you.
+        </p>
+      </div>
+
+      <div className="max-w-6xl mx-auto px-6 py-16 grid md:grid-cols-5 gap-16">
+        {/* Contact Info */}
+        <div className="md:col-span-2 space-y-8">
+          <div>
+            <h2 className="font-bold text-xl mb-6">Reach Us Directly</h2>
+            <div className="space-y-5">
+              {[
+                { icon: '📧', label: 'Email', value: 'hello@irelax.co.th', href: 'mailto:hello@irelax.co.th' },
+                { icon: '📱', label: 'LINE Official', value: '@irelaxessential', href: '#' },
+                { icon: '📸', label: 'Instagram', value: '@irelax.essential', href: '#' },
+                { icon: '📍', label: 'Studio', value: 'Bangkok, Thailand', href: '#' },
+              ].map(item => (
+                <a key={item.label} href={item.href} className="flex items-start gap-4 group">
+                  <div className="glass w-10 h-10 rounded-xl flex items-center justify-center text-lg shrink-0 group-hover:bg-cyan-glow/10 transition-colors">
+                    {item.icon}
+                  </div>
+                  <div>
+                    <p className="text-xs text-slate-500 uppercase tracking-widest">{item.label}</p>
+                    <p className="text-white text-sm font-medium group-hover:text-cyan-glow transition-colors">{item.value}</p>
+                  </div>
+                </a>
+              ))}
+            </div>
+          </div>
+
+          <div className="glass rounded-2xl p-6 border border-white/5 space-y-3">
+            <h3 className="font-bold text-sm uppercase tracking-widest">Response Time</h3>
+            <div className="space-y-2 text-sm">
+              <div className="flex justify-between">
+                <span className="text-slate-400">Email</span>
+                <span className="text-cyan-glow font-medium">~2 hours</span>
+              </div>
+              <div className="flex justify-between">
+                <span className="text-slate-400">LINE</span>
+                <span className="text-cyan-glow font-medium">~30 minutes</span>
+              </div>
+              <div className="flex justify-between">
+                <span className="text-slate-400">Instagram DM</span>
+                <span className="text-cyan-glow font-medium">~4 hours</span>
+              </div>
+            </div>
+            <p className="text-[10px] text-slate-600 pt-2 uppercase tracking-wider">Mon–Sat, 9:00–18:00 (ICT)</p>
+          </div>
+        </div>
+
+        {/* Contact Form */}
+        <div className="md:col-span-3">
+          {status === 'sent' ? (
+            <div className="h-full flex items-center justify-center">
+              <div className="text-center space-y-5 py-16">
+                <div className="text-6xl animate-bounce">✉️</div>
+                <h2 className="text-2xl font-bold">Message Sent!</h2>
+                <p className="text-slate-400">Thank you for reaching out. We'll get back to you within 2 hours.</p>
+                <button
+                  onClick={() => setStatus('idle')}
+                  className="mt-4 px-8 py-3 glass border border-white/10 hover:border-cyan-glow/30 font-bold uppercase tracking-widest text-xs transition-all rounded-lg"
+                >
+                  Send Another
+                </button>
+              </div>
+            </div>
+          ) : (
+            <form onSubmit={handleSubmit} className="space-y-5">
+              <div className="grid md:grid-cols-2 gap-5">
+                <div className="space-y-2">
+                  <label className="text-xs uppercase tracking-widest text-slate-400">Full Name *</label>
+                  <input
+                    required
+                    type="text"
+                    name="name"
+                    value={form.name}
+                    onChange={handleChange}
+                    placeholder="Your name"
+                    className="w-full glass border border-white/10 focus:border-cyan-glow/40 rounded-xl px-4 py-3.5 bg-transparent outline-none text-sm text-white placeholder-slate-600 transition-colors"
+                  />
+                </div>
+                <div className="space-y-2">
+                  <label className="text-xs uppercase tracking-widest text-slate-400">Email *</label>
+                  <input
+                    required
+                    type="email"
+                    name="email"
+                    value={form.email}
+                    onChange={handleChange}
+                    placeholder="your@email.com"
+                    className="w-full glass border border-white/10 focus:border-cyan-glow/40 rounded-xl px-4 py-3.5 bg-transparent outline-none text-sm text-white placeholder-slate-600 transition-colors"
+                  />
+                </div>
+              </div>
+              <div className="space-y-2">
+                <label className="text-xs uppercase tracking-widest text-slate-400">Subject *</label>
+                <select
+                  required
+                  name="subject"
+                  value={form.subject}
+                  onChange={handleChange}
+                  className="w-full glass border border-white/10 focus:border-cyan-glow/40 rounded-xl px-4 py-3.5 bg-night-900 outline-none text-sm text-white transition-colors"
+                >
+                  <option value="" disabled>Select a subject</option>
+                  {SUBJECTS.map(s => <option key={s} value={s}>{s}</option>)}
+                </select>
+              </div>
+              <div className="space-y-2">
+                <label className="text-xs uppercase tracking-widest text-slate-400">Message *</label>
+                <textarea
+                  required
+                  name="message"
+                  value={form.message}
+                  onChange={handleChange}
+                  rows={6}
+                  placeholder="Tell us about your inquiry..."
+                  className="w-full glass border border-white/10 focus:border-cyan-glow/40 rounded-xl px-4 py-3.5 bg-transparent outline-none text-sm text-white placeholder-slate-600 resize-none transition-colors"
+                />
+              </div>
+              <button
+                type="submit"
+                disabled={status === 'sending'}
+                className="w-full py-4 bg-white text-night-900 font-bold uppercase tracking-widest text-sm rounded-xl hover:bg-cyan-glow hover:shadow-[0_0_25px_rgba(102,252,241,0.4)] transition-all duration-500 disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-3"
+              >
+                {status === 'sending' ? (
+                  <>
+                    <svg className="animate-spin w-4 h-4" fill="none" viewBox="0 0 24 24">
+                      <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
+                      <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" />
+                    </svg>
+                    Sending...
+                  </>
+                ) : 'Send Message →'}
+              </button>
+            </form>
+          )}
+        </div>
+      </div>
+
+      <Footer categories={categories} />
+    </div>
+  )
+}

apps/spa/src/pages/CouponsPage.tsx

@@ -0,0 +1,164 @@
+import { useState, useEffect } from 'react'
+import { useNavigate } from 'react-router-dom'
+import Navbar from '../components/Navbar'
+import Footer from '../components/Footer'
+import { API_BASE, type Category } from '../types'
+import { Ticket, Copy, CheckCircle2, ArrowRight } from 'lucide-react'
+
+interface Coupon {
+  id: number
+  code: string
+  type: string
+  value: number
+  minPurchase: number
+  usageLimit: number | null
+  usedCount: number
+  expiresAt: string | null
+}
+
+export default function CouponsPage() {
+  const navigate = useNavigate()
+  const [categories, setCategories] = useState<Category[]>([])
+  const [coupons, setCoupons] = useState<Coupon[]>([])
+  const [loading, setLoading] = useState(true)
+  const [copiedCode, setCopiedCode] = useState<string | null>(null)
+
+  useEffect(() => {
+    fetch(`${API_BASE}/categories`)
+      .then(res => res.json())
+      .then(setCategories)
+      .catch(console.error)
+
+    fetch(`${API_BASE}/coupons/active`)
+      .then(res => res.json())
+      .then(data => {
+        // Filter out coupons that have reached their limit
+        const availableCoupons = data.filter((c: Coupon) => 
+          c.usageLimit === null || c.usedCount < c.usageLimit
+        )
+        setCoupons(availableCoupons)
+      })
+      .catch(console.error)
+      .finally(() => setLoading(false))
+  }, [])
+
+  const formatDiscount = (type: string, value: number) => {
+    if (type === 'PERCENTAGE') return `${value}% OFF`
+    if (type === 'FIXED_AMOUNT') return `ลด ${value} ฿`
+    if (type === 'FREE_SHIPPING') return `ส่งฟรี`
+    return `${value}`
+  }
+
+  const handleCopy = (code: string) => {
+    navigator.clipboard.writeText(code)
+    setCopiedCode(code)
+    setTimeout(() => setCopiedCode(null), 2000)
+  }
+
+  const handleUseNow = (code: string) => {
+    localStorage.setItem('irelax_active_coupon', code)
+    navigate('/shop')
+  }
+
+  return (
+    <div className="min-h-screen">
+      <Navbar categories={categories} />
+
+      <main className="max-w-6xl mx-auto px-6 pt-32 pb-24 min-h-[70vh]">
+        <div className="text-center space-y-4 mb-16">
+          <h1 className="text-4xl md:text-5xl font-bold bg-gradient-to-r from-white via-cyan-glow to-blue-500 bg-clip-text text-transparent">
+            Exclusive Offers
+          </h1>
+          <p className="text-slate-400 max-w-2xl mx-auto">
+            คูปองส่วนลดพิเศษสำหรับคุณ เลือกใช้คูปองที่คุณต้องการแล้วไปช้อปกันเลย!
+          </p>
+        </div>
+
+        {loading ? (
+          <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
+            {[1, 2, 3].map(i => (
+              <div key={i} className="h-64 bg-white/5 rounded-3xl animate-pulse" />
+            ))}
+          </div>
+        ) : coupons.length === 0 ? (
+          <div className="text-center py-20 bg-night-900/50 rounded-3xl border border-white/5">
+            <Ticket className="w-16 h-16 text-slate-600 mx-auto mb-4" />
+            <h2 className="text-xl font-bold text-white mb-2">ยังไม่มีคูปองส่วนลดในขณะนี้</h2>
+            <p className="text-slate-400 mb-6">กรุณากลับมาตรวจสอบโปรโมชั่นใหม่ในภายหลัง</p>
+            <button 
+              onClick={() => navigate('/shop')}
+              className="px-8 py-3 bg-cyan-glow/10 text-cyan-glow hover:bg-cyan-glow hover:text-night-900 font-bold rounded-xl transition-all"
+            >
+              ไปช้อปปิ้งกันก่อน
+            </button>
+          </div>
+        ) : (
+          <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
+            {coupons.map(coupon => (
+              <div 
+                key={coupon.id}
+                className="group relative bg-night-900 border border-white/10 rounded-3xl overflow-hidden hover:border-cyan-glow/50 transition-all duration-500"
+              >
+                {/* Decoration */}
+                <div className="absolute top-0 right-0 w-32 h-32 bg-cyan-glow/10 blur-3xl rounded-full -translate-y-1/2 translate-x-1/2" />
+                
+                <div className="p-8 space-y-6 relative z-10">
+                  <div className="flex items-start justify-between">
+                    <div className="w-12 h-12 rounded-xl bg-cyan-glow/10 text-cyan-glow flex items-center justify-center border border-cyan-glow/20">
+                      <Ticket className="w-6 h-6" />
+                    </div>
+                    {coupon.expiresAt && (
+                      <span className="text-[10px] font-bold text-amber-400 bg-amber-500/10 px-2 py-1 rounded-md uppercase tracking-wider">
+                        หมดเขต {new Date(coupon.expiresAt).toLocaleDateString('th-TH')}
+                      </span>
+                    )}
+                  </div>
+
+                  <div>
+                    <h3 className="text-3xl font-black text-white mb-1">
+                      {formatDiscount(coupon.type, coupon.value)}
+                    </h3>
+                    <p className="text-sm text-slate-400">
+                      เมื่อซื้อครบ {coupon.minPurchase} บาท
+                    </p>
+                  </div>
+
+                  <div className="flex items-center gap-2 bg-night-950 p-1 pl-4 rounded-xl border border-white/5">
+                    <span className="flex-1 font-mono text-cyan-glow font-bold tracking-widest uppercase">
+                      {coupon.code}
+                    </span>
+                    <button
+                      onClick={() => handleCopy(coupon.code)}
+                      className="p-3 hover:bg-white/5 rounded-lg text-slate-400 hover:text-white transition-all group/btn"
+                      title="Copy Code"
+                    >
+                      {copiedCode === coupon.code ? (
+                        <CheckCircle2 className="w-5 h-5 text-emerald-400" />
+                      ) : (
+                        <Copy className="w-5 h-5 group-hover/btn:scale-110 transition-transform" />
+                      )}
+                    </button>
+                  </div>
+
+                  <button
+                    onClick={() => handleUseNow(coupon.code)}
+                    className="w-full py-4 bg-white/5 hover:bg-cyan-glow text-white hover:text-night-900 font-bold rounded-xl flex items-center justify-center gap-2 transition-all duration-300"
+                  >
+                    ใช้คูปองนี้เลย
+                    <ArrowRight className="w-4 h-4" />
+                  </button>
+                </div>
+
+                {/* Scalloped edge effect */}
+                <div className="absolute left-0 top-1/2 -translate-y-1/2 -translate-x-1/2 w-6 h-6 bg-[#0a0a0a] rounded-full border-r border-white/10" />
+                <div className="absolute right-0 top-1/2 -translate-y-1/2 translate-x-1/2 w-6 h-6 bg-[#0a0a0a] rounded-full border-l border-white/10" />
+              </div>
+            ))}
+          </div>
+        )}
+      </main>
+
+      <Footer categories={categories} />
+    </div>
+  )
+}

apps/spa/src/pages/FaqPage.tsx

@@ -0,0 +1,139 @@
+import { useState, useEffect } from 'react'
+import Navbar from '../components/Navbar'
+import Footer from '../components/Footer'
+import { API_BASE, type Category } from '../types'
+
+const FAQS = [
+  {
+    category: 'Products',
+    icon: '🌿',
+    items: [
+      { q: 'What are the ingredients in your aroma products?', a: 'All iRelax products are crafted from 100% natural botanical extracts, pure essential oils, and pharmaceutical-grade carrier bases. We never use synthetic fragrances, parabens, or harmful chemicals. Each product label lists full ingredient transparency.' },
+      { q: 'How long does each product last?', a: 'Our Reed Diffusers last 4–8 weeks depending on room size and airflow. Aroma Oils (30ml) last approximately 3–4 months with normal use. Room Sprays (100ml) provide 60–80 uses. Car Diffusers cartridges last up to 45 days.' },
+      { q: 'Are your products suitable for sensitive skin or allergies?', a: 'We recommend patch testing before topical use. Our Aroma Oils are formulated for diffuser use primarily. If you have known fragrance allergies, consult our scent guide or contact us with your specific concerns — we are happy to help identify suitable options.' },
+      { q: 'What is the difference between Aroma Oil and Oil Ozone?', a: 'Aroma Oils are pure essential oil blends designed for aromatherapy diffusers and therapeutic use. Oil Ozone is our premium line featuring ozone-infused botanical extracts — designed for air purification and deeper space transformation, ideal for large rooms and commercial spaces.' },
+    ],
+  },
+  {
+    category: 'Usage',
+    icon: '💡',
+    items: [
+      { q: 'How do I use a Reed Diffuser?', a: 'Remove the stopper, place the reeds into the bottle, and let them absorb the oil for 1 hour before flipping. For optimal fragrance, flip the reeds every 2–3 days. Keep away from direct sunlight and air conditioning vents for longest lasting performance.' },
+      { q: 'Can I mix different scents?', a: 'Yes! Blending scents is an art form we encourage. A general rule: combine no more than 3 scents at a time, using one dominant (60%), one supporting (30%), and one accent (10%). Our Scent Guide can help you find complementary combinations.' },
+      { q: 'How long should I run my aroma diffuser?', a: 'For best results and to avoid olfactory fatigue, we recommend 30–60 minute sessions with 30-minute breaks in between. This also extends product life and prevents overwhelming fragrance build-up in small spaces.' },
+    ],
+  },
+  {
+    category: 'Shipping & Orders',
+    icon: '📦',
+    items: [
+      { q: 'How long does shipping take?', a: 'Standard delivery within Bangkok takes 1–2 business days. Provincial orders take 2–4 business days. Express same-day delivery is available in Bangkok for orders placed before 12:00 PM.' },
+      { q: 'Do you ship internationally?', a: 'Currently we ship within Thailand only. International shipping is planned for late 2025. Sign up for our newsletter to be notified when we expand to your region.' },
+      { q: 'What is your return policy?', a: 'We accept returns within 14 days of purchase for unopened, undamaged products in original packaging. For defective or damaged products, we offer full replacement at no cost. Contact us at hello@irelax.co.th with your order number.' },
+    ],
+  },
+  {
+    category: 'Scent Guide',
+    icon: '🧪',
+    items: [
+      { q: 'How do I choose the right scent for my space?', a: 'Consider the function of the space first. Bedrooms benefit from calming scents like lavender and chamomile. Living rooms work well with warm, welcoming notes like sandalwood and vanilla. Home offices pair best with focus-enhancing eucalyptus and citrus. Use our interactive Scent Guide for personalized recommendations.' },
+      { q: 'Can I request custom scent blending?', a: 'Yes! Our bespoke blending service is available for orders of 6 units or more. Contact us at least 10 business days before your desired delivery date. Custom blending fees start at ฿500 per unique formula.' },
+    ],
+  },
+]
+
+export default function FaqPage() {
+  const [categories, setCategories] = useState<Category[]>([])
+  const [openItems, setOpenItems] = useState<Record<string, boolean>>({})
+  const [activeCategory, setActiveCategory] = useState<string>('Products')
+
+  useEffect(() => {
+    fetch(`${API_BASE}/categories`).then(r => r.json()).then(setCategories).catch(console.error)
+  }, [])
+
+  const toggle = (key: string) => setOpenItems(prev => ({ ...prev, [key]: !prev[key] }))
+
+  const activeFaqs = FAQS.find(f => f.category === activeCategory)
+
+  return (
+    <div className="min-h-screen">
+      <Navbar categories={categories} />
+
+      {/* Header */}
+      <div className="pt-32 pb-16 px-6 text-center space-y-4 border-b border-white/5 bg-night-800/20">
+        <p className="text-cyan-glow uppercase tracking-[0.4em] text-xs font-semibold opacity-70">Support</p>
+        <h1 className="text-5xl font-bold">Frequently Asked Questions</h1>
+        <p className="text-slate-400 max-w-lg mx-auto">
+          Everything you need to know about iRelax products, shipping, and care.
+        </p>
+      </div>
+
+      <div className="max-w-4xl mx-auto px-6 py-16 space-y-10">
+        {/* Category tabs */}
+        <div className="flex flex-wrap gap-3">
+          {FAQS.map(({ category, icon }) => (
+            <button
+              key={category}
+              onClick={() => setActiveCategory(category)}
+              className={`px-5 py-2 rounded-full text-xs font-bold uppercase tracking-widest transition-all duration-300 flex items-center gap-2 ${
+                activeCategory === category
+                  ? 'bg-cyan-glow text-night-900 shadow-[0_0_15px_rgba(102,252,241,0.3)]'
+                  : 'glass hover:bg-white/10'
+              }`}
+            >
+              <span>{icon}</span> {category}
+            </button>
+          ))}
+        </div>
+
+        {/* FAQ Accordion */}
+        <div className="space-y-3">
+          {activeFaqs?.items.map((item, i) => {
+            const key = `${activeCategory}-${i}`
+            const isOpen = openItems[key]
+            return (
+              <div
+                key={key}
+                className={`glass rounded-xl overflow-hidden border transition-all duration-300 ${isOpen ? 'border-cyan-glow/20' : 'border-white/5'}`}
+              >
+                <button
+                  onClick={() => toggle(key)}
+                  className="w-full text-left px-6 py-5 flex justify-between items-start gap-4"
+                >
+                  <span className="font-semibold text-sm md:text-base leading-snug">{item.q}</span>
+                  <svg
+                    className={`w-5 h-5 text-cyan-glow shrink-0 transition-transform duration-300 ${isOpen ? 'rotate-45' : ''}`}
+                    fill="none" viewBox="0 0 24 24" stroke="currentColor"
+                  >
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4v16m8-8H4" />
+                  </svg>
+                </button>
+                {isOpen && (
+                  <div className="px-6 pb-6">
+                    <div className="w-full h-px bg-white/5 mb-4" />
+                    <p className="text-slate-300 leading-relaxed text-sm">{item.a}</p>
+                  </div>
+                )}
+              </div>
+            )
+          })}
+        </div>
+
+        {/* Still have questions? */}
+        <div className="glass rounded-2xl p-8 text-center space-y-4 border border-white/5 mt-12">
+          <div className="text-3xl">💬</div>
+          <h3 className="font-bold text-xl">Still have questions?</h3>
+          <p className="text-slate-400 text-sm">Our team is here to help — usually responds within 2 hours.</p>
+          <a
+            href="/contact"
+            className="inline-block px-8 py-3 bg-white text-night-900 font-bold rounded-lg uppercase tracking-widest text-xs hover:bg-cyan-glow transition-colors duration-300"
+          >
+            Contact Us
+          </a>
+        </div>
+      </div>
+
+      <Footer categories={categories} />
+    </div>
+  )
+}

apps/spa/src/pages/HomePage.tsx

@@ -0,0 +1,202 @@
+import { useState, useEffect } from 'react'
+import { Link } from 'react-router-dom'
+import Navbar from '../components/Navbar'
+import Footer from '../components/Footer'
+import ProductCard from '../components/ProductCard'
+import { API_BASE, getCategoryImage, type Category, type Product, type Hero } from '../types'
+
+export default function HomePage() {
+  const [categories, setCategories] = useState<Category[]>([])
+  const [featuredProducts, setFeaturedProducts] = useState<Product[]>([])
+  const [hero, setHero] = useState<Hero | null>(null)
+  const [loading, setLoading] = useState(true)
+
+  useEffect(() => {
+    const fetchData = async () => {
+      try {
+        const [catRes, prodRes, heroRes] = await Promise.all([
+          fetch(`${API_BASE}/categories`),
+          fetch(`${API_BASE}/products?categoryId=1`),
+          fetch(`${API_BASE}/hero`),
+        ])
+        const cats: Category[] = await catRes.json()
+        const prodsJson = await prodRes.json()
+        const heroText = await heroRes.text()
+        const heroData: Hero | null = heroText ? JSON.parse(heroText) : null
+        
+        const prods: Product[] = prodsJson.data || []
+        setCategories(cats)
+        setFeaturedProducts(prods.slice(0, 3))
+        setHero(heroData)
+      } catch (err) {
+        console.error('API error:', err)
+      } finally {
+        setLoading(false)
+      }
+    }
+    fetchData()
+  }, [])
+
+  return (
+    <div className="min-h-screen">
+      <Navbar categories={categories} />
+
+      {/* Hero Section */}
+      <section className="relative w-full min-h-[90vh] md:min-h-0 md:aspect-video flex items-center justify-center overflow-hidden bg-night-950">
+        <div className="absolute inset-0 z-0">
+          <img
+            src={hero?.imageUrl || "/images/hero.png"}
+            className="w-full h-full object-cover scale-[1.02] brightness-50"
+            alt="Hero Background"
+            onError={(e) => {
+              (e.target as HTMLImageElement).style.display = 'none'
+            }}
+          />
+          <div className="absolute inset-0 bg-gradient-to-t from-night-900 via-transparent to-night-900/50" />
+        </div>
+
+        <div className="relative z-10 text-center space-y-6 px-4 animate-fade-in">
+          <p className="text-cyan-glow uppercase tracking-[0.4em] text-sm font-semibold opacity-80">
+            {hero?.tagline || "A New Paradigm of Calm"}
+          </p>
+          <h1 className="text-6xl md:text-8xl font-bold max-w-4xl text-glow leading-[1.1]">
+            {hero ? (
+              hero.title.split('[').map((part, i) => {
+                if (part.includes(']')) {
+                  const [accent, rest] = part.split(']')
+                  return (
+                    <span key={i}>
+                      <span className="text-transparent bg-clip-text bg-gradient-to-r from-white via-silver-metallic to-white/50 italic font-serif">
+                        {accent}
+                      </span>
+                      {rest}
+                    </span>
+                  )
+                }
+                return <span key={i}>{part}</span>
+              })
+            ) : (
+              <>
+                Inhale{' '}
+                <span className="text-transparent bg-clip-text bg-gradient-to-r from-white via-silver-metallic to-white/50 italic font-serif">
+                  Serenity
+                </span>
+              </>
+            )}
+          </h1>
+          <p className="text-slate-400 max-w-xl mx-auto text-lg md:text-xl font-light">
+            {hero?.description || "Crafting premium sensory experiences that transform your space into a sanctuary of peace."}
+          </p>
+          <div className="pt-8 flex flex-col sm:flex-row gap-4 justify-center">
+            <Link
+              to={hero?.buttonLink || "/shop"}
+              className="px-10 py-4 bg-white text-night-900 font-bold rounded-sm tracking-widest uppercase hover:bg-cyan-glow hover:shadow-[0_0_30px_rgba(102,252,241,0.5)] transition-all duration-500"
+            >
+              {hero?.buttonText || "Explore Collection"}
+            </Link>
+            <a
+              href="#categories"
+              className="px-10 py-4 glass text-white font-bold rounded-sm tracking-widest uppercase hover:bg-white/10 transition-all duration-300"
+            >
+              Learn More
+            </a>
+          </div>
+        </div>
+
+        <div className="absolute bottom-10 left-1/2 -translate-x-1/2 animate-bounce opacity-40">
+          <div className="w-px h-16 bg-gradient-to-b from-white/0 via-white to-white/0" />
+        </div>
+      </section>
+
+      {/* Categories Showcase */}
+      <section id="categories" className="bg-night-900 py-24 px-6">
+        <div className="max-w-7xl mx-auto space-y-12">
+          <div className="text-center space-y-2">
+            <p className="text-cyan-glow uppercase tracking-[0.3em] text-xs font-semibold opacity-70">
+              Our Range
+            </p>
+            <h2 className="text-4xl font-bold tracking-tight uppercase">The Categories</h2>
+            <div className="w-12 h-px bg-cyan-glow mx-auto mt-3" />
+          </div>
+
+          {loading ? (
+            <div className="grid grid-cols-2 md:grid-cols-5 gap-4">
+              {Array.from({ length: 5 }).map((_, i) => (
+                <div key={i} className="h-56 rounded-xl bg-white/5 animate-pulse" />
+              ))}
+            </div>
+          ) : (
+            <div className="grid grid-cols-2 md:grid-cols-5 gap-4">
+              {categories.map((cat) => (
+                <Link
+                  key={cat.id}
+                  to={`/category/${cat.id}`}
+                  className="relative h-56 rounded-xl overflow-hidden group border-2 border-white/5 hover:border-cyan-glow/50 hover:shadow-[0_0_20px_rgba(102,252,241,0.15)] transition-all duration-500"
+                >
+                  <img
+                    src={getCategoryImage(cat.name)}
+                    className="absolute inset-0 w-full h-full object-cover grayscale opacity-40 group-hover:grayscale-0 group-hover:scale-110 group-hover:opacity-70 transition-all duration-700"
+                    alt={cat.name}
+                    onError={(e) => { (e.target as HTMLImageElement).style.display = 'none' }}
+                  />
+                  <div className="absolute inset-0 bg-gradient-to-t from-night-900/90 via-night-900/20 to-transparent" />
+                  <div className="absolute bottom-0 left-0 right-0 p-4">
+                    <span className="text-white font-bold tracking-wider uppercase text-xs block">
+                      {cat.name}
+                    </span>
+                    {cat._count && (
+                      <span className="text-cyan-glow/60 text-[10px] tracking-wider">
+                        {cat._count.products} products
+                      </span>
+                    )}
+                  </div>
+                  <div className="absolute top-3 right-3 opacity-0 group-hover:opacity-100 transition-opacity duration-300">
+                    <svg className="w-5 h-5 text-cyan-glow" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17 8l4 4m0 0l-4 4m4-4H3" />
+                    </svg>
+                  </div>
+                </Link>
+              ))}
+            </div>
+          )}
+        </div>
+      </section>
+
+      {/* Featured Products */}
+      <section className="bg-night-900 py-24 px-6 border-t border-white/5">
+        <div className="max-w-7xl mx-auto space-y-12">
+          <div className="flex justify-between items-end">
+            <div className="space-y-2">
+              <p className="text-cyan-glow uppercase tracking-[0.3em] text-xs font-semibold opacity-70">
+                Top Picks
+              </p>
+              <h2 className="text-4xl font-bold">Featured Products</h2>
+            </div>
+            <Link
+              to="/shop"
+              className="text-cyan-glow text-sm font-bold uppercase tracking-widest hover:underline decoration-cyan-glow/30"
+            >
+              View All →
+            </Link>
+          </div>
+
+          {loading ? (
+            <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
+              {Array.from({ length: 3 }).map((_, i) => (
+                <div key={i} className="rounded-2xl bg-white/5 animate-pulse h-96" />
+              ))}
+            </div>
+          ) : (
+            <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
+              {featuredProducts.map((p) => (
+                <ProductCard key={p.id} product={p} />
+              ))}
+            </div>
+          )}
+        </div>
+      </section>
+
+      <Footer categories={categories} />
+    </div>
+  )
+}

apps/spa/src/pages/NotFoundPage.tsx

@@ -0,0 +1,55 @@
+import { Link } from 'react-router-dom'
+
+export default function NotFoundPage() {
+  return (
+    <div className="min-h-screen flex items-center justify-center px-6 bg-night-900">
+      {/* Background glow */}
+      <div className="absolute inset-0 pointer-events-none overflow-hidden">
+        <div className="absolute top-1/3 left-1/2 -translate-x-1/2 -translate-y-1/2 w-96 h-96 bg-cyan-glow/5 rounded-full blur-3xl" />
+        <div className="absolute bottom-1/4 right-1/4 w-64 h-64 bg-night-700/10 rounded-full blur-3xl" />
+      </div>
+
+      <div className="relative z-10 text-center space-y-8 max-w-lg">
+        {/* 404 Large */}
+        <div className="relative">
+          <div className="text-[10rem] font-bold leading-none text-transparent bg-clip-text bg-gradient-to-b from-white/20 to-white/5 select-none">
+            404
+          </div>
+          <div className="absolute inset-0 flex items-center justify-center">
+            <div className="text-5xl animate-float">🌿</div>
+          </div>
+        </div>
+
+        <div className="space-y-3">
+          <h1 className="text-3xl font-bold">Page Not Found</h1>
+          <p className="text-slate-400 leading-relaxed">
+            The page you're looking for seems to have drifted away like morning mist. Let's guide you back to serenity.
+          </p>
+        </div>
+
+        <div className="flex flex-col sm:flex-row gap-4 justify-center pt-2">
+          <Link
+            to="/"
+            className="px-8 py-3.5 bg-white text-night-900 font-bold rounded-lg tracking-widest uppercase hover:bg-cyan-glow hover:shadow-[0_0_25px_rgba(102,252,241,0.4)] transition-all duration-500 text-sm"
+          >
+            Go Home
+          </Link>
+          <Link
+            to="/shop"
+            className="px-8 py-3.5 glass text-white font-bold rounded-lg tracking-widest uppercase hover:bg-white/10 transition-all duration-300 border border-white/10 text-sm"
+          >
+            Browse Products
+          </Link>
+        </div>
+
+        <div className="pt-4 border-t border-white/5">
+          <div className="flex justify-center gap-6 text-xs text-slate-500">
+            <Link to="/scent-guide" className="hover:text-white transition-colors">Scent Guide</Link>
+            <Link to="/faq" className="hover:text-white transition-colors">FAQ</Link>
+            <Link to="/contact" className="hover:text-white transition-colors">Contact</Link>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}

apps/spa/src/pages/OrderSuccessPage.tsx

@@ -0,0 +1,227 @@
+import { useState, useEffect } from 'react'
+import { useParams, Link } from 'react-router-dom'
+import Navbar from '../components/Navbar'
+import Footer from '../components/Footer'
+import { API_BASE, formatPrice, type Order, type StoreSettings, type Category } from '../types'
+import { CheckCircle2, UploadCloud, Loader2, Copy } from 'lucide-react'
+
+export default function OrderSuccessPage() {
+  const { id } = useParams<{ id: string }>()
+  const [order, setOrder] = useState<Order | null>(null)
+  const [settings, setSettings] = useState<StoreSettings | null>(null)
+  const [categories, setCategories] = useState<Category[]>([])
+  
+  const [loading, setLoading] = useState(true)
+  const [uploading, setUploading] = useState(false)
+  const [copied, setCopied] = useState(false)
+
+  useEffect(() => {
+    Promise.all([
+      fetch(`${API_BASE}/orders/${id}`).then(r => r.json()),
+      fetch(`${API_BASE}/settings`).then(r => r.json()),
+      fetch(`${API_BASE}/categories`).then(r => r.json())
+    ])
+    .then(([orderData, settingsData, catData]) => {
+      setOrder(orderData)
+      setSettings(settingsData)
+      setCategories(catData)
+    })
+    .catch(console.error)
+    .finally(() => setLoading(false))
+  }, [id])
+
+  const copyToClipboard = () => {
+    if (!settings) return
+    navigator.clipboard.writeText(settings.bankAccountNumber)
+    setCopied(true)
+    setTimeout(() => setCopied(false), 2000)
+  }
+
+  const handleFileUpload = async (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0]
+    if (!file || !order) return
+
+    setUploading(true)
+    const formData = new FormData()
+    formData.append('file', file)
+
+    try {
+      // 1. Upload file
+      const uploadRes = await fetch(`${API_BASE}/upload`, {
+        method: 'POST',
+        body: formData
+      })
+      const uploadData = await uploadRes.json()
+
+      if (uploadData.url) {
+        // 2. Update order slip
+        const updateRes = await fetch(`${API_BASE}/orders/${order.id}/slip`, {
+          method: 'PATCH',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ paymentSlipUrl: uploadData.url })
+        })
+        const updatedOrder = await updateRes.json()
+        setOrder(updatedOrder)
+      }
+    } catch (err) {
+      console.error(err)
+      alert("Failed to upload payment slip.")
+    } finally {
+      setUploading(false)
+    }
+  }
+
+  if (loading) {
+    return (
+      <div className="min-h-screen">
+        <Navbar categories={categories} />
+        <div className="flex items-center justify-center pt-40">
+          <Loader2 className="w-8 h-8 text-cyan-glow animate-spin" />
+        </div>
+      </div>
+    )
+  }
+
+  if (!order || (order as any).error) {
+    return (
+      <div className="min-h-screen text-center pt-40">
+        <Navbar categories={categories} />
+        <h1 className="text-2xl font-bold mb-4">Order Not Found</h1>
+        <Link to="/shop" className="text-cyan-glow hover:underline">Return to Shop</Link>
+      </div>
+    )
+  }
+
+  return (
+    <div className="min-h-screen">
+      <Navbar categories={categories} />
+
+      <main className="max-w-3xl mx-auto px-6 pt-32 pb-24 space-y-12 animate-fade-in">
+        
+        {/* Header */}
+        <div className="text-center space-y-6">
+          <div className="w-20 h-20 bg-cyan-glow/10 rounded-full flex items-center justify-center mx-auto border border-cyan-glow/20">
+            <CheckCircle2 className="w-10 h-10 text-cyan-glow" />
+          </div>
+          <div>
+            <h1 className="text-4xl font-bold">Order Received</h1>
+            <p className="text-slate-400 mt-2">Thank you! Your order #{order.id.toString().padStart(4, '0')} has been placed.</p>
+          </div>
+        </div>
+
+        {/* Order Summary */}
+        <div className="bg-night-900/50 p-8 rounded-2xl border border-white/5 space-y-6">
+          <h2 className="text-sm font-bold uppercase tracking-widest text-cyan-glow border-b border-white/10 pb-4">Order Items</h2>
+          <div className="space-y-4">
+            {order.items.map(item => (
+              <div key={item.id} className="flex items-center gap-4 text-sm">
+                <div className="w-12 h-12 rounded-lg bg-white/5 flex-shrink-0 overflow-hidden">
+                  <img src={item.productImage || '/images/oil_ozone.png'} alt="Product" className="w-full h-full object-cover" />
+                </div>
+                <div className="flex-1">
+                  <p className="font-bold">{item.productName}</p>
+                  <p className="text-slate-400 text-xs mt-0.5">{item.variantSize} x {item.quantity}</p>
+                </div>
+                <p className="font-medium text-cyan-glow">{formatPrice(item.priceAtPurchase * item.quantity)}</p>
+              </div>
+            ))}
+          </div>
+          <div className="border-t border-white/10 pt-4 space-y-3 font-medium text-sm text-slate-300">
+            <div className="flex justify-between">
+              <span>Subtotal</span>
+              <span>{formatPrice(order.totalAmount - order.shippingFee)}</span>
+            </div>
+            <div className="flex justify-between">
+              <span>Shipping Fee</span>
+              <span>{formatPrice(order.shippingFee)}</span>
+            </div>
+            <div className="border-t border-white/10 pt-3 mt-3 flex justify-between text-lg font-bold text-white">
+              <span>Total</span>
+              <span className="text-cyan-glow">{formatPrice(order.totalAmount)}</span>
+            </div>
+          </div>
+        </div>
+
+        {/* Banking Details */}
+        {settings && order.status === 'PENDING_PAYMENT' && (
+          <div className="bg-night-900/50 p-8 rounded-2xl border border-white/5 text-center space-y-6 relative overflow-hidden">
+            <div className="absolute top-0 inset-x-0 h-1 bg-gradient-to-r from-transparent via-cyan-glow to-transparent opacity-50" />
+            
+            <h2 className="text-xs uppercase font-bold tracking-widest text-slate-400">Payment Required</h2>
+            <div className="text-3xl font-bold text-cyan-glow">
+              {formatPrice(order.totalAmount)}
+            </div>
+
+            <div className="bg-night-950 p-6 rounded-xl border border-white/5 inline-block text-left w-full max-w-md mx-auto space-y-4">
+              <div>
+                <p className="text-xs text-slate-500 uppercase tracking-widest">Bank</p>
+                <p className="font-bold">{settings.bankName}</p>
+              </div>
+              <div className="flex items-center justify-between gap-4">
+                <div>
+                  <p className="text-xs text-slate-500 uppercase tracking-widest">Account Number</p>
+                  <p className="font-mono text-xl font-bold tracking-widest text-cyan-glow">{settings.bankAccountNumber}</p>
+                </div>
+                <button 
+                  onClick={copyToClipboard}
+                  className="p-2 glass rounded-lg hover:bg-white/10 transition-colors shrink-0"
+                  title="Copy account number"
+                >
+                  {copied ? <CheckCircle2 className="w-5 h-5 text-emerald-400" /> : <Copy className="w-5 h-5 text-slate-300" />}
+                </button>
+              </div>
+              <div>
+                <p className="text-xs text-slate-500 uppercase tracking-widest">Account Name</p>
+                <p className="font-bold">{settings.bankAccountName}</p>
+              </div>
+            </div>
+            <p className="text-xs text-slate-500">Please transfer the exact amount and upload your slip below.</p>
+          </div>
+        )}
+
+        {/* Upload Status */}
+        <div className="bg-night-900/50 p-8 rounded-2xl border border-white/5 space-y-6">
+          <h2 className="text-sm font-bold uppercase tracking-widest text-cyan-glow border-b border-white/10 pb-4">Payment Slip Verification</h2>
+          
+          {order.paymentSlipUrl ? (
+             <div className="flex flex-col items-center justify-center space-y-4 py-4">
+                <div className="w-16 h-16 bg-emerald-500/10 rounded-full flex items-center justify-center">
+                  <CheckCircle2 className="w-8 h-8 text-emerald-400" />
+                </div>
+                <div className="text-center">
+                  <p className="font-bold text-lg text-emerald-400">Slip Uploaded Successfully</p>
+                  <p className="text-sm text-slate-400 mt-1">Status: {order.status}</p>
+                  <p className="text-xs mt-2 text-slate-500">We will verify your payment and process your order shortly.</p>
+                </div>
+                <img src={order.paymentSlipUrl} alt="Slip" className="w-48 rounded-xl border border-white/10 mt-4 opacity-50 hover:opacity-100 transition-opacity" />
+             </div>
+          ) : (
+            <div className="relative border-2 border-dashed border-white/10 rounded-xl p-10 hover:border-cyan-glow/50 transition-colors group cursor-pointer overflow-hidden">
+               <input 
+                  type="file" 
+                  accept="image/*"
+                  onChange={handleFileUpload}
+                  disabled={uploading}
+                  className="absolute inset-0 w-full h-full opacity-0 cursor-pointer disabled:cursor-not-allowed" 
+                />
+                <div className="text-center space-y-4">
+                   {uploading ? (
+                     <Loader2 className="w-12 h-12 text-cyan-glow animate-spin mx-auto" />
+                   ) : (
+                     <UploadCloud className="w-12 h-12 text-slate-500 group-hover:text-cyan-glow transition-colors mx-auto" />
+                   )}
+                   <div>
+                     <p className="font-bold">{uploading ? 'Uploading...' : 'Click or drag to upload slip'}</p>
+                     <p className="text-xs text-slate-500 mt-1">Supports JPG, PNG (Max 5MB)</p>
+                   </div>
+                </div>
+            </div>
+          )}
+        </div>
+
+      </main>
+
+      <Footer categories={categories} />
+    </div>
+  )
+}

apps/spa/src/pages/ProductDetailPage.tsx

@@ -0,0 +1,304 @@
+import { useState, useEffect } from 'react'
+import { useParams, Link } from 'react-router-dom'
+import Navbar from '../components/Navbar'
+import Footer from '../components/Footer'
+import ProductCard from '../components/ProductCard'
+import { API_BASE, getCategoryImage, formatPrice, type Category, type Product } from '../types'
+import { useCartStore } from '../store/cartStore'
+
+export default function ProductDetailPage() {
+  const { id } = useParams<{ id: string }>()
+
+  const [categories, setCategories] = useState<Category[]>([])
+  const [product, setProduct] = useState<Product | null>(null)
+  const [related, setRelated] = useState<Product[]>([])
+  const [selectedVariant, setSelectedVariant] = useState<number>(0)
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState<string | null>(null)
+  
+  const { addToCart } = useCartStore()
+
+  useEffect(() => {
+    fetch(`${API_BASE}/categories`)
+      .then((r) => r.json())
+      .then(setCategories)
+      .catch(console.error)
+  }, [])
+
+  useEffect(() => {
+    if (!id) return
+    setLoading(true)
+    setError(null)
+    setSelectedVariant(0)
+
+    fetch(`${API_BASE}/products/${id}`)
+      .then(async (r) => {
+        if (!r.ok) throw new Error('Product not found')
+        return r.json()
+      })
+      .then(async (data: Product) => {
+        setProduct(data)
+        // Fetch related (same category, different product)
+        const relRes = await fetch(`${API_BASE}/products?categoryId=${data.category.id}`)
+        const relJson = await relRes.json()
+        const relData: Product[] = relJson.data || []
+        setRelated(relData.filter((p) => p.id !== data.id).slice(0, 6))
+      })
+      .catch((err) => setError(err.message))
+      .finally(() => setLoading(false))
+  }, [id])
+
+  if (loading) {
+    return (
+      <div className="min-h-screen">
+        <Navbar categories={categories} />
+        <div className="pt-32 px-6 max-w-7xl mx-auto animate-pulse space-y-8">
+          <div className="h-6 w-48 bg-white/5 rounded" />
+          <div className="grid md:grid-cols-2 gap-12">
+            <div className="h-96 bg-white/5 rounded-2xl" />
+            <div className="space-y-4">
+              <div className="h-8 w-3/4 bg-white/5 rounded" />
+              <div className="h-4 w-1/2 bg-white/5 rounded" />
+              <div className="h-12 w-1/3 bg-white/5 rounded" />
+            </div>
+          </div>
+        </div>
+        <Footer categories={categories} />
+      </div>
+    )
+  }
+
+  if (error || !product) {
+    return (
+      <div className="min-h-screen">
+        <Navbar categories={categories} />
+        <div className="pt-40 text-center space-y-4">
+          <p className="text-4xl">⚠️</p>
+          <p className="text-slate-400">{error ?? 'Product not found'}</p>
+          <Link to="/shop" className="text-cyan-glow hover:underline text-sm">
+            Back to Shop
+          </Link>
+        </div>
+        <Footer categories={categories} />
+      </div>
+    )
+  }
+
+  const currentVariant = product.variants[selectedVariant]
+
+  const handleAddToCart = () => {
+    if (!product || !currentVariant) return
+    addToCart({
+      productId: product.id,
+      variantId: currentVariant.id,
+      quantity: 1,
+      price: currentVariant.price || product.price || 0,
+      productName: product.scent.name,
+      variantSize: currentVariant.size,
+      productImage: product.images?.[0]?.url || getCategoryImage(product.category.name)
+    })
+  }
+
+  return (
+    <div className="min-h-screen pb-24 md:pb-0">
+      <Navbar categories={categories} />
+
+      <div className="max-w-7xl mx-auto px-6 pt-32 pb-24 space-y-24">
+        {/* Breadcrumb */}
+        <div className="flex items-center gap-2 text-xs text-slate-400 uppercase tracking-widest">
+          <Link to="/" className="hover:text-white transition-colors">Home</Link>
+          <span>/</span>
+          <Link to="/shop" className="hover:text-white transition-colors">Shop</Link>
+          <span>/</span>
+          <Link to={`/category/${product.category.id}`} className="hover:text-white transition-colors">
+            {product.category.name}
+          </Link>
+          <span>/</span>
+          <span className="text-cyan-glow">{product.scent.name}</span>
+        </div>
+
+        {/* Product Detail */}
+        <div className="grid md:grid-cols-2 gap-16 items-center">
+          {/* Image */}
+          <div className="relative rounded-2xl overflow-hidden h-[480px] group">
+            <img
+              src={product.images?.[0]?.url || getCategoryImage(product.category.name)}
+              className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-700"
+              alt={product.scent.name}
+              onError={(e) => { (e.target as HTMLImageElement).style.display = 'none' }}
+            />
+            <div className="absolute inset-0 bg-gradient-to-t from-night-900/50 to-transparent" />
+            <div className="absolute top-6 left-6 glass px-3 py-1.5 rounded-full text-[10px] font-bold uppercase tracking-widest text-cyan-glow border border-cyan-glow/20">
+              {product.category.name}
+            </div>
+          </div>
+
+          {/* Info */}
+          <div className="space-y-8">
+            <div className="space-y-2">
+              <p className="text-cyan-glow uppercase tracking-[0.3em] text-xs font-semibold opacity-80">
+                {product.category.name}
+              </p>
+              <h1 className="text-5xl font-bold leading-tight">
+                {product.scent.name}
+              </h1>
+              <p className="text-slate-400 text-sm uppercase tracking-widest">
+                Premium Collection
+              </p>
+            </div>
+
+            {product.description && (
+              <p className="text-slate-300 leading-relaxed">{product.description}</p>
+            )}
+
+            {/* Price */}
+            <div className="flex items-baseline gap-3">
+              <span className="text-4xl font-bold text-cyan-glow">
+                {formatPrice(currentVariant?.price)}
+              </span>
+              {currentVariant && (
+                <span className="text-slate-400 text-sm">/ {currentVariant.size}</span>
+              )}
+            </div>
+
+            {/* Variant Selector */}
+            <div className="space-y-3">
+              <p className="text-xs uppercase tracking-widest text-slate-400 font-semibold">
+                Select Size
+              </p>
+              <div className="flex flex-wrap gap-3">
+                {product.variants.map((v, i) => (
+                  <button
+                    key={v.id}
+                    onClick={() => setSelectedVariant(i)}
+                    className={`px-5 py-2.5 rounded-lg text-sm font-bold uppercase tracking-widest transition-all duration-300 ${
+                      selectedVariant === i
+                        ? 'bg-cyan-glow text-night-900 shadow-[0_0_15px_rgba(102,252,241,0.4)]'
+                        : 'glass hover:bg-white/10'
+                    }`}
+                  >
+                    {v.size}
+                    <span className={`block text-[10px] mt-0.5 ${selectedVariant === i ? 'text-night-800' : 'text-slate-400'}`}>
+                      {formatPrice(v.price)}
+                    </span>
+                  </button>
+                ))}
+              </div>
+            </div>
+
+            {/* Actions */}
+            <div className="flex gap-4">
+              <button 
+                onClick={handleAddToCart}
+                className="flex-1 py-4 bg-white text-night-900 font-bold rounded-lg tracking-widest uppercase hover:bg-cyan-glow hover:shadow-[0_0_25px_rgba(102,252,241,0.4)] transition-all duration-500"
+              >
+                Add to Cart
+              </button>
+              <button className="glass p-4 rounded-lg hover:bg-white/10 transition-all">
+                <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" />
+                </svg>
+              </button>
+            </div>
+
+            {/* Meta */}
+            <div className="border-t border-white/5 pt-6 grid grid-cols-2 gap-4 text-sm text-slate-400">
+              <div>
+                <span className="text-xs uppercase tracking-widest block mb-1">Scent</span>
+                <span className="text-white font-medium">{product.scent.name}</span>
+              </div>
+              <div>
+                <span className="text-xs uppercase tracking-widest block mb-1">Category</span>
+                <Link
+                  to={`/category/${product.category.id}`}
+                  className="text-white font-medium hover:text-cyan-glow transition-colors"
+                >
+                  {product.category.name}
+                </Link>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        {/* Full Details Section */}
+        {product.details && (
+          <div className="pt-16 border-t border-white/5 space-y-6">
+            <h2 className="text-3xl font-bold">Product Details</h2>
+            <div 
+              className="prose prose-invert prose-lg max-w-4xl product-editorial"
+              dangerouslySetInnerHTML={{ __html: product.details }}
+            />
+          </div>
+        )}
+
+        {/* Related Products */}
+        {related.length > 0 && (
+          <div className="space-y-8 border-t border-white/5 pt-16">
+            <div className="flex justify-between items-end">
+              <div>
+                <p className="text-cyan-glow uppercase tracking-[0.3em] text-xs font-semibold opacity-70 mb-2">
+                  More {product.category.name}
+                </p>
+                <h2 className="text-3xl font-bold">Related Products</h2>
+              </div>
+              <Link
+                to={`/category/${product.category.id}`}
+                className="text-cyan-glow text-sm font-bold uppercase tracking-widest hover:underline"
+              >
+                View All →
+              </Link>
+            </div>
+            <div className="grid grid-cols-2 md:grid-cols-3 gap-4 md:gap-8">
+              {related.map((p) => (
+                <ProductCard key={p.id} product={p} />
+              ))}
+            </div>
+          </div>
+        )}
+      </div>
+
+      <Footer categories={categories} />
+
+      {/* Mobile Sticky Add to Cart Bar */}
+      <div className="md:hidden fixed bottom-0 left-0 right-0 p-4 bg-night-950/95 backdrop-blur-xl border-t border-white/10 z-40 animate-fade-in flex flex-col gap-3 shadow-[0_-10px_30px_rgba(0,0,0,0.5)]">
+        
+        {/* Mobile Variant Selector */}
+        {product.variants && product.variants.length > 1 && (
+          <div className="flex gap-2 overflow-x-auto pb-1" style={{ scrollbarWidth: 'none', msOverflowStyle: 'none' }}>
+            {product.variants.map((v, i) => (
+              <button
+                key={`mobile-v-${v.id}`}
+                onClick={() => setSelectedVariant(i)}
+                className={`flex-shrink-0 px-4 py-2 rounded-lg text-[10px] font-bold uppercase tracking-widest transition-all border whitespace-nowrap ${
+                  selectedVariant === i 
+                    ? 'bg-cyan-glow/10 border-cyan-glow text-cyan-glow' 
+                    : 'bg-white/5 border-white/10 text-slate-400'
+                }`}
+              >
+                {v.size}
+              </button>
+            ))}
+          </div>
+        )}
+
+        <div className="flex items-center justify-between gap-4">
+          <div className="flex flex-col">
+            <span className="text-[10px] uppercase tracking-widest text-slate-400">
+              {product.variants && product.variants.length > 1 ? currentVariant?.size : 'Total Price'}
+            </span>
+            <span className="text-xl font-bold text-cyan-glow">
+              {formatPrice(currentVariant?.price)}
+            </span>
+          </div>
+          <button 
+            onClick={handleAddToCart}
+            className="flex-1 py-3.5 bg-cyan-glow text-night-900 font-bold rounded-lg tracking-widest uppercase hover:brightness-110 shadow-[0_0_15px_rgba(102,252,241,0.3)] transition-all flex justify-center items-center gap-2"
+          >
+            Add to Cart
+          </button>
+        </div>
+      </div>
+
+    </div>
+  )
+}

apps/spa/src/pages/ScentGuidePage.tsx

@@ -0,0 +1,68 @@
+import { useState, useEffect } from 'react'
+import { Link } from 'react-router-dom'
+import Navbar from '../components/Navbar'
+import Footer from '../components/Footer'
+import { API_BASE, type Category, type Article } from '../types'
+
+export default function ScentGuidePage() {
+  const [categories, setCategories] = useState<Category[]>([])
+  const [articles, setArticles] = useState<Article[]>([])
+
+  useEffect(() => {
+    fetch(`${API_BASE}/categories`).then(r => r.json()).then(setCategories).catch(console.error)
+    fetch(`${API_BASE}/articles?publishedOnly=true`).then(r => r.json()).then(setArticles).catch(console.error)
+  }, [])
+
+  return (
+    <div className="min-h-screen flex flex-col">
+      <Navbar categories={categories} />
+
+      {/* Header */}
+      <div className="pt-32 pb-16 px-6 text-center space-y-4 border-b border-white/5 bg-night-800/20">
+        <p className="text-cyan-glow uppercase tracking-[0.4em] text-xs font-semibold opacity-70">Journal</p>
+        <h1 className="text-5xl font-bold">Scent Guide</h1>
+        <p className="text-slate-400 max-w-lg mx-auto">
+          Explore our collection of articles, guides, and sensory knowledge.
+        </p>
+      </div>
+
+      <div className="flex-1 max-w-7xl mx-auto px-6 py-16 w-full">
+        {articles.length === 0 ? (
+          <div className="text-center text-slate-500 italic py-20">
+            Articles coming soon. Check back later!
+          </div>
+        ) : (
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
+            {articles.map(article => (
+              <Link 
+                key={article.id} 
+                to={`/article/${article.slug}`}
+                className="group block bg-night-950 rounded-2xl overflow-hidden border border-white/5 hover:border-cyan-glow/30 transition-all duration-300 hover:-translate-y-1 hover:shadow-2xl flex flex-col"
+              >
+                <div className="aspect-[4/3] bg-night-900 overflow-hidden shrink-0">
+                  {article.coverImage ? (
+                    <img src={article.coverImage} alt={article.title} className="w-full h-full object-cover opacity-80 group-hover:opacity-100 group-hover:scale-105 transition-all duration-500" />
+                  ) : (
+                    <div className="w-full h-full bg-white/5 flex items-center justify-center">
+                      <span className="text-slate-600 text-sm tracking-widest uppercase">No Image</span>
+                    </div>
+                  )}
+                </div>
+                <div className="p-6 space-y-3 flex-1 flex flex-col">
+                  <p className="text-[10px] text-cyan-glow font-bold tracking-widest uppercase">
+                    {new Date(article.createdAt).toLocaleDateString()}
+                  </p>
+                  <h3 className="text-xl font-bold leading-tight group-hover:text-cyan-glow transition-colors">{article.title}</h3>
+                  {/* Remove HTML tags for purely excerpt preview */}
+                  <div className="text-slate-400 text-sm line-clamp-3" dangerouslySetInnerHTML={{ __html: article.content }} />
+                </div>
+              </Link>
+            ))}
+          </div>
+        )}
+      </div>
+
+      <Footer categories={categories} />
+    </div>
+  )
+}

apps/spa/src/pages/SearchPage.tsx

@@ -0,0 +1,138 @@
+import { useState, useEffect, useCallback } from 'react'
+import { useSearchParams, Link } from 'react-router-dom'
+import Navbar from '../components/Navbar'
+import Footer from '../components/Footer'
+import ProductCard from '../components/ProductCard'
+import { API_BASE, type Category, type Product } from '../types'
+
+export default function SearchPage() {
+  const [searchParams, setSearchParams] = useSearchParams()
+  const query = searchParams.get('q') ?? ''
+
+  const [input, setInput] = useState(query)
+  const [categories, setCategories] = useState<Category[]>([])
+  const [products, setProducts] = useState<Product[]>([])
+  const [loading, setLoading] = useState(false)
+  const [searched, setSearched] = useState(false)
+
+  useEffect(() => {
+    fetch(`${API_BASE}/categories`).then(r => r.json()).then(setCategories).catch(console.error)
+  }, [])
+
+  const doSearch = useCallback(async (q: string) => {
+    if (!q.trim()) { setProducts([]); setSearched(false); return }
+    setLoading(true)
+    setSearched(true)
+    try {
+      const res = await fetch(`${API_BASE}/products?search=${encodeURIComponent(q)}`)
+      const paginated = await res.json()
+      setProducts(paginated.data || [])
+    } catch (err) {
+      console.error(err)
+    } finally {
+      setLoading(false)
+    }
+  }, [])
+
+  // Search when URL query changes
+  useEffect(() => {
+    setInput(query)
+    doSearch(query)
+  }, [query, doSearch])
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault()
+    setSearchParams(input.trim() ? { q: input.trim() } : {})
+  }
+
+  return (
+    <div className="min-h-screen">
+      <Navbar categories={categories} />
+
+      {/* Search Header */}
+      <div className="pt-32 pb-16 px-6 bg-night-800/20 border-b border-white/5">
+        <div className="max-w-3xl mx-auto space-y-6 text-center">
+          <p className="text-cyan-glow uppercase tracking-[0.4em] text-xs font-semibold opacity-70">
+            Discover
+          </p>
+          <h1 className="text-5xl font-bold">Search Products</h1>
+
+          <form onSubmit={handleSubmit} className="relative">
+            <div className="flex glass border border-white/10 rounded-2xl overflow-hidden focus-within:border-cyan-glow/40 transition-colors">
+              <svg className="w-5 h-5 text-slate-400 m-4 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
+              </svg>
+              <input
+                type="text"
+                value={input}
+                onChange={(e) => setInput(e.target.value)}
+                placeholder="Search by scent name, category..."
+                className="bg-transparent border-none outline-none text-base p-4 pl-0 w-full text-white placeholder-slate-500"
+                autoFocus
+              />
+              <button
+                type="submit"
+                className="bg-white text-night-900 px-8 font-bold text-xs uppercase tracking-widest hover:bg-cyan-glow transition-colors shrink-0"
+              >
+                Search
+              </button>
+            </div>
+          </form>
+
+          {/* Quick category links */}
+          <div className="flex flex-wrap justify-center gap-2 pt-2">
+            {categories.map((cat) => (
+              <Link
+                key={cat.id}
+                to={`/search?q=${encodeURIComponent(cat.name)}`}
+                className="glass px-4 py-1.5 rounded-full text-xs font-medium hover:border-cyan-glow/30 hover:text-cyan-glow transition-all duration-300"
+              >
+                {cat.name}
+              </Link>
+            ))}
+          </div>
+        </div>
+      </div>
+
+      {/* Results */}
+      <div className="max-w-7xl mx-auto px-6 py-16 space-y-8">
+        {!searched && !query && (
+          <div className="text-center py-20 space-y-3 text-slate-500">
+            <p className="text-5xl">🔍</p>
+            <p className="text-lg text-slate-400">Type something to discover our collection</p>
+          </div>
+        )}
+
+        {searched && (
+          <p className="text-slate-400 text-sm">
+            {loading ? 'Searching...' : `${products.length} result${products.length !== 1 ? 's' : ''} for `}
+            {!loading && <span className="text-white font-semibold">"{query}"</span>}
+          </p>
+        )}
+
+        {loading ? (
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
+            {Array.from({ length: 6 }).map((_, i) => (
+              <div key={i} className="rounded-2xl bg-white/5 animate-pulse h-96" />
+            ))}
+          </div>
+        ) : searched && products.length === 0 ? (
+          <div className="text-center py-20 space-y-4">
+            <p className="text-5xl">🌿</p>
+            <p className="text-xl text-slate-400">No results found</p>
+            <p className="text-slate-500 text-sm">Try a different keyword or browse our categories</p>
+            <Link to="/shop" className="inline-block mt-4 px-8 py-3 bg-white/10 hover:bg-white hover:text-night-900 text-white font-bold rounded-lg uppercase tracking-widest text-xs transition-all duration-300">
+              Browse All Products
+            </Link>
+          </div>
+        ) : (
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
+            {products.map((p) => <ProductCard key={p.id} product={p} />)}
+          </div>
+        )}
+      </div>
+
+      <Footer categories={categories} />
+    </div>
+  )
+}

apps/spa/src/pages/ShopPage.tsx

@@ -0,0 +1,210 @@
+import { useState, useEffect, useRef } from 'react'
+import { Link, useLocation } from 'react-router-dom'
+import Navbar from '../components/Navbar'
+import Footer from '../components/Footer'
+import ProductCard from '../components/ProductCard'
+import { API_BASE, type Category, type Product } from '../types'
+
+export default function ShopPage() {
+  const [categories, setCategories] = useState<Category[]>([])
+  const [products, setProducts] = useState<Product[]>([])
+  const [activeCategory, setActiveCategory] = useState<number | null>(null)
+  const [searchInput, setSearchInput] = useState('')
+  const [searchQuery, setSearchQuery] = useState('')
+  const location = useLocation()
+  
+  // Local progressive rendering
+  const [displayCount, setDisplayCount] = useState(24)
+  const loaderRef = useRef<HTMLDivElement>(null)
+
+  const [totalProducts, setTotalProducts] = useState(0)
+
+  const [loading, setLoading] = useState(true)
+  const [productsLoading, setProductsLoading] = useState(false)
+
+  // Handle coupon from URL
+  useEffect(() => {
+    const params = new URLSearchParams(location.search)
+    const coupon = params.get('coupon')
+    if (coupon) {
+      localStorage.setItem('irelax_active_coupon', coupon)
+      // Optionally clean URL
+      window.history.replaceState({}, document.title, window.location.pathname)
+    }
+  }, [location])
+
+  // Fetch categories
+  useEffect(() => {
+    fetch(`${API_BASE}/categories`)
+      .then((r) => r.json())
+      .then((data: Category[]) => {
+        setCategories(data)
+        setLoading(false)
+      })
+      .catch(console.error)
+  }, [])
+
+  // Debounce search input
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setSearchQuery(searchInput)
+    }, 400)
+    return () => clearTimeout(timer)
+  }, [searchInput])
+
+  // Reset scroll and displayCount when category or search changes
+  useEffect(() => {
+    window.scrollTo({ top: 0, behavior: 'smooth' })
+    setDisplayCount(24)
+  }, [activeCategory, searchQuery])
+
+  // Fetch products
+  useEffect(() => {
+    setProductsLoading(true)
+    
+    const params = new URLSearchParams()
+    params.append('limit', '1000') // fetch all matching items locally
+    if (activeCategory) params.append('categoryId', activeCategory.toString())
+    if (searchQuery.trim()) params.append('search', searchQuery.trim())
+
+    fetch(`${API_BASE}/products?${params.toString()}`)
+      .then((r) => r.json())
+      .then((data: { data: Product[], meta?: any }) => {
+        setProducts(data.data || [])
+        if (data.meta) {
+          setTotalProducts(data.meta.total || 0)
+        }
+      })
+      .catch(console.error)
+      .finally(() => setProductsLoading(false))
+  }, [activeCategory, searchQuery])
+
+  // Intersection Observer for infinite scroll
+  useEffect(() => {
+    const observer = new IntersectionObserver(
+      (entries) => {
+        if (entries[0].isIntersecting && products.length > displayCount) {
+          setDisplayCount((prev) => Math.min(prev + 12, products.length))
+        }
+      },
+      { threshold: 0.1, rootMargin: '200px' }
+    )
+
+    if (loaderRef.current) observer.observe(loaderRef.current)
+    return () => observer.disconnect()
+  }, [products.length, displayCount, productsLoading])
+
+  return (
+    <div className="min-h-screen">
+      <Navbar categories={categories} />
+
+      {/* Page Header */}
+      <div className="pt-32 pb-12 px-6 text-center space-y-4 border-b border-white/5 bg-night-800/30">
+        <p className="text-cyan-glow uppercase tracking-[0.4em] text-xs font-semibold opacity-70">
+          All Products
+        </p>
+        <h1 className="text-5xl font-bold tracking-tight">The Collection</h1>
+        <p className="text-slate-400 max-w-md mx-auto">
+          Browse our full range of premium aroma products — crafted to elevate every space.
+        </p>
+
+        {/* Search */}
+        <div className="max-w-md mx-auto mt-6">
+          <div className="flex glass border border-white/10 rounded-xl overflow-hidden">
+            <svg className="w-4 h-4 text-slate-400 m-3.5 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
+            </svg>
+            <input
+              type="text"
+              placeholder="Search by scent or category..."
+              value={searchInput}
+              onChange={(e) => setSearchInput(e.target.value)}
+              className="bg-transparent border-none outline-none text-sm p-2 w-full text-white placeholder-slate-500"
+            />
+          </div>
+        </div>
+      </div>
+
+      <div className="max-w-7xl mx-auto px-6 py-12 space-y-10">
+        {/* Category Filter Tabs */}
+        <div className="flex flex-wrap gap-3">
+          <button
+            onClick={() => setActiveCategory(null)}
+            className={`px-5 py-2 rounded-full text-xs font-bold uppercase tracking-widest transition-all duration-300 ${
+              activeCategory === null
+                ? 'bg-cyan-glow text-night-900 shadow-[0_0_15px_rgba(102,252,241,0.3)]'
+                : 'glass hover:bg-white/10'
+            }`}
+          >
+            All
+          </button>
+          {categories.map((cat) => (
+            <button
+              key={cat.id}
+              onClick={() => setActiveCategory(cat.id)}
+              className={`px-5 py-2 rounded-full text-xs font-bold uppercase tracking-widest transition-all duration-300 ${
+                activeCategory === cat.id
+                  ? 'bg-cyan-glow text-night-900 shadow-[0_0_15px_rgba(102,252,241,0.3)]'
+                  : 'glass hover:bg-white/10'
+              }`}
+            >
+              {cat.name}
+              {cat._count && (
+                <span className="ml-2 opacity-60">({cat._count.products})</span>
+              )}
+            </button>
+          ))}
+        </div>
+
+        {/* Results count */}
+        {(!loading) && (
+          <div className="flex items-center justify-between">
+            <p className="text-slate-500 text-sm">
+              {productsLoading ? 'Loading...' : `${totalProducts} products`}
+            </p>
+            {activeCategory && (
+              <Link
+                to={`/category/${activeCategory}`}
+                className="text-cyan-glow text-xs font-bold uppercase tracking-widest hover:underline"
+              >
+                View Category Page →
+              </Link>
+            )}
+          </div>
+        )}
+
+        {/* Products Grid */}
+        {loading || productsLoading ? (
+          <div className="grid grid-cols-2 md:grid-cols-3 gap-4 md:gap-8">
+            {Array.from({ length: 9 }).map((_, i) => (
+              <div key={i} className="rounded-2xl bg-white/5 animate-pulse h-96" />
+            ))}
+          </div>
+        ) : products.length === 0 ? (
+          <div className="text-center py-24 text-slate-500 space-y-3">
+            <p className="text-4xl">🌿</p>
+            <p className="text-lg">No products found</p>
+            <p className="text-sm">Try adjusting your search or filter</p>
+          </div>
+        ) : (
+          <div>
+            <div className="grid grid-cols-2 md:grid-cols-3 gap-4 md:gap-8">
+              {products.slice(0, displayCount).map((p) => (
+                <ProductCard key={p.id} product={p} />
+              ))}
+            </div>
+
+            {/* Invisible target for IntersectionObserver */}
+            {displayCount < products.length && (
+              <div ref={loaderRef} className="py-12 flex justify-center">
+                <div className="w-8 h-8 rounded-full border-2 border-cyan-glow border-t-transparent animate-spin" />
+              </div>
+            )}
+          </div>
+        )}
+      </div>
+
+      <Footer categories={categories} />
+    </div>
+  )
+}

apps/spa/src/pages/TrackOrderPage.tsx

@@ -0,0 +1,169 @@
+import { useState, useEffect } from 'react'
+import { useNavigate, Link } from 'react-router-dom'
+import Navbar from '../components/Navbar'
+import Footer from '../components/Footer'
+import { API_BASE, type Category } from '../types'
+import { Search, MapPin, Package, Loader2, ChevronRight } from 'lucide-react'
+
+export default function TrackOrderPage() {
+  const navigate = useNavigate()
+  const [categories, setCategories] = useState<Category[]>([])
+  const [localOrders, setLocalOrders] = useState<number[]>([])
+
+  const [orderId, setOrderId] = useState('')
+  const [phone, setPhone] = useState('')
+  const [loading, setLoading] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+
+  useEffect(() => {
+    fetch(`${API_BASE}/categories`)
+      .then(res => res.json())
+      .then(setCategories)
+      .catch(console.error)
+
+    // Load local orders
+    const storedStr = localStorage.getItem('irelax_local_orders')
+    if (storedStr) {
+      setLocalOrders(JSON.parse(storedStr))
+    }
+  }, [])
+
+  const handleTrackForm = async (e: React.FormEvent) => {
+    e.preventDefault()
+    setLoading(true)
+    setError(null)
+
+    try {
+      const res = await fetch(`${API_BASE}/orders/track`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ 
+          orderId: parseInt(orderId.replace(/[^0-9]/g, ''), 10) || 0, 
+          phone 
+        })
+      })
+      const data = await res.json()
+
+      if (res.ok && data.success) {
+        // Automatically save to local history so they don't have to type it again
+        if (!localOrders.includes(data.orderId)) {
+          const newOrders = [data.orderId, ...localOrders]
+          setLocalOrders(newOrders)
+          localStorage.setItem('irelax_local_orders', JSON.stringify(newOrders))
+        }
+        navigate(`/order/${data.orderId}`)
+      } else {
+        setError(data.error || 'Failed to authenticate order details.')
+      }
+    } catch (err) {
+      console.error(err)
+      setError('An error occurred. Please check your internet connection.')
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  return (
+    <div className="min-h-screen flex flex-col">
+      <Navbar categories={categories} />
+
+      <main className="flex-1 max-w-4xl w-full mx-auto px-6 flex flex-col justify-center pt-32 pb-24 space-y-12 animate-fade-in">
+        
+        {/* Header */}
+        <div className="text-center space-y-4">
+          <div className="w-16 h-16 bg-cyan-glow/10 rounded-full flex items-center justify-center mx-auto border border-cyan-glow/20">
+            <MapPin className="w-8 h-8 text-cyan-glow" />
+          </div>
+          <h1 className="text-4xl font-bold tracking-tight">Track Your Status</h1>
+          <p className="text-slate-400">Enter your order details below to check shipping status or upload payment slips.</p>
+        </div>
+
+        <div className="grid md:grid-cols-2 gap-12">
+          
+          {/* Tracking Form */}
+          <div className="bg-night-900/50 p-8 rounded-2xl border border-white/5 space-y-6 self-start">
+            <h2 className="text-lg font-bold uppercase tracking-widest border-b border-white/10 pb-4 flex items-center gap-2 text-cyan-glow">
+              <Search className="w-5 h-5" /> Manual Search
+            </h2>
+            
+            <form onSubmit={handleTrackForm} className="space-y-5">
+              {error && (
+                <div className="p-4 bg-rose-500/10 border border-rose-500/20 text-rose-400 rounded-lg text-sm text-center">
+                  {error}
+                </div>
+              )}
+              
+              <div className="space-y-2">
+                <label className="text-xs uppercase font-bold tracking-widest text-slate-500">Order Number (ID)</label>
+                <input 
+                  type="text" 
+                  required
+                  value={orderId}
+                  onChange={e => setOrderId(e.target.value)}
+                  className="w-full bg-night-950 border border-white/10 rounded-lg p-3.5 text-white focus:border-cyan-glow focus:ring-1 focus:ring-cyan-glow outline-none transition-all placeholder:text-slate-600"
+                  placeholder="e.g. 1024"
+                />
+              </div>
+
+              <div className="space-y-2">
+                <label className="text-xs uppercase font-bold tracking-widest text-slate-500">Phone Number</label>
+                <input 
+                  type="tel" 
+                  required
+                  value={phone}
+                  onChange={e => setPhone(e.target.value)}
+                  className="w-full bg-night-950 border border-white/10 rounded-lg p-3.5 text-white focus:border-cyan-glow focus:ring-1 focus:ring-cyan-glow outline-none transition-all placeholder:text-slate-600"
+                  placeholder="The phone number used during checkout"
+                />
+              </div>
+
+              <button 
+                type="submit"
+                disabled={loading}
+                className="w-full py-4 bg-white text-night-900 font-bold rounded-lg tracking-widest uppercase hover:bg-cyan-glow hover:shadow-[0_0_20px_rgba(102,252,241,0.3)] transition-all duration-500 disabled:opacity-50 flex items-center justify-center gap-2"
+              >
+                {loading ? <Loader2 className="w-5 h-5 animate-spin" /> : 'Find Order'}
+              </button>
+            </form>
+          </div>
+
+          {/* Local Order History */}
+          <div className="space-y-6">
+            <h2 className="text-lg font-bold uppercase tracking-widest border-b border-white/10 pb-4 flex items-center gap-2 text-white">
+              <Package className="w-5 h-5 text-slate-400" /> Recent Device Orders
+            </h2>
+            
+            {localOrders.length === 0 ? (
+              <div className="text-center py-12 bg-white/5 rounded-2xl border border-dashed border-white/10 space-y-3">
+                <p className="text-slate-500 text-sm">No recent orders found on this device.</p>
+                <p className="text-[10px] uppercase text-slate-600 tracking-widest">Use manual search if you ordered elsewhere</p>
+              </div>
+            ) : (
+              <div className="space-y-3">
+                {localOrders.map((id) => (
+                  <Link 
+                    key={id}
+                    to={`/order/${id}`}
+                    className="flex justify-between items-center p-5 bg-white/5 rounded-xl border border-white/5 hover:bg-white/10 hover:border-cyan-glow/50 transition-all group"
+                  >
+                    <div>
+                      <p className="text-xs text-slate-500 uppercase tracking-widest mb-1">Order</p>
+                      <p className="text-xl font-bold font-mono text-cyan-glow">#{id.toString().padStart(4, '0')}</p>
+                    </div>
+                    <div className="w-10 h-10 rounded-full bg-night-950 flex items-center justify-center group-hover:bg-cyan-glow transition-colors">
+                       <ChevronRight className="w-5 h-5 text-slate-500 group-hover:text-night-900" />
+                    </div>
+                  </Link>
+                ))}
+              </div>
+            )}
+          </div>
+
+        </div>
+
+      </main>
+
+      <Footer categories={categories} />
+    </div>
+  )
+}