x

apps/spa/src/pages/NotFoundPage.tsx

@@ -1,55 +1,179 @@
+import { useState, useEffect } from 'react'
 import { Link } from 'react-router-dom'
+import { useTranslation } from 'react-i18next'
+import { ArrowRight, Home, Search, ShoppingBag, AlertCircle } from 'lucide-react'
+import Navbar from '../components/Navbar'
+import Footer from '../components/Footer'
+import { API_BASE, type Category } from '../types'
+
+const copy = {
+  th: {
+    eyebrow: 'ไม่พบหน้านี้',
+    title: 'เส้นทางนี้ยังไม่มีกลิ่นที่ตามหา',
+    description: 'ลิงก์อาจถูกย้าย ลบ หรือยังไม่ได้เผยแพร่ ลองกลับไปเลือกสินค้าหรือค้นหากลิ่นที่เหมาะกับพื้นที่ของคุณ',
+    home: 'กลับหน้าแรก',
+    shop: 'เลือกสินค้า',
+    search: 'ค้นหาสินค้า',
+    guide: 'คู่มือเลือกกลิ่น',
+    contact: 'ติดต่อเรา',
+    hint: '404',
+  },
+  en: {
+    eyebrow: 'Page not found',
+    title: 'This scent trail has faded',
+    description: 'The link may have moved, expired, or is not published yet. Head back to the collection or search for the right aroma.',
+    home: 'Back home',
+    shop: 'Shop products',
+    search: 'Search products',
+    guide: 'Scent Guide',
+    contact: 'Contact',
+    hint: '404',
+  },
+  ja: {
+    eyebrow: 'ページが見つかりません',
+    title: 'お探しの香りのページは見つかりません',
+    description: 'リンクが移動、削除、または未公開の可能性があります。コレクションに戻るか商品を検索してください。',
+    home: 'ホームへ戻る',
+    shop: '商品を見る',
+    search: '商品を検索',
+    guide: '香りガイド',
+    contact: 'お問い合わせ',
+    hint: '404',
+  },
+  zh: {
+    eyebrow: '页面未找到',
+    title: '这条香气路径暂时不存在',
+    description: '链接可能已移动、删除或尚未发布。你可以返回首页、浏览商品或搜索合适的香氛。',
+    home: '返回首页',
+    shop: '浏览商品',
+    search: '搜索商品',
+    guide: '香氛指南',
+    contact: '联系我们',
+    hint: '404',
+  },
+  vi: {
+    eyebrow: 'Không tìm thấy trang',
+    title: 'Đường dẫn hương thơm này không còn tồn tại',
+    description: 'Liên kết có thể đã được di chuyển, xóa hoặc chưa xuất bản. Hãy quay lại bộ sưu tập hoặc tìm sản phẩm phù hợp.',
+    home: 'Về trang chủ',
+    shop: 'Xem sản phẩm',
+    search: 'Tìm sản phẩm',
+    guide: 'Hướng dẫn mùi hương',
+    contact: 'Liên hệ',
+    hint: '404',
+  },
+  ko: {
+    eyebrow: '페이지를 찾을 수 없습니다',
+    title: '찾으시는 향의 경로가 사라졌습니다',
+    description: '링크가 이동되었거나 삭제되었거나 아직 공개되지 않았을 수 있습니다. 컬렉션으로 돌아가거나 상품을 검색해 보세요.',
+    home: '홈으로',
+    shop: '상품 보기',
+    search: '상품 검색',
+    guide: '향 가이드',
+    contact: '문의하기',
+    hint: '404',
+  },
+} as const
+
+type CopyLang = keyof typeof copy
+
+function getCopy(lang: string) {
+  return copy[(lang in copy ? lang : 'th') as CopyLang]
+}
 
 export default function NotFoundPage() {
+  const [categories, setCategories] = useState<Category[]>([])
+  const { i18n } = useTranslation()
+  const text = getCopy(i18n.language)
+
+  useEffect(() => {
+    fetch(`${API_BASE}/categories?lang=${i18n.language}`)
+      .then(r => r.json())
+      .then(setCategories)
+      .catch(console.error)
+  }, [i18n.language])
+
   return (
-    <div className="min-h-screen flex items-center justify-center px-6 bg-spa-light">
-      {/* 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-spa-forest/10 rounded-full blur-3xl" />
-        <div className="absolute bottom-1/4 right-1/4 w-64 h-64 bg-spa-stone/10 rounded-full blur-3xl" />
-      </div>
+    <div className="min-h-screen bg-pop-bg flex flex-col">
+      <Navbar categories={categories} />
 
-      <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
+      <main className="flex-1">
+        <section className="px-6 py-16 text-pop-black 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="mb-8 inline-flex items-center gap-3 rounded-full border border-pop-black/10 bg-white/50 px-4 py-2 shadow-sm">
+                <AlertCircle className="h-5 w-5 text-pop-pink" aria-hidden="true" />
+                <span className="text-xs font-bold uppercase tracking-widest text-pop-pink">{text.eyebrow}</span>
+              </div>
+
+              <p className="text-8xl font-black leading-none text-pop-pink/20 md:text-9xl">{text.hint}</p>
+              <h1 className="mt-6 max-w-3xl text-4xl font-semibold leading-tight text-pop-black md:text-6xl">
+                {text.title}
+              </h1>
+              <p className="mt-6 max-w-2xl text-base leading-8 text-pop-black/60 md:text-lg">
+                {text.description}
+              </p>
+
+              <div className="mt-10 flex flex-col gap-3 sm:flex-row">
+                <Link
+                  to="/"
+                  className="ui-button-primary gap-2"
+                >
+                  <Home className="h-4 w-4" />
+                  {text.home}
+                </Link>
+                <Link
+                  to="/shop"
+                  className="ui-button-secondary gap-2 border border-pop-black/10 shadow-sm"
+                >
+                  <ShoppingBag className="h-4 w-4" />
+                  {text.shop}
+                </Link>
+              </div>
+            </div>
+
+            <div className="brutal-box bg-white/80 p-6 backdrop-blur md:p-8">
+              <div className="rounded-[1.5rem] bg-pop-bg p-6 shadow-inner border border-pop-black/5">
+                <div className="flex items-center gap-3 border-b border-pop-black/10 pb-5">
+                  <div className="flex h-11 w-11 items-center justify-center rounded-full bg-white text-pop-pink shadow-sm border border-pop-black/5">
+                    <Search className="h-5 w-5" />
+                  </div>
+                  <div>
+                    <p className="text-xs font-bold uppercase tracking-[0.18em] text-pop-black/60">{text.hint}</p>
+                    <p className="mt-1 text-sm font-semibold text-pop-black">{text.search}</p>
+                  </div>
+                </div>
+
+                <div className="mt-6 grid gap-3">
+                  <Link
+                    to="/search"
+                    className="group flex items-center justify-between rounded-2xl bg-white px-5 py-4 text-sm font-semibold text-pop-black transition hover:text-pop-pink shadow-sm border border-pop-black/5"
+                  >
+                    <span>{text.search}</span>
+                    <ArrowRight className="h-4 w-4 transition group-hover:translate-x-1" />
+                  </Link>
+                  <Link
+                    to="/scent-guide"
+                    className="group flex items-center justify-between rounded-2xl bg-white px-5 py-4 text-sm font-semibold text-pop-black transition hover:text-pop-pink shadow-sm border border-pop-black/5"
+                  >
+                    <span>{text.guide}</span>
+                    <ArrowRight className="h-4 w-4 transition group-hover:translate-x-1" />
+                  </Link>
+                  <Link
+                    to="/contact"
+                    className="group flex items-center justify-between rounded-2xl bg-white px-5 py-4 text-sm font-semibold text-pop-black transition hover:text-pop-pink shadow-sm border border-pop-black/5"
+                  >
+                    <span>{text.contact}</span>
+                    <ArrowRight className="h-4 w-4 transition group-hover:translate-x-1" />
+                  </Link>
+                </div>
+              </div>
+            </div>
           </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-spa-stone 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-spa-light text-spa-forest font-bold rounded-lg tracking-widest uppercase hover:bg-spa-forest text-spa-light 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 bg-spa-light shadow-sm border border-spa-stone/10 text-spa-light font-bold rounded-lg tracking-widest uppercase hover:bg-spa-light transition-all duration-300 border border-spa-stone/10 text-sm"
-          >
-            Browse Products
-          </Link>
-        </div>
-
-        <div className="pt-4 border-t border-spa-stone/10">
-          <div className="flex justify-center gap-6 text-xs text-spa-stone">
-            <Link to="/scent-guide" className="hover:text-spa-light transition-colors">Scent Guide</Link>
-            <Link to="/faq" className="hover:text-spa-light transition-colors">FAQ</Link>
-            <Link to="/contact" className="hover:text-spa-light transition-colors">Contact</Link>
-          </div>
-        </div>
-      </div>
+        </section>
+      </main>
+      
+      <Footer categories={categories} />
     </div>
   )
 }