Initial commit for homaroma

apps/website/src/components/CartDrawer.tsx

@@ -0,0 +1,214 @@
+import React from 'react'
+import { X, ShoppingBag, Plus, Minus, Trash2, Tag, ArrowRight } from 'lucide-react'
+import { Link } from 'react-router-dom'
+import { useCartStore } from '../store/cartStore'
+import { formatPrice } from '@irelax/types'
+import { useTranslation } from 'react-i18next'
+import { API_BASE } from '../types'
+
+export default function CartDrawer() {
+  const { t } = useTranslation()
+  const { isCartOpen, toggleCart, items, updateQuantity, removeFromCart, getCartTotal } = useCartStore()
+
+  if (!isCartOpen) return null
+
+  return (
+    <div className="fixed inset-0 z-[100] flex justify-end">
+      {/* Backdrop */}
+      <div 
+        className="absolute inset-0 bg-night-950/80 backdrop-blur-sm animate-fade-in"
+        onClick={() => toggleCart(false)}
+      />
+      
+      {/* Drawer */}
+      <div className="relative w-full max-w-md h-full bg-night-900 shadow-2xl flex flex-col border-l border-white/10 animate-slide-left">
+        {/* Header */}
+        <div className="p-6 border-b border-white/10 flex items-center justify-between bg-night-950/50">
+          <h2 className="text-xl font-bold flex items-center gap-2">
+            <ShoppingBag className="w-5 h-5 text-cyan-glow" />
+            {t('cart.title')}
+            <span className="text-sm font-normal text-slate-400 bg-white/5 px-2 py-0.5 rounded-full ml-2">
+              {t('cart.items', { count: items.length })}
+            </span>
+          </h2>
+          <button 
+            onClick={() => toggleCart(false)}
+            className="p-2 hover:bg-white/5 rounded-full transition-colors"
+          >
+            <X className="w-5 h-5 text-slate-400 hover:text-white" />
+          </button>
+        </div>
+
+        {/* Cart Items */}
+        <div className="flex-1 overflow-y-auto p-6 space-y-4">
+          {items.length === 0 ? (
+            <div className="h-full flex flex-col items-center justify-center text-slate-500 space-y-4">
+              <ShoppingBag className="w-16 h-16 opacity-20" />
+              <p>{t('cart.empty')}</p>
+              <button 
+                onClick={() => toggleCart(false)}
+                className="text-cyan-glow hover:underline tracking-widest uppercase text-xs font-bold"
+              >
+                {t('cart.continueShopping')}
+              </button>
+            </div>
+          ) : (
+            items.map((item) => (
+              <div key={item.cartItemId} className="flex gap-4 p-4 rounded-2xl bg-white/5 border border-white/5 group relative">
+                <div className="w-18 h-22 rounded-lg bg-night-950 overflow-hidden flex-shrink-0" style={{ width: '72px', height: '88px' }}>
+                  <img 
+                    src={item.productImage || '/images/oil_ozone.png'} 
+                    alt={item.productName}
+                    className="w-full h-full object-cover opacity-80"
+                  />
+                </div>
+                
+                <div className="flex-1 flex flex-col pt-1 space-y-1 relative min-w-0">
+                  <h3 className="font-bold text-sm leading-tight pr-6 truncate">{item.productName}</h3>
+                  {item.variantSize && (
+                    <p className="text-xs text-slate-500">{item.variantSize}</p>
+                  )}
+
+                  {/* Price row */}
+                  <div className="flex items-baseline gap-1.5 mt-0.5">
+                    <span className="text-xs text-slate-500">{formatPrice(item.price)}</span>
+                    <span className="text-xs text-slate-600">×</span>
+                    <span className="text-xs text-slate-500">{item.quantity}</span>
+                    <span className="text-xs text-slate-600">=</span>
+                    <span className="text-sm font-bold text-cyan-glow">{formatPrice(item.price * item.quantity)}</span>
+                  </div>
+                  
+                  {/* Quantity controls */}
+                  <div className="flex items-center gap-2 mt-1">
+                    <div className="flex items-center gap-2 bg-night-950/70 rounded-lg border border-white/5">
+                      <button 
+                        onClick={() => updateQuantity(item.cartItemId, item.quantity - 1)}
+                        className="p-1.5 hover:text-cyan-glow transition-colors"
+                      >
+                        <Minus className="w-3 h-3" />
+                      </button>
+                      <span className="w-5 text-center text-xs font-bold">{item.quantity}</span>
+                      <button 
+                        onClick={() => updateQuantity(item.cartItemId, item.quantity + 1)}
+                        className="p-1.5 hover:text-cyan-glow transition-colors"
+                      >
+                        <Plus className="w-3 h-3" />
+                      </button>
+                    </div>
+                  </div>
+
+                  <button 
+                    onClick={() => removeFromCart(item.cartItemId)}
+                    className="absolute top-0 right-0 p-1.5 text-slate-600 hover:text-rose-500 transition-colors"
+                    title="Remove item"
+                  >
+                    <Trash2 className="w-3.5 h-3.5" />
+                  </button>
+                </div>
+              </div>
+            ))
+          )}
+        </div>
+
+        {/* Footer */}
+        {items.length > 0 && (
+          <CartDrawerFooter subtotal={getCartTotal()} onClose={() => toggleCart(false)} t={t} />
+        )}
+      </div>
+    </div>
+  )
+}
+
+function CartDrawerFooter({ subtotal, onClose }: { subtotal: number; onClose: () => void; t?: any }) {
+  const [savedCoupon, setSavedCoupon] = React.useState<string | null>(null)
+  const [discountAmount, setDiscountAmount] = React.useState<number>(0)
+  const [isFreeShipping, setIsFreeShipping] = React.useState<boolean>(false)
+  const [couponValid, setCouponValid] = React.useState<boolean>(false)
+
+  React.useEffect(() => {
+    const code = localStorage.getItem('irelax_active_coupon')
+    setSavedCoupon(code)
+    if (code && subtotal > 0) {
+      fetch(`${API_BASE}/coupons/validate`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ code, cartTotal: subtotal })
+      })
+        .then(r => r.json())
+        .then(data => {
+          if (data.valid) {
+            setCouponValid(true)
+            setDiscountAmount(data.discountAmount || 0)
+            setIsFreeShipping(data.isFreeShipping || false)
+          } else {
+            setCouponValid(false)
+          }
+        })
+        .catch(() => setCouponValid(false))
+    }
+  }, [subtotal])
+
+  const removeCoupon = () => {
+    localStorage.removeItem('irelax_active_coupon')
+    setSavedCoupon(null)
+    setDiscountAmount(0)
+    setIsFreeShipping(false)
+    setCouponValid(false)
+  }
+
+
+
+  return (
+    <div className="p-5 border-t border-white/10 bg-night-950/60 space-y-4">
+
+      {/* Totals */}
+      <div className="space-y-2 text-sm">
+        <div className="flex justify-between text-slate-400">
+          <span>ราคาสินค้า</span>
+          <span>{formatPrice(subtotal)}</span>
+        </div>
+        {(discountAmount > 0 || isFreeShipping) && savedCoupon && (
+          <div className="flex justify-between text-cyan-glow">
+            <span className="flex items-center gap-1.5">
+              ส่วนลดคูปอง
+              <span className="text-[10px] font-bold bg-cyan-glow/15 px-1.5 py-0.5 rounded tracking-widest">
+                {savedCoupon}
+              </span>
+              <button onClick={removeCoupon} className="text-slate-500 hover:text-rose-400 transition-colors" title="ยกเลิก">
+                <X className="w-3 h-3" />
+              </button>
+            </span>
+            <span>{isFreeShipping ? 'ส่งฟรี' : `- ${formatPrice(discountAmount)}`}</span>
+          </div>
+        )}
+        {savedCoupon && !couponValid && (
+          <div className="flex justify-between text-amber-400 text-xs">
+            <span className="flex items-center gap-1.5">
+              <Tag className="w-3 h-3" />
+              คูปอง <span className="font-bold tracking-widest">{savedCoupon}</span> (ยังไม่ถึงยอดขั้นต่ำ)
+              <button onClick={removeCoupon} className="text-slate-500 hover:text-rose-400 transition-colors">
+                <X className="w-3 h-3" />
+              </button>
+            </span>
+          </div>
+        )}
+        <div className="flex justify-between font-bold text-base pt-2 border-t border-white/10">
+          <span>รวมสุทธิ</span>
+          <span className="text-cyan-glow">{formatPrice(Math.max(0, subtotal - discountAmount))}</span>
+        </div>
+      </div>
+
+      {/* Checkout button */}
+      <Link 
+        to="/checkout"
+        onClick={onClose}
+        className="flex items-center justify-center gap-2 w-full py-4 bg-white text-night-900 font-bold rounded-xl uppercase tracking-widest text-sm hover:bg-cyan-glow hover:shadow-[0_0_25px_rgba(102,252,241,0.4)] transition-all duration-500 group"
+      >
+        <ShoppingBag className="w-4 h-4" />
+        ดำเนินการชำระเงิน
+        <ArrowRight className="w-4 h-4 group-hover:translate-x-1 transition-transform" />
+      </Link>
+    </div>
+  )
+}
+

