Ui cahnges and button linking

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
-              size="lg"
-              className="bg-white text-blue-700 hover:bg-gray-100 font-semibold px-8 py-6 text-lg shadow-xl"
-            >
-              {atsPageData.hero.primaryCta}
-              <ArrowRight className="ml-2 w-5 h-5" />
-            </Button>
-            <Button
+            <DemoModal
+              trigger={
+                <Button
+                  size="lg"
+                  className="bg-white text-blue-700 hover:bg-gray-100 font-semibold px-8 py-6 text-lg shadow-xl"
+                >
+                  {atsPageData.hero.primaryCta}
+                  <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>