Ui cahnges and button linking

app/(public)/_homeComponents/About.tsx

@@ -1,3 +1,4 @@
+"use client";
 import React from "react";
 import { motion, Variants } from "framer-motion";
 import { Button } from "@/components/ui/button";
@@ -11,8 +12,10 @@ import {
   Sparkles,
 } from "lucide-react";
 import { home } from "@/services/Constants";
+import { useRouter } from "next/navigation";
 
 const AboutUs: React.FC = () => {
+  const router = useRouter();
   const containerVariants: Variants = {
     hidden: { opacity: 0 },
     visible: {
@@ -203,6 +206,7 @@ const AboutUs: React.FC = () => {
               <Button
                 size="lg"
                 className="bg-[#2563eb] text-white shadow-lg hover:shadow-xl transition-all duration-300"
+                onClick={() => router.push("/features")}
               >
                 {home.about.cta}
                 <ArrowRight className="ml-2 w-5 h-5" />

app/(public)/_homeComponents/Footer.tsx

@@ -26,7 +26,7 @@ const footerLinks = [
     items: [
       { label: "About Us", url: "/about" },
       { label: "Careers", url: "/careers" },
-      { label: "Blog", url: "/blog" },
+      { label: "Features", url: "/features" },
       { label: "Contact", url: "/contact" },
     ],
   },

app/(public)/_homeComponents/Modules.tsx

@@ -11,6 +11,7 @@ import {
   ModuleFeature,
 } from "@/services/Constants";
 import { useRouter } from "next/navigation";
+import DemoModal from "./DemoModal";
 
 const ModuleCard: React.FC<ModuleCardProps> = ({ module, index }) => {
   const [isHovered, setIsHovered] = useState<boolean>(false);
@@ -190,21 +191,30 @@ const ModulesSection: React.FC = () => {
                 Get started with all modules and experience seamless integration
               </p>
               <div className="flex flex-col sm:flex-row gap-4 justify-center">
-                <Button
+                <DemoModal
-                  size="lg"
+                  trigger={
-                  className="bg-white text-[#2563eb] hover:bg-gray-100 font-semibold"
+                    <Button
-                >
+                      size="lg"
-                  Start Free Trial
+                      className="bg-white text-[#2563eb] hover:bg-gray-100 font-semibold"
-                  <Sparkles className="ml-2 w-5 h-5" />
+                    >
-                </Button>
+                      Start Free Trial
-                <Button
+                      <Sparkles className="ml-2 w-5 h-5" />
-                  size="lg"
+                    </Button>
-                  variant="outline"
+                  }
-                  className="border-2 border-white text-slate-600 hover:bg-white/10"
+                />
-                >
+
-                  Schedule Demo
+                <DemoModal
-                  <ArrowRight className="ml-2 w-5 h-5" />
+                  trigger={
-                </Button>
+                    <Button
+                      size="lg"
+                      variant="outline"
+                      className="border-2 border-white text-slate-600 hover:bg-white/10"
+                    >
+                      Schedule Demo
+                      <ArrowRight className="ml-2 w-5 h-5" />
+                    </Button>
+                  }
+                />
               </div>
             </CardContent>
           </Card>
@@ -214,4 +224,4 @@ const ModulesSection: React.FC = () => {
   );
 };
 
-export default ModulesSection;
+export default ModulesSection;

app/(public)/_homeComponents/PricingSection.tsx

@@ -4,8 +4,11 @@ import { Button } from "@/components/ui/button";
 import { Card, CardContent } from "@/components/ui/card";
 import { Badge } from "@/components/ui/badge";
 import { Check } from "lucide-react";
+import { useRouter } from "next/navigation";
+import DemoModal from "./DemoModal";
 
 export default function PricingSection() {
+  const router = useRouter();
   const features = [
     "Unlimited Jobs & Candidates",
     "FREE HRMS & CRM",
@@ -20,9 +23,11 @@ export default function PricingSection() {
   ];
 
   return (
-    <div id="pricing" className="w-full bg-gradient-to-b from-slate-50 to-white text-slate-900">
+    <div
+      id="pricing"
+      className="w-full bg-gradient-to-b from-slate-50 to-white text-slate-900"
+    >
       <div className="max-w-6xl mx-auto px-4 py-16 text-center">
-        
         {/* Heading */}
         <h1 className="text-3xl md:text-5xl font-extrabold leading-tight">
           Hire smarter. Track smarter. Manage everything from one platform.
@@ -30,42 +35,41 @@ export default function PricingSection() {
 
         <p className="mt-4 text-base md:text-lg text-slate-600">
           One powerful ATS with{" "}
-          <span className="font-semibold text-black">
+          <span className="font-semibold text-black">FREE HRMS & CRM</span> , AI
-            FREE HRMS & CRM
+          automation and real-time geo-location tracking
-          </span>{" "}
-          , AI automation and real-time geo-location tracking
         </p>
 
         {/* Pricing Card */}
         <Card className="mt-12 max-w-xl mx-auto rounded-3xl shadow-xl border-0">
           <CardContent className="p-8 md:p-10">
-            
             <Badge className="bg-green-100 text-green-700 mb-4">
               ALL-IN-ONE PLAN • HRMS & CRM FREE
             </Badge>
 
-            <h2 className="text-2xl font-bold">
+            <h2 className="text-2xl font-bold">Winixco ATS – One Plan</h2>
-              Winixco ATS – One Plan
-            </h2>
 
             <div className="mt-6">
               <div className="text-5xl font-extrabold">₹1,999</div>
-              <div className="text-sm text-slate-500">
+              <div className="text-sm text-slate-500">per user / month</div>
-                per user / month
-              </div>
               <div className="text-green-600 font-semibold mt-2">
                 ₹19,990 per user / year (2 months FREE)
               </div>
             </div>
 
-            <Button className="w-full mt-6 text-lg py-6 rounded-xl">
+            <Button
+              className="w-full mt-6 text-lg py-6 rounded-xl"
+              onClick={() => router.push("https://app.winixco.com/plans")}
+            >
               Start 30-Day Free Trial
             </Button>
 
             {/* Features */}
             <div className="mt-8 grid grid-cols-1 sm:grid-cols-2 gap-3 text-left">
               {features.map((item, index) => (
-                <div key={index} className="flex items-start gap-2 text-sm text-slate-700">
+                <div
+                  key={index}
+                  className="flex items-start gap-2 text-sm text-slate-700"
+                >
                   <Check className="text-green-600 w-4 h-4 mt-1" />
                   {item}
                 </div>
@@ -76,12 +80,12 @@ export default function PricingSection() {
 
         {/* Sections */}
         <div className="mt-16 space-y-12 text-left">
-          
           {/* Simple Pricing */}
           <div>
             <h2 className="text-2xl font-bold">Simple Per-Seat Pricing</h2>
             <p className="text-slate-600 mt-2">
-              Each recruiter or HR team member requires one seat. All seats include full access to ATS, HRMS, CRM and AI features.
+              Each recruiter or HR team member requires one seat. All seats
+              include full access to ATS, HRMS, CRM and AI features.
             </p>
 
             <ul className="mt-4 list-disc list-inside space-y-1 text-slate-700">
@@ -114,9 +118,7 @@ export default function PricingSection() {
                 <Card key={i} className="rounded-2xl shadow-md">
                   <CardContent className="p-6">
                     <h3 className="font-semibold">{plan.title}</h3>
-                    <p className="mt-2 text-blue-600 font-bold">
+                    <p className="mt-2 text-blue-600 font-bold">{plan.price}</p>
-                      {plan.price}
-                    </p>
                   </CardContent>
                 </Card>
               ))}
@@ -128,7 +130,8 @@ export default function PricingSection() {
             <h2 className="text-2xl font-bold">Recruitment ROI Example</h2>
             <Card className="mt-4 rounded-2xl shadow-md">
               <CardContent className="p-6 text-slate-700">
-                10 recruiters using Winixco can save ~400 hours/month through AI automation resulting in productivity worth ₹4L+ per month.
+                10 recruiters using Winixco can save ~400 hours/month through AI
+                automation resulting in productivity worth ₹4L+ per month.
               </CardContent>
             </Card>
           </div>
@@ -136,12 +139,14 @@ export default function PricingSection() {
 
         {/* Footer CTA */}
         <div className="mt-16 text-center">
-          <p className="mb-4 text-slate-600">
+          <p className="mb-4 text-slate-600">Need bulk pricing or demo?</p>
-            Need bulk pricing or demo?
+          <DemoModal
-          </p>
+            trigger={
-          <Button className="px-8 py-6 text-lg rounded-xl">
+              <Button className="px-8 py-6 text-lg rounded-xl">
-            Contact Sales
+                Contact Sales
-          </Button>
+              </Button>
+            }
+          />
         </div>
       </div>
 
@@ -151,4 +156,4 @@ export default function PricingSection() {
       </div>
     </div>
   );
-}
+}

app/(public)/ats/_components/CTA.tsx

@@ -3,15 +3,14 @@
 import React from "react";
 import { motion } from "framer-motion";
 import { Button } from "@/components/ui/button";
-import {
+import { ArrowRight, Sparkles } from "lucide-react";
-  ArrowRight,
-  Sparkles,
-} from "lucide-react";
 import { atsPageData } from "@/services/Constants";
-
+import DemoModal from "../../_homeComponents/DemoModal";
+import { useRouter } from "next/navigation";
 
 // CTA Section Component
 const CtaSection: React.FC = () => {
+  const router = useRouter();
   return (
     <section className="py-20 bg-[#2563eb] to-pink-600">
       <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
@@ -32,18 +31,23 @@ const CtaSection: React.FC = () => {
             <Button
               size="lg"
               className="bg-white text-blue-700 hover:bg-gray-100 font-semibold px-8 py-6 text-lg shadow-xl"
+              onClick={() => router.push("https://app.winixco.com")}
             >
               {atsPageData.cta.primaryButton}
               <Sparkles className="ml-2 w-5 h-5" />
             </Button>
-            <Button
+            <DemoModal
-              size="lg"
+              trigger={
-              variant="outline"
+                <Button
-              className="border-2 border-white hover:bg-white/10 font-semibold px-8 py-6 text-lg"
+                  size="lg"
-            >
+                  variant="outline"
-              {atsPageData.cta.secondaryButton}
+                  className="border-2 border-white hover:bg-white/10 font-semibold px-8 py-6 text-lg"
-              <ArrowRight className="ml-2 w-5 h-5" />
+                >
-            </Button>
+                  {atsPageData.cta.secondaryButton}
+                  <ArrowRight className="ml-2 w-5 h-5" />
+                </Button>
+              }
+            />
           </div>
         </motion.div>
       </div>
@@ -51,4 +55,4 @@ const CtaSection: React.FC = () => {
   );
 };
 
-export default CtaSection
+export default CtaSection;

app/(public)/ats/_components/Hero.tsx

@@ -6,11 +6,12 @@ import { Button } from "@/components/ui/button";
 import { Badge } from "@/components/ui/badge";
 import { PlayCircle, ArrowRight, Sparkles } from "lucide-react";
 import { atsPageData } from "@/services/Constants";
+import DemoModal from "../../_homeComponents/DemoModal";
+
 
 const HeroSection: React.FC = () => {
   return (
     <section className="relative py-24 md:py-32 bg-[linear-gradient(135deg,_#FFFFFF_0%,_#F9FAFB_50%,_#DBEAFE_100%)] overflow-hidden">
-
       <div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 text-center relative z-10">
         <motion.div
           initial={{ opacity: 0, y: 20 }}
@@ -31,21 +32,26 @@ const HeroSection: React.FC = () => {
           </p>
 
           <div className="flex flex-col sm:flex-row gap-4 justify-center items-center">
-            <Button
+            <DemoModal
-              size="lg"
+              trigger={
-              className="bg-white text-blue-700 hover:bg-gray-100 font-semibold px-8 py-6 text-lg shadow-xl"
+                <Button
-            >
+                  size="lg"
-              {atsPageData.hero.primaryCta}
+                  className="bg-white text-blue-700 hover:bg-gray-100 font-semibold px-8 py-6 text-lg shadow-xl"
-              <ArrowRight className="ml-2 w-5 h-5" />
+                >
-            </Button>
+                  {atsPageData.hero.primaryCta}
-            <Button
+                  <ArrowRight className="ml-2 w-5 h-5" />
+                </Button>
+              }
+            />
+
+            {/*<Button
               size="lg"
               variant="outline"
               className="border-2 border-white hover:bg-white/10 font-semibold px-8 py-6 text-lg"
             >
               <PlayCircle className="mr-2 w-5 h-5" />
               {atsPageData.hero.secondaryCta}
-            </Button>
+            </Button> */}
           </div>
         </motion.div>
       </div>

app/(public)/careers/page.tsx

@@ -7,6 +7,7 @@ import {
   HeartHandshake,
   ArrowRight,
 } from "lucide-react";
+import { useRouter } from "next/navigation";
 import Link from "next/link";
 
 const openRoles = [
@@ -37,6 +38,7 @@ const openRoles = [
 ];
 
 export default function Careers() {
+  const router = useRouter();
   return (
     <div className="min-h-screen bg-gray-50 text-gray-900">
       {/* HERO */}
@@ -112,7 +114,7 @@ export default function Careers() {
                 </div>
 
                 <Link
-                  href="/apply"
+                  href="https://jobs.winixco.com/"
                   className="text-blue-600 font-medium flex items-center gap-2 hover:gap-3 transition-all"
                 >
                   Apply Now <ArrowRight className="w-4 h-4" />

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
+          <DemoModal
-            size="lg"
+            trigger={
-            className="px-9 py-6 text-lg rounded-xl font-bold shadow-xl bg-[#2563eb] hover:bg-blue-700 hover:scale-105 transition-transform"
+              <Button
-          >
+                size="lg"
-            <CalendarCheck className="mr-2 w-5 h-5" />
+                className="px-9 py-6 text-lg rounded-xl font-bold shadow-xl bg-[#2563eb] hover:bg-blue-700 hover:scale-105 transition-transform"
-            Book My Demo
+              >
-          </Button>
+                <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;

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

@@ -1,8 +1,17 @@
 "use client";
 import React from "react";
 import { motion } from "framer-motion";
-import { CheckCircle, Rocket, Shield, Zap, MessageCircle, Calendar, Clock } from "lucide-react";
+import {
+  CheckCircle,
+  Rocket,
+  Shield,
+  Zap,
+  MessageCircle,
+  Calendar,
+  Clock,
+} from "lucide-react";
 import Link from "next/link";
+import DemoModal from "../../_homeComponents/DemoModal";
 
 // Feature data
 const features = [
@@ -14,7 +23,6 @@ const features = [
   { text: "Real-time analytics and reporting", icon: Clock }, // New feature added
 ];
 
-
 const ChooseWinixco = () => {
   return (
     <section className="py-24 px-6 bg-white">
@@ -50,7 +58,6 @@ const ChooseWinixco = () => {
   );
 };
 
-
 // Contact CTA Section
 const WeLoveToHearFromYou = () => {
   return (
@@ -67,8 +74,9 @@ const WeLoveToHearFromYou = () => {
         </h2>
 
         <p className="text-gray-600 mt-6 text-lg">
-          Your message helps us understand your business better — and deliver the right solution.
+          Your message helps us understand your business better — and deliver
-          Let’s build something powerful for your organisation.
+          the right solution. Let’s build something powerful for your
+          organisation.
         </p>
 
         {/* CTA Buttons */}
@@ -80,16 +88,20 @@ const WeLoveToHearFromYou = () => {
             👉 Send Message
           </Link>
 
-          <Link
+          <DemoModal
-            href="#book-demo"
+            trigger={
-            className="px-8 py-4 text-lg font-semibold rounded-xl border-2 border-blue-600 text-[#2563eb] hover:bg-purple-50 transition-all hover:scale-105"
+              <Link
-          >
+                href=""
-            👉 Book a Demo
+                className="px-8 py-4 text-lg font-semibold rounded-xl border-2 border-blue-600 text-[#2563eb] hover:bg-purple-50 transition-all hover:scale-105"
-          </Link>
+              >
+                👉 Book a Demo
+              </Link>
+            }
+          />
         </div>
       </motion.div>
     </section>
   );
 };
 
-export { ChooseWinixco, WeLoveToHearFromYou };
+export { ChooseWinixco, WeLoveToHearFromYou };

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

@@ -99,6 +99,7 @@ const ContactForm: React.FC = () => {
       whileInView={{ opacity: 1, y: 0 }}
       viewport={{ once: true }}
       className="max-w-3xl mx-auto mb-20"
+      id="contact-form"
     >
       <Card className="bg-white border-gray-200 shadow-xl">
         <CardContent className="p-8 md:p-12">

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

@@ -1,14 +1,11 @@
-"use client"
+"use client";
-import React from 'react';
+import React from "react";
-import { motion } from 'framer-motion';
+import { motion } from "framer-motion";
-import { Button } from '@/components/ui/button';
+import { Button } from "@/components/ui/button";
-import { Badge } from '@/components/ui/badge';
+import { Badge } from "@/components/ui/badge";
-import { 
+import { Users, Star } from "lucide-react";
-  Users,
+import { CONTACT_DATA } from "@/services/Constants";
-  Star
+import DemoModal from "../../_homeComponents/DemoModal";
-} from 'lucide-react';
-import { CONTACT_DATA } from '@/services/Constants';
-
 
 // Happy Customers Component
 const HappyCustomers: React.FC = () => (
@@ -27,14 +24,21 @@ const HappyCustomers: React.FC = () => (
           </Badge>
           <h2 className="text-3xl md:text-4xl lg:text-5xl font-bold text-gray-900 mb-6">
             {CONTACT_DATA.customers.title}
-            <span className="text-orange-600">{CONTACT_DATA.customers.highlight}</span>
+            <span className="text-orange-600">
+              {CONTACT_DATA.customers.highlight}
+            </span>
           </h2>
-          <Button
+
-            size="lg"
+          <DemoModal
-            className="bg-[#2563eb] hover:from-purple-700 hover:to-blue-700 text-white"
+            trigger={
-          >
+              <Button
-            Try for FREE
+                size="lg"
-          </Button>
+                className="bg-[#2563eb] hover:from-purple-700 hover:to-blue-700 text-white"
+              >
+                Try for FREE
+              </Button>
+            }
+          />
         </div>
 
         <div>
@@ -42,8 +46,12 @@ const HappyCustomers: React.FC = () => (
             <div className="flex items-center gap-2">
               <Users className="w-8 h-8 text-[#2563eb]" />
               <div>
-                <p className="text-3xl font-bold text-gray-900">{CONTACT_DATA.customers.count}</p>
+                <p className="text-3xl font-bold text-gray-900">
-                <p className="text-sm text-gray-600">{CONTACT_DATA.customers.label}</p>
+                  {CONTACT_DATA.customers.count}
+                </p>
+                <p className="text-sm text-gray-600">
+                  {CONTACT_DATA.customers.label}
+                </p>
               </div>
             </div>
           </div>
@@ -59,7 +67,9 @@ const HappyCustomers: React.FC = () => (
                 whileHover={{ scale: 1.1 }}
               >
                 <div className="bg-white rounded-xl p-4 shadow-md hover:shadow-lg transition-all duration-300 flex items-center justify-center h-20">
-                  <span className={`font-bold text-lg ${logo.color}`}>{logo.name}</span>
+                  <span className={`font-bold text-lg ${logo.color}`}>
+                    {logo.name}
+                  </span>
                 </div>
               </motion.div>
             ))}
@@ -70,4 +80,4 @@ const HappyCustomers: React.FC = () => (
   </motion.div>
 );
 
-export default HappyCustomers
+export default HappyCustomers;

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

@@ -3,6 +3,7 @@ import React from "react";
 import { motion } from "framer-motion";
 import { BadgeCheck, Handshake, Globe, Layers } from "lucide-react";
 import { Button } from "@/components/ui/button";
+import { useRouter } from "next/navigation";
 
 const partnerships = [
   "White-label & reseller partnership",
@@ -12,6 +13,7 @@ const partnerships = [
 ];
 
 const PartnerWithUsSection = () => {
+  const router = useRouter();
   return (
     <section className="relative py-24 px-6 bg-white overflow-hidden">
       <motion.div
@@ -57,7 +59,7 @@ const PartnerWithUsSection = () => {
           animate={{ opacity: 1, scale: 1 }}
           className="mt-12"
         >
-          <Button className="px-10 py-5 text-lg bg-[#2563eb] text-white font-bold rounded-xl shadow-lg hover:bg-blue-700 hover:scale-105 transition-all">
+          <Button className="px-10 py-5 text-lg bg-[#2563eb] text-white font-bold rounded-xl shadow-lg hover:bg-blue-700 hover:scale-105 transition-all" onClick={()=>router.push("#contact-form")}>
             Become a Partner
           </Button>
         </motion.div>

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

@@ -19,8 +19,7 @@ const TechnicalSupportSection = () => {
         className="absolute inset-0 opacity-25 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-6xl mx-auto">
         <div className="text-center">
@@ -33,8 +32,8 @@ const TechnicalSupportSection = () => {
           </motion.h2>
 
           <p className="mt-6 text-lg text-gray-600 max-w-3xl mx-auto">
-            Already using Winixco? We’re here to ensure everything works seamlessly
+            Already using Winixco? We’re here to ensure everything works
-            — fast responses & expert support guaranteed.
+            seamlessly — fast responses & expert support guaranteed.
           </p>
         </div>
 
@@ -53,18 +52,9 @@ const TechnicalSupportSection = () => {
             </motion.div>
           ))}
         </div>
-
-        <div className="text-center mt-12">
-          <Button
-            variant="outline"
-            className="px-10 py-5 text-lg font-bold text-blue-700 border-2 rounded-xl hover:bg-purple-100 transition-all"
-          >
-            Contact Support
-          </Button>
-        </div>
       </div>
     </section>
   );
 };
 
-export default TechnicalSupportSection;
+export default TechnicalSupportSection;

app/(public)/crm/_components/CRMAnalytics.tsx

@@ -5,8 +5,11 @@ import { motion } from "framer-motion";
 import { Button } from "@/components/ui/button";
 import { BarChart3 } from "lucide-react";
 import { crm } from "@/services/Constants";
+import { useRouter } from "next/navigation";
+import DemoModal from "../../_homeComponents/DemoModal";
 
 const CRMAnalytics: React.FC = () => {
+  const router = useRouter();
   return (
     <section className="py-20 px-4 bg-[#2563eb] text-white relative overflow-hidden">
       <div className="absolute inset-0 bg-[url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjAiIGhlaWdodD0iNjAiIHZpZXdCb3g9IjAgMCA2MCA2MCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxnIGZpbGw9IiNmZmZmZmYiIGZpbGwtb3BhY2l0eT0iMC4wNSI+PHBhdGggZD0iTTM2IDE4YzAtOS45NC04LjA2LTE4LTE4LTE4UzAgOC4wNiAwIDE4czguMDYgMTggMTggMTggMTgtOC4wNiAxOC0xOCIvPjwvZz48L2c+PC9zdmc+')] opacity-30"></div>
@@ -60,12 +63,16 @@ const CRMAnalytics: React.FC = () => {
           viewport={{ once: true }}
           className="mt-12 text-center"
         >
-          <Button
+          <DemoModal
-            size="lg"
+            trigger={
-            className="bg-white text-blue-700 hover:bg-blue-50 text-lg px-8 py-6 shadow-xl"
+              <Button
-          >
+                size="lg"
-            <BarChart3 className="mr-2" /> View Full Analytics Dashboard
+                className="bg-white text-blue-700 hover:bg-blue-50 text-lg px-8 py-6 shadow-xl"
-          </Button>
+              >
+                <BarChart3 className="mr-2" /> View Full Analytics Dashboard
+              </Button>
+            }
+          />
         </motion.div>
       </div>
     </section>

app/(public)/crm/_components/FinalCTA.tsx

@@ -4,9 +4,7 @@ import React from "react";
 import { motion } from "framer-motion";
 import { Button } from "@/components/ui/button";
 import { crm } from "@/services/Constants";
-
+import DemoModal from "../../_homeComponents/DemoModal";
-
-
 
 const FinalCTA: React.FC = () => {
   return (
@@ -54,16 +52,20 @@ const FinalCTA: React.FC = () => {
           viewport={{ once: true }}
           className="mt-10"
         >
-          <Button
+          <DemoModal
-            size="lg"
+            trigger={
-            className="px-10 py-6 text-lg font-semibold bg-white text-blue-700 hover:bg-gray-100 hover:scale-105 transition-all rounded-xl shadow-lg"
+              <Button
-          >
+                size="lg"
-            {crm.FINAL_CTA.ctaText}
+                className="px-10 py-6 text-lg font-semibold bg-white text-blue-700 hover:bg-gray-100 hover:scale-105 transition-all rounded-xl shadow-lg"
-          </Button>
+              >
+                {crm.FINAL_CTA.ctaText}
+              </Button>
+            }
+          />
         </motion.div>
       </div>
     </section>
   );
 };
 
-export default FinalCTA
+export default FinalCTA;

app/(public)/crm/_components/Hero.tsx

@@ -12,7 +12,7 @@ import {
   UserCheck,
 } from "lucide-react";
 import { crm } from "@/services/Constants";
-
+import DemoModal from "../../_homeComponents/DemoModal";
 
 // Components
 const CRMHero: React.FC = () => {
@@ -38,7 +38,9 @@ const CRMHero: React.FC = () => {
                 A Powerful CRM
               </span>
               <br />
-              <span className="text-gray-900">to Manage Leads, Customers & Sales Growth</span>
+              <span className="text-gray-900">
+                to Manage Leads, Customers & Sales Growth
+              </span>
             </h1>
 
             <p className="text-xl text-gray-600 mb-8 leading-relaxed">
@@ -46,19 +48,25 @@ const CRMHero: React.FC = () => {
             </p>
 
             <div className="flex flex-col sm:flex-row gap-4">
-              <Button
+              <DemoModal
-                size="lg"
+                trigger={
-                className="bg-[#2563eb] hover:from-blue-700 hover:to-purple-700 text-lg px-8 py-6 shadow-lg hover:shadow-xl transition-all"
+                  <Button
-              >
+                    size="lg"
-                {crm.hero.ctaPrimary} <ArrowRight className="ml-2 w-5 h-5" />
+                    className="bg-[#2563eb] hover:from-blue-700 hover:to-purple-700 text-lg px-8 py-6 shadow-lg hover:shadow-xl transition-all"
-              </Button>
+                  >
-              <Button
+                    {crm.hero.ctaPrimary}{" "}
+                    <ArrowRight className="ml-2 w-5 h-5" />
+                  </Button>
+                }
+              />
+
+              {/*<Button
                 size="lg"
                 variant="outline"
                 className="border-2 border-gray-300 hover:border-blue-600 hover:bg-blue-50 text-gray-700 text-lg px-8 py-6"
               >
                 <Download className="mr-2 w-5 h-5" /> {crm.hero.ctaSecondary}
-              </Button>
+              </Button> */}
             </div>
 
             <div className="mt-8 flex items-center gap-6 text-sm text-gray-600">
@@ -105,4 +113,4 @@ const CRMHero: React.FC = () => {
   );
 };
 
-export default CRMHero
+export default CRMHero;

app/(public)/features/page.tsx

@@ -8,6 +8,7 @@ import {
   WorkflowIcon,
 } from "lucide-react";
 import { Button } from "@/components/ui/button";
+import DemoModal from "../_homeComponents/DemoModal";
 
 const FEATURES_DATA = [
   {
@@ -91,12 +92,16 @@ export default function FeaturesPage() {
           Try Winixco now and transform the way your business grows.
         </p>
 
-        <Button
+        <DemoModal
-          size="lg"
+          trigger={
-          className="text-lg bg-white text-blue-700 hover:bg-blue-100"
+            <Button
-        >
+              size="lg"
-          Book a Live Demo
+              className="text-lg bg-white text-blue-700 hover:bg-blue-100"
-        </Button>
+            >
+              Book a Live Demo
+            </Button>
+          }
+        />
       </section>
     </main>
   );

app/(public)/hrms/_components/FinalCTA.tsx

@@ -4,9 +4,7 @@ import React from "react";
 import { motion } from "framer-motion";
 import { Button } from "@/components/ui/button";
 import { hrms } from "@/services/Constants";
-
+import DemoModal from "../../_homeComponents/DemoModal";
-
-
 
 const FinalCTA: React.FC = () => {
   return (
@@ -54,16 +52,20 @@ const FinalCTA: React.FC = () => {
           viewport={{ once: true }}
           className="mt-10"
         >
-          <Button
+          <DemoModal
-            size="lg"
+            trigger={
-            className="px-10 py-6 text-lg font-semibold bg-white text-blue-700 hover:bg-gray-100 hover:scale-105 transition-all rounded-xl shadow-lg"
+              <Button
-          >
+                size="lg"
-            {hrms.FINAL_CTA.ctaText}
+                className="px-10 py-6 text-lg font-semibold bg-white text-blue-700 hover:bg-gray-100 hover:scale-105 transition-all rounded-xl shadow-lg"
-          </Button>
+              >
+                {hrms.FINAL_CTA.ctaText}
+              </Button>
+            }
+          />
         </motion.div>
       </div>
     </section>
   );
 };
 
-export default FinalCTA
+export default FinalCTA;

app/(public)/hrms/_components/HRAnalytics.tsx

@@ -3,13 +3,9 @@
 import React from "react";
 import { motion } from "framer-motion";
 import { Button } from "@/components/ui/button";
-import {
+import { BarChart3 } from "lucide-react";
-  BarChart3,
-} from "lucide-react";
 import { hrms } from "@/services/Constants";
-
+import DemoModal from "../../_homeComponents/DemoModal";
-
-
 
 const HRAnalytics: React.FC = () => {
   return (
@@ -62,16 +58,20 @@ const HRAnalytics: React.FC = () => {
           viewport={{ once: true }}
           className="mt-12 text-center"
         >
-          <Button
+          <DemoModal
-            size="lg"
+            trigger={
-            className="bg-white text-blue-700 hover:bg-blue-50 text-lg px-8 py-6 shadow-xl"
+              <Button
-          >
+                size="lg"
-            <BarChart3 className="mr-2" /> View Full Analytics Dashboard
+                className="bg-white text-blue-700 hover:bg-blue-50 text-lg px-8 py-6 shadow-xl"
-          </Button>
+              >
+                <BarChart3 className="mr-2" /> View Full Analytics Dashboard
+              </Button>
+            }
+          />
         </motion.div>
       </div>
     </section>
   );
 };
 
-export default HRAnalytics
+export default HRAnalytics;

app/(public)/hrms/_components/Hero.tsx

@@ -12,10 +12,12 @@ import {
   UserCheck,
 } from "lucide-react";
 import { hrms } from "@/services/Constants";
-
+import { useRouter } from "next/navigation";
+import DemoModal from "../../_homeComponents/DemoModal";
 
 // Components
 const HRMSHero: React.FC = () => {
+  const router = useRouter();
   return (
     <section className="relative py-24 px-4 overflow-hidden">
       <div className="absolute inset-0 bg-gradient-to-br from-blue-50 via-white to-purple-50"></div>
@@ -34,9 +36,7 @@ const HRMSHero: React.FC = () => {
             </Badge>
 
             <h1 className="text-5xl md:text-6xl lg:text-7xl font-extrabold leading-tight text-gray-900 mb-6">
-              <span className="text-gray-900 ">
+              <span className="text-gray-900 ">Modern HRMS</span>
-                Modern HRMS
-              </span>
               <br />
               <span className="text-gray-900">Designed for Tomorrow</span>
             </h1>
@@ -46,19 +46,25 @@ const HRMSHero: React.FC = () => {
             </p>
 
             <div className="flex flex-col sm:flex-row gap-4">
-              <Button
+              <DemoModal
-                size="lg"
+                trigger={
-                className="bg-[#2563eb] hover:from-blue-700 hover:to-purple-700 text-lg px-8 py-6 shadow-lg hover:shadow-xl transition-all"
+                  <Button
-              >
+                    size="lg"
-                {hrms.hero.ctaPrimary} <ArrowRight className="ml-2 w-5 h-5" />
+                    className="bg-[#2563eb] hover:from-blue-700 hover:to-purple-700 text-lg px-8 py-6 shadow-lg hover:shadow-xl transition-all"
-              </Button>
+                  >
-              <Button
+                    {hrms.hero.ctaPrimary}{" "}
+                    <ArrowRight className="ml-2 w-5 h-5" />
+                  </Button>
+                }
+              />
+
+              {/*<Button
                 size="lg"
                 variant="outline"
                 className="border-2 border-gray-300 hover:border-blue-600 hover:bg-blue-50 text-gray-700 text-lg px-8 py-6"
               >
                 <Download className="mr-2 w-5 h-5" /> {hrms.hero.ctaSecondary}
-              </Button>
+              </Button> */}
             </div>
 
             <div className="mt-8 flex items-center gap-6 text-sm text-gray-600">
@@ -105,4 +111,4 @@ const HRMSHero: React.FC = () => {
   );
 };
 
-export default HRMSHero
+export default HRMSHero;

app/(public)/services/_components/ServiceCTA.tsx

@@ -2,13 +2,12 @@
 
 import { Button } from "@/components/ui/button";
 import { motion } from "framer-motion";
+import DemoModal from "../../_homeComponents/DemoModal";
 
 export default function ServiceCTA() {
   return (
     <section className="py-20 bg-[#2563eb] text-white">
-
       <div className="max-w-6xl mx-auto px-6 text-center">
-
         <motion.h2
           initial={{ opacity: 0, y: 30 }}
           whileInView={{ opacity: 1, y: 0 }}
@@ -23,15 +22,15 @@ export default function ServiceCTA() {
         </p>
 
         <div className="mt-8 flex justify-center gap-4 flex-wrap">
-
+          <DemoModal
-          <Button className="bg-white text-[#2563eb] hover:bg-gray-100 px-8 py-6 text-lg rounded-xl">
+            trigger={
-            Start Free Trial
+              <Button className="bg-white text-[#2563eb] hover:bg-gray-100 px-8 py-6 text-lg rounded-xl">
-          </Button>
+                Start Free Trial
-
+              </Button>
+            }
+          />
         </div>
-
       </div>
-
     </section>
   );
-}
+}