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

app/health/components/HealthIntro.jsx

@@ -0,0 +1,49 @@
+// components/AboutHealth.js
+import Image from "next/image";
+import Link from "next/link";
+
+export default function AboutHealth() {
+  return (
+    <div className="mx-auto px-10 pt-12">
+      {/* Title */}
+      <h1 className="text-4xl font-bold text-gray-700 text-left pb-2 mb-4">About Health</h1>
+
+      {/* Intro Section */}
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-8 items-center mb-12">
+        {/* Left Content */}
+        <div>
+          <p className="text-gray-600 leading-relaxed text-base mb-4 text-justify">
+            At Operify Health, we believe every patient deserves answers that are not only
+            accurate — but actionable. By harnessing the power of Next Generation Sequencing
+            (NGS), we transform patient samples into rich genomic insights that enable
+            clinicians and oncologists to make informed, personalized decisions. From rare
+            genetic disorders to complex oncological cases, our solutions help uncover what
+            traditional diagnostics often miss.
+          </p>
+          <p className="text-gray-600 leading-relaxed text-base mb-4 text-justify">
+            Our strength lies in our multidisciplinary team of researchers, bioinformaticians,
+            and data scientists who use custom-built algorithms and cutting-edge analytics to
+            interpret genetic data with unmatched depth. Backed by curated scientific evidence
+            and real-world clinical findings, we deliver recommendations that are current,
+            relevant, and patient-focused.
+          </p>
+          <p className="text-gray-600 leading-relaxed text-base text-justify">
+            With every genome we decode, we move closer to truly personalized medicine —
+            bridging data and care, science and life.
+          </p>
+        </div>
+
+        {/* Right Image */}
+        <div className="flex justify-center">
+          <Image
+            src="images/health/dna-placeholder.jpg" // Replace with your actual image path in /public
+            alt="DNA Strand"
+            width={500}
+            height={500}
+            className="rounded-lg object-cover"
+          />
+        </div>
+      </div>
+    </div>
+  );
+}

app/health/components/HealthTitle.jsx

@@ -0,0 +1,41 @@
+import React from 'react';
+
+const HealthTitle = () => {
+  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">Career</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">
+          About Health
+        </h1>
+        <div className="w-16 h-1 bg-yellow-400 mx-auto"></div>
+      </div>
+    </section>
+  );
+};
+
+export default HealthTitle;

app/health/oncology/components/CancerKeyFeatures.jsx

@@ -0,0 +1,25 @@
+export default function CancerKeyFeatures() {
+  const features = [
+    { title: "Comprehensive Gene Coverage", desc: "Includes high- and moderate-risk genes such as BRCA1, BRCA2, TP53, MLH1, MSH2, APC, and others." },
+    { title: "Germline Variant Detection", desc: "Accurately detects SNVs, Indels, and selected CNVs in genes associated with inherited cancer risk." },
+    { title: "Family-Centered Testing", desc: "Supports cascade testing for at-risk relatives, enabling early detection and prevention." },
+    { title: "Clinical Actionability", desc: "Provides insights that guide surveillance, preventive measures, and personalized treatment planning." },
+    { title: "High Sensitivity & Specificity", desc: "Uses ≥100X sequencing depth with ≥90% Q30 base quality for reliable variant calling." },
+    { title: "Expert Interpretation & Reporting", desc: "Variants classified using ACMG guidelines, backed by curated literature and clinical databases." },
+    { title: "Genetic Counseling Support", desc: "Optional access to pre- and post-test counseling for patient education and informed decision-making." }
+  ];
+
+  return (
+    <section className="p-10">
+      <h3 className="text-lg font-semibold mb-4">Key Features</h3>
+      <div className="grid md:grid-cols-2 gap-4">
+        {features.map((f, idx) => (
+          <div key={idx} className="border p-4 rounded-lg hover:shadow-lg transition-shadow">
+            <h4 className="font-semibold">{f.title}</h4>
+            <p className="text-gray-600">{f.desc}</p>
+          </div>
+        ))}
+      </div>
+    </section>
+  );
+}

app/health/oncology/components/HereditaryCancerPanel.jsx

