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>
+  );
+}

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

@@ -0,0 +1,56 @@
+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." }
+  ];
+
+  return (
+    <section className="mx-auto px-10 pt-12">
+      <h2 className="text-3xl font-bold text-gray-700 text-left pb-2 mb-4">Operify Exome</h2>
+      
+      <div className="mb-8">
+        <p className="text-gray-600 leading-relaxed text-base mb-4 text-justify">
+          Whole Exome Sequencing (WES) targets the protein-coding regions of the genome, where most
+          disease-causing mutations are found.
+        </p>
+        <p className="text-gray-600 leading-relaxed text-base mb-4 text-justify">
+          With over 7,000 rare diseases identified—80% of which have a genetic basis—WES offers a 
+          powerful approach to uncover their causes.
+        </p>
+        <p className="text-gray-600 leading-relaxed text-base mb-4 text-justify">
+          Traditional diagnostic methods can be slow, costly, and inconclusive; WES streamlines the 
+          process by delivering broad genetic insights in a single test.
+        </p>
+        <p className="text-gray-600 leading-relaxed text-base text-justify">
+          Operify Exome enhances WES by combining comprehensive coverage with advanced interpretation, 
+          improving diagnostic yield and patient outcomes.
+        </p>
+      </div>
+
+      <h3 className="text-2xl font-semibold text-gray-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>
+  );
+}

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

