← back to Angels Flowers
app/page.tsx
245 lines
import Link from 'next/link'
import Image from 'next/image'
import { FaHeart, FaLeaf, FaTruck, FaPhone } from 'react-icons/fa'
export default function HomePage() {
return (
<>
{/* Hero Section */}
<section className="relative h-screen min-h-[600px] flex items-center justify-center overflow-hidden">
{/* Background Image with theme-aware overlay */}
<div
className="absolute inset-0 z-10"
style={{
background: 'linear-gradient(to bottom right, var(--hero-overlay-start), var(--hero-overlay-end))',
}}
/>
<div
className="absolute inset-0 bg-cover bg-center"
style={{
backgroundImage: "url('https://images.unsplash.com/photo-1490750967868-88aa4486c946?q=80&w=2070')",
}}
/>
{/* Content */}
<div className="relative z-20 container-custom text-center">
<h1 className="heading-xl mb-6 text-white animate-fade-in">
Premium Ecuadorian Flowers
<br />
<span className="text-pink-200 dark:text-pink-300">Straight from the Heart</span>
</h1>
<p className="text-xl md:text-2xl mb-8 max-w-3xl mx-auto leading-relaxed text-white/95 dark:text-white/90">
Family-owned since 1995, bringing East Los Angeles the finest roses and arrangements from the highlands of Ecuador
</p>
<div className="flex flex-col sm:flex-row gap-4 justify-center items-center">
<Link href="/flowers" className="btn-primary text-lg px-8 py-4 shadow-lg">
Browse Our Flowers
</Link>
<a
href="tel:+13231234567"
className="inline-flex items-center space-x-2 text-lg px-8 py-4 border-2 border-white text-white hover:bg-white hover:text-primary-600 dark:hover:text-primary-700 rounded-md transition-all duration-200 font-medium shadow-lg"
>
<FaPhone />
<span>Call to Order</span>
</a>
</div>
</div>
{/* Scroll Indicator */}
<div className="absolute bottom-8 left-1/2 -translate-x-1/2 z-20 animate-bounce">
<div className="w-6 h-10 border-2 border-white rounded-full flex justify-center">
<div className="w-1 h-3 bg-white rounded-full mt-2" />
</div>
</div>
</section>
{/* Why Choose Us Section */}
<section className="section-padding" style={{ backgroundColor: 'var(--bg-primary)' }}>
<div className="container-custom">
<div className="text-center mb-16">
<h2 className="heading-lg text-gray-900 dark:text-white mb-4">
Why Choose Angel's Flowers?
</h2>
<p className="text-lg text-gray-600 dark:text-gray-400 max-w-2xl mx-auto">
Over 25 years of excellence, delivering fresh Ecuadorian blooms to our community
</p>
</div>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
{[
{
icon: <FaLeaf className="w-8 h-8" />,
title: 'Ecuadorian Quality',
description: 'Direct from Ecuador\'s highland farms, where perfect conditions produce the world\'s finest roses',
},
{
icon: <FaHeart className="w-8 h-8" />,
title: 'Family Tradition',
description: 'Three generations of flower expertise, treating every customer like family',
},
{
icon: <FaTruck className="w-8 h-8" />,
title: 'Fresh Daily',
description: 'New shipments arrive fresh daily, ensuring maximum vase life and vibrant colors',
},
{
icon: <FaPhone className="w-8 h-8" />,
title: 'Personal Service',
description: 'Expert advice and custom arrangements tailored to your special occasion',
},
].map((feature, index) => (
<div
key={index}
className="text-center p-6 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors duration-300"
>
<div className="inline-flex items-center justify-center w-16 h-16 bg-primary-100 dark:bg-primary-900/30 text-primary-600 dark:text-primary-400 rounded-full mb-4">
{feature.icon}
</div>
<h3 className="text-xl font-bold text-gray-900 dark:text-white mb-2">
{feature.title}
</h3>
<p className="text-gray-600 dark:text-gray-400 leading-relaxed">
{feature.description}
</p>
</div>
))}
</div>
</div>
</section>
{/* Featured Flowers Section */}
<section className="section-padding" style={{ backgroundColor: 'var(--bg-secondary)' }}>
<div className="container-custom">
<div className="text-center mb-16">
<h2 className="heading-lg text-gray-900 dark:text-white mb-4">
Featured Collections
</h2>
<p className="text-lg text-gray-600 dark:text-gray-400 max-w-2xl mx-auto">
Handpicked selections from our premium Ecuadorian collection
</p>
</div>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
{[
{
name: 'Premium Red Roses',
price: '$45 - $120',
image: 'https://images.unsplash.com/photo-1582794543139-8ac9cb0f7b11?q=80&w=800',
description: 'Velvety Ecuadorian roses with larger blooms and longer stems',
},
{
name: 'Rainbow Collection',
price: '$55 - $135',
image: 'https://images.unsplash.com/photo-1563241527-3004b7be0ffd?q=80&w=800',
description: 'Vibrant multi-colored roses in stunning arrangements',
},
{
name: 'Garden Fresh Bouquets',
price: '$40 - $95',
image: 'https://images.unsplash.com/photo-1518709268805-4e9042af9f23?q=80&w=800',
description: 'Mixed seasonal flowers with eucalyptus and greenery',
},
].map((flower, index) => (
<div key={index} className="card group">
<div className="relative h-80 overflow-hidden">
<div
className="absolute inset-0 bg-cover bg-center transform group-hover:scale-110 transition-transform duration-500"
style={{ backgroundImage: `url('${flower.image}')` }}
/>
</div>
<div className="p-6">
<h3 className="text-2xl font-bold text-gray-900 dark:text-white mb-2">
{flower.name}
</h3>
<p className="text-primary-600 dark:text-primary-400 font-semibold text-lg mb-3">
{flower.price}
</p>
<p className="text-gray-600 dark:text-gray-400 mb-4 leading-relaxed">
{flower.description}
</p>
<Link
href="/flowers"
className="inline-block text-primary-600 dark:text-primary-400 hover:text-primary-700 dark:hover:text-primary-300 font-medium transition-colors duration-200"
>
View Collection →
</Link>
</div>
</div>
))}
</div>
<div className="text-center mt-12">
<Link href="/flowers" className="btn-primary text-lg">
View All Flowers
</Link>
</div>
</div>
</section>
{/* Family Story Preview Section */}
<section className="section-padding" style={{ backgroundColor: 'var(--bg-primary)' }}>
<div className="container-custom">
<div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
<div className="relative h-[400px] lg:h-[500px] rounded-lg overflow-hidden shadow-xl dark:shadow-gray-900/50">
<div
className="absolute inset-0 bg-cover bg-center"
style={{
backgroundImage: "url('https://images.unsplash.com/photo-1542838132-92c53300491e?q=80&w=1000')",
}}
/>
</div>
<div className="space-y-6">
<h2 className="heading-lg text-gray-900 dark:text-white">
Three Generations of Flower Excellence
</h2>
<div className="space-y-4 text-lg text-gray-600 dark:text-gray-400 leading-relaxed">
<p>
Angel's Flowers began in 1995 when our grandmother, Angel, brought her love of Ecuadorian roses from Quito to East Los Angeles. What started in a small storefront has blossomed into a beloved family tradition.
</p>
<p>
Today, we continue Angel's vision of bringing the breathtaking beauty of Ecuador's finest flowers to our community. Each rose we offer comes from the same highland farms that inspired our grandmother's passion three decades ago.
</p>
<p className="text-primary-600 dark:text-primary-400 font-semibold">
"Every flower has a story. We're honored to be part of yours."
<span className="block text-sm mt-2 text-gray-500 dark:text-gray-500">- The Martinez Family</span>
</p>
</div>
<Link href="/about" className="btn-primary inline-block">
Read Our Full Story
</Link>
</div>
</div>
</div>
</section>
{/* CTA Section */}
<section className="section-padding bg-gradient-to-br from-primary-600 to-primary-700 dark:from-primary-800 dark:to-primary-900 text-white">
<div className="container-custom text-center">
<h2 className="heading-lg text-white mb-6">
Ready to Brighten Someone's Day?
</h2>
<p className="text-xl mb-8 max-w-2xl mx-auto text-white/95 dark:text-white/90">
Call us today or visit our East LA shop to create the perfect arrangement for any occasion
</p>
<div className="flex flex-col sm:flex-row gap-4 justify-center items-center">
<a
href="tel:+13231234567"
className="inline-flex items-center space-x-2 text-lg px-8 py-4 bg-white text-primary-600 hover:bg-gray-100 dark:hover:bg-gray-200 rounded-md transition-colors duration-200 font-medium shadow-lg"
>
<FaPhone />
<span>(323) 123-4567</span>
</a>
<Link
href="/contact"
className="inline-flex items-center space-x-2 text-lg px-8 py-4 border-2 border-white text-white hover:bg-white hover:text-primary-600 dark:hover:text-primary-700 rounded-md transition-all duration-200 font-medium"
>
Visit Us in East LA
</Link>
</div>
</div>
</section>
</>
)
}