fix(spa): redesign remaining pages to light theme

apps/spa/src/pages/AboutPage.tsx

@@ -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%)' }}
         />
         <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">
-            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>
           <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.
@@ -58,11 +58,11 @@ export default function AboutPage() {
       </section>
 
       {/* 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">
           {STATS.map(s => (
             <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>
           ))}
@@ -73,7 +73,7 @@ export default function AboutPage() {
       <section className="py-24 px-6">
         <div className="max-w-6xl mx-auto grid md:grid-cols-2 gap-16 items-center">
           <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">
               Transforming spaces into sanctuaries of peace
             </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.
             </p>
             <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>
           </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 flex items-center justify-center">
               <div className="text-center space-y-3">
@@ -97,16 +97,16 @@ export default function AboutPage() {
       </section>
 
       {/* 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="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>
-            <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 className="grid md:grid-cols-3 gap-8">
             {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>
                 <h3 className="text-xl font-bold">{p.title}</h3>
                 <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">
           <Link
             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
           </Link>
           <Link
             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
           </Link>