@@ -0,0 +1,93 @@
+export default function OperifyExomeMito() {
+  const features = [
+    { title: "High Mean Target Depth", desc: "≥100X coverage for reliable detection." },
+    { title: "High Base Quality", desc: "≥90% of bases with Q30 score." },
+    { title: "Scope of Test", desc: "Covers SNVs/Indels, CNVs in nuclear and mitochondrial genome." },
+    { title: "Uniparental Disomy", desc: "Detects regions important in rare recessive conditions." },
+    { title: "Homologous Gene Analysis", desc: "Includes SMN1, SMN2, DMD." },
+    { title: "Aneuploidy & Ploidy Estimation", desc: "Detects abnormal chromosome numbers and sex karyotype." },
+    { title: "Reanalysis & Reclassification", desc: "Updates based on latest scientific knowledge." }
+  ];
+
+  const genomeCoverage = [
+    { genome: "Nuclear Genome", coverage: "Protein-coding regions of ~20000 genes" },
+    { genome: "Mitochondrial genome", coverage: "37 genes" }
+  ];
+
+  return (
+    <section className="mx-auto px-10 pt-12">
+      <h2 className="text-3xl font-bold text-gray-700 text-left pb-2 mb-4">Operify ExomeMito</h2>
+      <h3 className="text-xl font-semibold text-gray-700 mb-4">Boost diagnostic yield with Exome + Mito Sequencing</h3>
+      
+      <div className="mb-8">
+        <p className="text-gray-600 leading-relaxed text-base mb-4 text-justify">
+          The Operify ExomeMito Panel offers a unified solution by integrating whole exome sequencing 
+          with complete mitochondrial genome analysis—addressing both nuclear and mitochondrial causes 
+          of disease.
+        </p>
+        <p className="text-gray-600 leading-relaxed text-base mb-4 text-justify">
+          This combined approach is especially valuable in diagnosing complex, multisystemic, and rare 
+          disorders, where variants may exist across both genomes.
+        </p>
+        <p className="text-gray-600 leading-relaxed text-base mb-4 text-justify">
+          Mitochondrial disorders, though individually rare, are clinically significant, affecting 
+          approximately 1 in 5,000 individuals and often missed in standard testing.
+        </p>
+        <p className="text-gray-600 leading-relaxed text-base mb-4 text-justify">
+          Studies show that adding mitochondrial sequencing to exome testing increases diagnostic 
+          yield by up to 20%, offering greater clarity and clinical confidence. <em>(PMID: 30369941)</em>
+        </p>
+        <p className="text-gray-600 leading-relaxed text-base text-justify">
+          While screening for rare genetic disorders, it's essential not to overlook the rarest among 
+          them-mitochondrial disorders, which occur in approximately 1 in 5,000 individuals. Although 
+          individually rare, their cumulative impact is significant in the context of rare disease 
+          diagnostics. Multiple studies have demonstrated a substantial increase in diagnostic yield—up 
+          to 20%—when mitochondrial genome sequencing is performed alongside whole exome sequencing. 
+          <em>Reference: PMID: 30369941</em>
+        </p>
+      </div>
+
+      <div className="mb-8">
+        <h3 className="text-2xl font-semibold text-gray-700 mb-4">Genome Coverage</h3>
+        <div className="overflow-x-auto">
+          <table className="w-full border-collapse border border-gray-300 rounded-lg">
+            <thead>
+              <tr className="bg-gray-50">
+                <th className="border border-gray-300 px-6 py-3 text-left text-gray-700 font-semibold">Genome</th>
+                <th className="border border-gray-300 px-6 py-3 text-left text-gray-700 font-semibold">Coverage</th>
+              </tr>
+            </thead>
+            <tbody>
+              {genomeCoverage.map((item, idx) => (
+                <tr key={idx} className="hover:bg-gray-50">
+                  <td className="border border-gray-300 px-6 py-3 text-gray-700 font-medium">{item.genome}</td>
+                  <td className="border border-gray-300 px-6 py-3 text-gray-600">{item.coverage}</td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      </div>
+
+      <h3 className="text-2xl font-semibold text-gray-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-gray-50">
+              <th className="border border-gray-300 px-6 py-3 text-left text-gray-700 font-semibold">Feature</th>
+              <th className="border border-gray-300 px-6 py-3 text-left text-gray-700 font-semibold">Description</th>
+            </tr>
+          </thead>
+          <tbody>
+            {features.map((feature, idx) => (
+              <tr key={idx} className="hover:bg-gray-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>
+  );
+}

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

@@ -0,0 +1,18 @@
+export default function RareIntro() {
+  return (
+    <section className="mx-auto px-10 pt-12">
+      <h1 className="text-4xl font-bold text-gray-700 text-left pb-2 mb-4">Rare Disorders</h1>
+      <h2 className="text-2xl font-semibold text-gray-700 mb-4">Transforming Delays into Diagnoses</h2>
+      <p className="text-gray-600 leading-relaxed text-base mb-4 text-justify">
+        There are over 7,000 identified rare diseases, many of which begin in childhood—and
+        nearly 80% have a genetic cause. Yet, the average time to diagnose a rare disorder is
+        still 4.8 years, with some cases taking up to 20 years.
+      </p>
+      <p className="text-gray-600 leading-relaxed text-base text-justify">
+        At Operify Health, we leverage advanced Next Generation Sequencing (NGS) and proprietary
+        bioinformatics to deliver rapid, reliable insights—helping reduce the diagnostic journey
+        from years to days.
+      </p>
+    </section>
+  );
+}

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

@@ -0,0 +1,41 @@
+import React from 'react';
+
+const RareTitle = () => {
+  return (
+    <section 
+      className="relative bg-cover bg-center py-6 h-24" 
+      style={{ backgroundImage: "url('/images/bredcrumb.jpg')" }}
+    >
+      {/* Breadcrumb */}
+      <div className="relative z-10 mb-1 -mt-3">
+        <div className="container mx-auto max-w-none px-4">
+          <nav className="flex items-center space-x-2 text-sm">
+            <a href="/" className="text-white hover:text-yellow-400 underline">Home</a>
+            <span className="text-white">
+              <svg className="w-3 h-3" fill="currentColor" viewBox="0 0 20 20">
+                <path fillRule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clipRule="evenodd" />
+              </svg>
+            </span>
+            <a href="/about-us" className="text-white hover:text-yellow-400 underline">Health</a>
+            <span className="text-white">
+              <svg className="w-3 h-3" fill="currentColor" viewBox="0 0 20 20">
+                <path fillRule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clipRule="evenodd" />
+              </svg>
+            </span>
+            <span className="text-white">Rare Disorders</span>
+          </nav>
+        </div>
+      </div>
+      
+      {/* Page Title */}
+      <div className="relative z-10 text-center -mt-2">
+        <h1 className="text-4xl md:text-4xl font-bold text-white mb-2">
+          Rare Disorders
+        </h1>
+        <div className="w-16 h-1 bg-yellow-400 mx-auto"></div>
+      </div>
+    </section>
+  );
+};
+
+export default RareTitle;

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

@@ -0,0 +1,37 @@
+export default function SampleRequirements({ title, items }) {
+  return (
+    <section className="mx-auto px-10 pt-8 pb-12">
+      <div className="bg-gray-50 rounded-lg p-6">
+        <h3 className="text-2xl font-semibold text-gray-700 mb-6">{title} Sample Requirements</h3>
+        
+        <div className="grid md:grid-cols-2 gap-6">
+          {/* Turnaround Time */}
+          <div className="flex items-start gap-4">
+            <div className="flex-shrink-0 w-10 h-10 bg-teal-100 rounded-full flex items-center justify-center">
+              <svg className="w-5 h-5 text-teal-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
+              </svg>
+            </div>
+            <div>
+              <h4 className="text-lg font-semibold text-teal-600 mb-1">Turnaround Time</h4>
+              <p className="text-gray-600 leading-relaxed text-base">21 Days</p>
+            </div>
+          </div>
+
+          {/* Sample Requirement */}
+          <div className="flex items-start gap-4">
+            <div className="flex-shrink-0 w-10 h-10 bg-teal-100 rounded-full flex items-center justify-center">
+              <svg className="w-5 h-5 text-teal-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19.428 15.428a2 2 0 00-1.022-.547l-2.387-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z" />
+              </svg>
+            </div>
+            <div>
+              <h4 className="text-lg font-semibold text-teal-600 mb-2">Sample Requirement</h4>
+              <p className="text-gray-600 leading-relaxed text-base">Blood/Saliva/Cheek Swab/Genomic DNA/Dry Blood Spot</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}

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

@@ -0,0 +1,29 @@
+export default function SolutionsOffer() {
+  const solutions = [
+    {
+      name: "Exome",
+      desc: "Whole Exome Sequencing for uncovering the genetic basis of rare diseases."
+    },
+    {
+      name: "ExomeMito",
+      desc: "Exome + Mitochondrial Genome Sequencing for a higher diagnostic yield."
+    }
+  ];
+
+  return (
+    <section className="mx-auto px-10 pt-12">
+      <h2 className="text-2xl font-semibold text-gray-700 text-left pb-2 mb-4">Our Rare Disease Solutions Offer</h2>
+      <div className="grid sm:grid-cols-2 gap-6">
+        {solutions.map((sol, idx) => (
+          <div
+            key={idx}
+            className="border rounded-lg p-6 hover:shadow-lg transition-shadow cursor-pointer"
+          >
+            <h3 className="text-xl font-semibold text-gray-700 mb-2">{sol.name}</h3>
+            <p className="text-gray-600 leading-relaxed text-base">{sol.desc}</p>
+          </div>
+        ))}
+      </div>
+    </section>
+  );
+}

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

@@ -0,0 +1,22 @@
+export default function WESInfo() {
+  return (
+    <section className="mx-auto px-10 pt-12">
+      <h2 className="text-2xl font-semibold text-gray-700 text-left pb-2 mb-4">
+        Who Should Consider Whole Exome Sequencing (WES)?
+      </h2>
+      <p className="text-gray-600 leading-relaxed text-base mb-4 text-justify">
+        Whole Exome Sequencing (WES) is recommended for individuals with unexplained genetic
+        disorders, complex or atypical clinical presentations, or when prior genetic tests
+        have been inconclusive.
+      </p>
+      <p className="text-gray-600 leading-relaxed text-base mb-4 text-justify">
+        It is especially valuable in diagnosing rare inherited diseases, uncovering the cause
+        of developmental delays, intellectual disabilities, or early-onset neurological
+        conditions, and providing insights for personalized treatment planning.
+      </p>
+      <p className="text-gray-600 leading-relaxed text-base text-justify">
+        WES can help identify genetic causes in a wide range of rare disorders.
+      </p>
+    </section>
+  );
+}