src/app/contact/page.tsx

@@ -2,8 +2,8 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
-import ContactForm from '@/components/form/ContactForm';
-import ContactText from '@/components/sections/contact/ContactText';
+import ContactCTA from '@/components/sections/contact/ContactCTA';
+import ContactCTA_Text from '@/components/sections/contact/ContactCTA';
 import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
 import FooterBase from '@/components/sections/footer/FooterBase';
 
@@ -22,40 +22,44 @@ export default function ContactPage() {
         headingFontWeight="extrabold"
     >
       <ReactLenis root>
-        <NavbarStyleFullscreen
-          navItems={[
-            { name: "Home", id: "/" },
-            { name: "About", id: "/#about" },
-            { name: "Services", id: "/#services" },
-            { name: "Contact", id: "/contact" },
-          ]}
-          brandName="24 Hours Health"
-        />
+        <div id="nav" data-section="nav">
+          <NavbarStyleFullscreen
+            navItems={[
+              { name: "Home", id: "/" },
+              { name: "About", id: "/#about" },
+              { name: "Services", id: "/#services" },
+              { name: "Contact", id: "/contact" },
+            ]}
+            brandName="24 Hours Health"
+          />
+        </div>
         
         <div className="pt-24">
-            <ContactText
-                text="We're Here For You"
-                background={{ variant: 'radial-gradient' }}
-            />
-            <ContactForm
-                title="Send Us a Message"
-                description="Our team is ready to assist you with any medical queries or concerns."
-                tag="Contact"
-                centered={true}
-            />
+            <div id="contact" data-section="contact">
+              <ContactCTA
+                  tag="Contact"
+                  title="Send Us a Message"
+                  description="Our team is ready to assist you with any medical queries or concerns."
+                  buttons={[{ text: "Submit" }]}
+                  background={{ variant: "radial-gradient" }}
+                  useInvertedBackground={false}
+              />
+            </div>
         </div>
 
-        <FooterBase
-            columns={[
-              {
-                title: "Quick Links",                items: [
-                  { label: "Home", href: "/" },
-                  { label: "Contact", href: "/contact" },
-                ],
-              },
-            ]}
-            logoText="One Health Clinic"
-        />
+        <div id="footer" data-section="footer">
+          <FooterBase
+              columns={[
+                {
+                  title: "Quick Links",                  items: [
+                    { label: "Home", href: "/" },
+                    { label: "Contact", href: "/contact" },
+                  ],
+                },
+              ]}
+              logoText="One Health Clinic"
+          />
+        </div>
       </ReactLenis>
     </ThemeProvider>
   );