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

fix(spa): redesign remaining pages to light theme

Browse Source
This commit is contained in:
Your Name committed 2026-06-06 19:24:25 +07:00
1 parent d8bff72e4e
commit 15cb147c81
8 files changed
+89 -53
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

apps/spa/src/components/Navbar.tsx
+1 -1
View File
@@ -271,7 +271,7 @@ export default function Navbar({ categories = [] }: NavbarProps) {
{/* ── MOBILE DRAWER ── */} {/* ── MOBILE DRAWER ── */}
<div <div
className={`fixed inset-0 z-40 md:hidden transition-all duration-300 ${mobileOpen ? 'visible' : 'invisible'}`} className={`fixed inset-0 z-[60] md:hidden transition-all duration-300 ${mobileOpen ? 'visible' : 'invisible'}`}
> >
{/* Backdrop */} {/* Backdrop */}
<div <div
apps/spa/src/pages/AboutPage.tsx
+13 -13
View File
@@ -47,9 +47,9 @@ export default function AboutPage() {
style={{ backgroundImage: 'radial-gradient(circle at 30% 50%, rgba(102,252,241,0.3) 0%, transparent 60%), radial-gradient(circle at 80% 20%, rgba(69,162,158,0.2) 0%, transparent 50%)' }} style={{ backgroundImage: 'radial-gradient(circle at 30% 50%, rgba(102,252,241,0.3) 0%, transparent 60%), radial-gradient(circle at 80% 20%, rgba(69,162,158,0.2) 0%, transparent 50%)' }}
/> />
<div className="relative z-10 text-center px-6 max-w-3xl mx-auto space-y-6 animate-fade-in"> <div className="relative z-10 text-center px-6 max-w-3xl mx-auto space-y-6 animate-fade-in">
<p className="text-cyan-glow uppercase tracking-[0.4em] text-xs font-semibold opacity-70">Our Story</p> <p className="text-spa-forest uppercase tracking-[0.4em] text-xs font-semibold opacity-70">Our Story</p>
<h1 className="text-6xl font-bold leading-tight"> <h1 className="text-6xl font-bold leading-tight">
Born from a passion for <span className="text-transparent bg-clip-text bg-gradient-to-r from-cyan-glow to-night-700 italic font-serif">stillness</span> Born from a passion for <span className="text-transparent bg-clip-text bg-gradient-to-r from-cyan-glow to-spa-stone italic font-serif">stillness</span>
</h1> </h1>
<p className="text-slate-300 text-lg leading-relaxed"> <p className="text-slate-300 text-lg leading-relaxed">
HomAroma began in 2019 as a one-person studio in Bangkok, crafting small batches of botanical aroma blends for friends and family. What started as a personal journey toward calm became a philosophy — that our environment shapes how we feel, think, and rest. HomAroma began in 2019 as a one-person studio in Bangkok, crafting small batches of botanical aroma blends for friends and family. What started as a personal journey toward calm became a philosophy — that our environment shapes how we feel, think, and rest.
@@ -58,11 +58,11 @@ export default function AboutPage() {
</section> </section>
{/* Stats Band */} {/* Stats Band */}
<section className="py-12 px-6 bg-white/3 border-y border-white/5"> <section className="py-12 px-6 bg-white/3 border-y border-spa-stone/10">
<div className="max-w-4xl mx-auto grid grid-cols-2 md:grid-cols-4 gap-8 text-center"> <div className="max-w-4xl mx-auto grid grid-cols-2 md:grid-cols-4 gap-8 text-center">
{STATS.map(s => ( {STATS.map(s => (
<div key={s.label} className="space-y-1"> <div key={s.label} className="space-y-1">
<div className="text-4xl font-bold text-cyan-glow">{s.value}</div> <div className="text-4xl font-bold text-spa-forest">{s.value}</div>
<div className="text-xs uppercase tracking-widest text-slate-400">{s.label}</div> <div className="text-xs uppercase tracking-widest text-slate-400">{s.label}</div>
</div> </div>
))} ))}
@@ -73,7 +73,7 @@ export default function AboutPage() {
<section className="py-24 px-6"> <section className="py-24 px-6">
<div className="max-w-6xl mx-auto grid md:grid-cols-2 gap-16 items-center"> <div className="max-w-6xl mx-auto grid md:grid-cols-2 gap-16 items-center">
<div className="space-y-6"> <div className="space-y-6">
<p className="text-cyan-glow uppercase tracking-[0.3em] text-xs font-semibold opacity-70">Our Mission</p> <p className="text-spa-forest uppercase tracking-[0.3em] text-xs font-semibold opacity-70">Our Mission</p>
<h2 className="text-4xl font-bold leading-tight"> <h2 className="text-4xl font-bold leading-tight">
Transforming spaces into sanctuaries of peace Transforming spaces into sanctuaries of peace
</h2> </h2>
@@ -81,10 +81,10 @@ export default function AboutPage() {
We believe that scent is the fastest pathway to emotional transformation. A single breath of the right blend can dissolve anxiety, sharpen focus, or unlock creativity. Our mission is to make that transformation accessible — through products that are as beautiful as they are effective. We believe that scent is the fastest pathway to emotional transformation. A single breath of the right blend can dissolve anxiety, sharpen focus, or unlock creativity. Our mission is to make that transformation accessible — through products that are as beautiful as they are effective.
</p> </p>
<p className="text-slate-400 leading-relaxed text-sm"> <p className="text-slate-400 leading-relaxed text-sm">
Every HomAroma product is designed with intention: the glass bottles are reusable, the packaging is recycled, and the formulas are written to be understood by anyone — not hidden behind chemical jargon. Every HomAroma product is designed with intention: the bg-white shadow-sm border border-spa-stone/10 bottles are reusable, the packaging is recycled, and the formulas are written to be understood by anyone — not hidden behind chemical jargon.
</p> </p>
</div> </div>
<div className="relative h-80 rounded-2xl overflow-hidden glass border border-white/5"> <div className="relative h-80 rounded-2xl overflow-hidden bg-white shadow-sm border border-spa-stone/10 border border-spa-stone/10">
<div className="absolute inset-0 bg-gradient-to-br from-teal-900/30 via-night-800/30 to-purple-900/20" /> <div className="absolute inset-0 bg-gradient-to-br from-teal-900/30 via-night-800/30 to-purple-900/20" />
<div className="absolute inset-0 flex items-center justify-center"> <div className="absolute inset-0 flex items-center justify-center">
<div className="text-center space-y-3"> <div className="text-center space-y-3">
@@ -97,16 +97,16 @@ export default function AboutPage() {
</section> </section>
{/* Three Pillars */} {/* Three Pillars */}
<section className="py-24 px-6 bg-night-800/20 border-y border-white/5"> <section className="py-24 px-6 bg-white border-b border-spa-stone/10 border-y border-spa-stone/10">
<div className="max-w-6xl mx-auto space-y-12"> <div className="max-w-6xl mx-auto space-y-12">
<div className="text-center space-y-3"> <div className="text-center space-y-3">
<p className="text-cyan-glow uppercase tracking-[0.3em] text-xs font-semibold opacity-70">What We Stand For</p> <p className="text-spa-forest uppercase tracking-[0.3em] text-xs font-semibold opacity-70">What We Stand For</p>
<h2 className="text-4xl font-bold">Three Pillars</h2> <h2 className="text-4xl font-bold">Three Pillars</h2>
<div className="w-12 h-px bg-cyan-glow mx-auto" /> <div className="w-12 h-px bg-spa-forest text-white mx-auto" />
</div> </div>
<div className="grid md:grid-cols-3 gap-8"> <div className="grid md:grid-cols-3 gap-8">
{PILLARS.map(p => ( {PILLARS.map(p => (
<div key={p.title} className="glass rounded-2xl p-8 border border-white/5 hover:border-cyan-glow/20 transition-all duration-500 space-y-4"> <div key={p.title} className="bg-white shadow-sm border border-spa-stone/10 rounded-2xl p-8 border border-spa-stone/10 hover:border-spa-forest transition-all duration-500 space-y-4">
<div className="text-4xl">{p.icon}</div> <div className="text-4xl">{p.icon}</div>
<h3 className="text-xl font-bold">{p.title}</h3> <h3 className="text-xl font-bold">{p.title}</h3>
<p className="text-slate-400 text-sm leading-relaxed">{p.desc}</p> <p className="text-slate-400 text-sm leading-relaxed">{p.desc}</p>
@@ -125,13 +125,13 @@ export default function AboutPage() {
<div className="flex flex-col sm:flex-row gap-4 justify-center pt-4"> <div className="flex flex-col sm:flex-row gap-4 justify-center pt-4">
<Link <Link
to="/scent-guide" to="/scent-guide"
className="px-10 py-4 bg-white text-night-900 font-bold rounded-sm tracking-widest uppercase hover:bg-cyan-glow hover:shadow-[0_0_30px_rgba(102,252,241,0.4)] transition-all duration-500" className="px-10 py-4 bg-white text-spa-forest font-bold rounded-sm tracking-widest uppercase hover:bg-spa-forest text-white hover:shadow-[0_0_30px_rgba(102,252,241,0.4)] transition-all duration-500"
> >
Take the Scent Guide Take the Scent Guide
</Link> </Link>
<Link <Link
to="/shop" to="/shop"
className="px-10 py-4 glass text-white font-bold rounded-sm tracking-widest uppercase hover:bg-white/10 transition-all duration-300" className="px-10 py-4 bg-white shadow-sm border border-spa-stone/10 text-white font-bold rounded-sm tracking-widest uppercase hover:bg-white/10 transition-all duration-300"
> >
Shop All Products Shop All Products
</Link> </Link>
apps/spa/src/pages/ArticleReaderPage.tsx
+5 -5
View File
@@ -25,7 +25,7 @@ export default function ArticleReaderPage() {
if (loading) return ( if (loading) return (
<div className="min-h-screen flex items-center justify-center bg-black"> <div className="min-h-screen flex items-center justify-center bg-black">
<Loader2 className="w-8 h-8 animate-spin text-cyan-glow" /> <Loader2 className="w-8 h-8 animate-spin text-spa-forest" />
</div> </div>
) )
@@ -41,13 +41,13 @@ export default function ArticleReaderPage() {
) )
return ( return (
<div className="min-h-screen flex flex-col bg-night-950"> <div className="min-h-screen flex flex-col bg-pop-bg">
<Navbar categories={categories} /> <Navbar categories={categories} />
<main className="flex-1 pt-24 pb-20"> <main className="flex-1 pt-24 pb-20">
<article className="max-w-4xl mx-auto w-full animate-fade-in relative mt-8"> <article className="max-w-4xl mx-auto w-full animate-fade-in relative mt-8">
<Link to="/scent-guide" className="absolute -left-16 xl:-left-24 top-0 mt-8 hidden lg:flex p-4 glass border border-white/5 rounded-full hover:bg-white/10 transition-colors"> <Link to="/scent-guide" className="absolute -left-16 xl:-left-24 top-0 mt-8 hidden lg:flex p-4 bg-white shadow-sm border border-spa-stone/10 border border-spa-stone/10 rounded-full hover:bg-white/10 transition-colors">
<ArrowLeft className="w-5 h-5 text-slate-300" /> <ArrowLeft className="w-5 h-5 text-slate-300" />
</Link> </Link>
@@ -56,7 +56,7 @@ export default function ArticleReaderPage() {
<Link to="/scent-guide" className="lg:hidden text-slate-400 text-sm hover:text-white inline-flex items-center gap-2 mb-4"> <Link to="/scent-guide" className="lg:hidden text-slate-400 text-sm hover:text-white inline-flex items-center gap-2 mb-4">
<ArrowLeft className="w-4 h-4" /> Go Back <ArrowLeft className="w-4 h-4" /> Go Back
</Link> </Link>
<p className="text-cyan-glow uppercase tracking-[0.3em] font-bold text-xs"> <p className="text-spa-forest uppercase tracking-[0.3em] font-bold text-xs">
{new Date(article.createdAt).toLocaleDateString('en-US', { month: 'long', day: 'numeric', year: 'numeric' })} {new Date(article.createdAt).toLocaleDateString('en-US', { month: 'long', day: 'numeric', year: 'numeric' })}
</p> </p>
<h1 className="text-4xl md:text-5xl lg:text-6xl font-bold leading-tight max-w-3xl mx-auto font-serif"> <h1 className="text-4xl md:text-5xl lg:text-6xl font-bold leading-tight max-w-3xl mx-auto font-serif">
@@ -66,7 +66,7 @@ export default function ArticleReaderPage() {
{/* Cover Image */} {/* Cover Image */}
{article.coverImage && ( {article.coverImage && (
<div className="w-full aspect-[16/7] bg-night-900 md:rounded-[2rem] overflow-hidden shadow-2xl mb-16 border border-white/5"> <div className="w-full aspect-[16/7] bg-white md:rounded-[2rem] overflow-hidden shadow-2xl mb-16 border border-spa-stone/10">
<img src={article.coverImage} alt={article.title} className="w-full h-full object-cover" /> <img src={article.coverImage} alt={article.title} className="w-full h-full object-cover" />
</div> </div>
)} )}
apps/spa/src/pages/ContactPage.tsx
+14 -14
View File
@@ -35,8 +35,8 @@ export default function ContactPage() {
<Navbar categories={categories} /> <Navbar categories={categories} />
{/* Header */} {/* Header */}
<div className="pt-32 pb-16 px-6 text-center space-y-4 border-b border-white/5 bg-night-800/20"> <div className="pt-32 pb-16 px-6 text-center space-y-4 border-b border-spa-stone/10 bg-white border-b border-spa-stone/10">
<p className="text-cyan-glow uppercase tracking-[0.4em] text-xs font-semibold opacity-70">Get in Touch</p> <p className="text-spa-forest uppercase tracking-[0.4em] text-xs font-semibold opacity-70">Get in Touch</p>
<h1 className="text-5xl font-bold">Contact Us</h1> <h1 className="text-5xl font-bold">Contact Us</h1>
<p className="text-slate-400 max-w-lg mx-auto"> <p className="text-slate-400 max-w-lg mx-auto">
Have a question, custom request, or partnership idea? We'd love to hear from you. Have a question, custom request, or partnership idea? We'd love to hear from you.
@@ -56,32 +56,32 @@ export default function ContactPage() {
{ icon: '📍', label: 'Studio', value: 'Bangkok, Thailand', href: '#' }, { icon: '📍', label: 'Studio', value: 'Bangkok, Thailand', href: '#' },
].map(item => ( ].map(item => (
<a key={item.label} href={item.href} className="flex items-start gap-4 group"> <a key={item.label} href={item.href} className="flex items-start gap-4 group">
<div className="glass w-10 h-10 rounded-xl flex items-center justify-center text-lg shrink-0 group-hover:bg-cyan-glow/10 transition-colors"> <div className="bg-white shadow-sm border border-spa-stone/10 w-10 h-10 rounded-xl flex items-center justify-center text-lg shrink-0 group-hover:bg-spa-forest/10 transition-colors">
{item.icon} {item.icon}
</div> </div>
<div> <div>
<p className="text-xs text-slate-500 uppercase tracking-widest">{item.label}</p> <p className="text-xs text-slate-500 uppercase tracking-widest">{item.label}</p>
<p className="text-white text-sm font-medium group-hover:text-cyan-glow transition-colors">{item.value}</p> <p className="text-white text-sm font-medium group-hover:text-spa-forest transition-colors">{item.value}</p>
</div> </div>
</a> </a>
))} ))}
</div> </div>
</div> </div>
<div className="glass rounded-2xl p-6 border border-white/5 space-y-3"> <div className="bg-white shadow-sm border border-spa-stone/10 rounded-2xl p-6 border border-spa-stone/10 space-y-3">
<h3 className="font-bold text-sm uppercase tracking-widest">Response Time</h3> <h3 className="font-bold text-sm uppercase tracking-widest">Response Time</h3>
<div className="space-y-2 text-sm"> <div className="space-y-2 text-sm">
<div className="flex justify-between"> <div className="flex justify-between">
<span className="text-slate-400">Email</span> <span className="text-slate-400">Email</span>
<span className="text-cyan-glow font-medium">~2 hours</span> <span className="text-spa-forest font-medium">~2 hours</span>
</div> </div>
<div className="flex justify-between"> <div className="flex justify-between">
<span className="text-slate-400">LINE</span> <span className="text-slate-400">LINE</span>
<span className="text-cyan-glow font-medium">~30 minutes</span> <span className="text-spa-forest font-medium">~30 minutes</span>
</div> </div>
<div className="flex justify-between"> <div className="flex justify-between">
<span className="text-slate-400">Instagram DM</span> <span className="text-slate-400">Instagram DM</span>
<span className="text-cyan-glow font-medium">~4 hours</span> <span className="text-spa-forest font-medium">~4 hours</span>
</div> </div>
</div> </div>
<p className="text-[10px] text-slate-600 pt-2 uppercase tracking-wider">Mon–Sat, 9:00–18:00 (ICT)</p> <p className="text-[10px] text-slate-600 pt-2 uppercase tracking-wider">Mon–Sat, 9:00–18:00 (ICT)</p>
@@ -98,7 +98,7 @@ export default function ContactPage() {
<p className="text-slate-400">Thank you for reaching out. We'll get back to you within 2 hours.</p> <p className="text-slate-400">Thank you for reaching out. We'll get back to you within 2 hours.</p>
<button <button
onClick={() => setStatus('idle')} onClick={() => setStatus('idle')}
className="mt-4 px-8 py-3 glass border border-white/10 hover:border-cyan-glow/30 font-bold uppercase tracking-widest text-xs transition-all rounded-lg" className="mt-4 px-8 py-3 bg-white shadow-sm border border-spa-stone/10 border border-spa-stone/10 hover:border-spa-forest font-bold uppercase tracking-widest text-xs transition-all rounded-lg"
> >
Send Another Send Another
</button> </button>
@@ -116,7 +116,7 @@ export default function ContactPage() {
value={form.name} value={form.name}
onChange={handleChange} onChange={handleChange}
placeholder="Your name" placeholder="Your name"
className="w-full glass border border-white/10 focus:border-cyan-glow/40 rounded-xl px-4 py-3.5 bg-transparent outline-none text-sm text-white placeholder-slate-600 transition-colors" className="w-full bg-white shadow-sm border border-spa-stone/10 border border-spa-stone/10 focus:border-spa-forest rounded-xl px-4 py-3.5 bg-transparent outline-none text-sm text-white placeholder-slate-600 transition-colors"
/> />
</div> </div>
<div className="space-y-2"> <div className="space-y-2">
@@ -128,7 +128,7 @@ export default function ContactPage() {
value={form.email} value={form.email}
onChange={handleChange} onChange={handleChange}
placeholder="your@email.com" placeholder="your@email.com"
className="w-full glass border border-white/10 focus:border-cyan-glow/40 rounded-xl px-4 py-3.5 bg-transparent outline-none text-sm text-white placeholder-slate-600 transition-colors" className="w-full bg-white shadow-sm border border-spa-stone/10 border border-spa-stone/10 focus:border-spa-forest rounded-xl px-4 py-3.5 bg-transparent outline-none text-sm text-white placeholder-slate-600 transition-colors"
/> />
</div> </div>
</div> </div>
@@ -139,7 +139,7 @@ export default function ContactPage() {
name="subject" name="subject"
value={form.subject} value={form.subject}
onChange={handleChange} onChange={handleChange}
className="w-full glass border border-white/10 focus:border-cyan-glow/40 rounded-xl px-4 py-3.5 bg-night-900 outline-none text-sm text-white transition-colors" className="w-full bg-white shadow-sm border border-spa-stone/10 border border-spa-stone/10 focus:border-spa-forest rounded-xl px-4 py-3.5 bg-white outline-none text-sm text-white transition-colors"
> >
<option value="" disabled>Select a subject</option> <option value="" disabled>Select a subject</option>
{SUBJECTS.map(s => <option key={s} value={s}>{s}</option>)} {SUBJECTS.map(s => <option key={s} value={s}>{s}</option>)}
@@ -154,13 +154,13 @@ export default function ContactPage() {
onChange={handleChange} onChange={handleChange}
rows={6} rows={6}
placeholder="Tell us about your inquiry..." placeholder="Tell us about your inquiry..."
className="w-full glass border border-white/10 focus:border-cyan-glow/40 rounded-xl px-4 py-3.5 bg-transparent outline-none text-sm text-white placeholder-slate-600 resize-none transition-colors" className="w-full bg-white shadow-sm border border-spa-stone/10 border border-spa-stone/10 focus:border-spa-forest rounded-xl px-4 py-3.5 bg-transparent outline-none text-sm text-white placeholder-slate-600 resize-none transition-colors"
/> />
</div> </div>
<button <button
type="submit" type="submit"
disabled={status === 'sending'} disabled={status === 'sending'}
className="w-full py-4 bg-white text-night-900 font-bold uppercase tracking-widest text-sm rounded-xl hover:bg-cyan-glow hover:shadow-[0_0_25px_rgba(102,252,241,0.4)] transition-all duration-500 disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-3" className="w-full py-4 bg-white text-spa-forest font-bold uppercase tracking-widest text-sm rounded-xl hover:bg-spa-forest text-white hover:shadow-[0_0_25px_rgba(102,252,241,0.4)] transition-all duration-500 disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-3"
> >
{status === 'sending' ? ( {status === 'sending' ? (
<> <>
apps/spa/src/pages/FaqPage.tsx
+8 -8
View File
@@ -60,8 +60,8 @@ export default function FaqPage() {
<Navbar categories={categories} /> <Navbar categories={categories} />
{/* Header */} {/* Header */}
<div className="pt-32 pb-16 px-6 text-center space-y-4 border-b border-white/5 bg-night-800/20"> <div className="pt-32 pb-16 px-6 text-center space-y-4 border-b border-spa-stone/10 bg-white border-b border-spa-stone/10">
<p className="text-cyan-glow uppercase tracking-[0.4em] text-xs font-semibold opacity-70">Support</p> <p className="text-spa-forest uppercase tracking-[0.4em] text-xs font-semibold opacity-70">Support</p>
<h1 className="text-5xl font-bold">Frequently Asked Questions</h1> <h1 className="text-5xl font-bold">Frequently Asked Questions</h1>
<p className="text-slate-400 max-w-lg mx-auto"> <p className="text-slate-400 max-w-lg mx-auto">
Everything you need to know about HomAroma products, shipping, and care. Everything you need to know about HomAroma products, shipping, and care.
@@ -77,8 +77,8 @@ export default function FaqPage() {
onClick={() => setActiveCategory(category)} onClick={() => setActiveCategory(category)}
className={`px-5 py-2 rounded-full text-xs font-bold uppercase tracking-widest transition-all duration-300 flex items-center gap-2 ${ className={`px-5 py-2 rounded-full text-xs font-bold uppercase tracking-widest transition-all duration-300 flex items-center gap-2 ${
activeCategory === category activeCategory === category
? 'bg-cyan-glow text-night-900 shadow-[0_0_15px_rgba(102,252,241,0.3)]' ? 'bg-spa-forest text-white text-spa-forest shadow-[0_0_15px_rgba(102,252,241,0.3)]'
: 'glass hover:bg-white/10' : 'bg-white shadow-sm border border-spa-stone/10 hover:bg-white/10'
}`} }`}
> >
<span>{icon}</span> {category} <span>{icon}</span> {category}
@@ -94,7 +94,7 @@ export default function FaqPage() {
return ( return (
<div <div
key={key} key={key}
className={`glass rounded-xl overflow-hidden border transition-all duration-300 ${isOpen ? 'border-cyan-glow/20' : 'border-white/5'}`} className={`bg-white shadow-sm border border-spa-stone/10 rounded-xl overflow-hidden border transition-all duration-300 ${isOpen ? 'border-spa-forest' : 'border-spa-stone/10'}`}
> >
<button <button
onClick={() => toggle(key)} onClick={() => toggle(key)}
@@ -102,7 +102,7 @@ export default function FaqPage() {
> >
<span className="font-semibold text-sm md:text-base leading-snug">{item.q}</span> <span className="font-semibold text-sm md:text-base leading-snug">{item.q}</span>
<svg <svg
className={`w-5 h-5 text-cyan-glow shrink-0 transition-transform duration-300 ${isOpen ? 'rotate-45' : ''}`} className={`w-5 h-5 text-spa-forest shrink-0 transition-transform duration-300 ${isOpen ? 'rotate-45' : ''}`}
fill="none" viewBox="0 0 24 24" stroke="currentColor" fill="none" viewBox="0 0 24 24" stroke="currentColor"
> >
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4v16m8-8H4" /> <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4v16m8-8H4" />
@@ -120,13 +120,13 @@ export default function FaqPage() {
</div> </div>
{/* Still have questions? */} {/* Still have questions? */}
<div className="glass rounded-2xl p-8 text-center space-y-4 border border-white/5 mt-12"> <div className="bg-white shadow-sm border border-spa-stone/10 rounded-2xl p-8 text-center space-y-4 border border-spa-stone/10 mt-12">
<div className="text-3xl">💬</div> <div className="text-3xl">💬</div>
<h3 className="font-bold text-xl">Still have questions?</h3> <h3 className="font-bold text-xl">Still have questions?</h3>
<p className="text-slate-400 text-sm">Our team is here to help — usually responds within 2 hours.</p> <p className="text-slate-400 text-sm">Our team is here to help — usually responds within 2 hours.</p>
<a <a
href="/contact" href="/contact"
className="inline-block px-8 py-3 bg-white text-night-900 font-bold rounded-lg uppercase tracking-widest text-xs hover:bg-cyan-glow transition-colors duration-300" className="inline-block px-8 py-3 bg-white text-spa-forest font-bold rounded-lg uppercase tracking-widest text-xs hover:bg-spa-forest text-white transition-colors duration-300"
> >
Contact Us Contact Us
</a> </a>
apps/spa/src/pages/NotFoundPage.tsx
+6 -6
View File
@@ -2,11 +2,11 @@ import { Link } from 'react-router-dom'
export default function NotFoundPage() { export default function NotFoundPage() {
return ( return (
<div className="min-h-screen flex items-center justify-center px-6 bg-night-900"> <div className="min-h-screen flex items-center justify-center px-6 bg-white">
{/* Background glow */} {/* Background glow */}
<div className="absolute inset-0 pointer-events-none overflow-hidden"> <div className="absolute inset-0 pointer-events-none overflow-hidden">
<div className="absolute top-1/3 left-1/2 -translate-x-1/2 -translate-y-1/2 w-96 h-96 bg-cyan-glow/5 rounded-full blur-3xl" /> <div className="absolute top-1/3 left-1/2 -translate-x-1/2 -translate-y-1/2 w-96 h-96 bg-spa-forest/10 rounded-full blur-3xl" />
<div className="absolute bottom-1/4 right-1/4 w-64 h-64 bg-night-700/10 rounded-full blur-3xl" /> <div className="absolute bottom-1/4 right-1/4 w-64 h-64 bg-spa-stone/10 rounded-full blur-3xl" />
</div> </div>
<div className="relative z-10 text-center space-y-8 max-w-lg"> <div className="relative z-10 text-center space-y-8 max-w-lg">
@@ -30,19 +30,19 @@ export default function NotFoundPage() {
<div className="flex flex-col sm:flex-row gap-4 justify-center pt-2"> <div className="flex flex-col sm:flex-row gap-4 justify-center pt-2">
<Link <Link
to="/" to="/"
className="px-8 py-3.5 bg-white text-night-900 font-bold rounded-lg tracking-widest uppercase hover:bg-cyan-glow hover:shadow-[0_0_25px_rgba(102,252,241,0.4)] transition-all duration-500 text-sm" className="px-8 py-3.5 bg-white text-spa-forest font-bold rounded-lg tracking-widest uppercase hover:bg-spa-forest text-white hover:shadow-[0_0_25px_rgba(102,252,241,0.4)] transition-all duration-500 text-sm"
> >
Go Home Go Home
</Link> </Link>
<Link <Link
to="/shop" to="/shop"
className="px-8 py-3.5 glass text-white font-bold rounded-lg tracking-widest uppercase hover:bg-white/10 transition-all duration-300 border border-white/10 text-sm" className="px-8 py-3.5 bg-white shadow-sm border border-spa-stone/10 text-white font-bold rounded-lg tracking-widest uppercase hover:bg-white/10 transition-all duration-300 border border-spa-stone/10 text-sm"
> >
Browse Products Browse Products
</Link> </Link>
</div> </div>
<div className="pt-4 border-t border-white/5"> <div className="pt-4 border-t border-spa-stone/10">
<div className="flex justify-center gap-6 text-xs text-slate-500"> <div className="flex justify-center gap-6 text-xs text-slate-500">
<Link to="/scent-guide" className="hover:text-white transition-colors">Scent Guide</Link> <Link to="/scent-guide" className="hover:text-white transition-colors">Scent Guide</Link>
<Link to="/faq" className="hover:text-white transition-colors">FAQ</Link> <Link to="/faq" className="hover:text-white transition-colors">FAQ</Link>
apps/spa/src/pages/ScentGuidePage.tsx
+6 -6
View File
@@ -18,8 +18,8 @@ export default function ScentGuidePage() {
<Navbar categories={categories} /> <Navbar categories={categories} />
{/* Header */} {/* Header */}
<div className="pt-32 pb-16 px-6 text-center space-y-4 border-b border-white/5 bg-night-800/20"> <div className="pt-32 pb-16 px-6 text-center space-y-4 border-b border-spa-stone/10 bg-white border-b border-spa-stone/10">
<p className="text-cyan-glow uppercase tracking-[0.4em] text-xs font-semibold opacity-70">Journal</p> <p className="text-spa-forest uppercase tracking-[0.4em] text-xs font-semibold opacity-70">Journal</p>
<h1 className="text-5xl font-bold">Scent Guide</h1> <h1 className="text-5xl font-bold">Scent Guide</h1>
<p className="text-slate-400 max-w-lg mx-auto"> <p className="text-slate-400 max-w-lg mx-auto">
Explore our collection of articles, guides, and sensory knowledge. Explore our collection of articles, guides, and sensory knowledge.
@@ -37,9 +37,9 @@ export default function ScentGuidePage() {
<Link <Link
key={article.id} key={article.id}
to={`/article/${article.slug}`} to={`/article/${article.slug}`}
className="group block bg-night-950 rounded-2xl overflow-hidden border border-white/5 hover:border-cyan-glow/30 transition-all duration-300 hover:-translate-y-1 hover:shadow-2xl flex flex-col" className="group block bg-pop-bg rounded-2xl overflow-hidden border border-spa-stone/10 hover:border-spa-forest transition-all duration-300 hover:-translate-y-1 hover:shadow-2xl flex flex-col"
> >
<div className="aspect-[4/3] bg-night-900 overflow-hidden shrink-0"> <div className="aspect-[4/3] bg-white overflow-hidden shrink-0">
{article.coverImage ? ( {article.coverImage ? (
<img src={article.coverImage} alt={article.title} className="w-full h-full object-cover opacity-80 group-hover:opacity-100 group-hover:scale-105 transition-all duration-500" /> <img src={article.coverImage} alt={article.title} className="w-full h-full object-cover opacity-80 group-hover:opacity-100 group-hover:scale-105 transition-all duration-500" />
) : ( ) : (
@@ -49,10 +49,10 @@ export default function ScentGuidePage() {
)} )}
</div> </div>
<div className="p-6 space-y-3 flex-1 flex flex-col"> <div className="p-6 space-y-3 flex-1 flex flex-col">
<p className="text-[10px] text-cyan-glow font-bold tracking-widest uppercase"> <p className="text-[10px] text-spa-forest font-bold tracking-widest uppercase">
{new Date(article.createdAt).toLocaleDateString()} {new Date(article.createdAt).toLocaleDateString()}
</p> </p>
<h3 className="text-xl font-bold leading-tight group-hover:text-cyan-glow transition-colors">{article.title}</h3> <h3 className="text-xl font-bold leading-tight group-hover:text-spa-forest transition-colors">{article.title}</h3>
{/* Remove HTML tags for purely excerpt preview */} {/* Remove HTML tags for purely excerpt preview */}
<div className="text-slate-400 text-sm line-clamp-3" dangerouslySetInnerHTML={{ __html: article.content }} /> <div className="text-slate-400 text-sm line-clamp-3" dangerouslySetInnerHTML={{ __html: article.content }} />
</div> </div>
fix_theme.js
+36
View File
@@ -0,0 +1,36 @@
const fs = require('fs');
const files = [
'apps/spa/src/pages/AboutPage.tsx',
'apps/spa/src/pages/ContactPage.tsx',
'apps/spa/src/pages/FaqPage.tsx',
'apps/spa/src/pages/ScentGuidePage.tsx',
'apps/spa/src/pages/NotFoundPage.tsx',
'apps/spa/src/pages/ArticleReaderPage.tsx'
];
for (const file of files) {
let content = fs.readFileSync(file, 'utf8');
// Specific replaces for safety
content = content.replace(/bg-night-950/g, 'bg-pop-bg');
content = content.replace(/bg-night-900/g, 'bg-white');
content = content.replace(/bg-night-800\/20/g, 'bg-white border-b border-spa-stone/10');
content = content.replace(/bg-night-[0-9]+\/[0-9]+/g, 'bg-spa-stone/10');
content = content.replace(/text-cyan-glow/g, 'text-spa-forest');
content = content.replace(/bg-cyan-glow\/[0-9]+/g, 'bg-spa-forest/10');
content = content.replace(/bg-cyan-glow/g, 'bg-spa-forest text-white');
content = content.replace(/border-cyan-glow\/[0-9]+/g, 'border-spa-forest');
content = content.replace(/border-white\/[0-9]+/g, 'border-spa-stone/10');
content = content.replace(/text-night-900/g, 'text-spa-forest');
content = content.replace(/to-night-700/g, 'to-spa-stone');
// Replace glass with light theme equivalent
content = content.replace(/glass/g, 'bg-white shadow-sm border border-spa-stone/10');
fs.writeFileSync(file, content);
}
console.log("Done fixing themes.");