src/app/contact/page.tsx

@@ -0,0 +1,62 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import ReactLenis from "lenis/react";
+import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
+import ContactCTA from '@/components/sections/contact/ContactCTA';
+import Input from '@/components/form/Input';
+import { useState } from "react";
+
+export default function ContactPage() {
+  const [email, setEmail] = useState("");
+  const [request, setRequest] = useState("");
+
+  return (
+    <ThemeProvider
+        defaultButtonVariant="text-stagger"
+        defaultTextAnimation="background-highlight"
+        borderRadius="rounded"
+        contentWidth="medium"
+        sizing="largeSmall"
+        background="floatingGradient"
+        cardStyle="soft-shadow"
+        primaryButtonStyle="primary-glow"
+        secondaryButtonStyle="glass"
+        headingFontWeight="light"
+    >
+      <ReactLenis root>
+        <div id="nav" data-section="nav">
+          <NavbarStyleFullscreen
+            navItems={[
+                { name: "Home", id: "/" },
+                { name: "Services", id: "/#services" },
+                { name: "Reviews", id: "/#testimonials" },
+                { name: "Contact", id: "/contact" },
+            ]}
+            brandName="Pioneer Lawn & Power Wash"
+          />
+        </div>
+
+        <div className="pt-32 pb-20 px-6 max-w-4xl mx-auto space-y-12">
+          <div className="space-y-6">
+            <h1 className="text-4xl font-bold">Get Your Free Quote</h1>
+            <p className="text-lg opacity-80">Fill out the details below and we will get back to you shortly.</p>
+            <div className="space-y-4">
+              <Input value={email} onChange={setEmail} placeholder="Your Email Address" type="email" required={true} />
+              <Input value={request} onChange={setRequest} placeholder="What service do you need?" required={true} />
+            </div>
+          </div>
+
+          <ContactCTA 
+            tag="Need Assistance?"
+            title="Call Now"
+            description="Prefer to speak with us directly? Give us a call anytime."
+            buttons={[{ text: "(503) 457-1332", href: "tel:5034571332" }]}
+            background={{ variant: "plain" }}
+            useInvertedBackground={true}
+          />
+        </div>
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}

src/app/page.tsx

@@ -2,7 +2,7 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
-import ContactCTA from '@/components/sections/contact/ContactCTA';
+import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
 import FaqBase from '@/components/sections/faq/FaqBase';
 import FeatureCardTwelve from '@/components/sections/feature/FeatureCardTwelve';
 import FooterCard from '@/components/sections/footer/FooterCard';
@@ -216,17 +216,18 @@ export default function LandingPage() {
   </div>
 
   <div id="contact" data-section="contact">
-      <ContactCTA
-      useInvertedBackground={false}
-      background={{
-        variant: "plain"}}
-      tag="Get in Touch"
+      <ContactSplitForm
       title="Ready to Transform Your Yard?"
-      description="Call us today at (503) 457-1332 to schedule your maintenance or cleaning."
-      buttons={[
-        {
-          text: "Get Your Free Quote",          onClick: () => { window.location.href = "tel:5034571332"; }},
+      description="Fill out the form below and we will contact you shortly to schedule your service."
+      inputs={[
+        { name: "name", type: "text", placeholder: "Full Name", required: true },
+        { name: "email", type: "email", placeholder: "Email Address", required: true },
+        { name: "phone", type: "tel", placeholder: "Phone Number", required: true },
       ]}
+      textarea={{ name: "message", placeholder: "Tell us about your project", rows: 4, required: true }}
+      buttonText="Submit Inquiry"
+      onSubmit={(data) => console.log("Form submitted:", data)}
+      useInvertedBackground={false}
     />
   </div>