63 lines
2.3 KiB
JavaScript
63 lines
2.3 KiB
JavaScript
"use client";
|
|
|
|
export default function SolutionsOffer() {
|
|
const solutions = [
|
|
{
|
|
name: "Exome",
|
|
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.",
|
|
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>
|
|
|
|
<p className="text-gray-600 leading-relaxed text-base mb-4 text-justify">
|
|
Comprehensive genomic sequencing solutions designed to unlock genetic insights
|
|
and accelerate diagnosis for rare disease patients and their families.
|
|
</p>
|
|
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 gap-6">
|
|
{solutions.map((sol, idx) => (
|
|
<div
|
|
key={idx}
|
|
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 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>
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
} |