Rename ssr to website, website to spa, add spa nginx config
This commit is contained in:
Your Name committed
1 parent
fc6bf0218e
commit
8514342c2f
103 files changed
+801
-768
No files matched your search
@@ -0,0 +1,144 @@
|
||||
import { useEffect, useState } from 'react'
|
||||
import { Link } from 'react-router-dom'
|
||||
import Navbar from '../components/Navbar'
|
||||
import Footer from '../components/Footer'
|
||||
import { API_BASE, type Category } from '../types'
|
||||
|
||||
const PILLARS = [
|
||||
{
|
||||
icon: '🌱',
|
||||
title: 'Pure Origins',
|
||||
desc: 'Every extract is sourced directly from certified organic farms in Northern Thailand, Vietnam, and Southern France. We work exclusively with small-batch artisan growers.',
|
||||
},
|
||||
{
|
||||
icon: '⚗️',
|
||||
title: 'Artisan Craft',
|
||||
desc: 'Each formula is cold-extracted and hand-blended in our Bangkok studio. No heat processing means every aromatic molecule remains intact and therapeutically potent.',
|
||||
},
|
||||
{
|
||||
icon: '♾️',
|
||||
title: 'Zero Compromise',
|
||||
desc: 'No synthetic fragrance. No parabens. No animal testing. Our commitment to clean formulation is absolute — what touches your senses should honour your wellbeing.',
|
||||
},
|
||||
]
|
||||
|
||||
const STATS = [
|
||||
{ value: '45+', label: 'Unique Scents' },
|
||||
{ value: '5', label: 'Product Lines' },
|
||||
{ value: '2019', label: 'Founded' },
|
||||
{ value: '100%', label: 'Natural Extracts' },
|
||||
]
|
||||
|
||||
export default function AboutPage() {
|
||||
const [categories, setCategories] = useState<Category[]>([])
|
||||
|
||||
useEffect(() => {
|
||||
fetch(`${API_BASE}/categories`).then(r => r.json()).then(setCategories).catch(console.error)
|
||||
}, [])
|
||||
|
||||
return (
|
||||
<div className="min-h-screen">
|
||||
<Navbar categories={categories} />
|
||||
|
||||
{/* Hero */}
|
||||
<section className="relative min-h-[60vh] flex items-center justify-center overflow-hidden pt-24">
|
||||
<div className="absolute inset-0 bg-gradient-to-br from-night-800/60 via-night-900 to-night-900" />
|
||||
<div className="absolute inset-0 opacity-10"
|
||||
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>
|
||||
<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>
|
||||
</h1>
|
||||
<p className="text-slate-300 text-lg leading-relaxed">
|
||||
iRelax began in 2019 as a one-person studio in Bangkok, crafting small batches of botanical aroma blends for friends and family. What started as a personal journey toward calm became a philosophy — that our environment shapes how we feel, think, and rest.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Stats Band */}
|
||||
<section className="py-12 px-6 bg-white/3 border-y border-white/5">
|
||||
<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-xs uppercase tracking-widest text-slate-400">{s.label}</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Mission Section */}
|
||||
<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>
|
||||
<h2 className="text-4xl font-bold leading-tight">
|
||||
Transforming spaces into sanctuaries of peace
|
||||
</h2>
|
||||
<p className="text-slate-300 leading-relaxed">
|
||||
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 iRelax product is designed with intention: the glass bottles are reusable, the packaging is recycled, and the formulas are written to be understood by anyone — not hidden behind chemical jargon.
|
||||
</p>
|
||||
</div>
|
||||
<div className="relative h-80 rounded-2xl overflow-hidden glass border border-white/5">
|
||||
<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">
|
||||
<div className="text-7xl">🌿</div>
|
||||
<p className="text-white/30 text-sm uppercase tracking-widest">iRelax Studio, Bangkok</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Three Pillars */}
|
||||
<section className="py-24 px-6 bg-night-800/20 border-y border-white/5">
|
||||
<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>
|
||||
<h2 className="text-4xl font-bold">Three Pillars</h2>
|
||||
<div className="w-12 h-px bg-cyan-glow 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 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>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* CTA */}
|
||||
<section className="py-24 px-6 text-center space-y-6">
|
||||
<h2 className="text-4xl font-bold">Ready to find your scent?</h2>
|
||||
<p className="text-slate-400 max-w-md mx-auto">
|
||||
Let our Scent Guide help you discover the perfect blend for your moment.
|
||||
</p>
|
||||
<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"
|
||||
>
|
||||
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"
|
||||
>
|
||||
Shop All Products
|
||||
</Link>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<Footer categories={categories} />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in new issue
Block a user