flowchart changes updated

app/health/rare-disorders/exome/components/SampleRequirements.jsx

@@ -0,0 +1,50 @@
+import Image from "next/image";
+
+export default function SampleRequirements({ title, items }) {
+  const requirements = [
+    {
+      icon: "/images/icons/clock.png", // Replace with your actual icon path
+      title: "Turnaround Time",
+      description: "21 Days"
+    },
+    {
+      icon: "/images/icons/sample.png", // Replace with your actual icon path
+      title: "Sample Requirement", 
+      description: "Blood/Saliva/Cheek Swab/Genomic DNA/Dry Blood Spot"
+    }
+  ];
+
+  return (
+    <section className="mx-auto px-8 pt-8 pb-12">
+      <h3 className="text-3xl font-bold text-teal-700 mb-6">{title} Sample Requirements</h3>
+      
+      <div className="grid grid-cols-1 sm:grid-cols-2 gap-6 max-w-none mx-auto">
+        {requirements.map((req, idx) => (
+          <div 
+            key={idx}
+            className="rounded-2xl p-4 hover:shadow-sm transition-shadow cursor-pointer" 
+            style={{backgroundColor: '#f2fcfc'}}
+          >
+            <div className="flex items-start gap-4">
+              <div className="flex-shrink-0 mt-1 rounded-full bg-orange-100 w-14 h-14 flex items-center justify-center">
+                <Image
+                  src={req.icon}
+                  alt={req.title}
+                  width={36}
+                  height={36}
+                  className="object-contain"
+                />
+              </div>
+              <div className="flex-1">
+                <h4 className="text-lg font-semibold text-teal-700 mb-2">{req.title}</h4>
+                <p className="text-gray-600 text-sm leading-relaxed">
+                  {req.description}
+                </p>
+              </div>
+            </div>
+          </div>
+        ))}
+      </div>
+    </section>
+  );
+}