Health page creation

app/health/components/ClinicalAreas.jsx

@@ -0,0 +1,71 @@
+// components/ClinicalAreas.js
+import Link from "next/link";
+import Image from "next/image";
+
+export default function ClinicalAreas() {
+  return (
+    <div className="mx-auto px-10 py-4">
+      {/* Heading */}
+      <h2 className="text-4xl font-bold text-gray-700 text-left pb-2 mb-4">
+        Precise Solutions for Clinical Areas
+      </h2>
+
+      {/* Subtext */}
+      <p className="text-gray-600 leading-relaxed text-base mb-8 max-w-3xl text-justify">
+        Empowering you with precise, tailored approaches to diagnostics and care — 
+        addressing the unique needs of each clinical area to improve patient outcomes.
+      </p>
+
+      {/* Cards */}
+      <div className="grid grid-cols-1 sm:grid-cols-2 gap-6">
+        {/* Rare Disorders */}
+        <Link href="/health/rare-disorders">
+          <div className="rounded-lg p-6 hover:shadow-sm transition-shadow cursor-pointer" style={{backgroundColor: '#f2fcfc'}}>
+            <div className="flex items-start gap-4">
+              {/* Icon */}
+              <div className="flex-shrink-0 mt-1">
+                <Image
+                  src="/images/icons/disorder.png"
+                  alt="Rare Disorders"
+                  width={40}
+                  height={40}
+                  className="object-contain"
+                />
+              </div>
+              <div className="flex-1">
+                <h3 className="text-lg font-semibold text-gray-900 mb-2">Rare Disorders</h3>
+                <p className="text-gray-500 text-sm leading-relaxed">
+                  Advancing diagnostics and treatments for rare genetic conditions.
+                </p>
+              </div>
+            </div>
+          </div>
+        </Link>
+
+        {/* Oncology */}
+        <Link href="/health/oncology">
+          <div className="rounded-lg p-6 hover:shadow-sm transition-shadow cursor-pointer" style={{backgroundColor: '#f2fcfc'}}>
+            <div className="flex items-start gap-4">
+              {/* Icon */}
+              <div className="flex-shrink-0 mt-1">
+                <Image
+                  src="/images/icons/oncology.png"
+                  alt="Oncology"
+                  width={40}
+                  height={40}
+                  className="object-contain"
+                />
+              </div>
+              <div className="flex-1">
+                <h3 className="text-lg font-semibold text-gray-900 mb-2">Oncology</h3>
+                <p className="text-gray-500 text-sm leading-relaxed">
+                  Revolutionizing cancer care with targeted therapies and early detection.
+                </p>
+              </div>
+            </div>
+          </div>
+        </Link>
+      </div>
+    </div>
+  );
+}