Update src/app/contact/page.tsx

src/app/contact/page.tsx

@@ -4,21 +4,22 @@ import Link from "next/link";
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
 import HeroBillboard from "@/components/sections/hero/HeroBillboard";
+import ContactForm from "@/components/form/ContactForm";
 import FooterSimple from "@/components/sections/footer/FooterSimple";
-import { Zap } from "lucide-react";
+import { Zap, Mail } from "lucide-react";
 
 export default function ContactPage() {
   const navItems = [
-    { name: "How It Works", id: "how-it-works" },
-    { name: "Services", id: "services" },
-    { name: "Pricing", id: "pricing" },
-    { name: "Contact", id: "contact" },
+    { name: "Home", id: "/" },
+    { name: "How It Works", id: "/how-it-works" },
+    { name: "Services", id: "/services" },
+    { name: "Pricing", id: "/pricing" },
+    { name: "Contact", id: "/contact" },
   ];
 
   const footerColumns = [
     {
-      title: "Product",
-      items: [
+      title: "Product",      items: [
         { label: "Features", href: "#" },
         { label: "Pricing", href: "/pricing" },
         { label: "Security", href: "#" },
@@ -26,8 +27,7 @@ export default function ContactPage() {
       ],
     },
     {
-      title: "Company",
-      items: [
+      title: "Company",      items: [
         { label: "About", href: "/about" },
         { label: "Blog", href: "#" },
         { label: "Contact", href: "/contact" },
@@ -35,8 +35,7 @@ export default function ContactPage() {
       ],
     },
     {
-      title: "Industries",
-      items: [
+      title: "Industries",      items: [
         { label: "Dental Practices", href: "/industries" },
         { label: "Salons & Spas", href: "/industries" },
         { label: "Restaurants", href: "/industries" },
@@ -44,8 +43,7 @@ export default function ContactPage() {
       ],
     },
     {
-      title: "Legal",
-      items: [
+      title: "Legal",      items: [
         { label: "Privacy Policy", href: "#" },
         { label: "Terms of Service", href: "#" },
         { label: "Cookie Policy", href: "#" },
@@ -70,7 +68,7 @@ export default function ContactPage() {
         <NavbarLayoutFloatingInline
           brandName="Romèra"
           navItems={navItems}
-          button={{ text: "Book a Demo", href: "#contact" }}
+          button={{ text: "Book a Demo", href: "/contact" }}
           animateOnLoad={true}
         />
       </div>
@@ -84,22 +82,25 @@ export default function ContactPage() {
           tagIcon={Zap}
           tagAnimation="slide-up"
           buttons={[
-            { text: "Book Your Demo Now", href: "#contact" },
-            { text: "Schedule a Call", href: "#contact" },
+            { text: "Book Your Demo Now", href: "#contact-form" },
+            { text: "Schedule a Call", href: "#contact-form" },
           ]}
           buttonAnimation="slide-up"
           mediaAnimation="none"
         />
       </div>
 
-      <div id="contact-section" data-section="contact-section">
-        <HeroBillboard
+      <div id="contact-form" data-section="contact-form">
+        <ContactForm
           title="Get in Touch with Our Team"
           description="Whether you have questions about our AI automation platform or want to see a live demo, our team is ready to help you transform your business."
-          background={{ variant: "gradient-bars" }}
-          buttons={[{ text: "Start Your Demo Today", href: "#" }]}
-          buttonAnimation="slide-up"
-          mediaAnimation="none"
+          tag="Contact Us"
+          tagIcon={Mail}
+          inputPlaceholder="Enter your email"
+          buttonText="Send"
+          termsText="By contacting us, you agree to our Terms and Conditions."
+          onSubmit={(email) => console.log("Contact from:", email)}
+          centered={true}
         />
       </div>
 
@@ -112,4 +113,4 @@ export default function ContactPage() {
       </div>
     </ThemeProvider>
   );
-}
+}