Ui cahnges and button linking

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
-            size="lg"
-            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"
-          >
-            {hrms.FINAL_CTA.ctaText}
-          </Button>
+          <DemoModal
+            trigger={
+              <Button
+                size="lg"
+                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"
+              >
+                {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 {
-  BarChart3,
-} from "lucide-react";
+import { 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
-            size="lg"
-            className="bg-white text-blue-700 hover:bg-blue-50 text-lg px-8 py-6 shadow-xl"
-          >
-            <BarChart3 className="mr-2" /> View Full Analytics Dashboard
-          </Button>
+          <DemoModal
+            trigger={
+              <Button
+                size="lg"
+                className="bg-white text-blue-700 hover:bg-blue-50 text-lg px-8 py-6 shadow-xl"
+              >
+                <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 ">
-                Modern HRMS
-              </span>
+              <span className="text-gray-900 ">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
-                size="lg"
-                className="bg-[#2563eb] hover:from-blue-700 hover:to-purple-700 text-lg px-8 py-6 shadow-lg hover:shadow-xl transition-all"
-              >
-                {hrms.hero.ctaPrimary} <ArrowRight className="ml-2 w-5 h-5" />
-              </Button>
-              <Button
+              <DemoModal
+                trigger={
+                  <Button
+                    size="lg"
+                    className="bg-[#2563eb] hover:from-blue-700 hover:to-purple-700 text-lg px-8 py-6 shadow-lg hover:shadow-xl transition-all"
+                  >
+                    {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;