apps/website/src/components/Footer.tsx

@@ -0,0 +1,73 @@
+import { Link } from 'react-router-dom'
+import type { Category } from '../types'
+import { useTranslation } from 'react-i18next'
+
+interface FooterProps {
+  categories?: Category[]
+}
+
+export default function Footer({ categories = [] }: FooterProps) {
+  const { t } = useTranslation()
+  return (
+    <footer className="bg-black py-20 px-6 border-t border-white/5">
+      <div className="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-4 gap-12">
+        <div className="space-y-6">
+          <div className="text-2xl font-bold tracking-widest">
+            iRelax <span className="text-cyan-glow text-sm font-light italic">Essential</span>
+          </div>
+          <p className="text-slate-500 text-sm leading-relaxed">
+            {t('footer.catchphrase')}
+          </p>
+          <div className="flex gap-4">
+            {['IG', 'FB', 'TW', 'YT'].map((s) => (
+              <a key={s} href="#" className="glass w-9 h-9 rounded-full flex items-center justify-center text-[10px] font-bold hover:bg-cyan-glow hover:text-night-900 transition-all duration-300">
+                {s}
+              </a>
+            ))}
+          </div>
+        </div>
+
+        <div className="space-y-4">
+          <h4 className="font-bold uppercase tracking-widest text-xs text-white">{t('footer.explore')}</h4>
+          <div className="flex flex-col space-y-2 text-sm text-slate-400">
+            <Link to="/" className="hover:text-white transition-colors">{t('nav.home')}</Link>
+            <Link to="/shop" className="hover:text-white transition-colors">{t('nav.shop')}</Link>
+            <Link to="/scent-guide" className="hover:text-white transition-colors">{t('nav.scentGuide')}</Link>
+            <Link to="/about" className="hover:text-white transition-colors">{t('nav.about')}</Link>
+            <Link to="/contact" className="hover:text-white transition-colors">{t('nav.contact')}</Link>
+            <Link to="/faq" className="hover:text-white transition-colors">{t('nav.faq')}</Link>
+          </div>
+        </div>
+
+        <div className="space-y-4">
+          <h4 className="font-bold uppercase tracking-widest text-xs text-white">{t('nav.collections')}</h4>
+          <div className="flex flex-col space-y-2 text-sm text-slate-400">
+            {categories.map((c) => (
+              <Link key={c.id} to={`/category/${c.id}`} className="hover:text-white transition-colors">
+                {c.name}
+              </Link>
+            ))}
+          </div>
+        </div>
+
+        <div className="space-y-6">
+          <h4 className="font-bold uppercase tracking-widest text-xs text-white">Newsletter</h4>
+          <p className="text-xs text-slate-500">Subscribe for exclusive releases and sensory wisdom.</p>
+          <div className="flex bg-white/5 border border-white/10 p-1 rounded-sm">
+            <input
+              type="email"
+              placeholder="Your email"
+              className="bg-transparent border-none outline-none text-sm p-2 w-full text-white placeholder-slate-600"
+            />
+            <button className="bg-white text-black px-4 py-2 font-bold text-xs uppercase hover:bg-cyan-glow transition-colors shrink-0">
+              Join
+            </button>
+          </div>
+          <p className="text-[10px] text-slate-600 uppercase tracking-widest">
+            © {new Date().getFullYear()} iRelax Essential. {t('footer.rights')}
+          </p>
+        </div>
+      </div>
+    </footer>
+  )
+}

