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/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>