← back to Angels Flowers
components/Footer.tsx
155 lines
import Link from 'next/link'
import { FaPhone, FaEnvelope, FaMapMarkerAlt, FaFacebook, FaInstagram, FaTwitter } from 'react-icons/fa'
export default function Footer() {
const currentYear = new Date().getFullYear()
return (
<footer className="bg-gray-900 dark:bg-gray-950 text-gray-300 dark:text-gray-400">
<div className="container-custom py-12 md:py-16">
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 md:gap-12">
{/* About Section */}
<div className="space-y-4">
<div className="flex items-center space-x-2">
<div className="w-8 h-8 bg-gradient-to-br from-primary-500 to-primary-600 rounded-full flex items-center justify-center">
<span className="text-white text-lg font-bold">A</span>
</div>
<span className="font-serif text-xl font-bold text-white">
Angel's Flowers
</span>
</div>
<p className="text-sm leading-relaxed">
Family-run flower shop in East Los Angeles, bringing you the finest Ecuadorian flowers since 1995. Every bloom tells a story.
</p>
<div className="flex space-x-4">
<a
href="https://facebook.com"
target="_blank"
rel="noopener noreferrer"
className="w-8 h-8 rounded-full bg-gray-800 dark:bg-gray-800 hover:bg-primary-600 dark:hover:bg-primary-500 flex items-center justify-center transition-colors duration-200"
aria-label="Facebook"
>
<FaFacebook className="text-sm" />
</a>
<a
href="https://instagram.com"
target="_blank"
rel="noopener noreferrer"
className="w-8 h-8 rounded-full bg-gray-800 dark:bg-gray-800 hover:bg-primary-600 dark:hover:bg-primary-500 flex items-center justify-center transition-colors duration-200"
aria-label="Instagram"
>
<FaInstagram className="text-sm" />
</a>
<a
href="https://twitter.com"
target="_blank"
rel="noopener noreferrer"
className="w-8 h-8 rounded-full bg-gray-800 dark:bg-gray-800 hover:bg-primary-600 dark:hover:bg-primary-500 flex items-center justify-center transition-colors duration-200"
aria-label="Twitter"
>
<FaTwitter className="text-sm" />
</a>
</div>
</div>
{/* Quick Links */}
<div>
<h3 className="text-white dark:text-gray-100 font-semibold text-lg mb-4">Quick Links</h3>
<ul className="space-y-2">
<li>
<Link
href="/"
className="text-sm hover:text-primary-400 dark:hover:text-primary-300 transition-colors duration-200"
>
Home
</Link>
</li>
<li>
<Link
href="/flowers"
className="text-sm hover:text-primary-400 dark:hover:text-primary-300 transition-colors duration-200"
>
Flowers
</Link>
</li>
<li>
<Link
href="/about"
className="text-sm hover:text-primary-400 dark:hover:text-primary-300 transition-colors duration-200"
>
Our Story
</Link>
</li>
<li>
<Link
href="/contact"
className="text-sm hover:text-primary-400 dark:hover:text-primary-300 transition-colors duration-200"
>
Contact
</Link>
</li>
</ul>
</div>
{/* Contact Info */}
<div>
<h3 className="text-white dark:text-gray-100 font-semibold text-lg mb-4">Contact Us</h3>
<ul className="space-y-3">
<li className="flex items-start space-x-3">
<FaMapMarkerAlt className="text-primary-400 dark:text-primary-300 mt-1 flex-shrink-0" />
<span className="text-sm">
1234 East Los Angeles Ave<br />
East Los Angeles, CA 90022
</span>
</li>
<li className="flex items-center space-x-3">
<FaPhone className="text-primary-400 dark:text-primary-300 flex-shrink-0" />
<a
href="tel:+13231234567"
className="text-sm hover:text-primary-400 dark:hover:text-primary-300 transition-colors duration-200"
>
(323) 123-4567
</a>
</li>
<li className="flex items-center space-x-3">
<FaEnvelope className="text-primary-400 dark:text-primary-300 flex-shrink-0" />
<a
href="mailto:info@angelsflowers.com"
className="text-sm hover:text-primary-400 dark:hover:text-primary-300 transition-colors duration-200"
>
info@angelsflowers.com
</a>
</li>
</ul>
</div>
{/* Business Hours */}
<div>
<h3 className="text-white dark:text-gray-100 font-semibold text-lg mb-4">Business Hours</h3>
<ul className="space-y-2 text-sm">
<li className="flex justify-between">
<span>Monday - Friday:</span>
<span className="text-white dark:text-gray-100">9am - 7pm</span>
</li>
<li className="flex justify-between">
<span>Saturday:</span>
<span className="text-white dark:text-gray-100">9am - 6pm</span>
</li>
<li className="flex justify-between">
<span>Sunday:</span>
<span className="text-white dark:text-gray-100">10am - 4pm</span>
</li>
</ul>
</div>
</div>
<div className="border-t border-gray-800 dark:border-gray-700 mt-12 pt-8 text-center text-sm">
<p>
© {currentYear} Angel's Flowers. All rights reserved. | Handcrafted with love in East LA
</p>
</div>
</div>
</footer>
)
}