@@ -0,0 +1,58 @@
+export default function HereditaryCancerPanel() {
+  const features = [
+    { title: "Comprehensive Gene Coverage", desc: "Includes high- and moderate-risk genes such as BRCA1, BRCA2, TP53, MLH1, MSH2, APC, and others." },
+    { title: "Germline Variant Detection", desc: "Accurately detects SNVs, Indels, and selected CNVs in genes associated with inherited cancer risk." },
+    { title: "Family-Centered Testing", desc: "Supports cascade testing for at-risk relatives, enabling early detection and prevention." },
+    { title: "Clinical Actionability", desc: "Provides insights that guide surveillance, preventive measures, and personalized treatment planning." },
+    { title: "High Sensitivity & Specificity", desc: "Uses ≥100X sequencing depth with ≥90% Q30 base quality for reliable variant calling." },
+    { title: "Expert Interpretation & Reporting", desc: "Variants classified using ACMG guidelines, backed by curated literature and clinical databases." },
+    { title: "Genetic Counseling Support", desc: "Optional access to pre- and post-test counseling for patient education and informed decision-making." }
+  ];
+
+  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 Hereditary Cancer Panel</h2>
+      
+      <div className="mb-8">
+        <p className="text-gray-600 leading-relaxed text-base mb-4 text-justify">
+          <strong>About 5-10% of all cancers are linked to inherited genetic mutations</strong>, often going 
+          undetected until late stages or after multiple family members are affected.
+        </p>
+        <p className="text-gray-600 leading-relaxed text-base mb-4 text-justify">
+          The Operify Hereditary Cancer Panel screens key high- and moderate-risk genes associated 
+          with hereditary cancer syndromes like HBOC, Lynch Syndrome (LS), Li Fraumeni Syndrome (LFS), 
+          Familial Adenomatous Polyposis (FAP), Cowden Syndrome (CS), Peutz-Jeghers Syndrome (PJS), 
+          Neurofibromatosis (NF) etc.
+        </p>
+        <p className="text-gray-600 leading-relaxed text-base mb-4 text-justify">
+          Early identification of germline mutations enables proactive clinical decisions, including 
+          risk-reducing strategies, targeted surveillance, and family cascade testing.
+        </p>
+        <p className="text-gray-600 leading-relaxed text-base text-justify">
+          Studies show that genetic testing in hereditary cancer cases improves outcomes and informs 
+          care for both patients and at-risk relatives.
+        </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-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/oncology/components/OncologyIntro.jsx

@@ -0,0 +1,31 @@
+export default function OncologyIntro() {
+  return (
+    <section className="mx-auto px-10 pt-12">
+      <h1 className="text-4xl font-bold text-gray-700 text-left pb-2 mb-4">Oncology</h1>
+      <h2 className="text-2xl font-semibold text-gray-700 mb-4">Turning Complexity into Clarity</h2>
+      <p className="text-gray-600 leading-relaxed text-base mb-4 text-justify">
+        Cancer is not a single disease—it's a highly complex and dynamic group of disorders, 
+        often driven by a multitude of genomic alterations. Despite advancements in treatment, 
+        many patients still face uncertainty due to incomplete or delayed molecular diagnoses.
+      </p>
+      <p className="text-gray-600 leading-relaxed text-base mb-4 text-justify">
+        At Operify Health, we recognize that behind every tumor is a unique genetic story waiting 
+        to be told. Our precision oncology solutions utilize high-throughput Next Generation 
+        Sequencing (NGS) to analyze both somatic and germline mutations—providing clinicians 
+        with actionable insights that inform targeted therapies, immunotherapy decisions, and 
+        hereditary cancer risk assessments.
+      </p>
+      <p className="text-gray-600 leading-relaxed text-base mb-4 text-justify">
+        This genomic-driven approach is especially critical in advanced and treatment-resistant 
+        cancers, where conventional methods often fall short. Studies have shown that integrating 
+        broad-panel NGS into cancer care can impact clinical decision-making in up to 30% of cases, 
+        leading to more personalized and effective treatment strategies.
+      </p>
+      <p className="text-gray-600 leading-relaxed text-base text-justify">
+        By combining cutting-edge sequencing, advanced bioinformatics, and curated clinical evidence, 
+        Operify Health empowers oncologists to move from uncertainty to precision—ensuring every cancer 
+        patient's care is as individualized as their diagnosis.
+      </p>
+    </section>
+  );
+}

app/health/oncology/components/OncologyTitle.jsx

@@ -0,0 +1,41 @@
+import React from 'react';
+
+const OncologyTitle = () => {
+  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">Oncology</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">
+          Oncology
+        </h1>
+        <div className="w-16 h-1 bg-yellow-400 mx-auto"></div>
+      </div>
+    </section>
+  );
+};
+
+export default OncologyTitle;

app/health/oncology/components/SampleRequirements.jsx

@@ -0,0 +1,12 @@
+export default function SampleRequirements({ title, items }) {
+  return (
+    <section className="p-8">
+      <h3 className="text-lg font-semibold mb-4">Sample Requirements – {title}</h3>
+      <ul className="list-disc list-inside text-gray-700 space-y-2">
+        {items.map((item, idx) => (
+          <li key={idx}>{item}</li>
+        ))}
+      </ul>
+    </section>
+  );
+}