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"
@@ -20,7 +50,7 @@ export default function LandingPage() {
         borderRadius="pill"
         contentWidth="medium"
         sizing="mediumLarge"
-        background="noise"
+        background="floatingGradient"
         cardStyle="glass-elevated"
         primaryButtonStyle="gradient"
         secondaryButtonStyle="layered"
@@ -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"
@@ -91,8 +121,8 @@ export default function LandingPage() {
           id: "6",          title: "Realtor Support",          tags: [],
           imageSrc: "http://img.b2bpic.net/free-photo/real-estate-agent-presenting-floor-plan_74855-3057.jpg",          imageAlt: "Realtor support icon"},
       ]}
-      title="Built to win trust fast and turn visitors into booked inspections."
-      description="This layout leans into the strongest conversion points: credibility, clarity, responsiveness, and a premium brand feel that separates Results Roofing from average contractors."
+      title="Comprehensive Roofing & Exterior Services for Your Home"
+      description="Results Roofing offers a full spectrum of services, including detailed inspections, reliable repairs, full roof replacements, and seamless insurance claim assistance. We also handle gutters and exterior work, providing realtors and homeowners with a trusted partner for all their roofing needs."
       tag="Services"
       tagIcon={Wrench}
       tagAnimation="slide-up"
@@ -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"},
             {
@@ -234,4 +326,4 @@ export default function LandingPage() {
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}

src/app/styles/variables.css

@@ -10,15 +10,15 @@
   --accent: #ffffff;
   --background-accent: #ffffff; */
 
-  --background: #020617;
-  --card: #0f172a;
-  --foreground: #e2e8f0;
-  --primary-cta: #c4d8f9;
-  --primary-cta-text: #020617;
-  --secondary-cta: #041633;
-  --secondary-cta-text: #e2e8f0;
-  --accent: #2d30f3;
-  --background-accent: #1d4ed8;
+  --background: #010110;
+  --card: #08081F;
+  --foreground: #E8E8FF;
+  --primary-cta: #4A7CFF;
+  --primary-cta-text: #FFFFFF;
+  --secondary-cta: #1A2A4C;
+  --secondary-cta-text: #E8E8FF;
+  --accent: #70A0FF;
+  --background-accent: #030320;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);