x
This commit is contained in:
Your Name committed
1 parent
3cacaacbeb
commit
8b73b8dd2f
52 files changed
+265
-265
No files matched your search
@@ -105,7 +105,7 @@ export default async function AboutPage({ params }: { params: Promise<{ lang: st
|
||||
<h2 className="text-4xl font-bold text-text-main">Ready to find your scent?</h2>
|
||||
<p className="mx-auto max-w-md text-muted-text">Let our Scent Guide help you discover the perfect blend for your moment.</p>
|
||||
<div className="flex flex-col justify-center gap-4 pt-4 sm:flex-row">
|
||||
<Link href="/scent-guide" className="rounded-full bg-text-main px-10 py-4 font-bold uppercase tracking-widest text-white transition hover:bg-brand-primary">
|
||||
<Link href="/scent-guide" className="rounded-full bg-text-main px-10 py-4 font-bold uppercase tracking-widest text-surface-card transition hover:bg-brand-primary">
|
||||
Take the Scent Guide
|
||||
</Link>
|
||||
<Link href="/shop" className="rounded-full border border-brand-primary bg-surface-card px-10 py-4 font-bold uppercase tracking-widest text-brand-primary transition hover:bg-surface-page">
|
||||
|
||||
@@ -124,7 +124,7 @@ export default async function CategoryPage({ params }: { params: Promise<{ id: s
|
||||
href={`/category/${item.id}`}
|
||||
className={`rounded-full px-5 py-2 text-xs font-bold uppercase tracking-widest transition ${
|
||||
isActive
|
||||
? 'bg-text-main text-white'
|
||||
? 'bg-text-main text-surface-card'
|
||||
: 'border border-line-primary/20 bg-surface-card text-muted-text hover:border-brand-primary hover:text-brand-primary'
|
||||
}`}
|
||||
>
|
||||
|
||||
@@ -75,7 +75,7 @@ export default async function CouponsPage({ params }: { params: Promise<{ lang:
|
||||
<p className="mb-6 text-muted-text">กรุณากลับมาตรวจสอบโปรโมชั่นใหม่ในภายหลัง</p>
|
||||
<Link
|
||||
href="/shop"
|
||||
className="inline-flex rounded-full bg-brand-primary px-8 py-3 font-bold text-white transition hover:bg-brand-primary-hover"
|
||||
className="inline-flex rounded-full bg-brand-primary px-8 py-3 font-bold text-surface-card transition hover:bg-brand-primary-hover"
|
||||
>
|
||||
ไปช้อปปิ้งกันก่อน
|
||||
</Link>
|
||||
@@ -116,7 +116,7 @@ export default async function CouponsPage({ params }: { params: Promise<{ lang:
|
||||
|
||||
<Link
|
||||
href={`/shop?coupon=${encodeURIComponent(coupon.code)}`}
|
||||
className="flex w-full items-center justify-center gap-2 rounded-full bg-text-main py-4 font-bold text-white transition hover:bg-brand-primary"
|
||||
className="flex w-full items-center justify-center gap-2 rounded-full bg-text-main py-4 font-bold text-surface-card transition hover:bg-brand-primary"
|
||||
>
|
||||
ช้อปพร้อมใช้คูปองเลย
|
||||
<ArrowRight className="h-4 w-4" />
|
||||
|
||||
@@ -83,7 +83,7 @@ export default function FaqPage() {
|
||||
onClick={() => setActiveCategory(category)}
|
||||
className={`flex items-center gap-2 rounded-full px-5 py-2 text-xs font-bold uppercase tracking-widest transition-all duration-300 ${
|
||||
activeCategory === category
|
||||
? 'ui-tab-button-active bg-text-main text-white shadow-card'
|
||||
? 'ui-tab-button-active bg-text-main text-surface-card shadow-card'
|
||||
: 'ui-tab-button-inactive border border-line-primary/20 bg-surface-card hover:border-brand-primary hover:text-brand-primary'
|
||||
}`}
|
||||
>
|
||||
@@ -119,7 +119,7 @@ export default function FaqPage() {
|
||||
<div className="text-3xl">💬</div>
|
||||
<h3 className="text-xl font-bold text-text-main">Still have questions?</h3>
|
||||
<p className="text-sm text-muted-text">Our team is here to help — usually responds within 2 hours.</p>
|
||||
<Link href="/contact" className="inline-block rounded-full bg-text-main px-8 py-3 text-xs font-bold uppercase tracking-widest text-white transition-colors duration-300 hover:bg-brand-primary">
|
||||
<Link href="/contact" className="inline-block rounded-full bg-text-main px-8 py-3 text-xs font-bold uppercase tracking-widest text-surface-card transition-colors duration-300 hover:bg-brand-primary">
|
||||
Contact Us
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
@@ -182,7 +182,7 @@ export default async function OrderStatusPage({ params }: { params: Promise<{ id
|
||||
<Link href="/track" className="rounded-full bg-surface-card px-6 py-3 font-semibold text-text-main shadow-card transition hover:text-brand-primary">
|
||||
ค้นหาออเดอร์อื่น
|
||||
</Link>
|
||||
<Link href="/shop" className="rounded-full bg-brand-primary px-6 py-3 font-semibold text-white transition hover:bg-brand-primary-hover">
|
||||
<Link href="/shop" className="rounded-full bg-brand-primary px-6 py-3 font-semibold text-surface-card transition hover:bg-brand-primary-hover">
|
||||
กลับไปช้อปต่อ
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
@@ -57,7 +57,7 @@ export default async function SearchPage({ searchParams, params }: { searchParam
|
||||
placeholder="Search by scent or product name..."
|
||||
className="min-w-0 flex-1 px-5 py-3 text-sm text-text-main outline-none placeholder:text-muted-text/70"
|
||||
/>
|
||||
<button className="bg-text-main px-6 py-3 text-sm font-bold uppercase tracking-widest text-white transition hover:bg-brand-primary">
|
||||
<button className="bg-text-main px-6 py-3 text-sm font-bold uppercase tracking-widest text-surface-card transition hover:bg-brand-primary">
|
||||
Search
|
||||
</button>
|
||||
</form>
|
||||
|
||||
@@ -61,7 +61,7 @@ export default async function ShopPage({ searchParams, params }: { searchParams:
|
||||
|
||||
<div className="mx-auto max-w-7xl space-y-10 px-6 py-12">
|
||||
<div className="flex flex-wrap gap-3">
|
||||
<Link className="rounded-full bg-text-main px-5 py-2 text-xs font-bold uppercase tracking-widest text-white transition hover:bg-brand-primary" href="/shop">
|
||||
<Link className="rounded-full bg-text-main px-5 py-2 text-xs font-bold uppercase tracking-widest text-surface-card transition hover:bg-brand-primary" href="/shop">
|
||||
All
|
||||
</Link>
|
||||
{categories.map((category) => {
|
||||
|
||||
@@ -10,7 +10,7 @@
|
||||
--color-brand-soft: #D8BFD8;
|
||||
--color-surface-page: #FFF0F5;
|
||||
--color-surface-nav-rest: #F9F8F5;
|
||||
--color-surface-card: #FFFFFF;
|
||||
--color-surface-card: var(--color-surface-card);
|
||||
--color-text-main: #333333;
|
||||
--color-muted-text: #666666;
|
||||
--color-line-primary: #00B900;
|
||||
@@ -91,7 +91,7 @@
|
||||
|
||||
@layer components {
|
||||
.brutal-box {
|
||||
@apply bg-white border border-gray-100 rounded-2xl shadow-brutal transition-all duration-300;
|
||||
@apply bg-surface-card border border-line-primary/20 rounded-2xl shadow-brutal transition-all duration-300;
|
||||
}
|
||||
|
||||
.brutal-box-hover {
|
||||
@@ -99,15 +99,15 @@
|
||||
}
|
||||
|
||||
.brutal-button {
|
||||
@apply px-8 py-4 bg-brand-primary text-white font-medium rounded-full shadow-brutal transition-all duration-300 hover:bg-brand-primary-hover hover:-translate-y-1 hover:shadow-brutal-hover;
|
||||
@apply px-8 py-4 bg-brand-primary text-surface-card font-medium rounded-full shadow-brutal transition-all duration-300 hover:bg-brand-primary-hover hover:-translate-y-1 hover:shadow-brutal-hover;
|
||||
}
|
||||
|
||||
.brutal-button-alt {
|
||||
@apply px-8 py-4 bg-white text-brand-primary font-medium rounded-full border border-brand-primary shadow-brutal transition-all duration-300 hover:bg-surface-page hover:-translate-y-1 hover:shadow-brutal-hover;
|
||||
@apply px-8 py-4 bg-surface-card text-brand-primary font-medium rounded-full border border-brand-primary shadow-brutal transition-all duration-300 hover:bg-surface-page hover:-translate-y-1 hover:shadow-brutal-hover;
|
||||
}
|
||||
|
||||
.ui-card {
|
||||
@apply rounded-2xl border border-gray-100 bg-surface-card shadow-card transition-all duration-300;
|
||||
@apply rounded-2xl border border-line-primary/20 bg-surface-card shadow-card transition-all duration-300;
|
||||
}
|
||||
|
||||
.ui-card-hover {
|
||||
@@ -115,15 +115,15 @@
|
||||
}
|
||||
|
||||
.ui-button-primary {
|
||||
@apply inline-flex items-center justify-center rounded-full bg-text-main px-6 py-3 text-xs font-bold uppercase tracking-widest text-white transition-colors hover:bg-brand-primary;
|
||||
@apply inline-flex items-center justify-center rounded-full bg-text-main px-6 py-3 text-xs font-bold uppercase tracking-widest text-surface-card transition-colors hover:bg-brand-primary;
|
||||
}
|
||||
|
||||
.ui-button-brand {
|
||||
@apply inline-flex items-center justify-center rounded-full bg-brand-primary px-6 py-3 text-xs font-bold uppercase tracking-widest text-white transition-colors hover:bg-brand-primary-hover;
|
||||
@apply inline-flex items-center justify-center rounded-full bg-brand-primary px-6 py-3 text-xs font-bold uppercase tracking-widest text-surface-card transition-colors hover:bg-brand-primary-hover;
|
||||
}
|
||||
|
||||
.ui-button-line {
|
||||
@apply inline-flex items-center justify-center rounded-full bg-line-primary px-4 py-2 text-xs font-bold uppercase tracking-widest text-white shadow-sm transition-colors hover:bg-line-primary-hover;
|
||||
@apply inline-flex items-center justify-center rounded-full bg-line-primary px-4 py-2 text-xs font-bold uppercase tracking-widest text-surface-card shadow-sm transition-colors hover:bg-line-primary-hover;
|
||||
}
|
||||
|
||||
.ui-icon-button {
|
||||
@@ -135,11 +135,11 @@
|
||||
}
|
||||
|
||||
.ui-nav-chip {
|
||||
@apply flex items-center gap-1.5 rounded-full border border-brand-primary/30 bg-white px-3 py-2 text-[10px] font-bold uppercase tracking-wider text-text-main transition-all hover:bg-surface-page hover:text-brand-primary;
|
||||
@apply flex items-center gap-1.5 rounded-full border border-brand-primary/30 bg-surface-card px-3 py-2 text-[10px] font-bold uppercase tracking-wider text-text-main transition-all hover:bg-surface-page hover:text-brand-primary;
|
||||
}
|
||||
|
||||
.ui-nav-panel {
|
||||
@apply overflow-hidden rounded-xl border border-text-main/10 bg-white/95 shadow-2xl backdrop-blur-xl;
|
||||
@apply overflow-hidden rounded-xl border border-text-main/10 bg-surface-card shadow-2xl backdrop-blur-xl;
|
||||
}
|
||||
|
||||
.ui-menu-link {
|
||||
@@ -159,11 +159,11 @@
|
||||
}
|
||||
|
||||
.ui-muted-text {
|
||||
@apply text-gray-600;
|
||||
@apply text-muted-text;
|
||||
}
|
||||
|
||||
.ui-input-shell {
|
||||
@apply rounded-2xl border border-gray-200 bg-surface-page text-text-main outline-none transition focus:border-brand-primary focus:ring-2 focus:ring-brand-primary/20;
|
||||
@apply rounded-2xl border border-line-primary/20 bg-surface-page text-text-main outline-none transition focus:border-brand-primary focus:ring-2 focus:ring-brand-primary/20;
|
||||
}
|
||||
|
||||
.ui-footer-link {
|
||||
@@ -171,7 +171,7 @@
|
||||
}
|
||||
|
||||
.ui-footer-social {
|
||||
@apply flex h-9 w-9 items-center justify-center rounded-full border border-gray-200 bg-surface-page text-[10px] font-bold text-text-main transition-all duration-300 hover:border-brand-primary hover:bg-brand-primary hover:text-white;
|
||||
@apply flex h-9 w-9 items-center justify-center rounded-full border border-line-primary/20 bg-surface-page text-[10px] font-bold text-text-main transition-all duration-300 hover:border-brand-primary hover:bg-brand-primary hover:text-surface-card;
|
||||
}
|
||||
|
||||
.ui-section-band {
|
||||
@@ -187,11 +187,11 @@
|
||||
}
|
||||
|
||||
.ui-section-subtitle {
|
||||
@apply text-gray-500;
|
||||
@apply text-muted-text;
|
||||
}
|
||||
|
||||
.ui-section-card {
|
||||
@apply rounded-3xl bg-white shadow-card;
|
||||
@apply rounded-3xl bg-surface-card shadow-card;
|
||||
}
|
||||
|
||||
.ui-section-card-muted {
|
||||
@@ -215,7 +215,7 @@
|
||||
justify-content: center;
|
||||
overflow: hidden;
|
||||
background: var(--color-text-main);
|
||||
color: #fff;
|
||||
color: var(--color-surface-card);
|
||||
}
|
||||
|
||||
.ui-hero-overlay {
|
||||
@@ -236,7 +236,7 @@
|
||||
}
|
||||
|
||||
.ui-hero-title {
|
||||
color: #fff;
|
||||
color: var(--color-surface-card);
|
||||
font-family: var(--font-display-locale);
|
||||
font-size: 3rem;
|
||||
font-weight: 300;
|
||||
@@ -274,7 +274,7 @@
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
padding: 1rem 2rem;
|
||||
color: #fff;
|
||||
color: var(--color-surface-card);
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.1em;
|
||||
@@ -308,7 +308,7 @@
|
||||
z-index: 10;
|
||||
max-width: 36rem;
|
||||
padding: 2rem;
|
||||
color: #fff;
|
||||
color: var(--color-surface-card);
|
||||
}
|
||||
|
||||
.ui-banner-content > * + * {
|
||||
@@ -318,7 +318,7 @@
|
||||
.ui-section-dark {
|
||||
background: var(--color-text-main);
|
||||
padding: 5rem 1.5rem;
|
||||
color: #fff;
|
||||
color: var(--color-surface-card);
|
||||
}
|
||||
|
||||
.ui-section-dark-card {
|
||||
@@ -329,7 +329,7 @@
|
||||
}
|
||||
|
||||
.ui-section-dark-card-title {
|
||||
color: #fff;
|
||||
color: var(--color-surface-card);
|
||||
font-size: 2.25rem;
|
||||
font-weight: 600;
|
||||
line-height: 2.5rem;
|
||||
@@ -389,7 +389,7 @@
|
||||
}
|
||||
|
||||
.ui-panel {
|
||||
@apply rounded-3xl bg-white shadow-card;
|
||||
@apply rounded-3xl bg-surface-card shadow-card;
|
||||
}
|
||||
|
||||
.ui-panel-muted {
|
||||
@@ -397,11 +397,11 @@
|
||||
}
|
||||
|
||||
.ui-panel-border {
|
||||
@apply rounded-3xl border border-gray-100 bg-white shadow-card;
|
||||
@apply rounded-3xl border border-line-primary/20 bg-surface-card shadow-card;
|
||||
}
|
||||
|
||||
.ui-panel-header {
|
||||
@apply flex items-center gap-3 border-b border-gray-100 pb-5;
|
||||
@apply flex items-center gap-3 border-b border-line-primary/20 pb-5;
|
||||
}
|
||||
|
||||
.ui-panel-title {
|
||||
@@ -409,31 +409,31 @@
|
||||
}
|
||||
|
||||
.ui-panel-subtitle {
|
||||
@apply text-sm text-gray-500;
|
||||
@apply text-sm text-muted-text;
|
||||
}
|
||||
|
||||
.ui-form-label {
|
||||
@apply text-xs font-bold uppercase tracking-[0.18em] text-gray-500;
|
||||
@apply text-xs font-bold uppercase tracking-[0.18em] text-muted-text;
|
||||
}
|
||||
|
||||
.ui-form-shell {
|
||||
@apply w-full rounded-2xl border border-gray-200 bg-surface-page px-4 py-3 text-sm text-text-main outline-none transition focus:border-brand-primary focus:ring-2 focus:ring-brand-primary/20;
|
||||
@apply w-full rounded-2xl border border-line-primary/20 bg-surface-page px-4 py-3 text-sm text-text-main outline-none transition focus:border-brand-primary focus:ring-2 focus:ring-brand-primary/20;
|
||||
}
|
||||
|
||||
.ui-form-shell-light {
|
||||
@apply w-full rounded-2xl border border-gray-200 bg-white px-4 py-3 text-sm text-text-main outline-none transition focus:border-brand-primary focus:ring-2 focus:ring-brand-primary/20;
|
||||
@apply w-full rounded-2xl border border-line-primary/20 bg-surface-card px-4 py-3 text-sm text-text-main outline-none transition focus:border-brand-primary focus:ring-2 focus:ring-brand-primary/20;
|
||||
}
|
||||
|
||||
.ui-form-inline-button {
|
||||
@apply inline-flex items-center justify-center gap-2 rounded-full bg-text-main px-6 py-4 text-sm font-bold uppercase tracking-[0.16em] text-white transition hover:bg-brand-primary disabled:cursor-not-allowed disabled:opacity-60;
|
||||
@apply inline-flex items-center justify-center gap-2 rounded-full bg-text-main px-6 py-4 text-sm font-bold uppercase tracking-[0.16em] text-surface-card transition hover:bg-brand-primary disabled:cursor-not-allowed disabled:opacity-60;
|
||||
}
|
||||
|
||||
.ui-form-inline-button-sm {
|
||||
@apply inline-flex items-center justify-center gap-2 rounded-full bg-text-main px-5 py-2 text-sm font-semibold text-white transition hover:bg-brand-primary disabled:cursor-not-allowed disabled:opacity-60;
|
||||
@apply inline-flex items-center justify-center gap-2 rounded-full bg-text-main px-5 py-2 text-sm font-semibold text-surface-card transition hover:bg-brand-primary disabled:cursor-not-allowed disabled:opacity-60;
|
||||
}
|
||||
|
||||
.ui-form-secondary-button {
|
||||
@apply rounded-full border border-gray-200 px-5 py-2 text-sm font-semibold text-gray-600 transition hover:text-brand-primary;
|
||||
@apply rounded-full border border-line-primary/20 px-5 py-2 text-sm font-semibold text-muted-text transition hover:text-brand-primary;
|
||||
}
|
||||
|
||||
.ui-form-danger-button {
|
||||
@@ -441,7 +441,7 @@
|
||||
}
|
||||
|
||||
.ui-form-checkbox {
|
||||
@apply h-4 w-4 rounded border-gray-300 text-brand-primary;
|
||||
@apply h-4 w-4 rounded border-line-primary/20 text-brand-primary;
|
||||
}
|
||||
|
||||
.ui-status-badge {
|
||||
@@ -523,7 +523,7 @@
|
||||
}
|
||||
|
||||
.ui-tab-button-inactive {
|
||||
@apply text-gray-500 hover:text-text-main;
|
||||
@apply text-muted-text hover:text-text-main;
|
||||
}
|
||||
|
||||
.ui-tab-count {
|
||||
@@ -531,7 +531,7 @@
|
||||
}
|
||||
|
||||
.ui-empty-panel {
|
||||
@apply rounded-3xl bg-white px-6 py-16 text-center shadow-card;
|
||||
@apply rounded-3xl bg-surface-card px-6 py-16 text-center shadow-card;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -545,11 +545,11 @@
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
@apply bg-gray-300 rounded-full;
|
||||
@apply bg-surface-nav-rest rounded-full;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
@apply bg-gray-400;
|
||||
@apply bg-surface-nav-rest;
|
||||
}
|
||||
|
||||
/* Smooth Scrolling */
|
||||
|
||||
Reference in new issue
Block a user