158 lines
5.1 KiB
TypeScript
158 lines
5.1 KiB
TypeScript
"use client"
|
|
import React, { useState } from 'react';
|
|
import { motion } from 'framer-motion';
|
|
import { Button } from '@/components/ui/button';
|
|
import { Card, CardContent } from '@/components/ui/card';
|
|
import { Input } from '@/components/ui/input';
|
|
import { Textarea } from '@/components/ui/textarea';
|
|
import {
|
|
Send,
|
|
CheckCircle} from 'lucide-react';
|
|
|
|
|
|
|
|
// Contact Form Component
|
|
const ContactForm: React.FC = () => {
|
|
const [formData, setFormData] = useState({
|
|
name: '',
|
|
email: '',
|
|
phone: '',
|
|
address: '',
|
|
message: ''
|
|
});
|
|
const [submitted, setSubmitted] = useState(false);
|
|
|
|
const handleSubmit = () => {
|
|
console.log('Form submitted:', formData);
|
|
setSubmitted(true);
|
|
setTimeout(() => setSubmitted(false), 3000);
|
|
};
|
|
|
|
const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
|
|
setFormData({
|
|
...formData,
|
|
[e.target.name]: e.target.value
|
|
});
|
|
};
|
|
|
|
return (
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 20 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
viewport={{ once: true }}
|
|
className="max-w-3xl mx-auto mb-20"
|
|
>
|
|
<Card className="bg-white border-gray-200 shadow-xl">
|
|
<CardContent className="p-8 md:p-12">
|
|
<div className="text-center mb-8">
|
|
<h2 className="text-3xl md:text-4xl font-bold text-gray-900 mb-4">
|
|
Send us a message
|
|
</h2>
|
|
<p className="text-gray-600">
|
|
Fill out the form below and we'll get back to you within 24 hours
|
|
</p>
|
|
</div>
|
|
|
|
{submitted ? (
|
|
<motion.div
|
|
initial={{ opacity: 0, scale: 0.9 }}
|
|
animate={{ opacity: 1, scale: 1 }}
|
|
className="text-center py-12"
|
|
>
|
|
<div className="w-20 h-20 mx-auto mb-6 bg-green-100 rounded-full flex items-center justify-center">
|
|
<CheckCircle className="w-10 h-10 text-green-600" />
|
|
</div>
|
|
<h3 className="text-2xl font-bold text-gray-900 mb-2">Thank you!</h3>
|
|
<p className="text-gray-600">Your message has been sent successfully.</p>
|
|
</motion.div>
|
|
) : (
|
|
<div className="space-y-6">
|
|
<div className="grid md:grid-cols-2 gap-6">
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-2">
|
|
Full Name *
|
|
</label>
|
|
<Input
|
|
type="text"
|
|
name="name"
|
|
value={formData.name}
|
|
onChange={handleChange}
|
|
placeholder="John Doe"
|
|
className="w-full"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-2">
|
|
Email Address *
|
|
</label>
|
|
<Input
|
|
type="email"
|
|
name="email"
|
|
value={formData.email}
|
|
onChange={handleChange}
|
|
placeholder="john@example.com"
|
|
className="w-full"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="grid md:grid-cols-2 gap-6">
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-2">
|
|
Phone Number *
|
|
</label>
|
|
<Input
|
|
type="tel"
|
|
name="phone"
|
|
value={formData.phone}
|
|
onChange={handleChange}
|
|
placeholder="+1 (555) 000-0000"
|
|
className="w-full"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-2">
|
|
Address
|
|
</label>
|
|
<Input
|
|
type="text"
|
|
name="address"
|
|
value={formData.address}
|
|
onChange={handleChange}
|
|
placeholder="City, Country"
|
|
className="w-full"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-2">
|
|
Message *
|
|
</label>
|
|
<Textarea
|
|
name="message"
|
|
value={formData.message}
|
|
onChange={handleChange}
|
|
placeholder="Tell us how we can help you..."
|
|
rows={6}
|
|
className="w-full"
|
|
/>
|
|
</div>
|
|
|
|
<Button
|
|
onClick={handleSubmit}
|
|
size="lg"
|
|
className="w-full bg-gradient-to-r from-purple-600 to-pink-600 hover:from-purple-700 hover:to-pink-700 text-white"
|
|
>
|
|
Send Message
|
|
<Send className="ml-2 w-5 h-5" />
|
|
</Button>
|
|
</div>
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
</motion.div>
|
|
);
|
|
};
|
|
|
|
export default ContactForm |