chore: rollback LocalizedNotFound.tsx to previous UI layout
This commit is contained in:
Your Name committed
1 parent
8e246477bc
commit
6096c727d9
1 file changed
+68
-89
@@ -1,6 +1,6 @@
|
||||
'use client'
|
||||
|
||||
import Image from 'next/image'
|
||||
import Link from 'next/link'
|
||||
import { ArrowRight, Home, Search, ShoppingBag } from 'lucide-react'
|
||||
import { getPathWithLocale, type Locale } from '@/lib/locales'
|
||||
|
||||
const copy = {
|
||||
@@ -13,6 +13,7 @@ const copy = {
|
||||
search: 'ค้นหาสินค้า',
|
||||
guide: 'คู่มือเลือกกลิ่น',
|
||||
contact: 'ติดต่อเรา',
|
||||
hint: '404',
|
||||
},
|
||||
en: {
|
||||
eyebrow: 'Page not found',
|
||||
@@ -23,6 +24,7 @@ const copy = {
|
||||
search: 'Search products',
|
||||
guide: 'Scent Guide',
|
||||
contact: 'Contact',
|
||||
hint: '404',
|
||||
},
|
||||
ja: {
|
||||
eyebrow: 'ページが見つかりません',
|
||||
@@ -33,6 +35,7 @@ const copy = {
|
||||
search: '商品を検索',
|
||||
guide: '香りガイド',
|
||||
contact: 'お問い合わせ',
|
||||
hint: '404',
|
||||
},
|
||||
zh: {
|
||||
eyebrow: '页面未找到',
|
||||
@@ -43,6 +46,7 @@ const copy = {
|
||||
search: '搜索商品',
|
||||
guide: '香氛指南',
|
||||
contact: '联系我们',
|
||||
hint: '404',
|
||||
},
|
||||
vi: {
|
||||
eyebrow: 'Không tìm thấy trang',
|
||||
@@ -53,6 +57,7 @@ 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: '페이지를 찾을 수 없습니다',
|
||||
@@ -63,6 +68,7 @@ const copy = {
|
||||
search: '상품 검색',
|
||||
guide: '향 가이드',
|
||||
contact: '문의하기',
|
||||
hint: '404',
|
||||
},
|
||||
} as const
|
||||
|
||||
@@ -80,105 +86,78 @@ export default function LocalizedNotFound({ lang }: LocalizedNotFoundProps) {
|
||||
const text = getCopy(lang)
|
||||
|
||||
return (
|
||||
<div className="relative min-h-screen flex items-center justify-center px-6 overflow-hidden bg-text-main">
|
||||
|
||||
{/* 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>
|
||||
|
||||
{/* 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>
|
||||
<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>
|
||||
|
||||
{/* 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">
|
||||
<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="text-sm font-light leading-relaxed text-white/50 mx-auto max-w-sm">
|
||||
<p className="mt-6 max-w-2xl text-base leading-8 text-muted-text md:text-lg">
|
||||
{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}
|
||||
<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}
|
||||
</Link>
|
||||
<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
|
||||
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>
|
||||
</div>
|
||||
</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>
|
||||
|
||||
{/* Float keyframe via inline style */}
|
||||
<style>{`
|
||||
@keyframes float {
|
||||
0%, 100% { transform: translateY(0px); }
|
||||
50% { transform: translateY(-14px); }
|
||||
}
|
||||
`}</style>
|
||||
</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>
|
||||
)
|
||||
}
|
||||
Reference in new issue
Block a user