← back to Angels Flowers
app/contact/page.tsx
393 lines
'use client'
import { useState } from 'react'
import { FaPhone, FaEnvelope, FaMapMarkerAlt, FaClock, FaFacebook, FaInstagram } from 'react-icons/fa'
export default function ContactPage() {
const [formData, setFormData] = useState({
name: '',
email: '',
phone: '',
occasion: '',
message: '',
})
const [submitted, setSubmitted] = useState(false)
const handleSubmit = (e: React.FormEvent) => {
e.preventDefault()
// In production, this would send to an API endpoint
console.log('Form submitted:', formData)
setSubmitted(true)
setTimeout(() => setSubmitted(false), 5000)
}
const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>) => {
setFormData({
...formData,
[e.target.name]: e.target.value,
})
}
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">
Get in Touch
</h1>
<p className="text-xl max-w-3xl mx-auto leading-relaxed text-gray-100">
We'd love to hear from you. Visit us in East LA or reach out with any questions about our flowers and services.
</p>
</div>
</section>
{/* Contact Info & Form Section */}
<section className="section-padding bg-white">
<div className="container-custom">
<div className="grid grid-cols-1 lg:grid-cols-2 gap-12">
{/* Contact Information */}
<div className="space-y-8">
<div>
<h2 className="heading-md text-gray-900 mb-6">
Visit Our Shop
</h2>
<p className="text-lg text-gray-600 mb-8 leading-relaxed">
Come see us in person! We love meeting our customers face-to-face and helping you choose the perfect flowers. Walk-ins are always welcome.
</p>
</div>
{/* Contact Cards */}
<div className="space-y-6">
<div className="flex items-start space-x-4 p-6 bg-gray-50 rounded-lg hover:bg-gray-100 transition-colors duration-200">
<div className="flex-shrink-0 w-12 h-12 bg-primary-100 text-primary-600 rounded-lg flex items-center justify-center">
<FaMapMarkerAlt className="text-xl" />
</div>
<div>
<h3 className="font-bold text-gray-900 mb-2">Address</h3>
<p className="text-gray-600">
1234 East Los Angeles Avenue<br />
East Los Angeles, CA 90022
</p>
<a
href="https://maps.google.com"
target="_blank"
rel="noopener noreferrer"
className="inline-block mt-2 text-primary-600 hover:text-primary-700 font-medium text-sm"
>
Get Directions →
</a>
</div>
</div>
<div className="flex items-start space-x-4 p-6 bg-gray-50 rounded-lg hover:bg-gray-100 transition-colors duration-200">
<div className="flex-shrink-0 w-12 h-12 bg-primary-100 text-primary-600 rounded-lg flex items-center justify-center">
<FaPhone className="text-xl" />
</div>
<div>
<h3 className="font-bold text-gray-900 mb-2">Phone</h3>
<a
href="tel:+13231234567"
className="text-gray-600 hover:text-primary-600 transition-colors duration-200"
>
(323) 123-4567
</a>
<p className="text-sm text-gray-500 mt-1">
Call us for immediate assistance
</p>
</div>
</div>
<div className="flex items-start space-x-4 p-6 bg-gray-50 rounded-lg hover:bg-gray-100 transition-colors duration-200">
<div className="flex-shrink-0 w-12 h-12 bg-primary-100 text-primary-600 rounded-lg flex items-center justify-center">
<FaEnvelope className="text-xl" />
</div>
<div>
<h3 className="font-bold text-gray-900 mb-2">Email</h3>
<a
href="mailto:info@angelsflowers.com"
className="text-gray-600 hover:text-primary-600 transition-colors duration-200"
>
info@angelsflowers.com
</a>
<p className="text-sm text-gray-500 mt-1">
We'll respond within 24 hours
</p>
</div>
</div>
<div className="flex items-start space-x-4 p-6 bg-gray-50 rounded-lg">
<div className="flex-shrink-0 w-12 h-12 bg-primary-100 text-primary-600 rounded-lg flex items-center justify-center">
<FaClock className="text-xl" />
</div>
<div className="flex-1">
<h3 className="font-bold text-gray-900 mb-3">Business Hours</h3>
<div className="space-y-2 text-sm text-gray-600">
<div className="flex justify-between">
<span>Monday - Friday:</span>
<span className="font-semibold text-gray-900">9:00 AM - 7:00 PM</span>
</div>
<div className="flex justify-between">
<span>Saturday:</span>
<span className="font-semibold text-gray-900">9:00 AM - 6:00 PM</span>
</div>
<div className="flex justify-between">
<span>Sunday:</span>
<span className="font-semibold text-gray-900">10:00 AM - 4:00 PM</span>
</div>
</div>
</div>
</div>
</div>
{/* Social Media */}
<div className="pt-6 border-t border-gray-200">
<h3 className="font-bold text-gray-900 mb-4">Follow Us</h3>
<div className="flex space-x-4">
<a
href="https://facebook.com"
target="_blank"
rel="noopener noreferrer"
className="w-12 h-12 bg-primary-600 hover:bg-primary-700 text-white rounded-lg flex items-center justify-center transition-colors duration-200"
aria-label="Facebook"
>
<FaFacebook className="text-xl" />
</a>
<a
href="https://instagram.com"
target="_blank"
rel="noopener noreferrer"
className="w-12 h-12 bg-primary-600 hover:bg-primary-700 text-white rounded-lg flex items-center justify-center transition-colors duration-200"
aria-label="Instagram"
>
<FaInstagram className="text-xl" />
</a>
</div>
</div>
</div>
{/* Contact Form */}
<div>
<div className="bg-gray-50 rounded-lg p-8">
<h2 className="heading-md text-gray-900 mb-6">
Send Us a Message
</h2>
<p className="text-gray-600 mb-6 leading-relaxed">
Have a question about our flowers or need help with a custom order? Fill out the form below and we'll get back to you soon.
</p>
{submitted && (
<div className="mb-6 p-4 bg-green-50 border border-green-200 rounded-md">
<p className="text-green-800 font-medium">
Thank you for your message! We'll be in touch shortly.
</p>
</div>
)}
<form onSubmit={handleSubmit} className="space-y-6">
<div>
<label htmlFor="name" className="block text-sm font-medium text-gray-700 mb-2">
Your Name *
</label>
<input
type="text"
id="name"
name="name"
required
value={formData.name}
onChange={handleChange}
className="w-full px-4 py-3 border border-gray-300 rounded-md focus:ring-2 focus:ring-primary-500 focus:border-transparent transition-all duration-200"
placeholder="John Doe"
/>
</div>
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
<div>
<label htmlFor="email" className="block text-sm font-medium text-gray-700 mb-2">
Email *
</label>
<input
type="email"
id="email"
name="email"
required
value={formData.email}
onChange={handleChange}
className="w-full px-4 py-3 border border-gray-300 rounded-md focus:ring-2 focus:ring-primary-500 focus:border-transparent transition-all duration-200"
placeholder="john@example.com"
/>
</div>
<div>
<label htmlFor="phone" className="block text-sm font-medium text-gray-700 mb-2">
Phone
</label>
<input
type="tel"
id="phone"
name="phone"
value={formData.phone}
onChange={handleChange}
className="w-full px-4 py-3 border border-gray-300 rounded-md focus:ring-2 focus:ring-primary-500 focus:border-transparent transition-all duration-200"
placeholder="(323) 123-4567"
/>
</div>
</div>
<div>
<label htmlFor="occasion" className="block text-sm font-medium text-gray-700 mb-2">
Occasion
</label>
<select
id="occasion"
name="occasion"
value={formData.occasion}
onChange={handleChange}
className="w-full px-4 py-3 border border-gray-300 rounded-md focus:ring-2 focus:ring-primary-500 focus:border-transparent transition-all duration-200"
>
<option value="">Select an occasion</option>
<option value="birthday">Birthday</option>
<option value="anniversary">Anniversary</option>
<option value="wedding">Wedding</option>
<option value="sympathy">Sympathy</option>
<option value="just-because">Just Because</option>
<option value="corporate">Corporate Event</option>
<option value="other">Other</option>
</select>
</div>
<div>
<label htmlFor="message" className="block text-sm font-medium text-gray-700 mb-2">
Message *
</label>
<textarea
id="message"
name="message"
required
rows={6}
value={formData.message}
onChange={handleChange}
className="w-full px-4 py-3 border border-gray-300 rounded-md focus:ring-2 focus:ring-primary-500 focus:border-transparent transition-all duration-200"
placeholder="Tell us about what you're looking for..."
/>
</div>
<button
type="submit"
className="w-full btn-primary py-4 text-lg"
>
Send Message
</button>
</form>
</div>
</div>
</div>
</div>
</section>
{/* Map Section */}
<section className="section-padding bg-gray-50">
<div className="container-custom">
<div className="text-center mb-12">
<h2 className="heading-md text-gray-900 mb-4">
Find Us in East LA
</h2>
<p className="text-lg text-gray-600">
Located in the heart of East Los Angeles, easy to find and free parking available
</p>
</div>
{/* Map Placeholder */}
<div className="relative h-96 rounded-lg overflow-hidden shadow-lg">
<div className="absolute inset-0 bg-gray-300 flex items-center justify-center">
<div className="text-center">
<FaMapMarkerAlt className="text-6xl text-primary-600 mx-auto mb-4" />
<p className="text-gray-700 font-medium">
1234 East Los Angeles Avenue<br />
East Los Angeles, CA 90022
</p>
<a
href="https://maps.google.com"
target="_blank"
rel="noopener noreferrer"
className="inline-block mt-4 px-6 py-3 bg-primary-600 text-white rounded-md hover:bg-primary-700 transition-colors duration-200 font-medium"
>
Open in Google Maps
</a>
</div>
</div>
{/* In production, replace with actual Google Maps embed or Mapbox */}
</div>
<div className="mt-8 grid grid-cols-1 md:grid-cols-3 gap-6 text-center">
<div className="p-6 bg-white rounded-lg shadow-md">
<h3 className="font-bold text-gray-900 mb-2">Free Parking</h3>
<p className="text-gray-600 text-sm">
Convenient parking lot right in front of our shop
</p>
</div>
<div className="p-6 bg-white rounded-lg shadow-md">
<h3 className="font-bold text-gray-900 mb-2">Wheelchair Accessible</h3>
<p className="text-gray-600 text-sm">
Full accessibility for all customers
</p>
</div>
<div className="p-6 bg-white rounded-lg shadow-md">
<h3 className="font-bold text-gray-900 mb-2">Public Transit</h3>
<p className="text-gray-600 text-sm">
Multiple bus lines stop within 2 blocks
</p>
</div>
</div>
</div>
</section>
{/* FAQ Section */}
<section className="section-padding bg-white">
<div className="container-custom max-w-4xl">
<div className="text-center mb-12">
<h2 className="heading-md text-gray-900 mb-4">
Frequently Asked Questions
</h2>
</div>
<div className="space-y-6">
{[
{
question: 'Do you offer same-day delivery?',
answer: 'Yes! We offer same-day delivery for orders placed before 2 PM. Call us at (323) 123-4567 to arrange same-day service.',
},
{
question: 'Can I place a custom order?',
answer: 'Absolutely! We love creating custom arrangements. Visit us in person or call to discuss your vision with our expert florists.',
},
{
question: 'How long do Ecuadorian roses last?',
answer: 'With proper care, our Ecuadorian roses typically last 10-14 days, much longer than standard roses. We provide care instructions with every purchase.',
},
{
question: 'Do you handle wedding flowers?',
answer: 'Yes! We offer complete wedding flower services including consultations, custom designs, and day-of coordination. Book a consultation to get started.',
},
{
question: 'What payment methods do you accept?',
answer: 'We accept cash, all major credit cards, and contactless payments. We also accept phone orders with card payment.',
},
].map((faq, index) => (
<div key={index} className="border-b border-gray-200 pb-6 last:border-0">
<h3 className="text-xl font-bold text-gray-900 mb-2">
{faq.question}
</h3>
<p className="text-gray-600 leading-relaxed">
{faq.answer}
</p>
</div>
))}
</div>
</div>
</section>
</>
)
}