Ui cahnges and button linking

app/(public)/contact/_components/BookDemo.tsx

@@ -3,6 +3,8 @@ import React from "react";
 import { motion } from "framer-motion";
 import { CalendarCheck, Send, CheckCircle } from "lucide-react";
 import { Button } from "@/components/ui/button";
+import DemoModal from "../../_homeComponents/DemoModal";
+import { useRouter } from "next/navigation";
 
 const features = [
   "Personalized walkthrough of ATS, HRMS & CRM",
@@ -12,6 +14,7 @@ const features = [
 ];
 
 const BookDemoSection = () => {
+  const router = useRouter();
   return (
     <section className="relative py-24 px-6 bg-white overflow-hidden">
       {/* Background Glow */}
@@ -19,9 +22,7 @@ const BookDemoSection = () => {
         className="absolute inset-0 opacity-30 pointer-events-none"
         animate={{ scale: [1, 1.05, 1] }}
         transition={{ duration: 14, repeat: Infinity }}
-      >
-        
-      </motion.div>
+      ></motion.div>
 
       <div className="relative z-10 max-w-5xl mx-auto text-center">
         <motion.h2
@@ -38,7 +39,8 @@ const BookDemoSection = () => {
           className="mt-6 text-lg md:text-xl text-gray-600 max-w-3xl mx-auto"
         >
           Want to see how Winixco can improve hiring, HR operations or client
-          management? Get your free 1-on-1 demo — our team responds within 12 hours.
+          management? Get your free 1-on-1 demo — our team responds within 12
+          hours.
         </motion.p>
 
         {/* Feature List */}
@@ -61,17 +63,22 @@ const BookDemoSection = () => {
           animate={{ opacity: 1, y: 0 }}
           className="flex flex-col sm:flex-row gap-5 justify-center mt-12"
         >
-          <Button
-            size="lg"
-            className="px-9 py-6 text-lg rounded-xl font-bold shadow-xl bg-[#2563eb] hover:bg-blue-700 hover:scale-105 transition-transform"
-          >
-            <CalendarCheck className="mr-2 w-5 h-5" />
-            Book My Demo
-          </Button>
+          <DemoModal
+            trigger={
+              <Button
+                size="lg"
+                className="px-9 py-6 text-lg rounded-xl font-bold shadow-xl bg-[#2563eb] hover:bg-blue-700 hover:scale-105 transition-transform"
+              >
+                <CalendarCheck className="mr-2 w-5 h-5" />
+                Book My Demo
+              </Button>
+            }
+          />
           <Button
             variant="outline"
             size="lg"
             className="px-9 py-6 text-lg rounded-xl font-bold border-2 text-blue-700 hover:bg-purple-100 transition-all"
+            onClick={()=> router.push("#contact-form")}
           >
             <Send className="mr-2 w-5 h-5" />
             Contact Sales
@@ -82,4 +89,4 @@ const BookDemoSection = () => {
   );
 };
 
-export default BookDemoSection;
+export default BookDemoSection;