admin/homaroma
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects 1 Releases Wiki Activity

x

Browse Source
This commit is contained in:
Your Name committed 2026-06-20 23:51:57 -04:00
1 parent 74b9670c79
commit 73590e06c4
37 files changed
+958 -703
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

apps/website/src/app/[lang]/[slug]/page.tsx
+7 -7
View File
@@ -60,10 +60,10 @@ export default async function CmsCustomPage({ params }: { params: Promise<{ slug
if (pageResult.status === 404) notFound() if (pageResult.status === 404) notFound()
return ( return (
<main className="min-h-[70vh] bg-pop-bg px-6 py-24"> <main className="min-h-[70vh] bg-surface-page px-6 py-24 text-text-main">
<div className="mx-auto max-w-3xl rounded-3xl border border-rose-100 bg-white px-6 py-16 text-center shadow-brutal"> <div className="ui-panel mx-auto max-w-3xl border border-rose-100 px-6 py-16 text-center">
<p className="text-xs font-bold uppercase tracking-[0.28em] text-rose-500">CMS Page Error</p> <p className="text-xs font-bold uppercase tracking-[0.28em] text-rose-500">CMS Page Error</p>
<h1 className="mt-4 text-3xl font-semibold text-pop-black md:text-4xl"> <h1 className="mt-4 text-3xl font-semibold text-text-main md:text-4xl">
ไม่สามารถโหลดหน้านี้ได้ ไม่สามารถโหลดหน้านี้ได้
</h1> </h1>
<p className="mt-4 text-sm text-rose-500">{pageResult.error}</p> <p className="mt-4 text-sm text-rose-500">{pageResult.error}</p>
@@ -85,7 +85,7 @@ export default async function CmsCustomPage({ params }: { params: Promise<{ slug
const { announcementSections, heroSections, bottomSections } = splitCmsLayoutSections(sections) const { announcementSections, heroSections, bottomSections } = splitCmsLayoutSections(sections)
return ( return (
<main className="min-h-[70vh] bg-pop-bg"> <main className="min-h-[70vh] bg-surface-page text-text-main">
{sections.length > 0 ? ( {sections.length > 0 ? (
<> <>
{announcementSections.length > 0 && ( {announcementSections.length > 0 && (
@@ -100,9 +100,9 @@ export default async function CmsCustomPage({ params }: { params: Promise<{ slug
</> </>
) : ( ) : (
<div className="mx-auto max-w-4xl px-6 py-24 text-center"> <div className="mx-auto max-w-4xl px-6 py-24 text-center">
<p className="text-xs font-bold uppercase tracking-[0.28em] text-pop-pink">HomAroma</p> <p className="text-xs font-bold uppercase tracking-[0.28em] text-brand-primary">HomAroma</p>
<h1 className="mt-4 text-4xl font-semibold text-pop-black md:text-5xl">{page.title}</h1> <h1 className="mt-4 text-4xl font-semibold text-text-main md:text-5xl">{page.title}</h1>
<p className="mt-5 text-gray-600"> <p className="mt-5 text-muted-text">
หน้านี้ถูกเผยแพร่แล้ว แต่ยังไม่มี section ที่เปิดใช้งานใน Page Builder หน้านี้ถูกเผยแพร่แล้ว แต่ยังไม่มี section ที่เปิดใช้งานใน Page Builder
</p> </p>
</div> </div>
apps/website/src/app/[lang]/about/page.tsx
+27 -27
View File
@@ -38,26 +38,26 @@ export async function generateMetadata({ params }: { params: Promise<{ lang: str
export default function AboutPage() { export default function AboutPage() {
return ( return (
<div className="min-h-screen bg-pop-bg"> <div className="min-h-screen bg-surface-page text-text-main">
<section className="relative flex min-h-[60vh] items-center justify-center overflow-hidden bg-white pt-24"> <section className="relative flex min-h-[60vh] items-center justify-center overflow-hidden bg-surface-card pt-24">
<div className="absolute inset-0 bg-[radial-gradient(circle_at_30%_30%,rgba(255,107,107,0.22),transparent_34%),radial-gradient(circle_at_80%_20%,rgba(255,160,122,0.18),transparent_34%)]" /> <div className="absolute inset-0 bg-[radial-gradient(circle_at_30%_30%,rgba(255,107,107,0.22),transparent_34%),radial-gradient(circle_at_80%_20%,rgba(255,160,122,0.18),transparent_34%)]" />
<div className="relative z-10 mx-auto max-w-3xl space-y-6 px-6 text-center"> <div className="relative z-10 mx-auto max-w-3xl space-y-6 px-6 text-center">
<p className="text-xs font-semibold uppercase tracking-[0.4em] text-pop-pink">Our Story</p> <p className="ui-eyebrow">Our Story</p>
<h1 className="text-5xl font-bold leading-tight text-pop-black md:text-7xl"> <h1 className="text-5xl font-bold leading-tight text-text-main md:text-7xl">
Born from a passion for <span className="italic text-pop-pink">stillness</span> Born from a passion for <span className="italic text-brand-primary">stillness</span>
</h1> </h1>
<p className="text-lg leading-relaxed text-gray-600"> <p className="text-lg leading-relaxed text-muted-text">
HomAroma 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. HomAroma 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> </p>
</div> </div>
</section> </section>
<section className="border-y border-gray-200 bg-white px-6 py-12"> <section className="border-y border-line-primary/20 bg-surface-card px-6 py-12">
<div className="mx-auto grid max-w-4xl grid-cols-2 gap-8 text-center md:grid-cols-4"> <div className="mx-auto grid max-w-4xl grid-cols-2 gap-8 text-center md:grid-cols-4">
{STATS.map(s => ( {STATS.map(s => (
<div key={s.label} className="space-y-1"> <div key={s.label} className="space-y-1">
<div className="text-4xl font-bold text-pop-pink">{s.value}</div> <div className="text-4xl font-bold text-brand-primary">{s.value}</div>
<div className="text-xs uppercase tracking-widest text-gray-500">{s.label}</div> <div className="text-xs uppercase tracking-widest text-muted-text">{s.label}</div>
</div> </div>
))} ))}
</div> </div>
@@ -66,40 +66,40 @@ export default function AboutPage() {
<section className="px-6 py-24"> <section className="px-6 py-24">
<div className="mx-auto grid max-w-6xl items-center gap-16 md:grid-cols-2"> <div className="mx-auto grid max-w-6xl items-center gap-16 md:grid-cols-2">
<div className="space-y-6"> <div className="space-y-6">
<p className="text-xs font-semibold uppercase tracking-[0.3em] text-pop-pink">Our Mission</p> <p className="ui-eyebrow">Our Mission</p>
<h2 className="text-4xl font-bold leading-tight text-pop-black">Transforming spaces into sanctuaries of peace</h2> <h2 className="text-4xl font-bold leading-tight text-text-main">Transforming spaces into sanctuaries of peace</h2>
<p className="leading-relaxed text-gray-700"> <p className="leading-relaxed text-text-main/85">
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. 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>
<p className="text-sm leading-relaxed text-gray-600"> <p className="text-sm leading-relaxed text-muted-text">
Every HomAroma 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. Every HomAroma 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> </p>
</div> </div>
<div className="relative h-80 overflow-hidden rounded-3xl border border-gray-100 bg-white shadow-brutal"> <div className="relative h-80 overflow-hidden rounded-3xl border border-line-primary/20 bg-surface-card shadow-card">
<div className="absolute inset-0 bg-gradient-to-br from-pop-bg via-white to-pop-orange/20" /> <div className="absolute inset-0 bg-gradient-to-br from-surface-page via-white to-brand-warm/20" />
<div className="absolute inset-0 flex items-center justify-center"> <div className="absolute inset-0 flex items-center justify-center">
<div className="space-y-3 text-center"> <div className="space-y-3 text-center">
<div className="text-7xl">🌿</div> <div className="text-7xl">🌿</div>
<p className="text-sm uppercase tracking-widest text-gray-500">HomAroma Studio, Bangkok</p> <p className="text-sm uppercase tracking-widest text-muted-text">HomAroma Studio, Bangkok</p>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</section> </section>
<section className="border-y border-gray-200 bg-white px-6 py-24"> <section className="border-y border-line-primary/20 bg-surface-card px-6 py-24">
<div className="mx-auto max-w-6xl space-y-12"> <div className="mx-auto max-w-6xl space-y-12">
<div className="space-y-3 text-center"> <div className="space-y-3 text-center">
<p className="text-xs font-semibold uppercase tracking-[0.3em] text-pop-pink">What We Stand For</p> <p className="ui-eyebrow">What We Stand For</p>
<h2 className="text-4xl font-bold text-pop-black">Three Pillars</h2> <h2 className="text-4xl font-bold text-text-main">Three Pillars</h2>
<div className="mx-auto h-px w-12 bg-pop-pink" /> <div className="mx-auto h-px w-12 bg-brand-primary" />
</div> </div>
<div className="grid gap-8 md:grid-cols-3"> <div className="grid gap-8 md:grid-cols-3">
{PILLARS.map(p => ( {PILLARS.map(p => (
<div key={p.title} className="space-y-4 rounded-2xl border border-gray-100 bg-pop-bg p-8 shadow-brutal transition-all duration-300 hover:-translate-y-1 hover:shadow-brutal-hover"> <div key={p.title} className="ui-card ui-card-hover space-y-4 p-8">
<div className="text-4xl">{p.icon}</div> <div className="text-4xl">{p.icon}</div>
<h3 className="text-xl font-bold text-pop-black">{p.title}</h3> <h3 className="text-xl font-bold text-text-main">{p.title}</h3>
<p className="text-sm leading-relaxed text-gray-600">{p.desc}</p> <p className="text-sm leading-relaxed text-muted-text">{p.desc}</p>
</div> </div>
))} ))}
</div> </div>
@@ -107,13 +107,13 @@ export default function AboutPage() {
</section> </section>
<section className="space-y-6 px-6 py-24 text-center"> <section className="space-y-6 px-6 py-24 text-center">
<h2 className="text-4xl font-bold text-pop-black">Ready to find your scent?</h2> <h2 className="text-4xl font-bold text-text-main">Ready to find your scent?</h2>
<p className="mx-auto max-w-md text-gray-600">Let our Scent Guide help you discover the perfect blend for your moment.</p> <p className="mx-auto max-w-md text-muted-text">Let our Scent Guide help you discover the perfect blend for your moment.</p>
<div className="flex flex-col justify-center gap-4 pt-4 sm:flex-row"> <div className="flex flex-col justify-center gap-4 pt-4 sm:flex-row">
<Link href="/scent-guide" className="rounded-full bg-pop-black px-10 py-4 font-bold uppercase tracking-widest text-white transition hover:bg-pop-pink"> <Link href="/scent-guide" className="rounded-full bg-text-main px-10 py-4 font-bold uppercase tracking-widest text-white transition hover:bg-brand-primary">
Take the Scent Guide Take the Scent Guide
</Link> </Link>
<Link href="/shop" className="rounded-full border border-pop-pink bg-white px-10 py-4 font-bold uppercase tracking-widest text-pop-pink transition hover:bg-pop-bg"> <Link href="/shop" className="rounded-full border border-brand-primary bg-surface-card px-10 py-4 font-bold uppercase tracking-widest text-brand-primary transition hover:bg-surface-page">
Shop All Products Shop All Products
</Link> </Link>
</div> </div>
apps/website/src/app/[lang]/article/[slug]/page.tsx
+10 -9
View File
@@ -1,4 +1,5 @@
import Link from '@/components/LocalizedLink' import Link from '@/components/LocalizedLink'
import Image from 'next/image'
import { notFound } from 'next/navigation' import { notFound } from 'next/navigation'
import type { Metadata } from 'next' import type { Metadata } from 'next'
import { generateSeoMetadata } from '@/lib/seo' import { generateSeoMetadata } from '@/lib/seo'
@@ -39,38 +40,38 @@ export default async function ArticleReaderPage({ params }: { params: Promise<{
if (!article) notFound() if (!article) notFound()
return ( return (
<div className="flex min-h-screen flex-col bg-pop-bg"> <div className="flex min-h-screen flex-col bg-surface-page text-text-main">
<main className="flex-1 pb-20 pt-24"> <main className="flex-1 pb-20 pt-24">
<article className="relative mx-auto mt-8 w-full max-w-4xl"> <article className="relative mx-auto mt-8 w-full max-w-4xl">
<Link <Link
href="/scent-guide" href="/scent-guide"
className="absolute -left-16 top-0 mt-8 hidden rounded-full border border-gray-200 bg-white p-4 text-pop-black shadow-sm transition-colors hover:text-pop-pink xl:-left-24 lg:flex" className="absolute -left-16 top-0 mt-8 hidden rounded-full border border-line-primary/20 bg-surface-card p-4 text-text-main shadow-sm transition-colors hover:text-brand-primary xl:-left-24 lg:flex"
> >
<ArrowLeft className="h-5 w-5" /> <ArrowLeft className="h-5 w-5" />
</Link> </Link>
<div className="space-y-6 px-6 py-12 text-center"> <div className="space-y-6 px-6 py-12 text-center">
<Link href="/scent-guide" className="mb-4 inline-flex items-center gap-2 text-sm text-gray-600 hover:text-pop-pink lg:hidden"> <Link href="/scent-guide" className="mb-4 inline-flex items-center gap-2 text-sm text-muted-text hover:text-brand-primary lg:hidden">
<ArrowLeft className="h-4 w-4" /> Go Back <ArrowLeft className="h-4 w-4" /> Go Back
</Link> </Link>
<p className="text-xs font-bold uppercase tracking-[0.3em] text-pop-pink"> <p className="ui-eyebrow">
{new Date(article.createdAt).toLocaleDateString('en-US', { month: 'long', day: 'numeric', year: 'numeric' })} {new Date(article.createdAt).toLocaleDateString('en-US', { month: 'long', day: 'numeric', year: 'numeric' })}
</p> </p>
<h1 className="mx-auto max-w-3xl text-4xl font-bold leading-tight text-pop-black md:text-5xl lg:text-6xl"> <h1 className="mx-auto max-w-3xl text-4xl font-bold leading-tight text-text-main md:text-5xl lg:text-6xl">
{article.title} {article.title}
</h1> </h1>
</div> </div>
{article.coverImage && ( {article.coverImage && (
<div className="mb-16 aspect-[16/7] w-full overflow-hidden bg-white shadow-brutal md:rounded-[2rem]"> <div className="relative mb-16 aspect-[16/7] w-full overflow-hidden bg-surface-card shadow-card md:rounded-[2rem]">
<img src={article.coverImage} alt={article.title} className="h-full w-full object-cover" /> <Image src={article.coverImage} alt={article.title} fill unoptimized className="h-full w-full object-cover" />
</div> </div>
)} )}
<div className="mx-auto max-w-3xl rounded-3xl bg-white px-6 py-10 shadow-brutal md:px-12"> <div className="ui-panel mx-auto max-w-3xl px-6 py-10 md:px-12">
<div <div
dangerouslySetInnerHTML={{ __html: article.content }} dangerouslySetInnerHTML={{ __html: article.content }}
className="space-y-6 leading-relaxed text-gray-700 [&_a]:font-semibold [&_a]:text-pop-pink [&_h2]:text-3xl [&_h2]:font-bold [&_h2]:text-pop-black [&_h3]:text-2xl [&_h3]:font-bold [&_h3]:text-pop-black [&_img]:rounded-2xl [&_img]:shadow-brutal [&_p]:leading-relaxed [&_strong]:text-pop-black" className="space-y-6 leading-relaxed text-text-main/85 [&_a]:font-semibold [&_a]:text-brand-primary [&_h2]:text-3xl [&_h2]:font-bold [&_h2]:text-text-main [&_h3]:text-2xl [&_h3]:font-bold [&_h3]:text-text-main [&_img]:rounded-2xl [&_img]:shadow-card [&_p]:leading-relaxed [&_strong]:text-text-main"
/> />
</div> </div>
</article> </article>
apps/website/src/app/[lang]/category/[id]/page.tsx
+24 -21
View File
@@ -1,4 +1,5 @@
import Link from '@/components/LocalizedLink' import Link from '@/components/LocalizedLink'
import Image from 'next/image'
import { notFound } from 'next/navigation' import { notFound } from 'next/navigation'
import type { Metadata } from 'next' import type { Metadata } from 'next'
import { generateSeoMetadata } from '@/lib/seo' import { generateSeoMetadata } from '@/lib/seo'
@@ -54,15 +55,15 @@ export default async function CategoryPage({ params }: { params: Promise<{ id: s
if (categoryProductsResult.status === 404) notFound() if (categoryProductsResult.status === 404) notFound()
return ( return (
<div className="min-h-screen bg-pop-bg"> <div className="min-h-screen bg-surface-page text-text-main">
{announcementSections.length > 0 && ( {announcementSections.length > 0 && (
<DynamicPageRenderer sections={announcementSections} categories={categories} lang={lang} /> <DynamicPageRenderer sections={announcementSections} categories={categories} lang={lang} />
)} )}
<div className="px-6 py-20"> <div className="px-6 py-20">
<div className="mx-auto max-w-3xl rounded-3xl border border-rose-100 bg-white p-10 text-center shadow-brutal"> <div className="ui-panel mx-auto max-w-3xl border border-rose-100 p-10 text-center">
<p className="text-lg font-semibold text-pop-black">Unable to load this category</p> <p className="text-lg font-semibold text-text-main">Unable to load this category</p>
<p className="mt-2 text-sm text-rose-500">{categoryProductsResult.error}</p> <p className="mt-2 text-sm text-rose-500">{categoryProductsResult.error}</p>
<Link href="/shop" className="mt-6 inline-flex font-semibold text-pop-pink">Back to Shop</Link> <Link href="/shop" className="mt-6 inline-flex font-semibold text-brand-primary">Back to Shop</Link>
</div> </div>
</div> </div>
</div> </div>
@@ -76,30 +77,32 @@ export default async function CategoryPage({ params }: { params: Promise<{ id: s
const categoryName = resolveLocalized(category.name, lang) const categoryName = resolveLocalized(category.name, lang)
return ( return (
<div className="min-h-screen bg-pop-bg"> <div className="min-h-screen bg-surface-page text-text-main">
{announcementSections.length > 0 && ( {announcementSections.length > 0 && (
<DynamicPageRenderer sections={announcementSections} categories={categories} lang={lang} /> <DynamicPageRenderer sections={announcementSections} categories={categories} lang={lang} />
)} )}
{heroSections.length > 0 ? ( {heroSections.length > 0 ? (
<DynamicPageRenderer sections={heroSections} categories={categories} lang={lang} /> <DynamicPageRenderer sections={heroSections} categories={categories} lang={lang} />
) : ( ) : (
<section className="relative overflow-hidden bg-white"> <section className="relative overflow-hidden bg-surface-card">
<img <Image
src={category.imageUrl || getCategoryImage(categoryName)} src={category.imageUrl || getCategoryImage(categoryName)}
className="absolute inset-0 h-full w-full object-cover"
alt={categoryName} alt={categoryName}
fill
unoptimized
className="absolute inset-0 h-full w-full object-cover"
/> />
<div className="absolute inset-0 bg-gradient-to-r from-pop-bg/95 via-pop-bg/70 to-white/20" /> <div className="absolute inset-0 bg-gradient-to-r from-surface-page/95 via-surface-page/70 to-white/20" />
<div className="relative mx-auto max-w-7xl px-6 py-20"> <div className="relative mx-auto max-w-7xl px-6 py-20">
<div className="mb-5 flex items-center gap-2 text-xs font-semibold uppercase tracking-widest text-gray-500"> <div className="mb-5 flex items-center gap-2 text-xs font-semibold uppercase tracking-widest text-muted-text">
<Link href="/" className="transition hover:text-pop-pink">Home</Link> <Link href="/" className="transition hover:text-brand-primary">Home</Link>
<span>/</span> <span>/</span>
<Link href="/shop" className="transition hover:text-pop-pink">Shop</Link> <Link href="/shop" className="transition hover:text-brand-primary">Shop</Link>
<span>/</span> <span>/</span>
<span className="text-pop-black">{categoryName}</span> <span className="text-text-main">{categoryName}</span>
</div> </div>
<h1 className="text-5xl font-semibold text-pop-black md:text-6xl">{categoryName}</h1> <h1 className="text-5xl font-semibold text-text-main md:text-6xl">{categoryName}</h1>
{category._count && <p className="mt-3 text-gray-600">{category._count.products} products available</p>} {category._count && <p className="mt-3 text-muted-text">{category._count.products} products available</p>}
</div> </div>
</section> </section>
)} )}
@@ -107,7 +110,7 @@ export default async function CategoryPage({ params }: { params: Promise<{ id: s
<div className="mx-auto max-w-7xl space-y-10 px-6 py-12"> <div className="mx-auto max-w-7xl space-y-10 px-6 py-12">
<div className="flex flex-wrap gap-3"> <div className="flex flex-wrap gap-3">
{!categoriesResult.ok && ( {!categoriesResult.ok && (
<span className="rounded-full border border-rose-100 bg-white px-5 py-2 text-xs font-bold uppercase tracking-widest text-rose-500"> <span className="rounded-full border border-rose-100 bg-surface-card px-5 py-2 text-xs font-bold uppercase tracking-widest text-rose-500">
Categories unavailable Categories unavailable
</span> </span>
)} )}
@@ -121,8 +124,8 @@ export default async function CategoryPage({ params }: { params: Promise<{ id: s
href={`/category/${item.id}`} href={`/category/${item.id}`}
className={`rounded-full px-5 py-2 text-xs font-bold uppercase tracking-widest transition ${ className={`rounded-full px-5 py-2 text-xs font-bold uppercase tracking-widest transition ${
isActive isActive
? 'bg-pop-black text-white' ? 'bg-text-main text-white'
: 'border border-gray-200 bg-white text-gray-600 hover:border-pop-pink hover:text-pop-pink' : 'border border-line-primary/20 bg-surface-card text-muted-text hover:border-brand-primary hover:text-brand-primary'
}`} }`}
> >
{name} {name}
@@ -132,9 +135,9 @@ export default async function CategoryPage({ params }: { params: Promise<{ id: s
</div> </div>
{products.length === 0 ? ( {products.length === 0 ? (
<div className="rounded-3xl bg-white px-6 py-20 text-center shadow-brutal"> <div className="ui-panel px-6 py-20 text-center">
<p className="text-lg font-semibold text-pop-black">No products in this category yet.</p> <p className="text-lg font-semibold text-text-main">No products in this category yet.</p>
<Link href="/shop" className="mt-4 inline-flex font-semibold text-pop-pink">Back to Shop</Link> <Link href="/shop" className="mt-4 inline-flex font-semibold text-brand-primary">Back to Shop</Link>
</div> </div>
) : ( ) : (
<div className="grid grid-cols-1 gap-8 md:grid-cols-3"> <div className="grid grid-cols-1 gap-8 md:grid-cols-3">
apps/website/src/app/[lang]/checkout/page.tsx
+5 -5
View File
@@ -32,7 +32,7 @@ export default async function CheckoutPage({ params }: { params: Promise<{ lang:
} }
return ( return (
<main className="min-h-[70vh] bg-pop-bg"> <main className="min-h-[70vh] bg-surface-page text-text-main">
{announcementSections.length > 0 && ( {announcementSections.length > 0 && (
<DynamicPageRenderer sections={announcementSections} categories={categories} lang={lang} /> <DynamicPageRenderer sections={announcementSections} categories={categories} lang={lang} />
)} )}
@@ -41,12 +41,12 @@ export default async function CheckoutPage({ params }: { params: Promise<{ lang:
<DynamicPageRenderer sections={heroSections} categories={categories} lang={lang} /> <DynamicPageRenderer sections={heroSections} categories={categories} lang={lang} />
) : ( ) : (
<section className="mx-auto max-w-4xl px-6 pt-20 text-center md:pt-24"> <section className="mx-auto max-w-4xl px-6 pt-20 text-center md:pt-24">
<div className="mx-auto mb-5 flex h-16 w-16 items-center justify-center rounded-full bg-white text-pop-pink shadow-brutal"> <div className="mx-auto mb-5 flex h-16 w-16 items-center justify-center rounded-full bg-surface-card text-brand-primary shadow-card">
<CreditCard className="h-8 w-8" /> <CreditCard className="h-8 w-8" />
</div> </div>
<p className="text-xs font-bold uppercase tracking-[0.28em] text-pop-pink">Secure Checkout</p> <p className="ui-eyebrow">Secure Checkout</p>
<h1 className="mt-4 text-4xl font-semibold text-pop-black md:text-5xl">ยืนยันคำสั่งซื้อ</h1> <h1 className="mt-4 text-4xl font-semibold text-text-main md:text-5xl">ยืนยันคำสั่งซื้อ</h1>
<p className="mx-auto mt-4 max-w-2xl text-gray-600"> <p className="mx-auto mt-4 max-w-2xl text-muted-text">
ตรวจสอบรายการสินค้า ใช้คูปองหรือคะแนนสะสม และสร้างคำสั่งซื้อเพื่อไปยังหน้ารายละเอียดออเดอร์ ตรวจสอบรายการสินค้า ใช้คูปองหรือคะแนนสะสม และสร้างคำสั่งซื้อเพื่อไปยังหน้ารายละเอียดออเดอร์
</p> </p>
</section> </section>
apps/website/src/app/[lang]/contact/page.tsx
+29 -29
View File
@@ -1,4 +1,4 @@
"use client"; "use client"
import { useState } from 'react' import { useState } from 'react'
type FormState = { name: string; email: string; subject: string; message: string } type FormState = { name: string; email: string; subject: string; message: string }
@@ -22,17 +22,17 @@ export default function ContactPage() {
} }
return ( return (
<div className="min-h-screen bg-pop-bg"> <div className="min-h-screen bg-surface-page">
<div className="space-y-4 border-b border-gray-200 bg-white px-6 pb-16 pt-32 text-center"> <div className="space-y-4 border-b border-line-primary/20 bg-surface-card px-6 pb-16 pt-32 text-center">
<p className="text-xs font-semibold uppercase tracking-[0.4em] text-pop-pink">Get in Touch</p> <p className="ui-eyebrow">Get in Touch</p>
<h1 className="text-5xl font-bold text-pop-black">Contact Us</h1> <h1 className="text-5xl font-bold text-text-main">Contact Us</h1>
<p className="mx-auto max-w-lg text-gray-600">Have a question, custom request, or partnership idea? We&apos;d love to hear from you.</p> <p className="mx-auto max-w-lg text-muted-text">Have a question, custom request, or partnership idea? We&apos;d love to hear from you.</p>
</div> </div>
<div className="mx-auto grid max-w-6xl gap-16 px-6 py-16 md:grid-cols-5"> <div className="mx-auto grid max-w-6xl gap-16 px-6 py-16 md:grid-cols-5">
<div className="space-y-8 md:col-span-2"> <div className="space-y-8 md:col-span-2">
<div> <div>
<h2 className="mb-6 text-xl font-bold text-pop-black">Reach Us Directly</h2> <h2 className="mb-6 text-xl font-bold text-text-main">Reach Us Directly</h2>
<div className="space-y-5"> <div className="space-y-5">
{[ {[
{ icon: '📧', label: 'Email', value: 'hello@homaroma.shop', href: 'mailto:hello@homaroma.shop' }, { icon: '📧', label: 'Email', value: 'hello@homaroma.shop', href: 'mailto:hello@homaroma.shop' },
@@ -41,71 +41,71 @@ export default function ContactPage() {
{ icon: '📍', label: 'Studio', value: 'Bangkok, Thailand', href: '#' }, { icon: '📍', label: 'Studio', value: 'Bangkok, Thailand', href: '#' },
].map(item => ( ].map(item => (
<a key={item.label} href={item.href} className="group flex items-start gap-4"> <a key={item.label} href={item.href} className="group flex items-start gap-4">
<div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl border border-gray-100 bg-white text-lg shadow-sm transition-colors group-hover:border-pop-pink/30 group-hover:bg-pop-bg">{item.icon}</div> <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl border border-line-primary/20 bg-surface-card text-lg shadow-sm transition-colors group-hover:border-brand-primary/30 group-hover:bg-surface-page">{item.icon}</div>
<div> <div>
<p className="text-xs uppercase tracking-widest text-gray-500">{item.label}</p> <p className="text-xs uppercase tracking-widest text-muted-text">{item.label}</p>
<p className="text-sm font-medium text-pop-black transition-colors group-hover:text-pop-pink">{item.value}</p> <p className="text-sm font-medium text-text-main transition-colors group-hover:text-brand-primary">{item.value}</p>
</div> </div>
</a> </a>
))} ))}
</div> </div>
</div> </div>
<div className="space-y-3 rounded-3xl border border-gray-100 bg-white p-6 shadow-brutal"> <div className="ui-panel space-y-3 p-6">
<h3 className="text-sm font-bold uppercase tracking-widest text-pop-black">Response Time</h3> <h3 className="text-sm font-bold uppercase tracking-widest text-text-main">Response Time</h3>
<div className="space-y-2 text-sm"> <div className="space-y-2 text-sm">
{[['Email', '~2 hours'], ['LINE', '~30 minutes'], ['Instagram DM', '~4 hours']].map(([k, v]) => ( {[['Email', '~2 hours'], ['LINE', '~30 minutes'], ['Instagram DM', '~4 hours']].map(([k, v]) => (
<div key={k} className="flex justify-between"> <div key={k} className="flex justify-between">
<span className="text-gray-600">{k}</span> <span className="text-muted-text">{k}</span>
<span className="font-medium text-pop-pink">{v}</span> <span className="font-medium text-brand-primary">{v}</span>
</div> </div>
))} ))}
</div> </div>
<p className="pt-2 text-[10px] uppercase tracking-wider text-gray-500">Mon-Sat, 9:00-18:00 (ICT)</p> <p className="pt-2 text-[10px] uppercase tracking-wider text-muted-text">Mon-Sat, 9:00-18:00 (ICT)</p>
</div> </div>
</div> </div>
<div className="md:col-span-3"> <div className="md:col-span-3">
{status === 'sent' ? ( {status === 'sent' ? (
<div className="flex h-full items-center justify-center rounded-3xl bg-white shadow-brutal"> <div className="ui-panel flex h-full items-center justify-center">
<div className="space-y-5 py-16 text-center"> <div className="space-y-5 py-16 text-center">
<div className="text-6xl">✉️</div> <div className="text-6xl">✉️</div>
<h2 className="text-2xl font-bold text-pop-black">Message Sent!</h2> <h2 className="text-2xl font-bold text-text-main">Message Sent!</h2>
<p className="text-gray-600">Thank you for reaching out. We&apos;ll get back to you within 2 hours.</p> <p className="text-muted-text">Thank you for reaching out. We&apos;ll get back to you within 2 hours.</p>
<button onClick={() => setStatus('idle')} className="mt-4 rounded-full border border-pop-pink bg-white px-8 py-3 text-xs font-bold uppercase tracking-widest text-pop-pink transition-all hover:bg-pop-bg"> <button onClick={() => setStatus('idle')} className="mt-4 rounded-full border border-brand-primary bg-surface-card px-8 py-3 text-xs font-bold uppercase tracking-widest text-brand-primary transition-all hover:bg-surface-page">
Send Another Send Another
</button> </button>
</div> </div>
</div> </div>
) : ( ) : (
<form onSubmit={handleSubmit} className="space-y-5 rounded-3xl border border-gray-100 bg-white p-6 shadow-brutal md:p-8"> <form onSubmit={handleSubmit} className="ui-panel space-y-5 p-6 md:p-8">
<div className="grid gap-5 md:grid-cols-2"> <div className="grid gap-5 md:grid-cols-2">
<div className="space-y-2"> <div className="space-y-2">
<label className="text-xs uppercase tracking-widest text-gray-600">Full Name *</label> <label className="ui-form-label">Full Name *</label>
<input required type="text" name="name" value={form.name} onChange={handleChange} placeholder="Your name" <input required type="text" name="name" value={form.name} onChange={handleChange} placeholder="Your name"
className="w-full rounded-xl border border-gray-200 bg-white px-4 py-3.5 text-sm text-pop-black outline-none transition-colors placeholder:text-gray-400 focus:border-pop-pink" /> className="ui-form-shell-light" />
</div> </div>
<div className="space-y-2"> <div className="space-y-2">
<label className="text-xs uppercase tracking-widest text-gray-600">Email *</label> <label className="ui-form-label">Email *</label>
<input required type="email" name="email" value={form.email} onChange={handleChange} placeholder="your@email.com" <input required type="email" name="email" value={form.email} onChange={handleChange} placeholder="your@email.com"
className="w-full rounded-xl border border-gray-200 bg-white px-4 py-3.5 text-sm text-pop-black outline-none transition-colors placeholder:text-gray-400 focus:border-pop-pink" /> className="ui-form-shell-light" />
</div> </div>
</div> </div>
<div className="space-y-2"> <div className="space-y-2">
<label className="text-xs uppercase tracking-widest text-gray-600">Subject *</label> <label className="ui-form-label">Subject *</label>
<select required name="subject" value={form.subject} onChange={handleChange} <select required name="subject" value={form.subject} onChange={handleChange}
className="w-full rounded-xl border border-gray-200 bg-white px-4 py-3.5 text-sm text-pop-black outline-none transition-colors focus:border-pop-pink"> className="ui-form-shell-light">
<option value="" disabled>Select a subject</option> <option value="" disabled>Select a subject</option>
{SUBJECTS.map(s => <option key={s} value={s}>{s}</option>)} {SUBJECTS.map(s => <option key={s} value={s}>{s}</option>)}
</select> </select>
</div> </div>
<div className="space-y-2"> <div className="space-y-2">
<label className="text-xs uppercase tracking-widest text-gray-600">Message *</label> <label className="ui-form-label">Message *</label>
<textarea required name="message" value={form.message} onChange={handleChange} rows={6} placeholder="Tell us about your inquiry..." <textarea required name="message" value={form.message} onChange={handleChange} rows={6} placeholder="Tell us about your inquiry..."
className="w-full resize-none rounded-xl border border-gray-200 bg-white px-4 py-3.5 text-sm text-pop-black outline-none transition-colors placeholder:text-gray-400 focus:border-pop-pink" /> className="ui-form-shell-light resize-none" />
</div> </div>
<button type="submit" disabled={status === 'sending'} <button type="submit" disabled={status === 'sending'}
className="flex w-full items-center justify-center gap-3 rounded-full bg-pop-black py-4 text-sm font-bold uppercase tracking-widest text-white transition-all duration-300 hover:bg-pop-pink disabled:cursor-not-allowed disabled:opacity-50"> className="ui-form-inline-button w-full">
{status === 'sending' ? ( {status === 'sending' ? (
<><svg className="h-4 w-4 animate-spin" 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...</> <><svg className="h-4 w-4 animate-spin" 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 ->'} ) : 'Send Message ->'}
apps/website/src/app/[lang]/coupons/page.tsx
+18 -18
View File
@@ -40,7 +40,7 @@ export default async function CouponsPage({ params }: { params: Promise<{ lang:
} }
return ( return (
<main className="min-h-[70vh] bg-pop-bg"> <main className="min-h-[70vh] bg-surface-page text-text-main">
{announcementSections.length > 0 && ( {announcementSections.length > 0 && (
<DynamicPageRenderer sections={announcementSections} categories={categories} lang={lang} /> <DynamicPageRenderer sections={announcementSections} categories={categories} lang={lang} />
)} )}
@@ -49,11 +49,11 @@ export default async function CouponsPage({ params }: { params: Promise<{ lang:
) : ( ) : (
<div className="mx-auto max-w-6xl px-6 py-16"> <div className="mx-auto max-w-6xl px-6 py-16">
<div className="space-y-4 text-center"> <div className="space-y-4 text-center">
<p className="text-xs font-bold uppercase tracking-[0.28em] text-pop-pink">Offers</p> <p className="ui-eyebrow">Offers</p>
<h1 className="text-4xl font-semibold text-pop-black md:text-5xl"> <h1 className="text-4xl font-semibold text-text-main md:text-5xl">
Exclusive Offers Exclusive Offers
</h1> </h1>
<p className="mx-auto max-w-2xl text-gray-600"> <p className="mx-auto max-w-2xl text-muted-text">
คูปองส่วนลดพิเศษสำหรับคุณ เลือกใช้คูปองที่คุณต้องการแล้วไปช้อปกันเลย! คูปองส่วนลดพิเศษสำหรับคุณ เลือกใช้คูปองที่คุณต้องการแล้วไปช้อปกันเลย!
</p> </p>
</div> </div>
@@ -62,19 +62,19 @@ export default async function CouponsPage({ params }: { params: Promise<{ lang:
<div className="mx-auto max-w-6xl px-6 pb-24"> <div className="mx-auto max-w-6xl px-6 pb-24">
{!couponsResult.ok ? ( {!couponsResult.ok ? (
<div className="rounded-3xl border border-rose-100 bg-white px-6 py-20 text-center shadow-brutal"> <div className="ui-panel border border-rose-100 px-6 py-20 text-center">
<Ticket className="mx-auto mb-4 h-16 w-16 text-rose-200" /> <Ticket className="mx-auto mb-4 h-16 w-16 text-rose-200" />
<h2 className="mb-2 text-xl font-semibold text-pop-black">ไม่สามารถโหลดคูปองได้</h2> <h2 className="mb-2 text-xl font-semibold text-text-main">ไม่สามารถโหลดคูปองได้</h2>
<p className="text-sm text-rose-500">{couponsResult.error}</p> <p className="text-sm text-rose-500">{couponsResult.error}</p>
</div> </div>
) : coupons.length === 0 ? ( ) : coupons.length === 0 ? (
<div className="rounded-3xl bg-white px-6 py-20 text-center shadow-brutal"> <div className="ui-panel px-6 py-20 text-center">
<Ticket className="mx-auto mb-4 h-16 w-16 text-gray-300" /> <Ticket className="mx-auto mb-4 h-16 w-16 text-muted-text/40" />
<h2 className="mb-2 text-xl font-semibold text-pop-black">ยังไม่มีคูปองส่วนลดในขณะนี้</h2> <h2 className="mb-2 text-xl font-semibold text-text-main">ยังไม่มีคูปองส่วนลดในขณะนี้</h2>
<p className="mb-6 text-gray-500">กรุณากลับมาตรวจสอบโปรโมชั่นใหม่ในภายหลัง</p> <p className="mb-6 text-muted-text">กรุณากลับมาตรวจสอบโปรโมชั่นใหม่ในภายหลัง</p>
<Link <Link
href="/shop" href="/shop"
className="inline-flex rounded-full bg-pop-pink px-8 py-3 font-bold text-white transition hover:bg-pop-red" className="inline-flex rounded-full bg-brand-primary px-8 py-3 font-bold text-white transition hover:bg-brand-primary-hover"
> >
ไปช้อปปิ้งกันก่อน ไปช้อปปิ้งกันก่อน
</Link> </Link>
@@ -84,11 +84,11 @@ export default async function CouponsPage({ params }: { params: Promise<{ lang:
{coupons.map((coupon) => ( {coupons.map((coupon) => (
<article <article
key={coupon.id} key={coupon.id}
className="relative overflow-hidden rounded-3xl bg-white p-8 shadow-brutal transition hover:-translate-y-1 hover:shadow-brutal-hover" className="ui-card ui-card-hover relative overflow-hidden p-8"
> >
<div className="space-y-6"> <div className="space-y-6">
<div className="flex items-start justify-between gap-4"> <div className="flex items-start justify-between gap-4">
<div className="flex h-12 w-12 items-center justify-center rounded-xl bg-pop-bg text-pop-pink"> <div className="flex h-12 w-12 items-center justify-center rounded-xl bg-surface-page text-brand-primary">
<Ticket className="h-6 w-6" /> <Ticket className="h-6 w-6" />
</div> </div>
{coupon.expiresAt && ( {coupon.expiresAt && (
@@ -99,23 +99,23 @@ export default async function CouponsPage({ params }: { params: Promise<{ lang:
</div> </div>
<div> <div>
<h3 className="mb-1 text-3xl font-black text-pop-black"> <h3 className="mb-1 text-3xl font-black text-text-main">
{formatDiscount(coupon.type, coupon.value)} {formatDiscount(coupon.type, coupon.value)}
</h3> </h3>
<p className="text-sm text-gray-500"> <p className="text-sm text-muted-text">
เมื่อซื้อครบ {coupon.minPurchase} บาท เมื่อซื้อครบ {coupon.minPurchase} บาท
</p> </p>
</div> </div>
<div className="rounded-xl border border-dashed border-pop-pink/40 bg-pop-bg p-3 text-center"> <div className="rounded-xl border border-dashed border-brand-primary/40 bg-surface-page p-3 text-center">
<span className="font-mono font-bold uppercase tracking-widest text-pop-pink"> <span className="font-mono font-bold uppercase tracking-widest text-brand-primary">
{coupon.code} {coupon.code}
</span> </span>
</div> </div>
<Link <Link
href={`/shop?coupon=${encodeURIComponent(coupon.code)}`} href={`/shop?coupon=${encodeURIComponent(coupon.code)}`}
className="flex w-full items-center justify-center gap-2 rounded-full bg-pop-black py-4 font-bold text-white transition hover:bg-pop-pink" className="flex w-full items-center justify-center gap-2 rounded-full bg-text-main py-4 font-bold text-white transition hover:bg-brand-primary"
> >
ช้อปพร้อมใช้คูปองเลย ช้อปพร้อมใช้คูปองเลย
<ArrowRight className="h-4 w-4" /> <ArrowRight className="h-4 w-4" />
apps/website/src/app/[lang]/faq/page.tsx
+17 -17
View File
@@ -1,4 +1,4 @@
"use client"; "use client"
import { useState } from 'react' import { useState } from 'react'
import Link from '@/components/LocalizedLink' import Link from '@/components/LocalizedLink'
@@ -44,11 +44,11 @@ export default function FaqPage() {
const activeFaqs = FAQS.find(f => f.category === activeCategory) const activeFaqs = FAQS.find(f => f.category === activeCategory)
return ( return (
<div className="min-h-screen bg-pop-bg"> <div className="min-h-screen bg-surface-page text-text-main">
<div className="space-y-4 border-b border-gray-200 bg-white px-6 pb-16 pt-32 text-center"> <div className="space-y-4 border-b border-line-primary/20 bg-surface-card px-6 pb-16 pt-32 text-center">
<p className="text-xs font-semibold uppercase tracking-[0.4em] text-pop-pink">Support</p> <p className="ui-eyebrow">Support</p>
<h1 className="text-5xl font-bold text-pop-black">Frequently Asked Questions</h1> <h1 className="text-5xl font-bold text-text-main">Frequently Asked Questions</h1>
<p className="mx-auto max-w-lg text-gray-600">Everything you need to know about HomAroma products, shipping, and care.</p> <p className="mx-auto max-w-lg text-muted-text">Everything you need to know about HomAroma products, shipping, and care.</p>
</div> </div>
<div className="mx-auto max-w-4xl space-y-10 px-6 py-16"> <div className="mx-auto max-w-4xl space-y-10 px-6 py-16">
@@ -59,8 +59,8 @@ export default function FaqPage() {
onClick={() => setActiveCategory(category)} onClick={() => setActiveCategory(category)}
className={`flex items-center gap-2 rounded-full px-5 py-2 text-xs font-bold uppercase tracking-widest transition-all duration-300 ${ className={`flex items-center gap-2 rounded-full px-5 py-2 text-xs font-bold uppercase tracking-widest transition-all duration-300 ${
activeCategory === category activeCategory === category
? 'bg-pop-black text-white shadow-brutal' ? 'ui-tab-button-active bg-text-main text-white shadow-card'
: 'border border-gray-200 bg-white text-pop-black hover:border-pop-pink hover:text-pop-pink' : 'ui-tab-button-inactive border border-line-primary/20 bg-surface-card hover:border-brand-primary hover:text-brand-primary'
}`} }`}
> >
<span>{icon}</span> {category} <span>{icon}</span> {category}
@@ -73,17 +73,17 @@ export default function FaqPage() {
const key = `${activeCategory}-${i}` const key = `${activeCategory}-${i}`
const isOpen = openItems[key] const isOpen = openItems[key]
return ( return (
<div key={key} className={`overflow-hidden rounded-2xl border bg-white shadow-brutal transition-all duration-300 ${isOpen ? 'border-pop-pink/30' : 'border-gray-100'}`}> <div key={key} className={`overflow-hidden rounded-2xl border bg-surface-card shadow-card transition-all duration-300 ${isOpen ? 'border-brand-primary/30' : 'border-line-primary/20'}`}>
<button onClick={() => toggle(key)} className="flex w-full items-start justify-between gap-4 px-6 py-5 text-left"> <button onClick={() => toggle(key)} className="flex w-full items-start justify-between gap-4 px-6 py-5 text-left">
<span className="text-sm font-semibold leading-snug text-pop-black md:text-base">{item.q}</span> <span className="text-sm font-semibold leading-snug text-text-main md:text-base">{item.q}</span>
<svg className={`h-5 w-5 shrink-0 text-pop-pink transition-transform duration-300 ${isOpen ? 'rotate-45' : ''}`} fill="none" viewBox="0 0 24 24" stroke="currentColor"> <svg className={`h-5 w-5 shrink-0 text-brand-primary 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" /> <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4v16m8-8H4" />
</svg> </svg>
</button> </button>
{isOpen && ( {isOpen && (
<div className="px-6 pb-6"> <div className="px-6 pb-6">
<div className="mb-4 h-px w-full bg-gray-100" /> <div className="mb-4 h-px w-full bg-line-primary/10" />
<p className="text-sm leading-relaxed text-gray-600">{item.a}</p> <p className="text-sm leading-relaxed text-muted-text">{item.a}</p>
</div> </div>
)} )}
</div> </div>
@@ -91,11 +91,11 @@ export default function FaqPage() {
})} })}
</div> </div>
<div className="mt-12 space-y-4 rounded-3xl border border-gray-100 bg-white p-8 text-center shadow-brutal"> <div className="ui-panel mt-12 space-y-4 p-8 text-center">
<div className="text-3xl">💬</div> <div className="text-3xl">💬</div>
<h3 className="text-xl font-bold text-pop-black">Still have questions?</h3> <h3 className="text-xl font-bold text-text-main">Still have questions?</h3>
<p className="text-sm text-gray-600">Our team is here to help — usually responds within 2 hours.</p> <p className="text-sm text-muted-text">Our team is here to help — usually responds within 2 hours.</p>
<Link href="/contact" className="inline-block rounded-full bg-pop-black px-8 py-3 text-xs font-bold uppercase tracking-widest text-white transition-colors duration-300 hover:bg-pop-pink"> <Link href="/contact" className="inline-block rounded-full bg-text-main px-8 py-3 text-xs font-bold uppercase tracking-widest text-white transition-colors duration-300 hover:bg-brand-primary">
Contact Us Contact Us
</Link> </Link>
</div> </div>
apps/website/src/app/[lang]/layout.tsx
+2 -10
View File
@@ -1,5 +1,4 @@
import type { Metadata } from 'next'; import type { Metadata } from 'next';
import { Sarabun } from 'next/font/google';
import { notFound } from 'next/navigation'; import { notFound } from 'next/navigation';
import '../globals.css'; import '../globals.css';
import Navbar from '@/components/Navbar'; import Navbar from '@/components/Navbar';
@@ -10,13 +9,6 @@ import type { MegaMenuPayload } from '@/components/navigation/menuTypes';
import type { MenuItem, StoreSettings } from '@homaroma/types'; import type { MenuItem, StoreSettings } from '@homaroma/types';
import { isSupportedLocale } from '@/lib/locales'; import { isSupportedLocale } from '@/lib/locales';
const sarabun = Sarabun({
subsets: ['thai', 'latin'],
weight: ['300', '400', '500', '600', '700', '800'],
display: 'swap',
variable: '--font-sarabun',
});
export const metadata: Metadata = { export const metadata: Metadata = {
title: 'HomAroma', title: 'HomAroma',
description: 'Pure Origins, Artisan Craft, Zero Compromise', description: 'Pure Origins, Artisan Craft, Zero Compromise',
@@ -104,8 +96,8 @@ export default async function RootLayout({
]); ]);
return ( return (
<html lang={lang} className={`${lang === 'th' ? sarabun.variable : ''} scroll-smooth`}> <html lang={lang} className="scroll-smooth">
<body className="min-h-screen bg-pop-bg text-pop-black font-sans antialiased"> <body className="min-h-screen bg-surface-page text-text-main font-sans antialiased">
<ClientProviders> <ClientProviders>
<Navbar categories={categories} initialMenu={initialMenu} settings={settings} /> <Navbar categories={categories} initialMenu={initialMenu} settings={settings} />
<main className="global-main"> <main className="global-main">
apps/website/src/app/[lang]/order/[id]/page.tsx
+43 -40
View File
@@ -1,4 +1,5 @@
import Link from '@/components/LocalizedLink' import Link from '@/components/LocalizedLink'
import Image from 'next/image'
import { notFound } from 'next/navigation' import { notFound } from 'next/navigation'
import type { Metadata } from 'next' import type { Metadata } from 'next'
import { generateSeoMetadata } from '@/lib/seo' import { generateSeoMetadata } from '@/lib/seo'
@@ -28,11 +29,11 @@ function statusLabel(status: string) {
} }
function statusTone(status: string) { function statusTone(status: string) {
if (status === 'PENDING_PAYMENT') return 'bg-amber-50 text-amber-700 border-amber-100' if (status === 'PENDING_PAYMENT') return 'bg-brand-warm/15 text-amber-700 border-amber-100'
if (status === 'PAID' || status === 'PROCESSING') return 'bg-emerald-50 text-emerald-700 border-emerald-100' if (status === 'PAID' || status === 'PROCESSING') return 'bg-brand-success/20 text-emerald-700 border-emerald-100'
if (status === 'SHIPPED' || status === 'DELIVERED') return 'bg-sky-50 text-sky-700 border-sky-100' if (status === 'SHIPPED' || status === 'DELIVERED') return 'bg-brand-cool/40 text-sky-700 border-sky-100'
if (status === 'CANCELLED') return 'bg-rose-50 text-rose-700 border-rose-100' if (status === 'CANCELLED') return 'bg-rose-50 text-rose-700 border-rose-100'
return 'bg-gray-50 text-gray-700 border-gray-100' return 'bg-surface-page text-muted-text border-line-primary/20'
} }
export async function generateMetadata({ params }: { params: Promise<{ id: string, lang: string }> }): Promise<Metadata> { export async function generateMetadata({ params }: { params: Promise<{ id: string, lang: string }> }): Promise<Metadata> {
@@ -68,15 +69,15 @@ export default async function OrderStatusPage({ params }: { params: Promise<{ id
if (orderResult.status === 404) notFound() if (orderResult.status === 404) notFound()
return ( return (
<main className="min-h-[70vh] bg-pop-bg"> <main className="min-h-[70vh] bg-surface-page">
{announcementSections.length > 0 && ( {announcementSections.length > 0 && (
<DynamicPageRenderer sections={announcementSections} categories={categories} lang={lang} /> <DynamicPageRenderer sections={announcementSections} categories={categories} lang={lang} />
)} )}
<section className="mx-auto max-w-3xl px-6 py-24 text-center"> <section className="mx-auto max-w-3xl px-6 py-24 text-center">
<div className="rounded-3xl border border-rose-100 bg-white p-10 shadow-brutal"> <div className="ui-panel border border-rose-100 p-10">
<h1 className="text-2xl font-semibold text-pop-black">ไม่สามารถโหลดคำสั่งซื้อนี้ได้</h1> <h1 className="text-2xl font-semibold text-text-main">ไม่สามารถโหลดคำสั่งซื้อนี้ได้</h1>
<p className="mt-3 text-sm text-rose-500">{orderResult.error}</p> <p className="mt-3 text-sm text-rose-500">{orderResult.error}</p>
<Link href="/track" className="mt-6 inline-flex font-semibold text-pop-pink">กลับไปค้นหาคำสั่งซื้อ</Link> <Link href="/track" className="mt-6 inline-flex font-semibold text-brand-primary">กลับไปค้นหาคำสั่งซื้อ</Link>
</div> </div>
</section> </section>
</main> </main>
@@ -87,76 +88,78 @@ export default async function OrderStatusPage({ params }: { params: Promise<{ id
const subtotal = order.subtotal ?? Math.max(0, order.totalAmount - order.shippingFee) const subtotal = order.subtotal ?? Math.max(0, order.totalAmount - order.shippingFee)
return ( return (
<main className="min-h-[70vh] bg-pop-bg"> <main className="min-h-[70vh] bg-surface-page">
{announcementSections.length > 0 && ( {announcementSections.length > 0 && (
<DynamicPageRenderer sections={announcementSections} categories={categories} lang={lang} /> <DynamicPageRenderer sections={announcementSections} categories={categories} lang={lang} />
)} )}
<section className="mx-auto max-w-4xl space-y-8 px-6 py-16 md:py-20"> <section className="mx-auto max-w-4xl space-y-8 px-6 py-16 md:py-20">
<div className="text-center"> <div className="text-center">
<div className="mx-auto mb-5 flex h-20 w-20 items-center justify-center rounded-full bg-white text-pop-pink shadow-brutal"> <div className="mx-auto mb-5 flex h-20 w-20 items-center justify-center rounded-full bg-surface-card text-brand-primary shadow-card">
<CheckCircle2 className="h-10 w-10" /> <CheckCircle2 className="h-10 w-10" />
</div> </div>
<p className="text-xs font-bold uppercase tracking-[0.28em] text-pop-pink">Order Status</p> <p className="ui-eyebrow">Order Status</p>
<h1 className="mt-4 text-4xl font-semibold text-pop-black md:text-5xl"> <h1 className="mt-4 text-4xl font-semibold text-text-main md:text-5xl">
{orderLabel(order.id)} {orderLabel(order.id)}
</h1> </h1>
<p className="mt-3 text-gray-600">คำสั่งซื้อของคุณถูกบันทึกแล้ว สามารถตรวจสอบสถานะล่าสุดได้จากหน้านี้</p> <p className="mt-3 text-muted-text">คำสั่งซื้อของคุณถูกบันทึกแล้ว สามารถตรวจสอบสถานะล่าสุดได้จากหน้านี้</p>
</div> </div>
<section className="grid gap-5 md:grid-cols-3"> <section className="grid gap-5 md:grid-cols-3">
<article className="rounded-3xl bg-white p-6 shadow-brutal"> <article className="ui-panel p-6">
<Clock className="mb-4 h-6 w-6 text-pop-pink" /> <Clock className="mb-4 h-6 w-6 text-brand-primary" />
<p className="text-xs font-bold uppercase tracking-[0.22em] text-gray-400">Created</p> <p className="text-xs font-bold uppercase tracking-[0.22em] text-muted-text/70">Created</p>
<p className="mt-2 font-semibold text-pop-black"> <p className="mt-2 font-semibold text-text-main">
{new Date(order.createdAt).toLocaleDateString('th-TH')} {new Date(order.createdAt).toLocaleDateString('th-TH')}
</p> </p>
</article> </article>
<article className="rounded-3xl bg-white p-6 shadow-brutal"> <article className="ui-panel p-6">
<PackageCheck className="mb-4 h-6 w-6 text-pop-pink" /> <PackageCheck className="mb-4 h-6 w-6 text-brand-primary" />
<p className="text-xs font-bold uppercase tracking-[0.22em] text-gray-400">Status</p> <p className="text-xs font-bold uppercase tracking-[0.22em] text-muted-text/70">Status</p>
<span className={`mt-3 inline-flex rounded-full border px-3 py-1 text-xs font-bold uppercase tracking-[0.14em] ${statusTone(order.status)}`}> <span className={`mt-3 inline-flex rounded-full border px-3 py-1 text-xs font-bold uppercase tracking-[0.14em] ${statusTone(order.status)}`}>
{statusLabel(order.status)} {statusLabel(order.status)}
</span> </span>
</article> </article>
<article className="rounded-3xl bg-white p-6 shadow-brutal"> <article className="ui-panel p-6">
<Truck className="mb-4 h-6 w-6 text-pop-pink" /> <Truck className="mb-4 h-6 w-6 text-brand-primary" />
<p className="text-xs font-bold uppercase tracking-[0.22em] text-gray-400">Tracking No.</p> <p className="text-xs font-bold uppercase tracking-[0.22em] text-muted-text/70">Tracking No.</p>
<p className="mt-2 font-semibold text-pop-black">{order.trackingNo || 'อยู่ระหว่างจัดเตรียมพัสดุ'}</p> <p className="mt-2 font-semibold text-text-main">{order.trackingNo || 'อยู่ระหว่างจัดเตรียมพัสดุ'}</p>
</article> </article>
</section> </section>
<section className="rounded-3xl bg-white p-8 shadow-brutal"> <section className="ui-panel p-8">
<h2 className="border-b border-gray-100 pb-4 text-sm font-bold uppercase tracking-[0.22em] text-pop-pink"> <h2 className="border-b border-line-primary/20 pb-4 text-sm font-bold uppercase tracking-[0.22em] text-brand-primary">
Order Items Order Items
</h2> </h2>
<div className="mt-6 space-y-4"> <div className="mt-6 space-y-4">
{order.items.map((item) => ( {order.items.map((item) => (
<div key={item.id} className="flex items-center gap-4 rounded-2xl bg-pop-bg p-4"> <div key={item.id} className="flex items-center gap-4 rounded-2xl bg-surface-page p-4">
<div className="h-14 w-14 shrink-0 overflow-hidden rounded-xl bg-white"> <div className="relative h-14 w-14 shrink-0 overflow-hidden rounded-xl bg-surface-card">
<img <Image
src={item.productImage || '/images/oil_ozone.png'} src={item.productImage || '/images/oil_ozone.png'}
alt={item.productName} alt={item.productName}
fill
unoptimized
className="h-full w-full object-cover" className="h-full w-full object-cover"
/> />
</div> </div>
<div className="min-w-0 flex-1"> <div className="min-w-0 flex-1">
<p className="font-semibold text-pop-black">{item.productName}</p> <p className="font-semibold text-text-main">{item.productName}</p>
<p className="text-sm text-gray-500"> <p className="text-sm text-muted-text">
{item.variantSize ? `${item.variantSize} · ` : ''}x {item.quantity} {item.variantSize ? `${item.variantSize} · ` : ''}x {item.quantity}
</p> </p>
</div> </div>
<p className="font-bold text-pop-pink">{formatPrice(item.priceAtPurchase * item.quantity)}</p> <p className="font-bold text-brand-primary">{formatPrice(item.priceAtPurchase * item.quantity)}</p>
</div> </div>
))} ))}
</div> </div>
<div className="mt-6 space-y-3 border-t border-gray-100 pt-5 text-sm"> <div className="mt-6 space-y-3 border-t border-line-primary/20 pt-5 text-sm">
<div className="flex justify-between text-gray-500"> <div className="flex justify-between text-muted-text">
<span>Subtotal</span> <span>Subtotal</span>
<span>{formatPrice(subtotal)}</span> <span>{formatPrice(subtotal)}</span>
</div> </div>
<div className="flex justify-between text-gray-500"> <div className="flex justify-between text-muted-text">
<span>Shipping Fee</span> <span>Shipping Fee</span>
<span>{formatPrice(order.shippingFee)}</span> <span>{formatPrice(order.shippingFee)}</span>
</div> </div>
@@ -166,15 +169,15 @@ export default async function OrderStatusPage({ params }: { params: Promise<{ id
<span>-{formatPrice(order.discountAmount)}</span> <span>-{formatPrice(order.discountAmount)}</span>
</div> </div>
)} )}
<div className="flex justify-between border-t border-gray-100 pt-4 text-lg font-bold text-pop-black"> <div className="flex justify-between border-t border-line-primary/20 pt-4 text-lg font-bold text-text-main">
<span>Total</span> <span>Total</span>
<span className="text-pop-pink">{formatPrice(order.totalAmount)}</span> <span className="text-brand-primary">{formatPrice(order.totalAmount)}</span>
</div> </div>
</div> </div>
</section> </section>
{order.status === 'PENDING_PAYMENT' && ( {order.status === 'PENDING_PAYMENT' && (
<section className="rounded-3xl border border-amber-100 bg-amber-50 p-6 text-amber-800"> <section className="rounded-3xl border border-amber-100 bg-brand-warm/15 p-6 text-amber-800">
<h2 className="font-semibold">คำสั่งซื้อนี้ยังรอการชำระเงิน</h2> <h2 className="font-semibold">คำสั่งซื้อนี้ยังรอการชำระเงิน</h2>
<p className="mt-2 text-sm leading-relaxed"> <p className="mt-2 text-sm leading-relaxed">
หน้านี้รองรับการตรวจสอบสถานะคำสั่งซื้อแล้ว ส่วนการชำระเงินและอัปโหลดสลิปบน website จะย้ายมาในรอบถัดไป เพื่อไม่ทำ workaround ที่เสี่ยงกับ payment flow หน้านี้รองรับการตรวจสอบสถานะคำสั่งซื้อแล้ว ส่วนการชำระเงินและอัปโหลดสลิปบน website จะย้ายมาในรอบถัดไป เพื่อไม่ทำ workaround ที่เสี่ยงกับ payment flow
@@ -183,10 +186,10 @@ export default async function OrderStatusPage({ params }: { params: Promise<{ id
)} )}
<div className="flex flex-wrap justify-center gap-3"> <div className="flex flex-wrap justify-center gap-3">
<Link href="/track" className="rounded-full bg-white px-6 py-3 font-semibold text-pop-black shadow-brutal transition hover:text-pop-pink"> <Link href="/track" className="rounded-full bg-surface-card px-6 py-3 font-semibold text-text-main shadow-card transition hover:text-brand-primary">
ค้นหาออเดอร์อื่น ค้นหาออเดอร์อื่น
</Link> </Link>
<Link href="/shop" className="rounded-full bg-pop-pink px-6 py-3 font-semibold text-white transition hover:bg-pop-red"> <Link href="/shop" className="rounded-full bg-brand-primary px-6 py-3 font-semibold text-white transition hover:bg-brand-primary-hover">
กลับไปช้อปต่อ กลับไปช้อปต่อ
</Link> </Link>
</div> </div>
apps/website/src/app/[lang]/page.tsx
+4 -4
View File
@@ -32,7 +32,7 @@ export default async function HomePage({ params }: Props) {
const { announcementSections, heroSections, bottomSections } = splitCmsLayoutSections(sections) const { announcementSections, heroSections, bottomSections } = splitCmsLayoutSections(sections)
return ( return (
<div className="min-h-screen bg-pop-bg"> <div className="min-h-screen bg-surface-page text-text-main">
{sections.length > 0 ? ( {sections.length > 0 ? (
<> <>
{announcementSections.length > 0 && ( {announcementSections.length > 0 && (
@@ -47,13 +47,13 @@ export default async function HomePage({ params }: Props) {
</> </>
) : ( ) : (
<section className="mx-auto flex min-h-[70vh] max-w-5xl flex-col items-center justify-center px-6 text-center"> <section className="mx-auto flex min-h-[70vh] max-w-5xl flex-col items-center justify-center px-6 text-center">
<p className="mb-4 text-xs font-bold uppercase tracking-[0.28em] text-pop-pink"> <p className="mb-4 ui-eyebrow">
HomAroma HomAroma
</p> </p>
<h1 className="text-5xl font-semibold text-pop-black md:text-7xl"> <h1 className="text-5xl font-semibold text-text-main md:text-7xl">
Premium scents for calmer spaces Premium scents for calmer spaces
</h1> </h1>
<p className="mt-6 max-w-2xl text-lg leading-relaxed text-gray-600"> <p className="mt-6 max-w-2xl text-lg leading-relaxed text-muted-text">
The home CMS layout is unavailable right now, so this SEO-safe fallback keeps the page meaningful while the API is checked. The home CMS layout is unavailable right now, so this SEO-safe fallback keeps the page meaningful while the API is checked.
</p> </p>
</section> </section>
apps/website/src/app/[lang]/products/[id]/page.tsx
+24 -21
View File
@@ -1,4 +1,5 @@
import Link from '@/components/LocalizedLink' import Link from '@/components/LocalizedLink'
import Image from 'next/image'
import { notFound } from 'next/navigation' import { notFound } from 'next/navigation'
import type { Metadata } from 'next' import type { Metadata } from 'next'
import { generateSeoMetadata } from '@/lib/seo' import { generateSeoMetadata } from '@/lib/seo'
@@ -58,15 +59,15 @@ export default async function ProductDetailPage({ params }: { params: Promise<{
if (productResult.status === 404) notFound() if (productResult.status === 404) notFound()
return ( return (
<div className="min-h-screen bg-pop-bg"> <div className="min-h-screen bg-surface-page text-text-main">
{announcementSections.length > 0 && ( {announcementSections.length > 0 && (
<DynamicPageRenderer sections={announcementSections} categories={categories} lang={lang} /> <DynamicPageRenderer sections={announcementSections} categories={categories} lang={lang} />
)} )}
<div className="px-6 py-20"> <div className="px-6 py-20">
<div className="mx-auto max-w-3xl rounded-3xl border border-rose-100 bg-white p-10 text-center shadow-brutal"> <div className="ui-panel mx-auto max-w-3xl border border-rose-100 p-10 text-center">
<p className="text-lg font-semibold text-pop-black">Unable to load this product</p> <p className="text-lg font-semibold text-text-main">Unable to load this product</p>
<p className="mt-2 text-sm text-rose-500">{productResult.error}</p> <p className="mt-2 text-sm text-rose-500">{productResult.error}</p>
<Link href="/shop" className="mt-6 inline-flex font-semibold text-pop-pink">Back to Shop</Link> <Link href="/shop" className="mt-6 inline-flex font-semibold text-brand-primary">Back to Shop</Link>
</div> </div>
</div> </div>
</div> </div>
@@ -81,32 +82,34 @@ export default async function ProductDetailPage({ params }: { params: Promise<{
const imageUrl = product.images?.[0]?.url || product.category.imageUrl || getCategoryImage(categoryName) const imageUrl = product.images?.[0]?.url || product.category.imageUrl || getCategoryImage(categoryName)
return ( return (
<div className="min-h-screen bg-pop-bg pb-24 md:pb-0"> <div className="min-h-screen bg-surface-page pb-24 text-text-main md:pb-0">
{announcementSections.length > 0 && ( {announcementSections.length > 0 && (
<DynamicPageRenderer sections={announcementSections} categories={categories} lang={lang} /> <DynamicPageRenderer sections={announcementSections} categories={categories} lang={lang} />
)} )}
<div className="mx-auto max-w-7xl space-y-16 px-6 py-14 md:py-20"> <div className="mx-auto max-w-7xl space-y-16 px-6 py-14 md:py-20">
<nav className="flex flex-wrap items-center gap-2 text-xs font-semibold uppercase tracking-widest text-gray-400"> <nav className="flex flex-wrap items-center gap-2 text-xs font-semibold uppercase tracking-widest text-muted-text/70">
<Link href="/" className="transition hover:text-pop-pink">Home</Link> <Link href="/" className="transition hover:text-brand-primary">Home</Link>
<span>/</span> <span>/</span>
<Link href="/shop" className="transition hover:text-pop-pink">Shop</Link> <Link href="/shop" className="transition hover:text-brand-primary">Shop</Link>
<span>/</span> <span>/</span>
<Link href={`/category/${product.category.id}`} className="transition hover:text-pop-pink"> <Link href={`/category/${product.category.id}`} className="transition hover:text-brand-primary">
{categoryName} {categoryName}
</Link> </Link>
<span>/</span> <span>/</span>
<span className="text-pop-black">{productName}</span> <span className="text-text-main">{productName}</span>
</nav> </nav>
<section className="grid gap-10 md:grid-cols-2 md:gap-16"> <section className="grid gap-10 md:grid-cols-2 md:gap-16">
<div className="relative overflow-hidden rounded-3xl bg-white shadow-brutal"> <div className="relative overflow-hidden rounded-3xl bg-surface-card shadow-card">
<img <Image
src={imageUrl} src={imageUrl}
className="aspect-square h-full w-full object-cover"
alt={productName} alt={productName}
fill
unoptimized
className="aspect-square h-full w-full object-cover"
/> />
{categoryName && ( {categoryName && (
<div className="absolute left-5 top-5 rounded-full bg-white/90 px-4 py-2 text-xs font-bold uppercase tracking-widest text-pop-black shadow-sm"> <div className="absolute left-5 top-5 rounded-full bg-surface-card/90 px-4 py-2 text-xs font-bold uppercase tracking-widest text-text-main shadow-sm">
{categoryName} {categoryName}
</div> </div>
)} )}
@@ -116,10 +119,10 @@ export default async function ProductDetailPage({ params }: { params: Promise<{
</section> </section>
{details && ( {details && (
<section className="rounded-3xl bg-white p-8 shadow-brutal md:p-12"> <section className="ui-panel p-8 md:p-12">
<h2 className="mb-6 text-3xl font-semibold text-pop-black">Product Details</h2> <h2 className="mb-6 text-3xl font-semibold text-text-main">Product Details</h2>
<div <div
className="product-editorial leading-relaxed text-gray-600" className="product-editorial leading-relaxed text-muted-text"
dangerouslySetInnerHTML={{ __html: details }} dangerouslySetInnerHTML={{ __html: details }}
/> />
</section> </section>
@@ -127,14 +130,14 @@ export default async function ProductDetailPage({ params }: { params: Promise<{
{related.length > 0 && ( {related.length > 0 && (
<section className="space-y-8"> <section className="space-y-8">
<div className="flex flex-col gap-4 border-b border-gray-200 pb-6 md:flex-row md:items-end md:justify-between"> <div className="flex flex-col gap-4 border-b border-line-primary/20 pb-6 md:flex-row md:items-end md:justify-between">
<div> <div>
<p className="mb-2 text-xs font-bold uppercase tracking-[0.28em] text-pop-pink"> <p className="mb-2 ui-eyebrow">
More {categoryName} More {categoryName}
</p> </p>
<h2 className="text-3xl font-semibold text-pop-black">Related Products</h2> <h2 className="text-3xl font-semibold text-text-main">Related Products</h2>
</div> </div>
<Link href={`/category/${product.category.id}`} className="font-semibold text-pop-pink transition hover:text-pop-red"> <Link href={`/category/${product.category.id}`} className="font-semibold text-brand-primary transition hover:text-brand-primary-hover">
View All &rarr; View All &rarr;
</Link> </Link>
</div> </div>
apps/website/src/app/[lang]/profile/page.tsx
+5 -5
View File
@@ -32,7 +32,7 @@ export default async function ProfilePage({ params }: { params: Promise<{ lang:
} }
return ( return (
<main className="min-h-[70vh] bg-pop-bg"> <main className="min-h-[70vh] bg-surface-page text-text-main">
{announcementSections.length > 0 && ( {announcementSections.length > 0 && (
<DynamicPageRenderer sections={announcementSections} categories={categories} lang={lang} /> <DynamicPageRenderer sections={announcementSections} categories={categories} lang={lang} />
)} )}
@@ -41,12 +41,12 @@ export default async function ProfilePage({ params }: { params: Promise<{ lang:
<DynamicPageRenderer sections={heroSections} categories={categories} lang={lang} /> <DynamicPageRenderer sections={heroSections} categories={categories} lang={lang} />
) : ( ) : (
<section className="mx-auto max-w-4xl px-6 pt-20 text-center md:pt-24"> <section className="mx-auto max-w-4xl px-6 pt-20 text-center md:pt-24">
<div className="mx-auto mb-5 flex h-16 w-16 items-center justify-center rounded-full bg-white text-pop-pink shadow-brutal"> <div className="mx-auto mb-5 flex h-16 w-16 items-center justify-center rounded-full bg-surface-card text-brand-primary shadow-card">
<User className="h-8 w-8" /> <User className="h-8 w-8" />
</div> </div>
<p className="text-xs font-bold uppercase tracking-[0.28em] text-pop-pink">Member Profile</p> <p className="ui-eyebrow">Member Profile</p>
<h1 className="mt-4 text-4xl font-semibold text-pop-black md:text-5xl">โปรไฟล์ของฉัน</h1> <h1 className="mt-4 text-4xl font-semibold text-text-main md:text-5xl">โปรไฟล์ของฉัน</h1>
<p className="mx-auto mt-4 max-w-2xl text-gray-600"> <p className="mx-auto mt-4 max-w-2xl text-muted-text">
ตรวจสอบประวัติคำสั่งซื้อ คะแนนสะสม และจัดการที่อยู่จัดส่งสำหรับการสั่งซื้อครั้งถัดไป ตรวจสอบประวัติคำสั่งซื้อ คะแนนสะสม และจัดการที่อยู่จัดส่งสำหรับการสั่งซื้อครั้งถัดไป
</p> </p>
</section> </section>
apps/website/src/app/[lang]/scent-guide/page.tsx
+19 -16
View File
@@ -1,4 +1,5 @@
import Link from '@/components/LocalizedLink' import Link from '@/components/LocalizedLink'
import Image from 'next/image'
import { generateSeoMetadata } from '@/lib/seo' import { generateSeoMetadata } from '@/lib/seo'
import DynamicPageRenderer from '@/components/dynamic/DynamicPageRenderer' import DynamicPageRenderer from '@/components/dynamic/DynamicPageRenderer'
import { getArticlesResult, getCategoriesResult, getCmsPageResult } from '@/lib/cms' import { getArticlesResult, getCategoriesResult, getCmsPageResult } from '@/lib/cms'
@@ -32,28 +33,28 @@ export default async function ScentGuidePage({ params }: { params: Promise<{ lan
} }
return ( return (
<div className="flex min-h-screen flex-col bg-pop-bg"> <div className="flex min-h-screen flex-col bg-surface-page text-text-main">
{announcementSections.length > 0 && ( {announcementSections.length > 0 && (
<DynamicPageRenderer sections={announcementSections} categories={categories} lang={lang} /> <DynamicPageRenderer sections={announcementSections} categories={categories} lang={lang} />
)} )}
{heroSections.length > 0 ? ( {heroSections.length > 0 ? (
<DynamicPageRenderer sections={heroSections} categories={categories} lang={lang} /> <DynamicPageRenderer sections={heroSections} categories={categories} lang={lang} />
) : ( ) : (
<div className="space-y-4 border-b border-gray-200 bg-white px-6 pb-16 pt-32 text-center"> <div className="space-y-4 border-b border-line-primary/20 bg-surface-card px-6 pb-16 pt-32 text-center">
<p className="text-xs font-semibold uppercase tracking-[0.4em] text-pop-pink">Journal</p> <p className="ui-eyebrow">Journal</p>
<h1 className="text-5xl font-bold text-pop-black">Scent Guide</h1> <h1 className="text-5xl font-bold text-text-main">Scent Guide</h1>
<p className="mx-auto max-w-lg text-gray-600">Explore our collection of articles, guides, and sensory knowledge.</p> <p className="mx-auto max-w-lg text-muted-text">Explore our collection of articles, guides, and sensory knowledge.</p>
</div> </div>
)} )}
<div className="mx-auto w-full max-w-7xl flex-1 px-6 py-16"> <div className="mx-auto w-full max-w-7xl flex-1 px-6 py-16">
{!articlesResult.ok ? ( {!articlesResult.ok ? (
<div className="rounded-3xl border border-rose-100 bg-white px-6 py-20 text-center shadow-brutal"> <div className="ui-panel border border-rose-100 px-6 py-20 text-center">
<p className="text-lg font-semibold text-pop-black">Unable to load articles</p> <p className="text-lg font-semibold text-text-main">Unable to load articles</p>
<p className="mt-2 text-sm text-rose-500">{articlesResult.error}</p> <p className="mt-2 text-sm text-rose-500">{articlesResult.error}</p>
</div> </div>
) : articles.length === 0 ? ( ) : articles.length === 0 ? (
<div className="rounded-3xl bg-white px-6 py-20 text-center italic text-gray-500 shadow-brutal"> <div className="ui-panel px-6 py-20 text-center italic text-muted-text">
Articles coming soon. Check back later! Articles coming soon. Check back later!
</div> </div>
) : ( ) : (
@@ -62,23 +63,25 @@ export default async function ScentGuidePage({ params }: { params: Promise<{ lan
<Link <Link
key={article.id} key={article.id}
href={`/article/${article.slug}`} href={`/article/${article.slug}`}
className="group flex flex-col overflow-hidden rounded-2xl border border-gray-100 bg-white shadow-brutal transition-all duration-300 hover:-translate-y-1 hover:shadow-brutal-hover" className="ui-card ui-card-hover group flex flex-col overflow-hidden border border-line-primary/20 bg-surface-card"
> >
<div className="aspect-[4/3] shrink-0 overflow-hidden bg-pop-bg"> <div className="aspect-[4/3] shrink-0 overflow-hidden bg-surface-page">
{article.coverImage ? ( {article.coverImage ? (
<img src={article.coverImage} alt={article.title} className="h-full w-full object-cover transition-all duration-500 group-hover:scale-105" /> <div className="relative h-full w-full">
<Image src={article.coverImage} alt={article.title} fill unoptimized className="h-full w-full object-cover transition-all duration-500 group-hover:scale-105" />
</div>
) : ( ) : (
<div className="flex h-full w-full items-center justify-center bg-pop-bg"> <div className="flex h-full w-full items-center justify-center bg-surface-page">
<span className="text-sm uppercase tracking-widest text-gray-500">No Image</span> <span className="text-sm uppercase tracking-widest text-muted-text">No Image</span>
</div> </div>
)} )}
</div> </div>
<div className="flex flex-1 flex-col space-y-3 p-6"> <div className="flex flex-1 flex-col space-y-3 p-6">
<p className="text-[10px] font-bold uppercase tracking-widest text-pop-pink"> <p className="ui-eyebrow text-[10px]">
{new Date(article.createdAt).toLocaleDateString()} {new Date(article.createdAt).toLocaleDateString()}
</p> </p>
<h2 className="text-xl font-bold leading-tight text-pop-black transition-colors group-hover:text-pop-pink">{article.title}</h2> <h2 className="text-xl font-bold leading-tight text-text-main transition-colors group-hover:text-brand-primary">{article.title}</h2>
<div className="line-clamp-3 text-sm text-gray-600" dangerouslySetInnerHTML={{ __html: article.content }} /> <div className="line-clamp-3 text-sm text-muted-text" dangerouslySetInnerHTML={{ __html: article.content }} />
</div> </div>
</Link> </Link>
))} ))}
apps/website/src/app/[lang]/search/page.tsx
+19 -19
View File
@@ -36,28 +36,28 @@ export default async function SearchPage({ searchParams, params }: { searchParam
} }
return ( return (
<div className="min-h-screen bg-pop-bg"> <div className="min-h-screen bg-surface-page text-text-main">
{announcementSections.length > 0 && ( {announcementSections.length > 0 && (
<DynamicPageRenderer sections={announcementSections} categories={categories} lang={lang} /> <DynamicPageRenderer sections={announcementSections} categories={categories} lang={lang} />
)} )}
{heroSections.length > 0 ? ( {heroSections.length > 0 ? (
<DynamicPageRenderer sections={heroSections} categories={categories} lang={lang} /> <DynamicPageRenderer sections={heroSections} categories={categories} lang={lang} />
) : ( ) : (
<section className="border-b border-gray-200 bg-white px-6 py-16 text-center"> <section className="border-b border-line-primary/20 bg-surface-card px-6 py-16 text-center">
<p className="text-xs font-bold uppercase tracking-[0.28em] text-pop-pink">Search</p> <p className="ui-eyebrow">Search</p>
<h1 className="mt-4 text-5xl font-semibold tracking-tight text-pop-black">Find Your Scent</h1> <h1 className="mt-4 text-5xl font-semibold tracking-tight text-text-main">Find Your Scent</h1>
</section> </section>
)} )}
<section className="border-b border-gray-100 bg-white/70 px-6 py-8"> <section className="border-b border-line-primary/20 bg-surface-card/70 px-6 py-8">
<form className="mx-auto flex max-w-xl overflow-hidden rounded-full border border-gray-200 bg-white shadow-brutal" action="/search"> <form className="mx-auto flex max-w-xl overflow-hidden rounded-full border border-line-primary/20 bg-surface-card shadow-card" action="/search">
<input <input
name="q" name="q"
defaultValue={query} defaultValue={query}
placeholder="Search by scent or product name..." placeholder="Search by scent or product name..."
className="min-w-0 flex-1 px-5 py-3 text-sm text-pop-black outline-none placeholder:text-gray-400" className="min-w-0 flex-1 px-5 py-3 text-sm text-text-main outline-none placeholder:text-muted-text/70"
/> />
<button className="bg-pop-black px-6 py-3 text-sm font-bold uppercase tracking-widest text-white transition hover:bg-pop-pink"> <button className="bg-text-main px-6 py-3 text-sm font-bold uppercase tracking-widest text-white transition hover:bg-brand-primary">
Search Search
</button> </button>
</form> </form>
@@ -72,7 +72,7 @@ export default async function SearchPage({ searchParams, params }: { searchParam
<Link <Link
key={category.id} key={category.id}
href={`/search?q=${encodeURIComponent(name)}`} href={`/search?q=${encodeURIComponent(name)}`}
className="rounded-full border border-gray-200 bg-white px-4 py-1.5 text-xs font-semibold text-gray-600 transition hover:border-pop-pink hover:text-pop-pink" className="rounded-full border border-line-primary/20 bg-surface-card px-4 py-1.5 text-xs font-semibold text-muted-text transition hover:border-brand-primary hover:text-brand-primary"
> >
{name} {name}
</Link> </Link>
@@ -82,7 +82,7 @@ export default async function SearchPage({ searchParams, params }: { searchParam
)} )}
{query && ( {query && (
<p className="mt-5 text-center text-sm text-gray-500"> <p className="mt-5 text-center text-sm text-muted-text">
{products.length > 0 {products.length > 0
? `Found ${products.length} result${products.length !== 1 ? 's' : ''} for "${query}"` ? `Found ${products.length} result${products.length !== 1 ? 's' : ''} for "${query}"`
: `No results for "${query}"`} : `No results for "${query}"`}
@@ -92,22 +92,22 @@ export default async function SearchPage({ searchParams, params }: { searchParam
<div className="mx-auto max-w-7xl px-6 py-12"> <div className="mx-auto max-w-7xl px-6 py-12">
{!query ? ( {!query ? (
<div className="rounded-3xl bg-white px-6 py-20 text-center shadow-brutal"> <div className="ui-panel px-6 py-20 text-center">
<p className="text-lg font-semibold text-pop-black">Type something to search</p> <p className="text-lg font-semibold text-text-main">Type something to search</p>
<Link href="/shop" className="mt-4 inline-flex font-semibold text-pop-pink"> <Link href="/shop" className="mt-4 inline-flex font-semibold text-brand-primary">
Browse All Products &rarr; Browse All Products &rarr;
</Link> </Link>
</div> </div>
) : !productsResult.ok ? ( ) : !productsResult.ok ? (
<div className="rounded-3xl border border-rose-100 bg-white px-6 py-20 text-center shadow-brutal"> <div className="ui-panel border border-rose-100 px-6 py-20 text-center">
<p className="text-lg font-semibold text-pop-black">Unable to search products</p> <p className="text-lg font-semibold text-text-main">Unable to search products</p>
<p className="mt-2 text-sm text-rose-500">{productsResult.error}</p> <p className="mt-2 text-sm text-rose-500">{productsResult.error}</p>
</div> </div>
) : products.length === 0 ? ( ) : products.length === 0 ? (
<div className="rounded-3xl bg-white px-6 py-20 text-center shadow-brutal"> <div className="ui-panel px-6 py-20 text-center">
<p className="text-lg font-semibold text-pop-black">No products found</p> <p className="text-lg font-semibold text-text-main">No products found</p>
<p className="mt-2 text-sm text-gray-500">Try a different scent name or keyword.</p> <p className="mt-2 text-sm text-muted-text">Try a different scent name or keyword.</p>
<Link href="/shop" className="mt-4 inline-flex font-semibold text-pop-pink"> <Link href="/shop" className="mt-4 inline-flex font-semibold text-brand-primary">
Browse All Products &rarr; Browse All Products &rarr;
</Link> </Link>
</div> </div>
apps/website/src/app/[lang]/shop/page.tsx
+14 -14
View File
@@ -42,7 +42,7 @@ export default async function ShopPage({ searchParams, params }: { searchParams:
} }
return ( return (
<div className="min-h-screen bg-pop-bg"> <div className="min-h-screen bg-surface-page text-text-main">
<ShopCouponBridge coupon={coupon} /> <ShopCouponBridge coupon={coupon} />
{announcementSections.length > 0 && ( {announcementSections.length > 0 && (
<DynamicPageRenderer sections={announcementSections} categories={categories} lang={lang} /> <DynamicPageRenderer sections={announcementSections} categories={categories} lang={lang} />
@@ -50,10 +50,10 @@ export default async function ShopPage({ searchParams, params }: { searchParams:
{heroSections.length > 0 ? ( {heroSections.length > 0 ? (
<DynamicPageRenderer sections={heroSections} categories={categories} lang={lang} /> <DynamicPageRenderer sections={heroSections} categories={categories} lang={lang} />
) : ( ) : (
<section className="border-b border-gray-200 bg-white px-6 py-16 text-center"> <section className="border-b border-line-primary bg-surface-card px-6 py-16 text-center">
<p className="text-xs font-bold uppercase tracking-[0.28em] text-pop-pink">All Products</p> <p className="ui-eyebrow">All Products</p>
<h1 className="mt-4 text-5xl font-semibold tracking-tight text-pop-black">The Collection</h1> <h1 className="mt-4 text-5xl font-semibold tracking-tight text-text-main">The Collection</h1>
<p className="mx-auto mt-4 max-w-2xl text-gray-600"> <p className="mx-auto mt-4 max-w-2xl text-muted-text">
Browse our full range of premium aroma products crafted to elevate every space. Browse our full range of premium aroma products crafted to elevate every space.
</p> </p>
</section> </section>
@@ -61,7 +61,7 @@ export default async function ShopPage({ searchParams, params }: { searchParams:
<div className="mx-auto max-w-7xl space-y-10 px-6 py-12"> <div className="mx-auto max-w-7xl space-y-10 px-6 py-12">
<div className="flex flex-wrap gap-3"> <div className="flex flex-wrap gap-3">
<Link className="rounded-full bg-pop-black px-5 py-2 text-xs font-bold uppercase tracking-widest text-white" href="/shop"> <Link className="rounded-full bg-text-main px-5 py-2 text-xs font-bold uppercase tracking-widest text-white transition hover:bg-brand-primary" href="/shop">
All All
</Link> </Link>
{categories.map((category) => { {categories.map((category) => {
@@ -70,7 +70,7 @@ export default async function ShopPage({ searchParams, params }: { searchParams:
<Link <Link
key={category.id} key={category.id}
href={`/category/${category.id}`} href={`/category/${category.id}`}
className="rounded-full border border-gray-200 bg-white px-5 py-2 text-xs font-bold uppercase tracking-widest text-gray-600 transition hover:border-pop-pink hover:text-pop-pink" className="rounded-full border border-line-primary bg-surface-card px-5 py-2 text-xs font-bold uppercase tracking-widest text-muted-text transition hover:border-brand-primary hover:text-brand-primary"
> >
{name} {name}
{category._count && <span className="ml-2 opacity-60">({category._count.products})</span>} {category._count && <span className="ml-2 opacity-60">({category._count.products})</span>}
@@ -80,21 +80,21 @@ export default async function ShopPage({ searchParams, params }: { searchParams:
</div> </div>
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<p className="text-sm text-gray-500">{products.length} products</p> <p className="text-sm text-muted-text">{products.length} products</p>
<Link href="/search" className="text-sm font-semibold text-pop-pink transition hover:text-pop-red"> <Link href="/search" className="text-sm font-semibold text-brand-primary transition hover:text-brand-primary-hover">
Search products Search products
</Link> </Link>
</div> </div>
{apiError ? ( {apiError ? (
<div className="rounded-3xl border border-rose-100 bg-white px-6 py-20 text-center shadow-brutal"> <div className="ui-panel border border-rose-100 px-6 py-20 text-center">
<p className="text-lg font-semibold text-pop-black">Unable to load products</p> <p className="text-lg font-semibold text-text-main">Unable to load products</p>
<p className="mt-2 text-sm text-rose-500">{apiError}</p> <p className="mt-2 text-sm text-rose-500">{apiError}</p>
</div> </div>
) : products.length === 0 ? ( ) : products.length === 0 ? (
<div className="rounded-3xl bg-white px-6 py-20 text-center shadow-brutal"> <div className="ui-panel px-6 py-20 text-center">
<p className="text-lg font-semibold text-pop-black">No products found</p> <p className="text-lg font-semibold text-text-main">No products found</p>
<p className="mt-2 text-sm text-gray-500">Please check back soon.</p> <p className="mt-2 text-sm text-muted-text">Please check back soon.</p>
</div> </div>
) : ( ) : (
<div className="grid grid-cols-1 gap-8 md:grid-cols-3"> <div className="grid grid-cols-1 gap-8 md:grid-cols-3">
apps/website/src/app/[lang]/track/page.tsx
+5 -5
View File
@@ -32,7 +32,7 @@ export default async function TrackPage({ params }: { params: Promise<{ lang: st
} }
return ( return (
<main className="min-h-[70vh] bg-pop-bg"> <main className="min-h-[70vh] bg-surface-page text-text-main">
{announcementSections.length > 0 && ( {announcementSections.length > 0 && (
<DynamicPageRenderer sections={announcementSections} categories={categories} lang={lang} /> <DynamicPageRenderer sections={announcementSections} categories={categories} lang={lang} />
)} )}
@@ -41,12 +41,12 @@ export default async function TrackPage({ params }: { params: Promise<{ lang: st
<DynamicPageRenderer sections={heroSections} categories={categories} lang={lang} /> <DynamicPageRenderer sections={heroSections} categories={categories} lang={lang} />
) : ( ) : (
<section className="mx-auto max-w-4xl px-6 pt-20 text-center md:pt-24"> <section className="mx-auto max-w-4xl px-6 pt-20 text-center md:pt-24">
<div className="mx-auto mb-5 flex h-16 w-16 items-center justify-center rounded-full bg-white text-pop-pink shadow-brutal"> <div className="mx-auto mb-5 flex h-16 w-16 items-center justify-center rounded-full bg-surface-card text-brand-primary shadow-card">
<MapPin className="h-8 w-8" /> <MapPin className="h-8 w-8" />
</div> </div>
<p className="text-xs font-bold uppercase tracking-[0.28em] text-pop-pink">Track Order</p> <p className="ui-eyebrow">Track Order</p>
<h1 className="mt-4 text-4xl font-semibold text-pop-black md:text-5xl">Track Your Status</h1> <h1 className="mt-4 text-4xl font-semibold text-text-main md:text-5xl">Track Your Status</h1>
<p className="mx-auto mt-4 max-w-2xl text-gray-600"> <p className="mx-auto mt-4 max-w-2xl text-muted-text">
กรอกหมายเลขคำสั่งซื้อและเบอร์โทรศัพท์เพื่อตรวจสอบสถานะสินค้า หรือกลับมาดูคำสั่งซื้อที่เคยค้นหาบนอุปกรณ์นี้ กรอกหมายเลขคำสั่งซื้อและเบอร์โทรศัพท์เพื่อตรวจสอบสถานะสินค้า หรือกลับมาดูคำสั่งซื้อที่เคยค้นหาบนอุปกรณ์นี้
</p> </p>
</section> </section>
apps/website/src/app/[lang]/wishlist/page.tsx
+5 -5
View File
@@ -32,7 +32,7 @@ export default async function WishlistPage({ params }: { params: Promise<{ lang:
} }
return ( return (
<main className="min-h-[70vh] bg-pop-bg"> <main className="min-h-[70vh] bg-surface-page text-text-main">
{announcementSections.length > 0 && ( {announcementSections.length > 0 && (
<DynamicPageRenderer sections={announcementSections} categories={categories} lang={lang} /> <DynamicPageRenderer sections={announcementSections} categories={categories} lang={lang} />
)} )}
@@ -41,12 +41,12 @@ export default async function WishlistPage({ params }: { params: Promise<{ lang:
<DynamicPageRenderer sections={heroSections} categories={categories} lang={lang} /> <DynamicPageRenderer sections={heroSections} categories={categories} lang={lang} />
) : ( ) : (
<section className="mx-auto max-w-4xl px-6 pt-20 text-center md:pt-24"> <section className="mx-auto max-w-4xl px-6 pt-20 text-center md:pt-24">
<div className="mx-auto mb-5 flex h-16 w-16 items-center justify-center rounded-full bg-white text-rose-500 shadow-brutal"> <div className="mx-auto mb-5 flex h-16 w-16 items-center justify-center rounded-full bg-surface-card text-rose-500 shadow-card">
<Heart className="h-8 w-8 fill-current" /> <Heart className="h-8 w-8 fill-current" />
</div> </div>
<p className="text-xs font-bold uppercase tracking-[0.28em] text-pop-pink">Wishlist</p> <p className="ui-eyebrow">Wishlist</p>
<h1 className="mt-4 text-4xl font-semibold text-pop-black md:text-5xl">Your Wishlist</h1> <h1 className="mt-4 text-4xl font-semibold text-text-main md:text-5xl">Your Wishlist</h1>
<p className="mx-auto mt-4 max-w-2xl text-gray-600"> <p className="mx-auto mt-4 max-w-2xl text-muted-text">
Items you&apos;ve loved. Keep them here until you&apos;re ready to make them yours. Items you&apos;ve loved. Keep them here until you&apos;re ready to make them yours.
</p> </p>
</section> </section>
apps/website/src/app/globals.css
+224 -17
View File
@@ -1,20 +1,39 @@
@import "tailwindcss"; @import "tailwindcss";
@theme { @theme {
--font-sans: var(--font-sarabun, ui-sans-serif), system-ui, sans-serif; --font-body: var(--font-sarabun, ui-sans-serif), system-ui, sans-serif;
--font-display: var(--font-body);
--font-sans: var(--font-body);
--color-pop-pink: #FF6B6B; --color-brand-primary: #FF6B6B;
--color-pop-yellow: #FFF200; --color-brand-primary-hover: #FF4500;
--color-pop-orange: #FFA07A; --color-brand-accent: #FFF200;
--color-pop-red: #FF4500; --color-brand-warm: #FFA07A;
--color-pop-cyan: #E0FFFF; --color-brand-cool: #E0FFFF;
--color-pop-green: #98FB98; --color-brand-success: #98FB98;
--color-pop-purple: #D8BFD8; --color-brand-soft: #D8BFD8;
--color-pop-bg: #FFF0F5; --color-surface-page: #FFF0F5;
--color-pop-black: #333333; --color-surface-nav-rest: #F9F8F5;
--color-surface-card: #FFFFFF;
--color-text-main: #333333;
--color-muted-text: #666666;
--color-line-primary: #00B900;
--color-line-primary-hover: #009900;
--shadow-brutal: 0 10px 25px rgba(0,0,0,0.05); --color-pop-pink: var(--color-brand-primary);
--shadow-brutal-hover: 0 20px 40px rgba(0,0,0,0.1); --color-pop-yellow: var(--color-brand-accent);
--color-pop-orange: var(--color-brand-warm);
--color-pop-red: var(--color-brand-primary-hover);
--color-pop-cyan: var(--color-brand-cool);
--color-pop-green: var(--color-brand-success);
--color-pop-purple: var(--color-brand-soft);
--color-pop-bg: var(--color-surface-page);
--color-pop-black: var(--color-text-main);
--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);
--shadow-brutal-hover: var(--shadow-card-hover);
--animate-pop-in: fade-in-up 0.6s ease-out forwards; --animate-pop-in: fade-in-up 0.6s ease-out forwards;
--animate-spin-slow: spin 15s linear infinite; --animate-spin-slow: spin 15s linear infinite;
@@ -27,14 +46,14 @@
@layer base { @layer base {
body { body {
@apply bg-pop-bg text-pop-black font-sans antialiased; @apply bg-surface-page text-text-main font-sans antialiased;
background-image: radial-gradient(circle at top right, rgba(255,107,107,0.15), transparent 40%), background-image: radial-gradient(circle at top right, rgba(255,107,107,0.15), transparent 40%),
radial-gradient(circle at bottom left, rgba(255,160,122,0.15), transparent 40%); radial-gradient(circle at bottom left, rgba(255,160,122,0.15), transparent 40%);
min-height: 100vh; min-height: 100vh;
} }
h1, h2, h3, h4 { h1, h2, h3, h4 {
@apply text-pop-black font-semibold tracking-tight; @apply text-text-main font-semibold tracking-tight;
} }
} }
@@ -48,11 +67,199 @@
} }
.brutal-button { .brutal-button {
@apply px-8 py-4 bg-pop-pink text-white font-medium rounded-full shadow-brutal transition-all duration-300 hover:bg-pop-red hover:-translate-y-1 hover:shadow-brutal-hover; @apply px-8 py-4 bg-brand-primary text-white font-medium rounded-full shadow-brutal transition-all duration-300 hover:bg-brand-primary-hover hover:-translate-y-1 hover:shadow-brutal-hover;
} }
.brutal-button-alt { .brutal-button-alt {
@apply px-8 py-4 bg-white text-pop-pink font-medium rounded-full border border-pop-pink shadow-brutal transition-all duration-300 hover:bg-pop-bg hover:-translate-y-1 hover:shadow-brutal-hover; @apply px-8 py-4 bg-white text-brand-primary font-medium rounded-full border border-brand-primary shadow-brutal transition-all duration-300 hover:bg-surface-page hover:-translate-y-1 hover:shadow-brutal-hover;
}
.ui-card {
@apply rounded-2xl border border-gray-100 bg-surface-card shadow-card transition-all duration-300;
}
.ui-card-hover {
@apply hover:-translate-y-1 hover:shadow-card-hover;
}
.ui-button-primary {
@apply inline-flex items-center justify-center rounded-full bg-text-main px-6 py-3 text-xs font-bold uppercase tracking-widest text-white transition-colors hover:bg-brand-primary;
}
.ui-button-brand {
@apply inline-flex items-center justify-center rounded-full bg-brand-primary px-6 py-3 text-xs font-bold uppercase tracking-widest text-white transition-colors hover:bg-brand-primary-hover;
}
.ui-button-line {
@apply inline-flex items-center justify-center rounded-full bg-line-primary px-4 py-2 text-xs font-bold uppercase tracking-widest text-white shadow-sm transition-colors hover:bg-line-primary-hover;
}
.ui-icon-button {
@apply rounded-full p-2 text-text-main transition-all hover:bg-brand-primary/10 hover:text-brand-primary md:p-2.5;
}
.ui-brand-wordmark {
@apply shrink-0 text-xl font-bold uppercase italic tracking-widest text-text-main md:text-2xl;
}
.ui-nav-chip {
@apply flex items-center gap-1.5 rounded-full border border-brand-primary/30 bg-white px-3 py-2 text-[10px] font-bold uppercase tracking-wider text-text-main transition-all hover:bg-surface-page hover:text-brand-primary;
}
.ui-nav-panel {
@apply overflow-hidden rounded-xl border border-text-main/10 bg-white/95 shadow-2xl backdrop-blur-xl;
}
.ui-menu-link {
@apply block w-full text-left text-sm font-medium uppercase tracking-wide text-text-main/65 transition-colors hover:text-brand-primary;
}
.ui-menu-link-compact {
@apply block w-full text-left text-xs uppercase tracking-widest text-text-main/65 transition-colors hover:text-brand-primary;
}
.ui-menu-title {
@apply text-xs font-bold uppercase tracking-widest text-text-main;
}
.ui-eyebrow {
@apply text-xs font-bold uppercase tracking-[0.24em] text-brand-primary;
}
.ui-muted-text {
@apply text-gray-600;
}
.ui-input-shell {
@apply rounded-2xl border border-gray-200 bg-surface-page text-text-main outline-none transition focus:border-brand-primary focus:ring-2 focus:ring-brand-primary/20;
}
.ui-footer-link {
@apply transition-colors hover:text-brand-primary;
}
.ui-footer-social {
@apply flex h-9 w-9 items-center justify-center rounded-full border border-gray-200 bg-surface-page text-[10px] font-bold text-text-main transition-all duration-300 hover:border-brand-primary hover:bg-brand-primary hover:text-white;
}
.ui-section-band {
@apply px-6 py-20 md:py-24;
}
.ui-section-shell {
@apply mx-auto max-w-7xl;
}
.ui-section-title {
@apply text-3xl font-semibold text-text-main md:text-5xl;
}
.ui-section-subtitle {
@apply text-gray-500;
}
.ui-section-card {
@apply rounded-3xl bg-white shadow-card;
}
.ui-section-card-muted {
@apply rounded-3xl bg-surface-page shadow-card;
}
.ui-section-link {
@apply font-semibold text-brand-primary transition hover:text-brand-primary-hover;
}
.ui-accent-text {
@apply italic text-brand-accent;
}
.ui-panel {
@apply rounded-3xl bg-white shadow-card;
}
.ui-panel-muted {
@apply rounded-3xl bg-surface-page shadow-card;
}
.ui-panel-border {
@apply rounded-3xl border border-gray-100 bg-white shadow-card;
}
.ui-panel-header {
@apply flex items-center gap-3 border-b border-gray-100 pb-5;
}
.ui-panel-title {
@apply text-xl font-semibold text-text-main;
}
.ui-panel-subtitle {
@apply text-sm text-gray-500;
}
.ui-form-label {
@apply text-xs font-bold uppercase tracking-[0.18em] text-gray-500;
}
.ui-form-shell {
@apply w-full rounded-2xl border border-gray-200 bg-surface-page px-4 py-3 text-sm text-text-main outline-none transition focus:border-brand-primary focus:ring-2 focus:ring-brand-primary/20;
}
.ui-form-shell-light {
@apply w-full rounded-2xl border border-gray-200 bg-white px-4 py-3 text-sm text-text-main outline-none transition focus:border-brand-primary focus:ring-2 focus:ring-brand-primary/20;
}
.ui-form-inline-button {
@apply inline-flex items-center justify-center gap-2 rounded-full bg-text-main px-6 py-4 text-sm font-bold uppercase tracking-[0.16em] text-white transition hover:bg-brand-primary disabled:cursor-not-allowed disabled:opacity-60;
}
.ui-form-inline-button-sm {
@apply inline-flex items-center justify-center gap-2 rounded-full bg-text-main px-5 py-2 text-sm font-semibold text-white transition hover:bg-brand-primary disabled:cursor-not-allowed disabled:opacity-60;
}
.ui-form-secondary-button {
@apply rounded-full border border-gray-200 px-5 py-2 text-sm font-semibold text-gray-600 transition hover:text-brand-primary;
}
.ui-form-danger-button {
@apply rounded-full border border-rose-100 p-2 text-rose-500 transition hover:bg-rose-50;
}
.ui-form-checkbox {
@apply h-4 w-4 rounded border-gray-300 text-brand-primary;
}
.ui-status-badge {
@apply rounded-full border px-3 py-1 text-xs font-bold;
}
.ui-avatar-shell {
@apply flex h-20 w-20 items-center justify-center overflow-hidden rounded-full border border-brand-primary/20 bg-surface-page;
}
.ui-avatar-shell-sm {
@apply flex h-16 w-16 items-center justify-center overflow-hidden rounded-full border border-brand-primary/20 bg-surface-page;
}
.ui-tab-button {
@apply relative flex shrink-0 items-center gap-2 px-3 pb-4 text-sm font-bold transition;
}
.ui-tab-button-active {
@apply text-brand-primary;
}
.ui-tab-button-inactive {
@apply text-gray-500 hover:text-text-main;
}
.ui-tab-count {
@apply rounded-full bg-surface-page px-2 py-0.5 text-[10px];
}
.ui-empty-panel {
@apply rounded-3xl bg-white px-6 py-16 text-center shadow-card;
} }
} }
@@ -62,7 +269,7 @@
} }
::-webkit-scrollbar-track { ::-webkit-scrollbar-track {
@apply bg-pop-bg; @apply bg-surface-page;
} }
::-webkit-scrollbar-thumb { ::-webkit-scrollbar-thumb {
apps/website/src/components/AddToCartSection.tsx
+24 -26
View File
@@ -1,4 +1,4 @@
"use client"; "use client"
import { useState } from 'react' import { useState } from 'react'
import Link from './LocalizedLink' import Link from './LocalizedLink'
@@ -41,30 +41,28 @@ export default function AddToCartSection({ product }: Props) {
<div className="space-y-8"> <div className="space-y-8">
<div className="space-y-2"> <div className="space-y-2">
{categoryName && ( {categoryName && (
<p className="text-xs font-bold uppercase tracking-[0.28em] text-pop-pink"> <p className="ui-eyebrow">{categoryName}</p>
{categoryName}
</p>
)} )}
<h1 className="text-4xl font-semibold leading-tight text-pop-black md:text-6xl"> <h1 className="text-4xl font-semibold leading-tight text-text-main md:text-6xl">
{productName} {productName}
</h1> </h1>
<p className="text-sm font-semibold uppercase tracking-widest text-gray-500"> <p className="text-sm font-semibold uppercase tracking-widest text-muted-text">
Premium Collection Premium Collection
</p> </p>
</div> </div>
{description && <p className="leading-relaxed text-gray-600">{description}</p>} {description && <p className="leading-relaxed text-muted-text">{description}</p>}
<div className="flex items-baseline gap-3"> <div className="flex items-baseline gap-3">
<span className="text-4xl font-bold text-pop-pink"> <span className="text-4xl font-bold text-brand-primary">
{formatPrice(currentVariant?.price ?? product.price)} {formatPrice(currentVariant?.price ?? product.price)}
</span> </span>
{currentVariant && <span className="text-sm text-gray-500">/ {currentVariant.size}</span>} {currentVariant && <span className="text-sm text-muted-text">/ {currentVariant.size}</span>}
</div> </div>
{product.variants.length > 0 && ( {product.variants.length > 0 && (
<div className="space-y-3"> <div className="space-y-3">
<p className="text-xs font-bold uppercase tracking-widest text-gray-500">Select Size</p> <p className="text-xs font-bold uppercase tracking-widest text-muted-text">Select Size</p>
<div className="flex flex-wrap gap-3"> <div className="flex flex-wrap gap-3">
{product.variants.map((variant, index) => ( {product.variants.map((variant, index) => (
<button <button
@@ -72,12 +70,12 @@ export default function AddToCartSection({ product }: Props) {
onClick={() => setSelectedVariant(index)} onClick={() => setSelectedVariant(index)}
className={`rounded-xl border px-5 py-3 text-sm font-bold uppercase tracking-widest transition ${ className={`rounded-xl border px-5 py-3 text-sm font-bold uppercase tracking-widest transition ${
selectedVariant === index selectedVariant === index
? 'border-pop-pink bg-pop-pink text-white shadow-brutal' ? 'border-brand-primary bg-brand-primary text-white shadow-card'
: 'border-gray-200 bg-white text-gray-600 hover:border-pop-pink hover:text-pop-pink' : 'border-line-primary/20 bg-surface-card text-muted-text hover:border-brand-primary hover:text-brand-primary'
}`} }`}
> >
{variant.size} {variant.size}
<span className={`mt-1 block text-[10px] ${selectedVariant === index ? 'text-white/80' : 'text-gray-400'}`}> <span className={`mt-1 block text-[10px] ${selectedVariant === index ? 'text-white/80' : 'text-muted-text/70'}`}>
{formatPrice(variant.price)} {formatPrice(variant.price)}
</span> </span>
</button> </button>
@@ -89,35 +87,35 @@ export default function AddToCartSection({ product }: Props) {
<div className="hidden gap-4 md:flex"> <div className="hidden gap-4 md:flex">
<button <button
onClick={handleAddToCart} onClick={handleAddToCart}
className="flex-1 rounded-full bg-pop-black px-8 py-4 font-bold uppercase tracking-widest text-white transition hover:bg-pop-pink" className="ui-form-inline-button flex-1"
> >
Add to Cart Add to Cart
</button> </button>
{categoryName && ( {categoryName && (
<Link <Link
href={`/category/${product.category.id}`} href={`/category/${product.category.id}`}
className="rounded-full border border-gray-200 bg-white px-8 py-4 font-bold uppercase tracking-widest text-gray-600 transition hover:border-pop-pink hover:text-pop-pink" className="rounded-full border border-line-primary/20 bg-surface-card px-8 py-4 font-bold uppercase tracking-widest text-muted-text transition hover:border-brand-primary hover:text-brand-primary"
> >
{categoryName} {categoryName}
</Link> </Link>
)} )}
</div> </div>
<div className="grid grid-cols-2 gap-4 border-t border-gray-200 pt-6 text-sm text-gray-500"> <div className="grid grid-cols-2 gap-4 border-t border-line-primary/20 pt-6 text-sm text-muted-text">
<div> <div>
<span className="mb-1 block text-xs font-bold uppercase tracking-widest text-gray-400">Scent</span> <span className="mb-1 block text-xs font-bold uppercase tracking-widest text-muted-text/70">Scent</span>
<span className="font-semibold text-pop-black">{product.scent.name}</span> <span className="font-semibold text-text-main">{product.scent.name}</span>
</div> </div>
<div> <div>
<span className="mb-1 block text-xs font-bold uppercase tracking-widest text-gray-400">Category</span> <span className="mb-1 block text-xs font-bold uppercase tracking-widest text-muted-text/70">Category</span>
<Link href={`/category/${product.category.id}`} className="font-semibold text-pop-black transition hover:text-pop-pink"> <Link href={`/category/${product.category.id}`} className="font-semibold text-text-main transition hover:text-brand-primary">
{categoryName} {categoryName}
</Link> </Link>
</div> </div>
</div> </div>
</div> </div>
<div className="fixed bottom-0 left-0 right-0 z-40 border-t border-gray-200 bg-white/95 p-4 shadow-[0_-10px_30px_rgba(0,0,0,0.08)] backdrop-blur md:hidden"> <div className="fixed bottom-0 left-0 right-0 z-40 border-t border-line-primary/20 bg-surface-card/95 p-4 shadow-[0_-10px_30px_rgba(0,0,0,0.08)] backdrop-blur md:hidden">
{product.variants.length > 1 && ( {product.variants.length > 1 && (
<div className="mb-3 flex gap-2 overflow-x-auto pb-1" style={{ scrollbarWidth: 'none' }}> <div className="mb-3 flex gap-2 overflow-x-auto pb-1" style={{ scrollbarWidth: 'none' }}>
{product.variants.map((variant, index) => ( {product.variants.map((variant, index) => (
@@ -126,8 +124,8 @@ export default function AddToCartSection({ product }: Props) {
onClick={() => setSelectedVariant(index)} onClick={() => setSelectedVariant(index)}
className={`flex-shrink-0 rounded-full border px-4 py-2 text-[10px] font-bold uppercase tracking-widest transition ${ className={`flex-shrink-0 rounded-full border px-4 py-2 text-[10px] font-bold uppercase tracking-widest transition ${
selectedVariant === index selectedVariant === index
? 'border-pop-pink bg-pop-pink text-white' ? 'border-brand-primary bg-brand-primary text-white'
: 'border-gray-200 bg-white text-gray-500' : 'border-line-primary/20 bg-surface-card text-muted-text'
}`} }`}
> >
{variant.size} {variant.size}
@@ -137,14 +135,14 @@ export default function AddToCartSection({ product }: Props) {
)} )}
<div className="flex items-center justify-between gap-4"> <div className="flex items-center justify-between gap-4">
<div className="flex flex-col"> <div className="flex flex-col">
<span className="text-[10px] font-bold uppercase tracking-widest text-gray-400"> <span className="text-[10px] font-bold uppercase tracking-widest text-muted-text/70">
{product.variants.length > 1 ? currentVariant?.size : 'Total Price'} {product.variants.length > 1 ? currentVariant?.size : 'Total Price'}
</span> </span>
<span className="text-xl font-bold text-pop-pink">{formatPrice(currentVariant?.price ?? product.price)}</span> <span className="text-xl font-bold text-brand-primary">{formatPrice(currentVariant?.price ?? product.price)}</span>
</div> </div>
<button <button
onClick={handleAddToCart} onClick={handleAddToCart}
className="flex-1 rounded-full bg-pop-black px-5 py-3.5 font-bold uppercase tracking-widest text-white transition hover:bg-pop-pink" className="ui-form-inline-button flex-1 px-5 py-3.5"
> >
Add to Cart Add to Cart
</button> </button>
apps/website/src/components/CartDrawer.tsx
+27 -27
View File
@@ -1,4 +1,5 @@
"use client"; "use client"
import Image from 'next/image'
import { X, ShoppingBag, Plus, Minus, Trash2 } from 'lucide-react' import { X, ShoppingBag, Plus, Minus, Trash2 } from 'lucide-react'
import Link from './LocalizedLink' import Link from './LocalizedLink'
import { useCartStore } from '../store/cartStore' import { useCartStore } from '../store/cartStore'
@@ -13,61 +14,60 @@ export default function CartDrawer() {
return ( return (
<div className="fixed inset-0 z-[100] flex justify-end"> <div className="fixed inset-0 z-[100] flex justify-end">
<div <div className="absolute inset-0 bg-text-main/45 backdrop-blur-sm" onClick={() => toggleCart(false)} />
className="absolute inset-0 bg-pop-black/45 backdrop-blur-sm"
onClick={() => toggleCart(false)}
/>
<div className="relative flex h-full w-full max-w-md flex-col border-l border-gray-200 bg-white shadow-2xl"> <div className="relative flex h-full w-full max-w-md flex-col border-l border-line-primary/20 bg-surface-card shadow-2xl">
<div className="flex items-center justify-between border-b border-gray-100 bg-pop-bg/70 p-6"> <div className="flex items-center justify-between border-b border-line-primary/20 bg-surface-page/70 p-6">
<h2 className="flex items-center gap-2 text-xl font-bold text-pop-black"> <h2 className="flex items-center gap-2 text-xl font-bold text-text-main">
<ShoppingBag className="h-5 w-5 text-pop-pink" /> <ShoppingBag className="h-5 w-5 text-brand-primary" />
{t('cart.title')} {t('cart.title')}
<span className="ml-2 rounded-full bg-white px-2 py-0.5 text-sm font-normal text-gray-500"> <span className="ml-2 rounded-full bg-surface-card px-2 py-0.5 text-sm font-normal text-muted-text">
{t('cart.items', { count: items.length })} {t('cart.items', { count: items.length })}
</span> </span>
</h2> </h2>
<button onClick={() => toggleCart(false)} className="rounded-full border border-gray-200 p-2 text-gray-500 transition-colors hover:text-pop-pink"> <button onClick={() => toggleCart(false)} className="rounded-full border border-line-primary/20 p-2 text-muted-text transition-colors hover:text-brand-primary">
<X className="h-5 w-5" /> <X className="h-5 w-5" />
</button> </button>
</div> </div>
<div className="flex-1 space-y-6 overflow-y-auto p-6"> <div className="flex-1 space-y-6 overflow-y-auto p-6">
{items.length === 0 ? ( {items.length === 0 ? (
<div className="flex h-full flex-col items-center justify-center space-y-4 text-gray-500"> <div className="flex h-full flex-col items-center justify-center space-y-4 text-muted-text">
<ShoppingBag className="h-16 w-16 opacity-30" /> <ShoppingBag className="h-16 w-16 opacity-30" />
<p>{t('cart.empty')}</p> <p>{t('cart.empty')}</p>
<button onClick={() => toggleCart(false)} className="text-xs font-bold uppercase tracking-widest text-pop-pink hover:underline"> <button onClick={() => toggleCart(false)} className="text-xs font-bold uppercase tracking-widest text-brand-primary hover:underline">
{t('cart.continueShopping')} {t('cart.continueShopping')}
</button> </button>
</div> </div>
) : ( ) : (
items.map((item) => ( items.map((item) => (
<div key={item.cartItemId} className="group relative flex gap-4 rounded-2xl border border-gray-100 bg-pop-bg/60 p-4"> <div key={item.cartItemId} className="group relative flex gap-4 rounded-2xl border border-line-primary/20 bg-surface-page/60 p-4">
<div className="h-24 w-20 flex-shrink-0 overflow-hidden rounded-lg bg-white"> <div className="relative h-24 w-20 flex-shrink-0 overflow-hidden rounded-lg bg-surface-card">
<img <Image
src={item.productImage || '/images/oil_ozone.png'} src={item.productImage || '/images/oil_ozone.png'}
alt={item.productName} alt={item.productName}
fill
unoptimized
className="h-full w-full object-cover" className="h-full w-full object-cover"
/> />
</div> </div>
<div className="relative flex flex-1 flex-col space-y-1 pt-1"> <div className="relative flex flex-1 flex-col space-y-1 pt-1">
<h3 className="pr-6 text-sm font-bold leading-tight text-pop-black">{item.productName}</h3> <h3 className="pr-6 text-sm font-bold leading-tight text-text-main">{item.productName}</h3>
{item.variantSize && <p className="text-xs text-gray-500">{item.variantSize}</p>} {item.variantSize && <p className="text-xs text-muted-text">{item.variantSize}</p>}
<p className="mt-auto text-sm font-bold text-pop-pink">{formatPrice(item.price)}</p> <p className="mt-auto text-sm font-bold text-brand-primary">{formatPrice(item.price)}</p>
<div className="mt-2 flex w-max items-center gap-3 rounded-lg border border-gray-200 bg-white"> <div className="mt-2 flex w-max items-center gap-3 rounded-lg border border-line-primary/20 bg-surface-card">
<button onClick={() => updateQuantity(item.cartItemId, item.quantity - 1)} className="p-1 transition-colors hover:text-pop-pink"> <button onClick={() => updateQuantity(item.cartItemId, item.quantity - 1)} className="p-1 transition-colors hover:text-brand-primary">
<Minus className="h-4 w-4" /> <Minus className="h-4 w-4" />
</button> </button>
<span className="w-4 text-center text-xs font-bold">{item.quantity}</span> <span className="w-4 text-center text-xs font-bold">{item.quantity}</span>
<button onClick={() => updateQuantity(item.cartItemId, item.quantity + 1)} className="p-1 transition-colors hover:text-pop-pink"> <button onClick={() => updateQuantity(item.cartItemId, item.quantity + 1)} className="p-1 transition-colors hover:text-brand-primary">
<Plus className="h-4 w-4" /> <Plus className="h-4 w-4" />
</button> </button>
</div> </div>
<button onClick={() => removeFromCart(item.cartItemId)} className="absolute right-0 top-1 p-1 text-gray-400 opacity-0 transition-colors hover:text-rose-500 group-hover:opacity-100"> <button onClick={() => removeFromCart(item.cartItemId)} className="absolute right-0 top-1 p-1 text-muted-text/60 opacity-0 transition-colors hover:text-rose-500 group-hover:opacity-100">
<Trash2 className="h-4 w-4" /> <Trash2 className="h-4 w-4" />
</button> </button>
</div> </div>
@@ -77,13 +77,13 @@ export default function CartDrawer() {
</div> </div>
{items.length > 0 && ( {items.length > 0 && (
<div className="space-y-6 border-t border-gray-100 bg-pop-bg/70 p-6"> <div className="space-y-6 border-t border-line-primary/20 bg-surface-page/70 p-6">
<div className="flex items-center justify-between text-lg font-bold"> <div className="flex items-center justify-between text-lg font-bold">
<span>{t('cart.subtotal')}</span> <span>{t('cart.subtotal')}</span>
<span className="text-pop-pink">{formatPrice(getCartTotal())}</span> <span className="text-brand-primary">{formatPrice(getCartTotal())}</span>
</div> </div>
<p className="text-center text-xs text-gray-500">{t('cart.shippingNote')}</p> <p className="text-center text-xs text-muted-text">{t('cart.shippingNote')}</p>
<Link href="/checkout" onClick={() => toggleCart(false)} className="block w-full rounded-full bg-pop-black py-4 text-center text-sm font-bold uppercase tracking-widest text-white transition hover:bg-pop-pink"> <Link href="/checkout" onClick={() => toggleCart(false)} className="block w-full rounded-full bg-text-main py-4 text-center text-sm font-bold uppercase tracking-widest text-white transition hover:bg-brand-primary">
{t('cart.proceed')} {t('cart.proceed')}
</Link> </Link>
</div> </div>
apps/website/src/components/CheckoutClient.tsx
+76 -73
View File
@@ -1,5 +1,6 @@
"use client"; "use client";
import Image from 'next/image'
import Link from './LocalizedLink' import Link from './LocalizedLink'
import { useRouter } from 'next/navigation' import { useRouter } from 'next/navigation'
import { useEffect, useMemo, useState } from 'react' import { useEffect, useMemo, useState } from 'react'
@@ -386,20 +387,20 @@ export default function CheckoutClient() {
if (!hydrated) { if (!hydrated) {
return ( return (
<div className="rounded-3xl bg-white p-10 text-center shadow-brutal"> <div className="ui-panel p-10 text-center">
<Loader2 className="mx-auto h-8 w-8 animate-spin text-pop-pink" /> <Loader2 className="mx-auto h-8 w-8 animate-spin text-brand-primary" />
<p className="mt-4 text-sm font-semibold text-gray-500">กำลังโหลดตะกร้าสินค้า...</p> <p className="mt-4 text-sm font-semibold text-muted-text">กำลังโหลดตะกร้าสินค้า...</p>
</div> </div>
) )
} }
if (items.length === 0) { if (items.length === 0) {
return ( return (
<div className="mx-auto max-w-xl rounded-3xl bg-white p-10 text-center shadow-brutal"> <div className="ui-panel mx-auto max-w-xl p-10 text-center">
<ShoppingBag className="mx-auto h-14 w-14 text-pop-pink" /> <ShoppingBag className="mx-auto h-14 w-14 text-brand-primary" />
<h2 className="mt-5 text-3xl font-semibold text-pop-black">ตะกร้าสินค้าว่าง</h2> <h2 className="mt-5 text-3xl font-semibold text-text-main">ตะกร้าสินค้าว่าง</h2>
<p className="mt-3 text-gray-600">เลือกสินค้าที่คุณชอบก่อน แล้วกลับมายืนยันคำสั่งซื้อที่หน้านี้ได้เลย</p> <p className="mt-3 text-muted-text">เลือกสินค้าที่คุณชอบก่อน แล้วกลับมายืนยันคำสั่งซื้อที่หน้านี้ได้เลย</p>
<Link href="/shop" className="mt-8 inline-flex rounded-full bg-pop-black px-8 py-4 text-sm font-bold uppercase tracking-[0.16em] text-white transition hover:bg-pop-pink"> <Link href="/shop" className="mt-8 inline-flex rounded-full bg-text-main px-8 py-4 text-sm font-bold uppercase tracking-[0.16em] text-white transition hover:bg-brand-primary">
กลับไปเลือกสินค้า กลับไปเลือกสินค้า
</Link> </Link>
</div> </div>
@@ -412,58 +413,58 @@ export default function CheckoutClient() {
return ( return (
<div className="grid gap-8 lg:grid-cols-[minmax(0,1fr)_420px]"> <div className="grid gap-8 lg:grid-cols-[minmax(0,1fr)_420px]">
<form id="checkout-form" onSubmit={createOrder} className="space-y-6"> <form id="checkout-form" onSubmit={createOrder} className="space-y-6">
<section className="rounded-3xl bg-white p-6 shadow-brutal md:p-8"> <section className="ui-panel p-6 md:p-8">
<div className="flex items-center gap-3 border-b border-gray-100 pb-5"> <div className="ui-panel-header">
<UserRound className="h-5 w-5 text-pop-pink" /> <UserRound className="h-5 w-5 text-brand-primary" />
<div> <div>
<h2 className="text-xl font-semibold text-pop-black">ข้อมูลผู้รับสินค้า</h2> <h2 className="ui-panel-title">ข้อมูลผู้รับสินค้า</h2>
<p className="text-sm text-gray-500">ข้อมูลนี้จะถูกส่งไปสร้างคำสั่งซื้อตาม contract ของ backend</p> <p className="ui-panel-subtitle">ข้อมูลนี้จะถูกส่งไปสร้างคำสั่งซื้อตาม contract ของ backend</p>
</div> </div>
</div> </div>
<div className="mt-6 grid gap-5 md:grid-cols-2"> <div className="mt-6 grid gap-5 md:grid-cols-2">
<label className="space-y-2"> <label className="space-y-2">
<span className="text-xs font-bold uppercase tracking-[0.18em] text-gray-500">ชื่อผู้รับ *</span> <span className="ui-form-label">ชื่อผู้รับ *</span>
<input <input
required required
value={formData.name} value={formData.name}
onChange={(event) => setFormData((current) => ({ ...current, name: event.target.value }))} onChange={(event) => setFormData((current) => ({ ...current, name: event.target.value }))}
className="w-full rounded-2xl border border-gray-200 bg-pop-bg px-4 py-3 text-sm text-pop-black outline-none transition focus:border-pop-pink" className="ui-form-shell"
placeholder="ชื่อ-นามสกุล" placeholder="ชื่อ-นามสกุล"
/> />
</label> </label>
<label className="space-y-2"> <label className="space-y-2">
<span className="text-xs font-bold uppercase tracking-[0.18em] text-gray-500">เบอร์โทรศัพท์ *</span> <span className="ui-form-label">เบอร์โทรศัพท์ *</span>
<input <input
required required
pattern="[0-9]{9,10}" pattern="[0-9]{9,10}"
title="กรุณากรอกเบอร์โทรศัพท์ 9-10 หลัก" title="กรุณากรอกเบอร์โทรศัพท์ 9-10 หลัก"
value={formData.phone} value={formData.phone}
onChange={(event) => setFormData((current) => ({ ...current, phone: event.target.value }))} onChange={(event) => setFormData((current) => ({ ...current, phone: event.target.value }))}
className="w-full rounded-2xl border border-gray-200 bg-pop-bg px-4 py-3 text-sm text-pop-black outline-none transition focus:border-pop-pink" className="ui-form-shell"
placeholder="0812345678" placeholder="0812345678"
/> />
</label> </label>
<label className="space-y-2 md:col-span-2"> <label className="space-y-2 md:col-span-2">
<span className="text-xs font-bold uppercase tracking-[0.18em] text-gray-500">อีเมล *</span> <span className="ui-form-label">อีเมล *</span>
<input <input
required required
type="email" type="email"
value={formData.email} value={formData.email}
onChange={(event) => setFormData((current) => ({ ...current, email: event.target.value }))} onChange={(event) => setFormData((current) => ({ ...current, email: event.target.value }))}
className="w-full rounded-2xl border border-gray-200 bg-pop-bg px-4 py-3 text-sm text-pop-black outline-none transition focus:border-pop-pink" className="ui-form-shell"
placeholder="you@example.com" placeholder="you@example.com"
/> />
</label> </label>
</div> </div>
</section> </section>
<section className="rounded-3xl bg-white p-6 shadow-brutal md:p-8"> <section className="ui-panel p-6 md:p-8">
<div className="flex items-center gap-3 border-b border-gray-100 pb-5"> <div className="ui-panel-header">
<PackageCheck className="h-5 w-5 text-pop-pink" /> <PackageCheck className="h-5 w-5 text-brand-primary" />
<div> <div>
<h2 className="text-xl font-semibold text-pop-black">ที่อยู่จัดส่ง</h2> <h2 className="ui-panel-title">ที่อยู่จัดส่ง</h2>
<p className="text-sm text-gray-500">สมาชิกสามารถเลือกที่อยู่ที่บันทึกไว้ หรือกรอกที่อยู่ใหม่ได้</p> <p className="ui-panel-subtitle">สมาชิกสามารถเลือกที่อยู่ที่บันทึกไว้ หรือกรอกที่อยู่ใหม่ได้</p>
</div> </div>
</div> </div>
@@ -474,8 +475,8 @@ export default function CheckoutClient() {
key={address.id} key={address.id}
className={`flex cursor-pointer gap-3 rounded-2xl border p-4 transition ${ className={`flex cursor-pointer gap-3 rounded-2xl border p-4 transition ${
selectedAddressId === address.id selectedAddressId === address.id
? 'border-pop-pink bg-pop-bg' ? 'border-brand-primary bg-surface-page'
: 'border-gray-100 bg-white hover:border-pop-pink/40' : 'border-line-primary bg-surface-card hover:border-brand-primary/40'
}`} }`}
> >
<input <input
@@ -483,25 +484,25 @@ export default function CheckoutClient() {
name="shippingAddress" name="shippingAddress"
checked={selectedAddressId === address.id} checked={selectedAddressId === address.id}
onChange={() => selectAddress(address)} onChange={() => selectAddress(address)}
className="mt-1 accent-pop-pink" className="mt-1 accent-brand-primary"
/> />
<span> <span>
<span className="block text-sm font-bold text-pop-black"> <span className="block text-sm font-bold text-text-main">
{address.recipientName} {address.recipientName}
{address.isDefault && ( {address.isDefault && (
<span className="ml-2 rounded-full bg-pop-pink/10 px-2 py-0.5 text-[10px] uppercase tracking-wide text-pop-pink"> <span className="ml-2 rounded-full bg-brand-primary/10 px-2 py-0.5 text-[10px] uppercase tracking-wide text-brand-primary">
default default
</span> </span>
)} )}
</span> </span>
<span className="mt-1 block text-xs text-gray-500">{address.phone}</span> <span className="mt-1 block text-xs text-muted-text">{address.phone}</span>
<span className="mt-1 block text-sm text-gray-600">{formatAddress(address)}</span> <span className="mt-1 block text-sm text-text-main/80">{formatAddress(address)}</span>
</span> </span>
</label> </label>
))} ))}
<label <label
className={`flex cursor-pointer items-center gap-3 rounded-2xl border p-4 transition ${ className={`flex cursor-pointer items-center gap-3 rounded-2xl border p-4 transition ${
selectedAddressId === 'new' ? 'border-pop-pink bg-pop-bg' : 'border-gray-100 bg-white hover:border-pop-pink/40' selectedAddressId === 'new' ? 'border-brand-primary bg-surface-page' : 'border-line-primary bg-surface-card hover:border-brand-primary/40'
}`} }`}
> >
<input <input
@@ -509,9 +510,9 @@ export default function CheckoutClient() {
name="shippingAddress" name="shippingAddress"
checked={selectedAddressId === 'new'} checked={selectedAddressId === 'new'}
onChange={() => selectAddress('new')} onChange={() => selectAddress('new')}
className="accent-pop-pink" className="accent-brand-primary"
/> />
<span className="text-sm font-bold text-pop-black">กรอกที่อยู่ใหม่</span> <span className="text-sm font-bold text-text-main">กรอกที่อยู่ใหม่</span>
</label> </label>
</div> </div>
)} )}
@@ -519,49 +520,49 @@ export default function CheckoutClient() {
{(savedAddresses.length === 0 || selectedAddressId === 'new') && ( {(savedAddresses.length === 0 || selectedAddressId === 'new') && (
<div className="mt-6 grid gap-5 md:grid-cols-2"> <div className="mt-6 grid gap-5 md:grid-cols-2">
<label className="space-y-2 md:col-span-2"> <label className="space-y-2 md:col-span-2">
<span className="text-xs font-bold uppercase tracking-[0.18em] text-gray-500">บ้านเลขที่ / ถนน / ซอย *</span> <span className="ui-form-label">บ้านเลขที่ / ถนน / ซอย *</span>
<input <input
required={selectedAddressId === 'new' || savedAddresses.length === 0} required={selectedAddressId === 'new' || savedAddresses.length === 0}
value={addressForm.addressLine} value={addressForm.addressLine}
onChange={(event) => setAddressForm((current) => ({ ...current, addressLine: event.target.value }))} onChange={(event) => setAddressForm((current) => ({ ...current, addressLine: event.target.value }))}
className="w-full rounded-2xl border border-gray-200 bg-pop-bg px-4 py-3 text-sm text-pop-black outline-none transition focus:border-pop-pink" className="ui-form-shell"
placeholder="บ้านเลขที่ หมู่บ้าน ถนน ซอย" placeholder="บ้านเลขที่ หมู่บ้าน ถนน ซอย"
/> />
</label> </label>
<label className="space-y-2"> <label className="space-y-2">
<span className="text-xs font-bold uppercase tracking-[0.18em] text-gray-500">ตำบล/แขวง *</span> <span className="ui-form-label">ตำบล/แขวง *</span>
<input <input
required={selectedAddressId === 'new' || savedAddresses.length === 0} required={selectedAddressId === 'new' || savedAddresses.length === 0}
value={addressForm.subdistrict} value={addressForm.subdistrict}
onChange={(event) => setAddressForm((current) => ({ ...current, subdistrict: event.target.value }))} onChange={(event) => setAddressForm((current) => ({ ...current, subdistrict: event.target.value }))}
className="w-full rounded-2xl border border-gray-200 bg-pop-bg px-4 py-3 text-sm text-pop-black outline-none transition focus:border-pop-pink" className="ui-form-shell"
/> />
</label> </label>
<label className="space-y-2"> <label className="space-y-2">
<span className="text-xs font-bold uppercase tracking-[0.18em] text-gray-500">อำเภอ/เขต *</span> <span className="ui-form-label">อำเภอ/เขต *</span>
<input <input
required={selectedAddressId === 'new' || savedAddresses.length === 0} required={selectedAddressId === 'new' || savedAddresses.length === 0}
value={addressForm.district} value={addressForm.district}
onChange={(event) => setAddressForm((current) => ({ ...current, district: event.target.value }))} onChange={(event) => setAddressForm((current) => ({ ...current, district: event.target.value }))}
className="w-full rounded-2xl border border-gray-200 bg-pop-bg px-4 py-3 text-sm text-pop-black outline-none transition focus:border-pop-pink" className="ui-form-shell"
/> />
</label> </label>
<label className="space-y-2"> <label className="space-y-2">
<span className="text-xs font-bold uppercase tracking-[0.18em] text-gray-500">จังหวัด *</span> <span className="ui-form-label">จังหวัด *</span>
<input <input
required={selectedAddressId === 'new' || savedAddresses.length === 0} required={selectedAddressId === 'new' || savedAddresses.length === 0}
value={addressForm.province} value={addressForm.province}
onChange={(event) => setAddressForm((current) => ({ ...current, province: event.target.value }))} onChange={(event) => setAddressForm((current) => ({ ...current, province: event.target.value }))}
className="w-full rounded-2xl border border-gray-200 bg-pop-bg px-4 py-3 text-sm text-pop-black outline-none transition focus:border-pop-pink" className="ui-form-shell"
/> />
</label> </label>
<label className="space-y-2"> <label className="space-y-2">
<span className="text-xs font-bold uppercase tracking-[0.18em] text-gray-500">รหัสไปรษณีย์ *</span> <span className="ui-form-label">รหัสไปรษณีย์ *</span>
<input <input
required={selectedAddressId === 'new' || savedAddresses.length === 0} required={selectedAddressId === 'new' || savedAddresses.length === 0}
value={addressForm.zipcode} value={addressForm.zipcode}
onChange={(event) => setAddressForm((current) => ({ ...current, zipcode: event.target.value }))} onChange={(event) => setAddressForm((current) => ({ ...current, zipcode: event.target.value }))}
className="w-full rounded-2xl border border-gray-200 bg-pop-bg px-4 py-3 text-sm text-pop-black outline-none transition focus:border-pop-pink" className="ui-form-shell"
placeholder="10110" placeholder="10110"
/> />
</label> </label>
@@ -579,7 +580,7 @@ export default function CheckoutClient() {
<button <button
type="submit" type="submit"
disabled={submitting || loadingSettings} disabled={submitting || loadingSettings}
className="flex w-full items-center justify-between rounded-full bg-pop-black px-6 py-4 text-sm font-bold uppercase tracking-[0.16em] text-white transition hover:bg-pop-pink disabled:cursor-not-allowed disabled:opacity-60 lg:hidden" className="ui-form-inline-button w-full justify-between lg:hidden"
> >
<span className="flex items-center gap-2"> <span className="flex items-center gap-2">
{submitting && <Loader2 className="h-5 w-5 animate-spin" />} {submitting && <Loader2 className="h-5 w-5 animate-spin" />}
@@ -590,55 +591,57 @@ export default function CheckoutClient() {
</form> </form>
<aside className="lg:sticky lg:top-28 lg:self-start"> <aside className="lg:sticky lg:top-28 lg:self-start">
<section className="rounded-3xl bg-white p-6 shadow-brutal md:p-8"> <section className="ui-panel p-6 md:p-8">
<button <button
type="button" type="button"
onClick={() => setSummaryOpen((open) => !open)} onClick={() => setSummaryOpen((open) => !open)}
className="flex w-full items-center justify-between border-b border-gray-100 pb-5 text-left lg:pointer-events-none" className="flex w-full items-center justify-between border-b border-line-primary pb-5 text-left lg:pointer-events-none"
> >
<span> <span>
<span className="block text-xl font-semibold text-pop-black">สรุปรายการ</span> <span className="block text-xl font-semibold text-text-main">สรุปรายการ</span>
<span className="mt-1 block text-sm text-gray-500">{items.length} รายการในตะกร้า</span> <span className="mt-1 block text-sm text-muted-text">{items.length} รายการในตะกร้า</span>
</span> </span>
<span className="font-bold text-pop-pink lg:hidden">{formatPrice(total)}</span> <span className="font-bold text-brand-primary lg:hidden">{formatPrice(total)}</span>
</button> </button>
<div className={`${summaryOpen ? 'block' : 'hidden'} mt-6 space-y-6 lg:block`}> <div className={`${summaryOpen ? 'block' : 'hidden'} mt-6 space-y-6 lg:block`}>
<div className="space-y-4"> <div className="space-y-4">
{items.map((item) => ( {items.map((item) => (
<div key={item.cartItemId} className="flex gap-3"> <div key={item.cartItemId} className="flex gap-3">
<div className="h-16 w-14 shrink-0 overflow-hidden rounded-xl bg-pop-bg"> <div className="relative h-16 w-14 shrink-0 overflow-hidden rounded-xl bg-surface-page">
<img <Image
src={item.productImage || '/images/oil_ozone.png'} src={item.productImage || '/images/oil_ozone.png'}
alt={item.productName} alt={item.productName}
fill
unoptimized
className="h-full w-full object-cover" className="h-full w-full object-cover"
/> />
</div> </div>
<div className="min-w-0 flex-1"> <div className="min-w-0 flex-1">
<p className="text-sm font-bold text-pop-black">{item.productName}</p> <p className="text-sm font-bold text-text-main">{item.productName}</p>
<p className="mt-1 text-xs text-gray-500">{item.variantSize || 'Standard'} x {item.quantity}</p> <p className="mt-1 text-xs text-muted-text">{item.variantSize || 'Standard'} x {item.quantity}</p>
</div> </div>
<p className="text-sm font-bold text-pop-pink">{formatPrice(item.price * item.quantity)}</p> <p className="text-sm font-bold text-brand-primary">{formatPrice(item.price * item.quantity)}</p>
</div> </div>
))} ))}
</div> </div>
<div className="border-t border-gray-100 pt-5"> <div className="border-t border-line-primary pt-5">
{!appliedCoupon ? ( {!appliedCoupon ? (
<div className="space-y-2"> <div className="space-y-2">
<label className="text-xs font-bold uppercase tracking-[0.18em] text-gray-500">คูปองส่วนลด</label> <label className="ui-form-label">คูปองส่วนลด</label>
<div className="flex gap-2"> <div className="flex gap-2">
<input <input
value={couponCode} value={couponCode}
onChange={(event) => setCouponCode(event.target.value.toUpperCase())} onChange={(event) => setCouponCode(event.target.value.toUpperCase())}
placeholder="COUPON" placeholder="COUPON"
className="min-w-0 flex-1 rounded-2xl border border-gray-200 bg-pop-bg px-4 py-3 text-sm uppercase tracking-widest text-pop-black outline-none transition focus:border-pop-pink" className="ui-form-shell min-w-0 flex-1 uppercase tracking-widest"
/> />
<button <button
type="button" type="button"
onClick={applyCoupon} onClick={applyCoupon}
disabled={couponLoading || !couponCode.trim()} disabled={couponLoading || !couponCode.trim()}
className="rounded-2xl bg-pop-black px-4 py-3 text-xs font-bold uppercase tracking-widest text-white transition hover:bg-pop-pink disabled:opacity-50" className="rounded-2xl bg-text-main px-4 py-3 text-xs font-bold uppercase tracking-widest text-white transition hover:bg-brand-primary disabled:opacity-50"
> >
{couponLoading ? <Loader2 className="h-4 w-4 animate-spin" /> : 'ใช้'} {couponLoading ? <Loader2 className="h-4 w-4 animate-spin" /> : 'ใช้'}
</button> </button>
@@ -651,7 +654,7 @@ export default function CheckoutClient() {
<Ticket className="h-4 w-4" /> <Ticket className="h-4 w-4" />
{appliedCoupon} {appliedCoupon}
</span> </span>
<button type="button" onClick={removeCoupon} className="text-xs font-bold uppercase tracking-widest text-gray-500 hover:text-rose-500"> <button type="button" onClick={removeCoupon} className="text-xs font-bold uppercase tracking-widest text-muted-text hover:text-rose-500">
ลบ ลบ
</button> </button>
</div> </div>
@@ -659,12 +662,12 @@ export default function CheckoutClient() {
</div> </div>
{customerPoints > 0 && ( {customerPoints > 0 && (
<div className="space-y-3 border-t border-gray-100 pt-5"> <div className="space-y-3 border-t border-line-primary pt-5">
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<span className="text-xs font-bold uppercase tracking-[0.18em] text-gray-500">คะแนนสะสม</span> <span className="text-xs font-bold uppercase tracking-[0.18em] text-muted-text">คะแนนสะสม</span>
<span className="text-sm font-bold text-pop-black">{customerPoints} points</span> <span className="text-sm font-bold text-text-main">{customerPoints} points</span>
</div> </div>
<label className="flex items-center gap-3 rounded-2xl border border-gray-100 bg-pop-bg p-4 text-sm font-semibold text-pop-black"> <label className="flex items-center gap-3 rounded-2xl border border-line-primary bg-surface-page p-4 text-sm font-semibold text-text-main">
<input <input
type="checkbox" type="checkbox"
checked={usePoints} checked={usePoints}
@@ -672,7 +675,7 @@ export default function CheckoutClient() {
setUsePoints(event.target.checked) setUsePoints(event.target.checked)
if (event.target.checked) setPointsToUse(maxRedeemablePoints) if (event.target.checked) setPointsToUse(maxRedeemablePoints)
}} }}
className="accent-pop-pink" className="accent-brand-primary"
disabled={maxRedeemablePoints <= 0} disabled={maxRedeemablePoints <= 0}
/> />
ใช้คะแนนเป็นส่วนลด ใช้คะแนนเป็นส่วนลด
@@ -684,14 +687,14 @@ export default function CheckoutClient() {
max={maxRedeemablePoints} max={maxRedeemablePoints}
value={visiblePointsToUse} value={visiblePointsToUse}
onChange={(event) => setPointsToUse(Math.min(Number(event.target.value), maxRedeemablePoints))} onChange={(event) => setPointsToUse(Math.min(Number(event.target.value), maxRedeemablePoints))}
className="w-full rounded-2xl border border-gray-200 bg-white px-4 py-3 text-sm text-pop-black outline-none transition focus:border-pop-pink" className="ui-form-shell-light"
/> />
)} )}
</div> </div>
)} )}
<div className="space-y-3 border-t border-gray-100 pt-5 text-sm"> <div className="space-y-3 border-t border-line-primary pt-5 text-sm">
<div className="flex justify-between text-gray-500"> <div className="flex justify-between text-muted-text">
<span>Subtotal</span> <span>Subtotal</span>
<span>{formatPrice(subtotal)}</span> <span>{formatPrice(subtotal)}</span>
</div> </div>
@@ -719,12 +722,12 @@ export default function CheckoutClient() {
<span>-{formatPrice(pointsDiscount)}</span> <span>-{formatPrice(pointsDiscount)}</span>
</div> </div>
)} )}
<div className="flex justify-between text-gray-500"> <div className="flex justify-between text-muted-text">
<span>Shipping</span> <span>Shipping</span>
{loadingSettings ? ( {loadingSettings ? (
<Loader2 className="h-4 w-4 animate-spin" /> <Loader2 className="h-4 w-4 animate-spin" />
) : ( ) : (
<span className={isFreeShipping ? 'text-gray-400 line-through' : ''}>{formatPrice(shippingFee)}</span> <span className={isFreeShipping ? 'text-muted-text/70 line-through' : ''}>{formatPrice(shippingFee)}</span>
)} )}
</div> </div>
{isFreeShipping && ( {isFreeShipping && (
@@ -733,9 +736,9 @@ export default function CheckoutClient() {
<span>-{formatPrice(shippingFee)}</span> <span>-{formatPrice(shippingFee)}</span>
</div> </div>
)} )}
<div className="flex justify-between border-t border-gray-100 pt-4 text-lg font-bold text-pop-black"> <div className="flex justify-between border-t border-line-primary pt-4 text-lg font-bold text-text-main">
<span>Total</span> <span>Total</span>
<span className="text-pop-pink">{formatPrice(total)}</span> <span className="text-brand-primary">{formatPrice(total)}</span>
</div> </div>
</div> </div>
@@ -752,7 +755,7 @@ export default function CheckoutClient() {
type="submit" type="submit"
form="checkout-form" form="checkout-form"
disabled={submitting || loadingSettings} disabled={submitting || loadingSettings}
className="hidden w-full items-center justify-between rounded-full bg-pop-black px-6 py-4 text-sm font-bold uppercase tracking-[0.16em] text-white transition hover:bg-pop-pink disabled:cursor-not-allowed disabled:opacity-60 lg:flex" className="hidden w-full items-center justify-between rounded-full bg-text-main px-6 py-4 text-sm font-bold uppercase tracking-[0.16em] text-white transition hover:bg-brand-primary disabled:cursor-not-allowed disabled:opacity-60 lg:flex"
> >
<span className="flex items-center gap-2"> <span className="flex items-center gap-2">
{submitting && <Loader2 className="h-5 w-5 animate-spin" />} {submitting && <Loader2 className="h-5 w-5 animate-spin" />}
apps/website/src/components/ClientProviders.tsx
+9
View File
@@ -4,6 +4,9 @@ import CartDrawer from './CartDrawer';
import ScrollToTop from './ScrollToTop'; import ScrollToTop from './ScrollToTop';
import { useEffect, type ReactNode } from 'react'; import { useEffect, type ReactNode } from 'react';
import i18n from '../lib/i18n'; import i18n from '../lib/i18n';
import { useCartStore } from '../store/cartStore';
import { useWishlistStore } from '../store/wishlistStore';
import { useAuthStore } from '../store/authStore';
export default function ClientProviders({ children }: { children: ReactNode }) { export default function ClientProviders({ children }: { children: ReactNode }) {
useEffect(() => { useEffect(() => {
@@ -17,6 +20,12 @@ export default function ClientProviders({ children }: { children: ReactNode }) {
} }
}, []) }, [])
useEffect(() => {
void useCartStore.persist.rehydrate()
void useWishlistStore.persist.rehydrate()
void useAuthStore.persist.rehydrate()
}, [])
return ( return (
<> <>
<ScrollToTop /> <ScrollToTop />
apps/website/src/components/Footer.tsx
+28 -23
View File
@@ -1,5 +1,6 @@
"use client"; "use client";
import Image from 'next/image'
import { useState, useEffect } from 'react' import { useState, useEffect } from 'react'
import Link from './LocalizedLink' import Link from './LocalizedLink'
import type { Category, MenuItem, StoreSettings } from '@homaroma/types' import type { Category, MenuItem, StoreSettings } from '@homaroma/types'
@@ -55,15 +56,19 @@ export default function Footer({
const brandName = settings?.brandName || '' const brandName = settings?.brandName || ''
return ( return (
<footer className="border-t border-gray-200 bg-white px-6 py-20 text-pop-black"> <footer className="border-t border-line-primary/20 bg-surface-card px-6 py-20 text-text-main">
<div className="mx-auto grid max-w-7xl grid-cols-1 gap-12 md:grid-cols-4"> <div className="mx-auto grid max-w-7xl grid-cols-1 gap-12 md:grid-cols-4">
{/* Col 1 — Brand */} {/* Col 1 — Brand */}
<div className="space-y-6"> <div className="space-y-6">
<div className="text-2xl font-bold tracking-widest"> <div className="text-2xl font-bold tracking-widest">
{settings?.logoUrl ? <img src={settings.logoUrl} alt={brandName} className="h-8 md:h-10 object-contain" /> : brandName} {settings?.logoUrl ? (
<Image src={settings.logoUrl} alt={brandName} width={160} height={40} unoptimized className="h-8 w-auto object-contain md:h-10" />
) : (
brandName
)}
</div> </div>
<p className="text-sm leading-relaxed text-gray-600"> <p className="text-sm leading-relaxed ui-muted-text">
{resolveLocalized(settings?.footerDescription, effectiveLang) || t('footer.catchphrase')} {resolveLocalized(settings?.footerDescription, effectiveLang) || t('footer.catchphrase')}
</p> </p>
<div className="flex gap-4"> <div className="flex gap-4">
@@ -74,7 +79,7 @@ export default function Footer({
href={settings!.facebookUrl} href={settings!.facebookUrl}
target="_blank" target="_blank"
rel="noreferrer" rel="noreferrer"
className="flex h-9 w-9 items-center justify-center rounded-full border border-gray-200 bg-pop-bg text-[10px] font-bold text-pop-black transition-all duration-300 hover:border-pop-pink hover:bg-pop-pink hover:text-white" className="ui-footer-social"
> >
FB FB
</a> </a>
@@ -84,7 +89,7 @@ export default function Footer({
href={settings!.instagramUrl} href={settings!.instagramUrl}
target="_blank" target="_blank"
rel="noreferrer" rel="noreferrer"
className="flex h-9 w-9 items-center justify-center rounded-full border border-gray-200 bg-pop-bg text-[10px] font-bold text-pop-black transition-all duration-300 hover:border-pop-pink hover:bg-pop-pink hover:text-white" className="ui-footer-social"
> >
IG IG
</a> </a>
@@ -94,7 +99,7 @@ export default function Footer({
href={settings!.tiktokUrl} href={settings!.tiktokUrl}
target="_blank" target="_blank"
rel="noreferrer" rel="noreferrer"
className="flex h-9 w-9 items-center justify-center rounded-full border border-gray-200 bg-pop-bg text-[10px] font-bold text-pop-black transition-all duration-300 hover:border-pop-pink hover:bg-pop-pink hover:text-white" className="ui-footer-social"
> >
TT TT
</a> </a>
@@ -105,7 +110,7 @@ export default function Footer({
<a <a
key={s} key={s}
href="#" href="#"
className="flex h-9 w-9 items-center justify-center rounded-full border border-gray-200 bg-pop-bg text-[10px] font-bold text-pop-black transition-all duration-300 hover:border-pop-pink hover:bg-pop-pink hover:text-white" className="ui-footer-social"
> >
{s} {s}
</a> </a>
@@ -116,22 +121,22 @@ export default function Footer({
{/* Col 2 — Explore */} {/* Col 2 — Explore */}
<div className="space-y-4"> <div className="space-y-4">
<h4 className="text-xs font-bold uppercase tracking-widest text-pop-black">{t('footer.explore')}</h4> <h4 className="ui-menu-title">{t('footer.explore')}</h4>
<div className="flex flex-col space-y-2 text-sm text-gray-600"> <div className="flex flex-col space-y-2 text-sm text-muted-text">
{exploreMenu.length > 0 ? ( {exploreMenu.length > 0 ? (
exploreMenu.map((item) => ( exploreMenu.map((item) => (
<Link key={item.id} href={item.url} className="transition-colors hover:text-pop-pink"> <Link key={item.id} href={item.url} className="ui-footer-link">
{translateMenuLabel(item)} {translateMenuLabel(item)}
</Link> </Link>
)) ))
) : ( ) : (
<> <>
<Link href="/" className="transition-colors hover:text-pop-pink">{t('nav.home')}</Link> <Link href="/" className="ui-footer-link">{t('nav.home')}</Link>
<Link href="/shop" className="transition-colors hover:text-pop-pink">{t('nav.shop')}</Link> <Link href="/shop" className="ui-footer-link">{t('nav.shop')}</Link>
<Link href="/scent-guide" className="transition-colors hover:text-pop-pink">{t('nav.scentGuide')}</Link> <Link href="/scent-guide" className="ui-footer-link">{t('nav.scentGuide')}</Link>
<Link href="/about" className="transition-colors hover:text-pop-pink">{t('nav.about')}</Link> <Link href="/about" className="ui-footer-link">{t('nav.about')}</Link>
<Link href="/contact" className="transition-colors hover:text-pop-pink">{t('nav.contact')}</Link> <Link href="/contact" className="ui-footer-link">{t('nav.contact')}</Link>
<Link href="/faq" className="transition-colors hover:text-pop-pink">{t('nav.faq')}</Link> <Link href="/faq" className="ui-footer-link">{t('nav.faq')}</Link>
</> </>
)} )}
</div> </div>
@@ -139,10 +144,10 @@ export default function Footer({
{/* Col 3 — Collections */} {/* Col 3 — Collections */}
<div className="space-y-4"> <div className="space-y-4">
<h4 className="text-xs font-bold uppercase tracking-widest text-pop-black">{t('nav.collections')}</h4> <h4 className="ui-menu-title">{t('nav.collections')}</h4>
<div className="flex flex-col space-y-2 text-sm text-gray-600"> <div className="flex flex-col space-y-2 text-sm text-muted-text">
{categories.map((c) => ( {categories.map((c) => (
<Link key={c.id} href={`/category/${c.id}`} className="transition-colors hover:text-pop-pink"> <Link key={c.id} href={`/category/${c.id}`} className="ui-footer-link">
{resolveLocalized(c.name, effectiveLang)} {resolveLocalized(c.name, effectiveLang)}
</Link> </Link>
))} ))}
@@ -151,7 +156,7 @@ export default function Footer({
{/* Col 4 — Support & Legal */} {/* Col 4 — Support & Legal */}
<div className="space-y-4"> <div className="space-y-4">
<h4 className="text-xs font-bold uppercase tracking-widest text-pop-black"> <h4 className="ui-menu-title">
{settings?.footerSupportHeading {settings?.footerSupportHeading
? (typeof settings.footerSupportHeading === 'string' ? (typeof settings.footerSupportHeading === 'string'
? settings.footerSupportHeading ? settings.footerSupportHeading
@@ -160,16 +165,16 @@ export default function Footer({
|| 'Support & Legal') || 'Support & Legal')
: t('footer.support', 'Support & Legal')} : t('footer.support', 'Support & Legal')}
</h4> </h4>
<div className="flex flex-col space-y-2 text-sm text-gray-600"> <div className="flex flex-col space-y-2 text-sm text-muted-text">
{supportMenu.map((item) => ( {supportMenu.map((item) => (
<Link key={item.id} href={item.url} className="transition-colors hover:text-pop-pink"> <Link key={item.id} href={item.url} className="ui-footer-link">
{translateMenuLabel(item)} {translateMenuLabel(item)}
</Link> </Link>
))} ))}
</div> </div>
<div className="pt-4"> <div className="pt-4">
<p className="text-[10px] uppercase tracking-widest text-gray-500"> <p className="text-[10px] uppercase tracking-widest text-muted-text">
{settings?.footerCopyrightText {settings?.footerCopyrightText
? (typeof settings.footerCopyrightText === 'string' ? (typeof settings.footerCopyrightText === 'string'
? settings.footerCopyrightText ? settings.footerCopyrightText
apps/website/src/components/LocalizedNotFound.tsx
+17 -17
View File
@@ -86,33 +86,33 @@ export default function LocalizedNotFound({ lang }: LocalizedNotFoundProps) {
const text = getCopy(lang) const text = getCopy(lang)
return ( return (
<section className="min-h-[70vh] bg-pop-bg px-6 py-16 text-pop-black md:py-24"> <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 className="mx-auto grid max-w-6xl items-center gap-12 lg:grid-cols-[1.05fr_0.95fr]">
<div> <div>
<div className="mb-8 inline-flex items-center gap-3 rounded-full border border-pop-pink/20 bg-white px-4 py-2 shadow-brutal"> <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" /> <Image src="/favicon.svg" alt="" width={28} height={28} aria-hidden="true" />
<span className="text-xs font-bold uppercase tracking-[0.2em] text-pop-pink">{text.eyebrow}</span> <span className="ui-eyebrow">{text.eyebrow}</span>
</div> </div>
<p className="text-8xl font-black leading-none text-pop-pink/20 md:text-9xl">{text.hint}</p> <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-pop-black md:text-6xl"> <h1 className="mt-6 max-w-3xl text-4xl font-semibold leading-tight text-text-main md:text-6xl">
{text.title} {text.title}
</h1> </h1>
<p className="mt-6 max-w-2xl text-base leading-8 text-gray-600 md:text-lg"> <p className="mt-6 max-w-2xl text-base leading-8 text-muted-text md:text-lg">
{text.description} {text.description}
</p> </p>
<div className="mt-10 flex flex-col gap-3 sm:flex-row"> <div className="mt-10 flex flex-col gap-3 sm:flex-row">
<Link <Link
href={getPathWithLocale('/', lang)} href={getPathWithLocale('/', lang)}
className="inline-flex items-center justify-center gap-2 rounded-full bg-pop-black px-6 py-3 text-sm font-bold text-white transition hover:bg-pop-pink" className="ui-button-primary px-6 py-3"
> >
<Home className="h-4 w-4" /> <Home className="h-4 w-4" />
{text.home} {text.home}
</Link> </Link>
<Link <Link
href={getPathWithLocale('/shop', lang)} href={getPathWithLocale('/shop', lang)}
className="inline-flex items-center justify-center gap-2 rounded-full border border-pop-pink/40 bg-white px-6 py-3 text-sm font-bold text-pop-black transition hover:border-pop-pink hover:text-pop-pink" className="ui-button-brand bg-surface-card text-text-main hover:bg-surface-page hover:text-brand-primary"
> >
<ShoppingBag className="h-4 w-4" /> <ShoppingBag className="h-4 w-4" />
{text.shop} {text.shop}
@@ -120,36 +120,36 @@ export default function LocalizedNotFound({ lang }: LocalizedNotFoundProps) {
</div> </div>
</div> </div>
<div className="rounded-[2rem] border border-white bg-white/80 p-6 shadow-brutal backdrop-blur md:p-8"> <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-pop-bg p-6"> <div className="rounded-[1.5rem] bg-surface-page p-6">
<div className="flex items-center gap-3 border-b border-pop-black/10 pb-5"> <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-white text-pop-pink shadow-sm"> <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" /> <Search className="h-5 w-5" />
</div> </div>
<div> <div>
<p className="text-xs font-bold uppercase tracking-[0.18em] text-gray-500">{text.hint}</p> <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-pop-black">{text.search}</p> <p className="mt-1 text-sm font-semibold text-text-main">{text.search}</p>
</div> </div>
</div> </div>
<div className="mt-6 grid gap-3"> <div className="mt-6 grid gap-3">
<Link <Link
href={getPathWithLocale('/search', lang)} href={getPathWithLocale('/search', lang)}
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" 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> <span>{text.search}</span>
<ArrowRight className="h-4 w-4 transition group-hover:translate-x-1" /> <ArrowRight className="h-4 w-4 transition group-hover:translate-x-1" />
</Link> </Link>
<Link <Link
href={getPathWithLocale('/scent-guide', lang)} href={getPathWithLocale('/scent-guide', lang)}
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" 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> <span>{text.guide}</span>
<ArrowRight className="h-4 w-4 transition group-hover:translate-x-1" /> <ArrowRight className="h-4 w-4 transition group-hover:translate-x-1" />
</Link> </Link>
<Link <Link
href={getPathWithLocale('/contact', lang)} href={getPathWithLocale('/contact', lang)}
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" 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> <span>{text.contact}</span>
<ArrowRight className="h-4 w-4 transition group-hover:translate-x-1" /> <ArrowRight className="h-4 w-4 transition group-hover:translate-x-1" />
apps/website/src/components/Navbar.tsx
+37 -29
View File
@@ -1,5 +1,6 @@
"use client" "use client"
import Image from 'next/image'
import Link from './LocalizedLink' import Link from './LocalizedLink'
import { getPathWithoutLocale, getPathWithLocale } from '../lib/locales' import { getPathWithoutLocale, getPathWithLocale } from '../lib/locales'
import { useRouter, usePathname } from 'next/navigation' import { useRouter, usePathname } from 'next/navigation'
@@ -176,7 +177,7 @@ export default function Navbar({ categories = [], initialMenu = [], settings = n
} }
} }
const iconButtonClass = 'group rounded-full p-2 text-pop-black transition-all hover:bg-pop-pink/10 hover:text-pop-pink md:p-2.5' const iconButtonClass = 'group ui-icon-button'
const activeLanguage = LANGUAGES.find((language) => lang.startsWith(language.code) || language.code.startsWith(lang)) ?? LANGUAGES[0] const activeLanguage = LANGUAGES.find((language) => lang.startsWith(language.code) || language.code.startsWith(lang)) ?? LANGUAGES[0]
const brandName = settings?.brandName || '' const brandName = settings?.brandName || ''
@@ -187,8 +188,8 @@ export default function Navbar({ categories = [], initialMenu = [], settings = n
data-scrolled={scrolled} data-scrolled={scrolled}
className={`global-navbar fixed top-0 z-50 w-full border-b border-black/5 px-4 py-3.5 transition-all duration-300 md:px-6 md:py-4 ${ className={`global-navbar fixed top-0 z-50 w-full border-b border-black/5 px-4 py-3.5 transition-all duration-300 md:px-6 md:py-4 ${
scrolled scrolled
? 'bg-white/95 shadow-lg shadow-black/5 backdrop-blur-xl' ? 'bg-surface-page/95 shadow-lg shadow-black/5 backdrop-blur-xl'
: 'bg-white/80 backdrop-blur-xl md:bg-[#F9F8F5] md:backdrop-blur-none' : 'bg-surface-page/80 backdrop-blur-xl md:bg-surface-nav-rest md:backdrop-blur-none'
}`} }`}
> >
<div className="flex w-full items-center justify-between gap-4"> <div className="flex w-full items-center justify-between gap-4">
@@ -196,9 +197,13 @@ export default function Navbar({ categories = [], initialMenu = [], settings = n
<Link <Link
href="/" href="/"
onClick={() => setMobileOpen(false)} onClick={() => setMobileOpen(false)}
className="shrink-0 text-xl font-bold uppercase italic tracking-widest text-pop-black md:text-2xl" className="ui-brand-wordmark"
> >
{settings?.logoUrl ? <img src={settings.logoUrl} alt={brandName} className="h-8 md:h-10 object-contain" /> : brandName} {settings?.logoUrl ? (
<Image src={settings.logoUrl} alt={brandName} width={160} height={40} unoptimized className="h-8 w-auto object-contain md:h-10" />
) : (
brandName
)}
</Link> </Link>
</div> </div>
@@ -226,7 +231,7 @@ export default function Navbar({ categories = [], initialMenu = [], settings = n
> >
<Heart className="h-4 w-4 transition-colors" /> <Heart className="h-4 w-4 transition-colors" />
{wishlistCount > 0 && ( {wishlistCount > 0 && (
<span className="absolute -right-1 -top-1 flex h-4 w-4 items-center justify-center rounded-full bg-rose-500 text-[9px] font-bold text-white"> <span className="absolute -right-1 -top-1 flex h-4 w-4 items-center justify-center rounded-full bg-brand-primary text-[9px] font-bold text-white">
{wishlistCount} {wishlistCount}
</span> </span>
)} )}
@@ -242,19 +247,19 @@ export default function Navbar({ categories = [], initialMenu = [], settings = n
> >
<ShoppingBag className="h-4 w-4 transition-colors" /> <ShoppingBag className="h-4 w-4 transition-colors" />
{cartCount > 0 && ( {cartCount > 0 && (
<span className="absolute -right-1 -top-1 flex h-4 w-4 items-center justify-center rounded-full bg-rose-500 text-[9px] font-bold text-white"> <span className="absolute -right-1 -top-1 flex h-4 w-4 items-center justify-center rounded-full bg-brand-primary text-[9px] font-bold text-white">
{cartCount} {cartCount}
</span> </span>
)} )}
</button> </button>
<div className="group relative hidden items-center md:flex"> <div className="group relative hidden items-center md:flex">
<button className="flex items-center gap-1.5 rounded-full border border-pop-pink/30 bg-white px-3 py-2 text-[10px] font-bold uppercase tracking-wider text-pop-black transition-all hover:bg-pop-bg hover:text-pop-pink"> <button className="ui-nav-chip">
<Globe className="h-3.5 w-3.5" strokeWidth={1.5} /> <Globe className="h-3.5 w-3.5" strokeWidth={1.5} />
{activeLanguage.short} {activeLanguage.short}
</button> </button>
<div className="pointer-events-none absolute right-0 top-full w-36 pt-2 opacity-0 transition-all duration-300 group-hover:pointer-events-auto group-hover:opacity-100"> <div className="pointer-events-none absolute right-0 top-full w-36 pt-2 opacity-0 transition-all duration-300 group-hover:pointer-events-auto group-hover:opacity-100">
<div className="space-y-0.5 overflow-hidden rounded-xl border border-pop-black/10 bg-white/95 p-1.5 shadow-2xl backdrop-blur-xl"> <div className="ui-nav-panel space-y-0.5 p-1.5">
{LANGUAGES.map((language) => { {LANGUAGES.map((language) => {
const isActive = lang.startsWith(language.code) || language.code.startsWith(lang) const isActive = lang.startsWith(language.code) || language.code.startsWith(lang)
return ( return (
@@ -262,7 +267,7 @@ export default function Navbar({ categories = [], initialMenu = [], settings = n
key={language.code} key={language.code}
onClick={() => changeLanguage(language.code)} onClick={() => changeLanguage(language.code)}
className={`flex w-full items-center justify-between rounded-lg px-3 py-2.5 text-xs font-medium transition-colors ${ className={`flex w-full items-center justify-between rounded-lg px-3 py-2.5 text-xs font-medium transition-colors ${
isActive ? 'bg-pop-bg font-bold text-pop-black' : 'text-pop-black/65 hover:bg-pop-bg hover:text-pop-pink' isActive ? 'bg-surface-page font-bold text-text-main' : 'text-text-main/65 hover:bg-surface-page hover:text-brand-primary'
}`} }`}
> >
<span>{language.label}</span> <span>{language.label}</span>
@@ -278,13 +283,16 @@ export default function Navbar({ categories = [], initialMenu = [], settings = n
{customer ? ( {customer ? (
<Link href="/profile" className="ml-1"> <Link href="/profile" className="ml-1">
{customer.pictureUrl ? ( {customer.pictureUrl ? (
<img <Image
src={customer.pictureUrl} src={customer.pictureUrl}
alt={customer.displayName || 'Profile'} alt={customer.displayName || 'Profile'}
className="h-9 w-9 rounded-full border-2 border-pop-pink/30 object-cover" width={36}
height={36}
unoptimized
className="h-9 w-9 rounded-full border-2 border-brand-primary/30 object-cover"
/> />
) : ( ) : (
<span className="flex h-9 w-9 items-center justify-center rounded-full border-2 border-pop-pink/30 text-pop-black/65"> <span className="flex h-9 w-9 items-center justify-center rounded-full border-2 border-brand-primary/30 text-text-main/65">
<User className="h-4 w-4" /> <User className="h-4 w-4" />
</span> </span>
)} )}
@@ -292,7 +300,7 @@ export default function Navbar({ categories = [], initialMenu = [], settings = n
) : ( ) : (
<button <button
onClick={loginWithLine} onClick={loginWithLine}
className="ml-2 rounded-full bg-[#00B900] px-4 py-2 text-xs font-bold uppercase tracking-widest text-white shadow-sm transition-all duration-300 hover:bg-[#009900]" className="ui-button-line ml-2"
> >
{t('nav.login', 'เข้าสู่ระบบด้วย LINE')} {t('nav.login', 'เข้าสู่ระบบด้วย LINE')}
</button> </button>
@@ -323,36 +331,36 @@ export default function Navbar({ categories = [], initialMenu = [], settings = n
{searchOpen && ( {searchOpen && (
<div <div
className="fixed inset-0 z-[100] flex flex-col items-center bg-pop-bg/95 px-4 pt-24 backdrop-blur-xl md:px-6 md:pt-32" className="fixed inset-0 z-[100] flex flex-col items-center bg-surface-page/95 px-4 pt-24 backdrop-blur-xl md:px-6 md:pt-32"
onClick={(e) => { if (e.target === e.currentTarget) setSearchOpen(false) }} onClick={(e) => { if (e.target === e.currentTarget) setSearchOpen(false) }}
> >
<div className="w-full max-w-2xl space-y-6"> <div className="w-full max-w-2xl space-y-6">
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<p className="text-xs font-semibold uppercase tracking-widest text-pop-black/55">{t('nav.search.title')}</p> <p className="text-xs font-semibold uppercase tracking-widest text-text-main/55">{t('nav.search.title')}</p>
<button onClick={() => setSearchOpen(false)} className="rounded-full bg-white p-2 text-pop-black/65 transition hover:text-pop-pink"> <button onClick={() => setSearchOpen(false)} className="rounded-full bg-surface-page p-2 text-text-main/65 transition hover:text-brand-primary">
<X className="h-4 w-4" /> <X className="h-4 w-4" />
</button> </button>
</div> </div>
<form onSubmit={handleSearch}> <form onSubmit={handleSearch}>
<div className="flex overflow-hidden rounded-2xl border-2 border-pop-black/10 bg-white shadow-sm transition-colors focus-within:border-pop-pink"> <div className="flex overflow-hidden rounded-2xl border-2 border-text-main/10 bg-surface-card shadow-sm transition-colors focus-within:border-brand-primary">
<Search className="m-4 h-5 w-5 shrink-0 text-pop-black/35" /> <Search className="m-4 h-5 w-5 shrink-0 text-text-main/35" />
<input <input
type="text" type="text"
value={searchQuery} value={searchQuery}
onChange={(e) => setSearchQuery(e.target.value)} onChange={(e) => setSearchQuery(e.target.value)}
placeholder={t('nav.search.placeholder')} placeholder={t('nav.search.placeholder')}
className="w-full border-none bg-transparent p-4 pl-0 text-lg text-pop-black outline-none placeholder:text-pop-black/35 md:text-xl" className="w-full border-none bg-transparent p-4 pl-0 text-lg text-text-main outline-none placeholder:text-text-main/35 md:text-xl"
autoFocus autoFocus
/> />
<button type="submit" className="shrink-0 bg-pop-black px-4 text-xs font-bold uppercase tracking-widest text-white transition-colors hover:bg-pop-pink md:px-6"> <button type="submit" className="shrink-0 bg-text-main px-4 text-xs font-bold uppercase tracking-widest text-white transition-colors hover:bg-brand-primary md:px-6">
Go Go
</button> </button>
</div> </div>
</form> </form>
<div> <div>
<p className="mb-3 text-xs font-semibold uppercase tracking-widest text-pop-black/55">{t('nav.search.quickLinks')}</p> <p className="mb-3 text-xs font-semibold uppercase tracking-widest text-text-main/55">{t('nav.search.quickLinks')}</p>
<div className="flex flex-wrap gap-2"> <div className="flex flex-wrap gap-2">
{[ {[
...categories.map((category) => ({ label: resolveLocalized(category.name, lang), to: `/category/${category.id}` })), ...categories.map((category) => ({ label: resolveLocalized(category.name, lang), to: `/category/${category.id}` })),
@@ -363,7 +371,7 @@ export default function Navbar({ categories = [], initialMenu = [], settings = n
key={item.to} key={item.to}
href={item.to} href={item.to}
onClick={() => setSearchOpen(false)} onClick={() => setSearchOpen(false)}
className="rounded-full border border-pop-black/10 bg-white px-4 py-1.5 text-xs font-semibold text-pop-black/65 transition-all hover:border-pop-pink hover:text-pop-pink" className="rounded-full border border-text-main/10 bg-surface-card px-4 py-1.5 text-xs font-semibold text-text-main/65 transition-all hover:border-brand-primary hover:text-brand-primary"
> >
{item.label} {item.label}
</Link> </Link>
@@ -376,24 +384,24 @@ export default function Navbar({ categories = [], initialMenu = [], settings = n
<div className={`fixed inset-0 z-[110] transition-all duration-300 md:hidden ${langSheetOpen ? 'visible' : 'invisible'}`}> <div className={`fixed inset-0 z-[110] transition-all duration-300 md:hidden ${langSheetOpen ? 'visible' : 'invisible'}`}>
<div <div
className={`absolute inset-0 bg-pop-black/40 backdrop-blur-sm transition-opacity duration-300 ${langSheetOpen ? 'opacity-100' : 'opacity-0'}`} className={`absolute inset-0 bg-text-main/40 backdrop-blur-sm transition-opacity duration-300 ${langSheetOpen ? 'opacity-100' : 'opacity-0'}`}
onClick={() => setLangSheetOpen(false)} onClick={() => setLangSheetOpen(false)}
/> />
<div <div
className={`absolute bottom-0 left-0 right-0 rounded-t-3xl bg-white shadow-2xl transition-transform duration-300 ${ className={`absolute bottom-0 left-0 right-0 rounded-t-3xl bg-surface-card shadow-2xl transition-transform duration-300 ${
langSheetOpen ? 'translate-y-0' : 'translate-y-full' langSheetOpen ? 'translate-y-0' : 'translate-y-full'
}`} }`}
> >
<div className="flex justify-center pb-1 pt-3"> <div className="flex justify-center pb-1 pt-3">
<div className="h-1.5 w-12 rounded-full bg-pop-black/15" /> <div className="h-1.5 w-12 rounded-full bg-text-main/15" />
</div> </div>
<div className="px-6 pb-6 pt-2"> <div className="px-6 pb-6 pt-2">
<div className="mb-4 flex items-center justify-between"> <div className="mb-4 flex items-center justify-between">
<h3 className="flex items-center gap-2 text-sm font-bold uppercase tracking-widest text-pop-black"> <h3 className="flex items-center gap-2 text-sm font-bold uppercase tracking-widest text-text-main">
<Globe className="h-4 w-4" /> <Globe className="h-4 w-4" />
Select Language Select Language
</h3> </h3>
<button onClick={() => setLangSheetOpen(false)} className="rounded-full p-2 text-pop-black/65 hover:bg-pop-bg"> <button onClick={() => setLangSheetOpen(false)} className="rounded-full p-2 text-text-main/65 hover:bg-surface-page">
<X className="h-4 w-4" /> <X className="h-4 w-4" />
</button> </button>
</div> </div>
@@ -405,7 +413,7 @@ export default function Navbar({ categories = [], initialMenu = [], settings = n
key={language.code} key={language.code}
onClick={() => changeLanguage(language.code)} onClick={() => changeLanguage(language.code)}
className={`flex w-full items-center justify-between rounded-xl border border-transparent px-4 py-4 font-medium transition-colors ${ className={`flex w-full items-center justify-between rounded-xl border border-transparent px-4 py-4 font-medium transition-colors ${
isActive ? 'border-pop-pink/20 bg-pop-bg font-bold text-pop-black' : 'bg-pop-bg/40 text-pop-black/65 hover:bg-pop-bg' isActive ? 'border-brand-primary/20 bg-surface-page font-bold text-text-main' : 'bg-surface-page/40 text-text-main/65 hover:bg-surface-page'
}`} }`}
> >
<span className="text-base">{language.label}</span> <span className="text-base">{language.label}</span>
apps/website/src/components/ProductCard.tsx
+14 -11
View File
@@ -1,5 +1,6 @@
"use client" "use client"
import Image from 'next/image'
import Link from './LocalizedLink' import Link from './LocalizedLink'
import type { Product } from '@homaroma/types' import type { Product } from '@homaroma/types'
import { getCategoryImage, formatPrice } from '@homaroma/types' import { getCategoryImage, formatPrice } from '@homaroma/types'
@@ -19,17 +20,19 @@ export default function ProductCard({ product }: ProductCardProps) {
const firstPrice = product.variants[0]?.price ?? product.price const firstPrice = product.variants[0]?.price ?? product.price
return ( return (
<article className="group flex h-full flex-col overflow-hidden rounded-2xl bg-white shadow-brutal transition duration-300 hover:-translate-y-1 hover:shadow-brutal-hover"> <article className="ui-card ui-card-hover group flex h-full flex-col overflow-hidden">
<div className="relative aspect-[4/3] overflow-hidden bg-pop-bg"> <div className="relative aspect-[4/3] overflow-hidden bg-surface-page">
<WishlistButton product={product} /> <WishlistButton product={product} />
<Link href={`/products/${product.id}`} className="block h-full w-full"> <Link href={`/products/${product.id}`} className="block h-full w-full">
<img <Image
src={imageUrl} src={imageUrl}
className="h-full w-full object-cover transition duration-700 group-hover:scale-105"
alt={productName} alt={productName}
fill
unoptimized
className="h-full w-full object-cover transition duration-700 group-hover:scale-105"
/> />
{categoryName && ( {categoryName && (
<span className="absolute left-4 top-4 rounded-full bg-white/90 px-3 py-1 text-[10px] font-bold uppercase tracking-widest text-pop-black shadow-sm"> <span className="ui-status-badge absolute left-4 top-4 border-line-primary/20 bg-surface-card/90 px-3 py-1 text-[10px] uppercase tracking-widest text-text-main shadow-sm">
{categoryName} {categoryName}
</span> </span>
)} )}
@@ -38,13 +41,13 @@ export default function ProductCard({ product }: ProductCardProps) {
<div className="flex flex-1 flex-col gap-4 p-5"> <div className="flex flex-1 flex-col gap-4 p-5">
<div className="space-y-1"> <div className="space-y-1">
<h3 className="line-clamp-2 text-lg font-semibold leading-snug text-pop-black"> <h3 className="line-clamp-2 text-lg font-semibold leading-snug text-text-main">
<Link href={`/products/${product.id}`} className="transition hover:text-pop-pink"> <Link href={`/products/${product.id}`} className="transition hover:text-brand-primary">
{productName} {productName}
</Link> </Link>
</h3> </h3>
{product.scent.name && ( {product.scent.name && (
<p className="text-xs font-semibold uppercase tracking-widest text-gray-400"> <p className="text-xs font-semibold uppercase tracking-widest text-muted-text/70">
{product.scent.name} {product.scent.name}
</p> </p>
)} )}
@@ -53,7 +56,7 @@ export default function ProductCard({ product }: ProductCardProps) {
{product.variants.length > 0 && ( {product.variants.length > 0 && (
<div className="flex flex-wrap gap-2"> <div className="flex flex-wrap gap-2">
{product.variants.slice(0, 3).map((variant) => ( {product.variants.slice(0, 3).map((variant) => (
<span key={variant.id} className="rounded-full bg-pop-bg px-3 py-1 text-xs font-semibold text-gray-600"> <span key={variant.id} className="rounded-full bg-surface-page px-3 py-1 text-xs font-semibold text-muted-text">
{variant.size} {variant.size}
</span> </span>
))} ))}
@@ -61,10 +64,10 @@ export default function ProductCard({ product }: ProductCardProps) {
)} )}
<div className="mt-auto flex items-center justify-between gap-4"> <div className="mt-auto flex items-center justify-between gap-4">
<span className="text-lg font-bold text-pop-pink">{formatPrice(firstPrice)}</span> <span className="text-lg font-bold text-brand-primary">{formatPrice(firstPrice)}</span>
<Link <Link
href={`/products/${product.id}`} href={`/products/${product.id}`}
className="rounded-full bg-pop-black px-4 py-2 text-xs font-bold uppercase tracking-widest text-white transition hover:bg-pop-pink" className="ui-button-primary px-4 py-2 text-[10px]"
> >
View View
</Link> </Link>
apps/website/src/components/ProfileClient.tsx
+72 -71
View File
@@ -1,5 +1,6 @@
"use client"; "use client";
import Image from 'next/image'
import Link from './LocalizedLink' import Link from './LocalizedLink'
import { useEffect, useState } from 'react' import { useEffect, useState } from 'react'
import { import {
@@ -78,7 +79,7 @@ function statusClass(status: string) {
if (status === 'PAID' || status === 'PROCESSING') return 'border-emerald-100 bg-emerald-50 text-emerald-700' if (status === 'PAID' || status === 'PROCESSING') return 'border-emerald-100 bg-emerald-50 text-emerald-700'
if (status === 'SHIPPED' || status === 'DELIVERED') return 'border-sky-100 bg-sky-50 text-sky-700' if (status === 'SHIPPED' || status === 'DELIVERED') return 'border-sky-100 bg-sky-50 text-sky-700'
if (status === 'CANCELLED') return 'border-rose-100 bg-rose-50 text-rose-700' if (status === 'CANCELLED') return 'border-rose-100 bg-rose-50 text-rose-700'
return 'border-gray-100 bg-gray-50 text-gray-700' return 'border-line-primary/20 bg-surface-page text-text-main/80'
} }
function formatAddress(address: CustomerAddress) { function formatAddress(address: CustomerAddress) {
@@ -284,12 +285,12 @@ export default function ProfileClient() {
if (!customer) { if (!customer) {
return ( return (
<section className="mx-auto max-w-md rounded-3xl bg-white p-10 text-center shadow-brutal"> <section className="ui-panel mx-auto max-w-md p-10 text-center">
<div className="mx-auto mb-6 flex h-20 w-20 items-center justify-center rounded-full bg-pop-bg text-pop-pink"> <div className="ui-avatar-shell mx-auto mb-6 text-brand-primary">
<User className="h-10 w-10" /> <User className="h-10 w-10" />
</div> </div>
<h1 className="text-3xl font-semibold text-pop-black">เข้าสู่ระบบสมาชิก</h1> <h1 className="text-3xl font-semibold text-text-main">เข้าสู่ระบบสมาชิก</h1>
<p className="mt-3 text-sm leading-relaxed text-gray-600"> <p className="mt-3 text-sm leading-relaxed text-muted-text">
ล็อกอินเพื่อตรวจสอบประวัติคำสั่งซื้อ สะสมคะแนนสมาชิก และบันทึกสมุดที่อยู่จัดส่งสินค้า ล็อกอินเพื่อตรวจสอบประวัติคำสั่งซื้อ สะสมคะแนนสมาชิก และบันทึกสมุดที่อยู่จัดส่งสินค้า
</p> </p>
{error && ( {error && (
@@ -300,12 +301,12 @@ export default function ProfileClient() {
<button <button
type="button" type="button"
onClick={handleLineLogin} onClick={handleLineLogin}
className="mt-8 flex w-full items-center justify-center gap-3 rounded-full bg-[#00B900] px-6 py-4 text-sm font-bold uppercase tracking-[0.16em] text-white transition hover:bg-[#009900]" className="mt-8 flex w-full items-center justify-center gap-3 rounded-full bg-line-primary px-6 py-4 text-sm font-bold uppercase tracking-[0.16em] text-white transition hover:bg-line-primary-hover"
> >
<Award className="h-5 w-5" /> <Award className="h-5 w-5" />
เข้าสู่ระบบผ่าน LINE เข้าสู่ระบบผ่าน LINE
</button> </button>
<Link href="/shop" className="mt-5 inline-flex text-sm font-semibold text-pop-pink"> <Link href="/shop" className="mt-5 inline-flex text-sm font-semibold text-brand-primary">
กลับไปเลือกซื้อสินค้า กลับไปเลือกซื้อสินค้า
</Link> </Link>
</section> </section>
@@ -327,58 +328,58 @@ export default function ProfileClient() {
</div> </div>
)} )}
<div className="relative overflow-hidden rounded-3xl bg-white p-6 shadow-brutal"> <div className="ui-panel relative overflow-hidden p-6">
<div className="absolute inset-x-0 top-0 h-1 bg-gradient-to-r from-pop-pink via-pop-yellow to-pop-red" /> <div className="absolute inset-x-0 top-0 h-1 bg-gradient-to-r from-brand-primary via-brand-accent to-brand-primary-hover" />
<div className="flex flex-col gap-5 sm:flex-row sm:items-center sm:justify-between"> <div className="flex flex-col gap-5 sm:flex-row sm:items-center sm:justify-between">
<div className="flex min-w-0 items-center gap-4"> <div className="flex min-w-0 items-center gap-4">
<div className="h-16 w-16 shrink-0 overflow-hidden rounded-full border border-pop-pink/20 bg-pop-bg"> <div className="ui-avatar-shell-sm relative shrink-0">
<img <Image
src={displayCustomer.pictureUrl || `https://ui-avatars.com/api/?name=${encodeURIComponent(displayCustomer.displayName || 'HomAroma')}`} src={displayCustomer.pictureUrl || `https://ui-avatars.com/api/?name=${encodeURIComponent(displayCustomer.displayName || 'HomAroma')}`}
alt={displayCustomer.displayName || 'LINE Profile'} alt={displayCustomer.displayName || 'LINE Profile'}
fill
unoptimized
className="h-full w-full object-cover" className="h-full w-full object-cover"
/> />
</div> </div>
<div className="min-w-0"> <div className="min-w-0">
<h1 className="truncate text-2xl font-semibold text-pop-black">{displayCustomer.displayName || 'HomAroma Member'}</h1> <h1 className="truncate text-2xl font-semibold text-text-main">{displayCustomer.displayName || 'HomAroma Member'}</h1>
<div className="mt-2 flex flex-wrap gap-x-4 gap-y-1 text-xs font-semibold text-gray-500"> <div className="mt-2 flex flex-wrap gap-x-4 gap-y-1 text-xs font-semibold text-muted-text">
{displayCustomer.phone && <span className="inline-flex items-center gap-1"><Phone className="h-3 w-3" />{displayCustomer.phone}</span>} {displayCustomer.phone && <span className="inline-flex items-center gap-1"><Phone className="h-3 w-3" />{displayCustomer.phone}</span>}
{displayCustomer.email && <span className="inline-flex items-center gap-1"><Mail className="h-3 w-3" />{displayCustomer.email}</span>} {displayCustomer.email && <span className="inline-flex items-center gap-1"><Mail className="h-3 w-3" />{displayCustomer.email}</span>}
</div> </div>
</div> </div>
</div> </div>
<div className="flex items-center justify-between gap-4 rounded-2xl bg-pop-bg px-4 py-3"> <div className="ui-panel-muted flex items-center justify-between gap-4 px-4 py-3">
<Award className="h-6 w-6 text-pop-pink" /> <Award className="h-6 w-6 text-brand-primary" />
<div> <div>
<p className="text-[10px] font-bold uppercase tracking-[0.2em] text-gray-500">คะแนนสะสม</p> <p className="text-[10px] font-bold uppercase tracking-[0.2em] text-muted-text">คะแนนสะสม</p>
<p className="text-xl font-black text-pop-black">{displayCustomer.points ?? 0} คะแนน</p> <p className="text-xl font-black text-text-main">{displayCustomer.points ?? 0} คะแนน</p>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div className="flex gap-2 overflow-x-auto border-b border-gray-200"> <div className="flex gap-2 overflow-x-auto border-b border-line-primary/20">
{tabs.map(({ tab, label, icon: Icon, count }) => ( {tabs.map(({ tab, label, icon: Icon, count }) => (
<button <button
key={tab} key={tab}
type="button" type="button"
onClick={() => setActiveTab(tab)} onClick={() => setActiveTab(tab)}
className={`relative flex shrink-0 items-center gap-2 px-3 pb-4 text-sm font-bold transition ${ className={`ui-tab-button ${activeTab === tab ? 'ui-tab-button-active' : 'ui-tab-button-inactive'}`}
activeTab === tab ? 'text-pop-pink' : 'text-gray-500 hover:text-pop-black'
}`}
> >
<Icon className="h-4 w-4" /> <Icon className="h-4 w-4" />
{label} {label}
{typeof count === 'number' && ( {typeof count === 'number' && (
<span className="rounded-full bg-pop-bg px-2 py-0.5 text-[10px]">{count}</span> <span className="ui-tab-count">{count}</span>
)} )}
{activeTab === tab && <span className="absolute inset-x-0 bottom-0 h-0.5 rounded-full bg-pop-pink" />} {activeTab === tab && <span className="absolute inset-x-0 bottom-0 h-0.5 rounded-full bg-brand-primary" />}
</button> </button>
))} ))}
</div> </div>
{loading ? ( {loading ? (
<div className="flex items-center justify-center rounded-3xl bg-white py-24 shadow-brutal"> <div className="ui-panel flex items-center justify-center py-24">
<Loader2 className="h-8 w-8 animate-spin text-pop-pink" /> <Loader2 className="h-8 w-8 animate-spin text-brand-primary" />
</div> </div>
) : ( ) : (
<> <>
@@ -388,19 +389,19 @@ export default function ProfileClient() {
<EmptyPanel icon={Package} title="ไม่มีประวัติการสั่งซื้อ" description="คุณยังไม่ได้ทำการสั่งซื้อสินค้าใด ๆ กับ HomAroma" actionHref="/shop" actionText="ไปหน้าช้อปปิ้ง" /> <EmptyPanel icon={Package} title="ไม่มีประวัติการสั่งซื้อ" description="คุณยังไม่ได้ทำการสั่งซื้อสินค้าใด ๆ กับ HomAroma" actionHref="/shop" actionText="ไปหน้าช้อปปิ้ง" />
) : ( ) : (
orders.map((order) => ( orders.map((order) => (
<article key={order.id} className="rounded-3xl bg-white p-6 shadow-brutal"> <article key={order.id} className="ui-panel p-6">
<div className="flex flex-col gap-3 border-b border-gray-100 pb-4 md:flex-row md:items-center md:justify-between"> <div className="flex flex-col gap-3 border-b border-line-primary/20 pb-4 md:flex-row md:items-center md:justify-between">
<div> <div>
<p className="text-xs font-semibold text-gray-500">เลขออเดอร์ #{order.id.toString().padStart(4, '0')}</p> <p className="text-xs font-semibold text-muted-text">เลขออเดอร์ #{order.id.toString().padStart(4, '0')}</p>
<p className="mt-1 text-[11px] text-gray-400"> <p className="mt-1 text-[11px] text-muted-text/70">
สั่งเมื่อ {new Date(order.createdAt).toLocaleDateString('th-TH', { year: 'numeric', month: 'long', day: 'numeric' })} สั่งเมื่อ {new Date(order.createdAt).toLocaleDateString('th-TH', { year: 'numeric', month: 'long', day: 'numeric' })}
</p> </p>
</div> </div>
<div className="flex items-center gap-3"> <div className="flex items-center gap-3">
<span className={`rounded-full border px-3 py-1 text-xs font-bold ${statusClass(order.status)}`}> <span className={`ui-status-badge ${statusClass(order.status)}`}>
{statusLabel(order.status)} {statusLabel(order.status)}
</span> </span>
<Link href={`/order/${order.id}`} className="rounded-full border border-gray-200 p-2 text-gray-500 transition hover:text-pop-pink"> <Link href={`/order/${order.id}`} className="rounded-full border border-line-primary/20 p-2 text-muted-text transition hover:text-brand-primary">
<ExternalLink className="h-4 w-4" /> <ExternalLink className="h-4 w-4" />
</Link> </Link>
</div> </div>
@@ -409,23 +410,23 @@ export default function ProfileClient() {
<div className="mt-4 space-y-3"> <div className="mt-4 space-y-3">
{order.items.map((item) => ( {order.items.map((item) => (
<div key={item.id} className="flex items-center gap-3 text-sm"> <div key={item.id} className="flex items-center gap-3 text-sm">
<div className="h-11 w-11 shrink-0 overflow-hidden rounded-xl bg-pop-bg"> <div className="relative h-11 w-11 shrink-0 overflow-hidden rounded-xl bg-surface-page">
<img src={item.productImage || '/images/oil_ozone.png'} alt={item.productName} className="h-full w-full object-cover" /> <Image src={item.productImage || '/images/oil_ozone.png'} alt={item.productName} fill unoptimized className="h-full w-full object-cover" />
</div> </div>
<div className="min-w-0 flex-1"> <div className="min-w-0 flex-1">
<p className="truncate font-semibold text-pop-black">{item.productName}</p> <p className="truncate font-semibold text-text-main">{item.productName}</p>
<p className="text-xs text-gray-500">{item.variantSize ? `${item.variantSize} · ` : ''}x {item.quantity}</p> <p className="text-xs text-muted-text">{item.variantSize ? `${item.variantSize} · ` : ''}x {item.quantity}</p>
</div> </div>
<p className="font-bold text-pop-pink">{formatPrice(item.priceAtPurchase * item.quantity)}</p> <p className="font-bold text-brand-primary">{formatPrice(item.priceAtPurchase * item.quantity)}</p>
</div> </div>
))} ))}
</div> </div>
<div className="mt-5 flex flex-col gap-3 border-t border-gray-100 pt-4 text-sm md:flex-row md:items-center md:justify-between"> <div className="mt-5 flex flex-col gap-3 border-t border-line-primary/20 pt-4 text-sm md:flex-row md:items-center md:justify-between">
<p className="text-gray-500"> <p className="text-muted-text">
{order.trackingNo ? <>เลขพัสดุ: <span className="font-mono font-bold text-pop-black">{order.trackingNo}</span></> : 'ยังไม่มีเลขพัสดุ'} {order.trackingNo ? <>เลขพัสดุ: <span className="font-mono font-bold text-text-main">{order.trackingNo}</span></> : 'ยังไม่มีเลขพัสดุ'}
</p> </p>
<p className="font-bold text-pop-black">ยอดรวมสุทธิ: <span className="text-pop-pink">{formatPrice(order.totalAmount)}</span></p> <p className="font-bold text-text-main">ยอดรวมสุทธิ: <span className="text-brand-primary">{formatPrice(order.totalAmount)}</span></p>
</div> </div>
</article> </article>
)) ))
@@ -435,13 +436,13 @@ export default function ProfileClient() {
{activeTab === 'addresses' && ( {activeTab === 'addresses' && (
<div className="space-y-6"> <div className="space-y-6">
<div className="flex flex-col gap-3 border-b border-gray-200 pb-4 sm:flex-row sm:items-center sm:justify-between"> <div className="flex flex-col gap-3 border-b border-line-primary/20 pb-4 sm:flex-row sm:items-center sm:justify-between">
<h2 className="flex items-center gap-2 text-xl font-semibold text-pop-black"> <h2 className="flex items-center gap-2 text-xl font-semibold text-text-main">
<MapPin className="h-5 w-5 text-pop-pink" /> <MapPin className="h-5 w-5 text-brand-primary" />
สมุดที่อยู่จัดส่ง สมุดที่อยู่จัดส่ง
</h2> </h2>
{!showAddressForm && ( {!showAddressForm && (
<button type="button" onClick={() => handleStartAddress()} className="inline-flex items-center justify-center gap-2 rounded-full bg-pop-black px-5 py-3 text-xs font-bold uppercase tracking-[0.16em] text-white transition hover:bg-pop-pink"> <button type="button" onClick={() => handleStartAddress()} className="inline-flex items-center justify-center gap-2 rounded-full bg-text-main px-5 py-3 text-xs font-bold uppercase tracking-[0.16em] text-white transition hover:bg-brand-primary">
<Plus className="h-4 w-4" /> <Plus className="h-4 w-4" />
เพิ่มที่อยู่ใหม่ เพิ่มที่อยู่ใหม่
</button> </button>
@@ -449,8 +450,8 @@ export default function ProfileClient() {
</div> </div>
{showAddressForm && ( {showAddressForm && (
<form onSubmit={handleAddressSubmit} className="space-y-5 rounded-3xl bg-white p-6 shadow-brutal"> <form onSubmit={handleAddressSubmit} className="ui-panel space-y-5 p-6">
<h3 className="text-sm font-bold uppercase tracking-[0.2em] text-pop-pink"> <h3 className="text-sm font-bold uppercase tracking-[0.2em] text-brand-primary">
{editingAddress ? 'แก้ไขที่อยู่จัดส่ง' : 'เพิ่มที่อยู่จัดส่งใหม่'} {editingAddress ? 'แก้ไขที่อยู่จัดส่ง' : 'เพิ่มที่อยู่จัดส่งใหม่'}
</h3> </h3>
@@ -466,21 +467,21 @@ export default function ProfileClient() {
<TextInput label="รหัสไปรษณีย์" value={addressForm.zipcode} onChange={(value) => updateAddressForm('zipcode', value)} required /> <TextInput label="รหัสไปรษณีย์" value={addressForm.zipcode} onChange={(value) => updateAddressForm('zipcode', value)} required />
</div> </div>
<label className="flex items-center gap-3 text-sm font-semibold text-gray-600"> <label className="flex items-center gap-3 text-sm font-semibold text-muted-text">
<input <input
type="checkbox" type="checkbox"
checked={addressForm.isDefault} checked={addressForm.isDefault}
onChange={(event) => updateAddressForm('isDefault', event.target.checked)} onChange={(event) => updateAddressForm('isDefault', event.target.checked)}
className="h-4 w-4 rounded border-gray-300 text-pop-pink" className="ui-form-checkbox"
/> />
ตั้งเป็นที่อยู่จัดส่งเริ่มต้น ตั้งเป็นที่อยู่จัดส่งเริ่มต้น
</label> </label>
<div className="flex justify-end gap-3 border-t border-gray-100 pt-4"> <div className="flex justify-end gap-3 border-t border-line-primary/20 pt-4">
<button type="button" onClick={resetAddressForm} className="rounded-full border border-gray-200 px-5 py-2 text-sm font-semibold text-gray-600"> <button type="button" onClick={resetAddressForm} className="ui-form-secondary-button">
ยกเลิก ยกเลิก
</button> </button>
<button type="submit" disabled={submittingAddress} className="inline-flex items-center gap-2 rounded-full bg-pop-pink px-5 py-2 text-sm font-semibold text-white disabled:opacity-60"> <button type="submit" disabled={submittingAddress} className="inline-flex items-center gap-2 rounded-full bg-brand-primary px-5 py-2 text-sm font-semibold text-white disabled:opacity-60">
{submittingAddress && <Loader2 className="h-4 w-4 animate-spin" />} {submittingAddress && <Loader2 className="h-4 w-4 animate-spin" />}
บันทึกที่อยู่ บันทึกที่อยู่
</button> </button>
@@ -493,27 +494,27 @@ export default function ProfileClient() {
) : ( ) : (
<div className="grid gap-4 md:grid-cols-2"> <div className="grid gap-4 md:grid-cols-2">
{addresses.map((address) => ( {addresses.map((address) => (
<article key={address.id} className={`rounded-3xl bg-white p-5 shadow-brutal ${address.isDefault ? 'ring-2 ring-pop-pink/30' : ''}`}> <article key={address.id} className={`ui-panel p-5 ${address.isDefault ? 'ring-2 ring-brand-primary/30' : ''}`}>
<div className="flex items-start justify-between gap-4"> <div className="flex items-start justify-between gap-4">
<div> <div>
<div className="flex flex-wrap items-center gap-2"> <div className="flex flex-wrap items-center gap-2">
<p className="font-semibold text-pop-black">{address.recipientName}</p> <p className="font-semibold text-text-main">{address.recipientName}</p>
{address.isDefault && <span className="rounded-full bg-pop-bg px-2 py-0.5 text-[10px] font-bold text-pop-pink">เริ่มต้น</span>} {address.isDefault && <span className="rounded-full bg-surface-page px-2 py-0.5 text-[10px] font-bold text-brand-primary">เริ่มต้น</span>}
</div> </div>
<p className="mt-1 text-xs font-semibold text-gray-500">{address.phone}</p> <p className="mt-1 text-xs font-semibold text-muted-text">{address.phone}</p>
</div> </div>
<div className="flex gap-1"> <div className="flex gap-1">
<button type="button" onClick={() => handleStartAddress(address)} className="rounded-full border border-gray-200 p-2 text-gray-500 hover:text-pop-pink"> <button type="button" onClick={() => handleStartAddress(address)} className="rounded-full border border-line-primary/20 p-2 text-muted-text hover:text-brand-primary">
<Edit3 className="h-4 w-4" /> <Edit3 className="h-4 w-4" />
</button> </button>
<button type="button" onClick={() => void handleDeleteAddress(address.id)} className="rounded-full border border-rose-100 p-2 text-rose-500"> <button type="button" onClick={() => void handleDeleteAddress(address.id)} className="ui-form-danger-button">
<Trash2 className="h-4 w-4" /> <Trash2 className="h-4 w-4" />
</button> </button>
</div> </div>
</div> </div>
<p className="mt-4 text-sm leading-relaxed text-gray-600">{formatAddress(address)}</p> <p className="mt-4 text-sm leading-relaxed text-muted-text">{formatAddress(address)}</p>
{!address.isDefault && ( {!address.isDefault && (
<button type="button" onClick={() => void handleSetDefaultAddress(address.id)} className="mt-4 w-full rounded-full border border-gray-200 px-4 py-2 text-xs font-bold uppercase tracking-[0.16em] text-gray-600 hover:text-pop-pink"> <button type="button" onClick={() => void handleSetDefaultAddress(address.id)} className="mt-4 w-full rounded-full border border-line-primary/20 px-4 py-2 text-xs font-bold uppercase tracking-[0.16em] text-muted-text hover:text-brand-primary">
ตั้งเป็นที่อยู่เริ่มต้น ตั้งเป็นที่อยู่เริ่มต้น
</button> </button>
)} )}
@@ -526,12 +527,12 @@ export default function ProfileClient() {
{activeTab === 'settings' && ( {activeTab === 'settings' && (
<div className="space-y-6"> <div className="space-y-6">
<h2 className="flex items-center gap-2 border-b border-gray-200 pb-4 text-xl font-semibold text-pop-black"> <h2 className="flex items-center gap-2 border-b border-line-primary/20 pb-4 text-xl font-semibold text-text-main">
<Settings className="h-5 w-5 text-pop-pink" /> <Settings className="h-5 w-5 text-brand-primary" />
ข้อมูลติดต่อสมาชิก ข้อมูลติดต่อสมาชิก
</h2> </h2>
<form onSubmit={handleSettingsSubmit} className="max-w-xl space-y-5 rounded-3xl bg-white p-6 shadow-brutal"> <form onSubmit={handleSettingsSubmit} className="ui-panel max-w-xl space-y-5 p-6">
{settingsSuccess && ( {settingsSuccess && (
<div className="flex items-center justify-center gap-2 rounded-2xl border border-emerald-100 bg-emerald-50 p-4 text-sm font-bold text-emerald-700"> <div className="flex items-center justify-center gap-2 rounded-2xl border border-emerald-100 bg-emerald-50 p-4 text-sm font-bold text-emerald-700">
<Check className="h-4 w-4" /> <Check className="h-4 w-4" />
@@ -540,7 +541,7 @@ export default function ProfileClient() {
)} )}
<TextInput label="อีเมล" value={settingsForm.email} onChange={(email) => setSettingsForm((current) => ({ ...current, email }))} type="email" /> <TextInput label="อีเมล" value={settingsForm.email} onChange={(email) => setSettingsForm((current) => ({ ...current, email }))} type="email" />
<TextInput label="เบอร์โทรศัพท์" value={settingsForm.phone} onChange={(phone) => setSettingsForm((current) => ({ ...current, phone }))} type="tel" /> <TextInput label="เบอร์โทรศัพท์" value={settingsForm.phone} onChange={(phone) => setSettingsForm((current) => ({ ...current, phone }))} type="tel" />
<button type="submit" disabled={submittingSettings} className="inline-flex w-full items-center justify-center gap-2 rounded-full bg-pop-pink px-6 py-3 text-sm font-bold uppercase tracking-[0.16em] text-white disabled:opacity-60"> <button type="submit" disabled={submittingSettings} className="inline-flex w-full items-center justify-center gap-2 rounded-full bg-brand-primary px-6 py-3 text-sm font-bold uppercase tracking-[0.16em] text-white disabled:opacity-60">
{submittingSettings ? <Loader2 className="h-4 w-4 animate-spin" /> : <Check className="h-4 w-4" />} {submittingSettings ? <Loader2 className="h-4 w-4 animate-spin" /> : <Check className="h-4 w-4" />}
บันทึกข้อมูลติดต่อ บันทึกข้อมูลติดต่อ
</button> </button>
@@ -550,7 +551,7 @@ export default function ProfileClient() {
</> </>
)} )}
<button type="button" onClick={logout} className="inline-flex items-center gap-2 text-sm font-semibold text-gray-500 transition hover:text-rose-500"> <button type="button" onClick={logout} className="inline-flex items-center gap-2 text-sm font-semibold text-muted-text transition hover:text-rose-500">
<LogOut className="h-4 w-4" /> <LogOut className="h-4 w-4" />
ออกจากระบบบนอุปกรณ์นี้ ออกจากระบบบนอุปกรณ์นี้
</button> </button>
@@ -573,13 +574,13 @@ function TextInput({
}) { }) {
return ( return (
<label className="space-y-1.5"> <label className="space-y-1.5">
<span className="block text-[10px] font-bold uppercase tracking-[0.2em] text-gray-500">{label}</span> <span className="ui-form-label block text-[10px] tracking-[0.2em]">{label}</span>
<input <input
type={type} type={type}
required={required} required={required}
value={value} value={value}
onChange={(event) => onChange(event.target.value)} onChange={(event) => onChange(event.target.value)}
className="w-full rounded-2xl border border-gray-200 bg-pop-bg px-4 py-3 text-sm text-pop-black outline-none transition focus:border-pop-pink focus:ring-2 focus:ring-pop-pink/20" className="ui-form-shell"
/> />
</label> </label>
) )
@@ -599,12 +600,12 @@ function EmptyPanel({
actionText?: string actionText?: string
}) { }) {
return ( return (
<div className="rounded-3xl bg-white px-6 py-16 text-center shadow-brutal"> <div className="ui-empty-panel">
<Icon className="mx-auto mb-5 h-12 w-12 text-gray-300" /> <Icon className="mx-auto mb-5 h-12 w-12 text-muted-text/40" />
<h3 className="text-xl font-semibold text-pop-black">{title}</h3> <h3 className="text-xl font-semibold text-text-main">{title}</h3>
<p className="mx-auto mt-2 max-w-md text-sm text-gray-500">{description}</p> <p className="mx-auto mt-2 max-w-md text-sm text-muted-text">{description}</p>
{actionHref && actionText && ( {actionHref && actionText && (
<Link href={actionHref} className="mt-6 inline-flex rounded-full bg-pop-pink px-6 py-3 text-sm font-bold text-white"> <Link href={actionHref} className="mt-6 inline-flex rounded-full bg-brand-primary px-6 py-3 text-sm font-bold text-white">
{actionText} {actionText}
</Link> </Link>
)} )}
apps/website/src/components/TrackOrderClient.tsx
+21 -21
View File
@@ -1,4 +1,4 @@
"use client"; "use client"
import Link from './LocalizedLink' import Link from './LocalizedLink'
import { useRouter } from 'next/navigation' import { useRouter } from 'next/navigation'
@@ -92,14 +92,14 @@ export default function TrackOrderClient() {
return ( return (
<div className="grid gap-10 md:grid-cols-2"> <div className="grid gap-10 md:grid-cols-2">
<section className="self-start rounded-3xl bg-white p-8 shadow-brutal"> <section className="ui-panel self-start p-8">
<div className="mb-6 flex items-center gap-3 border-b border-gray-100 pb-4"> <div className="mb-6 flex items-center gap-3 border-b border-line-primary/20 pb-4">
<div className="flex h-10 w-10 items-center justify-center rounded-full bg-pop-bg text-pop-pink"> <div className="flex h-10 w-10 items-center justify-center rounded-full bg-surface-page text-brand-primary">
<Search className="h-5 w-5" /> <Search className="h-5 w-5" />
</div> </div>
<div> <div>
<p className="text-xs font-bold uppercase tracking-[0.24em] text-pop-pink">Manual Search</p> <p className="ui-eyebrow">Manual Search</p>
<h2 className="text-xl font-semibold text-pop-black">ค้นหาคำสั่งซื้อ</h2> <h2 className="text-xl font-semibold text-text-main">ค้นหาคำสั่งซื้อ</h2>
</div> </div>
</div> </div>
@@ -111,7 +111,7 @@ export default function TrackOrderClient() {
)} )}
<div className="space-y-2"> <div className="space-y-2">
<label htmlFor="orderId" className="text-xs font-bold uppercase tracking-[0.22em] text-gray-500"> <label htmlFor="orderId" className="ui-form-label">
Order Number Order Number
</label> </label>
<input <input
@@ -119,14 +119,14 @@ export default function TrackOrderClient() {
required required
value={orderId} value={orderId}
onChange={(event) => setOrderId(event.target.value)} onChange={(event) => setOrderId(event.target.value)}
className="w-full rounded-2xl border border-gray-200 bg-pop-bg px-4 py-3 text-pop-black outline-none transition focus:border-pop-pink focus:ring-2 focus:ring-pop-pink/20" className="ui-form-shell"
placeholder="เช่น 1024" placeholder="เช่น 1024"
type="text" type="text"
/> />
</div> </div>
<div className="space-y-2"> <div className="space-y-2">
<label htmlFor="phone" className="text-xs font-bold uppercase tracking-[0.22em] text-gray-500"> <label htmlFor="phone" className="ui-form-label">
Phone Number Phone Number
</label> </label>
<input <input
@@ -134,7 +134,7 @@ export default function TrackOrderClient() {
required required
value={phone} value={phone}
onChange={(event) => setPhone(event.target.value)} onChange={(event) => setPhone(event.target.value)}
className="w-full rounded-2xl border border-gray-200 bg-pop-bg px-4 py-3 text-pop-black outline-none transition focus:border-pop-pink focus:ring-2 focus:ring-pop-pink/20" className="ui-form-shell"
placeholder="เบอร์โทรที่ใช้ตอนสั่งซื้อ" placeholder="เบอร์โทรที่ใช้ตอนสั่งซื้อ"
type="tel" type="tel"
/> />
@@ -143,7 +143,7 @@ export default function TrackOrderClient() {
<button <button
type="submit" type="submit"
disabled={loading} disabled={loading}
className="flex w-full items-center justify-center gap-2 rounded-full bg-pop-black px-6 py-4 text-sm font-bold uppercase tracking-[0.18em] text-white transition hover:bg-pop-pink disabled:cursor-not-allowed disabled:opacity-60" className="ui-form-inline-button w-full"
> >
{loading ? <Loader2 className="h-5 w-5 animate-spin" /> : 'Find Order'} {loading ? <Loader2 className="h-5 w-5 animate-spin" /> : 'Find Order'}
</button> </button>
@@ -151,15 +151,15 @@ export default function TrackOrderClient() {
</section> </section>
<section className="space-y-6"> <section className="space-y-6">
<div className="flex items-center gap-3 border-b border-gray-200 pb-4"> <div className="flex items-center gap-3 border-b border-line-primary/20 pb-4">
<Package className="h-5 w-5 text-pop-pink" /> <Package className="h-5 w-5 text-brand-primary" />
<h2 className="text-xl font-semibold text-pop-black">Recent Device Orders</h2> <h2 className="text-xl font-semibold text-text-main">Recent Device Orders</h2>
</div> </div>
{localOrders.length === 0 ? ( {localOrders.length === 0 ? (
<div className="rounded-3xl border border-dashed border-gray-200 bg-white p-10 text-center shadow-brutal"> <div className="ui-empty-panel p-10 text-center">
<p className="text-sm font-semibold text-gray-600">ยังไม่มีประวัติคำสั่งซื้อบนอุปกรณ์นี้</p> <p className="text-sm font-semibold text-muted-text">ยังไม่มีประวัติคำสั่งซื้อบนอุปกรณ์นี้</p>
<p className="mt-2 text-xs uppercase tracking-[0.18em] text-gray-400">ใช้ฟอร์มค้นหาด้านซ้ายเพื่อบันทึกออเดอร์</p> <p className="mt-2 text-xs uppercase tracking-[0.18em] text-muted-text/70">ใช้ฟอร์มค้นหาด้านซ้ายเพื่อบันทึกออเดอร์</p>
</div> </div>
) : ( ) : (
<div className="space-y-3"> <div className="space-y-3">
@@ -167,13 +167,13 @@ export default function TrackOrderClient() {
<Link <Link
key={id} key={id}
href={`/order/${id}`} href={`/order/${id}`}
className="group flex items-center justify-between rounded-2xl bg-white p-5 shadow-brutal transition hover:-translate-y-0.5 hover:shadow-brutal-hover" className="ui-card ui-card-hover group flex items-center justify-between p-5"
> >
<div> <div>
<p className="text-xs font-bold uppercase tracking-[0.22em] text-gray-400">Order</p> <p className="text-xs font-bold uppercase tracking-[0.22em] text-muted-text/70">Order</p>
<p className="mt-1 font-mono text-2xl font-bold text-pop-black">{orderLabel(id)}</p> <p className="mt-1 font-mono text-2xl font-bold text-text-main">{orderLabel(id)}</p>
</div> </div>
<div className="flex h-10 w-10 items-center justify-center rounded-full bg-pop-bg text-pop-black transition group-hover:bg-pop-pink group-hover:text-white"> <div className="flex h-10 w-10 items-center justify-center rounded-full bg-surface-page text-text-main transition group-hover:bg-brand-primary group-hover:text-white">
<ChevronRight className="h-5 w-5" /> <ChevronRight className="h-5 w-5" />
</div> </div>
</Link> </Link>
apps/website/src/components/WishlistButton.tsx
+3 -3
View File
@@ -1,4 +1,4 @@
"use client"; "use client"
import { Heart } from 'lucide-react' import { Heart } from 'lucide-react'
import type { Product } from '@homaroma/types' import type { Product } from '@homaroma/types'
@@ -22,10 +22,10 @@ export default function WishlistButton({ product }: WishlistButtonProps) {
toggleItem(product) toggleItem(product)
}} }}
aria-label={isInWishlist ? 'Remove from wishlist' : 'Add to wishlist'} aria-label={isInWishlist ? 'Remove from wishlist' : 'Add to wishlist'}
className={`absolute right-4 top-4 z-10 flex h-10 w-10 items-center justify-center rounded-full border bg-white/90 shadow-sm backdrop-blur transition hover:scale-105 ${ className={`absolute right-4 top-4 z-10 flex h-10 w-10 items-center justify-center rounded-full border bg-surface-card/90 shadow-sm backdrop-blur transition hover:scale-105 ${
isInWishlist isInWishlist
? 'border-rose-200 text-rose-500' ? 'border-rose-200 text-rose-500'
: 'border-gray-200 text-pop-black hover:border-rose-200 hover:text-rose-500' : 'border-line-primary/20 text-text-main hover:border-rose-200 hover:text-rose-500'
}`} }`}
> >
<Heart className={`h-5 w-5 ${isInWishlist ? 'fill-current' : ''}`} /> <Heart className={`h-5 w-5 ${isInWishlist ? 'fill-current' : ''}`} />
apps/website/src/components/WishlistClient.tsx
+5 -5
View File
@@ -1,4 +1,4 @@
"use client"; "use client"
import Link from './LocalizedLink' import Link from './LocalizedLink'
import { Heart } from 'lucide-react' import { Heart } from 'lucide-react'
@@ -11,17 +11,17 @@ export default function WishlistClient() {
if (items.length === 0) { if (items.length === 0) {
return ( return (
<section className="mx-auto max-w-2xl rounded-3xl bg-white px-6 py-20 text-center shadow-brutal"> <section className="ui-panel mx-auto max-w-2xl px-6 py-20 text-center">
<div className="mx-auto mb-6 flex h-20 w-20 items-center justify-center rounded-full bg-rose-50 text-rose-300"> <div className="mx-auto mb-6 flex h-20 w-20 items-center justify-center rounded-full bg-rose-50 text-rose-300">
<Heart className="h-10 w-10" /> <Heart className="h-10 w-10" />
</div> </div>
<h2 className="text-2xl font-semibold text-pop-black">Your wishlist is empty</h2> <h2 className="text-2xl font-semibold text-text-main">Your wishlist is empty</h2>
<p className="mx-auto mt-3 max-w-md text-gray-500"> <p className="mx-auto mt-3 max-w-md text-muted-text">
Explore our products and tap the heart icon to save your favorites. Explore our products and tap the heart icon to save your favorites.
</p> </p>
<Link <Link
href="/shop" href="/shop"
className="mt-8 inline-flex rounded-full bg-pop-pink px-8 py-3 text-sm font-bold uppercase tracking-[0.18em] text-white transition hover:bg-pop-red" className="mt-8 inline-flex rounded-full bg-brand-primary px-8 py-3 text-sm font-bold uppercase tracking-[0.18em] text-white transition hover:bg-brand-primary-hover"
> >
Browse Shop Browse Shop
</Link> </Link>
apps/website/src/components/dynamic/DynamicPageRenderer.tsx
+92 -79
View File
@@ -1,5 +1,6 @@
"use client" "use client"
import Image from 'next/image'
import Link from '../LocalizedLink' import Link from '../LocalizedLink'
import { Clock, Mail, MapPin, MessageCircle } from 'lucide-react' import { Clock, Mail, MapPin, MessageCircle } from 'lucide-react'
import type { Category, PageSection, Product } from '@homaroma/types' import type { Category, PageSection, Product } from '@homaroma/types'
@@ -38,7 +39,7 @@ function optionalText(value: unknown, lang: string) {
return localizedValue(value, lang) return localizedValue(value, lang)
} }
function renderAccentTitle(text: string, accentClassName = 'text-pop-pink italic') { function renderAccentTitle(text: string, accentClassName = 'ui-accent-text not-italic') {
if (!text.includes('[') || !text.includes(']')) return text if (!text.includes('[') || !text.includes(']')) return text
return text.split('[').map((part, index) => { return text.split('[').map((part, index) => {
@@ -79,7 +80,7 @@ function AnnouncementBar({ payload, lang }: { payload: Record<string, unknown>,
return ( return (
<section <section
className={`announcement-bar absolute top-0 left-0 w-full z-[60] px-4 py-3 text-center text-sm font-semibold tracking-wide ${backgroundColor ? '' : 'bg-pop-black'} ${textColor ? '' : 'text-white'} overflow-hidden`} className={`announcement-bar absolute top-0 left-0 z-[60] w-full overflow-hidden px-4 py-3 text-center text-sm font-semibold tracking-wide ${backgroundColor ? '' : 'bg-text-main'} ${textColor ? '' : 'text-white'}`}
style={{ backgroundColor, color: textColor }} style={{ backgroundColor, color: textColor }}
> >
<Swiper <Swiper
@@ -111,14 +112,16 @@ function HeroSection({ payload, lang }: { payload: Record<string, unknown>, lang
const buttonLink = typeof payload.buttonLink === 'string' ? payload.buttonLink : '/shop' const buttonLink = typeof payload.buttonLink === 'string' ? payload.buttonLink : '/shop'
return ( return (
<section className="relative flex min-h-[90vh] w-full items-center justify-center overflow-hidden bg-neutral-900 md:aspect-[21/9] md:min-h-0"> <section className="relative flex min-h-[90vh] w-full items-center justify-center overflow-hidden bg-text-main md:aspect-[21/9] md:min-h-0">
<img <Image
src={imageUrl} src={imageUrl}
alt={title || 'HomAroma'} alt={title || 'HomAroma'}
fill
unoptimized
className="absolute inset-0 h-full w-full scale-[1.02] object-cover" className="absolute inset-0 h-full w-full scale-[1.02] object-cover"
/> />
<div className="absolute inset-0 bg-neutral-900/40" /> <div className="absolute inset-0 bg-text-main/40" />
<div className="absolute inset-0 bg-gradient-to-t from-neutral-900/90 via-neutral-900/10 to-neutral-900/30" /> <div className="absolute inset-0 bg-gradient-to-t from-text-main/90 via-text-main/10 to-text-main/30" />
<div className="relative z-10 mx-auto mt-16 w-full max-w-4xl space-y-6 px-8 text-center md:mt-0"> <div className="relative z-10 mx-auto mt-16 w-full max-w-4xl space-y-6 px-8 text-center md:mt-0">
<div className="space-y-6"> <div className="space-y-6">
{tagline && ( {tagline && (
@@ -126,8 +129,8 @@ function HeroSection({ payload, lang }: { payload: Record<string, unknown>, lang
{tagline} {tagline}
</p> </p>
)} )}
<h1 className="font-serif text-5xl font-light leading-tight tracking-wide text-white drop-shadow-md md:text-7xl lg:text-8xl"> <h1 className="font-display text-5xl font-light leading-tight tracking-wide text-white drop-shadow-md md:text-7xl lg:text-8xl">
{renderAccentTitle(title || 'HomAroma', 'font-medium italic text-[#E4BC32]')} {renderAccentTitle(title || 'HomAroma')}
</h1> </h1>
{description && ( {description && (
<p className="mx-auto max-w-2xl pb-8 pt-4 text-lg font-light text-white/90 drop-shadow-md md:text-xl"> <p className="mx-auto max-w-2xl pb-8 pt-4 text-lg font-light text-white/90 drop-shadow-md md:text-xl">
@@ -137,13 +140,13 @@ function HeroSection({ payload, lang }: { payload: Record<string, unknown>, lang
<div className="flex flex-col items-center justify-center gap-6 sm:flex-row"> <div className="flex flex-col items-center justify-center gap-6 sm:flex-row">
<Link <Link
href={buttonLink} href={buttonLink}
className="rounded-full bg-white px-8 py-4 text-sm font-bold uppercase tracking-widest text-pop-black transition-all duration-300 hover:bg-pop-bg hover:shadow-xl" className="rounded-full bg-surface-card px-8 py-4 text-sm font-bold uppercase tracking-widest text-text-main transition-all duration-300 hover:bg-surface-page hover:shadow-xl"
> >
{buttonText || 'Explore Collection'} {buttonText || 'Explore Collection'}
</Link> </Link>
<a <a
href="#categories" href="#categories"
className="group flex items-center gap-2 px-8 py-4 text-sm font-medium uppercase tracking-widest text-white transition-colors hover:text-[#E4BC32]" className="group flex items-center gap-2 px-8 py-4 text-sm font-medium uppercase tracking-widest text-white transition-colors hover:text-brand-accent"
> >
{heroLearnMoreText(resolvedLang)} {heroLearnMoreText(resolvedLang)}
<span className="transition-transform group-hover:translate-x-1">→</span> <span className="transition-transform group-hover:translate-x-1">→</span>
@@ -182,11 +185,11 @@ function CategoriesSection({
} }
return ( return (
<section id="categories" className="bg-white px-6 py-24"> <section id="categories" className="bg-surface-page ui-section-band">
<div className="mx-auto max-w-7xl space-y-14"> <div className="ui-section-shell space-y-14">
<div className="mx-auto max-w-2xl space-y-4 text-center"> <div className="mx-auto max-w-2xl space-y-4 text-center">
<h2 className="text-4xl font-semibold text-pop-black md:text-5xl">{title}</h2> <h2 className="ui-section-title">{title}</h2>
{subtitle && <p className="text-gray-500">{subtitle}</p>} {subtitle && <p className="ui-section-subtitle">{subtitle}</p>}
</div> </div>
<div className="grid grid-cols-2 gap-5 md:grid-cols-5"> <div className="grid grid-cols-2 gap-5 md:grid-cols-5">
{displayed.map((category) => { {displayed.map((category) => {
@@ -196,14 +199,16 @@ function CategoriesSection({
<Link <Link
key={category.id} key={category.id}
href={`/category/${category.id}`} href={`/category/${category.id}`}
className="group relative h-72 overflow-hidden rounded-2xl shadow-brutal transition hover:-translate-y-1 hover:shadow-brutal-hover" className="group relative h-72 overflow-hidden rounded-2xl shadow-card transition hover:-translate-y-1 hover:shadow-card-hover"
> >
<img <Image
src={category.imageUrl || getCategoryImage(name)} src={category.imageUrl || getCategoryImage(name)}
alt={name} alt={name}
fill
unoptimized
className="absolute inset-0 h-full w-full object-cover transition duration-700 group-hover:scale-105" className="absolute inset-0 h-full w-full object-cover transition duration-700 group-hover:scale-105"
/> />
<div className="absolute inset-0 bg-gradient-to-t from-black/65 to-transparent" /> <div className="absolute inset-0 bg-gradient-to-t from-text-main/65 to-transparent" />
<div className="absolute bottom-5 left-5 right-5 text-white"> <div className="absolute bottom-5 left-5 right-5 text-white">
<span className="block text-lg font-semibold">{name}</span> <span className="block text-lg font-semibold">{name}</span>
{category._count && ( {category._count && (
@@ -245,14 +250,14 @@ function ProductsSection({ payload, lang }: { payload: Record<string, unknown>,
} }
return ( return (
<section className="bg-pop-bg px-6 py-24"> <section className="bg-surface-page ui-section-band">
<div className="mx-auto max-w-7xl space-y-10"> <div className="ui-section-shell space-y-10">
<div className="flex flex-col gap-4 border-b border-gray-200 pb-6 md:flex-row md:items-end md:justify-between"> <div className="flex flex-col gap-4 border-b border-line-primary/20 pb-6 md:flex-row md:items-end md:justify-between">
<div> <div>
<h2 className="text-4xl font-semibold text-pop-black md:text-5xl">{title}</h2> <h2 className="ui-section-title">{title}</h2>
{subtitle && <p className="mt-2 text-gray-500">{subtitle}</p>} {subtitle && <p className="mt-2 ui-section-subtitle">{subtitle}</p>}
</div> </div>
<Link href="/shop" className="font-semibold text-pop-pink transition hover:text-pop-red"> <Link href="/shop" className="ui-section-link">
{viewAllLabel[resolvedLang] ?? viewAllLabel.en} {viewAllLabel[resolvedLang] ?? viewAllLabel.en}
</Link> </Link>
</div> </div>
@@ -261,7 +266,7 @@ function ProductsSection({ payload, lang }: { payload: Record<string, unknown>,
{products.map((product) => <ProductCard key={product.id} product={product} />)} {products.map((product) => <ProductCard key={product.id} product={product} />)}
</div> </div>
) : ( ) : (
<p className="rounded-2xl bg-white p-8 text-center text-gray-500 shadow-brutal"> <p className="ui-section-card bg-surface-card p-8 text-center text-muted-text">
{emptyLabel[resolvedLang] ?? emptyLabel.en} {emptyLabel[resolvedLang] ?? emptyLabel.en}
</p> </p>
)} )}
@@ -280,18 +285,18 @@ function BannerSection({ payload, lang }: { payload: Record<string, unknown>, la
const linkUrl = typeof payload.linkUrl === 'string' ? payload.linkUrl : '' const linkUrl = typeof payload.linkUrl === 'string' ? payload.linkUrl : ''
const content = ( const content = (
<div className="relative mx-auto min-h-[360px] max-w-7xl overflow-hidden rounded-3xl shadow-brutal"> <div className="relative mx-auto min-h-[360px] max-w-7xl overflow-hidden rounded-3xl shadow-card">
<img src={imageUrl} alt={title || 'Banner'} className="absolute inset-0 h-full w-full object-cover" /> <Image src={imageUrl} alt={title || 'Banner'} fill unoptimized className="absolute inset-0 h-full w-full object-cover" />
<div className="absolute inset-0 bg-gradient-to-r from-pop-black/75 via-pop-black/35 to-transparent" /> <div className="absolute inset-0 bg-gradient-to-r from-text-main/75 via-text-main/35 to-transparent" />
<div className="relative z-10 max-w-xl space-y-4 p-8 text-white md:p-14"> <div className="relative z-10 max-w-xl space-y-4 p-8 text-white md:p-14">
{title && <h2 className="text-3xl font-semibold md:text-5xl">{title}</h2>} {title && <h2 className="text-3xl font-semibold md:text-5xl">{title}</h2>}
{description && <p className="text-white/90">{description}</p>} {description && <p className="text-white/90">{description}</p>}
{buttonText && <span className="inline-flex rounded-full bg-white px-6 py-3 font-semibold text-pop-black">{buttonText}</span>} {buttonText && <span className="inline-flex rounded-full bg-surface-card px-6 py-3 font-semibold text-text-main">{buttonText}</span>}
</div> </div>
</div> </div>
) )
return <section className="bg-white px-6 py-16">{linkUrl ? <Link href={linkUrl}>{content}</Link> : content}</section> return <section className="bg-surface-page ui-section-band">{linkUrl ? <Link href={linkUrl}>{content}</Link> : content}</section>
} }
function TextSection({ payload, lang }: { payload: Record<string, unknown>, lang: string }) { function TextSection({ payload, lang }: { payload: Record<string, unknown>, lang: string }) {
@@ -306,10 +311,10 @@ function TextSection({ payload, lang }: { payload: Record<string, unknown>, lang
: 'text-left' : 'text-left'
return ( return (
<section className="bg-white px-6 py-16"> <section className="bg-surface-page ui-section-band">
<div className={`mx-auto max-w-4xl space-y-6 ${alignClass}`}> <div className={`mx-auto max-w-4xl space-y-6 ${alignClass}`}>
{title && <h2 className="text-3xl font-semibold text-pop-black md:text-4xl">{title}</h2>} {title && <h2 className="text-3xl font-semibold text-text-main md:text-4xl">{title}</h2>}
{content && <div className="leading-relaxed text-gray-600" dangerouslySetInnerHTML={{ __html: content }} />} {content && <div className="leading-relaxed text-muted-text" dangerouslySetInnerHTML={{ __html: content }} />}
</div> </div>
</section> </section>
) )
@@ -324,15 +329,15 @@ function NewsletterSection({ payload, lang }: { payload: Record<string, unknown>
const placeholder = typeof payload.placeholderText === 'string' ? payload.placeholderText : 'you@example.com' const placeholder = typeof payload.placeholderText === 'string' ? payload.placeholderText : 'you@example.com'
return ( return (
<section className="bg-pop-black px-6 py-20 text-white"> <section className="bg-text-main px-6 py-20 text-white">
<div className="mx-auto grid max-w-5xl gap-8 md:grid-cols-[1fr_auto] md:items-end"> <div className="mx-auto grid max-w-5xl gap-8 md:grid-cols-[1fr_auto] md:items-end">
<div className="space-y-3"> <div className="space-y-3">
<h2 className="text-3xl font-semibold text-white md:text-4xl">{title}</h2> <h2 className="text-3xl font-semibold text-white md:text-4xl">{title}</h2>
{description && <p className="max-w-2xl text-white/75">{description}</p>} {description && <p className="max-w-2xl text-white/75">{description}</p>}
</div> </div>
<form className="flex flex-col gap-3 sm:flex-row"> <form className="flex flex-col gap-3 sm:flex-row">
<input className="min-w-0 rounded-full px-5 py-3 text-pop-black" placeholder={placeholder} type="email" /> <input className="min-w-0 rounded-full px-5 py-3 text-text-main" placeholder={placeholder} type="email" />
<button className="rounded-full bg-pop-pink px-6 py-3 font-semibold text-white" type="button"> <button className="rounded-full bg-brand-primary px-6 py-3 font-semibold text-white" type="button">
{buttonText} {buttonText}
</button> </button>
</form> </form>
@@ -354,27 +359,29 @@ function EditorialTileSection({ payload, lang }: { payload: Record<string, unkno
const textColor = typeof payload.textColor === 'string' ? payload.textColor : undefined const textColor = typeof payload.textColor === 'string' ? payload.textColor : undefined
return ( return (
<section className="overflow-hidden bg-white px-6 py-20" style={{ backgroundColor, color: textColor }}> <section className="overflow-hidden bg-surface-page ui-section-band" style={{ backgroundColor, color: textColor }}>
<div className="mx-auto grid max-w-7xl gap-12 md:grid-cols-2 md:items-center"> <div className="mx-auto grid max-w-7xl gap-12 md:grid-cols-2 md:items-center">
{imageUrl && ( {imageUrl && (
<div className={`group aspect-square overflow-hidden rounded-3xl shadow-brutal ${imagePosition === 'left' ? 'md:order-1' : 'md:order-2'}`}> <div className={`group relative aspect-square overflow-hidden rounded-3xl shadow-card ${imagePosition === 'left' ? 'md:order-1' : 'md:order-2'}`}>
<img <Image
src={imageUrl} src={imageUrl}
alt={title || 'Editorial'} alt={title || 'Editorial'}
fill
unoptimized
className="h-full w-full object-cover transition duration-700 group-hover:scale-105" className="h-full w-full object-cover transition duration-700 group-hover:scale-105"
/> />
</div> </div>
)} )}
<div className={`space-y-6 ${imagePosition === 'left' ? 'md:order-2' : 'md:order-1'}`}> <div className={`space-y-6 ${imagePosition === 'left' ? 'md:order-2' : 'md:order-1'}`}>
{title && ( {title && (
<h2 className="text-4xl font-semibold leading-tight text-pop-black md:text-6xl" style={{ color: textColor }}> <h2 className="text-4xl font-semibold leading-tight text-text-main md:text-6xl" style={{ color: textColor }}>
{renderAccentTitle(title)} {renderAccentTitle(title)}
</h2> </h2>
)} )}
<div className="h-px w-14 bg-pop-pink" /> <div className="h-px w-14 bg-brand-primary" />
{description && <p className="whitespace-pre-line text-base leading-relaxed text-gray-600 md:text-lg" style={{ color: textColor }}>{description}</p>} {description && <p className="whitespace-pre-line text-base leading-relaxed text-muted-text md:text-lg" style={{ color: textColor }}>{description}</p>}
{buttonText && buttonLink && ( {buttonText && buttonLink && (
<Link href={buttonLink} className="inline-flex rounded-full border border-current px-8 py-3 text-xs font-bold uppercase tracking-[0.22em] transition hover:bg-pop-pink hover:text-white"> <Link href={buttonLink} className="inline-flex rounded-full border border-current px-8 py-3 text-xs font-bold uppercase tracking-[0.22em] transition hover:bg-brand-primary hover:text-white">
{buttonText} {buttonText}
</Link> </Link>
)} )}
@@ -392,12 +399,12 @@ function EditorialCarouselSection({ payload, lang }: { payload: Record<string, u
if (!slides.length) return null if (!slides.length) return null
return ( return (
<section className="bg-pop-black px-6 py-20 text-white"> <section className="bg-text-main px-6 py-20 text-white">
<div className="mx-auto max-w-7xl space-y-12"> <div className="mx-auto max-w-7xl space-y-12">
{title && ( {title && (
<div className="mx-auto max-w-3xl space-y-4 text-center"> <div className="mx-auto max-w-3xl space-y-4 text-center">
<h2 className="text-4xl font-semibold text-white md:text-5xl">{renderAccentTitle(title, 'text-pop-yellow italic')}</h2> <h2 className="text-4xl font-semibold text-white md:text-5xl">{renderAccentTitle(title, 'ui-accent-text not-italic')}</h2>
<div className="mx-auto h-px w-16 bg-pop-yellow" /> <div className="mx-auto h-px w-16 bg-brand-accent" />
</div> </div>
)} )}
<div className="grid gap-6 md:grid-cols-3"> <div className="grid gap-6 md:grid-cols-3">
@@ -410,18 +417,24 @@ function EditorialCarouselSection({ payload, lang }: { payload: Record<string, u
const imageUrl = typeof slide.imageUrl === 'string' ? slide.imageUrl : '' const imageUrl = typeof slide.imageUrl === 'string' ? slide.imageUrl : ''
return ( return (
<article key={index} className="group overflow-hidden rounded-3xl border border-white/10 bg-white/5"> <article key={index} className="group overflow-hidden rounded-3xl border border-line-primary/10 bg-surface-card/60">
{imageUrl && ( {imageUrl && (
<div className="aspect-[4/3] overflow-hidden"> <div className="relative aspect-[4/3] overflow-hidden">
<img src={imageUrl} alt={slideTitle || 'Editorial slide'} className="h-full w-full object-cover transition duration-700 group-hover:scale-105" /> <Image
src={imageUrl}
alt={slideTitle || 'Editorial slide'}
fill
unoptimized
className="h-full w-full object-cover transition duration-700 group-hover:scale-105"
/>
</div> </div>
)} )}
<div className="space-y-4 p-6"> <div className="space-y-4 p-6">
{category && <p className="text-[10px] font-bold uppercase tracking-[0.24em] text-pop-yellow">{category}</p>} {category && <p className="text-[10px] font-bold uppercase tracking-[0.24em] text-brand-accent">{category}</p>}
{slideTitle && <h3 className="text-2xl font-semibold text-white">{renderAccentTitle(slideTitle, 'text-pop-yellow italic')}</h3>} {slideTitle && <h3 className="text-2xl font-semibold text-white">{renderAccentTitle(slideTitle)}</h3>}
{description && <p className="line-clamp-4 text-sm leading-relaxed text-white/70">{description}</p>} {description && <p className="line-clamp-4 text-sm leading-relaxed text-white/70">{description}</p>}
{buttonText && buttonLink && ( {buttonText && buttonLink && (
<Link href={buttonLink} className="inline-flex text-xs font-bold uppercase tracking-[0.22em] text-pop-yellow transition hover:text-white"> <Link href={buttonLink} className="inline-flex text-xs font-bold uppercase tracking-[0.22em] text-brand-accent transition hover:text-white">
{buttonText} &rarr; {buttonText} &rarr;
</Link> </Link>
)} )}
@@ -462,15 +475,15 @@ function HeroArticleSection({ payload, lang }: { payload: Record<string, unknown
} }
return ( return (
<section className="relative flex min-h-[60vh] items-center justify-center overflow-hidden bg-pop-black px-6 py-24 text-center text-white md:min-h-[76vh]"> <section className="relative flex min-h-[60vh] items-center justify-center overflow-hidden bg-text-main px-6 py-24 text-center text-white md:min-h-[76vh]">
{imageUrl && ( {imageUrl && (
<> <>
<img src={imageUrl} alt={title} className="absolute inset-0 h-full w-full object-cover" /> <Image src={imageUrl} alt={title} fill unoptimized className="absolute inset-0 h-full w-full object-cover" />
<div className="absolute inset-0 bg-pop-black/55" /> <div className="absolute inset-0 bg-text-main/55" />
</> </>
)} )}
<div className="relative z-10 mx-auto max-w-4xl space-y-6"> <div className="relative z-10 mx-auto max-w-4xl space-y-6">
{category && <p className="text-xs font-bold uppercase tracking-[0.28em] text-pop-yellow">{category}</p>} {category && <p className="text-xs font-bold uppercase tracking-[0.28em] text-brand-accent">{category}</p>}
<h1 className="text-4xl font-semibold leading-tight md:text-6xl">{title}</h1> <h1 className="text-4xl font-semibold leading-tight md:text-6xl">{title}</h1>
{subtitle && <p className="mx-auto max-w-2xl text-lg text-white/85 md:text-xl">{subtitle}</p>} {subtitle && <p className="mx-auto max-w-2xl text-lg text-white/85 md:text-xl">{subtitle}</p>}
{(author || date) && ( {(author || date) && (
@@ -504,17 +517,17 @@ function ScentNotesBreakdownSection({ payload, lang }: { payload: Record<string,
] ]
return ( return (
<section className="bg-pop-bg px-6 py-20"> <section className="bg-surface-page ui-section-band">
<div className="mx-auto max-w-6xl space-y-12 text-center"> <div className="mx-auto max-w-6xl space-y-12 text-center">
<div className="mx-auto max-w-3xl space-y-4"> <div className="mx-auto max-w-3xl space-y-4">
<h2 className="text-4xl font-semibold text-pop-black md:text-5xl">{title}</h2> <h2 className="ui-section-title">{title}</h2>
{description && <p className="text-gray-600">{description}</p>} {description && <p className="text-muted-text">{description}</p>}
</div> </div>
<div className="grid gap-6 md:grid-cols-3"> <div className="grid gap-6 md:grid-cols-3">
{notes.map(([label, value]) => ( {notes.map(([label, value]) => (
<article key={label} className="rounded-3xl bg-white p-8 text-left shadow-brutal"> <article key={label} className="ui-section-card p-8 text-left">
<h3 className="mb-4 text-xs font-bold uppercase tracking-[0.24em] text-pop-pink">{label}</h3> <h3 className="mb-4 text-xs font-bold uppercase tracking-[0.24em] text-brand-primary">{label}</h3>
<p className="leading-relaxed text-gray-600">{value}</p> <p className="leading-relaxed text-muted-text">{value}</p>
</article> </article>
))} ))}
</div> </div>
@@ -532,14 +545,14 @@ function QuoteCalloutSection({ payload, lang }: { payload: Record<string, unknow
if (!quote) return null if (!quote) return null
return ( return (
<section className="bg-white px-6 py-24"> <section className="bg-surface-page px-6 py-24">
<div className="mx-auto max-w-4xl text-center"> <div className="mx-auto max-w-4xl text-center">
<p className="mb-8 text-7xl leading-none text-pop-pink/25">&quot;</p> <p className="mb-8 text-7xl leading-none text-brand-primary/25">&quot;</p>
<blockquote className="text-3xl font-semibold italic leading-relaxed text-pop-black md:text-5xl"> <blockquote className="text-3xl font-semibold italic leading-relaxed text-text-main md:text-5xl">
{quote} {quote}
</blockquote> </blockquote>
{(author || role) && ( {(author || role) && (
<p className="mt-8 text-xs font-bold uppercase tracking-[0.24em] text-gray-500"> <p className="mt-8 text-xs font-bold uppercase tracking-[0.24em] text-muted-text">
{[author, role].filter(Boolean).join(' / ')} {[author, role].filter(Boolean).join(' / ')}
</p> </p>
)} )}
@@ -556,9 +569,9 @@ function AccordionSection({ payload, lang }: { payload: Record<string, unknown>,
const sectionTitle = localizedFromRecord(payload, 'title', resolvedLang) const sectionTitle = localizedFromRecord(payload, 'title', resolvedLang)
return ( return (
<section className="bg-pop-bg px-6 py-20"> <section className="bg-surface-page ui-section-band">
<div className="mx-auto max-w-4xl space-y-10"> <div className="mx-auto max-w-4xl space-y-10">
{sectionTitle && <h2 className="text-4xl font-semibold text-pop-black md:text-5xl">{sectionTitle}</h2>} {sectionTitle && <h2 className="ui-section-title">{sectionTitle}</h2>}
{categories.map((category, categoryIndex) => { {categories.map((category, categoryIndex) => {
const questions = Array.isArray(category.questions) ? category.questions.map(toRecord) : [] const questions = Array.isArray(category.questions) ? category.questions.map(toRecord) : []
const name = localizedFromRecord(category, 'name', resolvedLang) const name = localizedFromRecord(category, 'name', resolvedLang)
@@ -567,8 +580,8 @@ function AccordionSection({ payload, lang }: { payload: Record<string, unknown>,
return ( return (
<div key={categoryIndex} className="space-y-5"> <div key={categoryIndex} className="space-y-5">
{name && ( {name && (
<h2 className="flex items-center gap-3 text-2xl font-semibold text-pop-black"> <h2 className="flex items-center gap-3 text-2xl font-semibold text-text-main">
{icon && <span className="text-pop-pink">{icon}</span>} {icon && <span className="text-brand-primary">{icon}</span>}
{name} {name}
</h2> </h2>
)} )}
@@ -579,11 +592,11 @@ function AccordionSection({ payload, lang }: { payload: Record<string, unknown>,
if (!question || !answer) return null if (!question || !answer) return null
return ( return (
<details key={itemIndex} className="group rounded-2xl bg-white p-5 shadow-brutal"> <details key={itemIndex} className="group rounded-2xl bg-surface-card p-5 shadow-card">
<summary className="cursor-pointer list-none text-lg font-semibold text-pop-black marker:hidden"> <summary className="cursor-pointer list-none text-lg font-semibold text-text-main marker:hidden">
{question} {question}
</summary> </summary>
<p className="mt-4 whitespace-pre-wrap leading-relaxed text-gray-600">{answer}</p> <p className="mt-4 whitespace-pre-wrap leading-relaxed text-muted-text">{answer}</p>
</details> </details>
) )
})} })}
@@ -621,28 +634,28 @@ function ContactInfoSection({ payload, lang }: { payload: Record<string, unknown
] as const ] as const
return ( return (
<section className="bg-white px-6 py-20"> <section className="bg-surface-page ui-section-band">
<div className="mx-auto grid max-w-6xl gap-6 md:grid-cols-2 lg:grid-cols-4"> <div className="mx-auto grid max-w-6xl gap-6 md:grid-cols-2 lg:grid-cols-4">
{title && ( {title && (
<div className="col-span-full mb-2"> <div className="col-span-full mb-2">
<h2 className="text-4xl font-semibold text-pop-black md:text-5xl">{title}</h2> <h2 className="ui-section-title">{title}</h2>
</div> </div>
)} )}
{items.map(({ key, label, value, Icon }) => { {items.map(({ key, label, value, Icon }) => {
if (!value) return null if (!value) return null
return ( return (
<article key={key} className="rounded-3xl bg-pop-bg p-6 text-center shadow-brutal"> <article key={key} className="ui-section-card-muted p-6 text-center">
<div className="mx-auto mb-4 flex h-12 w-12 items-center justify-center rounded-full bg-white text-pop-pink"> <div className="mx-auto mb-4 flex h-12 w-12 items-center justify-center rounded-full bg-surface-card text-brand-primary">
<Icon className="h-6 w-6" /> <Icon className="h-6 w-6" />
</div> </div>
<h3 className="mb-2 text-lg font-semibold text-pop-black">{label}</h3> <h3 className="mb-2 text-lg font-semibold text-text-main">{label}</h3>
{key === 'email' ? ( {key === 'email' ? (
<a className="break-words text-gray-600 transition hover:text-pop-pink" href={`mailto:${value}`}> <a className="break-words text-muted-text transition hover:text-brand-primary" href={`mailto:${value}`}>
{value} {value}
</a> </a>
) : ( ) : (
<p className="whitespace-pre-wrap break-words text-gray-600">{value}</p> <p className="whitespace-pre-wrap break-words text-muted-text">{value}</p>
)} )}
</article> </article>
) )
apps/website/src/components/navigation/DesktopMegaMenu.tsx
+5 -5
View File
@@ -43,8 +43,8 @@ export function DesktopMegaMenu({ items, lang, currentPath }: DesktopMegaMenuPro
href={item.url || '#'} href={item.url || '#'}
className={`flex items-center gap-1 border-b py-2 transition-colors ${ className={`flex items-center gap-1 border-b py-2 transition-colors ${
isOpen || isActive isOpen || isActive
? 'border-pop-pink text-pop-black' ? 'border-brand-primary text-text-main'
: 'border-transparent text-pop-black hover:border-pop-pink hover:text-pop-black' : 'border-transparent text-text-main hover:border-brand-primary hover:text-text-main'
}`} }`}
> >
{getLocalizedMenuText(item.label, lang)} {getLocalizedMenuText(item.label, lang)}
@@ -69,11 +69,11 @@ export function DesktopMegaMenu({ items, lang, currentPath }: DesktopMegaMenuPro
onMouseEnter={() => handleOpen(uniqueId)} onMouseEnter={() => handleOpen(uniqueId)}
onMouseLeave={handleClose} onMouseLeave={handleClose}
> >
<div className="w-full cursor-default border-b border-black/5 bg-white/95 shadow-brutal backdrop-blur-xl"> <div className="w-full cursor-default border-b border-black/5 bg-surface-card/95 shadow-card backdrop-blur-xl">
<div className="mx-auto flex max-w-7xl justify-center gap-16 px-6 py-10"> <div className="mx-auto flex max-w-7xl justify-center gap-16 px-6 py-10">
{item.columns!.map((column, columnIndex) => ( {item.columns!.map((column, columnIndex) => (
<div key={columnIndex} className="flex min-w-[140px] flex-col text-left"> <div key={columnIndex} className="flex min-w-[140px] flex-col text-left">
<h4 className="mb-4 text-[10px] font-bold uppercase tracking-widest text-pop-black/50"> <h4 className="mb-4 text-[10px] font-bold uppercase tracking-widest text-text-main/50">
{getLocalizedMenuText(column.title, lang)} {getLocalizedMenuText(column.title, lang)}
</h4> </h4>
<ul className="space-y-3"> <ul className="space-y-3">
@@ -81,7 +81,7 @@ export function DesktopMegaMenu({ items, lang, currentPath }: DesktopMegaMenuPro
<li key={linkIndex}> <li key={linkIndex}>
<Link <Link
href={link.url || '#'} href={link.url || '#'}
className="block text-sm font-normal normal-case tracking-normal text-pop-black/65 transition-colors hover:text-pop-pink" className="block text-sm font-normal normal-case tracking-normal text-text-main/65 transition-colors hover:text-brand-primary"
> >
{getLocalizedMenuText(link.label, lang)} {getLocalizedMenuText(link.label, lang)}
</Link> </Link>
apps/website/src/components/navigation/MobileDrawer.tsx
+24 -24
View File
@@ -57,22 +57,22 @@ export function MobileDrawer({
const pushView = (node: MenuNode) => setStack((prev) => [...prev, node]) const pushView = (node: MenuNode) => setStack((prev) => [...prev, node])
const popView = () => setStack((prev) => (prev.length > 1 ? prev.slice(0, -1) : prev)) const popView = () => setStack((prev) => (prev.length > 1 ? prev.slice(0, -1) : prev))
const linkClass = 'block w-full py-4 text-left text-sm font-medium uppercase tracking-wide text-pop-black/65 transition-colors hover:text-pop-pink' const linkClass = 'ui-menu-link py-4'
const nestedLinkClass = 'block w-full py-2 text-left text-xs uppercase tracking-widest text-pop-black/65 transition-colors hover:text-pop-pink' const nestedLinkClass = 'ui-menu-link-compact py-2'
const renderView = (view: MenuNode) => { const renderView = (view: MenuNode) => {
if (view.type === 'root') { if (view.type === 'root') {
return ( return (
<div className="space-y-1 px-6 py-2"> <div className="space-y-1 px-6 py-2">
{view.data.map((item, index) => ( {view.data.map((item, index) => (
<div key={item.id || item.nodeId || `menu-root-${index}`} className="border-b border-pop-black/10 last:border-0"> <div key={item.id || item.nodeId || `menu-root-${index}`} className="border-b border-text-main/10 last:border-0">
{item.columns?.length ? ( {item.columns?.length ? (
<button <button
onClick={() => pushView({ type: 'mega', data: item.columns!, title: item.label })} onClick={() => pushView({ type: 'mega', data: item.columns!, title: item.label })}
className="group flex w-full items-center justify-between py-4 text-sm font-medium uppercase tracking-wide text-pop-black/65 transition-colors hover:text-pop-pink" className="group flex w-full items-center justify-between py-4 text-sm font-medium uppercase tracking-wide text-text-main/65 transition-colors hover:text-brand-primary"
> >
<span>{getLocalizedMenuText(item.label, lang)}</span> <span>{getLocalizedMenuText(item.label, lang)}</span>
<ChevronRight className="h-4 w-4 text-pop-black/35 transition-colors group-hover:text-pop-pink" /> <ChevronRight className="h-4 w-4 text-text-main/35 transition-colors group-hover:text-brand-primary" />
</button> </button>
) : ( ) : (
<Link href={item.url || '#'} onClick={onClose} className={linkClass}> <Link href={item.url || '#'} onClick={onClose} className={linkClass}>
@@ -82,7 +82,7 @@ export function MobileDrawer({
</div> </div>
))} ))}
{customerName && ( {customerName && (
<div className="border-b border-pop-black/10"> <div className="border-b border-text-main/10">
<Link href="/profile" onClick={onClose} className={linkClass}> <Link href="/profile" onClick={onClose} className={linkClass}>
My Profile My Profile
</Link> </Link>
@@ -97,7 +97,7 @@ export function MobileDrawer({
<div className="px-6 py-4"> <div className="px-6 py-4">
{view.data.map((column, columnIndex) => ( {view.data.map((column, columnIndex) => (
<div key={columnIndex} className="mb-8 last:mb-0"> <div key={columnIndex} className="mb-8 last:mb-0">
<h4 className="mb-4 text-[10px] font-bold uppercase tracking-widest text-pop-black/45"> <h4 className="mb-4 text-[10px] font-bold uppercase tracking-widest text-text-main/45">
{getLocalizedMenuText(column.title, lang)} {getLocalizedMenuText(column.title, lang)}
</h4> </h4>
<div className="space-y-2"> <div className="space-y-2">
@@ -106,10 +106,10 @@ export function MobileDrawer({
{link.links?.length ? ( {link.links?.length ? (
<button <button
onClick={() => pushView({ type: 'links', data: link.links!, title: link.label })} onClick={() => pushView({ type: 'links', data: link.links!, title: link.label })}
className="group flex w-full items-center justify-between py-2 text-xs uppercase tracking-widest text-pop-black/65 transition-colors hover:text-pop-pink" className="group flex w-full items-center justify-between py-2 text-xs uppercase tracking-widest text-text-main/65 transition-colors hover:text-brand-primary"
> >
<span>{getLocalizedMenuText(link.label, lang)}</span> <span>{getLocalizedMenuText(link.label, lang)}</span>
<ChevronRight className="h-4 w-4 text-pop-black/35 transition-colors group-hover:text-pop-pink" /> <ChevronRight className="h-4 w-4 text-text-main/35 transition-colors group-hover:text-brand-primary" />
</button> </button>
) : ( ) : (
<Link href={link.url || '#'} onClick={onClose} className={nestedLinkClass}> <Link href={link.url || '#'} onClick={onClose} className={nestedLinkClass}>
@@ -132,10 +132,10 @@ export function MobileDrawer({
{link.links?.length ? ( {link.links?.length ? (
<button <button
onClick={() => pushView({ type: 'links', data: link.links!, title: link.label })} onClick={() => pushView({ type: 'links', data: link.links!, title: link.label })}
className="group flex w-full items-center justify-between py-2 text-xs uppercase tracking-widest text-pop-black/65 transition-colors hover:text-pop-pink" className="group flex w-full items-center justify-between py-2 text-xs uppercase tracking-widest text-text-main/65 transition-colors hover:text-brand-primary"
> >
<span>{getLocalizedMenuText(link.label, lang)}</span> <span>{getLocalizedMenuText(link.label, lang)}</span>
<ChevronRight className="h-4 w-4 text-pop-black/35 transition-colors group-hover:text-pop-pink" /> <ChevronRight className="h-4 w-4 text-text-main/35 transition-colors group-hover:text-brand-primary" />
</button> </button>
) : ( ) : (
<Link href={link.url || '#'} onClick={onClose} className={nestedLinkClass}> <Link href={link.url || '#'} onClick={onClose} className={nestedLinkClass}>
@@ -151,31 +151,31 @@ export function MobileDrawer({
return ( return (
<div className={`fixed inset-0 z-[60] transition-all duration-300 md:hidden ${isOpen ? 'visible' : 'invisible'}`}> <div className={`fixed inset-0 z-[60] transition-all duration-300 md:hidden ${isOpen ? 'visible' : 'invisible'}`}>
<div <div
className={`absolute inset-0 bg-pop-black/40 backdrop-blur-sm transition-opacity duration-300 ${isOpen ? 'opacity-100' : 'opacity-0'}`} className={`absolute inset-0 bg-text-main/40 backdrop-blur-sm transition-opacity duration-300 ${isOpen ? 'opacity-100' : 'opacity-0'}`}
onClick={onClose} onClick={onClose}
/> />
<div <div
className={`absolute right-0 top-0 flex h-full w-80 max-w-[85vw] flex-col bg-white shadow-2xl transition-transform duration-300 ${ className={`absolute right-0 top-0 flex h-full w-80 max-w-[85vw] flex-col bg-surface-card shadow-2xl transition-transform duration-300 ${
isOpen ? 'translate-x-0' : 'translate-x-full' isOpen ? 'translate-x-0' : 'translate-x-full'
}`} }`}
> >
<div className="z-10 flex shrink-0 items-center justify-between border-b border-pop-black/10 bg-white px-6 py-5"> <div className="z-10 flex shrink-0 items-center justify-between border-b border-text-main/10 bg-surface-card px-6 py-5">
<span className="text-sm font-bold uppercase tracking-widest text-pop-black">Menu</span> <span className="text-sm font-bold uppercase tracking-widest text-text-main">Menu</span>
<div className="flex items-center gap-3"> <div className="flex items-center gap-3">
<button <button
onClick={onOpenLang} onClick={onOpenLang}
className="flex shrink-0 items-center gap-1 rounded-md border border-pop-pink/30 bg-pop-bg px-2.5 py-1 text-[10px] font-bold uppercase text-pop-pink" className="flex shrink-0 items-center gap-1 rounded-md border border-brand-primary/30 bg-surface-page px-2.5 py-1 text-[10px] font-bold uppercase text-brand-primary"
> >
<Globe className="h-3 w-3" /> <Globe className="h-3 w-3" />
{lang.toUpperCase()} {lang.toUpperCase()}
</button> </button>
<button onClick={onClose} className="rounded-full p-1.5 text-pop-black/65 transition hover:bg-pop-bg hover:text-pop-pink"> <button onClick={onClose} className="rounded-full p-1.5 text-text-main/65 transition hover:bg-surface-page hover:text-brand-primary">
<X className="h-5 w-5" /> <X className="h-5 w-5" />
</button> </button>
</div> </div>
</div> </div>
<div className="relative flex-1 overflow-hidden bg-white"> <div className="relative flex-1 overflow-hidden bg-surface-card">
{stack.map((view, index) => { {stack.map((view, index) => {
const isCurrent = index === stack.length - 1 const isCurrent = index === stack.length - 1
const isPast = index < stack.length - 1 const isPast = index < stack.length - 1
@@ -183,14 +183,14 @@ export function MobileDrawer({
return ( return (
<div <div
key={index} key={index}
className={`absolute inset-0 flex flex-col bg-white transition-transform duration-300 ease-in-out ${ className={`absolute inset-0 flex flex-col bg-surface-card transition-transform duration-300 ease-in-out ${
isCurrent ? 'translate-x-0' : isPast ? '-translate-x-full' : 'translate-x-full' isCurrent ? 'translate-x-0' : isPast ? '-translate-x-full' : 'translate-x-full'
}`} }`}
> >
{index > 0 && ( {index > 0 && (
<button <button
onClick={popView} onClick={popView}
className="flex shrink-0 items-center border-b border-pop-black/5 px-6 py-4 text-xs font-bold uppercase tracking-widest text-pop-pink transition hover:bg-pop-bg" className="flex shrink-0 items-center border-b border-text-main/5 px-6 py-4 text-xs font-bold uppercase tracking-widest text-brand-primary transition hover:bg-surface-page"
> >
<ChevronLeft className="mr-2 h-4 w-4" /> <ChevronLeft className="mr-2 h-4 w-4" />
Back to {getLocalizedMenuText(stack[index - 1].title, lang)} Back to {getLocalizedMenuText(stack[index - 1].title, lang)}
@@ -199,7 +199,7 @@ export function MobileDrawer({
{index > 0 && ( {index > 0 && (
<div className="shrink-0 px-6 py-5"> <div className="shrink-0 px-6 py-5">
<h3 className="text-lg font-bold uppercase tracking-widest text-pop-black">{getLocalizedMenuText(view.title, lang)}</h3> <h3 className="text-lg font-bold uppercase tracking-widest text-text-main">{getLocalizedMenuText(view.title, lang)}</h3>
</div> </div>
)} )}
@@ -209,11 +209,11 @@ export function MobileDrawer({
})} })}
</div> </div>
<div className="z-10 shrink-0 space-y-3 border-t border-pop-black/10 bg-white px-6 pb-8 pt-6"> <div className="z-10 shrink-0 space-y-3 border-t border-text-main/10 bg-surface-card px-6 pb-8 pt-6">
<Link <Link
href="/shop" href="/shop"
onClick={onClose} onClick={onClose}
className="block w-full rounded-xl bg-pop-black py-3.5 text-center text-xs font-bold uppercase tracking-widest text-white shadow-sm transition-colors hover:bg-pop-pink" className="block w-full rounded-xl bg-text-main py-3.5 text-center text-xs font-bold uppercase tracking-widest text-white shadow-sm transition-colors hover:bg-brand-primary"
> >
Shop Now Shop Now
</Link> </Link>
@@ -233,7 +233,7 @@ export function MobileDrawer({
onLogin() onLogin()
onClose() onClose()
}} }}
className="block w-full rounded-xl border border-[#00B900]/50 py-3.5 text-center text-xs font-bold uppercase tracking-widest text-[#00B900] transition-colors hover:bg-[#00B900]/10" className="block w-full rounded-xl border border-line-primary/50 py-3.5 text-center text-xs font-bold uppercase tracking-widest text-line-primary transition-colors hover:bg-line-primary/10"
> >
Login with LINE Login with LINE
</button> </button>
apps/website/src/store/authStore.ts
+1
View File
@@ -29,6 +29,7 @@ export const useAuthStore = create<AuthState>()(
{ {
name: 'homaroma-auth-storage', name: 'homaroma-auth-storage',
partialize: (state) => ({ token: state.token, customer: state.customer }), partialize: (state) => ({ token: state.token, customer: state.customer }),
skipHydration: true,
}, },
), ),
) )
apps/website/src/store/cartStore.ts
+1
View File
@@ -73,6 +73,7 @@ export const useCartStore = create<CartState>()(
{ {
name: 'homaroma-cart-storage', name: 'homaroma-cart-storage',
partialize: (state) => ({ items: state.items }), // Only persist items, not UI state partialize: (state) => ({ items: state.items }), // Only persist items, not UI state
skipHydration: true,
} }
) )
); );
apps/website/src/store/wishlistStore.ts
+1
View File
@@ -42,6 +42,7 @@ export const useWishlistStore = create<WishlistState>()(
{ {
name: 'homaroma-wishlist', name: 'homaroma-wishlist',
partialize: (state) => ({ items: state.items }), partialize: (state) => ({ items: state.items }),
skipHydration: true,
}, },
), ),
) )