Ui cahnges and button linking

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
-            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>