Health page creation

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

@@ -0,0 +1,40 @@
+'use client'
+import { useState } from "react";
+
+export default function ClinicalAreasGrid() {
+  const areas = [
+    { name: "Cardiovascular", icon: "/images/icons/cardio.png" },
+    { name: "Dermatology", icon: "/images/icons/dermatology.png" },
+    { name: "Dysmorphology", icon: "/images/icons/dysmorphology.png" },
+    { name: "Ear, Nose, and Throat", icon: "/images/icons/ent.png" },
+    { name: "Endocrinology", icon: "/images/icons/endocrinology.png" },
+    { name: "Hematology", icon: "/images/icons/hematology.png" },
+    { name: "Immunology", icon: "/images/icons/immunology.png" },
+    { name: "Metabolic Disorders", icon: "/images/icons/metabolic.png" },
+    { name: "Nephrology", icon: "/images/icons/nephrology.png" },
+    { name: "Neurology", icon: "/images/icons/neurology.png" },
+    { name: "Oncology", icon: "/images/icons/oncology.png" },
+    { name: "Ophthalmology", icon: "/images/icons/ophthalmology.png" },
+    { name: "Osteology", icon: "/images/icons/osteology.png" },
+    { name: "Pneumology", icon: "/images/icons/pneumology.png" },
+    { name: "Reproductive Health", icon: "/images/icons/reproductive.png" },
+  ];
+
+  return (
+    <section className="mx-auto px-10 pt-12">
+      <h2 className="text-3xl font-bold text-gray-700 text-left pb-2 mb-4">Clinical Areas</h2>
+      <div className="grid sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
+        {areas.map((area, idx) => (
+          <div
+            key={idx}
+            className="flex items-center gap-3 rounded-lg p-4 shadow-sm"
+            style={{ backgroundColor: '#f2fcfc' }}
+          >
+            <img src={area.icon} alt={area.name} className="w-6 h-6" />
+            <span className="text-gray-600 leading-relaxed text-base">{area.name}</span>
+          </div>
+        ))}
+      </div>
+    </section>
+  );
+}