src/app/contact/page.tsx

@@ -2,8 +2,8 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
-import ContactCTA from '@/components/sections/contact/ContactCTA';
 import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
+import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
 import FooterSimple from '@/components/sections/footer/FooterSimple';
 
 export default function ContactPage() {
@@ -21,36 +21,44 @@ export default function ContactPage() {
         headingFontWeight="light"
     >
       <ReactLenis root>
-        <NavbarStyleApple
-            navItems={[
-                { name: "Home", id: "/" },
-                { name: "Products", id: "/products" },
-                { name: "FAQ", id: "/faq" },
-                { name: "Contact", id: "/contact" }
-            ]}
-            brandName="Peptify"
-        />
-        <div className="pt-32 pb-20">
-          <ContactCTA 
-            tag="Get in Touch"
-            title="Contact Our Team"
-            description="Reach out for wholesale inquiries, custom orders, or any questions regarding our high-purity research peptides. You can reach us at pepscience22@gmail.com or follow us on Instagram @peptify."
-            buttons={[
-              { text: "Email Us", href: "mailto:pepscience22@gmail.com" },
-              { text: "Instagram", href: "https://instagram.com/peptify" }
-            ]}
-            background={{ variant: "plain" }}
-            useInvertedBackground={false}
-          />
+        <div id="nav" data-section="nav">
+            <NavbarStyleApple
+                navItems={[
+                    { name: "Home", id: "/" },
+                    { name: "Products", id: "/products" },
+                    { name: "FAQ", id: "/faq" },
+                    { name: "Contact", id: "/contact" },
+                ]}
+                brandName="Peptify"
+            />
+        </div>
+
+        <div id="contact" data-section="contact">
+            <ContactSplitForm
+                title="Contact Our Team"
+                description="Reach out for inquiries, research support, or partnership opportunities. We aim to respond within 24-48 hours."
+                inputs={[
+                    { name: "name", type: "text", placeholder: "Full Name", required: true },
+                    { name: "email", type: "email", placeholder: "Email Address", required: true },
+                    { name: "subject", type: "text", placeholder: "Subject" }
+                ]}
+                textarea={{ name: "message", placeholder: "How can we help you?", required: true, rows: 5 }}
+                useInvertedBackground={false}
+                mediaPosition="right"
+                imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BzpXIQ8WhJ8WvoMuxtEmg0ewMo/a-futuristic-scientific-laboratory-setti-1775505033478-f138a781.png?_wi=1"
+            />
+        </div>
+
+        <div id="footer" data-section="footer">
+            <FooterSimple
+                columns={[
+                    { title: "Company", items: [{ label: "Home", href: "/" }, { label: "Products", href: "/products" }, { label: "FAQ", href: "/faq" }, { label: "Contact", href: "/contact" }] },
+                    { title: "Legal", items: [{ label: "Privacy Policy", href: "/privacy" }, { label: "Disclaimer", href: "/disclaimer" }, { label: "Terms", href: "/terms" }] },
+                ]}
+                bottomLeftText="© 2024 Peptify. For Research Use Only."
+                bottomRightText="All rights reserved."
+            />
         </div>
-        <FooterSimple
-            columns={[
-                { title: "Company", items: [{ label: "Home", href: "/" }, { label: "Products", href: "/products" }, { label: "FAQ", href: "/faq" }, { label: "Contact", href: "/contact" }] },
-                { title: "Legal", items: [{ label: "Privacy Policy", href: "/privacy" }, { label: "Disclaimer", href: "/disclaimer" }, { label: "Terms", href: "/terms" }] },
-            ]}
-            bottomLeftText="© 2024 Peptify. For Research Use Only."
-            bottomRightText="All rights reserved."
-        />
       </ReactLenis>
     </ThemeProvider>
   );

src/app/page.tsx

@@ -123,4 +123,4 @@ export default function LandingPage() {
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}