Update src/app/page.tsx

Merge version_5 into main

src/app/page.tsx

@@ -2,6 +2,7 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
+import { Star } from "lucide-react";
 import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
 import FooterMedia from '@/components/sections/footer/FooterMedia';
 import HeroSplitKpi from '@/components/sections/hero/HeroSplitKpi';
@@ -10,6 +11,13 @@ import ProductCardOne from '@/components/sections/product/ProductCardOne';
 import TestimonialCardTwelve from '@/components/sections/testimonial/TestimonialCardTwelve';
 
 export default function AdeptHandymanLandingPage() {
+  const scrollToSection = (id: string) => {
+    const element = document.getElementById(id.startsWith('#') ? id.slice(1) : id);
+    if (element) {
+      element.scrollIntoView({ behavior: 'smooth' });
+    }
+  };
+
   return (
     <ThemeProvider
         defaultButtonVariant="hover-magnetic"
@@ -38,71 +46,75 @@ export default function AdeptHandymanLandingPage() {
 
         <div id="hero" data-section="hero">
           <HeroSplitKpi
-            title="Reliable Handyman Services in West Palm Beach"
-            description="From quick fixes to major home improvements, Adept Handyman is your trusted local partner. Licensed, insured, and ready to help."
+            title="Adept Handyman Services: West Palm Beach's Trusted Partner"
+            description="Need a repair, installation, or home upgrade? Our skilled, licensed, and insured professionals are ready to help. Fast, reliable service you can count on."
             background={{ variant: "animated-grid" }}
             kpis={[
+                { value: "5-Star", label: "Rated" },
                 { value: "15+", label: "Years Exp." },
-                { value: "1000+", label: "Projects" },
-                { value: "24/7", label: "Support" }
+                { value: "Fast", label: "Response" }
             ]}
             enableKpiAnimation={true}
             buttons={[
-                { text: "Call Now", onClick: () => window.location.href = "tel:+15615315971" },
-                { text: "Get Quote", href: "#appointment" }
+                { text: "Call Now: (561) 531-5971", onClick: () => window.location.href = "tel:+15615315971" },
+                { text: "Schedule Service", onClick: () => scrollToSection("appointment") }
             ]}
             imageSrc="https://img.b2bpic.net/free-photo/construction-worker-using-hammer-job-site_23-2150530686.jpg?_wi=1"
           />
         </div>
 
-        <div id="appointment" data-section="appointment">
-            <ContactSplitForm
-                title="Book Your Appointment"
-                description="Get a quick estimate by filling out the details below."
-                inputs={[
-                    { name: "name", type: "text", placeholder: "Full Name", required: true },
-                    { name: "email", type: "email", placeholder: "Email", required: true },
-                    { name: "phone", type: "tel", placeholder: "Phone", required: true }
-                ]}
-                textarea={{ name: "message", placeholder: "How can we help?", rows: 4, required: true }}
-                buttonText="Send Request"
-                useInvertedBackground={true}
-            />
-        </div>
-
         <div id="social-proof" data-section="social-proof">
             <TestimonialCardTwelve 
-                cardTitle="Trusted by Neighbors"
-                cardTag="Social Proof"
+                cardTitle="Proven Excellence"
+                cardTag="4.6 Google / 5.0 Facebook"
+                cardTagIcon={Star}
                 cardAnimation="slide-up"
-                testimonials={[]}
-                useInvertedBackground={false}
+                testimonials={[
+                    { id: "t1", name: "Verified Customer", imageSrc: "" },
+                    { id: "t2", name: "Verified Customer", imageSrc: "" }
+                ]}
+                useInvertedBackground={true}
             />
         </div>
 
         <div id="services" data-section="services">
           <ProductCardOne
-            title="Our Services"
-            description="Expert solutions for your home maintenance."
+            title="Our Professional Services"
+            description="Comprehensive home improvement and maintenance tailored to your needs."
             gridVariant="three-columns-all-equal-width"
             animationType="slide-up"
             textboxLayout="default"
             useInvertedBackground={false}
             products={[
-              { id: "p1", name: "General Repairs", price: "From $99", imageSrc: "https://img.b2bpic.net/free-photo/variety-carpentry-tools-table_23-2148180578.jpg" },
-              { id: "p2", name: "Appliance Install", price: "From $129", imageSrc: "https://img.b2bpic.net/free-photo/tools-collection-top-view_1112-396.jpg" },
-              { id: "p3", name: "Fixture Upgrades", price: "From $89", imageSrc: "https://img.b2bpic.net/free-photo/cheerful-workman-white-wall_23-2147772246.jpg" }
+              { id: "p1", name: "General Home Repair", price: "", imageSrc: "https://img.b2bpic.net/free-photo/variety-carpentry-tools-table_23-2148180578.jpg" },
+              { id: "p2", name: "Fixture Installation", price: "", imageSrc: "https://img.b2bpic.net/free-photo/tools-collection-top-view_1112-396.jpg" },
+              { id: "p3", name: "Maintenance & Upgrades", price: "", imageSrc: "https://img.b2bpic.net/free-photo/cheerful-workman-white-wall_23-2147772246.jpg" }
             ]}
           />
         </div>
 
+        <div id="appointment" data-section="appointment">
+            <ContactSplitForm
+                title="Request Your Appointment"
+                description="Our team is ready to assist you. Fill out the form below and we will contact you immediately."
+                inputs={[
+                    { name: "name", type: "text", placeholder: "Full Name", required: true },
+                    { name: "email", type: "email", placeholder: "Email", required: true },
+                    { name: "phone", type: "tel", placeholder: "Phone", required: true }
+                ]}
+                textarea={{ name: "message", placeholder: "Describe your project...", rows: 4, required: true }}
+                buttonText="Send Appointment Request"
+                useInvertedBackground={true}
+            />
+        </div>
+
         <div id="footer" data-section="footer">
           <FooterMedia
             logoText="Adept Handyman Services"
             columns={[
-              { title: "Visit Us", items: [{ label: "5200 N Flagler Dr, WPB, FL", href: "#" }] },
-              { title: "Contact", items: [{ label: "(561) 531-5971", href: "tel:+15615315971" }] },
-              { title: "Hours", items: [{ label: "9am - 5pm, 7 Days", href: "#" }] }
+              { title: "Visit Us", items: [{ label: "West Palm Beach, FL", href: "#" }] },
+              { title: "Call Us", items: [{ label: "(561) 531-5971", href: "tel:+15615315971" }] },
+              { title: "Hours", items: [{ label: "Mon-Sun: 8am - 8pm", href: "#" }] }
             ]}
             imageSrc="https://img.b2bpic.net/free-photo/construction-worker-using-hammer-job-site_23-2150530686.jpg?_wi=2"
           />
@@ -110,4 +122,4 @@ export default function AdeptHandymanLandingPage() {
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}

src/app/styles/variables.css

@@ -10,15 +10,15 @@
   --accent: #ffffff;
   --background-accent: #ffffff; */
 
-  --background: #f5f5f5;
-  --card: #ffffff;
-  --foreground: #1c1c1c;
-  --primary-cta: #1f3251;
+  --background: #ffffff;
+  --card: #f9f9f9;
+  --foreground: #001122;
+  --primary-cta: #15479c;
   --primary-cta-text: #f5f5f5;
   --secondary-cta: #ffffff;
   --secondary-cta-text: #1c1c1c;
-  --accent: #15479c;
-  --background-accent: #a8cce8;
+  --accent: #1c1c1c;
+  --background-accent: #e2e2e2;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);