flowchart changes updated

app/health/rare-disorders/components/SolutionsOffer.jsx

@@ -1,15 +1,29 @@
+"use client";
+
 export default function SolutionsOffer() {
   const solutions = [
     {
       name: "Exome",
-      desc: "Whole Exome Sequencing for uncovering the genetic basis of rare diseases."
+      desc: "Whole Exome Sequencing for uncovering the genetic basis of rare diseases.",
+      path: "/health/rare-disorders/exome"
     },
     {
       name: "ExomeMito",
-      desc: "Exome + Mitochondrial Genome Sequencing for a higher diagnostic yield."
+      desc: "Exome + Mitochondrial Genome Sequencing for a higher diagnostic yield.",
+      path: "/health/rare-disorders/exomemito"
     }
   ];
 
+  const handleCardClick = (path) => {
+    // Using Next.js router for navigation
+    window.location.href = path;
+    
+    // Alternative: If you want to use Next.js useRouter hook:
+    // import { useRouter } from 'next/navigation';
+    // const router = useRouter();
+    // router.push(path);
+  };
+
   return (
     <div className="mx-auto px-8 py-6">
       <h2 className="text-3xl font-bold text-teal-700 mb-4">Our Rare Disease Solutions Offer</h2>
@@ -23,13 +37,22 @@ export default function SolutionsOffer() {
         {solutions.map((sol, idx) => (
           <div
             key={idx}
-            className="rounded-lg p-6 hover:shadow-sm transition-shadow cursor-pointer"
+            onClick={() => handleCardClick(sol.path)}
+            className="rounded-xl p-4 hover:shadow-lg hover:scale-105 transition-all duration-300 cursor-pointer"
             style={{backgroundColor: '#f2fcfc'}}
           >
             <div className="flex items-start">
               <div className="flex-1">
-                <h3 className="text-lg font-semibold text-gray-900 mb-2">{sol.name}</h3>
-                <p className="text-gray-500 text-sm leading-relaxed">{sol.desc}</p>
+                <h3 className="text-lg font-semibold text-gray-900 mb-2 hover:text-teal-700 transition-colors">
+                  {sol.name}
+                </h3>
+                <p className="text-gray-500 text-sm leading-relaxed mb-3">{sol.desc}</p>
+                <div className="flex items-center text-teal-600 text-sm font-medium">
+                  Learn more 
+                  <svg className="ml-1 w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
+                  </svg>
+                </div>
               </div>
             </div>
           </div>