213 lines
9.3 KiB
TypeScript
213 lines
9.3 KiB
TypeScript
import Image from "next/image"
|
|
import SiteFooter from "@/components/site-footer"
|
|
|
|
export default function About() {
|
|
return (
|
|
<div className="min-h-screen bg-black">
|
|
{/* Header */}
|
|
<header className="bg-[#e8e4d3] py-4">
|
|
<div className="container mx-auto px-4 flex items-center justify-between">
|
|
<div className="flex items-center">
|
|
<a href="/" className="flex items-center">
|
|
<Image
|
|
src="/images/logo-black-white.png"
|
|
alt="Aunty Sparkles Logo"
|
|
width={96}
|
|
height={96}
|
|
className="mr-4"
|
|
/>
|
|
</a>
|
|
</div>
|
|
<div className="flex items-center space-x-8">
|
|
<nav>
|
|
<ul className="flex space-x-8 text-xl font-bold">
|
|
<li>
|
|
<a href="/about" className="text-blue-600 hover:text-blue-800 transition-colors">
|
|
About
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="/gallery" className="text-gray-700 hover:text-gray-900 transition-colors">
|
|
Gallery
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="/contact" className="text-gray-700 hover:text-gray-900 transition-colors">
|
|
Contact
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</nav>
|
|
<a
|
|
href="/shop"
|
|
className="bg-pink-500 text-white px-6 py-2 font-semibold hover:bg-pink-400 transition-colors rounded-full shadow-lg"
|
|
>
|
|
SHOP NOW
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
{/* Hero Section */}
|
|
<section className="hero-bg py-20">
|
|
<div className="container mx-auto px-4">
|
|
<div className="max-w-2xl">
|
|
<h1 className="text-5xl font-bold text-white mb-4">About Aunty Sparkles</h1>
|
|
<div className="w-16 h-1 bg-yellow-400 mb-6"></div>
|
|
<p className="text-lg text-gray-300">The heart behind Aunty Sparkles</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Main Content */}
|
|
<section className="section-dark py-20">
|
|
<div className="container mx-auto px-4">
|
|
<div className="flex items-start max-w-6xl">
|
|
<div className="w-2/3 pr-12">
|
|
<p className="text-gray-300 leading-relaxed mb-6">
|
|
Hi, I'm Kiersten, the creator behind Aunty Sparkles! I've always been drawn to nature, creativity, and
|
|
the little details that make life feel magical. I love wandering through thrift stores and vintage
|
|
shops, finding inspiration in the textures, colors, and shapes of the natural world. I'm also fascinated
|
|
by handmade fashion—the freedom, the playfulness, and the way people express themselves as boldly and
|
|
beautifully.
|
|
</p>
|
|
|
|
<p className="text-gray-300 leading-relaxed mb-6">
|
|
Aunty Sparkles grew out of my love for giving forgotten things new life. I adore hunting for thrifted
|
|
treasures, repurposing materials, and turning them into something completely unique, whether it's a
|
|
hand-painted denim jacket, a piece of whimsical mushroom art, or a watercolor painting that captures a
|
|
bit of woodland wonder. Each creation is made with intention and care.
|
|
</p>
|
|
|
|
<p className="text-gray-300 leading-relaxed mb-12">
|
|
This brand is my way of blending sustainability, creativity, and a love for the earth into something
|
|
that can be shared. My hope is that when you wear or see an Aunty Sparkles piece, you remember you are
|
|
unique and beautiful, and that beauty can be found everywhere—especially in the things we choose to give
|
|
a second life.
|
|
</p>
|
|
</div>
|
|
<div className="w-1/3">
|
|
<Image
|
|
src="/images/about-photo.jpeg"
|
|
alt="Person sitting with decorative mushrooms in forest"
|
|
width={400}
|
|
height={500}
|
|
className="rounded-lg w-full h-auto object-cover"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Why Upcycling Matters */}
|
|
<section className="section-dark py-20">
|
|
<div className="container mx-auto px-4">
|
|
<div className="flex items-start">
|
|
<div className="w-1/3 pr-8">
|
|
<Image
|
|
src="/images/textile-waste.webp"
|
|
alt="Mountain of textile waste showing environmental impact"
|
|
width={300}
|
|
height={300}
|
|
className="rounded-lg"
|
|
/>
|
|
</div>
|
|
<div className="w-2/3">
|
|
<h2 className="text-3xl font-bold text-white mb-6">Why Upcycling Matters</h2>
|
|
<p className="text-gray-300 leading-relaxed mb-8">
|
|
The fashion industry produces over 100 billion garments annually, yet we wear a million tonnes of
|
|
clothing and up to landfills annually. Most of these textiles take decades—or even centuries—to break
|
|
down, releasing harmful chemicals and microplastics into the environment. Upcycling helps change that by
|
|
giving forgotten items a second chance at life, and cutting down the demand for new production. Every
|
|
upcycled piece keeps fabric out of a landfill and turns it into something beautiful and
|
|
meaningful—proving that sustainability and style can go hand in hand.
|
|
</p>
|
|
|
|
<div className="space-y-4">
|
|
<div>
|
|
<div className="flex justify-between text-sm text-gray-300 mb-1">
|
|
<span>60% of fast fashion is discarded within the year</span>
|
|
</div>
|
|
<div className="w-full bg-gray-700 rounded-full h-2">
|
|
<div className="bg-pink-500 h-2 rounded-full" style={{ width: "60%" }}></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<div className="flex justify-between text-sm text-gray-300 mb-1">
|
|
<span>85% of all discarded clothing ends up in landfills</span>
|
|
</div>
|
|
<div className="w-full bg-gray-700 rounded-full h-2">
|
|
<div className="bg-pink-500 h-2 rounded-full" style={{ width: "85%" }}></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<div className="flex justify-between text-sm text-gray-300 mb-1">
|
|
<span>35% of microplastics in the ocean are from textiles</span>
|
|
</div>
|
|
<div className="w-full bg-gray-700 rounded-full h-2">
|
|
<div className="bg-pink-500 h-2 rounded-full" style={{ width: "35%" }}></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<div className="flex justify-between text-sm text-gray-300 mb-1">
|
|
<span>20% of global wastewater is from dying textiles</span>
|
|
</div>
|
|
<div className="w-full bg-gray-700 rounded-full h-2">
|
|
<div className="bg-pink-500 h-2 rounded-full" style={{ width: "20%" }}></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Finding Treasure */}
|
|
<section className="section-dark py-20">
|
|
<div className="container mx-auto px-4">
|
|
<div className="flex items-start">
|
|
<div className="w-2/3 pr-8">
|
|
<h2 className="text-3xl font-bold text-white mb-6">Finding Treasure in the Forgotten</h2>
|
|
<p className="text-gray-300 leading-relaxed mb-8">
|
|
Aunty Sparkles creations start with a hunt through thrift stores and vintage shops, where I search for
|
|
overlooked and discarded items just for a second chance. Denim jackets have become my favorite
|
|
canvas—they're durable, timeless, and full of character. I look for pieces that have lived a life: faded
|
|
denim, vintage cuts, or forgotten prints. Even pieces that are stained or damaged can make beautiful
|
|
fabrics and textures worth saving. By rescuing these forgotten textiles, they are transformed into
|
|
something new, unique, and full of character, keeping them out of landfills and giving them a second
|
|
life.
|
|
</p>
|
|
</div>
|
|
<div className="w-1/3">
|
|
<Image
|
|
src="/images/thrift-store.webp"
|
|
alt="Thrift store exterior showing secondhand shopping"
|
|
width={300}
|
|
height={300}
|
|
className="rounded-lg"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Map */}
|
|
<div className="mt-16">
|
|
<Image
|
|
src="/placeholder.svg?height=400&width=800&text=Location+Map"
|
|
alt="Location map"
|
|
width={800}
|
|
height={400}
|
|
className="rounded-lg mx-auto"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Footer */}
|
|
<SiteFooter />
|
|
</div>
|
|
)
|
|
}
|