Merge version_3 into main

Merge version_3 into main

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>
+  );
+}

src/app/layout.tsx

@@ -1,48 +1,20 @@
 import type { Metadata } from "next";
-import { Halant } from "next/font/google";
 import { Inter } from "next/font/google";
-import { Public_Sans } from "next/font/google";
 import "./globals.css";
-import { ServiceWrapper } from "@/components/ServiceWrapper";
-import Tag from "@/tag/Tag";
 
-const halant = Halant({
-  variable: "--font-halant",  subsets: ["latin"],
-  weight: ["300", "400", "500", "600", "700"],
-});
-
-const inter = Inter({
-  variable: "--font-inter",  subsets: ["latin"],
-});
-
-const publicSans = Public_Sans({
-  variable: "--font-public-sans",  subsets: ["latin"],
-});
+const inter = Inter({ subsets: ["latin"] });
 
 export const metadata: Metadata = {
-  title: "Professional Painting Services in Kemptville | W Painting & Sons",  description: "Expert interior and exterior painting for homes and businesses in Kemptville, Ontario. Free estimates, professional results. Call (819) 775-7695 today.",  keywords: "painting contractor Kemptville, interior painting, exterior painting, residential painting, commercial painting, North Grenville, Ottawa South",  metadataBase: new URL("https://wpaintingandsons.com"),
-  alternates: {
-    canonical: "https://wpaintingandsons.com"},
-  openGraph: {
-    title: "Professional Painting Services in Kemptville | W Painting & Sons",    description: "Quality interior and exterior painting services for homes and businesses. Free estimates available.",    url: "https://wpaintingandsons.com",    siteName: "W Painting & Sons Inc",    type: "website"},
-  twitter: {
-    card: "summary_large_image",    title: "Professional Painting Services in Kemptville | W Painting & Sons",    description: "Expert painting contractor serving Kemptville and surrounding areas. Free estimates, professional results."},
-};
+  title: "W Painting & Sons | Professional Painting Services in Kemptville",  description: "Professional painting services for homes and businesses in Kemptville and surrounding areas. Quality interior and exterior painting with reliable, efficient service."};
 
 export default function RootLayout({
   children,
-}: Readonly<{
+}: {
   children: React.ReactNode;
-}>) {
+}) {
   return (
-    <html lang="en" suppressHydrationWarning>
-      <ServiceWrapper>
-        <body
-          className={`${halant.variable} ${inter.variable} ${publicSans.variable} antialiased`}
-        >
-          <Tag />
-          {children}
-        
+    <html lang="en">
+      <body className={inter.className}>{children}
         <script
           dangerouslySetInnerHTML={{
             __html: `
@@ -1410,7 +1382,6 @@ export default function RootLayout({
           }}
         />
       </body>
-      </ServiceWrapper>
     </html>
   );
 }

src/app/page.tsx

@@ -12,6 +12,10 @@ import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
 import { Award, CheckCircle, Shield, DollarSign, Paintbrush, Building, Home, Building2, Hammer, Wrench, Star, MapPin, Quote } from 'lucide-react';
 
 export default function LandingPage() {
+  const handleContactClick = () => {
+    window.location.href = '/contact';
+  };
+
   return (
     <ThemeProvider
       defaultButtonVariant="elastic-effect"
@@ -44,11 +48,9 @@ export default function LandingPage() {
           description="Professional painting services for homes and businesses in Kemptville and surrounding areas. Quality interior and exterior painting with reliable, efficient service and guaranteed professional results."
           buttons={[
             { text: "Call Now: (819) 775-7695", href: "tel:(819)775-7695" },
-            { text: "Request Free Quote", href: "#contact" }
+            { text: "Request Free Quote", onClick: handleContactClick }
           ]}
           background={{ variant: "sparkles-gradient" }}
-          imageSrc="http://img.b2bpic.net/free-photo/repairman-home-construction-using-roller-brush-as-guitar-guy-singing-while-renovating-house-apartment-redecoration-home-construction-while-renovating-improving-repair-decorating_482257-14172.jpg"
-          imageAlt="Professional painting service in progress"
           mediaAnimation="slide-up"
           frameStyle="card"
         />
@@ -99,10 +101,8 @@ export default function LandingPage() {
           tag="About Us"
           tagIcon={Star}
           buttons={[
-            { text: "Get Your Free Estimate", href: "tel:(819)775-7695" }
+            { text: "Get Your Free Estimate", onClick: handleContactClick }
           ]}
-          imageSrc="http://img.b2bpic.net/free-photo/young-family-painting-apartment-wall-while-redecorating-with-roller-brush-apartment-redecoration-home-construction-while-renovating-improving-repair-decorating_482257-14144.jpg"
-          imageAlt="Professional interior painting work"
           useInvertedBackground={false}
         />
       </div>
@@ -141,8 +141,6 @@ export default function LandingPage() {
           buttons={[
             { text: "Call (819) 775-7695", href: "tel:(819)775-7695" }
           ]}
-          imageSrc="http://img.b2bpic.net/free-photo/painting-red_1385-599.jpg"
-          imageAlt="Exterior painting work in the Kemptville region"
           useInvertedBackground={false}
         />
       </div>
@@ -180,7 +178,7 @@ export default function LandingPage() {
           animationType="entrance-slide"
           buttons={[
             { text: "Call (819) 775-7695", href: "tel:(819)775-7695" },
-            { text: "Email for Quote", href: "mailto:info@wpaintingandsons.com" }
+            { text: "Email for Quote", onClick: handleContactClick }
           ]}
           background={{ variant: "sparkles-gradient" }}
           useInvertedBackground={false}
@@ -210,7 +208,7 @@ export default function LandingPage() {
               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: "Request Free Quote", href: "/contact" },
                 { label: "Privacy Policy", href: "#" }
               ]
             }