x
This commit is contained in:
Your Name committed
1 parent
3c4bb06003
commit
f7aa4d099f
36 files changed
+528
-180
No files matched your search
@@ -0,0 +1,117 @@
|
||||
import Link from '@/components/LocalizedLink'
|
||||
|
||||
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 const metadata = {
|
||||
title: 'About Us | HomAroma',
|
||||
description: 'Born from a passion for stillness. HomAroma began in 2019 as a Bangkok studio crafting botanical aroma blends.',
|
||||
}
|
||||
|
||||
export default function AboutPage() {
|
||||
return (
|
||||
<div className="min-h-screen bg-pop-bg">
|
||||
<section className="relative flex min-h-[60vh] items-center justify-center overflow-hidden bg-white pt-24">
|
||||
<div className="absolute inset-0 bg-[radial-gradient(circle_at_30%_30%,rgba(255,107,107,0.22),transparent_34%),radial-gradient(circle_at_80%_20%,rgba(255,160,122,0.18),transparent_34%)]" />
|
||||
<div className="relative z-10 mx-auto max-w-3xl space-y-6 px-6 text-center">
|
||||
<p className="text-xs font-semibold uppercase tracking-[0.4em] text-pop-pink">Our Story</p>
|
||||
<h1 className="text-5xl font-bold leading-tight text-pop-black md:text-7xl">
|
||||
Born from a passion for <span className="italic text-pop-pink">stillness</span>
|
||||
</h1>
|
||||
<p className="text-lg leading-relaxed text-gray-600">
|
||||
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.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="border-y border-gray-200 bg-white px-6 py-12">
|
||||
<div className="mx-auto grid max-w-4xl grid-cols-2 gap-8 text-center md:grid-cols-4">
|
||||
{STATS.map(s => (
|
||||
<div key={s.label} className="space-y-1">
|
||||
<div className="text-4xl font-bold text-pop-pink">{s.value}</div>
|
||||
<div className="text-xs uppercase tracking-widest text-gray-500">{s.label}</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="px-6 py-24">
|
||||
<div className="mx-auto grid max-w-6xl items-center gap-16 md:grid-cols-2">
|
||||
<div className="space-y-6">
|
||||
<p className="text-xs font-semibold uppercase tracking-[0.3em] text-pop-pink">Our Mission</p>
|
||||
<h2 className="text-4xl font-bold leading-tight text-pop-black">Transforming spaces into sanctuaries of peace</h2>
|
||||
<p className="leading-relaxed text-gray-700">
|
||||
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-sm leading-relaxed text-gray-600">
|
||||
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.
|
||||
</p>
|
||||
</div>
|
||||
<div className="relative h-80 overflow-hidden rounded-3xl border border-gray-100 bg-white shadow-brutal">
|
||||
<div className="absolute inset-0 bg-gradient-to-br from-pop-bg via-white to-pop-orange/20" />
|
||||
<div className="absolute inset-0 flex items-center justify-center">
|
||||
<div className="space-y-3 text-center">
|
||||
<div className="text-7xl">🌿</div>
|
||||
<p className="text-sm uppercase tracking-widest text-gray-500">HomAroma Studio, Bangkok</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="border-y border-gray-200 bg-white px-6 py-24">
|
||||
<div className="mx-auto max-w-6xl space-y-12">
|
||||
<div className="space-y-3 text-center">
|
||||
<p className="text-xs font-semibold uppercase tracking-[0.3em] text-pop-pink">What We Stand For</p>
|
||||
<h2 className="text-4xl font-bold text-pop-black">Three Pillars</h2>
|
||||
<div className="mx-auto h-px w-12 bg-pop-pink" />
|
||||
</div>
|
||||
<div className="grid gap-8 md:grid-cols-3">
|
||||
{PILLARS.map(p => (
|
||||
<div key={p.title} className="space-y-4 rounded-2xl border border-gray-100 bg-pop-bg p-8 shadow-brutal transition-all duration-300 hover:-translate-y-1 hover:shadow-brutal-hover">
|
||||
<div className="text-4xl">{p.icon}</div>
|
||||
<h3 className="text-xl font-bold text-pop-black">{p.title}</h3>
|
||||
<p className="text-sm leading-relaxed text-gray-600">{p.desc}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="space-y-6 px-6 py-24 text-center">
|
||||
<h2 className="text-4xl font-bold text-pop-black">Ready to find your scent?</h2>
|
||||
<p className="mx-auto max-w-md text-gray-600">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-pop-black px-10 py-4 font-bold uppercase tracking-widest text-white transition hover:bg-pop-pink">
|
||||
Take the Scent Guide
|
||||
</Link>
|
||||
<Link href="/shop" className="rounded-full border border-pop-pink bg-white px-10 py-4 font-bold uppercase tracking-widest text-pop-pink transition hover:bg-pop-bg">
|
||||
Shop All Products
|
||||
</Link>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in new issue
Block a user