211 lines
8.9 KiB
TypeScript
211 lines
8.9 KiB
TypeScript
import Image from "next/image"
|
||
import SiteFooter from "@/components/site-footer"
|
||
|
||
export default function Home() {
|
||
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-gray-700 hover:text-gray-900 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="relative py-20 bg-cover bg-center bg-no-repeat"
|
||
style={{
|
||
backgroundImage: `url('/images/denim-hero-background.png')`,
|
||
}}
|
||
>
|
||
{/* Overlay for better text readability */}
|
||
<div className="absolute inset-0 bg-black bg-opacity-40"></div>
|
||
|
||
<div className="container mx-auto px-4 relative z-10">
|
||
<div className="flex items-center justify-between">
|
||
<div className="w-1/2">
|
||
<div className="w-96 h-96 mx-auto">
|
||
<Image
|
||
src="/images/embroidered-patch.webp"
|
||
alt="Aunty Sparkles Logo"
|
||
width={384}
|
||
height={384}
|
||
className="rounded-full shadow-lg"
|
||
/>
|
||
</div>
|
||
</div>
|
||
<div className="w-1/2 text-white">
|
||
<h1 className="text-5xl font-bold mb-4 text-shadow-lg">Aunty Sparkles</h1>
|
||
<div className="w-16 h-1 bg-yellow-400 mb-6"></div>
|
||
<p className="text-lg mb-8 leading-relaxed text-shadow">
|
||
Welcome to Aunty Sparkles – a whimsical little world of upcycled treasures and handmade creations that
|
||
will make you sparkle just like me!
|
||
</p>
|
||
<a
|
||
href="/shop"
|
||
className="bg-yellow-400 text-black px-8 py-3 font-semibold hover:bg-yellow-300 transition-colors mx-auto block shadow-lg text-center"
|
||
>
|
||
SHOP NOW
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* About Section - Photo LEFT, Text RIGHT */}
|
||
<section className="section-dark py-20">
|
||
<div className="container mx-auto px-4">
|
||
<div className="flex items-center">
|
||
<div className="w-1/2 pr-12 flex items-start">
|
||
<Image
|
||
src="/images/about-photo.jpeg"
|
||
alt="Person sitting with decorative mushrooms in forest"
|
||
width={500}
|
||
height={600}
|
||
className="rounded-lg w-full h-auto object-cover"
|
||
/>
|
||
</div>
|
||
<div className="w-1/2">
|
||
<h2 className="text-4xl font-bold text-white mb-8">About Aunty Sparkles</h2>
|
||
<p className="text-gray-300 leading-relaxed mb-6">
|
||
Aunty Sparkles is a celebration of creativity, sustainability, and a love for the little details that
|
||
make life feel special. Rooted in upcycling and inspired by nature, every piece represents a commitment
|
||
to giving new life to forgotten items while creating something truly unique.
|
||
</p>
|
||
<p className="text-gray-300 leading-relaxed">
|
||
To be unique. Nothing here is mass-produced; each creation carries its own story, designed to bring joy
|
||
and individuality to your life. When you shop at Aunty Sparkles, you'll find treasures that are playful,
|
||
thoughtful, and connected by one thread: the belief that everyone deserves to sparkle.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* Collections Section */}
|
||
<section className="section-dark py-20">
|
||
<div className="container mx-auto px-4">
|
||
<h2 className="font-bold text-white text-center mb-12 text-6xl">Collections</h2>
|
||
<div className="w-16 h-1 bg-yellow-400 mb-16"></div>
|
||
|
||
{/* Upcycled Jackets */}
|
||
<div className="flex items-center mb-20">
|
||
<div className="w-1/2 pr-12">
|
||
<Image
|
||
src="/images/upcycled-jackets.webp"
|
||
alt="Upcycled Jackets and Art Collection"
|
||
width={500}
|
||
height={500}
|
||
className="rounded-lg"
|
||
/>
|
||
</div>
|
||
<div className="w-1/2">
|
||
<h3 className="text-3xl font-bold text-white mb-6">Upcycled Jackets</h3>
|
||
<p className="text-gray-300 leading-relaxed mb-8">
|
||
Every Aunty Sparkles jacket is a one-of-a-kind creation, handcrafted from secondhand denim and
|
||
transformed into wearable art. Every piece is upcycled with care, featuring hand-painted designs and
|
||
whimsical patches that tell a story. From bold, colorful graphics to delicate, nature-inspired details,
|
||
each jacket lets you wear your story while keeping sustainability at heart.
|
||
</p>
|
||
<button className="bg-pink-500 text-white px-8 py-3 font-semibold hover:bg-pink-400 transition-colors">
|
||
SHOP FOR JACKETS
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Art and Jewelry */}
|
||
<div className="flex items-center mb-20">
|
||
<div className="w-1/2 pr-12">
|
||
<h3 className="text-3xl font-bold text-white mb-6">Art and Jewelry</h3>
|
||
<p className="text-gray-300 leading-relaxed mb-8">
|
||
Aunty Sparkles brings a touch of whimsy to everyday life. Handmade mushroom art captures the magic of
|
||
nature in soft, playful tones, while unique stickers add a little sparkle to any surface. Each piece is
|
||
designed to bring joy and wonder to your world, with hand-painted details and wearable pieces of
|
||
woodland wonder. Each creation is made with love, inspired by the beauty and curiosity of the natural
|
||
world.
|
||
</p>
|
||
<button className="bg-pink-500 text-white px-8 py-3 font-semibold hover:bg-pink-400 transition-colors">
|
||
SHOP ART AND JEWELRY
|
||
</button>
|
||
</div>
|
||
<div className="w-1/2">
|
||
<Image
|
||
src="/images/product-collage.webp"
|
||
alt="Aunty Sparkles product collage showing art and jewelry pieces"
|
||
width={400}
|
||
height={400}
|
||
className="rounded-lg"
|
||
/>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Block Prints */}
|
||
<div className="flex items-center">
|
||
<div className="w-1/2 pr-12">
|
||
<Image
|
||
src="/images/embroidered-patch.webp"
|
||
alt="Embroidered patch design"
|
||
width={400}
|
||
height={400}
|
||
className="rounded-lg"
|
||
/>
|
||
</div>
|
||
<div className="w-1/2">
|
||
<h3 className="text-3xl font-bold text-white mb-6">Block Prints - COMING SOON</h3>
|
||
<p className="text-gray-300 leading-relaxed mb-8">
|
||
Get ready for Aunty Sparkles' newest adventure! Block Prints will be the place to discover hand-carved
|
||
stamps and printing tools for your own creativity. Stay tuned for our hand-carved stamps and printing
|
||
tools that will help you create your own beautiful designs. You'll discover easy-to-use block tools.
|
||
Carve that look amazing on everything you make and create your own sparkle.
|
||
</p>
|
||
<button className="bg-yellow-400 text-black px-8 py-3 font-semibold hover:bg-yellow-300 transition-colors">
|
||
SHOP PRINTED CLOTHES
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* Footer */}
|
||
<SiteFooter />
|
||
</div>
|
||
)
|
||
}
|