From f0b88aa673e730a49bb0bb7cb4fabcd21807d76e Mon Sep 17 00:00:00 2001
From: bender <kudin.dima@gmail.com>
Date: Thu, 5 Mar 2026 16:59:58 +0000
Subject: [PATCH] Add src/app/contact/page.tsx

---
 src/app/contact/page.tsx | 228 +++++++++++++++++++++++++++++++++++++++
 1 file changed, 228 insertions(+)
 create mode 100644 src/app/contact/page.tsx

diff --git a/src/app/contact/page.tsx b/src/app/contact/page.tsx
new file mode 100644
index 0000000..c4f2cd4
--- /dev/null
+++ b/src/app/contact/page.tsx
@@ -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>
+  );
+}