apps/website/src/components/Navbar.tsx

@@ -0,0 +1,445 @@
+import { Link, NavLink, useNavigate } from 'react-router-dom'
+import { useState, useEffect } from 'react'
+import type { Category } from '../types'
+import { ShoppingBag, MapPin } from 'lucide-react'
+import { useCartStore } from '../store/cartStore'
+import { useAuthStore } from '../store/authStore'
+import { logoutLiff, loginLiff } from '../lib/liff'
+import { useTranslation } from 'react-i18next'
+
+interface NavbarProps {
+  categories?: Category[]
+}
+
+export default function Navbar({ categories = [] }: NavbarProps) {
+  const [searchOpen, setSearchOpen] = useState(false)
+  const [mobileOpen, setMobileOpen] = useState(false)
+  const [searchQuery, setSearchQuery] = useState('')
+  const [scrolled, setScrolled] = useState(false)
+  const [localOrdersCount, setLocalOrdersCount] = useState(0)
+  const navigate = useNavigate()
+  
+  const { toggleCart, getCartCount } = useCartStore()
+  const cartCount = getCartCount()
+  const { customer } = useAuthStore()
+  const { t, i18n } = useTranslation()
+
+  const toggleLanguage = () => {
+    const newLang = i18n.language.startsWith('en') ? 'th' : 'en'
+    i18n.changeLanguage(newLang)
+    localStorage.setItem('irelax_lang', newLang)
+  }
+
+  // Detect scroll for navbar bg change
+  useEffect(() => {
+    const onScroll = () => setScrolled(window.scrollY > 20)
+    window.addEventListener('scroll', onScroll, { passive: true })
+    
+    // Check local orders periodically (or just on mount)
+    const stored = localStorage.getItem('irelax_local_orders')
+    if (stored) {
+      try { setLocalOrdersCount(JSON.parse(stored).length) } catch (e) {}
+    }
+    
+    return () => window.removeEventListener('scroll', onScroll)
+  }, [])
+
+  // Close mobile menu on route change
+  useEffect(() => { setMobileOpen(false) }, [navigate])
+  // Prevent body scroll when overlays open
+  useEffect(() => {
+    document.body.style.overflow = (searchOpen || mobileOpen) ? 'hidden' : ''
+    return () => { document.body.style.overflow = '' }
+  }, [searchOpen, mobileOpen])
+
+  const handleSearch = (e: React.FormEvent) => {
+    e.preventDefault()
+    if (searchQuery.trim()) {
+      navigate(`/search?q=${encodeURIComponent(searchQuery.trim())}`)
+      setSearchOpen(false)
+      setMobileOpen(false)
+      setSearchQuery('')
+    }
+  }
+
+  const navLinkClass = ({ isActive }: { isActive: boolean }) =>
+    isActive ? 'text-cyan-glow' : 'text-slate-300 hover:text-white transition-colors'
+
+  return (
+    <>
+      {/* ── NAVBAR BAR ── */}
+      <nav
+        className={`fixed top-0 w-full z-50 transition-all duration-300 px-4 md:px-6 py-3.5 md:py-4 flex justify-between items-center ${
+          scrolled ? 'bg-night-900/95 backdrop-blur-xl border-b border-white/10 shadow-xl' : 'glass backdrop-blur-xl border-b border-white/5'
+        }`}
+      >
+        {/* Logo */}
+        <Link to="/" onClick={() => setMobileOpen(false)} className="text-xl md:text-2xl font-bold tracking-widest text-white uppercase italic shrink-0">
+          iRelax <span className="hidden md:inline text-cyan-glow text-xs md:text-sm not-italic font-light opacity-60 ml-1">Essential</span>
+        </Link>
+
+        {/* ── DESKTOP NAV ── */}
+        <div className="hidden md:flex space-x-7 text-sm font-medium tracking-wide uppercase">
+          <NavLink to="/" end className={navLinkClass}>{t('nav.home')}</NavLink>
+          <NavLink to="/shop" className={navLinkClass}>{t('nav.shop')}</NavLink>
+          <NavLink to="/coupons" className={navLinkClass}>🔥 {t('nav.promotions') || 'Promotions'}</NavLink>
+
+          {/* Collections dropdown */}
+          {categories.length > 0 && (
+            <div className="relative group">
+              <button className="text-slate-300 hover:text-white transition-colors flex items-center gap-1 uppercase text-sm font-medium tracking-wide">
+                {t('nav.collections')}
+                <svg className="w-3 h-3 opacity-50 transition-transform duration-300 group-hover:rotate-180" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
+                </svg>
+              </button>
+              <div className="absolute top-full left-1/2 -translate-x-1/2 mt-4 w-52 bg-night-900/95 backdrop-blur-xl border border-white/10 rounded-xl overflow-hidden opacity-0 pointer-events-none group-hover:opacity-100 group-hover:pointer-events-auto transition-all duration-300 shadow-2xl">
+                <div className="p-2 space-y-0.5">
+                  {categories.map((cat) => (
+                    <Link
+                      key={cat.id}
+                      to={`/category/${cat.id}`}
+                      className="flex items-center justify-between px-4 py-2.5 text-xs uppercase tracking-widest rounded-lg hover:bg-white/10 hover:text-cyan-glow transition-colors"
+                    >
+                      {cat.name}
+                      <svg className="w-3 h-3 opacity-30" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
+                      </svg>
+                    </Link>
+                  ))}
+                </div>
+              </div>
+            </div>
+          )}
+
+          <NavLink to="/scent-guide" className={navLinkClass}>{t('nav.scentGuide')}</NavLink>
+          <NavLink to="/about" className={navLinkClass}>{t('nav.about')}</NavLink>
+        </div>
+
+        {/* ── DESKTOP RIGHT ACTIONS ── */}
+        <div className="hidden md:flex items-center gap-3">
+          <Link
+            to="/track"
+            className="relative glass p-2.5 rounded-full hover:bg-white/10 transition-all group"
+            aria-label="Track Orders"
+            title="Track Orders"
+          >
+            <MapPin className="w-4 h-4 group-hover:text-cyan-glow transition-colors" />
+            {localOrdersCount > 0 && (
+              <span className="absolute top-0 right-0 w-2 h-2 bg-rose-500 rounded-full animate-pulse" />
+            )}
+          </Link>
+          
+          <button
+            onClick={() => setSearchOpen(true)}
+            className="glass p-2.5 rounded-full hover:bg-white/10 transition-all group"
+            aria-label="Search"
+          >
+            <svg className="w-4 h-4 group-hover:text-cyan-glow transition-colors" 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>
+          </button>
+          
+          <button 
+            onClick={() => toggleCart(true)}
+            className="relative glass p-2.5 rounded-full hover:bg-white/10 transition-all group"
+            aria-label="Cart"
+          >
+            <ShoppingBag className="w-4 h-4 group-hover:text-cyan-glow transition-colors" />
+            {cartCount > 0 && (
+              <span className="absolute -top-1 -right-1 bg-cyan-glow text-night-900 text-[9px] font-bold w-4 h-4 rounded-full flex items-center justify-center">
+                {cartCount}
+              </span>
+            )}
+          </button>
+          <Link
+            to="/shop"
+            className="glass px-4 py-2 rounded-full text-xs font-bold uppercase tracking-widest hover:bg-cyan-glow hover:text-night-900 transition-all duration-300"
+          >
+            {t('nav.shopNow')}
+          </Link>
+
+          <button 
+            onClick={toggleLanguage}
+            className="glass px-3 py-2 rounded-full text-xs font-bold hover:bg-white/10 transition-all text-cyan-glow border border-cyan-glow/20"
+          >
+            {i18n.language.startsWith('en') ? 'EN' : 'TH'}
+          </button>
+
+          {customer ? (
+            <div className="relative group flex items-center">
+              <img 
+                src={customer.pictureUrl || `https://ui-avatars.com/api/?name=${customer.displayName}`} 
+                alt="Profile" 
+                className="w-9 h-9 rounded-full border-2 border-cyan-glow/50 cursor-pointer object-cover" 
+              />
+              <div className="absolute top-full right-0 mt-4 w-32 bg-night-900/95 backdrop-blur-xl border border-white/10 rounded-xl overflow-hidden opacity-0 pointer-events-none group-hover:opacity-100 group-hover:pointer-events-auto transition-all duration-300 shadow-2xl">
+                <div className="p-1">
+                  <div className="px-3 py-2 border-b border-white/10 mb-1">
+                    <p className="text-[10px] text-slate-400 uppercase tracking-widest leading-tight truncate">Signed in as</p>
+                    <p className="text-xs text-white font-bold truncate">{customer.displayName}</p>
+                  </div>
+                  <button 
+                    onClick={logoutLiff} 
+                    className="w-full text-left px-3 py-2 text-xs uppercase tracking-widest text-rose-400 hover:text-rose-300 hover:bg-rose-500/10 rounded-lg transition-colors"
+                  >
+                    Logout
+                  </button>
+                </div>
+              </div>
+            </div>
+          ) : (
+            <button 
+              onClick={loginLiff}
+              className="glass px-4 py-2 rounded-full text-xs font-bold uppercase tracking-widest hover:bg-[#00B900] hover:text-white transition-all duration-300 border border-[#00B900]/50 text-[#00B900]"
+            >
+              LINE Login
+            </button>
+          )}
+        </div>
+
+        {/* ── MOBILE RIGHT ACTIONS ── */}
+        <div className="flex md:hidden items-center gap-1.5">
+          {customer ? (
+            <div className="relative">
+              <img 
+                src={customer.pictureUrl || `https://ui-avatars.com/api/?name=${customer.displayName}`} 
+                alt="Profile" 
+                onClick={() => setMobileOpen(true)}
+                className="w-7 h-7 rounded-full border-2 border-cyan-glow/50 object-cover cursor-pointer" 
+              />
+            </div>
+          ) : (
+            <button
+              onClick={loginLiff}
+              className="p-1.5 rounded-full glass hover:bg-[#00B900]/20 transition-all border border-[#00B900]/50 text-[#00B900]"
+              aria-label="LINE Login"
+            >
+              <svg className="w-4 h-4" viewBox="0 0 24 24" fill="currentColor">
+                <path d="M24 10.304c0-5.369-5.383-9.738-12-9.738-6.616 0-12 4.369-12 9.738 0 4.814 3.932 8.946 9.539 9.615.375.056 1.155.176 1.321.603.149.387.049.991.023 1.258-.035.342-.165 1.011 1.05 1.503 1.216.492 4.417-2.602 6.012-4.423C21.841 16.208 24 13.524 24 10.304z"/>
+              </svg>
+            </button>
+          )}
+
+          <Link
+            to="/track"
+            onClick={() => setMobileOpen(false)}
+            className="relative p-1.5 rounded-full glass hover:bg-white/10 transition-all"
+            aria-label="Track Orders"
+          >
+            <MapPin className="w-4 h-4" />
+            {localOrdersCount > 0 && (
+              <span className="absolute top-0 right-0 w-2 h-2 bg-rose-500 rounded-full" />
+            )}
+          </Link>
+          <button
+            onClick={() => { setSearchOpen(true); setMobileOpen(false) }}
+            className="p-1.5 rounded-full glass hover:bg-white/10 transition-all"
+            aria-label="Search"
+          >
+            <svg className="w-4 h-4" 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>
+          </button>
+          
+          <button 
+            onClick={() => { toggleCart(true); setMobileOpen(false) }}
+            className="relative p-1.5 rounded-full glass hover:bg-white/10 transition-all"
+            aria-label="Cart"
+          >
+            <ShoppingBag className="w-4 h-4" />
+            {cartCount > 0 && (
+              <span className="absolute -top-1 -right-1 bg-cyan-glow text-night-900 text-[9px] font-bold w-4 h-4 rounded-full flex items-center justify-center">
+                {cartCount}
+              </span>
+            )}
+          </button>
+          {/* Hamburger */}
+          <button
+            onClick={() => setMobileOpen(prev => !prev)}
+            className="p-1.5 rounded-full glass hover:bg-white/10 transition-all"
+            aria-label={mobileOpen ? 'Close menu' : 'Open menu'}
+          >
+            <div className="w-4 h-4 flex flex-col justify-center gap-[4px] relative">
+              <span className={`block w-4 h-0.5 bg-white rounded-full transition-all duration-300 ${mobileOpen ? 'absolute rotate-45' : ''}`} />
+              <span className={`block h-0.5 bg-white rounded-full transition-all duration-300 ${mobileOpen ? 'opacity-0 w-0' : 'w-3'}`} />
+              <span className={`block h-0.5 bg-white rounded-full transition-all duration-300 ${mobileOpen ? 'absolute -rotate-45 w-4' : 'w-4'}`} />
+            </div>
+          </button>
+        </div>
+      </nav>
+
+      {/* ── MOBILE DRAWER ── */}
+      <div
+        className={`fixed inset-0 z-40 md:hidden transition-all duration-300 ${mobileOpen ? 'visible' : 'invisible'}`}
+      >
+        {/* Backdrop */}
+        <div
+          className={`absolute inset-0 bg-night-900/80 backdrop-blur-sm transition-opacity duration-300 ${mobileOpen ? 'opacity-100' : 'opacity-0'}`}
+          onClick={() => setMobileOpen(false)}
+        />
+        {/* Drawer */}
+        <div
+          className={`absolute top-0 right-0 h-full w-72 bg-night-900/98 backdrop-blur-2xl border-l border-white/10 flex flex-col transition-transform duration-300 ${mobileOpen ? 'translate-x-0' : 'translate-x-full'}`}
+        >
+          {/* Drawer Header */}
+          <div className="flex items-center justify-between px-6 py-5 border-b border-white/5">
+            <span className="text-sm font-bold uppercase tracking-widest text-slate-300">{t('nav.menu')}</span>
+            <div className="flex items-center gap-3">
+              {customer && (
+                <img src={customer.pictureUrl || ''} className="w-6 h-6 rounded-full border border-cyan-glow/50" />
+              )}
+              <button onClick={toggleLanguage} className="glass px-2.5 py-1 rounded-md text-[10px] font-bold text-cyan-glow border border-cyan-glow/20 uppercase">
+                {i18n.language.startsWith('en') ? 'EN' : 'TH'}
+              </button>
+              <button onClick={() => setMobileOpen(false)} className="p-1.5 rounded-full glass hover:bg-white/10 transition-all">
+                <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+                </svg>
+              </button>
+            </div>
+          </div>
+
+          {/* Drawer Nav Links */}
+          <div className="flex-1 overflow-y-auto px-4 py-6 space-y-1">
+            {[
+              { to: '/', label: t('nav.home'), end: true },
+              { to: '/shop', label: t('nav.shop') },
+              { to: '/coupons', label: `🔥 ${t('nav.promotions') || 'Promotions'}` },
+              { to: '/scent-guide', label: `✨ ${t('nav.scentGuide')}` },
+              { to: '/about', label: t('nav.about') },
+              { to: '/faq', label: t('nav.faq') },
+              { to: '/contact', label: t('nav.contact') },
+            ].map(item => (
+              <NavLink
+                key={item.to}
+                to={item.to}
+                end={item.end}
+                onClick={() => setMobileOpen(false)}
+                className={({ isActive }) =>
+                  `block px-4 py-3 rounded-xl text-sm font-medium tracking-wide transition-all duration-200 ${
+                    isActive ? 'bg-cyan-glow/10 text-cyan-glow border border-cyan-glow/20' : 'hover:bg-white/5 text-slate-300 hover:text-white'
+                  }`
+                }
+              >
+                {item.label}
+              </NavLink>
+            ))}
+
+            {/* Collections sub-section */}
+            {categories.length > 0 && (
+              <div className="pt-4">
+                <p className="text-[10px] uppercase tracking-widest text-slate-600 px-4 pb-2">{t('nav.collections')}</p>
+                {categories.map(cat => (
+                  <Link
+                    key={cat.id}
+                    to={`/category/${cat.id}`}
+                    onClick={() => setMobileOpen(false)}
+                    className="flex items-center justify-between px-4 py-2.5 rounded-xl text-sm text-slate-400 hover:text-white hover:bg-white/5 transition-all"
+                  >
+                    {cat.name}
+                    <svg className="w-3 h-3 opacity-30" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
+                    </svg>
+                  </Link>
+                ))}
+              </div>
+            )}
+          </div>
+
+          {/* Drawer Footer CTA */}
+          <div className="px-4 pb-8 pt-4 border-t border-white/5 space-y-3">
+            <Link
+              to="/shop"
+              onClick={() => setMobileOpen(false)}
+              className="block w-full py-3 bg-white text-night-900 font-bold text-center rounded-xl text-xs uppercase tracking-widest hover:bg-cyan-glow transition-colors duration-300"
+            >
+              {t('nav.shopNow')}
+            </Link>
+            <Link
+              to="/scent-guide"
+              onClick={() => setMobileOpen(false)}
+              className="block w-full py-3 glass text-center rounded-xl text-xs font-bold uppercase tracking-widest hover:bg-white/10 transition-colors border border-white/10"
+            >
+              {t('nav.findMyScent')}
+            </Link>
+            
+            {customer ? (
+              <button
+                onClick={() => { logoutLiff(); setMobileOpen(false); }}
+                className="block w-full py-3 glass text-center rounded-xl text-xs font-bold uppercase tracking-widest text-rose-400 hover:bg-rose-500/10 transition-colors border border-rose-500/20 mt-2"
+              >
+                Logout
+              </button>
+            ) : (
+              <button
+                onClick={() => { loginLiff(); setMobileOpen(false); }}
+                className="block w-full py-3 glass text-center rounded-xl text-xs font-bold uppercase tracking-widest text-[#00B900] hover:bg-[#00B900]/10 transition-colors border border-[#00B900]/50 mt-2"
+              >
+                Login with LINE
+              </button>
+            )}
+          </div>
+        </div>
+      </div>
+
+      {/* ── SEARCH OVERLAY ── */}
+      {searchOpen && (
+        <div
+          className="fixed inset-0 z-[100] bg-night-900/95 backdrop-blur-xl flex flex-col items-center pt-24 md:pt-32 px-4 md:px-6"
+          onClick={(e) => { if (e.target === e.currentTarget) setSearchOpen(false) }}
+        >
+          <div className="w-full max-w-2xl space-y-6 animate-fade-in">
+            <div className="flex justify-between items-center">
+              <p className="text-slate-400 text-xs uppercase tracking-widest">{t('nav.search.title')}</p>
+              <button onClick={() => setSearchOpen(false)} className="glass p-2 rounded-full hover:bg-white/10 transition-all">
+                <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+                </svg>
+              </button>
+            </div>
+
+            <form onSubmit={handleSearch}>
+              <div className="flex glass border border-white/20 focus-within:border-cyan-glow/50 rounded-2xl overflow-hidden 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={searchQuery}
+                  onChange={(e) => setSearchQuery(e.target.value)}
+                  placeholder="Search scents, categories..."
+                  className="bg-transparent border-none outline-none text-lg md:text-xl p-4 pl-0 w-full text-white placeholder-slate-600"
+                  autoFocus
+                />
+                <button type="submit" className="bg-cyan-glow text-night-900 px-4 md:px-6 font-bold text-xs uppercase tracking-widest shrink-0 hover:bg-white transition-colors">
+                  Go
+                </button>
+              </div>
+            </form>
+
+            <div>
+              <p className="text-xs text-slate-500 uppercase tracking-widest mb-3">Quick Links</p>
+              <div className="flex flex-wrap gap-2">
+                {[
+                  ...categories.map(c => ({ label: c.name, to: `/category/${c.id}` })),
+                  { label: '✨ Scent Guide', to: '/scent-guide' },
+                  { label: 'All Products', to: '/shop' },
+                ].map(item => (
+                  <Link
+                    key={item.to}
+                    to={item.to}
+                    onClick={() => setSearchOpen(false)}
+                    className="glass px-4 py-1.5 rounded-full text-xs font-medium hover:bg-white/10 hover:text-cyan-glow transition-all border border-white/5"
+                  >
+                    {item.label}
+                  </Link>
+                ))}
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
+    </>
+  )
+}

apps/website/src/components/ProductCard.tsx

@@ -0,0 +1,63 @@
+import { Link } from 'react-router-dom'
+import type { Product } from '../types'
+import { getCategoryImage, formatPrice } from '../types'
+
+interface ProductCardProps {
+  product: Product
+}
+
+export default function ProductCard({ product }: ProductCardProps) {
+  return (
+    <div className="glass glass-hover rounded-2xl overflow-hidden flex flex-col group p-1.5 md:p-2">
+      <div className="h-40 md:h-64 overflow-hidden rounded-xl relative">
+        <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}
+        />
+        {/* Category badge */}
+        <div className="absolute top-4 left-4 glass px-3 py-1 rounded-full text-[10px] font-bold uppercase tracking-widest text-cyan-glow">
+          {product.category.name}
+        </div>
+        {/* Available badge */}
+        <div className="hidden md:block absolute top-4 right-4 glass px-3 py-1 rounded-full text-[10px] font-bold uppercase tracking-widest">
+          Available
+        </div>
+      </div>
+
+      <div className="p-3 md:p-6 space-y-2 md:space-y-4 flex flex-col flex-1">
+        <div className="flex flex-col md:flex-row md:justify-between md:items-start gap-1">
+          <div>
+            <h3 className="text-sm md:text-xl font-bold leading-tight line-clamp-1">
+              {product.scent.name}
+            </h3>
+            <p className="text-[10px] md:text-xs text-slate-400 mt-0.5 md:mt-1 uppercase tracking-widest line-clamp-1">
+              {product.category.name}
+            </p>
+          </div>
+          <span className="text-cyan-glow font-bold text-xs md:text-lg">
+            {formatPrice(product.variants[0]?.price)}
+          </span>
+        </div>
+
+        {/* Variants (sizes) */}
+        <div className="hidden md:flex flex-wrap gap-1.5 md:gap-2">
+          {product.variants.map((v) => (
+            <div key={v.id} className="glass px-1.5 py-0.5 md:px-2.5 md:py-1 rounded-lg text-[8px] md:text-[10px] uppercase tracking-wider">
+              {v.size}
+            </div>
+          ))}
+        </div>
+
+        <div className="flex-1" />
+
+        <Link
+          to={`/products/${product.id}`}
+          className="block w-full py-2 md:py-3 text-center bg-white/10 hover:bg-white text-white hover:text-night-900 rounded-lg font-bold uppercase tracking-widest text-[10px] md:text-xs transition-all duration-300"
+        >
+          Discover
+        </Link>
+      </div>
+    </div>
+  )
+}

apps/website/src/components/ScrollToTop.tsx

@@ -0,0 +1,16 @@
+import { useEffect } from 'react'
+import { useLocation } from 'react-router-dom'
+
+/**
+ * Scrolls window to top on every route change.
+ * Place this inside <BrowserRouter> so it has access to location context.
+ */
+export default function ScrollToTop() {
+  const { pathname } = useLocation()
+
+  useEffect(() => {
+    window.scrollTo({ top: 0, behavior: 'instant' })
+  }, [pathname])
+
+  return null
+}