Ui cahnges and button linking

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
-                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"
-              >
-                {crm.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"
+                  >
+                    {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;