mukeshs/operify
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Health page creation

Browse Source
This commit is contained in:
mukesh13
2025-08-12 11:50:37 +05:30
parent fcffef2883
commit 55b03ef145
62 changed files with 941 additions and 201 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
app/components/Layout/Header.jsx
View File

@ -370,14 +370,32 @@ const Header = () => {
</li>
</ul>
</li>
<li>
<li className="relative group">
<Link
href="/#"
href="/health"
className="font-semibold text-lg py-2 hover:text-teal-700 transition-colors"
style={{ color: '#2a6564' }}
>
Health
</Link>
<ul className="absolute top-full left-0 bg-white shadow-lg rounded-md py-2 w-64 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-300 z-50 border border-gray-100">
<li>
<Link
href="/health/rare-disorders"
className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-teal-600"
>
Rare Disorders
</Link>
</li>
<li>
<Link
href="/health/oncology"
className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-teal-600"
>
Oncology
</Link>
</li>
</ul>
</li>
<li className="relative group">
<Link

56
app/components/shared/DNATitleBar.jsx Normal file
View File

@ -0,0 +1,56 @@
// components/shared/TitleBar.jsx
import React from 'react';
import Link from 'next/link';
const DNATitleBar = ({ title, desc, breadcrumbs, backgroundImage = "/images/bredcrumb.jpg" }) => {
return (
<section
className="relative bg-cover bg-center py-4 sm:py-6 h-auto sm:h-32 md:h-40 lg:h-[10rem] min-h-[120px] sm:min-h-[140px]"
style={{ backgroundImage: `url('${backgroundImage}')` }}
>
{/* Breadcrumb */}
<div className="relative z-10 mb-6 sm:mb-5 pt-2 sm:pt-0 sm:-mt-3 lg:-mt-3">
<div className="container mx-auto max-w-none px-4">
<nav className="flex flex-wrap items-center gap-1 sm:gap-2 text-xs sm:text-sm lg:text-sm">
{breadcrumbs.map((crumb, index) => (
<React.Fragment key={index}>
{crumb.current ? (
<span className="text-white whitespace-nowrap">
{crumb.label}
</span>
) : (
<Link
href={crumb.href}
className="text-white hover:text-yellow-400 underline whitespace-nowrap"
>
{crumb.label}
</Link>
)}
{index < breadcrumbs.length - 1 && (
<span className="text-white flex-shrink-0">
<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>
)}
</React.Fragment>
))}
</nav>
</div>
</div>
{/* Page Title */}
<div className="relative z-10 text-center pb-2 sm:pb-0 sm:-mt-2 lg:mt-2">
<h1 className="text-base sm:text-xl md:text-2xl lg:text-3xl xl:text-4xl font-bold text-white mb-2 px-4 leading-tight">
{title}
</h1>
<h3 className="text-base sm:text-xl md:text-2xl lg:text-3xl xl:text-2xl font-bold text-white mb-2 px-4 leading-tight">
{desc}
</h3>
<div className="w-12 sm:w-14 md:w-16 lg:w-16 h-1 bg-yellow-400 mx-auto"></div>
</div>
</section>
);
};
export default DNATitleBar;

2
app/components/shared/TitleBar.jsx
View File

@ -5,7 +5,7 @@ import Link from 'next/link';
const TitleBar = ({ title, desc, breadcrumbs, backgroundImage = "/images/bredcrumb.jpg" }) => {
return (
<section
className="relative bg-cover bg-center py-4 sm:py-6 h-auto sm:h-32 md:h-40 lg:h-[12rem] min-h-[120px] sm:min-h-[140px]"
className="relative bg-cover bg-center py-4 sm:py-6 h-auto sm:h-32 md:h-40 lg:h-24 min-h-[120px] sm:min-h-[140px]"
style={{ backgroundImage: `url('${backgroundImage}')` }}
>
{/* Breadcrumb */}

4
app/dna-sequencing/enrichment-sequencing/amplicon-sequencing/page.js
View File

@ -1,4 +1,4 @@
import TitleBar from '../../../components/shared/TitleBar';
import DNATitleBar from '../../../components/shared/DNATitleBar';
import AmpliconIntroduction from './components/AmpliconIntroduction';
import AmpliconAdvantages from './components/AmpliconAdvantages';
import AmpliconApplications from './components/AmpliconApplications';
@ -15,7 +15,7 @@ export default function AmpliconSequencingPage() {
return (
<PageLayout fixedHeader={true}>
<TitleBar
<DNATitleBar
title="Amplicon Sequencing (16S/18S/ITS)"
desc="Explore Genetic Diversity at the Molecular Level"
breadcrumbs={breadcrumbs}

4
app/dna-sequencing/enrichment-sequencing/page.js
View File

@ -1,5 +1,5 @@
import PageLayout from '../../components/Layout/PageLayout';
import TitleBar from '../../components/shared/TitleBar';
import DNATitleBar from '../../components/shared/DNATitleBar';
import EnrichmentIntroduction from './components/EnrichmentIntroduction';
import EnrichmentAdvantages from './components/EnrichmentAdvantages';
import EnrichmentSpecifications from './components/EnrichmentSpecifications';
@ -14,7 +14,7 @@ export default function EnrichmentSequencingPage() {
return (
<PageLayout fixedHeader={true}>
<TitleBar
<DNATitleBar
title="Enrichment Sequencing"
desc="Enriched Genome, Enriched Insights"
breadcrumbs={breadcrumbs}

4
app/dna-sequencing/enrichment-sequencing/targeted-sequencing/page.js
View File

@ -1,4 +1,4 @@
import TitleBar from '../../../components/shared/TitleBar';
import DNATitleBar from '../../../components/shared/DNATitleBar';
import TargetedIntroduction from './components/TargetedIntroduction';
import TargetedAdvantages from './components/TargetedAdvantages';
import TargetedApplications from './components/TargetedApplications';
@ -15,7 +15,7 @@ export default function TargetedSequencingPage() {
return (
<PageLayout fixedHeader={true}>
<TitleBar
<DNATitleBar
title="Targeted DNA Sequencing"
desc="Pinpoint Precision for Your Genetic Insights"
breadcrumbs={breadcrumbs}

4
app/dna-sequencing/enrichment-sequencing/whole-exome/page.js
View File

@ -1,5 +1,5 @@
// app/dna-sequencing/enrichment-sequencing/whole-exome/page.js
import TitleBar from '../../../components/shared/TitleBar';
import DNATitleBar from '../../../components/shared/DNATitleBar';
import ExomeIntroduction from './components/ExomeIntroduction';
import ExomeAdvantages from './components/ExomeAdvantages';
import ExomeApplications from './components/ExomeApplications';
@ -17,7 +17,7 @@ export default function WholeExomeSequencingPage() {
return (
<PageLayout fixedHeader={true}>
<div className="page-wrapper">
<TitleBar
<DNATitleBar
title="Whole Exome Sequencing"
desc="Focused Insights, Comprehensive Impact"
breadcrumbs={breadcrumbs}

4
app/dna-sequencing/epigenomics-sequencing/atac-sequencing/page.js
View File

@ -1,4 +1,4 @@
import TitleBar from '../../../components/shared/TitleBar';
import DNATitleBar from '../../../components/shared/DNATitleBar';
import ATACIntroduction from './components/ATACIntroduction';
import ATACAdvantages from './components/ATACAdvantages';
import ATACBioinformatics from './components/ATACBioinformatics';
@ -16,7 +16,7 @@ export default function ATACSequencingPage() {
return (
<PageLayout fixedHeader={true}>
<TitleBar
<DNATitleBar
title="ATAC (Assay for Transposase-Accessible Chromatin) Sequencing"
desc="Chromatin for Gene Regulation Insights"
breadcrumbs={breadcrumbs}

4
app/dna-sequencing/epigenomics-sequencing/chip-sequencing/page.js
View File

@ -1,4 +1,4 @@
import TitleBar from '../../../components/shared/TitleBar';
import DNATitleBar from '../../../components/shared/DNATitleBar';
import ChIPIntroduction from './components/ChIPIntroduction';
import ChIPAdvantages from './components/ChIPAdvantages';
import ChIPBioinformatics from './components/ChIPBioinformatics';
@ -16,7 +16,7 @@ export default function ChIPSequencingPage() {
return (
<PageLayout fixedHeader={true}>
<TitleBar
<DNATitleBar
title="ChIP (Chromatin immunoprecipitation) Sequencing"
desc="Dissecting Gene Regulation with ChIP-Seq"
breadcrumbs={breadcrumbs}

4
app/dna-sequencing/epigenomics-sequencing/page.js
View File

@ -1,4 +1,4 @@
import TitleBar from '../../components/shared/TitleBar';
import DNATitleBar from '../../components/shared/DNATitleBar';
import EpigenomicsIntroduction from './components/EpigenomicsIntroduction';
import EpigenomicsAdvantages from './components/EpigenomicsAdvantages';
import EpigenomicsSpecifications from './components/EpigenomicsSpecifications';
@ -14,7 +14,7 @@ export default function EpigenomicsSequencingPage() {
return (
<PageLayout fixedHeader={true}>
<TitleBar
<DNATitleBar
title="Epigenomics Sequencing"
desc="Explore Cellular Memory"
breadcrumbs={breadcrumbs}

4
app/dna-sequencing/epigenomics-sequencing/wgbs/page.js
View File

@ -1,4 +1,4 @@
import TitleBar from '../../../components/shared/TitleBar';
import DNATitleBar from '../../../components/shared/DNATitleBar';
import WGBSIntroduction from './components/WGBSIntroduction';
import WGBSAdvantages from './components/WGBSAdvantages';
import WGBSBioinformatics from './components/WGBSBioinformatics';
@ -16,7 +16,7 @@ export default function WGBSPage() {
return (
<PageLayout fixedHeader={true}>
<TitleBar
<DNATitleBar
title="Whole Genome Bisulphite Sequencing (WGBS)"
desc="Comprehensive DNA Methylation Profiling"
breadcrumbs={breadcrumbs}

4
app/dna-sequencing/genome-mapping/hi-c-mapping/page.js
View File

@ -1,5 +1,5 @@
// app/dna-sequencing/genome-mapping/hi-c-mapping/page.js
import TitleBar from '../../../components/shared/TitleBar';
import DNATitleBar from '../../../components/shared/DNATitleBar';
import HiCMappingIntroduction from './components/HiCMappingIntroduction';
import HiCMappingAdvantages from './components/HiCMappingAdvantages';
import HiCMappingApplications from './components/HiCMappingApplications';
@ -39,7 +39,7 @@ export default function HiCMappingPage() {
return (
<PageLayout fixedHeader={true}>
{/* Title Bar */}
<TitleBar
<DNATitleBar
title="High-throughput Chromosome Conformation Capture (Hi-C) Mapping"
desc="Unravel the 3D Genome"
breadcrumbs={breadcrumbs}

4
app/dna-sequencing/genome-mapping/optical-mapping/page.js
View File

@ -1,5 +1,5 @@
// app/dna-sequencing/genome-mapping/optical-mapping/page.js
import TitleBar from '../../../components/shared/TitleBar';
import DNATitleBar from '../../../components/shared/DNATitleBar';
import OpticalMappingIntroduction from './components/OpticalMappingIntroduction';
import OpticalMappingAdvantages from './components/OpticalMappingAdvantages';
import OpticalMappingApplications from './components/OpticalMappingApplications';
@ -39,7 +39,7 @@ export default function OpticalMappingPage() {
return (
<PageLayout fixedHeader={true}>
{/* Title Bar */}
<TitleBar
<DNATitleBar
title="Optical Mapping"
desc="Dissecting Gene Regulation with Advanced Optical Mapping"
breadcrumbs={breadcrumbs}

4
app/dna-sequencing/genome-mapping/page.js
View File

@ -1,5 +1,5 @@
// app/dna-sequencing/genome-mapping/page.js
import TitleBar from '../../components/shared/TitleBar';
import DNATitleBar from '../../components/shared/DNATitleBar';
import GenomeMappingIntroduction from './components/GenomeMappingIntroduction';
import GenomeMappingAdvantages from './components/GenomeMappingAdvantages';
import GenomeMappingPipeline from './components/GenomeMappingPipeline';
@ -34,7 +34,7 @@ export default function GenomeMappingPage() {
return (
<PageLayout fixedHeader={true}>
{/* Title Bar */}
<TitleBar
<DNATitleBar
title="Genome Mapping"
desc="Unlocking Genomic Secrets, One Map at a Time"
breadcrumbs={breadcrumbs}

4
app/dna-sequencing/hybrid-genome-sequencing/page.js
View File

@ -1,5 +1,5 @@
// app/dna-sequencing/snp-genotyping/page.js
import TitleBar from '../../components/shared/TitleBar';
import DNATitleBar from '../../components/shared/DNATitleBar';
import HybridIntroduction from './components/HybridIntroduction';
import HybridAdvantages from './components/HybridAdvantages';
// import HybridSequencingPipeline from './components/HybridSequencingPipeline'
@ -35,7 +35,7 @@ export default function HybridGenomeSequencingPage() {
return (
<PageLayout fixedHeader={true}>
{/* Title Bar */}
<TitleBar
<DNATitleBar
title="Hybrid Genome Sequencing"
desc="Unifying Technologies for Deeper Genomic Clarity"
breadcrumbs={breadcrumbs}

4
app/dna-sequencing/long-read-sequencing/page.js
View File

@ -1,4 +1,4 @@
import TitleBar from '../../components/shared/TitleBar';
import DNATitleBar from '../../components/shared/DNATitleBar';
import LongReadIntroduction from './components/LongReadIntroduction';
import LongReadComparison from './components/LongReadComparison';
import LongReadNanopore from './components/LongReadNanopore';
@ -17,7 +17,7 @@ export default function LongReadSequencingPage() {
return (
<PageLayout fixedHeader={true}>
<TitleBar
<DNATitleBar
title="Whole Genome Long Read Sequencing"
desc="Sequencing the Complete Genome, Long and Clear"
breadcrumbs={breadcrumbs}

4
app/dna-sequencing/metagenomics-sequencing/page.js
View File

@ -1,5 +1,5 @@
// app/dna-sequencing/metagenomics-sequencing/page.js
import TitleBar from '../../components/shared/TitleBar';
import DNATitleBar from '../../components/shared/DNATitleBar';
import MetagenomicsIntroduction from './components/MetagenomicsIntroduction';
import MetagenomicsAdvantages from './components/MetagenomicsAdvantages';
import MetagenomicsApplications from './components/MetagenomicsApplications';
@ -35,7 +35,7 @@ export default function MetagenomicsSequencingPage() {
return (
<PageLayout fixedHeader={true}>
{/* Title Bar */}
<TitleBar
<DNATitleBar
title="Metagenomics Sequencing"
desc="Exploring Earth's Microbial Frontiers from Soil to Ocean"
breadcrumbs={breadcrumbs}

4
app/dna-sequencing/microsatellites-ssr-str/page.js
View File

@ -1,5 +1,5 @@
// app/dna-sequencing/microsatellites-ssr-str/page.js
import TitleBar from '../../components/shared/TitleBar';
import DNATitleBar from '../../components/shared/DNATitleBar';
import MicrosatellitesIntroduction from './components/MicrosatellitesIntroduction';
import MicrosatellitesAdvantages from './components/MicrosatellitesAdvantages';
import MicrosatellitesApplications from './components/MicrosatellitesApplications';
@ -34,7 +34,7 @@ export default function MicrosatellitesSSRSTRPage() {
return (
<PageLayout fixedHeader={true}>
{/* Title Bar */}
<TitleBar
<DNATitleBar
title="Microsatellites (SSR/STR)"
desc="Empowering Research with Microsatellite Markers"
breadcrumbs={breadcrumbs}

4
app/dna-sequencing/single-cell-dna-sequencing/page.js
View File

@ -1,5 +1,5 @@
// app/dna-sequencing/single-cell-dna-sequencing/page.js
import TitleBar from '../../components/shared/TitleBar';
import DNATitleBar from '../../components/shared/DNATitleBar';
import SingleCellIntroduction from './components/SingleCellIntroduction';
import SingleCellAdvantages from './components/SingleCellAdvantages';
import SingleCellApplications from './components/SingleCellApplications';
@ -35,7 +35,7 @@ export default function SingleCellDNASequencingPage() {
return (
<PageLayout fixedHeader={true}>
{/* Title Bar */}
<TitleBar
<DNATitleBar
title="Single Cell DNA Sequencing"
desc="Mapping Genetic Diversity Cell by Cell"
breadcrumbs={breadcrumbs}

4
app/dna-sequencing/snp-genotyping/page.js
View File

@ -1,5 +1,5 @@
// app/dna-sequencing/snp-genotyping/page.js
import TitleBar from '../../components/shared/TitleBar';
import DNATitleBar from '../../components/shared/DNATitleBar';
import SNPIntroduction from './components/SNPIntroduction';
import SNPAdvantages from './components/SNPAdvantages';
import SNPApplications from './components/SNPApplications';
@ -16,7 +16,7 @@ export default function SNPGenotypingPage() {
return (
<PageLayout fixedHeader={true}>
<div className="page-wrapper">
<TitleBar
<DNATitleBar
title="SNP-based Genotyping"
desc="From Genomes to Traits: Precision through SNPs"
breadcrumbs={breadcrumbs}

4
app/dna-sequencing/whole-genome-sequencing/denovo/page.js
View File

@ -1,4 +1,4 @@
import TitleBar from '../../../components/shared/TitleBar';
import DNATitleBar from '../../../components/shared/DNATitleBar';
import DenovoIntroduction from './components/DenovoIntroduction';
import DenovoAdvantages from './components/DenovoAdvantages';
import DenovoApplications from './components/DenovoApplications';
@ -16,7 +16,7 @@ export default function WholeGenomeDenovoPage() {
return (
<PageLayout fixedHeader={true}>
<TitleBar
<DNATitleBar
title="Whole Genome Denovo Sequencing"
desc="Unlocking Genomes, Discovering Diversity"
breadcrumbs={breadcrumbs}

4
app/dna-sequencing/whole-genome-sequencing/page.js
View File

@ -1,5 +1,5 @@
// app/dna-sequencing/whole-genome-sequencing/page.js (Updated)
import TitleBar from '../../components/shared/TitleBar';
import DNATitleBar from '../../components/shared/DNATitleBar';
import WGSIntroduction from './components/WGSIntroduction';
import WGSAdvantages from './components/WGSAdvantages';
import WGSSpecifications from './components/WGSSpecifications';
@ -14,7 +14,7 @@ export default function WholeGenomeSequencingPage() {
return (
<PageLayout fixedHeader={true}>
<TitleBar
<DNATitleBar
title="Whole Genome Sequencing"
desc="Whole Genome, Whole Insights"
breadcrumbs={breadcrumbs}

4
app/dna-sequencing/whole-genome-sequencing/resequencing/page.js
View File

@ -1,4 +1,4 @@
import TitleBar from '../../../components/shared/TitleBar';
import DNATitleBar from '../../../components/shared/DNATitleBar';
import ResequencingIntroduction from './components/ResequencingIntroduction';
import ResequencingAdvantages from './components/ResequencingAdvantages';
import ResequencingApplications from './components/ResequencingApplications';
@ -16,7 +16,7 @@ export default function WholeGenomeResequencingPage() {
return (
<PageLayout fixedHeader={true}>
<TitleBar
<DNATitleBar
title="Whole Genome ReSequencing"
desc="Unraveling Genomic Complexity with Re-Sequencing"
breadcrumbs={breadcrumbs}

71
app/health/Components/ClinicalAreas.jsx Normal file
View File

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

49
app/health/Components/HealthIntro.jsx Normal file
View File

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

41
app/health/Components/HealthTitle.jsx Normal file
View File

@ -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;

25
app/health/oncology/Components/CancerKeyFeatures.jsx Normal file
View File

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

58
app/health/oncology/Components/HereditaryCancerPanel.jsx Normal file
View File

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

31
app/health/oncology/Components/OncologyIntro.jsx Normal file
View File

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

41
app/health/oncology/Components/OncologyTitle.jsx Normal file
View File

@ -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;

12
app/health/oncology/Components/SampleRequirements.jsx Normal file
View File

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

27
app/health/oncology/page.js Normal file
View File

@ -0,0 +1,27 @@
import OncologyTitle from './components/OncologyTitle';
import OncologyIntro from './components/OncologyIntro';
import HereditaryCancerPanel from './components/HereditaryCancerPanel';
import SampleRequirements from '../rare-disorders/components/SampleRequirements';
import PageLayout from '../../components/Layout/PageLayout';
export default function OncologyPage() {
return (
<PageLayout fixedHeader={true}>
{/* Page Title */}
<OncologyTitle />
{/* Intro */}
<OncologyIntro />
{/* Hereditary Cancer Panel */}
<HereditaryCancerPanel />
{/* Sample Requirements */}
<SampleRequirements/>
</PageLayout>
);
}

21
app/health/page.js Normal file
View File

@ -0,0 +1,21 @@
import HealthTitle from './components/HealthTitle';
import HealthIntro from './Components/HealthIntro';
import ClinicalAreas from './Components/ClinicalAreas';
import PageLayout from '../components/Layout/PageLayout';
export default function HealthPage() {
const breadcrumbs = [
{ label: 'Home', href: '/', current: false },
{ label: 'Health', href: '/health', current: false }
];
return (
<PageLayout fixedHeader={true}>
<HealthTitle/>
<HealthIntro />
<ClinicalAreas />
</PageLayout>
);
}

40
app/health/rare-disorders/components/ClinicalAreasGrid.jsx Normal file
View File

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

56
app/health/rare-disorders/components/OperifyExome.jsx Normal file
View File

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

93
app/health/rare-disorders/components/OperifyExomeMito.jsx Normal file
View File

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

18
app/health/rare-disorders/components/RareIntro.jsx Normal file
View File

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

41
app/health/rare-disorders/components/RareTitle.jsx Normal file
View File

@ -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;

37
app/health/rare-disorders/components/SampleRequirements.jsx Normal file
View File

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

29
app/health/rare-disorders/components/SolutionsOffer.jsx Normal file
View File

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

22
app/health/rare-disorders/components/WESInfo.jsx Normal file
View File

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

52
app/health/rare-disorders/page.js Normal file
View File

@ -0,0 +1,52 @@
import RareTitle from './components/RareTitle';
import RareIntro from './components/RareIntro';
import ClinicalAreasGrid from './components/ClinicalAreasGrid';
import SolutionsOffer from './components/SolutionsOffer';
import WESInfo from './components/WESInfo';
import OperifyExome from './components/OperifyExome';
import OperifyExomeMito from './components/OperifyExomeMito';
import SampleRequirements from './components/SampleRequirements';
import PageLayout from '../../components/Layout/PageLayout';
export default function RareDisorderPage() {
return (
<PageLayout fixedHeader={true}>
{/* Page Title */}
<RareTitle />
{/* Intro Paragraph */}
<RareIntro />
{/* Solutions Offered */}
<SolutionsOffer />
{/* WES Info */}
<WESInfo />
{/* Clinical Areas Grid */}
<ClinicalAreasGrid />
{/* Operify Exome */}
<OperifyExome />
<SampleRequirements
title="Operify Exome"
items={[
"2-5 mL peripheral blood in EDTA tube",
"High-quality extracted DNA (minimum 2 µg)",
"Fresh or frozen tissue for certain cases"
]}
/>
{/* Operify ExomeMito */}
<OperifyExomeMito />
<SampleRequirements
title="Operify ExomeMito"
items={[
"2-5 mL peripheral blood in EDTA tube",
"High-quality extracted DNA (minimum 2 µg)",
"Fresh or frozen tissue for certain cases"
]}
/>
</PageLayout>
);
}

4
app/rna-sequencing/circular-rna-sequencing/page.js
View File

@ -1,7 +1,7 @@
import TitleBar from '../../components/shared/TitleBar';
import PageLayout from '../../components/Layout/PageLayout'
import CircularIntroduction from './components/CircularIntroduction';
// import CircularRNAPipeline from './components/CircularRNAPipeline';
import CircularRNAPipeline from './components/CircularRNAPipeline';
import CircularAdvantages from './components/CircularAdvantages';
import CircularApplications from './components/CircularApplications';
import CircularSpecifications from './components/CircularSpecifications';
@ -21,7 +21,7 @@ export default function CircularRNASequencingPage() {
/>
<CircularIntroduction />
<CircularAdvantages />
{/* <CircularRNAPipeline/> */}
<CircularRNAPipeline/>
<CircularApplications />
<CircularSpecifications />
</PageLayout>

107
app/rna-sequencing/mrna-sequencing/components/MRNAPipeline.jsx
View File

@ -1,98 +1,49 @@
import React from 'react';
import { ArrowDown, ArrowRight, ArrowUp } from 'lucide-react';
const MRNAPipeline = ({
title = "Bioinformatics Pipeline",
leftSteps = [
"Raw Sequencing Data (fastq files)",
"Quality Control and Preprocessing of Data",
"High Quality Sequencing Data (fastq file)",
"Alignment to Reference Genome",
"Transcript Assembly"
],
rightSteps = [
"Downstream Analysis",
"Differential Expression Profiling",
"Annotation",
"Transcript Expression Profiling",
"Transcript Assembly Validation"
],
svgContent = null, // Pass your SVG content here as JSX
svgUrl = "/images/flowchart/mrna.svg",
backgroundColor = "bg-gray-50",
cardColor = "bg-gray-300",
textColor = "text-teal-600",
arrowColor = "text-gray-600",
textColor = "text-gray-700",
className = "",
cardClassName = "",
titleClassName = ""
titleClassName = "",
svgClassName = "",
containerClassName = ""
}) => {
// Combine steps for mobile layout
const mobileSteps = [...leftSteps, ...rightSteps.slice().reverse()];
return (
<section className={`py-6 sm:py-8 lg:py-12 ${backgroundColor} ${className}`}>
<div className="container mx-auto max-w-none px-3 sm:px-4 lg:px-6">
<h2 className={`text-gray-700 text-left pb-4 sm:pb-6 text-xl sm:text-2xl lg:text-3xl font-normal ${titleClassName}`}>
<div className={`container mx-auto max-w-none px-3 sm:px-4 lg:px-6 ${containerClassName}`}>
<h2 className={`${textColor} text-left pb-4 sm:pb-6 text-xl sm:text-2xl lg:text-3xl font-normal ${titleClassName}`}>
{title}
</h2>
{/* Pipeline Flowchart */}
{/* SVG Flowchart Container */}
<div className="bg-white rounded-xl shadow-lg p-4 sm:p-6 lg:p-8">
<div className="flex justify-center">
<div className="w-full max-w-5xl">
<div className="relative">
{/* Mobile Layout - Single Column */}
<div className="block sm:hidden">
<div className="flex flex-col items-center space-y-3">
{mobileSteps.map((step, index) => (
<React.Fragment key={index}>
<div className={`${cardColor} rounded-lg p-3 w-full text-center border ${cardClassName}`}>
<h3 className={`text-xs font-medium ${textColor}`}>{step}</h3>
</div>
{index < mobileSteps.length - 1 && (
<ArrowDown className={`w-5 h-5 ${arrowColor}`} />
)}
</React.Fragment>
))}
</div>
</div>
{/* Desktop Layout - Two Columns */}
<div className="hidden sm:block">
<div className="grid grid-cols-2 gap-4 sm:gap-6 lg:gap-8">
{/* Left Column */}
<div className="flex flex-col items-center space-y-3">
{leftSteps.map((step, index) => (
<React.Fragment key={index}>
<div className={`${cardColor} rounded-lg p-4 w-full text-center border ${cardClassName}`} style={{maxWidth: '19rem'}}>
<h3 className={`text-sm font-medium ${textColor}`}>{step}</h3>
</div>
{index < leftSteps.length - 1 && (
<ArrowDown className={`w-6 h-6 ${arrowColor}`} />
)}
</React.Fragment>
))}
</div>
{/* Right Column */}
<div className="flex flex-col items-center space-y-3">
{rightSteps.map((step, index) => (
<React.Fragment key={index}>
<div className={`${cardColor} rounded-lg p-4 w-full text-center border ${cardClassName}`} style={{maxWidth: '19rem'}}>
<h3 className={`text-sm font-medium ${textColor}`}>{step}</h3>
</div>
{index < rightSteps.length - 1 && (
<ArrowUp className={`w-6 h-6 ${arrowColor}`} />
)}
</React.Fragment>
))}
<div className="w-full max-w-6xl">
{/* SVG Container with responsive sizing */}
<div className={`w-full ${svgClassName}`}>
{svgUrl ? (
// If SVG URL/path is provided
<img
src={svgUrl}
alt="Flowchart diagram"
className="w-full h-auto object-contain"
/>
) : svgContent ? (
// If SVG content is provided as JSX
<div className="w-full">
<div className="w-full">
{svgContent}
</div>
</div>
{/* Horizontal Arrow from Transcript Assembly to Transcript Assembly Validation */}
<div className="absolute bottom-4 left-1/2 transform -translate-x-1/2 flex items-center justify-center">
<ArrowRight className={`w-8 h-8 ${arrowColor}`} />
) : (
// Fallback message
<div className="flex items-center justify-center h-40 text-gray-500">
<p>Please provide SVG content or URL</p>
</div>
</div>
)}
</div>
</div>
</div>

107
app/rna-sequencing/single-cell-rna-sequencing/components/SingleCellPipeline.jsx
View File

@ -1,98 +1,49 @@
import React from 'react';
import { ArrowDown, ArrowRight, ArrowUp } from 'lucide-react';
const SingleCellPipeline = ({
title = "Bioinformatics Pipeline",
leftSteps = [
"Raw Sequencing Data (fastq files)",
"Quality Control and Preprocessing of Data",
"High Quality Sequencing Data (fastq file)",
"Alignment to Reference Genome",
"Transcript and Gene Expression Profiling"
],
rightSteps = [
"Downstream Advanced Analysis",
"GO/KEGG Enrichment",
"Differential Expression Profiling",
"Cell Clustering Cell definition (SingleR)",
"Cell filter and Data Normalisation"
],
svgContent = null, // Pass your SVG content here as JSX
svgUrl = "/images/flowchart/singlecellrna.svg",
backgroundColor = "bg-gray-50",
cardColor = "bg-gray-300",
textColor = "text-teal-600",
arrowColor = "text-gray-600",
textColor = "text-gray-700",
className = "",
cardClassName = "",
titleClassName = ""
titleClassName = "",
svgClassName = "",
containerClassName = ""
}) => {
// Combine steps for mobile layout
const mobileSteps = [...leftSteps, ...rightSteps.slice().reverse()];
return (
<section className={`py-6 sm:py-8 lg:py-12 ${backgroundColor} ${className}`}>
<div className="container mx-auto max-w-none px-3 sm:px-4 lg:px-6">
<h2 className={`text-gray-700 text-left pb-4 sm:pb-6 text-xl sm:text-2xl lg:text-3xl font-normal ${titleClassName}`}>
<div className={`container mx-auto max-w-none px-3 sm:px-4 lg:px-6 ${containerClassName}`}>
<h2 className={`${textColor} text-left pb-4 sm:pb-6 text-xl sm:text-2xl lg:text-3xl font-normal ${titleClassName}`}>
{title}
</h2>
{/* Pipeline Flowchart */}
{/* SVG Flowchart Container */}
<div className="bg-white rounded-xl shadow-lg p-4 sm:p-6 lg:p-8">
<div className="flex justify-center">
<div className="w-full max-w-5xl">
<div className="relative">
{/* Mobile Layout - Single Column */}
<div className="block sm:hidden">
<div className="flex flex-col items-center space-y-3">
{mobileSteps.map((step, index) => (
<React.Fragment key={index}>
<div className={`${cardColor} rounded-lg p-3 w-full text-center border ${cardClassName}`}>
<h3 className={`text-xs font-medium ${textColor}`}>{step}</h3>
</div>
{index < mobileSteps.length - 1 && (
<ArrowDown className={`w-5 h-5 ${arrowColor}`} />
)}
</React.Fragment>
))}
</div>
</div>
{/* Desktop Layout - Two Columns */}
<div className="hidden sm:block">
<div className="grid grid-cols-2 gap-4 sm:gap-6 lg:gap-8">
{/* Left Column */}
<div className="flex flex-col items-center space-y-3">
{leftSteps.map((step, index) => (
<React.Fragment key={index}>
<div className={`${cardColor} rounded-lg p-4 w-full text-center border ${cardClassName}`} style={{maxWidth: '19rem'}}>
<h3 className={`text-sm font-medium ${textColor}`}>{step}</h3>
</div>
{index < leftSteps.length - 1 && (
<ArrowDown className={`w-6 h-6 ${arrowColor}`} />
)}
</React.Fragment>
))}
</div>
{/* Right Column */}
<div className="flex flex-col items-center space-y-3">
{rightSteps.map((step, index) => (
<React.Fragment key={index}>
<div className={`${cardColor} rounded-lg p-4 w-full text-center border ${cardClassName}`} style={{maxWidth: '19rem'}}>
<h3 className={`text-sm font-medium ${textColor}`}>{step}</h3>
</div>
{index < rightSteps.length - 1 && (
<ArrowUp className={`w-6 h-6 ${arrowColor}`} />
)}
</React.Fragment>
))}
<div className="w-full max-w-6xl">
{/* SVG Container with responsive sizing */}
<div className={`w-full ${svgClassName}`}>
{svgUrl ? (
// If SVG URL/path is provided
<img
src={svgUrl}
alt="Flowchart diagram"
className="w-full h-auto object-contain"
/>
) : svgContent ? (
// If SVG content is provided as JSX
<div className="w-full">
<div className="w-full">
{svgContent}
</div>
</div>
{/* Horizontal Arrow from Transcript Assembly to Transcript Assembly Validation */}
<div className="absolute bottom-28 left-1/2 transform -translate-x-1/2 flex items-center justify-center">
<ArrowRight className={`w-8 h-8 ${arrowColor}`} />
) : (
// Fallback message
<div className="flex items-center justify-center h-40 text-gray-500">
<p>Please provide SVG content or URL</p>
</div>
</div>
)}
</div>
</div>
</div>

BIN
public/images/health/dna-placeholder.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 14 KiB

BIN
public/images/icons/cardio.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 19 KiB

BIN
public/images/icons/dermatology.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 21 KiB

BIN
public/images/icons/disorder.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 23 KiB

BIN
public/images/icons/dysmorphology.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 17 KiB

BIN
public/images/icons/endocrinology.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 19 KiB

BIN
public/images/icons/ent.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 13 KiB

BIN
public/images/icons/hematology.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 26 KiB

BIN
public/images/icons/immunology.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 24 KiB

BIN
public/images/icons/metabolic.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 12 KiB

BIN
public/images/icons/nephrology.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 19 KiB

BIN
public/images/icons/neurology.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 21 KiB

BIN
public/images/icons/oncology.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 17 KiB

BIN
public/images/icons/ophthalmology.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 31 KiB

BIN
public/images/icons/osteology.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 21 KiB

BIN
public/images/icons/pneumology.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 24 KiB

BIN
public/images/icons/reproductive.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 27 KiB