diff --git a/app/components/Layout/Header.jsx b/app/components/Layout/Header.jsx index 0e1aa8a..6ad9460 100644 --- a/app/components/Layout/Header.jsx +++ b/app/components/Layout/Header.jsx @@ -370,14 +370,32 @@ const Header = () => { -
  • +
  • Health +
  • { + return ( +
    + {/* Breadcrumb */} +
    +
    + +
    +
    + + {/* Page Title */} +
    +

    + {title} +

    +

    + {desc} +

    +
    +
    +
    + ); +}; + +export default DNATitleBar; \ No newline at end of file diff --git a/app/components/shared/TitleBar.jsx b/app/components/shared/TitleBar.jsx index b3f4b9b..fcc796a 100644 --- a/app/components/shared/TitleBar.jsx +++ b/app/components/shared/TitleBar.jsx @@ -5,7 +5,7 @@ import Link from 'next/link'; const TitleBar = ({ title, desc, breadcrumbs, backgroundImage = "/images/bredcrumb.jpg" }) => { return (
    {/* Breadcrumb */} diff --git a/app/dna-sequencing/enrichment-sequencing/amplicon-sequencing/page.js b/app/dna-sequencing/enrichment-sequencing/amplicon-sequencing/page.js index 1a9f461..c68e05a 100644 --- a/app/dna-sequencing/enrichment-sequencing/amplicon-sequencing/page.js +++ b/app/dna-sequencing/enrichment-sequencing/amplicon-sequencing/page.js @@ -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 ( - - -
    - - - - - {/* Title Bar */} - {/* Title Bar */} - {/* Title Bar */} - {/* Title Bar */} - - {/* Title Bar */} - {/* Title Bar */} - {/* Title Bar */} -
    - - - - + {/* Heading */} +

    + Precise Solutions for Clinical Areas +

    + + {/* Subtext */} +

    + Empowering you with precise, tailored approaches to diagnostics and care — + addressing the unique needs of each clinical area to improve patient outcomes. +

    + + {/* Cards */} +
    + {/* Rare Disorders */} + +
    +
    + {/* Icon */} +
    + Rare Disorders +
    +
    +

    Rare Disorders

    +

    + Advancing diagnostics and treatments for rare genetic conditions. +

    +
    +
    +
    + + + {/* Oncology */} + +
    +
    + {/* Icon */} +
    + Oncology +
    +
    +

    Oncology

    +

    + Revolutionizing cancer care with targeted therapies and early detection. +

    +
    +
    +
    + +
    +
    + ); +} \ No newline at end of file diff --git a/app/health/Components/HealthIntro.jsx b/app/health/Components/HealthIntro.jsx new file mode 100644 index 0000000..b014870 --- /dev/null +++ b/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 ( +
    + {/* Title */} +

    About Health

    + + {/* Intro Section */} +
    + {/* Left Content */} +
    +

    + 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. +

    +

    + 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. +

    +

    + With every genome we decode, we move closer to truly personalized medicine — + bridging data and care, science and life. +

    +
    + + {/* Right Image */} +
    + DNA Strand +
    +
    +
    + ); +} \ No newline at end of file diff --git a/app/health/Components/HealthTitle.jsx b/app/health/Components/HealthTitle.jsx new file mode 100644 index 0000000..74cc12e --- /dev/null +++ b/app/health/Components/HealthTitle.jsx @@ -0,0 +1,41 @@ +import React from 'react'; + +const HealthTitle = () => { + return ( +
    + {/* Breadcrumb */} +
    +
    + +
    +
    + + {/* Page Title */} +
    +

    + About Health +

    +
    +
    +
    + ); +}; + +export default HealthTitle; \ No newline at end of file diff --git a/app/health/oncology/Components/CancerKeyFeatures.jsx b/app/health/oncology/Components/CancerKeyFeatures.jsx new file mode 100644 index 0000000..d1b93e9 --- /dev/null +++ b/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 ( +
    +

    Key Features

    +
    + {features.map((f, idx) => ( +
    +

    {f.title}

    +

    {f.desc}

    +
    + ))} +
    +
    + ); +} diff --git a/app/health/oncology/Components/HereditaryCancerPanel.jsx b/app/health/oncology/Components/HereditaryCancerPanel.jsx new file mode 100644 index 0000000..1f0f1cd --- /dev/null +++ b/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 ( +
    +

    Operify Hereditary Cancer Panel

    + +
    +

    + About 5-10% of all cancers are linked to inherited genetic mutations, often going + undetected until late stages or after multiple family members are affected. +

    +

    + 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. +

    +

    + Early identification of germline mutations enables proactive clinical decisions, including + risk-reducing strategies, targeted surveillance, and family cascade testing. +

    +

    + Studies show that genetic testing in hereditary cancer cases improves outcomes and informs + care for both patients and at-risk relatives. +

    +
    + +

    Key Features

    +
    + + + + + + + + + {features.map((feature, idx) => ( + + + + + ))} + +
    FeatureDescription
    {feature.title}{feature.desc}
    +
    +
    + ); +} \ No newline at end of file diff --git a/app/health/oncology/Components/OncologyIntro.jsx b/app/health/oncology/Components/OncologyIntro.jsx new file mode 100644 index 0000000..448bda3 --- /dev/null +++ b/app/health/oncology/Components/OncologyIntro.jsx @@ -0,0 +1,31 @@ +export default function OncologyIntro() { + return ( +
    +

    Oncology

    +

    Turning Complexity into Clarity

    +

    + 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. +

    +

    + 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. +

    +

    + 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. +

    +

    + 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. +

    +
    + ); +} \ No newline at end of file diff --git a/app/health/oncology/Components/OncologyTitle.jsx b/app/health/oncology/Components/OncologyTitle.jsx new file mode 100644 index 0000000..e1c629c --- /dev/null +++ b/app/health/oncology/Components/OncologyTitle.jsx @@ -0,0 +1,41 @@ +import React from 'react'; + +const OncologyTitle = () => { + return ( +
    + {/* Breadcrumb */} +
    +
    + +
    +
    + + {/* Page Title */} +
    +

    + Oncology +

    +
    +
    +
    + ); +}; + +export default OncologyTitle; \ No newline at end of file diff --git a/app/health/oncology/Components/SampleRequirements.jsx b/app/health/oncology/Components/SampleRequirements.jsx new file mode 100644 index 0000000..7bbdf95 --- /dev/null +++ b/app/health/oncology/Components/SampleRequirements.jsx @@ -0,0 +1,12 @@ +export default function SampleRequirements({ title, items }) { + return ( +
    +

    Sample Requirements – {title}

    +
      + {items.map((item, idx) => ( +
    • {item}
      • + ))} +
    +
    + ); +} diff --git a/app/health/oncology/page.js b/app/health/oncology/page.js new file mode 100644 index 0000000..060f9c9 --- /dev/null +++ b/app/health/oncology/page.js @@ -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 ( + + {/* Page Title */} + + + {/* Intro */} + + + {/* Hereditary Cancer Panel */} + + + + + {/* Sample Requirements */} + + + ); +} diff --git a/app/health/page.js b/app/health/page.js new file mode 100644 index 0000000..466b571 --- /dev/null +++ b/app/health/page.js @@ -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 ( + + + + + + + ); +} \ No newline at end of file diff --git a/app/health/rare-disorders/components/ClinicalAreasGrid.jsx b/app/health/rare-disorders/components/ClinicalAreasGrid.jsx new file mode 100644 index 0000000..0752080 --- /dev/null +++ b/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 ( +
    +

    Clinical Areas

    +
    + {areas.map((area, idx) => ( +
    + {area.name} + {area.name} +
    + ))} +
    +
    + ); +} \ No newline at end of file diff --git a/app/health/rare-disorders/components/OperifyExome.jsx b/app/health/rare-disorders/components/OperifyExome.jsx new file mode 100644 index 0000000..7f04400 --- /dev/null +++ b/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 ( +
    +

    Operify Exome

    + +
    +

    + Whole Exome Sequencing (WES) targets the protein-coding regions of the genome, where most + disease-causing mutations are found. +

    +

    + With over 7,000 rare diseases identified—80% of which have a genetic basis—WES offers a + powerful approach to uncover their causes. +

    +

    + Traditional diagnostic methods can be slow, costly, and inconclusive; WES streamlines the + process by delivering broad genetic insights in a single test. +

    +

    + Operify Exome enhances WES by combining comprehensive coverage with advanced interpretation, + improving diagnostic yield and patient outcomes. +

    +
    + +

    Key Features

    +
    + + + + + + + + + {features.map((feature, idx) => ( + + + + + ))} + +
    FeatureDescription
    {feature.title}{feature.desc}
    +
    +
    + ); +} \ No newline at end of file diff --git a/app/health/rare-disorders/components/OperifyExomeMito.jsx b/app/health/rare-disorders/components/OperifyExomeMito.jsx new file mode 100644 index 0000000..08f42a7 --- /dev/null +++ b/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 ( +
    +

    Operify ExomeMito

    +

    Boost diagnostic yield with Exome + Mito Sequencing

    + +
    +

    + 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. +

    +

    + This combined approach is especially valuable in diagnosing complex, multisystemic, and rare + disorders, where variants may exist across both genomes. +

    +

    + Mitochondrial disorders, though individually rare, are clinically significant, affecting + approximately 1 in 5,000 individuals and often missed in standard testing. +

    +

    + Studies show that adding mitochondrial sequencing to exome testing increases diagnostic + yield by up to 20%, offering greater clarity and clinical confidence. (PMID: 30369941) +

    +

    + 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. + Reference: PMID: 30369941 +

    +
    + +
    +

    Genome Coverage

    +
    + + + + + + + + + {genomeCoverage.map((item, idx) => ( + + + + + ))} + +
    GenomeCoverage
    {item.genome}{item.coverage}
    +
    +
    + +

    Key Features

    +
    + + + + + + + + + {features.map((feature, idx) => ( + + + + + ))} + +
    FeatureDescription
    {feature.title}{feature.desc}
    +
    +
    + ); +} \ No newline at end of file diff --git a/app/health/rare-disorders/components/RareIntro.jsx b/app/health/rare-disorders/components/RareIntro.jsx new file mode 100644 index 0000000..2e2cf9f --- /dev/null +++ b/app/health/rare-disorders/components/RareIntro.jsx @@ -0,0 +1,18 @@ +export default function RareIntro() { + return ( +
    +

    Rare Disorders

    +

    Transforming Delays into Diagnoses

    +

    + 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. +

    +

    + 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. +

    +
    + ); +} \ No newline at end of file diff --git a/app/health/rare-disorders/components/RareTitle.jsx b/app/health/rare-disorders/components/RareTitle.jsx new file mode 100644 index 0000000..788550f --- /dev/null +++ b/app/health/rare-disorders/components/RareTitle.jsx @@ -0,0 +1,41 @@ +import React from 'react'; + +const RareTitle = () => { + return ( +
    + {/* Breadcrumb */} +
    +
    + +
    +
    + + {/* Page Title */} +
    +

    + Rare Disorders +

    +
    +
    +
    + ); +}; + +export default RareTitle; \ No newline at end of file diff --git a/app/health/rare-disorders/components/SampleRequirements.jsx b/app/health/rare-disorders/components/SampleRequirements.jsx new file mode 100644 index 0000000..5045f1e --- /dev/null +++ b/app/health/rare-disorders/components/SampleRequirements.jsx @@ -0,0 +1,37 @@ +export default function SampleRequirements({ title, items }) { + return ( +
    +
    +

    {title} Sample Requirements

    + +
    + {/* Turnaround Time */} +
    +
    + + + +
    +
    +

    Turnaround Time

    +

    21 Days

    +
    +
    + + {/* Sample Requirement */} +
    +
    + + + +
    +
    +

    Sample Requirement

    +

    Blood/Saliva/Cheek Swab/Genomic DNA/Dry Blood Spot

    +
    +
    +
    +
    +
    + ); +} \ No newline at end of file diff --git a/app/health/rare-disorders/components/SolutionsOffer.jsx b/app/health/rare-disorders/components/SolutionsOffer.jsx new file mode 100644 index 0000000..7ebfb26 --- /dev/null +++ b/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 ( +
    +

    Our Rare Disease Solutions Offer

    +
    + {solutions.map((sol, idx) => ( +
    +

    {sol.name}

    +

    {sol.desc}

    +
    + ))} +
    +
    + ); +} \ No newline at end of file diff --git a/app/health/rare-disorders/components/WESInfo.jsx b/app/health/rare-disorders/components/WESInfo.jsx new file mode 100644 index 0000000..d9c038a --- /dev/null +++ b/app/health/rare-disorders/components/WESInfo.jsx @@ -0,0 +1,22 @@ +export default function WESInfo() { + return ( +
    +

    + Who Should Consider Whole Exome Sequencing (WES)? +

    +

    + 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. +

    +

    + 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. +

    +

    + WES can help identify genetic causes in a wide range of rare disorders. +

    +
    + ); +} \ No newline at end of file diff --git a/app/health/rare-disorders/page.js b/app/health/rare-disorders/page.js new file mode 100644 index 0000000..5eb5923 --- /dev/null +++ b/app/health/rare-disorders/page.js @@ -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 ( + + {/* Page Title */} + + + {/* Intro Paragraph */} + + + {/* Solutions Offered */} + + + {/* WES Info */} + + {/* Clinical Areas Grid */} + + + {/* Operify Exome */} + + + + {/* Operify ExomeMito */} + + + + ); +} diff --git a/app/rna-sequencing/circular-rna-sequencing/page.js b/app/rna-sequencing/circular-rna-sequencing/page.js index 4b5b3c6..7c7a81d 100644 --- a/app/rna-sequencing/circular-rna-sequencing/page.js +++ b/app/rna-sequencing/circular-rna-sequencing/page.js @@ -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() { /> - {/* */} + diff --git a/app/rna-sequencing/mrna-sequencing/components/MRNAPipeline.jsx b/app/rna-sequencing/mrna-sequencing/components/MRNAPipeline.jsx index 6b5f8e5..cd337ec 100644 --- a/app/rna-sequencing/mrna-sequencing/components/MRNAPipeline.jsx +++ b/app/rna-sequencing/mrna-sequencing/components/MRNAPipeline.jsx @@ -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 (
    -
    -

    +
    +

    {title}

    - {/* Pipeline Flowchart */} + {/* SVG Flowchart Container */}
    -
    -
    - {/* Mobile Layout - Single Column */} -
    -
    - {mobileSteps.map((step, index) => ( - -
    -

    {step}

    -
    - {index < mobileSteps.length - 1 && ( - - )} -     - ))} -
    -
    - - {/* Desktop Layout - Two Columns */} -
    -
    - {/* Left Column */} -
    - {leftSteps.map((step, index) => ( - -
    -

    {step}

    -
    - {index < leftSteps.length - 1 && ( - - )} -     - ))} -
    - - {/* Right Column */} -
    - {rightSteps.map((step, index) => ( - -
    -

    {step}

    -
    - {index < rightSteps.length - 1 && ( - - )} -     - ))} +
    + {/* SVG Container with responsive sizing */} +
    + {svgUrl ? ( + // If SVG URL/path is provided + Flowchart diagram + ) : svgContent ? ( + // If SVG content is provided as JSX +
    +
    + {svgContent}
    - - {/* Horizontal Arrow from Transcript Assembly to Transcript Assembly Validation */} -
    - + ) : ( + // Fallback message +
    +

    Please provide SVG content or URL

    -
    + )}
    diff --git a/app/rna-sequencing/single-cell-rna-sequencing/components/SingleCellPipeline.jsx b/app/rna-sequencing/single-cell-rna-sequencing/components/SingleCellPipeline.jsx index 12495b4..4714354 100644 --- a/app/rna-sequencing/single-cell-rna-sequencing/components/SingleCellPipeline.jsx +++ b/app/rna-sequencing/single-cell-rna-sequencing/components/SingleCellPipeline.jsx @@ -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 (
    -
    -

    +
    +

    {title}

    - {/* Pipeline Flowchart */} + {/* SVG Flowchart Container */}
    -
    -
    - {/* Mobile Layout - Single Column */} -
    -
    - {mobileSteps.map((step, index) => ( - -
    -

    {step}

    -
    - {index < mobileSteps.length - 1 && ( - - )} -     - ))} -
    -
    - - {/* Desktop Layout - Two Columns */} -
    -
    - {/* Left Column */} -
    - {leftSteps.map((step, index) => ( - -
    -

    {step}

    -
    - {index < leftSteps.length - 1 && ( - - )} -     - ))} -
    - - {/* Right Column */} -
    - {rightSteps.map((step, index) => ( - -
    -

    {step}

    -
    - {index < rightSteps.length - 1 && ( - - )} -     - ))} +
    + {/* SVG Container with responsive sizing */} +
    + {svgUrl ? ( + // If SVG URL/path is provided + Flowchart diagram + ) : svgContent ? ( + // If SVG content is provided as JSX +
    +
    + {svgContent}
    - - {/* Horizontal Arrow from Transcript Assembly to Transcript Assembly Validation */} -
    - + ) : ( + // Fallback message +
    +

    Please provide SVG content or URL

    -
    + )}
    diff --git a/public/images/health/dna-placeholder.jpg b/public/images/health/dna-placeholder.jpg new file mode 100644 index 0000000..d9d8de7 Binary files /dev/null and b/public/images/health/dna-placeholder.jpg differ diff --git a/public/images/icons/cardio.png b/public/images/icons/cardio.png new file mode 100644 index 0000000..fcc2349 Binary files /dev/null and b/public/images/icons/cardio.png differ diff --git a/public/images/icons/dermatology.png b/public/images/icons/dermatology.png new file mode 100644 index 0000000..c8de2ef Binary files /dev/null and b/public/images/icons/dermatology.png differ diff --git a/public/images/icons/disorder.png b/public/images/icons/disorder.png new file mode 100644 index 0000000..309fb9c Binary files /dev/null and b/public/images/icons/disorder.png differ diff --git a/public/images/icons/dysmorphology.png b/public/images/icons/dysmorphology.png new file mode 100644 index 0000000..f076505 Binary files /dev/null and b/public/images/icons/dysmorphology.png differ diff --git a/public/images/icons/endocrinology.png b/public/images/icons/endocrinology.png new file mode 100644 index 0000000..97e70ff Binary files /dev/null and b/public/images/icons/endocrinology.png differ diff --git a/public/images/icons/ent.png b/public/images/icons/ent.png new file mode 100644 index 0000000..486235f Binary files /dev/null and b/public/images/icons/ent.png differ diff --git a/public/images/icons/hematology.png b/public/images/icons/hematology.png new file mode 100644 index 0000000..ed42c21 Binary files /dev/null and b/public/images/icons/hematology.png differ diff --git a/public/images/icons/immunology.png b/public/images/icons/immunology.png new file mode 100644 index 0000000..b66d5a5 Binary files /dev/null and b/public/images/icons/immunology.png differ diff --git a/public/images/icons/metabolic.png b/public/images/icons/metabolic.png new file mode 100644 index 0000000..0065e98 Binary files /dev/null and b/public/images/icons/metabolic.png differ diff --git a/public/images/icons/nephrology.png b/public/images/icons/nephrology.png new file mode 100644 index 0000000..c678422 Binary files /dev/null and b/public/images/icons/nephrology.png differ diff --git a/public/images/icons/neurology.png b/public/images/icons/neurology.png new file mode 100644 index 0000000..43ee474 Binary files /dev/null and b/public/images/icons/neurology.png differ diff --git a/public/images/icons/oncology.png b/public/images/icons/oncology.png new file mode 100644 index 0000000..0038222 Binary files /dev/null and b/public/images/icons/oncology.png differ diff --git a/public/images/icons/ophthalmology.png b/public/images/icons/ophthalmology.png new file mode 100644 index 0000000..eff5cf6 Binary files /dev/null and b/public/images/icons/ophthalmology.png differ diff --git a/public/images/icons/osteology.png b/public/images/icons/osteology.png new file mode 100644 index 0000000..0ad4170 Binary files /dev/null and b/public/images/icons/osteology.png differ diff --git a/public/images/icons/pneumology.png b/public/images/icons/pneumology.png new file mode 100644 index 0000000..263c8f9 Binary files /dev/null and b/public/images/icons/pneumology.png differ diff --git a/public/images/icons/reproductive.png b/public/images/icons/reproductive.png new file mode 100644 index 0000000..845da49 Binary files /dev/null and b/public/images/icons/reproductive.png differ