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
+964 -709
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
+13 -13
View File
@@ -59,15 +59,15 @@ export default async function CmsCustomPage({ params }: { params: Promise<{ slug
if (!pageResult.ok) {
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">
<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>
<p className="mt-4 text-sm text-rose-500">{pageResult.error}</p>
</div>
return (
<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-text-main md:text-4xl">
ไม่สามารถโหลดหน้านี้ได้
</h1>
<p className="mt-4 text-sm text-rose-500">{pageResult.error}</p>
</div>
</main>
)
}
@@ -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 {