flowchart changes updated

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

@@ -0,0 +1,60 @@
+export default function OperifyExome() {
+  const features = [
+    { title: "Deep Coverage", desc: "≥100X average depth for high accuracy." },
+    { title: "Superior Data Quality", desc: "≥90% bases with Q30 score." },
+    { title: "Comprehensive Variant Detection", desc: "Identifies SNVs, Indels, and CNVs." },
+    { title: "Uniparental Disomy Analysis", desc: "Detects UPD regions for imprinting disorders." },
+    { title: "Coverage of Complex Genes", desc: "Includes SMN1, SMN2, and DMD." },
+    { title: "Chromosomal Assessment", desc: "Detects aneuploidies and determines chromosomal sex." },
+    { title: "Dynamic Reanalysis", desc: "Reanalysis as scientific knowledge evolves." }
+  ];
+
+  const points = [
+    "Whole Exome Sequencing (WES) targets the protein-coding regions of the genome, where most disease-causing mutations are found.",
+    "With over 7,000 rare diseases identified—80% of which have a genetic basis—WES offers a powerful approach to uncover their causes.",
+    "Traditional diagnostic methods can be slow, costly, and inconclusive; WES streamlines the process by delivering broad genetic insights in a single test.",
+    "Operify Exome enhances WES by combining comprehensive coverage with advanced interpretation, improving diagnostic yield and patient outcomes."
+  ];
+
+  return (
+    <section className="mx-auto px-8 pt-10">
+      <h2 className="text-3xl font-bold text-teal-700 pb-2 mb-4">Operify Exome</h2>
+      
+      <div className="mb-8">
+        <ul className="space-y-4">
+          {points.map((point, idx) => (
+            <li key={idx} className="flex items-start">
+              <span 
+                className="w-2 h-2 rounded-full mt-2 mr-3 flex-shrink-0"
+                style={{backgroundColor: '#faae31'}}
+              ></span>
+              <p className="text-gray-600 leading-relaxed text-base text-justify">
+                {point}
+              </p>
+            </li>
+          ))}
+        </ul>
+      </div>
+
+      <h3 className="text-2xl font-semibold text-teal-700 mb-4">Key Features</h3>
+      <div className="overflow-x-auto">
+        <table className="w-full border-collapse border border-gray-300 rounded-lg">
+          <thead>
+            <tr className="bg-teal-50">
+              <th className="border border-gray-300 px-3 py-2 text-left font-semibold text-teal-700">Feature</th>
+              <th className="border border-gray-300 px-3 py-2 text-left font-semibold text-teal-700">Description</th>
+            </tr>
+          </thead>
+          <tbody>
+            {features.map((feature, idx) => (
+              <tr key={idx} className="hover:bg-teal-50">
+                <td className="border border-gray-300 px-6 py-3 text-gray-700 font-medium">{feature.title}</td>
+                <td className="border border-gray-300 px-6 py-3 text-gray-600">{feature.desc}</td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+    </section>
+  );
+}