Update src/app/contact/page.tsx

src/app/contact/page.tsx

@@ -4,8 +4,7 @@ import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
 import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
 import HeroOverlayTestimonial from '@/components/sections/hero/HeroOverlayTestimonial';
-import FeatureCardTwentySeven from '@/components/sections/feature/FeatureCardTwentySeven';
-import ContactCenter from '@/components/sections/contact/ContactCenter';
+import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
 import ContactText from '@/components/sections/contact/ContactText';
 import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
 
@@ -50,32 +49,21 @@ export default function ContactPage() {
               animationType="reveal-blur"
               background={{ variant: "sparkles-gradient" }}
               useInvertedBackground={true}
-            />
-        </div>
-
-        <div id="contact-options" data-section="contact-options">
-            <FeatureCardTwentySeven
-              title="How to Reach Out"
-              description="Choose the method that feels most comfortable for you."
-              animationType="slide-up"
-              textboxLayout="split"
-              useInvertedBackground={false}
-              features={[
-                { id: "opt1", title: "Phone", descriptions: ["Call us at (555) 123-4567"], imageSrc: "" },
-                { id: "opt2", title: "Email", descriptions: ["hello@palantests.com"], imageSrc: "" },
-                { id: "opt3", title: "Service Area", descriptions: ["Proudly serving your community"], imageSrc: "" },
-                { id: "opt4", title: "Calendar", descriptions: ["Book your free consultation"], imageSrc: "" }
-              ]}
+              className="py-8"
             />
         </div>
 
         <div id="contact-form" data-section="contact-form">
-            <ContactCenter
-              tag="Get In Touch"
-              title="Send Us a Message"
-              description="Have a question or need to discuss a specific situation? Fill out the form below."
-              background={{ variant: "plain" }}
+            <ContactSplitForm
+              title="Get In Touch"
+              description="Whether you have a specific question or just need to discuss a transition situation, we're here to help. Fill out the details below and we'll be in touch."
+              inputs={[
+                { name: "name", type: "text", placeholder: "Your Name", required: true },
+                { name: "email", type: "email", placeholder: "Your Email", required: true }
+              ]}
+              textarea={{ name: "message", placeholder: "How can we help your family?", rows: 4, required: true }}
               useInvertedBackground={false}
+              mediaPosition="right"
             />
         </div>
 
@@ -85,6 +73,7 @@ export default function ContactPage() {
               animationType="background-highlight"
               background={{ variant: "gradient-bars" }}
               useInvertedBackground={true}
+              className="py-8"
             />
         </div>
 
@@ -97,4 +86,4 @@ export default function ContactPage() {
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}