← back to Angels Flowers
app/about/page.tsx
300 lines
import Image from 'next/image'
import { FaHeart, FaGlobeAmericas, FaUsers, FaAward } from 'react-icons/fa'
export default function AboutPage() {
return (
<>
{/* Hero Section */}
<section className="relative py-32 bg-gradient-to-br from-primary-600 to-primary-700 text-white mt-16">
<div className="container-custom text-center">
<h1 className="heading-xl mb-6 text-white">
Our Family Story
</h1>
<p className="text-xl max-w-3xl mx-auto leading-relaxed text-gray-100">
Three generations of passion, tradition, and the finest Ecuadorian flowers
</p>
</div>
</section>
{/* Origin Story Section */}
<section className="section-padding bg-white">
<div className="container-custom">
<div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
<div className="space-y-6">
<h2 className="heading-md text-gray-900">
It All Started with Angel
</h2>
<div className="space-y-4 text-lg text-gray-600 leading-relaxed">
<p>
In 1995, our grandmother Angel arrived in East Los Angeles from Quito, Ecuador, carrying with her a deep love for flowers and a dream to share the beauty of her homeland with her new community.
</p>
<p>
Growing up near Ecuador's rose farms in the Andean highlands, Angel understood what made Ecuadorian flowers special: the high altitude, intense sunlight, and rich volcanic soil create roses with larger blooms, longer stems, and more vibrant colors than anywhere else in the world.
</p>
<p>
She opened a small flower shop on East Los Angeles Avenue, determined to bring these exceptional flowers to families celebrating life's most important moments.
</p>
</div>
</div>
<div className="relative h-[500px] rounded-lg overflow-hidden shadow-xl">
<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>
</div>
</section>
{/* Timeline Section */}
<section className="section-padding bg-gray-50">
<div className="container-custom">
<div className="text-center mb-16">
<h2 className="heading-md text-gray-900 mb-4">
Our Journey Through the Years
</h2>
</div>
<div className="max-w-4xl mx-auto space-y-12">
{[
{
year: '1995',
title: 'The Beginning',
description: 'Angel opens her first flower shop in East LA, importing roses directly from Ecuador. The community quickly falls in love with the quality and beauty of her flowers.',
},
{
year: '2005',
title: 'Second Generation',
description: 'Angel\'s daughter Maria joins the business, bringing fresh ideas while honoring traditional values. The shop expands to offer custom arrangements and wedding services.',
},
{
year: '2015',
title: 'Building Partnerships',
description: 'We establish direct relationships with family-owned farms in Ecuador, ensuring fair trade practices and consistent quality for our customers.',
},
{
year: '2020',
title: 'Community Pillars',
description: 'Recognized as one of East LA\'s most trusted businesses. We begin serving our customers\' children and grandchildren - true full-circle moments.',
},
{
year: '2025',
title: 'Three Generations Strong',
description: 'Angel\'s grandchildren now work alongside their mother, continuing the family tradition with the same passion and commitment to excellence that started it all.',
},
].map((milestone, index) => (
<div key={index} className="flex gap-8 items-start">
<div className="flex-shrink-0 w-24 text-right">
<span className="text-3xl font-bold text-primary-600">
{milestone.year}
</span>
</div>
<div className="relative flex-shrink-0">
<div className="w-4 h-4 bg-primary-600 rounded-full" />
{index < 4 && (
<div className="absolute top-4 left-1/2 w-0.5 h-full bg-primary-200 -translate-x-1/2" />
)}
</div>
<div className="flex-1 pb-12">
<h3 className="text-2xl font-bold text-gray-900 mb-2">
{milestone.title}
</h3>
<p className="text-gray-600 leading-relaxed">
{milestone.description}
</p>
</div>
</div>
))}
</div>
</div>
</section>
{/* Values Section */}
<section className="section-padding bg-white">
<div className="container-custom">
<div className="text-center mb-16">
<h2 className="heading-md text-gray-900 mb-4">
Our Values
</h2>
<p className="text-lg text-gray-600 max-w-2xl mx-auto">
The principles that guide everything we do
</p>
</div>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
{[
{
icon: <FaHeart className="w-10 h-10" />,
title: 'Family First',
description: 'We treat every customer like family because that\'s who we are - a family business built on personal relationships and care.',
},
{
icon: <FaGlobeAmericas className="w-10 h-10" />,
title: 'Ecuadorian Pride',
description: 'We honor our roots by sourcing the finest flowers from Ecuador and supporting family farms that share our values.',
},
{
icon: <FaUsers className="w-10 h-10" />,
title: 'Community Focused',
description: 'East LA is our home. We\'re committed to serving our neighbors and celebrating our community\'s milestones.',
},
{
icon: <FaAward className="w-10 h-10" />,
title: 'Quality Promise',
description: 'Three generations of expertise means we never compromise on quality. Every stem meets our family\'s high standards.',
},
].map((value, index) => (
<div key={index} className="text-center">
<div className="inline-flex items-center justify-center w-20 h-20 bg-primary-100 text-primary-600 rounded-full mb-6">
{value.icon}
</div>
<h3 className="text-xl font-bold text-gray-900 mb-3">
{value.title}
</h3>
<p className="text-gray-600 leading-relaxed">
{value.description}
</p>
</div>
))}
</div>
</div>
</section>
{/* Ecuador Connection Section */}
<section className="section-padding bg-gray-50">
<div className="container-custom">
<div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
<div className="relative h-[500px] rounded-lg overflow-hidden shadow-xl order-2 lg:order-1">
<div
className="absolute inset-0 bg-cover bg-center"
style={{
backgroundImage: "url('https://images.unsplash.com/photo-1490750967868-88aa4486c946?q=80&w=1000')",
}}
/>
</div>
<div className="space-y-6 order-1 lg:order-2">
<h2 className="heading-md text-gray-900">
The Magic of Ecuadorian Flowers
</h2>
<div className="space-y-4 text-lg text-gray-600 leading-relaxed">
<p>
Ecuador isn't just where our family comes from - it's home to the world's finest roses. Located on the equator at high altitude, Ecuador's unique climate creates perfect growing conditions.
</p>
<p>
The intense equatorial sunlight, cool mountain temperatures, and volcanic soil produce roses with:
</p>
<ul className="space-y-2 ml-6">
<li className="flex items-start">
<span className="w-2 h-2 bg-primary-500 rounded-full mr-3 mt-2 flex-shrink-0" />
<span>Larger blooms (up to twice the size of standard roses)</span>
</li>
<li className="flex items-start">
<span className="w-2 h-2 bg-primary-500 rounded-full mr-3 mt-2 flex-shrink-0" />
<span>Longer, stronger stems (60-70cm is standard)</span>
</li>
<li className="flex items-start">
<span className="w-2 h-2 bg-primary-500 rounded-full mr-3 mt-2 flex-shrink-0" />
<span>More vibrant, longer-lasting colors</span>
</li>
<li className="flex items-start">
<span className="w-2 h-2 bg-primary-500 rounded-full mr-3 mt-2 flex-shrink-0" />
<span>Extended vase life (10-14 days with proper care)</span>
</li>
</ul>
<p>
This is why we've maintained our direct connections with Ecuadorian farms for three decades - because nothing else compares.
</p>
</div>
</div>
</div>
</div>
</section>
{/* Team Section */}
<section className="section-padding bg-white">
<div className="container-custom">
<div className="text-center mb-16">
<h2 className="heading-md text-gray-900 mb-4">
Meet the Martinez Family
</h2>
<p className="text-lg text-gray-600 max-w-2xl mx-auto">
Three generations working together to serve our community
</p>
</div>
<div className="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-5xl mx-auto">
{[
{
name: 'Angel Martinez',
role: 'Founder & Grandmother',
image: 'https://images.unsplash.com/photo-1544005313-94ddf0286df2?q=80&w=400',
description: 'The heart and soul of our shop, Angel still visits daily to share stories and her love of flowers with customers.',
},
{
name: 'Maria Rodriguez',
role: 'Owner & Daughter',
image: 'https://images.unsplash.com/photo-1438761681033-6461ffad8d80?q=80&w=400',
description: 'Leading the business for 20 years, Maria combines traditional values with modern service excellence.',
},
{
name: 'Sofia & Carlos',
role: 'Third Generation',
image: 'https://images.unsplash.com/photo-1529626455594-4ff0802cfb7e?q=80&w=400',
description: 'Bringing fresh energy and social media savvy while learning the art of flower arranging from their grandmother.',
},
].map((member, index) => (
<div key={index} className="text-center">
<div className="relative w-48 h-48 mx-auto mb-6 rounded-full overflow-hidden shadow-lg">
<div
className="absolute inset-0 bg-cover bg-center"
style={{ backgroundImage: `url('${member.image}')` }}
/>
</div>
<h3 className="text-2xl font-bold text-gray-900 mb-1">
{member.name}
</h3>
<p className="text-primary-600 font-semibold mb-3">
{member.role}
</p>
<p className="text-gray-600 leading-relaxed">
{member.description}
</p>
</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 text-center">
<h2 className="heading-lg text-white mb-6">
Become Part of Our Story
</h2>
<p className="text-xl mb-8 max-w-2xl mx-auto text-gray-100">
Visit us in East LA and experience the warmth of our family tradition. We can't wait to meet you and create something beautiful together.
</p>
<div className="flex flex-col sm:flex-row gap-4 justify-center">
<a
href="tel:+13231234567"
className="inline-block 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"
>
Call Us Today
</a>
<a
href="/contact"
className="inline-block text-lg px-8 py-4 border-2 border-white text-white hover:bg-white hover:text-primary-600 rounded-md transition-all duration-200 font-medium"
>
Visit Our Shop
</a>
</div>
</div>
</section>
</>
)
}