441 lines
17 KiB
TypeScript
441 lines
17 KiB
TypeScript
'use client';
|
|
|
|
import { useState } from 'react';
|
|
import { motion } from 'framer-motion';
|
|
import { Mail, Phone, MapPin, Send } from 'lucide-react';
|
|
|
|
export function ContactSection() {
|
|
const [formState, setFormState] = useState({
|
|
name: '',
|
|
email: '',
|
|
phone: '',
|
|
message: '',
|
|
});
|
|
|
|
const [isSubmitting, setIsSubmitting] = useState(false);
|
|
const [isSubmitted, setIsSubmitted] = useState(false);
|
|
|
|
const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
|
|
const { name, value } = e.target;
|
|
setFormState((prev) => ({ ...prev, [name]: value }));
|
|
};
|
|
|
|
const handleSubmit = (e: React.FormEvent) => {
|
|
e.preventDefault();
|
|
setIsSubmitting(true);
|
|
|
|
// Simulate form submission
|
|
setTimeout(() => {
|
|
setIsSubmitting(false);
|
|
setIsSubmitted(true);
|
|
setFormState({
|
|
name: '',
|
|
email: '',
|
|
phone: '',
|
|
message: '',
|
|
});
|
|
|
|
// Reset success message after 5 seconds
|
|
setTimeout(() => {
|
|
setIsSubmitted(false);
|
|
}, 5000);
|
|
}, 1500);
|
|
};
|
|
|
|
return (
|
|
<section id="contact" className="section" style={{
|
|
background: 'linear-gradient(to bottom, rgba(225, 215, 198, 0.3), var(--warm-white))'
|
|
}}>
|
|
<div className="container-custom">
|
|
<div style={{ textAlign: 'center', maxWidth: '48rem', margin: '0 auto', marginBottom: '4rem' }}>
|
|
<motion.span
|
|
initial={{ opacity: 0 }}
|
|
whileInView={{ opacity: 1 }}
|
|
transition={{ duration: 0.5 }}
|
|
viewport={{ once: true }}
|
|
style={{
|
|
display: 'inline-block',
|
|
padding: '0.5rem 1rem',
|
|
backgroundColor: 'rgba(255, 123, 84, 0.1)',
|
|
color: 'var(--sunset-orange)',
|
|
borderRadius: '9999px',
|
|
fontWeight: 500,
|
|
marginBottom: '1rem'
|
|
}}
|
|
>
|
|
Get In Touch
|
|
</motion.span>
|
|
<motion.h2
|
|
initial={{ opacity: 0, y: 20 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.5, delay: 0.1 }}
|
|
viewport={{ once: true }}
|
|
style={{
|
|
fontSize: 'clamp(1.875rem, 3vw, 2.25rem)',
|
|
fontWeight: 700,
|
|
color: 'var(--night-blue)',
|
|
marginBottom: '1rem'
|
|
}}
|
|
>
|
|
Contact Us Today
|
|
</motion.h2>
|
|
<motion.p
|
|
initial={{ opacity: 0, y: 20 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.5, delay: 0.2 }}
|
|
viewport={{ once: true }}
|
|
style={{ color: 'rgba(26, 95, 122, 0.8)' }}
|
|
>
|
|
Have questions or ready to experience our summer vibes? Reach out to us and we'll get back to you as soon as possible.
|
|
</motion.p>
|
|
</div>
|
|
|
|
<div style={{
|
|
display: 'grid',
|
|
gridTemplateColumns: '1fr',
|
|
gap: '3rem'
|
|
}} className="lg:grid-cols-2">
|
|
{/* Contact Info */}
|
|
<motion.div
|
|
initial={{ opacity: 0, x: -50 }}
|
|
whileInView={{ opacity: 1, x: 0 }}
|
|
transition={{ duration: 0.8 }}
|
|
viewport={{ once: true }}
|
|
style={{ display: 'flex', flexDirection: 'column', gap: '2rem' }}
|
|
>
|
|
<div style={{
|
|
backgroundColor: 'var(--warm-white)',
|
|
padding: '2rem',
|
|
borderRadius: '0.75rem',
|
|
boxShadow: '0 4px 6px -1px rgba(0, 0, 0, 0.1)',
|
|
border: '1px solid var(--sand)'
|
|
}}>
|
|
<h3 style={{
|
|
fontSize: '1.5rem',
|
|
fontWeight: 700,
|
|
color: 'var(--night-blue)',
|
|
marginBottom: '1.5rem'
|
|
}}>Contact Information</h3>
|
|
|
|
<div style={{ display: 'flex', flexDirection: 'column', gap: '1.5rem' }}>
|
|
<div style={{ display: 'flex', alignItems: 'flex-start', gap: '1rem' }}>
|
|
<div style={{
|
|
width: '2.5rem',
|
|
height: '2.5rem',
|
|
backgroundColor: 'rgba(255, 123, 84, 0.1)',
|
|
borderRadius: '9999px',
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
flexShrink: 0
|
|
}}>
|
|
<Phone style={{ height: '1.25rem', width: '1.25rem', color: 'var(--sunset-orange)' }} />
|
|
</div>
|
|
<div>
|
|
<h4 style={{ fontWeight: 500, color: 'var(--night-blue)' }}>Phone</h4>
|
|
<p style={{ color: 'var(--evening-blue)' }}>(555) 123-4567</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div style={{ display: 'flex', alignItems: 'flex-start', gap: '1rem' }}>
|
|
<div style={{
|
|
width: '2.5rem',
|
|
height: '2.5rem',
|
|
backgroundColor: 'rgba(255, 123, 84, 0.1)',
|
|
borderRadius: '9999px',
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
flexShrink: 0
|
|
}}>
|
|
<Mail style={{ height: '1.25rem', width: '1.25rem', color: 'var(--sunset-orange)' }} />
|
|
</div>
|
|
<div>
|
|
<h4 style={{ fontWeight: 500, color: 'var(--night-blue)' }}>Email</h4>
|
|
<p style={{ color: 'var(--evening-blue)' }}>hello@familybusiness.com</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div style={{ display: 'flex', alignItems: 'flex-start', gap: '1rem' }}>
|
|
<div style={{
|
|
width: '2.5rem',
|
|
height: '2.5rem',
|
|
backgroundColor: 'rgba(255, 123, 84, 0.1)',
|
|
borderRadius: '9999px',
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
flexShrink: 0
|
|
}}>
|
|
<MapPin style={{ height: '1.25rem', width: '1.25rem', color: 'var(--sunset-orange)' }} />
|
|
</div>
|
|
<div>
|
|
<h4 style={{ fontWeight: 500, color: 'var(--night-blue)' }}>Address</h4>
|
|
<p style={{ color: 'var(--evening-blue)' }}>123 Summer Lane, Beachside, CA 90210</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div style={{
|
|
marginTop: '2rem',
|
|
paddingTop: '2rem',
|
|
borderTop: '1px solid var(--sand)'
|
|
}}>
|
|
<h4 style={{ fontWeight: 500, color: 'var(--night-blue)', marginBottom: '1rem' }}>Business Hours</h4>
|
|
<div style={{
|
|
display: 'grid',
|
|
gridTemplateColumns: '1fr',
|
|
gap: '0.5rem'
|
|
}} className="sm:grid-cols-2">
|
|
<div>
|
|
<p style={{ fontWeight: 500, color: 'var(--evening-blue)' }}>Monday - Friday</p>
|
|
<p style={{ color: 'rgba(26, 95, 122, 0.8)' }}>9:00 AM - 6:00 PM</p>
|
|
</div>
|
|
<div>
|
|
<p style={{ fontWeight: 500, color: 'var(--evening-blue)' }}>Saturday</p>
|
|
<p style={{ color: 'rgba(26, 95, 122, 0.8)' }}>10:00 AM - 4:00 PM</p>
|
|
</div>
|
|
<div>
|
|
<p style={{ fontWeight: 500, color: 'var(--evening-blue)' }}>Sunday</p>
|
|
<p style={{ color: 'rgba(26, 95, 122, 0.8)' }}>Closed</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</motion.div>
|
|
|
|
{/* Contact Form */}
|
|
<motion.div
|
|
initial={{ opacity: 0, x: 50 }}
|
|
whileInView={{ opacity: 1, x: 0 }}
|
|
transition={{ duration: 0.8 }}
|
|
viewport={{ once: true }}
|
|
>
|
|
<div style={{
|
|
backgroundColor: 'var(--warm-white)',
|
|
padding: '2rem',
|
|
borderRadius: '0.75rem',
|
|
boxShadow: '0 4px 6px -1px rgba(0, 0, 0, 0.1)',
|
|
border: '1px solid var(--sand)'
|
|
}}>
|
|
<h3 style={{
|
|
fontSize: '1.5rem',
|
|
fontWeight: 700,
|
|
color: 'var(--night-blue)',
|
|
marginBottom: '1.5rem'
|
|
}}>Send Us a Message</h3>
|
|
|
|
{isSubmitted ? (
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 20 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
style={{
|
|
backgroundColor: 'rgba(255, 123, 84, 0.1)',
|
|
padding: '1.5rem',
|
|
borderRadius: '0.5rem',
|
|
textAlign: 'center'
|
|
}}
|
|
>
|
|
<div style={{
|
|
width: '4rem',
|
|
height: '4rem',
|
|
backgroundColor: 'var(--sunset-orange)',
|
|
borderRadius: '9999px',
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
margin: '0 auto',
|
|
marginBottom: '1rem'
|
|
}}>
|
|
<Send style={{ height: '2rem', width: '2rem', color: 'var(--warm-white)' }} />
|
|
</div>
|
|
<h4 style={{
|
|
fontSize: '1.25rem',
|
|
fontWeight: 700,
|
|
color: 'var(--night-blue)',
|
|
marginBottom: '0.5rem'
|
|
}}>Message Sent!</h4>
|
|
<p style={{ color: 'var(--evening-blue)' }}>
|
|
Thank you for reaching out. We'll get back to you as soon as possible.
|
|
</p>
|
|
</motion.div>
|
|
) : (
|
|
<form onSubmit={handleSubmit} style={{ display: 'flex', flexDirection: 'column', gap: '1.5rem' }}>
|
|
<div>
|
|
<label
|
|
htmlFor="name"
|
|
style={{
|
|
display: 'block',
|
|
fontSize: '0.875rem',
|
|
fontWeight: 500,
|
|
color: 'var(--night-blue)',
|
|
marginBottom: '0.25rem'
|
|
}}
|
|
>
|
|
Your Name
|
|
</label>
|
|
<input
|
|
type="text"
|
|
id="name"
|
|
name="name"
|
|
value={formState.name}
|
|
onChange={handleChange}
|
|
required
|
|
style={{
|
|
width: '100%',
|
|
padding: '0.75rem 1rem',
|
|
borderRadius: '0.5rem',
|
|
border: '1px solid var(--sand)',
|
|
outline: 'none',
|
|
backgroundColor: 'var(--warm-white)'
|
|
}}
|
|
placeholder="John Smith"
|
|
/>
|
|
</div>
|
|
|
|
<div style={{
|
|
display: 'grid',
|
|
gridTemplateColumns: '1fr',
|
|
gap: '1.5rem'
|
|
}} className="md:grid-cols-2">
|
|
<div>
|
|
<label
|
|
htmlFor="email"
|
|
style={{
|
|
display: 'block',
|
|
fontSize: '0.875rem',
|
|
fontWeight: 500,
|
|
color: 'var(--night-blue)',
|
|
marginBottom: '0.25rem'
|
|
}}
|
|
>
|
|
Email Address
|
|
</label>
|
|
<input
|
|
type="email"
|
|
id="email"
|
|
name="email"
|
|
value={formState.email}
|
|
onChange={handleChange}
|
|
required
|
|
style={{
|
|
width: '100%',
|
|
padding: '0.75rem 1rem',
|
|
borderRadius: '0.5rem',
|
|
border: '1px solid var(--sand)',
|
|
outline: 'none',
|
|
backgroundColor: 'var(--warm-white)'
|
|
}}
|
|
placeholder="john@example.com"
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<label
|
|
htmlFor="phone"
|
|
style={{
|
|
display: 'block',
|
|
fontSize: '0.875rem',
|
|
fontWeight: 500,
|
|
color: 'var(--night-blue)',
|
|
marginBottom: '0.25rem'
|
|
}}
|
|
>
|
|
Phone Number
|
|
</label>
|
|
<input
|
|
type="tel"
|
|
id="phone"
|
|
name="phone"
|
|
value={formState.phone}
|
|
onChange={handleChange}
|
|
style={{
|
|
width: '100%',
|
|
padding: '0.75rem 1rem',
|
|
borderRadius: '0.5rem',
|
|
border: '1px solid var(--sand)',
|
|
outline: 'none',
|
|
backgroundColor: 'var(--warm-white)'
|
|
}}
|
|
placeholder="(555) 123-4567"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<label
|
|
htmlFor="message"
|
|
style={{
|
|
display: 'block',
|
|
fontSize: '0.875rem',
|
|
fontWeight: 500,
|
|
color: 'var(--night-blue)',
|
|
marginBottom: '0.25rem'
|
|
}}
|
|
>
|
|
Your Message
|
|
</label>
|
|
<textarea
|
|
id="message"
|
|
name="message"
|
|
value={formState.message}
|
|
onChange={handleChange}
|
|
required
|
|
rows={5}
|
|
style={{
|
|
width: '100%',
|
|
padding: '0.75rem 1rem',
|
|
borderRadius: '0.5rem',
|
|
border: '1px solid var(--sand)',
|
|
outline: 'none',
|
|
resize: 'vertical',
|
|
backgroundColor: 'var(--warm-white)'
|
|
}}
|
|
placeholder="How can we help you?"
|
|
></textarea>
|
|
</div>
|
|
|
|
<button
|
|
type="submit"
|
|
disabled={isSubmitting}
|
|
style={{
|
|
width: '100%',
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
backgroundColor: 'var(--sunset-orange)',
|
|
color: 'var(--warm-white)',
|
|
padding: '0.75rem 1.5rem',
|
|
borderRadius: '9999px',
|
|
fontWeight: 500,
|
|
border: 'none',
|
|
cursor: 'pointer',
|
|
transition: 'background-color 0.3s ease'
|
|
}}
|
|
onMouseOver={(e) => e.currentTarget.style.backgroundColor = 'var(--sunset-pink)'}
|
|
onMouseOut={(e) => e.currentTarget.style.backgroundColor = 'var(--sunset-orange)'}
|
|
>
|
|
{isSubmitting ? (
|
|
<>
|
|
<svg className="animate-spin -ml-1 mr-3 h-5 w-5 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
|
|
<circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
|
|
<path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
|
|
</svg>
|
|
Sending...
|
|
</>
|
|
) : (
|
|
<>
|
|
Send Message
|
|
<Send style={{ marginLeft: '0.5rem', height: '1.25rem', width: '1.25rem' }} />
|
|
</>
|
|
)}
|
|
</button>
|
|
</form>
|
|
)}
|
|
</div>
|
|
</motion.div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|