Add src/app/contact/page.tsx
This commit is contained in:
228
src/app/contact/page.tsx
Normal file
228
src/app/contact/page.tsx
Normal file
@@ -0,0 +1,228 @@
|
||||
"use client"
|
||||
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
|
||||
import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
|
||||
import { useState } from 'react';
|
||||
import { Mail } from 'lucide-react';
|
||||
|
||||
export default function ContactPage() {
|
||||
const [formData, setFormData] = useState({
|
||||
name: '',
|
||||
email: '',
|
||||
phone: '',
|
||||
message: ''
|
||||
});
|
||||
const [submitted, setSubmitted] = useState(false);
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
|
||||
const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
|
||||
const { name, value } = e.target;
|
||||
setFormData(prev => ({
|
||||
...prev,
|
||||
[name]: value
|
||||
}));
|
||||
};
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
setIsLoading(true);
|
||||
|
||||
try {
|
||||
const response = await fetch('https://formspree.io/f/xqazdbrj', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify({
|
||||
...formData,
|
||||
_to: 'guanalv.92@outlook.com'
|
||||
})
|
||||
});
|
||||
|
||||
if (response.ok) {
|
||||
setSubmitted(true);
|
||||
setFormData({ name: '', email: '', phone: '', message: '' });
|
||||
setTimeout(() => setSubmitted(false), 5000);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error submitting form:', error);
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="elastic-effect"
|
||||
defaultTextAnimation="background-highlight"
|
||||
borderRadius="soft"
|
||||
contentWidth="smallMedium"
|
||||
sizing="mediumLargeSizeMediumTitles"
|
||||
background="circleGradient"
|
||||
cardStyle="subtle-shadow"
|
||||
primaryButtonStyle="gradient"
|
||||
secondaryButtonStyle="layered"
|
||||
headingFontWeight="bold"
|
||||
>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleApple
|
||||
brandName="W Painting & Sons"
|
||||
navItems={[
|
||||
{ name: "Services", id: "services" },
|
||||
{ name: "Why Us", id: "why-us" },
|
||||
{ name: "Areas", id: "service-areas" },
|
||||
{ name: "Testimonials", id: "testimonials" },
|
||||
{ name: "Contact", id: "contact" }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="min-h-screen py-20 px-6">
|
||||
<div className="max-w-2xl mx-auto">
|
||||
<div className="text-center mb-12">
|
||||
<div className="flex items-center justify-center mb-4">
|
||||
<Mail className="w-8 h-8 text-blue-600" />
|
||||
</div>
|
||||
<h1 className="text-4xl font-bold mb-4">Get Your Free Estimate</h1>
|
||||
<p className="text-lg text-gray-600 mb-2">Contact us today for a free, no-obligation painting estimate</p>
|
||||
<p className="text-gray-500">We'll get back to you within 24 hours</p>
|
||||
</div>
|
||||
|
||||
{submitted && (
|
||||
<div className="mb-8 p-4 bg-green-50 border border-green-200 rounded-lg text-green-700">
|
||||
<p className="font-semibold">Thank you for your message!</p>
|
||||
<p>We've received your quote request and will contact you soon at {formData.email}</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<form onSubmit={handleSubmit} className="space-y-6 bg-white p-8 rounded-lg shadow-md">
|
||||
<div>
|
||||
<label htmlFor="name" className="block text-sm font-medium text-gray-700 mb-2">
|
||||
Full Name *
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
id="name"
|
||||
name="name"
|
||||
value={formData.name}
|
||||
onChange={handleChange}
|
||||
required
|
||||
className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-600"
|
||||
placeholder="Your name"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label htmlFor="email" className="block text-sm font-medium text-gray-700 mb-2">
|
||||
Email Address *
|
||||
</label>
|
||||
<input
|
||||
type="email"
|
||||
id="email"
|
||||
name="email"
|
||||
value={formData.email}
|
||||
onChange={handleChange}
|
||||
required
|
||||
className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-600"
|
||||
placeholder="your@email.com"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label htmlFor="phone" className="block text-sm font-medium text-gray-700 mb-2">
|
||||
Phone Number
|
||||
</label>
|
||||
<input
|
||||
type="tel"
|
||||
id="phone"
|
||||
name="phone"
|
||||
value={formData.phone}
|
||||
onChange={handleChange}
|
||||
className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-600"
|
||||
placeholder="(819) 775-7695"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label htmlFor="message" className="block text-sm font-medium text-gray-700 mb-2">
|
||||
Project Details *
|
||||
</label>
|
||||
<textarea
|
||||
id="message"
|
||||
name="message"
|
||||
value={formData.message}
|
||||
onChange={handleChange}
|
||||
required
|
||||
rows={6}
|
||||
className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-600"
|
||||
placeholder="Tell us about your painting project. What rooms or areas need painting? Any specific color preferences or timeline?"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
disabled={isLoading}
|
||||
className="w-full bg-blue-600 hover:bg-blue-700 disabled:bg-gray-400 text-white font-semibold py-3 rounded-lg transition duration-200"
|
||||
>
|
||||
{isLoading ? 'Sending...' : 'Request Free Estimate'}
|
||||
</button>
|
||||
|
||||
<p className="text-sm text-gray-500 text-center">
|
||||
By submitting this form, you agree to be contacted about your painting project. Your information will only be used to provide you with an estimate.
|
||||
</p>
|
||||
</form>
|
||||
|
||||
<div className="mt-12 grid md:grid-cols-2 gap-8">
|
||||
<div className="text-center">
|
||||
<h3 className="text-xl font-semibold mb-2">Call Us Directly</h3>
|
||||
<a href="tel:(819)775-7695" className="text-blue-600 hover:text-blue-700 text-lg font-medium">
|
||||
(819) 775-7695
|
||||
</a>
|
||||
<p className="text-gray-600 text-sm mt-1">Available Monday to Friday, 8am-5pm</p>
|
||||
</div>
|
||||
<div className="text-center">
|
||||
<h3 className="text-xl font-semibold mb-2">Email Us</h3>
|
||||
<a href="mailto:guanalv.92@outlook.com" className="text-blue-600 hover:text-blue-700 text-lg font-medium">
|
||||
guanalv.92@outlook.com
|
||||
</a>
|
||||
<p className="text-gray-600 text-sm mt-1">We'll respond within 24 hours</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBaseReveal
|
||||
columns={[
|
||||
{
|
||||
title: "Services", items: [
|
||||
{ label: "Interior Painting", href: "/" },
|
||||
{ label: "Exterior Painting", href: "/" },
|
||||
{ label: "Commercial Painting", href: "/" },
|
||||
{ label: "Surface Preparation", href: "/" }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "Company", items: [
|
||||
{ label: "About Us", href: "/" },
|
||||
{ label: "Service Areas", href: "/" },
|
||||
{ label: "Contact", href: "/contact" },
|
||||
{ label: "Testimonials", href: "/" }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "Contact", items: [
|
||||
{ label: "Phone: (819) 775-7695", href: "tel:(819)775-7695" },
|
||||
{ label: "Location: Kemptville, ON", href: "#" },
|
||||
{ label: "Request Free Quote", href: "/contact" },
|
||||
{ label: "Privacy Policy", href: "#" }
|
||||
]
|
||||
}
|
||||
]}
|
||||
copyrightText="© 2025 W Painting & Sons Inc. All rights reserved."
|
||||
/>
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user