← back to Angels Flowers
app/flowers/page.tsx
244 lines
import Image from 'next/image'
import { FaPhone } from 'react-icons/fa'
const flowerCategories = [
{
id: 'roses',
name: 'Ecuadorian Roses',
items: [
{
name: 'Classic Red Roses',
price: '$45 - $120',
image: 'https://images.unsplash.com/photo-1582794543139-8ac9cb0f7b11?q=80&w=800',
description: 'Premium long-stem red roses with larger blooms, perfect for expressing love and passion. Available in bouquets of 12, 24, or 36 stems.',
features: ['60-70cm stems', 'Velvety petals', '10-14 day vase life'],
},
{
name: 'White Rose Elegance',
price: '$50 - $125',
image: 'https://images.unsplash.com/photo-1518709766631-a6a7f45921c3?q=80&w=800',
description: 'Pure white roses symbolizing innocence and new beginnings. Ideal for weddings, sympathy, or as a sophisticated gift.',
features: ['60-70cm stems', 'Pure white blooms', 'Elegant presentation'],
},
{
name: 'Pink Perfection',
price: '$48 - $115',
image: 'https://images.unsplash.com/photo-1464297162577-f5295c892194?q=80&w=800',
description: 'Soft pink roses conveying grace, admiration, and joy. Perfect for birthdays, anniversaries, or just because.',
features: ['60-70cm stems', 'Delicate pink hues', 'Sweet fragrance'],
},
{
name: 'Yellow Sunshine',
price: '$45 - $110',
image: 'https://images.unsplash.com/photo-1561181286-d3fee7d55364?q=80&w=800',
description: 'Bright yellow roses representing friendship and celebration. Bring sunshine to any occasion.',
features: ['60-70cm stems', 'Vibrant yellow', 'Cheerful presentation'],
},
{
name: 'Rainbow Rose Collection',
price: '$55 - $135',
image: 'https://images.unsplash.com/photo-1563241527-3004b7be0ffd?q=80&w=800',
description: 'Stunning assortment of multi-colored Ecuadorian roses creating a vibrant, eye-catching arrangement.',
features: ['60-70cm stems', 'Mix of colors', 'Spectacular display'],
},
{
name: 'Lavender Dreams',
price: '$52 - $130',
image: 'https://images.unsplash.com/photo-1518709594023-6eab9bab7b23?q=80&w=800',
description: 'Rare lavender roses offering enchantment and uniqueness. A special choice for those who appreciate the extraordinary.',
features: ['60-70cm stems', 'Rare lavender color', 'Unique and elegant'],
},
],
},
{
id: 'mixed',
name: 'Mixed Arrangements',
items: [
{
name: 'Garden Paradise',
price: '$65 - $150',
image: 'https://images.unsplash.com/photo-1518709268805-4e9042af9f23?q=80&w=800',
description: 'Stunning garden-style arrangement with roses, lilies, and seasonal flowers complemented by fresh greenery.',
features: ['Premium mixed flowers', 'Designer vase', 'Eucalyptus accents'],
},
{
name: 'Spring Meadow',
price: '$55 - $125',
image: 'https://images.unsplash.com/photo-1487070183336-b863922373d4?q=80&w=800',
description: 'Fresh and cheerful combination of tulips, daisies, and wildflowers perfect for brightening any space.',
features: ['Seasonal flowers', 'Colorful mix', 'Natural style'],
},
{
name: 'Tropical Sunset',
price: '$70 - $160',
image: 'https://images.unsplash.com/photo-1558442074-2b41e9db72bb?q=80&w=800',
description: 'Exotic arrangement featuring birds of paradise, orchids, and vibrant tropical blooms.',
features: ['Exotic flowers', 'Bold colors', 'Premium presentation'],
},
{
name: 'Rustic Romance',
price: '$60 - $140',
image: 'https://images.unsplash.com/photo-1455659817273-f96807779a8a?q=80&w=800',
description: 'Charming arrangement with roses, ranunculus, and wildflowers in a rustic wooden container.',
features: ['Romantic mix', 'Rustic container', 'Vintage style'],
},
],
},
{
id: 'special',
name: 'Special Occasions',
items: [
{
name: 'Wedding Collection',
price: 'Custom Pricing',
image: 'https://images.unsplash.com/photo-1519225421980-715cb0215aed?q=80&w=800',
description: 'Complete wedding flower service including bridal bouquets, centerpieces, and ceremony arrangements. Consultation required.',
features: ['Custom designs', 'Full service', 'Professional setup'],
},
{
name: 'Sympathy Arrangements',
price: '$75 - $200',
image: 'https://images.unsplash.com/photo-1498307833015-e7b400441eb8?q=80&w=800',
description: 'Elegant and respectful arrangements for expressing condolences and honoring loved ones.',
features: ['White and soft colors', 'Elegant design', 'Delivery available'],
},
{
name: 'Corporate Events',
price: 'Custom Pricing',
image: 'https://images.unsplash.com/photo-1478146896981-b80fe463b330?q=80&w=800',
description: 'Professional arrangements for corporate events, grand openings, and business celebrations.',
features: ['Bulk pricing', 'Professional design', 'Setup service'],
},
{
name: 'Birthday Celebration',
price: '$55 - $135',
image: 'https://images.unsplash.com/photo-1558618666-fcd25c85cd64?q=80&w=800',
description: 'Vibrant and festive arrangements perfect for birthday celebrations of all ages.',
features: ['Bright colors', 'Festive style', 'Add-on balloons available'],
},
],
},
]
export default function FlowersPage() {
return (
<>
{/* Hero Section */}
<section className="relative py-32 bg-gradient-to-br from-primary-600 to-primary-700 dark:from-primary-700 dark:to-primary-800 text-white mt-16">
<div className="container-custom text-center">
<h1 className="heading-xl mb-6 text-white">
Our Flower Collection
</h1>
<p className="text-xl max-w-3xl mx-auto leading-relaxed text-gray-100">
Explore our selection of premium Ecuadorian roses and custom arrangements. Each flower is hand-selected for quality, freshness, and beauty.
</p>
</div>
</section>
{/* Category Sections */}
{flowerCategories.map((category, categoryIndex) => (
<section
key={category.id}
className={`section-padding ${
categoryIndex % 2 === 0 ? 'bg-white dark:bg-gray-900' : 'bg-gray-50 dark:bg-gray-900/50'
}`}
>
<div className="container-custom">
<div className="text-center mb-12">
<h2 className="heading-md text-gray-900 dark:text-white mb-4">{category.name}</h2>
</div>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
{category.items.map((item, 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('${item.image}')` }}
/>
</div>
<div className="p-6">
<h3 className="text-2xl font-bold text-gray-900 dark:text-white mb-2">
{item.name}
</h3>
<p className="text-primary-600 dark:text-primary-400 font-semibold text-xl mb-3">
{item.price}
</p>
<p className="text-gray-600 dark:text-gray-400 mb-4 leading-relaxed">
{item.description}
</p>
<ul className="space-y-1 mb-4">
{item.features.map((feature, featureIndex) => (
<li
key={featureIndex}
className="text-sm text-gray-600 dark:text-gray-400 flex items-center"
>
<span className="w-1.5 h-1.5 bg-primary-500 dark:bg-primary-400 rounded-full mr-2" />
{feature}
</li>
))}
</ul>
<a
href="tel:+13231234567"
className="inline-flex items-center space-x-2 text-primary-600 dark:text-primary-400 hover:text-primary-700 dark:hover:text-primary-300 font-medium transition-colors duration-200"
>
<FaPhone className="text-sm" />
<span>Call to Order</span>
</a>
</div>
</div>
))}
</div>
</div>
</section>
))}
{/* CTA Section */}
<section className="section-padding bg-gradient-to-br from-primary-600 to-primary-700 text-white">
<div className="container-custom">
<div className="max-w-3xl mx-auto text-center">
<h2 className="heading-lg text-white mb-6">
Need Help Choosing?
</h2>
<p className="text-xl mb-8 text-gray-100 leading-relaxed">
Our flower experts are here to help you create the perfect arrangement for any occasion. Call us for personalized recommendations and custom orders.
</p>
<div className="flex flex-col sm:flex-row gap-4 justify-center">
<a
href="tel:+13231234567"
className="inline-flex items-center justify-center space-x-2 text-lg px-8 py-4 bg-white text-primary-600 hover:bg-gray-100 rounded-md transition-colors duration-200 font-medium shadow-lg"
>
<FaPhone />
<span>(323) 123-4567</span>
</a>
</div>
<div className="mt-8 pt-8 border-t border-white/20">
<h3 className="text-xl font-bold mb-4">Why Our Flowers Stand Out</h3>
<div className="grid grid-cols-1 md:grid-cols-3 gap-6 text-left">
<div>
<h4 className="font-semibold mb-2">Direct from Ecuador</h4>
<p className="text-sm text-gray-100">
We source directly from highland farms for unmatched quality
</p>
</div>
<div>
<h4 className="font-semibold mb-2">Fresh Daily</h4>
<p className="text-sm text-gray-100">
New shipments arrive daily ensuring maximum freshness
</p>
</div>
<div>
<h4 className="font-semibold mb-2">Expert Care</h4>
<p className="text-sm text-gray-100">
Each stem is hand-selected and prepared with expertise
</p>
</div>
</div>
</div>
</div>
</div>
</section>
</>
)
}