Update src/app/page.tsx

Merge version_2 into main

src/app/page.tsx

@@ -11,8 +11,34 @@ import ContactSplit from '@/components/sections/contact/ContactSplit';
 import FooterCard from '@/components/sections/footer/FooterCard';
 import { ThemeProvider } from '@/providers/themeProvider/ThemeProvider';
 import { Shield, Home, Award, CheckCircle, Zap, Facebook, Linkedin, Phone } from 'lucide-react';
+import { useState } from 'react';
 
 export default function LandingPage() {
+  const [formData, setFormData] = useState({
+    phoneNumber: '',
+    email: '',
+    workType: '',
+  });
+
+  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>) => {
+    const { name, value } = e.target;
+    setFormData((prev) => ({
+      ...prev,
+      [name]: value,
+    }));
+  };
+
+  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    console.log('Quote form submitted:', formData);
+    // Handle form submission here
+    setFormData({
+      phoneNumber: '',
+      email: '',
+      workType: '',
+    });
+  };
+
   return (
     <ThemeProvider
       defaultButtonVariant="elastic-effect"
@@ -174,6 +200,85 @@ export default function LandingPage() {
       </div>
 
       <div id="contact" data-section="contact">
+        <div className="w-full py-20 px-6 md:px-10">
+          <div className="w-full max-w-2xl mx-auto">
+            <div className="mb-12 text-center">
+              <h2 className="text-3xl md:text-5xl font-bold mb-4">Get Your Free Quote</h2>
+              <p className="text-lg text-gray-600 mb-8">
+                Fill out the form below to receive a personalized quote for your roofing needs. Our team will contact you within 24 hours.
+              </p>
+            </div>
+
+            <form onSubmit={handleSubmit} className="bg-card rounded-lg p-8 shadow-lg border border-accent">
+              <div className="mb-6">
+                <label htmlFor="phoneNumber" className="block text-sm font-medium mb-2">
+                  Phone Number <span className="text-red-500">*</span>
+                </label>
+                <input
+                  type="tel"
+                  id="phoneNumber"
+                  name="phoneNumber"
+                  value={formData.phoneNumber}
+                  onChange={handleInputChange}
+                  placeholder="(555) 123-4567"
+                  required
+                  className="w-full px-4 py-3 border border-accent rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-cta"
+                />
+              </div>
+
+              <div className="mb-6">
+                <label htmlFor="email" className="block text-sm font-medium mb-2">
+                  Email Address <span className="text-red-500">*</span>
+                </label>
+                <input
+                  type="email"
+                  id="email"
+                  name="email"
+                  value={formData.email}
+                  onChange={handleInputChange}
+                  placeholder="your@email.com"
+                  required
+                  className="w-full px-4 py-3 border border-accent rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-cta"
+                />
+              </div>
+
+              <div className="mb-8">
+                <label htmlFor="workType" className="block text-sm font-medium mb-2">
+                  Type of Work Needed <span className="text-red-500">*</span>
+                </label>
+                <select
+                  id="workType"
+                  name="workType"
+                  value={formData.workType}
+                  onChange={handleInputChange}
+                  required
+                  className="w-full px-4 py-3 border border-accent rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-cta"
+                >
+                  <option value="">Select a service...</option>
+                  <option value="inspection">Roof Inspection</option>
+                  <option value="repair">Roof Repair</option>
+                  <option value="replacement">Roof Replacement</option>
+                  <option value="installation">New Installation</option>
+                  <option value="maintenance">Maintenance</option>
+                  <option value="emergency">Emergency Repair</option>
+                  <option value="other">Other</option>
+                </select>
+              </div>
+
+              <button
+                type="submit"
+                className="w-full bg-primary-cta text-white font-semibold py-3 rounded-lg hover:opacity-90 transition-opacity"
+              >
+                Get Your Free Quote
+              </button>
+
+              <p className="text-xs text-gray-500 text-center mt-4">
+                Your information is secure and will only be used to provide you with a quote.
+              </p>
+            </form>
+          </div>
+        </div>
+
         <ContactSplit
           tag="Ready to Get Started?"
           title="Schedule Your Free Roof Inspection Today"
@@ -186,7 +291,7 @@ export default function LandingPage() {
           mediaAnimation="slide-up"
           mediaPosition="right"
           inputPlaceholder="Enter your email address"
-          buttonText="Get Free Quote"
+          buttonText="Get Free Consultation"
           termsText="Same-day consultation offered. Your information is secure and never shared."
         />
       </div>