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

flowchart changes updated

Browse Source
This commit is contained in:
mukesh13
2025-09-04 02:33:03 +05:30
parent 3f803ac0c9
commit 78a56a061b
65 changed files with 2234 additions and 992 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
app/health/rare-disorders/components/ClinicalAreasGrid.jsx
View File

@ -21,7 +21,7 @@ export default function ClinicalAreasGrid() {
];
return (
<section className="mx-auto px-8 pt-8">
<section className="mx-auto px-8 py-8">
<h2 className="text-3xl font-bold text-teal-700 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) => (

60
app/health/rare-disorders/components/OperifyExome.jsx
View File

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

89
app/health/rare-disorders/components/OperifyExomeMito.jsx
View File

@ -1,89 +0,0 @@
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" }
];
const points = [
"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"
];
return (
<section className="mx-auto px-8">
<h2 className="text-3xl font-bold text-teal-700 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-6">
<ul className="space-y-4">
{points.map((point, idx) => (
<li key={idx} className="flex items-start">
<span
className="w-2 h-2 rounded-full mt-2 mr-3 flex-shrink-0"
style={{backgroundColor: '#faae31'}}
></span>
<p className="text-gray-600 leading-relaxed text-base text-justify">
{point}
</p>
</li>
))}
</ul>
</div>
<div className="mb-8">
<h3 className="text-2xl font-semibold text-teal-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-teal-50">
<th className="border border-gray-300 px-3 py-2 text-left font-semibold text-teal-700">Genome</th>
<th className="border border-gray-300 px-3 py-2 text-left font-semibold text-teal-700">Coverage</th>
</tr>
</thead>
<tbody>
{genomeCoverage.map((item, idx) => (
<tr key={idx} className="hover:bg-teal-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-teal-700 mb-4">Key Features</h3>
<div className="overflow-x-auto">
<table className="w-full border-collapse border border-gray-300 rounded-lg">
<thead>
<tr className="bg-teal-50">
<th className="border border-gray-300 px-3 py-2 text-left font-semibold text-teal-700">Feature</th>
<th className="border border-gray-300 px-3 py-2 text-left font-semibold text-teal-700">Description</th>
</tr>
</thead>
<tbody>
{features.map((feature, idx) => (
<tr key={idx} className="hover:bg-teal-50">
<td className="border border-gray-300 px-6 py-3 text-gray-700 font-medium">{feature.title}</td>
<td className="border border-gray-300 px-6 py-3 text-gray-600">{feature.desc}</td>
</tr>
))}
</tbody>
</table>
</div>
</section>
);
}

179
app/health/rare-disorders/components/RareIntro.jsx
View File

@ -1,32 +1,161 @@
'use client'
import Image from "next/image";
import Link from "next/link";
import { useState, useEffect } from "react";
export default function RareIntro() {
const [currentSlide, setCurrentSlide] = useState(0);
const slides = [
{
content: "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."
},
{
content: "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."
}
];
// Auto-advance slides every 5 seconds
useEffect(() => {
const timer = setInterval(() => {
setCurrentSlide((prev) => (prev + 1) % slides.length);
}, 5000);
return () => clearInterval(timer);
}, [slides.length]);
const goToSlide = (index) => {
setCurrentSlide(index);
};
const nextSlide = () => {
setCurrentSlide((prev) => (prev + 1) % slides.length);
};
const prevSlide = () => {
setCurrentSlide((prev) => (prev - 1 + slides.length) % slides.length);
};
return (
<section className="py-0">
<div className="container-fluid">
<div className="bg-gradient-to-br from-teal-600 to-teal-700 text-white p-8 lg:p-8 flex items-center">
<div className="w-full">
<h2 className="text-3xl font-bold text-white mb-6 leading-tight">
Transforming Delays into Diagnoses
</h2>
<ul className="space-y-4">
<li className="flex items-start gap-3">
<div className="w-2 h-2 rounded-full mt-2 flex-shrink-0" style={{backgroundColor: '#faae31'}}></div>
<span className="leading-relaxed 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.
</span>
</li>
<li className="flex items-start gap-3">
<div className="w-2 h-2 rounded-full mt-2 flex-shrink-0" style={{backgroundColor: '#faae31'}}></div>
<span className="leading-relaxed 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.
</span>
</li>
</ul>
<section>
<div className="flex min-h-[350px]">
{/* Left Side - Content */}
<div className="w-full lg:w-3/4 bg-white">
<div className="h-full flex flex-col justify-center px-4 lg:px-8 py-4">
{/* Brand/Title */}
<div className="mb-4">
<h2 className="text-3xl font-bold text-teal-700 mb-4">
<span>Transforming</span>
<span className="ml-2">Delays into Diagnoses</span>
</h2>
<div className="w-10 h-0.5" style={{backgroundColor: '#faae31'}}></div>
</div>
{/* Content Slider */}
<div className="mb-4 max-w-3xl">
<div className="text-gray-600 leading-relaxed text-base mb-4 text-justify font-light transition-opacity duration-500">
{slides[currentSlide].content}
</div>
</div>
{/* Navigation */}
<div className="flex items-center justify-between">
<div className="flex items-center space-x-3">
<button
onClick={prevSlide}
className="w-8 h-8 flex items-center justify-center border rounded-full transition-all duration-200"
style={{
borderColor: '#555555',
color: '#555555'
}}
onMouseEnter={(e) => {
e.target.style.borderColor = '#faae31';
e.target.style.backgroundColor = '#faae31';
e.target.style.color = '#2a6564';
}}
onMouseLeave={(e) => {
e.target.style.borderColor = '#555555';
e.target.style.backgroundColor = 'transparent';
e.target.style.color = '#555555';
}}
aria-label="Previous slide"
>
<svg className="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M15 19l-7-7 7-7" />
</svg>
</button>
<button
onClick={nextSlide}
className="w-8 h-8 flex items-center justify-center border rounded-full transition-all duration-200"
style={{
borderColor: '#555555',
color: '#555555'
}}
onMouseEnter={(e) => {
e.target.style.borderColor = '#faae31';
e.target.style.backgroundColor = '#faae31';
e.target.style.color = '#2a6564';
}}
onMouseLeave={(e) => {
e.target.style.borderColor = '#555555';
e.target.style.backgroundColor = 'transparent';
e.target.style.color = '#555555';
}}
aria-label="Next slide"
>
<svg className="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M9 5l7 7-7 7" />
</svg>
</button>
{/* Progress Indicators */}
<div className="flex space-x-2 ml-4">
{slides.map((_, index) => (
<button
key={index}
onClick={() => goToSlide(index)}
className="transition-all duration-200 rounded-full"
style={{
width: index === currentSlide ? '24px' : '6px',
height: '6px',
backgroundColor: index === currentSlide ? '#faae31' : '#555555'
}}
onMouseEnter={(e) => {
if (index !== currentSlide) {
e.target.style.backgroundColor = '#2a6564';
}
}}
onMouseLeave={(e) => {
if (index !== currentSlide) {
e.target.style.backgroundColor = '#555555';
}
}}
aria-label={`Go to slide ${index + 1}`}
/>
))}
</div>
</div>
</div>
</div>
</div>
{/* Right Side - Image */}
<div className="hidden lg:block w-1/2 relative">
<div className="absolute inset-0">
<Image
src="https://images.unsplash.com/photo-1576091160399-112ba8d25d1f?ixlib=rb-4.0.3&auto=format&fit=crop&w=1200&q=80"
alt="DNA sequencing and genetic analysis in modern laboratory"
fill
className="object-cover grayscale-[20%]"
priority
/>
<div className="absolute inset-0 bg-slate-900/10"></div>
</div>
{/* Subtle border */}
<div className="absolute left-0 top-0 w-px h-full bg-slate-200"></div>
</div>
</div>
</section>
);

50
app/health/rare-disorders/components/SampleRequirements.jsx
View File

@ -1,50 +0,0 @@
import Image from "next/image";
export default function SampleRequirements({ title, items }) {
const requirements = [
{
icon: "/images/icons/clock.png", // Replace with your actual icon path
title: "Turnaround Time",
description: "21 Days"
},
{
icon: "/images/icons/sample.png", // Replace with your actual icon path
title: "Sample Requirement",
description: "Blood/Saliva/Cheek Swab/Genomic DNA/Dry Blood Spot"
}
];
return (
<section className="mx-auto px-8 pt-8 pb-12">
<h3 className="text-3xl font-bold text-teal-700 mb-6">{title} Sample Requirements</h3>
<div className="grid grid-cols-1 sm:grid-cols-2 gap-6 max-w-5xl mx-auto">
{requirements.map((req, idx) => (
<div
key={idx}
className="rounded-lg p-6 hover:shadow-sm transition-shadow cursor-pointer"
style={{backgroundColor: '#f2fcfc'}}
>
<div className="flex items-start gap-4">
<div className="flex-shrink-0 mt-1">
<Image
src={req.icon}
alt={req.title}
width={40}
height={40}
className="object-contain"
/>
</div>
<div className="flex-1">
<h4 className="text-lg font-semibold text-gray-900 mb-2">{req.title}</h4>
<p className="text-gray-500 text-sm leading-relaxed">
{req.description}
</p>
</div>
</div>
</div>
))}
</div>
</section>
);
}

33
app/health/rare-disorders/components/SolutionsOffer.jsx
View File

@ -1,15 +1,29 @@
"use client";
export default function SolutionsOffer() {
const solutions = [
{
name: "Exome",
desc: "Whole Exome Sequencing for uncovering the genetic basis of rare diseases."
desc: "Whole Exome Sequencing for uncovering the genetic basis of rare diseases.",
path: "/health/rare-disorders/exome"
},
{
name: "ExomeMito",
desc: "Exome + Mitochondrial Genome Sequencing for a higher diagnostic yield."
desc: "Exome + Mitochondrial Genome Sequencing for a higher diagnostic yield.",
path: "/health/rare-disorders/exomemito"
}
];
const handleCardClick = (path) => {
// Using Next.js router for navigation
window.location.href = path;
// Alternative: If you want to use Next.js useRouter hook:
// import { useRouter } from 'next/navigation';
// const router = useRouter();
// router.push(path);
};
return (
<div className="mx-auto px-8 py-6">
<h2 className="text-3xl font-bold text-teal-700 mb-4">Our Rare Disease Solutions Offer</h2>
@ -23,13 +37,22 @@ export default function SolutionsOffer() {
{solutions.map((sol, idx) => (
<div
key={idx}
className="rounded-lg p-6 hover:shadow-sm transition-shadow cursor-pointer"
onClick={() => handleCardClick(sol.path)}
className="rounded-xl p-4 hover:shadow-lg hover:scale-105 transition-all duration-300 cursor-pointer"
style={{backgroundColor: '#f2fcfc'}}
>
<div className="flex items-start">
<div className="flex-1">
<h3 className="text-lg font-semibold text-gray-900 mb-2">{sol.name}</h3>
<p className="text-gray-500 text-sm leading-relaxed">{sol.desc}</p>
<h3 className="text-lg font-semibold text-gray-900 mb-2 hover:text-teal-700 transition-colors">
{sol.name}
</h3>
<p className="text-gray-500 text-sm leading-relaxed mb-3">{sol.desc}</p>
<div className="flex items-center text-teal-600 text-sm font-medium">
Learn more
<svg className="ml-1 w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
</svg>
</div>
</div>
</div>
</div>