flowchart changes updated
This commit is contained in:
mukesh13
47
app/health/rare-disorders/exome/components/ExomeTitle.jsx
Normal file
47
app/health/rare-disorders/exome/components/ExomeTitle.jsx
Normal file
@ -0,0 +1,47 @@
|
||||
import React from 'react';
|
||||
|
||||
const ExomeTitle = () => {
|
||||
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="/health" 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>
|
||||
<a href="/health/rare-disorders" className="text-white hover:text-yellow-400 underline">Rare Disorder</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">Operify Exome</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">
|
||||
Operify Exome
|
||||
</h1>
|
||||
<div className="w-16 h-1 bg-yellow-400 mx-auto"></div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default ExomeTitle;
|
||||
60
app/health/rare-disorders/exome/components/OperifyExome.jsx
Normal file
60
app/health/rare-disorders/exome/components/OperifyExome.jsx
Normal file
@ -0,0 +1,60 @@
|
||||
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-10">
|
||||
<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>
|
||||
);
|
||||
}
|
||||
@ -0,0 +1,50 @@
|
||||
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-none mx-auto">
|
||||
{requirements.map((req, idx) => (
|
||||
<div
|
||||
key={idx}
|
||||
className="rounded-2xl p-4 hover:shadow-sm transition-shadow cursor-pointer"
|
||||
style={{backgroundColor: '#f2fcfc'}}
|
||||
>
|
||||
<div className="flex items-start gap-4">
|
||||
<div className="flex-shrink-0 mt-1 rounded-full bg-orange-100 w-14 h-14 flex items-center justify-center">
|
||||
<Image
|
||||
src={req.icon}
|
||||
alt={req.title}
|
||||
width={36}
|
||||
height={36}
|
||||
className="object-contain"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<h4 className="text-lg font-semibold text-teal-700 mb-2">{req.title}</h4>
|
||||
<p className="text-gray-600 text-sm leading-relaxed">
|
||||
{req.description}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user