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()
return (
<main className="min-h-[70vh] bg-pop-bg px-6 py-24">
<div className="mx-auto max-w-3xl rounded-3xl border border-rose-100 bg-white px-6 py-16 text-center shadow-brutal">
<main className="min-h-[70vh] bg-surface-page px-6 py-24 text-text-main">
<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>
<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>
<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)
return (
<main className="min-h-[70vh] bg-pop-bg">
<main className="min-h-[70vh] bg-surface-page text-text-main">
{sections.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">
<p className="text-xs font-bold uppercase tracking-[0.28em] text-pop-pink">HomAroma</p>
<h1 className="mt-4 text-4xl font-semibold text-pop-black md:text-5xl">{page.title}</h1>
<p className="mt-5 text-gray-600">
<p className="text-xs font-bold uppercase tracking-[0.28em] text-brand-primary">HomAroma</p>
<h1 className="mt-4 text-4xl font-semibold text-text-main md:text-5xl">{page.title}</h1>
<p className="mt-5 text-muted-text">
หน้านี้ถูกเผยแพร่แล้ว แต่ยังไม่มี section ที่เปิดใช้งานใน Page Builder
</p>
</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() {
return (
<div className="min-h-screen bg-pop-bg">
<section className="relative flex min-h-[60vh] items-center justify-center overflow-hidden bg-white pt-24">
<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-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="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>
<h1 className="text-5xl font-bold leading-tight text-pop-black md:text-7xl">
Born from a passion for <span className="italic text-pop-pink">stillness</span>
<p className="ui-eyebrow">Our Story</p>
<h1 className="text-5xl font-bold leading-tight text-text-main md:text-7xl">
Born from a passion for <span className="italic text-brand-primary">stillness</span>
</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.
</p>
</div>
</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">
{STATS.map(s => (
<div key={s.label} className="space-y-1">
<div className="text-4xl font-bold text-pop-pink">{s.value}</div>
<div className="text-xs uppercase tracking-widest text-gray-500">{s.label}</div>
<div className="text-4xl font-bold text-brand-primary">{s.value}</div>
<div className="text-xs uppercase tracking-widest text-muted-text">{s.label}</div>
</div>
))}
</div>
@@ -66,40 +66,40 @@ export default function AboutPage() {
<section className="px-6 py-24">
<div className="mx-auto grid max-w-6xl items-center gap-16 md:grid-cols-2">
<div className="space-y-6">
<p className="text-xs font-semibold uppercase tracking-[0.3em] text-pop-pink">Our Mission</p>
<h2 className="text-4xl font-bold leading-tight text-pop-black">Transforming spaces into sanctuaries of peace</h2>
<p className="leading-relaxed text-gray-700">
<p className="ui-eyebrow">Our Mission</p>
<h2 className="text-4xl font-bold leading-tight text-text-main">Transforming spaces into sanctuaries of peace</h2>
<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.
</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.
</p>
</div>
<div className="relative h-80 overflow-hidden rounded-3xl border border-gray-100 bg-white shadow-brutal">
<div className="absolute inset-0 bg-gradient-to-br from-pop-bg via-white to-pop-orange/20" />
<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-surface-page via-white to-brand-warm/20" />
<div className="absolute inset-0 flex items-center justify-center">
<div className="space-y-3 text-center">
<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>
</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="space-y-3 text-center">
<p className="text-xs font-semibold uppercase tracking-[0.3em] text-pop-pink">What We Stand For</p>
<h2 className="text-4xl font-bold text-pop-black">Three Pillars</h2>
<div className="mx-auto h-px w-12 bg-pop-pink" />
<p className="ui-eyebrow">What We Stand For</p>
<h2 className="text-4xl font-bold text-text-main">Three Pillars</h2>
<div className="mx-auto h-px w-12 bg-brand-primary" />
</div>
<div className="grid gap-8 md:grid-cols-3">
{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>
<h3 className="text-xl font-bold text-pop-black">{p.title}</h3>
<p className="text-sm leading-relaxed text-gray-600">{p.desc}</p>
<h3 className="text-xl font-bold text-text-main">{p.title}</h3>
<p className="text-sm leading-relaxed text-muted-text">{p.desc}</p>
</div>
))}
</div>
@@ -107,13 +107,13 @@ export default function AboutPage() {
</section>
<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>
<p className="mx-auto max-w-md text-gray-600">Let our Scent Guide help you discover the perfect blend for your moment.</p>
<h2 className="text-4xl font-bold text-text-main">Ready to find your scent?</h2>
<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">
<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
</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
</Link>
</div>
apps/website/src/app/[lang]/article/[slug]/page.tsx
+10 -9
View File
@@ -1,4 +1,5 @@
import Link from '@/components/LocalizedLink'
import Image from 'next/image'
import { notFound } from 'next/navigation'
import type { Metadata } from 'next'
import { generateSeoMetadata } from '@/lib/seo'
@@ -39,38 +40,38 @@ export default async function ArticleReaderPage({ params }: { params: Promise<{
if (!article) notFound()
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">
<article className="relative mx-auto mt-8 w-full max-w-4xl">
<Link
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" />
</Link>
<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
</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' })}
</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}
</h1>
</div>
{article.coverImage && (
<div className="mb-16 aspect-[16/7] w-full overflow-hidden bg-white shadow-brutal md:rounded-[2rem]">
<img src={article.coverImage} alt={article.title} className="h-full w-full object-cover" />
<div className="relative mb-16 aspect-[16/7] w-full overflow-hidden bg-surface-card shadow-card md:rounded-[2rem]">
<Image src={article.coverImage} alt={article.title} fill unoptimized className="h-full w-full object-cover" />
</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
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>
</article>
apps/website/src/app/[lang]/category/[id]/page.tsx
+24 -21
View File
@@ -1,4 +1,5 @@
import Link from '@/components/LocalizedLink'
import Image from 'next/image'
import { notFound } from 'next/navigation'
import type { Metadata } from 'next'
import { generateSeoMetadata } from '@/lib/seo'
@@ -54,15 +55,15 @@ export default async function CategoryPage({ params }: { params: Promise<{ id: s
if (categoryProductsResult.status === 404) notFound()
return (
<div className="min-h-screen bg-pop-bg">
<div className="min-h-screen bg-surface-page text-text-main">
{announcementSections.length > 0 && (
<DynamicPageRenderer sections={announcementSections} categories={categories} lang={lang} />
)}
<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">
<p className="text-lg font-semibold text-pop-black">Unable to load this category</p>
<div className="ui-panel mx-auto max-w-3xl border border-rose-100 p-10 text-center">
<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>
<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>
@@ -76,30 +77,32 @@ export default async function CategoryPage({ params }: { params: Promise<{ id: s
const categoryName = resolveLocalized(category.name, lang)
return (
<div className="min-h-screen bg-pop-bg">
<div className="min-h-screen bg-surface-page text-text-main">
{announcementSections.length > 0 && (
<DynamicPageRenderer sections={announcementSections} categories={categories} lang={lang} />
)}
{heroSections.length > 0 ? (
<DynamicPageRenderer sections={heroSections} categories={categories} lang={lang} />
) : (
<section className="relative overflow-hidden bg-white">
<img
<section className="relative overflow-hidden bg-surface-card">
<Image
src={category.imageUrl || getCategoryImage(categoryName)}
className="absolute inset-0 h-full w-full object-cover"
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="mb-5 flex items-center gap-2 text-xs font-semibold uppercase tracking-widest text-gray-500">
<Link href="/" className="transition hover:text-pop-pink">Home</Link>
<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-brand-primary">Home</Link>
<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 className="text-pop-black">{categoryName}</span>
<span className="text-text-main">{categoryName}</span>
</div>
<h1 className="text-5xl font-semibold text-pop-black md:text-6xl">{categoryName}</h1>
{category._count && <p className="mt-3 text-gray-600">{category._count.products} products available</p>}
<h1 className="text-5xl font-semibold text-text-main md:text-6xl">{categoryName}</h1>
{category._count && <p className="mt-3 text-muted-text">{category._count.products} products available</p>}
</div>
</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="flex flex-wrap gap-3">
{!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
</span>
)}
@@ -121,8 +124,8 @@ export default async function CategoryPage({ params }: { params: Promise<{ id: s
href={`/category/${item.id}`}
className={`rounded-full px-5 py-2 text-xs font-bold uppercase tracking-widest transition ${
isActive
? 'bg-pop-black text-white'
: 'border border-gray-200 bg-white text-gray-600 hover:border-pop-pink hover:text-pop-pink'
? 'bg-text-main text-white'
: 'border border-line-primary/20 bg-surface-card text-muted-text hover:border-brand-primary hover:text-brand-primary'
}`}
>
{name}
@@ -132,9 +135,9 @@ export default async function CategoryPage({ params }: { params: Promise<{ id: s
</div>
{products.length === 0 ? (
<div className="rounded-3xl bg-white px-6 py-20 text-center shadow-brutal">
<p className="text-lg font-semibold text-pop-black">No products in this category yet.</p>
<Link href="/shop" className="mt-4 inline-flex font-semibold text-pop-pink">Back to Shop</Link>
<div className="ui-panel px-6 py-20 text-center">
<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-brand-primary">Back to Shop</Link>
</div>
) : (
<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 (
<main className="min-h-[70vh] bg-pop-bg">
<main className="min-h-[70vh] bg-surface-page text-text-main">
{announcementSections.length > 0 && (
<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} />
) : (
<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" />
</div>
<p className="text-xs font-bold uppercase tracking-[0.28em] text-pop-pink">Secure Checkout</p>
<h1 className="mt-4 text-4xl font-semibold text-pop-black md:text-5xl">ยืนยันคำสั่งซื้อ</h1>
<p className="mx-auto mt-4 max-w-2xl text-gray-600">
<p className="ui-eyebrow">Secure Checkout</p>
<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-muted-text">
ตรวจสอบรายการสินค้า ใช้คูปองหรือคะแนนสะสม และสร้างคำสั่งซื้อเพื่อไปยังหน้ารายละเอียดออเดอร์
</p>
</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'
type FormState = { name: string; email: string; subject: string; message: string }
@@ -22,17 +22,17 @@ export default function ContactPage() {
}
return (
<div className="min-h-screen bg-pop-bg">
<div className="space-y-4 border-b border-gray-200 bg-white 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>
<h1 className="text-5xl font-bold text-pop-black">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>
<div className="min-h-screen bg-surface-page">
<div className="space-y-4 border-b border-line-primary/20 bg-surface-card px-6 pb-16 pt-32 text-center">
<p className="ui-eyebrow">Get in Touch</p>
<h1 className="text-5xl font-bold text-text-main">Contact Us</h1>
<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 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>
<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">
{[
{ 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: '#' },
].map(item => (
<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>
<p className="text-xs uppercase tracking-widest text-gray-500">{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-xs uppercase tracking-widest text-muted-text">{item.label}</p>
<p className="text-sm font-medium text-text-main transition-colors group-hover:text-brand-primary">{item.value}</p>
</div>
</a>
))}
</div>
</div>
<div className="space-y-3 rounded-3xl border border-gray-100 bg-white p-6 shadow-brutal">
<h3 className="text-sm font-bold uppercase tracking-widest text-pop-black">Response Time</h3>
<div className="ui-panel space-y-3 p-6">
<h3 className="text-sm font-bold uppercase tracking-widest text-text-main">Response Time</h3>
<div className="space-y-2 text-sm">
{[['Email', '~2 hours'], ['LINE', '~30 minutes'], ['Instagram DM', '~4 hours']].map(([k, v]) => (
<div key={k} className="flex justify-between">
<span className="text-gray-600">{k}</span>
<span className="font-medium text-pop-pink">{v}</span>
<span className="text-muted-text">{k}</span>
<span className="font-medium text-brand-primary">{v}</span>
</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 className="md:col-span-3">
{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="text-6xl">✉️</div>
<h2 className="text-2xl font-bold text-pop-black">Message Sent!</h2>
<p className="text-gray-600">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">
<h2 className="text-2xl font-bold text-text-main">Message Sent!</h2>
<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-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
</button>
</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="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"
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 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"
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">
<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}
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>
{SUBJECTS.map(s => <option key={s} value={s}>{s}</option>)}
</select>
</div>
<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..."
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>
<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' ? (
<><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 ->'}
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 (
<main className="min-h-[70vh] bg-pop-bg">
<main className="min-h-[70vh] bg-surface-page text-text-main">
{announcementSections.length > 0 && (
<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="space-y-4 text-center">
<p className="text-xs font-bold uppercase tracking-[0.28em] text-pop-pink">Offers</p>
<h1 className="text-4xl font-semibold text-pop-black md:text-5xl">
<p className="ui-eyebrow">Offers</p>
<h1 className="text-4xl font-semibold text-text-main md:text-5xl">
Exclusive Offers
</h1>
<p className="mx-auto max-w-2xl text-gray-600">
<p className="mx-auto max-w-2xl text-muted-text">
คูปองส่วนลดพิเศษสำหรับคุณ เลือกใช้คูปองที่คุณต้องการแล้วไปช้อปกันเลย!
</p>
</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">
{!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" />
<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>
</div>
) : coupons.length === 0 ? (
<div className="rounded-3xl bg-white px-6 py-20 text-center shadow-brutal">
<Ticket className="mx-auto mb-4 h-16 w-16 text-gray-300" />
<h2 className="mb-2 text-xl font-semibold text-pop-black">ยังไม่มีคูปองส่วนลดในขณะนี้</h2>
<p className="mb-6 text-gray-500">กรุณากลับมาตรวจสอบโปรโมชั่นใหม่ในภายหลัง</p>
<div className="ui-panel px-6 py-20 text-center">
<Ticket className="mx-auto mb-4 h-16 w-16 text-muted-text/40" />
<h2 className="mb-2 text-xl font-semibold text-text-main">ยังไม่มีคูปองส่วนลดในขณะนี้</h2>
<p className="mb-6 text-muted-text">กรุณากลับมาตรวจสอบโปรโมชั่นใหม่ในภายหลัง</p>
<Link
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>
@@ -84,11 +84,11 @@ export default async function CouponsPage({ params }: { params: Promise<{ lang:
{coupons.map((coupon) => (
<article
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="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" />
</div>
{coupon.expiresAt && (
@@ -99,23 +99,23 @@ export default async function CouponsPage({ params }: { params: Promise<{ lang:
</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)}
</h3>
<p className="text-sm text-gray-500">
<p className="text-sm text-muted-text">
เมื่อซื้อครบ {coupon.minPurchase} บาท
</p>
</div>
<div className="rounded-xl border border-dashed border-pop-pink/40 bg-pop-bg p-3 text-center">
<span className="font-mono font-bold uppercase tracking-widest text-pop-pink">
<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-brand-primary">
{coupon.code}
</span>
</div>
<Link
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" />
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 Link from '@/components/LocalizedLink'
@@ -44,11 +44,11 @@ export default function FaqPage() {
const activeFaqs = FAQS.find(f => f.category === activeCategory)
return (
<div className="min-h-screen bg-pop-bg">
<div className="space-y-4 border-b border-gray-200 bg-white px-6 pb-16 pt-32 text-center">
<p className="text-xs font-semibold uppercase tracking-[0.4em] text-pop-pink">Support</p>
<h1 className="text-5xl font-bold text-pop-black">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>
<div className="min-h-screen bg-surface-page text-text-main">
<div className="space-y-4 border-b border-line-primary/20 bg-surface-card px-6 pb-16 pt-32 text-center">
<p className="ui-eyebrow">Support</p>
<h1 className="text-5xl font-bold text-text-main">Frequently Asked Questions</h1>
<p className="mx-auto max-w-lg text-muted-text">Everything you need to know about HomAroma products, shipping, and care.</p>
</div>
<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)}
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
? 'bg-pop-black text-white shadow-brutal'
: 'border border-gray-200 bg-white text-pop-black hover:border-pop-pink hover:text-pop-pink'
? 'ui-tab-button-active bg-text-main text-white shadow-card'
: 'ui-tab-button-inactive border border-line-primary/20 bg-surface-card hover:border-brand-primary hover:text-brand-primary'
}`}
>
<span>{icon}</span> {category}
@@ -73,17 +73,17 @@ export default function FaqPage() {
const key = `${activeCategory}-${i}`
const isOpen = openItems[key]
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">
<span className="text-sm font-semibold leading-snug text-pop-black 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">
<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-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" />
</svg>
</button>
{isOpen && (
<div className="px-6 pb-6">
<div className="mb-4 h-px w-full bg-gray-100" />
<p className="text-sm leading-relaxed text-gray-600">{item.a}</p>
<div className="mb-4 h-px w-full bg-line-primary/10" />
<p className="text-sm leading-relaxed text-muted-text">{item.a}</p>
</div>
)}
</div>
@@ -91,11 +91,11 @@ export default function FaqPage() {
})}
</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>
<h3 className="text-xl font-bold text-pop-black">Still have questions?</h3>
<p className="text-sm text-gray-600">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">
<h3 className="text-xl font-bold text-text-main">Still have questions?</h3>
<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-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
</Link>
</div>
apps/website/src/app/[lang]/layout.tsx
+2 -10
View File
@@ -1,5 +1,4 @@
import type { Metadata } from 'next';
import { Sarabun } from 'next/font/google';
import { notFound } from 'next/navigation';
import '../globals.css';
import Navbar from '@/components/Navbar';
@@ -10,13 +9,6 @@ import type { MegaMenuPayload } from '@/components/navigation/menuTypes';
import type { MenuItem, StoreSettings } from '@homaroma/types';
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 = {
title: 'HomAroma',
description: 'Pure Origins, Artisan Craft, Zero Compromise',
@@ -104,8 +96,8 @@ export default async function RootLayout({
]);
return (
<html lang={lang} className={`${lang === 'th' ? sarabun.variable : ''} scroll-smooth`}>
<body className="min-h-screen bg-pop-bg text-pop-black font-sans antialiased">
<html lang={lang} className="scroll-smooth">
<body className="min-h-screen bg-surface-page text-text-main font-sans antialiased">
<ClientProviders>
<Navbar categories={categories} initialMenu={initialMenu} settings={settings} />
<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 Image from 'next/image'
import { notFound } from 'next/navigation'
import type { Metadata } from 'next'
import { generateSeoMetadata } from '@/lib/seo'
@@ -28,11 +29,11 @@ function statusLabel(status: string) {
}
function statusTone(status: string) {
if (status === 'PENDING_PAYMENT') return 'bg-amber-50 text-amber-700 border-amber-100'
if (status === 'PAID' || status === 'PROCESSING') return 'bg-emerald-50 text-emerald-700 border-emerald-100'
if (status === 'SHIPPED' || status === 'DELIVERED') return 'bg-sky-50 text-sky-700 border-sky-100'
if (status === 'PENDING_PAYMENT') return 'bg-brand-warm/15 text-amber-700 border-amber-100'
if (status === 'PAID' || status === 'PROCESSING') return 'bg-brand-success/20 text-emerald-700 border-emerald-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'
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> {
@@ -68,15 +69,15 @@ export default async function OrderStatusPage({ params }: { params: Promise<{ id
if (orderResult.status === 404) notFound()
return (
<main className="min-h-[70vh] bg-pop-bg">
<main className="min-h-[70vh] bg-surface-page">
{announcementSections.length > 0 && (
<DynamicPageRenderer sections={announcementSections} categories={categories} lang={lang} />
)}
<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">
<h1 className="text-2xl font-semibold text-pop-black">ไม่สามารถโหลดคำสั่งซื้อนี้ได้</h1>
<div className="ui-panel border border-rose-100 p-10">
<h1 className="text-2xl font-semibold text-text-main">ไม่สามารถโหลดคำสั่งซื้อนี้ได้</h1>
<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>
</section>
</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)
return (
<main className="min-h-[70vh] bg-pop-bg">
<main className="min-h-[70vh] bg-surface-page">
{announcementSections.length > 0 && (
<DynamicPageRenderer sections={announcementSections} categories={categories} lang={lang} />
)}
<section className="mx-auto max-w-4xl space-y-8 px-6 py-16 md:py-20">
<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" />
</div>
<p className="text-xs font-bold uppercase tracking-[0.28em] text-pop-pink">Order Status</p>
<h1 className="mt-4 text-4xl font-semibold text-pop-black md:text-5xl">
<p className="ui-eyebrow">Order Status</p>
<h1 className="mt-4 text-4xl font-semibold text-text-main md:text-5xl">
{orderLabel(order.id)}
</h1>
<p className="mt-3 text-gray-600">คำสั่งซื้อของคุณถูกบันทึกแล้ว สามารถตรวจสอบสถานะล่าสุดได้จากหน้านี้</p>
<p className="mt-3 text-muted-text">คำสั่งซื้อของคุณถูกบันทึกแล้ว สามารถตรวจสอบสถานะล่าสุดได้จากหน้านี้</p>
</div>
<section className="grid gap-5 md:grid-cols-3">
<article className="rounded-3xl bg-white p-6 shadow-brutal">
<Clock className="mb-4 h-6 w-6 text-pop-pink" />
<p className="text-xs font-bold uppercase tracking-[0.22em] text-gray-400">Created</p>
<p className="mt-2 font-semibold text-pop-black">
<article className="ui-panel p-6">
<Clock className="mb-4 h-6 w-6 text-brand-primary" />
<p className="text-xs font-bold uppercase tracking-[0.22em] text-muted-text/70">Created</p>
<p className="mt-2 font-semibold text-text-main">
{new Date(order.createdAt).toLocaleDateString('th-TH')}
</p>
</article>
<article className="rounded-3xl bg-white p-6 shadow-brutal">
<PackageCheck className="mb-4 h-6 w-6 text-pop-pink" />
<p className="text-xs font-bold uppercase tracking-[0.22em] text-gray-400">Status</p>
<article className="ui-panel p-6">
<PackageCheck className="mb-4 h-6 w-6 text-brand-primary" />
<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)}`}>
{statusLabel(order.status)}
</span>
</article>
<article className="rounded-3xl bg-white p-6 shadow-brutal">
<Truck className="mb-4 h-6 w-6 text-pop-pink" />
<p className="text-xs font-bold uppercase tracking-[0.22em] text-gray-400">Tracking No.</p>
<p className="mt-2 font-semibold text-pop-black">{order.trackingNo || 'อยู่ระหว่างจัดเตรียมพัสดุ'}</p>
<article className="ui-panel p-6">
<Truck className="mb-4 h-6 w-6 text-brand-primary" />
<p className="text-xs font-bold uppercase tracking-[0.22em] text-muted-text/70">Tracking No.</p>
<p className="mt-2 font-semibold text-text-main">{order.trackingNo || 'อยู่ระหว่างจัดเตรียมพัสดุ'}</p>
</article>
</section>
<section className="rounded-3xl bg-white p-8 shadow-brutal">
<h2 className="border-b border-gray-100 pb-4 text-sm font-bold uppercase tracking-[0.22em] text-pop-pink">
<section className="ui-panel p-8">
<h2 className="border-b border-line-primary/20 pb-4 text-sm font-bold uppercase tracking-[0.22em] text-brand-primary">
Order Items
</h2>
<div className="mt-6 space-y-4">
{order.items.map((item) => (
<div key={item.id} className="flex items-center gap-4 rounded-2xl bg-pop-bg p-4">
<div className="h-14 w-14 shrink-0 overflow-hidden rounded-xl bg-white">
<img
<div key={item.id} className="flex items-center gap-4 rounded-2xl bg-surface-page p-4">
<div className="relative h-14 w-14 shrink-0 overflow-hidden rounded-xl bg-surface-card">
<Image
src={item.productImage || '/images/oil_ozone.png'}
alt={item.productName}
fill
unoptimized
className="h-full w-full object-cover"
/>
</div>
<div className="min-w-0 flex-1">
<p className="font-semibold text-pop-black">{item.productName}</p>
<p className="text-sm text-gray-500">
<p className="font-semibold text-text-main">{item.productName}</p>
<p className="text-sm text-muted-text">
{item.variantSize ? `${item.variantSize} · ` : ''}x {item.quantity}
</p>
</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 className="mt-6 space-y-3 border-t border-gray-100 pt-5 text-sm">
<div className="flex justify-between text-gray-500">
<div className="mt-6 space-y-3 border-t border-line-primary/20 pt-5 text-sm">
<div className="flex justify-between text-muted-text">
<span>Subtotal</span>
<span>{formatPrice(subtotal)}</span>
</div>
<div className="flex justify-between text-gray-500">
<div className="flex justify-between text-muted-text">
<span>Shipping Fee</span>
<span>{formatPrice(order.shippingFee)}</span>
</div>
@@ -166,15 +169,15 @@ export default async function OrderStatusPage({ params }: { params: Promise<{ id
<span>-{formatPrice(order.discountAmount)}</span>
</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 className="text-pop-pink">{formatPrice(order.totalAmount)}</span>
<span className="text-brand-primary">{formatPrice(order.totalAmount)}</span>
</div>
</div>
</section>
{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>
<p className="mt-2 text-sm leading-relaxed">
หน้านี้รองรับการตรวจสอบสถานะคำสั่งซื้อแล้ว ส่วนการชำระเงินและอัปโหลดสลิปบน 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">
<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 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>
</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)
return (
<div className="min-h-screen bg-pop-bg">
<div className="min-h-screen bg-surface-page text-text-main">
{sections.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">
<p className="mb-4 text-xs font-bold uppercase tracking-[0.28em] text-pop-pink">
<p className="mb-4 ui-eyebrow">
HomAroma
</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
</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.
</p>
</section>
apps/website/src/app/[lang]/products/[id]/page.tsx
+24 -21
View File
@@ -1,4 +1,5 @@
import Link from '@/components/LocalizedLink'
import Image from 'next/image'
import { notFound } from 'next/navigation'
import type { Metadata } from 'next'
import { generateSeoMetadata } from '@/lib/seo'
@@ -58,15 +59,15 @@ export default async function ProductDetailPage({ params }: { params: Promise<{
if (productResult.status === 404) notFound()
return (
<div className="min-h-screen bg-pop-bg">
<div className="min-h-screen bg-surface-page text-text-main">
{announcementSections.length > 0 && (
<DynamicPageRenderer sections={announcementSections} categories={categories} lang={lang} />
)}
<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">
<p className="text-lg font-semibold text-pop-black">Unable to load this product</p>
<div className="ui-panel mx-auto max-w-3xl border border-rose-100 p-10 text-center">
<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>
<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>
@@ -81,32 +82,34 @@ export default async function ProductDetailPage({ params }: { params: Promise<{
const imageUrl = product.images?.[0]?.url || product.category.imageUrl || getCategoryImage(categoryName)
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 && (
<DynamicPageRenderer sections={announcementSections} categories={categories} lang={lang} />
)}
<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">
<Link href="/" className="transition hover:text-pop-pink">Home</Link>
<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-brand-primary">Home</Link>
<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>
<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}
</Link>
<span>/</span>
<span className="text-pop-black">{productName}</span>
<span className="text-text-main">{productName}</span>
</nav>
<section className="grid gap-10 md:grid-cols-2 md:gap-16">
<div className="relative overflow-hidden rounded-3xl bg-white shadow-brutal">
<img
<div className="relative overflow-hidden rounded-3xl bg-surface-card shadow-card">
<Image
src={imageUrl}
className="aspect-square h-full w-full object-cover"
alt={productName}
fill
unoptimized
className="aspect-square h-full w-full object-cover"
/>
{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}
</div>
)}
@@ -116,10 +119,10 @@ export default async function ProductDetailPage({ params }: { params: Promise<{
</section>
{details && (
<section className="rounded-3xl bg-white p-8 shadow-brutal md:p-12">
<h2 className="mb-6 text-3xl font-semibold text-pop-black">Product Details</h2>
<section className="ui-panel p-8 md:p-12">
<h2 className="mb-6 text-3xl font-semibold text-text-main">Product Details</h2>
<div
className="product-editorial leading-relaxed text-gray-600"
className="product-editorial leading-relaxed text-muted-text"
dangerouslySetInnerHTML={{ __html: details }}
/>
</section>
@@ -127,14 +130,14 @@ export default async function ProductDetailPage({ params }: { params: Promise<{
{related.length > 0 && (
<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>
<p className="mb-2 text-xs font-bold uppercase tracking-[0.28em] text-pop-pink">
<p className="mb-2 ui-eyebrow">
More {categoryName}
</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>
<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;
</Link>
</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 (
<main className="min-h-[70vh] bg-pop-bg">
<main className="min-h-[70vh] bg-surface-page text-text-main">
{announcementSections.length > 0 && (
<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} />
) : (
<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" />
</div>
<p className="text-xs font-bold uppercase tracking-[0.28em] text-pop-pink">Member Profile</p>
<h1 className="mt-4 text-4xl font-semibold text-pop-black md:text-5xl">โปรไฟล์ของฉัน</h1>
<p className="mx-auto mt-4 max-w-2xl text-gray-600">
<p className="ui-eyebrow">Member Profile</p>
<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-muted-text">
ตรวจสอบประวัติคำสั่งซื้อ คะแนนสะสม และจัดการที่อยู่จัดส่งสำหรับการสั่งซื้อครั้งถัดไป
</p>
</section>
apps/website/src/app/[lang]/scent-guide/page.tsx
+19 -16
View File
@@ -1,4 +1,5 @@
import Link from '@/components/LocalizedLink'
import Image from 'next/image'
import { generateSeoMetadata } from '@/lib/seo'
import DynamicPageRenderer from '@/components/dynamic/DynamicPageRenderer'
import { getArticlesResult, getCategoriesResult, getCmsPageResult } from '@/lib/cms'
@@ -32,28 +33,28 @@ export default async function ScentGuidePage({ params }: { params: Promise<{ lan
}
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 && (
<DynamicPageRenderer sections={announcementSections} categories={categories} lang={lang} />
)}
{heroSections.length > 0 ? (
<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">
<p className="text-xs font-semibold uppercase tracking-[0.4em] text-pop-pink">Journal</p>
<h1 className="text-5xl font-bold text-pop-black">Scent Guide</h1>
<p className="mx-auto max-w-lg text-gray-600">Explore our collection of articles, guides, and sensory knowledge.</p>
<div className="space-y-4 border-b border-line-primary/20 bg-surface-card px-6 pb-16 pt-32 text-center">
<p className="ui-eyebrow">Journal</p>
<h1 className="text-5xl font-bold text-text-main">Scent Guide</h1>
<p className="mx-auto max-w-lg text-muted-text">Explore our collection of articles, guides, and sensory knowledge.</p>
</div>
)}
<div className="mx-auto w-full max-w-7xl flex-1 px-6 py-16">
{!articlesResult.ok ? (
<div className="rounded-3xl border border-rose-100 bg-white px-6 py-20 text-center shadow-brutal">
<p className="text-lg font-semibold text-pop-black">Unable to load articles</p>
<div className="ui-panel border border-rose-100 px-6 py-20 text-center">
<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>
</div>
) : 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!
</div>
) : (
@@ -62,23 +63,25 @@ export default async function ScentGuidePage({ params }: { params: Promise<{ lan
<Link
key={article.id}
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 ? (
<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">
<span className="text-sm uppercase tracking-widest text-gray-500">No Image</span>
<div className="flex h-full w-full items-center justify-center bg-surface-page">
<span className="text-sm uppercase tracking-widest text-muted-text">No Image</span>
</div>
)}
</div>
<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()}
</p>
<h2 className="text-xl font-bold leading-tight text-pop-black transition-colors group-hover:text-pop-pink">{article.title}</h2>
<div className="line-clamp-3 text-sm text-gray-600" dangerouslySetInnerHTML={{ __html: article.content }} />
<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-muted-text" dangerouslySetInnerHTML={{ __html: article.content }} />
</div>
</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 (
<div className="min-h-screen bg-pop-bg">
<div className="min-h-screen bg-surface-page text-text-main">
{announcementSections.length > 0 && (
<DynamicPageRenderer sections={announcementSections} categories={categories} lang={lang} />
)}
{heroSections.length > 0 ? (
<DynamicPageRenderer sections={heroSections} categories={categories} lang={lang} />
) : (
<section className="border-b border-gray-200 bg-white px-6 py-16 text-center">
<p className="text-xs font-bold uppercase tracking-[0.28em] text-pop-pink">Search</p>
<h1 className="mt-4 text-5xl font-semibold tracking-tight text-pop-black">Find Your Scent</h1>
<section className="border-b border-line-primary/20 bg-surface-card px-6 py-16 text-center">
<p className="ui-eyebrow">Search</p>
<h1 className="mt-4 text-5xl font-semibold tracking-tight text-text-main">Find Your Scent</h1>
</section>
)}
<section className="border-b border-gray-100 bg-white/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">
<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-line-primary/20 bg-surface-card shadow-card" action="/search">
<input
name="q"
defaultValue={query}
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
</button>
</form>
@@ -72,7 +72,7 @@ export default async function SearchPage({ searchParams, params }: { searchParam
<Link
key={category.id}
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}
</Link>
@@ -82,7 +82,7 @@ export default async function SearchPage({ searchParams, params }: { searchParam
)}
{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
? `Found ${products.length} result${products.length !== 1 ? 's' : ''} 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">
{!query ? (
<div className="rounded-3xl bg-white px-6 py-20 text-center shadow-brutal">
<p className="text-lg font-semibold text-pop-black">Type something to search</p>
<Link href="/shop" className="mt-4 inline-flex font-semibold text-pop-pink">
<div className="ui-panel px-6 py-20 text-center">
<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-brand-primary">
Browse All Products &rarr;
</Link>
</div>
) : !productsResult.ok ? (
<div className="rounded-3xl border border-rose-100 bg-white px-6 py-20 text-center shadow-brutal">
<p className="text-lg font-semibold text-pop-black">Unable to search products</p>
<div className="ui-panel border border-rose-100 px-6 py-20 text-center">
<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>
</div>
) : products.length === 0 ? (
<div className="rounded-3xl bg-white px-6 py-20 text-center shadow-brutal">
<p className="text-lg font-semibold text-pop-black">No products found</p>
<p className="mt-2 text-sm text-gray-500">Try a different scent name or keyword.</p>
<Link href="/shop" className="mt-4 inline-flex font-semibold text-pop-pink">
<div className="ui-panel px-6 py-20 text-center">
<p className="text-lg font-semibold text-text-main">No products found</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-brand-primary">
Browse All Products &rarr;
</Link>
</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 (
<div className="min-h-screen bg-pop-bg">
<div className="min-h-screen bg-surface-page text-text-main">
<ShopCouponBridge coupon={coupon} />
{announcementSections.length > 0 && (
<DynamicPageRenderer sections={announcementSections} categories={categories} lang={lang} />
@@ -50,10 +50,10 @@ export default async function ShopPage({ searchParams, params }: { searchParams:
{heroSections.length > 0 ? (
<DynamicPageRenderer sections={heroSections} categories={categories} lang={lang} />
) : (
<section className="border-b border-gray-200 bg-white px-6 py-16 text-center">
<p className="text-xs font-bold uppercase tracking-[0.28em] text-pop-pink">All Products</p>
<h1 className="mt-4 text-5xl font-semibold tracking-tight text-pop-black">The Collection</h1>
<p className="mx-auto mt-4 max-w-2xl text-gray-600">
<section className="border-b border-line-primary bg-surface-card px-6 py-16 text-center">
<p className="ui-eyebrow">All Products</p>
<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-muted-text">
Browse our full range of premium aroma products crafted to elevate every space.
</p>
</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="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
</Link>
{categories.map((category) => {
@@ -70,7 +70,7 @@ export default async function ShopPage({ searchParams, params }: { searchParams:
<Link
key={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}
{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 className="flex items-center justify-between">
<p className="text-sm text-gray-500">{products.length} products</p>
<Link href="/search" className="text-sm font-semibold text-pop-pink transition hover:text-pop-red">
<p className="text-sm text-muted-text">{products.length} products</p>
<Link href="/search" className="text-sm font-semibold text-brand-primary transition hover:text-brand-primary-hover">
Search products
</Link>
</div>
{apiError ? (
<div className="rounded-3xl border border-rose-100 bg-white px-6 py-20 text-center shadow-brutal">
<p className="text-lg font-semibold text-pop-black">Unable to load products</p>
<div className="ui-panel border border-rose-100 px-6 py-20 text-center">
<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>
</div>
) : products.length === 0 ? (
<div className="rounded-3xl bg-white px-6 py-20 text-center shadow-brutal">
<p className="text-lg font-semibold text-pop-black">No products found</p>
<p className="mt-2 text-sm text-gray-500">Please check back soon.</p>
<div className="ui-panel px-6 py-20 text-center">
<p className="text-lg font-semibold text-text-main">No products found</p>
<p className="mt-2 text-sm text-muted-text">Please check back soon.</p>
</div>
) : (
<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 (
<main className="min-h-[70vh] bg-pop-bg">
<main className="min-h-[70vh] bg-surface-page text-text-main">
{announcementSections.length > 0 && (
<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} />
) : (
<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" />
</div>
<p className="text-xs font-bold uppercase tracking-[0.28em] text-pop-pink">Track Order</p>
<h1 className="mt-4 text-4xl font-semibold text-pop-black md:text-5xl">Track Your Status</h1>
<p className="mx-auto mt-4 max-w-2xl text-gray-600">
<p className="ui-eyebrow">Track Order</p>
<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-muted-text">
กรอกหมายเลขคำสั่งซื้อและเบอร์โทรศัพท์เพื่อตรวจสอบสถานะสินค้า หรือกลับมาดูคำสั่งซื้อที่เคยค้นหาบนอุปกรณ์นี้
</p>
</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 (
<main className="min-h-[70vh] bg-pop-bg">
<main className="min-h-[70vh] bg-surface-page text-text-main">
{announcementSections.length > 0 && (
<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} />
) : (
<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" />
</div>
<p className="text-xs font-bold uppercase tracking-[0.28em] text-pop-pink">Wishlist</p>
<h1 className="mt-4 text-4xl font-semibold text-pop-black md:text-5xl">Your Wishlist</h1>
<p className="mx-auto mt-4 max-w-2xl text-gray-600">
<p className="ui-eyebrow">Wishlist</p>
<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-muted-text">
Items you&apos;ve loved. Keep them here until you&apos;re ready to make them yours.
</p>
</section>
apps/website/src/app/globals.css
+224 -17
View File
@@ -1,20 +1,39 @@
@import "tailwindcss";
@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-pop-yellow: #FFF200;
--color-pop-orange: #FFA07A;
--color-pop-red: #FF4500;
--color-pop-cyan: #E0FFFF;
--color-pop-green: #98FB98;
--color-pop-purple: #D8BFD8;
--color-pop-bg: #FFF0F5;
--color-pop-black: #333333;
--color-brand-primary: #FF6B6B;
--color-brand-primary-hover: #FF4500;
--color-brand-accent: #FFF200;
--color-brand-warm: #FFA07A;
--color-brand-cool: #E0FFFF;
--color-brand-success: #98FB98;
--color-brand-soft: #D8BFD8;
--color-surface-page: #FFF0F5;
--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);
--shadow-brutal-hover: 0 20px 40px rgba(0,0,0,0.1);
--color-pop-pink: var(--color-brand-primary);
--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-spin-slow: spin 15s linear infinite;
@@ -27,14 +46,14 @@
@layer base {
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%),
radial-gradient(circle at bottom left, rgba(255,160,122,0.15), transparent 40%);
min-height: 100vh;
}
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 {
@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 {
@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 {
@apply bg-pop-bg;
@apply bg-surface-page;
}
::-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 Link from './LocalizedLink'
@@ -41,30 +41,28 @@ export default function AddToCartSection({ product }: Props) {
<div className="space-y-8">
<div className="space-y-2">
{categoryName && (
<p className="text-xs font-bold uppercase tracking-[0.28em] text-pop-pink">
{categoryName}
</p>
<p className="ui-eyebrow">{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}
</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
</p>
</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">
<span className="text-4xl font-bold text-pop-pink">
<span className="text-4xl font-bold text-brand-primary">
{formatPrice(currentVariant?.price ?? product.price)}
</span>
{currentVariant && <span className="text-sm text-gray-500">/ {currentVariant.size}</span>}
{currentVariant && <span className="text-sm text-muted-text">/ {currentVariant.size}</span>}
</div>
{product.variants.length > 0 && (
<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">
{product.variants.map((variant, index) => (
<button
@@ -72,12 +70,12 @@ export default function AddToCartSection({ product }: Props) {
onClick={() => setSelectedVariant(index)}
className={`rounded-xl border px-5 py-3 text-sm font-bold uppercase tracking-widest transition ${
selectedVariant === index
? 'border-pop-pink bg-pop-pink text-white shadow-brutal'
: 'border-gray-200 bg-white text-gray-600 hover:border-pop-pink hover:text-pop-pink'
? 'border-brand-primary bg-brand-primary text-white shadow-card'
: 'border-line-primary/20 bg-surface-card text-muted-text hover:border-brand-primary hover:text-brand-primary'
}`}
>
{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)}
</span>
</button>
@@ -89,35 +87,35 @@ export default function AddToCartSection({ product }: Props) {
<div className="hidden gap-4 md:flex">
<button
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
</button>
{categoryName && (
<Link
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}
</Link>
)}
</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>
<span className="mb-1 block text-xs font-bold uppercase tracking-widest text-gray-400">Scent</span>
<span className="font-semibold text-pop-black">{product.scent.name}</span>
<span className="mb-1 block text-xs font-bold uppercase tracking-widest text-muted-text/70">Scent</span>
<span className="font-semibold text-text-main">{product.scent.name}</span>
</div>
<div>
<span className="mb-1 block text-xs font-bold uppercase tracking-widest text-gray-400">Category</span>
<Link href={`/category/${product.category.id}`} className="font-semibold text-pop-black transition hover:text-pop-pink">
<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-text-main transition hover:text-brand-primary">
{categoryName}
</Link>
</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 && (
<div className="mb-3 flex gap-2 overflow-x-auto pb-1" style={{ scrollbarWidth: 'none' }}>
{product.variants.map((variant, index) => (
@@ -126,8 +124,8 @@ export default function AddToCartSection({ product }: Props) {
onClick={() => setSelectedVariant(index)}
className={`flex-shrink-0 rounded-full border px-4 py-2 text-[10px] font-bold uppercase tracking-widest transition ${
selectedVariant === index
? 'border-pop-pink bg-pop-pink text-white'
: 'border-gray-200 bg-white text-gray-500'
? 'border-brand-primary bg-brand-primary text-white'
: 'border-line-primary/20 bg-surface-card text-muted-text'
}`}
>
{variant.size}
@@ -137,14 +135,14 @@ export default function AddToCartSection({ product }: Props) {
)}
<div className="flex items-center justify-between gap-4">
<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'}
</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>
<button
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
</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 Link from './LocalizedLink'
import { useCartStore } from '../store/cartStore'
@@ -13,61 +14,60 @@ export default function CartDrawer() {
return (
<div className="fixed inset-0 z-[100] flex justify-end">
<div
className="absolute inset-0 bg-pop-black/45 backdrop-blur-sm"
onClick={() => toggleCart(false)}
/>
<div className="absolute inset-0 bg-text-main/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="flex items-center justify-between border-b border-gray-100 bg-pop-bg/70 p-6">
<h2 className="flex items-center gap-2 text-xl font-bold text-pop-black">
<ShoppingBag className="h-5 w-5 text-pop-pink" />
<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-line-primary/20 bg-surface-page/70 p-6">
<h2 className="flex items-center gap-2 text-xl font-bold text-text-main">
<ShoppingBag className="h-5 w-5 text-brand-primary" />
{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 })}
</span>
</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" />
</button>
</div>
<div className="flex-1 space-y-6 overflow-y-auto p-6">
{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" />
<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')}
</button>
</div>
) : (
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 className="h-24 w-20 flex-shrink-0 overflow-hidden rounded-lg bg-white">
<img
<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="relative h-24 w-20 flex-shrink-0 overflow-hidden rounded-lg bg-surface-card">
<Image
src={item.productImage || '/images/oil_ozone.png'}
alt={item.productName}
fill
unoptimized
className="h-full w-full object-cover"
/>
</div>
<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>
{item.variantSize && <p className="text-xs text-gray-500">{item.variantSize}</p>}
<p className="mt-auto text-sm font-bold text-pop-pink">{formatPrice(item.price)}</p>
<h3 className="pr-6 text-sm font-bold leading-tight text-text-main">{item.productName}</h3>
{item.variantSize && <p className="text-xs text-muted-text">{item.variantSize}</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">
<button onClick={() => updateQuantity(item.cartItemId, item.quantity - 1)} className="p-1 transition-colors hover:text-pop-pink">
<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-brand-primary">
<Minus className="h-4 w-4" />
</button>
<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" />
</button>
</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" />
</button>
</div>
@@ -77,13 +77,13 @@ export default function CartDrawer() {
</div>
{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">
<span>{t('cart.subtotal')}</span>
<span className="text-pop-pink">{formatPrice(getCartTotal())}</span>
<span className="text-brand-primary">{formatPrice(getCartTotal())}</span>
</div>
<p className="text-center text-xs text-gray-500">{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">
<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-text-main py-4 text-center text-sm font-bold uppercase tracking-widest text-white transition hover:bg-brand-primary">
{t('cart.proceed')}
</Link>
</div>
apps/website/src/components/CheckoutClient.tsx
+76 -73
View File
@@ -1,5 +1,6 @@
"use client";
import Image from 'next/image'
import Link from './LocalizedLink'
import { useRouter } from 'next/navigation'
import { useEffect, useMemo, useState } from 'react'
@@ -386,20 +387,20 @@ export default function CheckoutClient() {
if (!hydrated) {
return (
<div className="rounded-3xl bg-white p-10 text-center shadow-brutal">
<Loader2 className="mx-auto h-8 w-8 animate-spin text-pop-pink" />
<p className="mt-4 text-sm font-semibold text-gray-500">กำลังโหลดตะกร้าสินค้า...</p>
<div className="ui-panel p-10 text-center">
<Loader2 className="mx-auto h-8 w-8 animate-spin text-brand-primary" />
<p className="mt-4 text-sm font-semibold text-muted-text">กำลังโหลดตะกร้าสินค้า...</p>
</div>
)
}
if (items.length === 0) {
return (
<div className="mx-auto max-w-xl rounded-3xl bg-white p-10 text-center shadow-brutal">
<ShoppingBag className="mx-auto h-14 w-14 text-pop-pink" />
<h2 className="mt-5 text-3xl font-semibold text-pop-black">ตะกร้าสินค้าว่าง</h2>
<p className="mt-3 text-gray-600">เลือกสินค้าที่คุณชอบก่อน แล้วกลับมายืนยันคำสั่งซื้อที่หน้านี้ได้เลย</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">
<div className="ui-panel mx-auto max-w-xl p-10 text-center">
<ShoppingBag className="mx-auto h-14 w-14 text-brand-primary" />
<h2 className="mt-5 text-3xl font-semibold text-text-main">ตะกร้าสินค้าว่าง</h2>
<p className="mt-3 text-muted-text">เลือกสินค้าที่คุณชอบก่อน แล้วกลับมายืนยันคำสั่งซื้อที่หน้านี้ได้เลย</p>
<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>
</div>
@@ -412,58 +413,58 @@ export default function CheckoutClient() {
return (
<div className="grid gap-8 lg:grid-cols-[minmax(0,1fr)_420px]">
<form id="checkout-form" onSubmit={createOrder} className="space-y-6">
<section className="rounded-3xl bg-white p-6 shadow-brutal md:p-8">
<div className="flex items-center gap-3 border-b border-gray-100 pb-5">
<UserRound className="h-5 w-5 text-pop-pink" />
<section className="ui-panel p-6 md:p-8">
<div className="ui-panel-header">
<UserRound className="h-5 w-5 text-brand-primary" />
<div>
<h2 className="text-xl font-semibold text-pop-black">ข้อมูลผู้รับสินค้า</h2>
<p className="text-sm text-gray-500">ข้อมูลนี้จะถูกส่งไปสร้างคำสั่งซื้อตาม contract ของ backend</p>
<h2 className="ui-panel-title">ข้อมูลผู้รับสินค้า</h2>
<p className="ui-panel-subtitle">ข้อมูลนี้จะถูกส่งไปสร้างคำสั่งซื้อตาม contract ของ backend</p>
</div>
</div>
<div className="mt-6 grid gap-5 md:grid-cols-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
required
value={formData.name}
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="ชื่อ-นามสกุล"
/>
</label>
<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
required
pattern="[0-9]{9,10}"
title="กรุณากรอกเบอร์โทรศัพท์ 9-10 หลัก"
value={formData.phone}
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"
/>
</label>
<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
required
type="email"
value={formData.email}
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"
/>
</label>
</div>
</section>
<section className="rounded-3xl bg-white p-6 shadow-brutal md:p-8">
<div className="flex items-center gap-3 border-b border-gray-100 pb-5">
<PackageCheck className="h-5 w-5 text-pop-pink" />
<section className="ui-panel p-6 md:p-8">
<div className="ui-panel-header">
<PackageCheck className="h-5 w-5 text-brand-primary" />
<div>
<h2 className="text-xl font-semibold text-pop-black">ที่อยู่จัดส่ง</h2>
<p className="text-sm text-gray-500">สมาชิกสามารถเลือกที่อยู่ที่บันทึกไว้ หรือกรอกที่อยู่ใหม่ได้</p>
<h2 className="ui-panel-title">ที่อยู่จัดส่ง</h2>
<p className="ui-panel-subtitle">สมาชิกสามารถเลือกที่อยู่ที่บันทึกไว้ หรือกรอกที่อยู่ใหม่ได้</p>
</div>
</div>
@@ -474,8 +475,8 @@ export default function CheckoutClient() {
key={address.id}
className={`flex cursor-pointer gap-3 rounded-2xl border p-4 transition ${
selectedAddressId === address.id
? 'border-pop-pink bg-pop-bg'
: 'border-gray-100 bg-white hover:border-pop-pink/40'
? 'border-brand-primary bg-surface-page'
: 'border-line-primary bg-surface-card hover:border-brand-primary/40'
}`}
>
<input
@@ -483,25 +484,25 @@ export default function CheckoutClient() {
name="shippingAddress"
checked={selectedAddressId === address.id}
onChange={() => selectAddress(address)}
className="mt-1 accent-pop-pink"
className="mt-1 accent-brand-primary"
/>
<span>
<span className="block text-sm font-bold text-pop-black">
<span className="block text-sm font-bold text-text-main">
{address.recipientName}
{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
</span>
)}
</span>
<span className="mt-1 block text-xs text-gray-500">{address.phone}</span>
<span className="mt-1 block text-sm text-gray-600">{formatAddress(address)}</span>
<span className="mt-1 block text-xs text-muted-text">{address.phone}</span>
<span className="mt-1 block text-sm text-text-main/80">{formatAddress(address)}</span>
</span>
</label>
))}
<label
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
@@ -509,9 +510,9 @@ export default function CheckoutClient() {
name="shippingAddress"
checked={selectedAddressId === '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>
</div>
)}
@@ -519,49 +520,49 @@ export default function CheckoutClient() {
{(savedAddresses.length === 0 || selectedAddressId === 'new') && (
<div className="mt-6 grid gap-5 md:grid-cols-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
required={selectedAddressId === 'new' || savedAddresses.length === 0}
value={addressForm.addressLine}
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="บ้านเลขที่ หมู่บ้าน ถนน ซอย"
/>
</label>
<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
required={selectedAddressId === 'new' || savedAddresses.length === 0}
value={addressForm.subdistrict}
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 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
required={selectedAddressId === 'new' || savedAddresses.length === 0}
value={addressForm.district}
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 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
required={selectedAddressId === 'new' || savedAddresses.length === 0}
value={addressForm.province}
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 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
required={selectedAddressId === 'new' || savedAddresses.length === 0}
value={addressForm.zipcode}
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"
/>
</label>
@@ -579,7 +580,7 @@ export default function CheckoutClient() {
<button
type="submit"
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">
{submitting && <Loader2 className="h-5 w-5 animate-spin" />}
@@ -590,55 +591,57 @@ export default function CheckoutClient() {
</form>
<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
type="button"
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 className="block text-xl font-semibold text-pop-black">สรุปรายการ</span>
<span className="mt-1 block text-sm text-gray-500">{items.length} รายการในตะกร้า</span>
<span className="block text-xl font-semibold text-text-main">สรุปรายการ</span>
<span className="mt-1 block text-sm text-muted-text">{items.length} รายการในตะกร้า</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>
<div className={`${summaryOpen ? 'block' : 'hidden'} mt-6 space-y-6 lg:block`}>
<div className="space-y-4">
{items.map((item) => (
<div key={item.cartItemId} className="flex gap-3">
<div className="h-16 w-14 shrink-0 overflow-hidden rounded-xl bg-pop-bg">
<img
<div className="relative h-16 w-14 shrink-0 overflow-hidden rounded-xl bg-surface-page">
<Image
src={item.productImage || '/images/oil_ozone.png'}
alt={item.productName}
fill
unoptimized
className="h-full w-full object-cover"
/>
</div>
<div className="min-w-0 flex-1">
<p className="text-sm font-bold text-pop-black">{item.productName}</p>
<p className="mt-1 text-xs text-gray-500">{item.variantSize || 'Standard'} x {item.quantity}</p>
<p className="text-sm font-bold text-text-main">{item.productName}</p>
<p className="mt-1 text-xs text-muted-text">{item.variantSize || 'Standard'} x {item.quantity}</p>
</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 className="border-t border-gray-100 pt-5">
<div className="border-t border-line-primary pt-5">
{!appliedCoupon ? (
<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">
<input
value={couponCode}
onChange={(event) => setCouponCode(event.target.value.toUpperCase())}
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
type="button"
onClick={applyCoupon}
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" /> : 'ใช้'}
</button>
@@ -651,7 +654,7 @@ export default function CheckoutClient() {
<Ticket className="h-4 w-4" />
{appliedCoupon}
</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>
</div>
@@ -659,12 +662,12 @@ export default function CheckoutClient() {
</div>
{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">
<span className="text-xs font-bold uppercase tracking-[0.18em] text-gray-500">คะแนนสะสม</span>
<span className="text-sm font-bold text-pop-black">{customerPoints} points</span>
<span className="text-xs font-bold uppercase tracking-[0.18em] text-muted-text">คะแนนสะสม</span>
<span className="text-sm font-bold text-text-main">{customerPoints} points</span>
</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
type="checkbox"
checked={usePoints}
@@ -672,7 +675,7 @@ export default function CheckoutClient() {
setUsePoints(event.target.checked)
if (event.target.checked) setPointsToUse(maxRedeemablePoints)
}}
className="accent-pop-pink"
className="accent-brand-primary"
disabled={maxRedeemablePoints <= 0}
/>
ใช้คะแนนเป็นส่วนลด
@@ -684,14 +687,14 @@ export default function CheckoutClient() {
max={maxRedeemablePoints}
value={visiblePointsToUse}
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 className="space-y-3 border-t border-gray-100 pt-5 text-sm">
<div className="flex justify-between text-gray-500">
<div className="space-y-3 border-t border-line-primary pt-5 text-sm">
<div className="flex justify-between text-muted-text">
<span>Subtotal</span>
<span>{formatPrice(subtotal)}</span>
</div>
@@ -719,12 +722,12 @@ export default function CheckoutClient() {
<span>-{formatPrice(pointsDiscount)}</span>
</div>
)}
<div className="flex justify-between text-gray-500">
<div className="flex justify-between text-muted-text">
<span>Shipping</span>
{loadingSettings ? (
<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>
{isFreeShipping && (
@@ -733,9 +736,9 @@ export default function CheckoutClient() {
<span>-{formatPrice(shippingFee)}</span>
</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 className="text-pop-pink">{formatPrice(total)}</span>
<span className="text-brand-primary">{formatPrice(total)}</span>
</div>
</div>
@@ -752,7 +755,7 @@ export default function CheckoutClient() {
type="submit"
form="checkout-form"
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">
{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 { useEffect, type ReactNode } from 'react';
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 }) {
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 (
<>
<ScrollToTop />
apps/website/src/components/Footer.tsx
+28 -23
View File
@@ -1,5 +1,6 @@
"use client";
import Image from 'next/image'
import { useState, useEffect } from 'react'
import Link from './LocalizedLink'
import type { Category, MenuItem, StoreSettings } from '@homaroma/types'
@@ -55,15 +56,19 @@ export default function Footer({
const brandName = settings?.brandName || ''
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">
{/* Col 1 — Brand */}
<div className="space-y-6">
<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>
<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')}
</p>
<div className="flex gap-4">
@@ -74,7 +79,7 @@ export default function Footer({
href={settings!.facebookUrl}
target="_blank"
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
</a>
@@ -84,7 +89,7 @@ export default function Footer({
href={settings!.instagramUrl}
target="_blank"
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
</a>
@@ -94,7 +99,7 @@ export default function Footer({
href={settings!.tiktokUrl}
target="_blank"
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
</a>
@@ -105,7 +110,7 @@ export default function Footer({
<a
key={s}
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}
</a>
@@ -116,22 +121,22 @@ export default function Footer({
{/* Col 2 — Explore */}
<div className="space-y-4">
<h4 className="text-xs font-bold uppercase tracking-widest text-pop-black">{t('footer.explore')}</h4>
<div className="flex flex-col space-y-2 text-sm text-gray-600">
<h4 className="ui-menu-title">{t('footer.explore')}</h4>
<div className="flex flex-col space-y-2 text-sm text-muted-text">
{exploreMenu.length > 0 ? (
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)}
</Link>
))
) : (
<>
<Link href="/" className="transition-colors hover:text-pop-pink">{t('nav.home')}</Link>
<Link href="/shop" className="transition-colors hover:text-pop-pink">{t('nav.shop')}</Link>
<Link href="/scent-guide" className="transition-colors hover:text-pop-pink">{t('nav.scentGuide')}</Link>
<Link href="/about" className="transition-colors hover:text-pop-pink">{t('nav.about')}</Link>
<Link href="/contact" className="transition-colors hover:text-pop-pink">{t('nav.contact')}</Link>
<Link href="/faq" className="transition-colors hover:text-pop-pink">{t('nav.faq')}</Link>
<Link href="/" className="ui-footer-link">{t('nav.home')}</Link>
<Link href="/shop" className="ui-footer-link">{t('nav.shop')}</Link>
<Link href="/scent-guide" className="ui-footer-link">{t('nav.scentGuide')}</Link>
<Link href="/about" className="ui-footer-link">{t('nav.about')}</Link>
<Link href="/contact" className="ui-footer-link">{t('nav.contact')}</Link>
<Link href="/faq" className="ui-footer-link">{t('nav.faq')}</Link>
</>
)}
</div>
@@ -139,10 +144,10 @@ export default function Footer({
{/* Col 3 — Collections */}
<div className="space-y-4">
<h4 className="text-xs font-bold uppercase tracking-widest text-pop-black">{t('nav.collections')}</h4>
<div className="flex flex-col space-y-2 text-sm text-gray-600">
<h4 className="ui-menu-title">{t('nav.collections')}</h4>
<div className="flex flex-col space-y-2 text-sm text-muted-text">
{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)}
</Link>
))}
@@ -151,7 +156,7 @@ export default function Footer({
{/* Col 4 — Support & Legal */}
<div className="space-y-4">
<h4 className="text-xs font-bold uppercase tracking-widest text-pop-black">
<h4 className="ui-menu-title">
{settings?.footerSupportHeading
? (typeof settings.footerSupportHeading === 'string'
? settings.footerSupportHeading
@@ -160,16 +165,16 @@ export default function Footer({
|| 'Support & Legal')
: t('footer.support', 'Support & Legal')}
</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) => (
<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)}
</Link>
))}
</div>
<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
? (typeof settings.footerCopyrightText === 'string'
? 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)
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>
<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" />
<span className="text-xs font-bold uppercase tracking-[0.2em] text-pop-pink">{text.eyebrow}</span>
<span className="ui-eyebrow">{text.eyebrow}</span>
</div>
<p className="text-8xl font-black leading-none text-pop-pink/20 md:text-9xl">{text.hint}</p>
<h1 className="mt-6 max-w-3xl text-4xl font-semibold leading-tight text-pop-black md:text-6xl">
<p className="text-8xl font-black leading-none text-brand-primary/20 md:text-9xl">{text.hint}</p>
<h1 className="mt-6 max-w-3xl text-4xl font-semibold leading-tight text-text-main md:text-6xl">
{text.title}
</h1>
<p className="mt-6 max-w-2xl text-base leading-8 text-gray-600 md:text-lg">
<p className="mt-6 max-w-2xl text-base leading-8 text-muted-text md:text-lg">
{text.description}
</p>
<div className="mt-10 flex flex-col gap-3 sm:flex-row">
<Link
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" />
{text.home}
</Link>
<Link
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" />
{text.shop}
@@ -120,36 +120,36 @@ export default function LocalizedNotFound({ lang }: LocalizedNotFoundProps) {
</div>
</div>
<div className="rounded-[2rem] border border-white bg-white/80 p-6 shadow-brutal backdrop-blur md:p-8">
<div className="rounded-[1.5rem] bg-pop-bg p-6">
<div className="flex items-center gap-3 border-b border-pop-black/10 pb-5">
<div className="flex h-11 w-11 items-center justify-center rounded-full bg-white text-pop-pink shadow-sm">
<div className="ui-panel border border-white/80 bg-surface-card/80 p-6 backdrop-blur md:p-8">
<div className="rounded-[1.5rem] bg-surface-page p-6">
<div className="flex items-center gap-3 border-b border-text-main/10 pb-5">
<div className="flex h-11 w-11 items-center justify-center rounded-full bg-surface-card text-brand-primary shadow-sm">
<Search className="h-5 w-5" />
</div>
<div>
<p className="text-xs font-bold uppercase tracking-[0.18em] text-gray-500">{text.hint}</p>
<p className="mt-1 text-sm font-semibold text-pop-black">{text.search}</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-text-main">{text.search}</p>
</div>
</div>
<div className="mt-6 grid gap-3">
<Link
href={getPathWithLocale('/search', lang)}
className="group flex items-center justify-between rounded-2xl bg-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>
<ArrowRight className="h-4 w-4 transition group-hover:translate-x-1" />
</Link>
<Link
href={getPathWithLocale('/scent-guide', lang)}
className="group flex items-center justify-between rounded-2xl bg-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>
<ArrowRight className="h-4 w-4 transition group-hover:translate-x-1" />
</Link>
<Link
href={getPathWithLocale('/contact', lang)}
className="group flex items-center justify-between rounded-2xl bg-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>
<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"
import Image from 'next/image'
import Link from './LocalizedLink'
import { getPathWithoutLocale, getPathWithLocale } from '../lib/locales'
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 brandName = settings?.brandName || ''
@@ -187,8 +188,8 @@ export default function Navbar({ categories = [], initialMenu = [], settings = n
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 ${
scrolled
? 'bg-white/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/95 shadow-lg shadow-black/5 backdrop-blur-xl'
: '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">
@@ -196,9 +197,13 @@ export default function Navbar({ categories = [], initialMenu = [], settings = n
<Link
href="/"
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>
</div>
@@ -226,7 +231,7 @@ export default function Navbar({ categories = [], initialMenu = [], settings = n
>
<Heart className="h-4 w-4 transition-colors" />
{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}
</span>
)}
@@ -242,19 +247,19 @@ export default function Navbar({ categories = [], initialMenu = [], settings = n
>
<ShoppingBag className="h-4 w-4 transition-colors" />
{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}
</span>
)}
</button>
<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} />
{activeLanguage.short}
</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="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) => {
const isActive = lang.startsWith(language.code) || language.code.startsWith(lang)
return (
@@ -262,7 +267,7 @@ export default function Navbar({ categories = [], initialMenu = [], settings = n
key={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 ${
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>
@@ -278,13 +283,16 @@ export default function Navbar({ categories = [], initialMenu = [], settings = n
{customer ? (
<Link href="/profile" className="ml-1">
{customer.pictureUrl ? (
<img
<Image
src={customer.pictureUrl}
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" />
</span>
)}
@@ -292,7 +300,7 @@ export default function Navbar({ categories = [], initialMenu = [], settings = n
) : (
<button
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')}
</button>
@@ -323,36 +331,36 @@ export default function Navbar({ categories = [], initialMenu = [], settings = n
{searchOpen && (
<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) }}
>
<div className="w-full max-w-2xl space-y-6">
<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>
<button onClick={() => setSearchOpen(false)} className="rounded-full bg-white p-2 text-pop-black/65 transition hover:text-pop-pink">
<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-surface-page p-2 text-text-main/65 transition hover:text-brand-primary">
<X className="h-4 w-4" />
</button>
</div>
<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">
<Search className="m-4 h-5 w-5 shrink-0 text-pop-black/35" />
<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-text-main/35" />
<input
type="text"
value={searchQuery}
onChange={(e) => setSearchQuery(e.target.value)}
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
/>
<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
</button>
</div>
</form>
<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">
{[
...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}
href={item.to}
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}
</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={`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)}
/>
<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'
}`}
>
<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 className="px-6 pb-6 pt-2">
<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" />
Select Language
</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" />
</button>
</div>
@@ -405,7 +413,7 @@ export default function Navbar({ categories = [], initialMenu = [], settings = n
key={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 ${
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>
apps/website/src/components/ProductCard.tsx
+14 -11
View File
@@ -1,5 +1,6 @@
"use client"
import Image from 'next/image'
import Link from './LocalizedLink'
import type { Product } 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
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">
<div className="relative aspect-[4/3] overflow-hidden bg-pop-bg">
<article className="ui-card ui-card-hover group flex h-full flex-col overflow-hidden">
<div className="relative aspect-[4/3] overflow-hidden bg-surface-page">
<WishlistButton product={product} />
<Link href={`/products/${product.id}`} className="block h-full w-full">
<img
<Image
src={imageUrl}
className="h-full w-full object-cover transition duration-700 group-hover:scale-105"
alt={productName}
fill
unoptimized
className="h-full w-full object-cover transition duration-700 group-hover:scale-105"
/>
{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}
</span>
)}
@@ -38,13 +41,13 @@ export default function ProductCard({ product }: ProductCardProps) {
<div className="flex flex-1 flex-col gap-4 p-5">
<div className="space-y-1">
<h3 className="line-clamp-2 text-lg font-semibold leading-snug text-pop-black">
<Link href={`/products/${product.id}`} className="transition hover:text-pop-pink">
<h3 className="line-clamp-2 text-lg font-semibold leading-snug text-text-main">
<Link href={`/products/${product.id}`} className="transition hover:text-brand-primary">
{productName}
</Link>
</h3>
{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}
</p>
)}
@@ -53,7 +56,7 @@ export default function ProductCard({ product }: ProductCardProps) {
{product.variants.length > 0 && (
<div className="flex flex-wrap gap-2">
{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}
</span>
))}
@@ -61,10 +64,10 @@ export default function ProductCard({ product }: ProductCardProps) {
)}
<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
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
</Link>
apps/website/src/components/ProfileClient.tsx
+72 -71
View File
@@ -1,5 +1,6 @@
"use client";
import Image from 'next/image'
import Link from './LocalizedLink'
import { useEffect, useState } from 'react'
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 === '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'
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) {
@@ -284,12 +285,12 @@ export default function ProfileClient() {
if (!customer) {
return (
<section className="mx-auto max-w-md rounded-3xl bg-white p-10 text-center shadow-brutal">
<div className="mx-auto mb-6 flex h-20 w-20 items-center justify-center rounded-full bg-pop-bg text-pop-pink">
<section className="ui-panel mx-auto max-w-md p-10 text-center">
<div className="ui-avatar-shell mx-auto mb-6 text-brand-primary">
<User className="h-10 w-10" />
</div>
<h1 className="text-3xl font-semibold text-pop-black">เข้าสู่ระบบสมาชิก</h1>
<p className="mt-3 text-sm leading-relaxed text-gray-600">
<h1 className="text-3xl font-semibold text-text-main">เข้าสู่ระบบสมาชิก</h1>
<p className="mt-3 text-sm leading-relaxed text-muted-text">
ล็อกอินเพื่อตรวจสอบประวัติคำสั่งซื้อ สะสมคะแนนสมาชิก และบันทึกสมุดที่อยู่จัดส่งสินค้า
</p>
{error && (
@@ -300,12 +301,12 @@ export default function ProfileClient() {
<button
type="button"
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" />
เข้าสู่ระบบผ่าน LINE
</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>
</section>
@@ -327,58 +328,58 @@ export default function ProfileClient() {
</div>
)}
<div className="relative overflow-hidden rounded-3xl bg-white p-6 shadow-brutal">
<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="ui-panel relative overflow-hidden p-6">
<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 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">
<img
<div className="ui-avatar-shell-sm relative shrink-0">
<Image
src={displayCustomer.pictureUrl || `https://ui-avatars.com/api/?name=${encodeURIComponent(displayCustomer.displayName || 'HomAroma')}`}
alt={displayCustomer.displayName || 'LINE Profile'}
fill
unoptimized
className="h-full w-full object-cover"
/>
</div>
<div className="min-w-0">
<h1 className="truncate text-2xl font-semibold text-pop-black">{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">
<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-muted-text">
{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>}
</div>
</div>
</div>
<div className="flex items-center justify-between gap-4 rounded-2xl bg-pop-bg px-4 py-3">
<Award className="h-6 w-6 text-pop-pink" />
<div className="ui-panel-muted flex items-center justify-between gap-4 px-4 py-3">
<Award className="h-6 w-6 text-brand-primary" />
<div>
<p className="text-[10px] font-bold uppercase tracking-[0.2em] text-gray-500">คะแนนสะสม</p>
<p className="text-xl font-black text-pop-black">{displayCustomer.points ?? 0} คะแนน</p>
<p className="text-[10px] font-bold uppercase tracking-[0.2em] text-muted-text">คะแนนสะสม</p>
<p className="text-xl font-black text-text-main">{displayCustomer.points ?? 0} คะแนน</p>
</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 }) => (
<button
key={tab}
type="button"
onClick={() => setActiveTab(tab)}
className={`relative flex shrink-0 items-center gap-2 px-3 pb-4 text-sm font-bold transition ${
activeTab === tab ? 'text-pop-pink' : 'text-gray-500 hover:text-pop-black'
}`}
className={`ui-tab-button ${activeTab === tab ? 'ui-tab-button-active' : 'ui-tab-button-inactive'}`}
>
<Icon className="h-4 w-4" />
{label}
{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>
))}
</div>
{loading ? (
<div className="flex items-center justify-center rounded-3xl bg-white py-24 shadow-brutal">
<Loader2 className="h-8 w-8 animate-spin text-pop-pink" />
<div className="ui-panel flex items-center justify-center py-24">
<Loader2 className="h-8 w-8 animate-spin text-brand-primary" />
</div>
) : (
<>
@@ -388,19 +389,19 @@ export default function ProfileClient() {
<EmptyPanel icon={Package} title="ไม่มีประวัติการสั่งซื้อ" description="คุณยังไม่ได้ทำการสั่งซื้อสินค้าใด ๆ กับ HomAroma" actionHref="/shop" actionText="ไปหน้าช้อปปิ้ง" />
) : (
orders.map((order) => (
<article key={order.id} className="rounded-3xl bg-white p-6 shadow-brutal">
<div className="flex flex-col gap-3 border-b border-gray-100 pb-4 md:flex-row md:items-center md:justify-between">
<article key={order.id} className="ui-panel p-6">
<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>
<p className="text-xs font-semibold text-gray-500">เลขออเดอร์ #{order.id.toString().padStart(4, '0')}</p>
<p className="mt-1 text-[11px] text-gray-400">
<p className="text-xs font-semibold text-muted-text">เลขออเดอร์ #{order.id.toString().padStart(4, '0')}</p>
<p className="mt-1 text-[11px] text-muted-text/70">
สั่งเมื่อ {new Date(order.createdAt).toLocaleDateString('th-TH', { year: 'numeric', month: 'long', day: 'numeric' })}
</p>
</div>
<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)}
</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" />
</Link>
</div>
@@ -409,23 +410,23 @@ export default function ProfileClient() {
<div className="mt-4 space-y-3">
{order.items.map((item) => (
<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">
<img src={item.productImage || '/images/oil_ozone.png'} alt={item.productName} className="h-full w-full object-cover" />
<div className="relative h-11 w-11 shrink-0 overflow-hidden rounded-xl bg-surface-page">
<Image src={item.productImage || '/images/oil_ozone.png'} alt={item.productName} fill unoptimized className="h-full w-full object-cover" />
</div>
<div className="min-w-0 flex-1">
<p className="truncate font-semibold text-pop-black">{item.productName}</p>
<p className="text-xs text-gray-500">{item.variantSize ? `${item.variantSize} · ` : ''}x {item.quantity}</p>
<p className="truncate font-semibold text-text-main">{item.productName}</p>
<p className="text-xs text-muted-text">{item.variantSize ? `${item.variantSize} · ` : ''}x {item.quantity}</p>
</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 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">
<p className="text-gray-500">
{order.trackingNo ? <>เลขพัสดุ: <span className="font-mono font-bold text-pop-black">{order.trackingNo}</span></> : 'ยังไม่มีเลขพัสดุ'}
<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-muted-text">
{order.trackingNo ? <>เลขพัสดุ: <span className="font-mono font-bold text-text-main">{order.trackingNo}</span></> : 'ยังไม่มีเลขพัสดุ'}
</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>
</article>
))
@@ -435,13 +436,13 @@ export default function ProfileClient() {
{activeTab === 'addresses' && (
<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">
<h2 className="flex items-center gap-2 text-xl font-semibold text-pop-black">
<MapPin className="h-5 w-5 text-pop-pink" />
<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-text-main">
<MapPin className="h-5 w-5 text-brand-primary" />
สมุดที่อยู่จัดส่ง
</h2>
{!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" />
เพิ่มที่อยู่ใหม่
</button>
@@ -449,8 +450,8 @@ export default function ProfileClient() {
</div>
{showAddressForm && (
<form onSubmit={handleAddressSubmit} className="space-y-5 rounded-3xl bg-white p-6 shadow-brutal">
<h3 className="text-sm font-bold uppercase tracking-[0.2em] text-pop-pink">
<form onSubmit={handleAddressSubmit} className="ui-panel space-y-5 p-6">
<h3 className="text-sm font-bold uppercase tracking-[0.2em] text-brand-primary">
{editingAddress ? 'แก้ไขที่อยู่จัดส่ง' : 'เพิ่มที่อยู่จัดส่งใหม่'}
</h3>
@@ -466,21 +467,21 @@ export default function ProfileClient() {
<TextInput label="รหัสไปรษณีย์" value={addressForm.zipcode} onChange={(value) => updateAddressForm('zipcode', value)} required />
</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
type="checkbox"
checked={addressForm.isDefault}
onChange={(event) => updateAddressForm('isDefault', event.target.checked)}
className="h-4 w-4 rounded border-gray-300 text-pop-pink"
className="ui-form-checkbox"
/>
ตั้งเป็นที่อยู่จัดส่งเริ่มต้น
</label>
<div className="flex justify-end gap-3 border-t border-gray-100 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">
<div className="flex justify-end gap-3 border-t border-line-primary/20 pt-4">
<button type="button" onClick={resetAddressForm} className="ui-form-secondary-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" />}
บันทึกที่อยู่
</button>
@@ -493,27 +494,27 @@ export default function ProfileClient() {
) : (
<div className="grid gap-4 md:grid-cols-2">
{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>
<div className="flex flex-wrap items-center gap-2">
<p className="font-semibold text-pop-black">{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>}
<p className="font-semibold text-text-main">{address.recipientName}</p>
{address.isDefault && <span className="rounded-full bg-surface-page px-2 py-0.5 text-[10px] font-bold text-brand-primary">เริ่มต้น</span>}
</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 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" />
</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" />
</button>
</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 && (
<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>
)}
@@ -526,12 +527,12 @@ export default function ProfileClient() {
{activeTab === 'settings' && (
<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">
<Settings className="h-5 w-5 text-pop-pink" />
<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-brand-primary" />
ข้อมูลติดต่อสมาชิก
</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 && (
<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" />
@@ -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.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" />}
บันทึกข้อมูลติดต่อ
</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" />
ออกจากระบบบนอุปกรณ์นี้
</button>
@@ -573,13 +574,13 @@ function TextInput({
}) {
return (
<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
type={type}
required={required}
value={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>
)
@@ -599,12 +600,12 @@ function EmptyPanel({
actionText?: string
}) {
return (
<div className="rounded-3xl bg-white px-6 py-16 text-center shadow-brutal">
<Icon className="mx-auto mb-5 h-12 w-12 text-gray-300" />
<h3 className="text-xl font-semibold text-pop-black">{title}</h3>
<p className="mx-auto mt-2 max-w-md text-sm text-gray-500">{description}</p>
<div className="ui-empty-panel">
<Icon className="mx-auto mb-5 h-12 w-12 text-muted-text/40" />
<h3 className="text-xl font-semibold text-text-main">{title}</h3>
<p className="mx-auto mt-2 max-w-md text-sm text-muted-text">{description}</p>
{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}
</Link>
)}
apps/website/src/components/TrackOrderClient.tsx
+21 -21
View File
@@ -1,4 +1,4 @@
"use client";
"use client"
import Link from './LocalizedLink'
import { useRouter } from 'next/navigation'
@@ -92,14 +92,14 @@ export default function TrackOrderClient() {
return (
<div className="grid gap-10 md:grid-cols-2">
<section className="self-start rounded-3xl bg-white p-8 shadow-brutal">
<div className="mb-6 flex items-center gap-3 border-b border-gray-100 pb-4">
<div className="flex h-10 w-10 items-center justify-center rounded-full bg-pop-bg text-pop-pink">
<section className="ui-panel self-start p-8">
<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-surface-page text-brand-primary">
<Search className="h-5 w-5" />
</div>
<div>
<p className="text-xs font-bold uppercase tracking-[0.24em] text-pop-pink">Manual Search</p>
<h2 className="text-xl font-semibold text-pop-black">ค้นหาคำสั่งซื้อ</h2>
<p className="ui-eyebrow">Manual Search</p>
<h2 className="text-xl font-semibold text-text-main">ค้นหาคำสั่งซื้อ</h2>
</div>
</div>
@@ -111,7 +111,7 @@ export default function TrackOrderClient() {
)}
<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
</label>
<input
@@ -119,14 +119,14 @@ export default function TrackOrderClient() {
required
value={orderId}
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"
type="text"
/>
</div>
<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
</label>
<input
@@ -134,7 +134,7 @@ export default function TrackOrderClient() {
required
value={phone}
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="เบอร์โทรที่ใช้ตอนสั่งซื้อ"
type="tel"
/>
@@ -143,7 +143,7 @@ export default function TrackOrderClient() {
<button
type="submit"
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'}
</button>
@@ -151,15 +151,15 @@ export default function TrackOrderClient() {
</section>
<section className="space-y-6">
<div className="flex items-center gap-3 border-b border-gray-200 pb-4">
<Package className="h-5 w-5 text-pop-pink" />
<h2 className="text-xl font-semibold text-pop-black">Recent Device Orders</h2>
<div className="flex items-center gap-3 border-b border-line-primary/20 pb-4">
<Package className="h-5 w-5 text-brand-primary" />
<h2 className="text-xl font-semibold text-text-main">Recent Device Orders</h2>
</div>
{localOrders.length === 0 ? (
<div className="rounded-3xl border border-dashed border-gray-200 bg-white p-10 text-center shadow-brutal">
<p className="text-sm font-semibold text-gray-600">ยังไม่มีประวัติคำสั่งซื้อบนอุปกรณ์นี้</p>
<p className="mt-2 text-xs uppercase tracking-[0.18em] text-gray-400">ใช้ฟอร์มค้นหาด้านซ้ายเพื่อบันทึกออเดอร์</p>
<div className="ui-empty-panel p-10 text-center">
<p className="text-sm font-semibold text-muted-text">ยังไม่มีประวัติคำสั่งซื้อบนอุปกรณ์นี้</p>
<p className="mt-2 text-xs uppercase tracking-[0.18em] text-muted-text/70">ใช้ฟอร์มค้นหาด้านซ้ายเพื่อบันทึกออเดอร์</p>
</div>
) : (
<div className="space-y-3">
@@ -167,13 +167,13 @@ export default function TrackOrderClient() {
<Link
key={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>
<p className="text-xs font-bold uppercase tracking-[0.22em] text-gray-400">Order</p>
<p className="mt-1 font-mono text-2xl font-bold text-pop-black">{orderLabel(id)}</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-text-main">{orderLabel(id)}</p>
</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" />
</div>
</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 type { Product } from '@homaroma/types'
@@ -22,10 +22,10 @@ export default function WishlistButton({ product }: WishlistButtonProps) {
toggleItem(product)
}}
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
? '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' : ''}`} />
apps/website/src/components/WishlistClient.tsx
+5 -5
View File
@@ -1,4 +1,4 @@
"use client";
"use client"
import Link from './LocalizedLink'
import { Heart } from 'lucide-react'
@@ -11,17 +11,17 @@ export default function WishlistClient() {
if (items.length === 0) {
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">
<Heart className="h-10 w-10" />
</div>
<h2 className="text-2xl font-semibold text-pop-black">Your wishlist is empty</h2>
<p className="mx-auto mt-3 max-w-md text-gray-500">
<h2 className="text-2xl font-semibold text-text-main">Your wishlist is empty</h2>
<p className="mx-auto mt-3 max-w-md text-muted-text">
Explore our products and tap the heart icon to save your favorites.
</p>
<Link
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
</Link>
apps/website/src/components/dynamic/DynamicPageRenderer.tsx
+92 -79
View File
@@ -1,5 +1,6 @@
"use client"
import Image from 'next/image'
import Link from '../LocalizedLink'
import { Clock, Mail, MapPin, MessageCircle } from 'lucide-react'
import type { Category, PageSection, Product } from '@homaroma/types'
@@ -38,7 +39,7 @@ function optionalText(value: unknown, lang: string) {
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
return text.split('[').map((part, index) => {
@@ -79,7 +80,7 @@ function AnnouncementBar({ payload, lang }: { payload: Record<string, unknown>,
return (
<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 }}
>
<Swiper
@@ -111,14 +112,16 @@ function HeroSection({ payload, lang }: { payload: Record<string, unknown>, lang
const buttonLink = typeof payload.buttonLink === 'string' ? payload.buttonLink : '/shop'
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">
<img
<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">
<Image
src={imageUrl}
alt={title || 'HomAroma'}
fill
unoptimized
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-gradient-to-t from-neutral-900/90 via-neutral-900/10 to-neutral-900/30" />
<div className="absolute inset-0 bg-text-main/40" />
<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="space-y-6">
{tagline && (
@@ -126,8 +129,8 @@ function HeroSection({ payload, lang }: { payload: Record<string, unknown>, lang
{tagline}
</p>
)}
<h1 className="font-serif 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]')}
<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')}
</h1>
{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">
@@ -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">
<Link
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'}
</Link>
<a
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)}
<span className="transition-transform group-hover:translate-x-1">→</span>
@@ -182,11 +185,11 @@ function CategoriesSection({
}
return (
<section id="categories" className="bg-white px-6 py-24">
<div className="mx-auto max-w-7xl space-y-14">
<section id="categories" className="bg-surface-page ui-section-band">
<div className="ui-section-shell space-y-14">
<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>
{subtitle && <p className="text-gray-500">{subtitle}</p>}
<h2 className="ui-section-title">{title}</h2>
{subtitle && <p className="ui-section-subtitle">{subtitle}</p>}
</div>
<div className="grid grid-cols-2 gap-5 md:grid-cols-5">
{displayed.map((category) => {
@@ -196,14 +199,16 @@ function CategoriesSection({
<Link
key={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)}
alt={name}
fill
unoptimized
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">
<span className="block text-lg font-semibold">{name}</span>
{category._count && (
@@ -245,14 +250,14 @@ function ProductsSection({ payload, lang }: { payload: Record<string, unknown>,
}
return (
<section className="bg-pop-bg px-6 py-24">
<div className="mx-auto max-w-7xl 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">
<section className="bg-surface-page ui-section-band">
<div className="ui-section-shell space-y-10">
<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>
<h2 className="text-4xl font-semibold text-pop-black md:text-5xl">{title}</h2>
{subtitle && <p className="mt-2 text-gray-500">{subtitle}</p>}
<h2 className="ui-section-title">{title}</h2>
{subtitle && <p className="mt-2 ui-section-subtitle">{subtitle}</p>}
</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}
</Link>
</div>
@@ -261,7 +266,7 @@ function ProductsSection({ payload, lang }: { payload: Record<string, unknown>,
{products.map((product) => <ProductCard key={product.id} product={product} />)}
</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}
</p>
)}
@@ -280,18 +285,18 @@ function BannerSection({ payload, lang }: { payload: Record<string, unknown>, la
const linkUrl = typeof payload.linkUrl === 'string' ? payload.linkUrl : ''
const content = (
<div className="relative mx-auto min-h-[360px] max-w-7xl overflow-hidden rounded-3xl shadow-brutal">
<img src={imageUrl} alt={title || 'Banner'} 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="relative mx-auto min-h-[360px] max-w-7xl overflow-hidden rounded-3xl shadow-card">
<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-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">
{title && <h2 className="text-3xl font-semibold md:text-5xl">{title}</h2>}
{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>
)
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 }) {
@@ -306,10 +311,10 @@ function TextSection({ payload, lang }: { payload: Record<string, unknown>, lang
: 'text-left'
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}`}>
{title && <h2 className="text-3xl font-semibold text-pop-black md:text-4xl">{title}</h2>}
{content && <div className="leading-relaxed text-gray-600" dangerouslySetInnerHTML={{ __html: content }} />}
{title && <h2 className="text-3xl font-semibold text-text-main md:text-4xl">{title}</h2>}
{content && <div className="leading-relaxed text-muted-text" dangerouslySetInnerHTML={{ __html: content }} />}
</div>
</section>
)
@@ -324,15 +329,15 @@ function NewsletterSection({ payload, lang }: { payload: Record<string, unknown>
const placeholder = typeof payload.placeholderText === 'string' ? payload.placeholderText : 'you@example.com'
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="space-y-3">
<h2 className="text-3xl font-semibold text-white md:text-4xl">{title}</h2>
{description && <p className="max-w-2xl text-white/75">{description}</p>}
</div>
<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" />
<button className="rounded-full bg-pop-pink px-6 py-3 font-semibold text-white" type="button">
<input className="min-w-0 rounded-full px-5 py-3 text-text-main" placeholder={placeholder} type="email" />
<button className="rounded-full bg-brand-primary px-6 py-3 font-semibold text-white" type="button">
{buttonText}
</button>
</form>
@@ -354,27 +359,29 @@ function EditorialTileSection({ payload, lang }: { payload: Record<string, unkno
const textColor = typeof payload.textColor === 'string' ? payload.textColor : undefined
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">
{imageUrl && (
<div className={`group aspect-square overflow-hidden rounded-3xl shadow-brutal ${imagePosition === 'left' ? 'md:order-1' : 'md:order-2'}`}>
<img
<div className={`group relative aspect-square overflow-hidden rounded-3xl shadow-card ${imagePosition === 'left' ? 'md:order-1' : 'md:order-2'}`}>
<Image
src={imageUrl}
alt={title || 'Editorial'}
fill
unoptimized
className="h-full w-full object-cover transition duration-700 group-hover:scale-105"
/>
</div>
)}
<div className={`space-y-6 ${imagePosition === 'left' ? 'md:order-2' : 'md:order-1'}`}>
{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)}
</h2>
)}
<div className="h-px w-14 bg-pop-pink" />
{description && <p className="whitespace-pre-line text-base leading-relaxed text-gray-600 md:text-lg" style={{ color: textColor }}>{description}</p>}
<div className="h-px w-14 bg-brand-primary" />
{description && <p className="whitespace-pre-line text-base leading-relaxed text-muted-text md:text-lg" style={{ color: textColor }}>{description}</p>}
{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}
</Link>
)}
@@ -392,12 +399,12 @@ function EditorialCarouselSection({ payload, lang }: { payload: Record<string, u
if (!slides.length) return null
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">
{title && (
<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>
<div className="mx-auto h-px w-16 bg-pop-yellow" />
<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-brand-accent" />
</div>
)}
<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 : ''
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 && (
<div className="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" />
<div className="relative aspect-[4/3] overflow-hidden">
<Image
src={imageUrl}
alt={slideTitle || 'Editorial slide'}
fill
unoptimized
className="h-full w-full object-cover transition duration-700 group-hover:scale-105"
/>
</div>
)}
<div className="space-y-4 p-6">
{category && <p className="text-[10px] font-bold uppercase tracking-[0.24em] text-pop-yellow">{category}</p>}
{slideTitle && <h3 className="text-2xl font-semibold text-white">{renderAccentTitle(slideTitle, 'text-pop-yellow italic')}</h3>}
{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)}</h3>}
{description && <p className="line-clamp-4 text-sm leading-relaxed text-white/70">{description}</p>}
{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;
</Link>
)}
@@ -462,15 +475,15 @@ function HeroArticleSection({ payload, lang }: { payload: Record<string, unknown
}
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 && (
<>
<img src={imageUrl} alt={title} className="absolute inset-0 h-full w-full object-cover" />
<div className="absolute inset-0 bg-pop-black/55" />
<Image src={imageUrl} alt={title} fill unoptimized className="absolute inset-0 h-full w-full object-cover" />
<div className="absolute inset-0 bg-text-main/55" />
</>
)}
<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>
{subtitle && <p className="mx-auto max-w-2xl text-lg text-white/85 md:text-xl">{subtitle}</p>}
{(author || date) && (
@@ -504,17 +517,17 @@ function ScentNotesBreakdownSection({ payload, lang }: { payload: Record<string,
]
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-3xl space-y-4">
<h2 className="text-4xl font-semibold text-pop-black md:text-5xl">{title}</h2>
{description && <p className="text-gray-600">{description}</p>}
<h2 className="ui-section-title">{title}</h2>
{description && <p className="text-muted-text">{description}</p>}
</div>
<div className="grid gap-6 md:grid-cols-3">
{notes.map(([label, value]) => (
<article key={label} className="rounded-3xl bg-white p-8 text-left shadow-brutal">
<h3 className="mb-4 text-xs font-bold uppercase tracking-[0.24em] text-pop-pink">{label}</h3>
<p className="leading-relaxed text-gray-600">{value}</p>
<article key={label} className="ui-section-card p-8 text-left">
<h3 className="mb-4 text-xs font-bold uppercase tracking-[0.24em] text-brand-primary">{label}</h3>
<p className="leading-relaxed text-muted-text">{value}</p>
</article>
))}
</div>
@@ -532,14 +545,14 @@ function QuoteCalloutSection({ payload, lang }: { payload: Record<string, unknow
if (!quote) return null
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">
<p className="mb-8 text-7xl leading-none text-pop-pink/25">&quot;</p>
<blockquote className="text-3xl font-semibold italic leading-relaxed text-pop-black md:text-5xl">
<p className="mb-8 text-7xl leading-none text-brand-primary/25">&quot;</p>
<blockquote className="text-3xl font-semibold italic leading-relaxed text-text-main md:text-5xl">
{quote}
</blockquote>
{(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(' / ')}
</p>
)}
@@ -556,9 +569,9 @@ function AccordionSection({ payload, lang }: { payload: Record<string, unknown>,
const sectionTitle = localizedFromRecord(payload, 'title', resolvedLang)
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">
{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) => {
const questions = Array.isArray(category.questions) ? category.questions.map(toRecord) : []
const name = localizedFromRecord(category, 'name', resolvedLang)
@@ -567,8 +580,8 @@ function AccordionSection({ payload, lang }: { payload: Record<string, unknown>,
return (
<div key={categoryIndex} className="space-y-5">
{name && (
<h2 className="flex items-center gap-3 text-2xl font-semibold text-pop-black">
{icon && <span className="text-pop-pink">{icon}</span>}
<h2 className="flex items-center gap-3 text-2xl font-semibold text-text-main">
{icon && <span className="text-brand-primary">{icon}</span>}
{name}
</h2>
)}
@@ -579,11 +592,11 @@ function AccordionSection({ payload, lang }: { payload: Record<string, unknown>,
if (!question || !answer) return null
return (
<details key={itemIndex} className="group rounded-2xl bg-white p-5 shadow-brutal">
<summary className="cursor-pointer list-none text-lg font-semibold text-pop-black marker:hidden">
<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-text-main marker:hidden">
{question}
</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>
)
})}
@@ -621,28 +634,28 @@ function ContactInfoSection({ payload, lang }: { payload: Record<string, unknown
] as const
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">
{title && (
<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>
)}
{items.map(({ key, label, value, Icon }) => {
if (!value) return null
return (
<article key={key} className="rounded-3xl bg-pop-bg p-6 text-center shadow-brutal">
<div className="mx-auto mb-4 flex h-12 w-12 items-center justify-center rounded-full bg-white text-pop-pink">
<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-surface-card text-brand-primary">
<Icon className="h-6 w-6" />
</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' ? (
<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}
</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>
)
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 || '#'}
className={`flex items-center gap-1 border-b py-2 transition-colors ${
isOpen || isActive
? 'border-pop-pink text-pop-black'
: 'border-transparent text-pop-black hover:border-pop-pink hover:text-pop-black'
? 'border-brand-primary text-text-main'
: 'border-transparent text-text-main hover:border-brand-primary hover:text-text-main'
}`}
>
{getLocalizedMenuText(item.label, lang)}
@@ -69,11 +69,11 @@ export function DesktopMegaMenu({ items, lang, currentPath }: DesktopMegaMenuPro
onMouseEnter={() => handleOpen(uniqueId)}
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">
{item.columns!.map((column, columnIndex) => (
<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)}
</h4>
<ul className="space-y-3">
@@ -81,7 +81,7 @@ export function DesktopMegaMenu({ items, lang, currentPath }: DesktopMegaMenuPro
<li key={linkIndex}>
<Link
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)}
</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 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 nestedLinkClass = 'block w-full py-2 text-left text-xs uppercase tracking-widest text-pop-black/65 transition-colors hover:text-pop-pink'
const linkClass = 'ui-menu-link py-4'
const nestedLinkClass = 'ui-menu-link-compact py-2'
const renderView = (view: MenuNode) => {
if (view.type === 'root') {
return (
<div className="space-y-1 px-6 py-2">
{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 ? (
<button
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>
<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>
) : (
<Link href={item.url || '#'} onClick={onClose} className={linkClass}>
@@ -82,7 +82,7 @@ export function MobileDrawer({
</div>
))}
{customerName && (
<div className="border-b border-pop-black/10">
<div className="border-b border-text-main/10">
<Link href="/profile" onClick={onClose} className={linkClass}>
My Profile
</Link>
@@ -97,7 +97,7 @@ export function MobileDrawer({
<div className="px-6 py-4">
{view.data.map((column, columnIndex) => (
<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)}
</h4>
<div className="space-y-2">
@@ -106,10 +106,10 @@ export function MobileDrawer({
{link.links?.length ? (
<button
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>
<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>
) : (
<Link href={link.url || '#'} onClick={onClose} className={nestedLinkClass}>
@@ -132,10 +132,10 @@ export function MobileDrawer({
{link.links?.length ? (
<button
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>
<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>
) : (
<Link href={link.url || '#'} onClick={onClose} className={nestedLinkClass}>
@@ -151,31 +151,31 @@ export function MobileDrawer({
return (
<div className={`fixed inset-0 z-[60] transition-all duration-300 md:hidden ${isOpen ? 'visible' : 'invisible'}`}>
<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}
/>
<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'
}`}
>
<div className="z-10 flex shrink-0 items-center justify-between border-b border-pop-black/10 bg-white px-6 py-5">
<span className="text-sm font-bold uppercase tracking-widest text-pop-black">Menu</span>
<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-text-main">Menu</span>
<div className="flex items-center gap-3">
<button
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" />
{lang.toUpperCase()}
</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" />
</button>
</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) => {
const isCurrent = index === stack.length - 1
const isPast = index < stack.length - 1
@@ -183,14 +183,14 @@ export function MobileDrawer({
return (
<div
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'
}`}
>
{index > 0 && (
<button
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" />
Back to {getLocalizedMenuText(stack[index - 1].title, lang)}
@@ -199,7 +199,7 @@ export function MobileDrawer({
{index > 0 && (
<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>
)}
@@ -209,11 +209,11 @@ export function MobileDrawer({
})}
</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
href="/shop"
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
</Link>
@@ -233,7 +233,7 @@ export function MobileDrawer({
onLogin()
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
</button>
apps/website/src/store/authStore.ts
+1
View File
@@ -29,6 +29,7 @@ export const useAuthStore = create<AuthState>()(
{
name: 'homaroma-auth-storage',
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',
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',
partialize: (state) => ({ items: state.items }),
skipHydration: true,
},
),
)