x

apps/website/src/app/globals.css

@@ -26,6 +26,9 @@
   --color-pop-bg: var(--color-surface-page);
   --color-pop-black: var(--color-text-main);
 
+  /* Serif font — mirrors apps/spa font-serif token */
+  --font-serif: var(--font-serif-locale, ui-serif), Georgia, Cambria, "Times New Roman", Times, serif;
+
   --shadow-card: 0 10px 25px rgba(0,0,0,0.05);
   --shadow-card-hover: 0 20px 40px rgba(0,0,0,0.1);
   --shadow-brutal: var(--shadow-card);
@@ -40,36 +43,43 @@
   }
 }
 
+
 @layer base {
   :root,
   html {
     --font-body-locale: "Sarabun", "Noto Sans Thai", ui-sans-serif, system-ui, sans-serif;
     --font-display-locale: "Sarabun", "Noto Sans Thai", ui-sans-serif, system-ui, sans-serif;
+    --font-serif-locale: ui-serif;
   }
 
   html[lang="en"] {
     --font-body-locale: "Inter", "Segoe UI", ui-sans-serif, system-ui, sans-serif;
     --font-display-locale: var(--font-body-locale);
+    --font-serif-locale: ui-serif;
   }
 
   html[lang="ja"] {
     --font-body-locale: "Hiragino Sans", "Yu Gothic", "Noto Sans JP", ui-sans-serif, system-ui, sans-serif;
     --font-display-locale: var(--font-body-locale);
+    --font-serif-locale: "Noto Serif JP", ui-serif;
   }
 
   html[lang="zh"] {
     --font-body-locale: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", ui-sans-serif, system-ui, sans-serif;
     --font-display-locale: var(--font-body-locale);
+    --font-serif-locale: "Noto Serif SC", ui-serif;
   }
 
   html[lang="ko"] {
     --font-body-locale: "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", ui-sans-serif, system-ui, sans-serif;
     --font-display-locale: var(--font-body-locale);
+    --font-serif-locale: "Noto Serif KR", ui-serif;
   }
 
   html[lang="vi"] {
     --font-body-locale: "Inter", "Segoe UI", ui-sans-serif, system-ui, sans-serif;
     --font-display-locale: var(--font-body-locale);
+    --font-serif-locale: ui-serif;
   }
 
   html {

apps/website/src/components/LocalizedNotFound.tsx

@@ -1,6 +1,6 @@
-import Image from 'next/image'
+'use client'
+
 import Link from 'next/link'
-import { ArrowRight, Home, Search, ShoppingBag } from 'lucide-react'
 import { getPathWithLocale, type Locale } from '@/lib/locales'
 
 const copy = {
@@ -13,7 +13,6 @@ const copy = {
     search: 'ค้นหาสินค้า',
     guide: 'คู่มือเลือกกลิ่น',
     contact: 'ติดต่อเรา',
-    hint: '404',
   },
   en: {
     eyebrow: 'Page not found',
@@ -24,7 +23,6 @@ const copy = {
     search: 'Search products',
     guide: 'Scent Guide',
     contact: 'Contact',
-    hint: '404',
   },
   ja: {
     eyebrow: 'ページが見つかりません',
@@ -35,7 +33,6 @@ const copy = {
     search: '商品を検索',
     guide: '香りガイド',
     contact: 'お問い合わせ',
-    hint: '404',
   },
   zh: {
     eyebrow: '页面未找到',
@@ -46,7 +43,6 @@ const copy = {
     search: '搜索商品',
     guide: '香氛指南',
     contact: '联系我们',
-    hint: '404',
   },
   vi: {
     eyebrow: 'Không tìm thấy trang',
@@ -57,7 +53,6 @@ const copy = {
     search: 'Tìm sản phẩm',
     guide: 'Hướng dẫn mùi hương',
     contact: 'Liên hệ',
-    hint: '404',
   },
   ko: {
     eyebrow: '페이지를 찾을 수 없습니다',
@@ -68,7 +63,6 @@ const copy = {
     search: '상품 검색',
     guide: '향 가이드',
     contact: '문의하기',
-    hint: '404',
   },
 } as const
 
@@ -86,78 +80,105 @@ export default function LocalizedNotFound({ lang }: LocalizedNotFoundProps) {
   const text = getCopy(lang)
 
   return (
-    <section className="min-h-[70vh] bg-surface-page px-6 py-16 text-text-main md:py-24">
-      <div className="mx-auto grid max-w-6xl items-center gap-12 lg:grid-cols-[1.05fr_0.95fr]">
-        <div>
-          <div className="ui-panel mb-8 inline-flex items-center gap-3 px-4 py-2">
-            <Image src="/favicon.svg" alt="" width={28} height={28} aria-hidden="true" />
-            <span className="ui-eyebrow">{text.eyebrow}</span>
-          </div>
+    <div className="relative min-h-screen flex items-center justify-center px-6 overflow-hidden bg-text-main">
 
-          <p className="text-8xl font-black leading-none text-brand-primary/20 md:text-9xl">{text.hint}</p>
-          <h1 className="mt-6 max-w-3xl text-4xl font-semibold leading-tight text-text-main md:text-6xl">
-            {text.title}
-          </h1>
-          <p className="mt-6 max-w-2xl text-base leading-8 text-muted-text md:text-lg">
-            {text.description}
+      {/* Atmospheric glow background */}
+      <div className="absolute inset-0 pointer-events-none">
+        <div className="absolute top-1/3 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[40rem] h-[40rem] bg-brand-primary/10 rounded-full blur-3xl" />
+        <div className="absolute bottom-1/4 right-1/4 w-64 h-64 bg-brand-warm/10 rounded-full blur-3xl" />
+        <div className="absolute top-10 left-10 w-32 h-32 bg-brand-accent/5 rounded-full blur-2xl" />
+      </div>
+
+      {/* Grain texture overlay */}
+      <div
+        className="absolute inset-0 opacity-[0.03] pointer-events-none"
+        style={{
+          backgroundImage: `url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='1'/%3E%3C/svg%3E")`,
+        }}
+      />
+
+      <div className="relative z-10 text-center space-y-8 max-w-xl w-full">
+
+        {/* 404 Large number with layered effect */}
+        <div className="relative select-none">
+          <p
+            className="text-[10rem] md:text-[14rem] font-black leading-none"
+            style={{
+              background: 'linear-gradient(to bottom, rgba(255,255,255,0.12), rgba(255,255,255,0.03))',
+              WebkitBackgroundClip: 'text',
+              WebkitTextFillColor: 'transparent',
+              backgroundClip: 'text',
+            }}
+          >
+            404
           </p>
 
-          <div className="mt-10 flex flex-col gap-3 sm:flex-row">
-            <Link
-              href={getPathWithLocale('/', lang)}
-              className="ui-button-primary px-6 py-3"
-            >
-              <Home className="h-4 w-4" />
-              {text.home}
+          {/* Floating emoji center */}
+          <div
+            className="absolute inset-0 flex items-center justify-center"
+            style={{ animation: 'float 4s ease-in-out infinite' }}
+          >
+            <span className="text-5xl md:text-6xl drop-shadow-2xl">🌿</span>
+          </div>
+        </div>
+
+        {/* Eyebrow badge */}
+        <div className="flex justify-center">
+          <span className="inline-flex items-center gap-2 rounded-full border border-white/10 bg-white/5 px-4 py-1.5 text-[10px] font-bold uppercase tracking-[0.25em] text-brand-primary backdrop-blur-sm">
+            {text.eyebrow}
+          </span>
+        </div>
+
+        {/* Copy */}
+        <div className="space-y-4">
+          <h1 className="font-serif text-2xl font-light leading-relaxed tracking-wide text-white/90 md:text-3xl">
+            {text.title}
+          </h1>
+          <p className="text-sm font-light leading-relaxed text-white/50 mx-auto max-w-sm">
+            {text.description}
+          </p>
+        </div>
+
+        {/* Primary actions */}
+        <div className="flex flex-col sm:flex-row gap-3 justify-center pt-2">
+          <Link
+            href={getPathWithLocale('/', lang)}
+            className="inline-flex items-center justify-center gap-2 rounded-full bg-brand-primary px-8 py-3.5 text-xs font-bold uppercase tracking-widest text-white transition-all duration-300 hover:bg-brand-primary-hover hover:shadow-[0_0_30px_rgba(255,107,107,0.4)] hover:-translate-y-0.5"
+          >
+            {text.home}
+          </Link>
+          <Link
+            href={getPathWithLocale('/shop', lang)}
+            className="inline-flex items-center justify-center gap-2 rounded-full border border-white/15 bg-white/5 px-8 py-3.5 text-xs font-bold uppercase tracking-widest text-white/80 backdrop-blur-sm transition-all duration-300 hover:bg-white/10 hover:border-white/30 hover:-translate-y-0.5"
+          >
+            {text.shop}
+          </Link>
+        </div>
+
+        {/* Divider + quick links */}
+        <div className="pt-4 border-t border-white/10">
+          <div className="flex justify-center gap-6 text-xs text-white/30">
+            <Link href={getPathWithLocale('/scent-guide', lang)} className="hover:text-white/70 transition-colors duration-300">
+              {text.guide}
             </Link>
-            <Link
-              href={getPathWithLocale('/shop', lang)}
-              className="ui-button-brand bg-surface-card text-text-main hover:bg-surface-page hover:text-brand-primary"
-            >
-              <ShoppingBag className="h-4 w-4" />
-              {text.shop}
+            <Link href={getPathWithLocale('/search', lang)} className="hover:text-white/70 transition-colors duration-300">
+              {text.search}
+            </Link>
+            <Link href={getPathWithLocale('/contact', lang)} className="hover:text-white/70 transition-colors duration-300">
+              {text.contact}
             </Link>
           </div>
         </div>
 
-          <div className="ui-panel border border-white/80 bg-surface-card/80 p-6 backdrop-blur md:p-8">
-            <div className="rounded-[1.5rem] bg-surface-page p-6">
-              <div className="flex items-center gap-3 border-b border-text-main/10 pb-5">
-              <div className="flex h-11 w-11 items-center justify-center rounded-full bg-surface-card text-brand-primary shadow-sm">
-                <Search className="h-5 w-5" />
-              </div>
-              <div>
-                <p className="text-xs font-bold uppercase tracking-[0.18em] text-muted-text">{text.hint}</p>
-                <p className="mt-1 text-sm font-semibold text-text-main">{text.search}</p>
-              </div>
-            </div>
-
-            <div className="mt-6 grid gap-3">
-              <Link
-                href={getPathWithLocale('/search', lang)}
-                className="group flex items-center justify-between rounded-2xl bg-surface-card px-5 py-4 text-sm font-semibold text-text-main transition hover:text-brand-primary"
-              >
-                <span>{text.search}</span>
-                <ArrowRight className="h-4 w-4 transition group-hover:translate-x-1" />
-              </Link>
-              <Link
-                href={getPathWithLocale('/scent-guide', lang)}
-                className="group flex items-center justify-between rounded-2xl bg-surface-card px-5 py-4 text-sm font-semibold text-text-main transition hover:text-brand-primary"
-              >
-                <span>{text.guide}</span>
-                <ArrowRight className="h-4 w-4 transition group-hover:translate-x-1" />
-              </Link>
-              <Link
-                href={getPathWithLocale('/contact', lang)}
-                className="group flex items-center justify-between rounded-2xl bg-surface-card px-5 py-4 text-sm font-semibold text-text-main transition hover:text-brand-primary"
-              >
-                <span>{text.contact}</span>
-                <ArrowRight className="h-4 w-4 transition group-hover:translate-x-1" />
-              </Link>
-            </div>
-          </div>
-        </div>
       </div>
-    </section>
+
+      {/* Float keyframe via inline style */}
+      <style>{`
+        @keyframes float {
+          0%, 100% { transform: translateY(0px); }
+          50% { transform: translateY(-14px); }
+        }
+      `}</style>
+    </div>
   )
 }

apps/website/src/components/dynamic/DynamicPageRenderer.tsx

@@ -2,8 +2,8 @@
 
 import Image from 'next/image'
 import Link from '../LocalizedLink'
-import { Clock, Mail, MapPin, MessageCircle, Send, ChevronLeft, ChevronRight } from 'lucide-react'
-import { useState, useRef } from 'react'
+import { Clock, Mail, MapPin, MessageCircle, Send } from 'lucide-react'
+import { useState } from 'react'
 import type { Category, PageSection, Product } from '@homaroma/types'
 import { getCategoryImage } from '@homaroma/types'
 import ProductCard from '../ProductCard'
@@ -11,8 +11,10 @@ import { localizedFromRecord, resolveCategoryName, resolveLocalized, toRecord }
 import { useLang } from '../../hooks/useLang'
 import { useTranslation } from 'react-i18next'
 import { Swiper, SwiperSlide } from 'swiper/react'
-import { Autoplay } from 'swiper/modules'
+import { Autoplay, Pagination, Navigation } from 'swiper/modules'
 import 'swiper/css'
+import 'swiper/css/pagination'
+import 'swiper/css/navigation'
 
 type DynamicPageRendererProps = {
   sections: PageSection[]
@@ -402,33 +404,38 @@ function EditorialCarouselSection({ payload, lang }: { payload: Record<string, u
   const bgClass = backgroundColor ? `bg-pop-${backgroundColor}` : 'bg-surface-page'
   const textClass = textColor ? `text-pop-${textColor}` : 'text-text-main'
 
-  const scrollContainerRef = useRef<HTMLDivElement>(null)
-  const scrollBy = (offset: number) => {
-    if (scrollContainerRef.current) {
-      scrollContainerRef.current.scrollBy({ left: offset, behavior: 'smooth' })
-    }
-  }
+  const isSplitScreen = payload.layout === 'split_screen'
+  const imagePosition = typeof payload.imagePosition === 'string' ? payload.imagePosition : 'left'
 
   if (!slides.length) return null
 
   return (
-    <section className={`px-6 py-16 md:py-24 ${bgClass} ${textClass}`}>
-      <div className="mx-auto max-w-7xl space-y-12">
+    <section className={`overflow-hidden py-16 md:py-24 ${bgClass} ${textClass}`}>
+      <div className={isSplitScreen ? 'w-full space-y-12' : 'mx-auto max-w-7xl px-6 space-y-12'}>
         {title && (
-          <div className="mx-auto max-w-3xl space-y-4 text-center">
-            <h2 className={`text-4xl font-semibold md:text-5xl ${textClass}`}>{renderAccentTitle(title)}</h2>
-            <div className="mx-auto h-px w-16 bg-brand-accent" />
+          <div className={`space-y-4 text-center ${isSplitScreen ? 'px-4 md:px-8' : ''}`}>
+            <h2 className={`font-serif text-3xl font-light tracking-wide md:text-5xl ${textClass}`}>
+              {renderAccentTitle(title)}
+            </h2>
+            <div className="mx-auto h-px w-16 bg-brand-primary" />
           </div>
         )}
-        <div className="relative">
-          <button
-            onClick={() => scrollBy(-400)}
-            className="hidden md:flex bg-surface-card rounded-full shadow-card hover:text-brand-primary h-10 w-10 items-center justify-center absolute z-10 top-1/2 -translate-y-1/2 -left-5"
-            aria-label="Scroll left"
+
+        <div className="relative select-none pb-12">
+          <Swiper
+            modules={[Autoplay, Pagination, Navigation]}
+            spaceBetween={isSplitScreen ? 0 : 30}
+            slidesPerView={1}
+            breakpoints={isSplitScreen ? undefined : {
+              640: { slidesPerView: 2 },
+              1024: { slidesPerView: 3 }
+            }}
+            pagination={{ clickable: true, bulletActiveClass: 'swiper-pagination-bullet-active !bg-brand-primary' }}
+            navigation={true}
+            autoplay={{ delay: 5000, disableOnInteraction: false }}
+            grabCursor={true}
+            className="w-full"
           >
-            <ChevronLeft className="h-6 w-6 text-brand-primary" />
-          </button>
-          <div ref={scrollContainerRef} className="flex overflow-x-auto snap-x snap-mandatory hide-scrollbar gap-6 pb-8">
             {slides.map((slide, index) => {
               const slideTitle = localizedFromRecord(slide, 'title', resolvedLang)
               const description = localizedFromRecord(slide, 'description', resolvedLang)
@@ -438,43 +445,74 @@ function EditorialCarouselSection({ payload, lang }: { payload: Record<string, u
               const imageUrl = typeof slide.imageUrl === 'string' ? slide.imageUrl : ''
 
               return (
-                <article key={index} className="ui-card overflow-hidden group w-[85vw] md:w-[350px] flex-none snap-start">
-                  {imageUrl ? (
-                    <div className="relative aspect-[4/3] overflow-hidden">
-                      <Image
-                        src={imageUrl}
-                        alt={slideTitle || 'Editorial slide'}
-                        fill
-                        unoptimized
-                        className="h-full w-full object-cover transition duration-700 group-hover:scale-105"
-                      />
-                    </div>
-                  ) : null}
-                  <div className="space-y-4 p-6 flex flex-col flex-1 justify-between">
-                    <div>
-                      {category && <span className="text-[10px] font-bold uppercase tracking-[0.24em] text-brand-primary block">{category}</span>}
-                      {slideTitle && <h3 className="text-xl font-bold text-text-main mt-6 group-hover:text-brand-primary transition-colors">{renderAccentTitle(slideTitle)}</h3>}
-                      {description && <p className="text-base text-muted-text mt-3 whitespace-pre-wrap">{description}</p>}
-                    </div>
-                    {buttonText && buttonLink && (
-                      <div className="pt-2">
-                        <Link href={buttonLink} className="ui-section-dark-link inline-flex items-center gap-2 text-xs font-bold uppercase tracking-widest transition-colors group/link">
-                          {buttonText} <span className="group-hover/link:translate-x-1 transition-transform">&rarr;</span>
-                        </Link>
+                <SwiperSlide key={index} className="h-auto flex flex-col">
+                  {isSplitScreen ? (
+                    <div className={`group grid grid-cols-1 bg-surface-card overflow-hidden transition-all duration-300 ${
+                      imagePosition === 'left' ? 'md:grid-cols-[65%_35%]' : 'md:grid-cols-[35%_65%]'
+                    }`}>
+                      {imageUrl ? (
+                        <div className={`relative aspect-[4/3] md:aspect-auto overflow-hidden h-64 md:h-full min-h-[300px] md:min-h-[500px] lg:min-h-[600px] ${
+                          imagePosition === 'left' ? 'order-1 md:order-1' : 'order-1 md:order-2'
+                        }`}>
+                          <Image
+                            src={imageUrl}
+                            alt={slideTitle || 'Editorial slide'}
+                            fill
+                            unoptimized
+                            className="h-full w-full object-cover transition duration-700 group-hover:scale-105"
+                          />
+                        </div>
+                      ) : null}
+                      <div className={`space-y-6 p-6 md:p-16 lg:p-24 flex flex-col justify-center ${
+                        imagePosition === 'left' ? 'order-2 md:order-2' : 'order-2 md:order-1'
+                      }`}>
+                        <div className="space-y-3">
+                          {category && <span className="block text-[10px] font-bold uppercase tracking-[0.2em] text-brand-primary">{category}</span>}
+                          {slideTitle && <h3 className="font-serif text-xl font-light tracking-wide text-text-main">{renderAccentTitle(slideTitle)}</h3>}
+                          {description && <p className="line-clamp-6 text-xs font-light leading-relaxed text-muted-text md:text-sm">{description}</p>}
+                        </div>
+                        {buttonText && buttonLink && (
+                          <div className="pt-2">
+                            <Link href={buttonLink} className="inline-flex items-center gap-2 text-xs font-bold uppercase tracking-widest text-brand-primary hover:text-text-main transition-colors group/link">
+                              {buttonText} <span className="group-hover/link:translate-x-1 transition-transform">&rarr;</span>
+                            </Link>
+                          </div>
+                        )}
                       </div>
-                    )}
-                  </div>
-                </article>
+                    </div>
+                  ) : (
+                    <div className="ui-card overflow-hidden group flex flex-col h-full transition-all duration-300 hover:border-brand-primary/30">
+                      {imageUrl ? (
+                        <div className="relative aspect-[4/3] overflow-hidden">
+                          <Image
+                            src={imageUrl}
+                            alt={slideTitle || 'Editorial slide'}
+                            fill
+                            unoptimized
+                            className="h-full w-full object-cover transition duration-700 group-hover:scale-105"
+                          />
+                        </div>
+                      ) : null}
+                      <div className="p-6 flex flex-col flex-1 justify-between space-y-6">
+                        <div className="space-y-3">
+                          {category && <span className="block text-[10px] font-bold uppercase tracking-[0.2em] text-brand-primary">{category}</span>}
+                          {slideTitle && <h3 className="font-serif text-xl font-light tracking-wide text-text-main">{renderAccentTitle(slideTitle)}</h3>}
+                          {description && <p className="line-clamp-3 text-xs font-light leading-relaxed text-muted-text md:text-sm">{description}</p>}
+                        </div>
+                        {buttonText && buttonLink && (
+                          <div className="pt-2">
+                            <Link href={buttonLink} className="inline-flex items-center gap-2 text-xs font-bold uppercase tracking-widest text-brand-primary hover:text-text-main transition-colors group/link">
+                              {buttonText} <span className="group-hover/link:translate-x-1 transition-transform">&rarr;</span>
+                            </Link>
+                          </div>
+                        )}
+                      </div>
+                    </div>
+                  )}
+                </SwiperSlide>
               )
             })}
-          </div>
-          <button
-            onClick={() => scrollBy(400)}
-            className="hidden md:flex bg-surface-card rounded-full shadow-card hover:text-brand-primary h-10 w-10 items-center justify-center absolute z-10 top-1/2 -translate-y-1/2 -right-5"
-            aria-label="Scroll right"
-          >
-            <ChevronRight className="h-6 w-6 text-brand-primary" />
-          </button>
+          </Swiper>
         </div>
       </div>
     </section>