Update src/app/page.tsx

Merge version_4 into main

src/app/page.tsx

@@ -1,7 +1,8 @@
 "use client";
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
-import ReactLenis from "lenis/react";
+import ReactLenis, { useLenis } from "lenis/react";
+import { useState } from 'react';
 import ContactCTA from '@/components/sections/contact/ContactCTA';
 import FaqDouble from '@/components/sections/faq/FaqDouble';
 import FeatureCardTwentyThree from '@/components/sections/feature/FeatureCardTwentyThree';
@@ -10,9 +11,38 @@ import HeroLogoBillboardSplit from '@/components/sections/hero/HeroLogoBillboard
 import MetricCardTwo from '@/components/sections/metrics/MetricCardTwo';
 import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
 import TestimonialCardTwo from '@/components/sections/testimonial/TestimonialCardTwo';
+import Input from '@/components/form/Input';
 import { MessageCircle, Sparkles, Star, Wrench } from "lucide-react";
 
 export default function LandingPage() {
+  const lenis = useLenis();
+
+  const scrollToSection = (sectionId) => {
+    const cleanId = String(sectionId).replace(/^#/, "");
+    if (lenis) {
+      lenis.scrollTo(`#${cleanId}`, { offset: 0 });
+    } else {
+      const element = document.getElementById(cleanId);
+      if (!element) return;
+      element.scrollIntoView({ behavior: "smooth", block: "start" });
+    }
+  };
+
+  const [name, setName] = useState("");
+  const [email, setEmail] = useState("");
+  const [phone, setPhone] = useState("");
+  const [message, setMessage] = useState("");
+
+  const handleSubmitQuote = (e) => {
+    e.preventDefault();
+    console.log({ name, email, phone, message });
+    alert("Quote request submitted! We'll be in touch soon.");
+    setName("");
+    setEmail("");
+    setPhone("");
+    setMessage("");
+  };
+
   return (
     <ThemeProvider
         defaultButtonVariant="icon-arrow"
@@ -41,7 +71,7 @@ export default function LandingPage() {
       ]}
       brandName="Results Roofing"
       button={{
-        text: "Free Estimate",        href: "#quote"}}
+        text: "Free Estimate",        onClick: () => scrollToSection("quote")}}
       animateOnLoad={true}
     />
   </div>
@@ -54,9 +84,9 @@ export default function LandingPage() {
       description="Roofing that feels premium before the first shingle goes on. Results Roofing helps Dallas homeowners with inspections, repairs, replacements, and insurance guidance through a polished, high-trust experience from start to finish."
       buttons={[
         {
-          text: "Get My Free Roof Inspection",          href: "#quote"},
+          text: "Get My Free Roof Inspection",          onClick: () => scrollToSection("quote")},
         {
-          text: "See Why Dallas Trusts Us",          href: "#reviews"},
+          text: "See Why Dallas Trusts Us",          onClick: () => scrollToSection("reviews")},
       ]}
       layoutOrder="default"
       imageSrc="http://img.b2bpic.net/free-photo/chisinau-arena-sunset-moldova_1268-16015.jpg"
@@ -183,7 +213,7 @@ export default function LandingPage() {
       description="Whether you need an inspection, a fast repair, or a full replacement, Results Roofing is positioned here as the premium choice that still feels approachable."
       buttons={[
         {
-          text: "Get a Free Estimate",          href: "#quote"},
+          text: "Get a Free Estimate",          onClick: () => scrollToSection("quote")},
         {
           text: "Call Results Roofing",          href: "tel:+12145550199"},
       ]}
@@ -193,6 +223,68 @@ export default function LandingPage() {
     />
   </div>
 
+  <div id="quote" data-section="quote" className="py-20 bg-card rounded-lg mx-auto max-w-content-width px-4 md:px-8">
+    <div className="text-center mb-12">
+      <h2 className="text-4xl md:text-5xl font-bold leading-tight text-foreground">Get Your Free Estimate</h2>
+      <p className="mt-4 text-lg text-foreground/80">Fill out the form below and we'll get back to you shortly.</p>
+    </div>
+    <form onSubmit={handleSubmitQuote} className="max-w-xl mx-auto space-y-6">
+      <div>
+        <label htmlFor="name" className="block text-sm font-medium text-foreground">Name</label>
+        <Input
+          id="name"
+          type="text"
+          placeholder="Your Name"
+          value={name}
+          onChange={setName}
+          required
+          className="mt-1 block w-full text-foreground"
+        />
+      </div>
+      <div>
+        <label htmlFor="email" className="block text-sm font-medium text-foreground">Email</label>
+        <Input
+          id="email"
+          type="email"
+          placeholder="your@email.com"
+          value={email}
+          onChange={setEmail}
+          required
+          className="mt-1 block w-full text-foreground"
+        />
+      </div>
+      <div>
+        <label htmlFor="phone" className="block text-sm font-medium text-foreground">Phone</label>
+        <Input
+          id="phone"
+          type="tel"
+          placeholder="(___) ___-____"
+          value={phone}
+          onChange={setPhone}
+          className="mt-1 block w-full text-foreground"
+        />
+      </div>
+      <div>
+        <label htmlFor="message" className="block text-sm font-medium text-foreground">Message</label>
+        <textarea
+          id="message"
+          rows={4}
+          placeholder="Tell us about your roofing needs..."
+          value={message}
+          onChange={(e) => setMessage(e.target.value)}
+          className="mt-1 block w-full p-3 border border-border rounded-md shadow-sm bg-background text-foreground focus:ring-primary-cta focus:border-primary-cta sm:text-sm"
+          style={{ '--border': 'var(--accent)', '--background': 'var(--card)' } as any}
+        />
+      </div>
+      <button
+        type="submit"
+        className="w-full py-3 px-4 rounded-md shadow-sm text-base font-medium text-primary-cta-text bg-primary-cta hover:bg-primary-cta-hover focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-cta-hover"
+      >
+        Submit Request
+      </button>
+    </form>
+  </div>
+
   <div id="footer" data-section="footer">
       <FooterBaseCard
       logoText="Results Roofing"
@@ -200,19 +292,19 @@ export default function LandingPage() {
         {
           title: "Quick Links",          items: [
             {
-              label: "Services",              href: "#services"},
+              label: "Services",              onClick: () => scrollToSection("services")},
             {
-              label: "Process",              href: "#process"},
+              label: "Process",              onClick: () => scrollToSection("process")},
             {
-              label: "Reviews",              href: "#reviews"},
+              label: "Reviews",              onClick: () => scrollToSection("reviews")},
             {
-              label: "FAQ",              href: "#faq"},
+              label: "FAQ",              onClick: () => scrollToSection("faq")},
           ],
         },
         {
           title: "Contact",          items: [
             {
-              label: "Get an Estimate",              href: "#quote"},
+              label: "Get an Estimate",              onClick: () => scrollToSection("quote")},
             {
               label: "Call Us: (214) 555-0199",              href: "tel:+12145550199"},
             {