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

further updates oh health,research and leader

Browse Source
This commit is contained in:
mukesh13
2025-09-11 22:33:55 +05:30
parent a90808177a
commit e925b985f2
23 changed files with 301 additions and 210 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -20,8 +20,8 @@ export default function ClinicalAreasGrid() {
];
return (
<section className="mx-auto px-8 py-8">
<h2 className="text-3xl font-bold text-teal-700 pb-2 mb-4">Clinical Areas</h2>
<section className="mx-auto px-8">
<h2 className="text-3xl font-bold text-teal-700 pb-2 mb-4 leading-tight">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

4
app/health/rare-disorders/exome/components/ExomeTitle.jsx
View File

@ -28,7 +28,7 @@ const ExomeTitle = () => {
<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>
<span className="text-white">Exome</span>
</nav>
</div>
</div>
@ -36,7 +36,7 @@ const ExomeTitle = () => {
{/* 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
Exome
</h1>
<div className="w-16 h-1 bg-yellow-400 mx-auto"></div>
</div>

66
app/health/rare-disorders/exome/components/KeyFeatures.jsx Normal file
View File

@ -0,0 +1,66 @@
import React from 'react';
import Image from 'next/image';
const KeyFeatures = () => {
const features = [
{
title: "Deep Coverage",
desc: "≥100X average depth for high accuracy.",
icon: "/images/icons/deep-coverage.png"
},
{
title: "Superior Data Quality",
desc: "≥90% bases with Q30 score.",
icon: "/images/icons/data-quality.png"
},
{
title: "Comprehensive Variant Detection",
desc: "Identifies SNVs, Indels, and CNVs.",
icon: "/images/icons/variant-detection.png"
},
{
title: "Uniparental Disomy Analysis",
desc: "Detects UPD regions for imprinting disorders.",
icon: "/images/icons/upd-analysis.png"
},
{
title: "Coverage of Complex Genes",
desc: <span><em>Includes SMN1, SMN2, and DMD</em>.</span>,
icon: "/images/icons/complex-genes.png"
},
{
title: "Chromosomal Assessment",
desc: "Detects aneuploidies and determines chromosomal sex.",
icon: "/images/icons/chromosomal.png"
}
];
return (
<section className="mx-auto px-8 pt-10">
<h3 className="text-3xl font-bold text-teal-700 mb-6 leading-tight">Key Features</h3>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
{features.map((feature, index) => (
<div
key={index}
className="p-6 rounded-2xl shadow-sm border-0 h-full transition-transform duration-300 ease-in-out hover:scale-105 hover:shadow-lg group"
style={{ backgroundColor: '#f2fcfc' }}
>
<div className="flex items-center space-x-4 mb-4">
<div className="w-12 h-12 bg-orange-100 rounded-xl flex items-center justify-center flex-shrink-0">
<Image src={feature.icon} alt={feature.title} width={24} height={24} />
</div>
<h3 className="text-lg font-semibold text-teal-700 leading-tight">{feature.title}</h3>
</div>
<div className="relative w-full h-px bg-gray-300 mb-4 overflow-hidden">
<div className="absolute top-0 left-0 h-full bg-gray-600 w-0 group-hover:w-full transition-all duration-500 ease-in-out"></div>
</div>
<p className="text-gray-600 leading-relaxed text-sm text-justify">{feature.desc}</p>
</div>
))}
</div>
</section>
);
};
export default KeyFeatures;

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

@ -1,59 +1,6 @@
import React from 'react';
import Image from 'next/image';
const FeatureCard = ({ icon, title, description }) => (
<div className="p-6 rounded-2xl shadow-sm border-0 h-full transition-transform duration-300 ease-in-out hover:scale-105 hover:shadow-lg group" style={{ backgroundColor: '#f2fcfc' }}>
<div className="flex items-center space-x-4 mb-4">
<div className="w-12 h-12 bg-orange-100 rounded-xl flex items-center justify-center flex-shrink-0">
<Image src={icon} alt={title} width={24} height={24} />
</div>
<h3 className="text-lg font-semibold text-teal-700 leading-tight">{title}</h3>
</div>
<div className="relative w-full h-px bg-gray-300 mb-4 overflow-hidden">
<div className="absolute top-0 left-0 h-full bg-gray-600 w-0 group-hover:w-full transition-all duration-500 ease-in-out"></div>
</div>
<p className="text-gray-600 leading-relaxed text-sm text-justify">{description}</p>
</div>
);
export default function OperifyExome() {
const features = [
{
title: "Deep Coverage",
desc: "≥100X average depth for high accuracy.",
icon: "/images/icons/deep-coverage.png"
},
{
title: "Superior Data Quality",
desc: "≥90% bases with Q30 score.",
icon: "/images/icons/data-quality.png"
},
{
title: "Comprehensive Variant Detection",
desc: "Identifies SNVs, Indels, and CNVs.",
icon: "/images/icons/variant-detection.png"
},
{
title: "Uniparental Disomy Analysis",
desc: "Detects UPD regions for imprinting disorders.",
icon: "/images/icons/upd-analysis.png"
},
{
title: "Coverage of Complex Genes",
desc: "Includes SMN1, SMN2, and DMD.",
icon: "/images/icons/complex-genes.png"
},
{
title: "Chromosomal Assessment",
desc: "Detects aneuploidies and determines chromosomal sex.",
icon: "/images/icons/chromosomal.png"
},
{
title: "Dynamic Reanalysis",
desc: "Reanalysis as scientific knowledge evolves.",
icon: "/images/icons/reanalysis.png"
}
];
const points = [
"Whole Exome Sequencing (WES) targets the protein-coding regions of the genome, where most disease-causing mutations are found.",
@ -63,10 +10,10 @@ export default function OperifyExome() {
];
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>
<section className="mx-auto px-8 py-8">
<h2 className="text-3xl font-bold text-teal-700 pb-2 mb-4">Exome</h2>
<div className="mb-8">
<div>
<ul className="space-y-4">
{points.map((point, idx) => (
<li key={idx} className="flex items-start">
@ -81,19 +28,6 @@ export default function OperifyExome() {
))}
</ul>
</div>
<h3 className="text-3xl font-bold text-teal-700 mb-6 leading-tight">Key Features</h3>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
{features.map((feature, index) => (
<FeatureCard
key={index}
icon={feature.icon}
title={feature.title}
description={feature.desc}
/>
))}
</div>
</section>
);
}

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

@ -15,8 +15,8 @@ export default function SampleRequirements({ title, items }) {
];
return (
<section className="mx-auto px-8 pt-8">
<h3 className="text-3xl font-bold text-teal-700 mb-6">{title} Sample Requirements</h3>
<section className="mx-auto px-8 py-8">
<h3 className="text-3xl font-bold text-teal-700 mb-6">Sample Requirements</h3>
<div className="grid grid-cols-1 sm:grid-cols-2 gap-6 max-w-none mx-auto">
{requirements.map((req, idx) => (

5
app/health/rare-disorders/exome/page.js
View File

@ -1,6 +1,7 @@
import ExomeTitle from './components/ExomeTitle';
import OperifyExome from './components/OperifyExome';
import SampleRequirements from './components/SampleRequirements';
import KeyFeatures from './components/KeyFeatures';
import ClinicalAreasGrid from '../components/ClinicalAreasGrid';
import PageLayout from '../../../components/Layout/PageLayout';
@ -12,15 +13,15 @@ export default function ExomePage() {
{/* Operify Exome */}
<OperifyExome />
<ClinicalAreasGrid/>
<KeyFeatures />
<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"
]}
/>
<ClinicalAreasGrid/>
</PageLayout>
);
}

66
app/health/rare-disorders/exomemito/components/ExomeMitoKeyFeatures.jsx Normal file
View File

@ -0,0 +1,66 @@
import React from 'react';
import Image from 'next/image';
const ExomeMitoKeyFeatures = () => {
const features = [
{
title: "High Mean Target Depth",
desc: "≥100X coverage for reliable detection.",
icon: "/images/icons/deep-coverage.png"
},
{
title: "High Base Quality",
desc: "≥90% of bases with Q30 score.",
icon: "/images/icons/data-quality.png"
},
{
title: "Scope of Test",
desc: "Covers SNVs/Indels, CNVs in nuclear and mitochondrial genome.",
icon: "/images/icons/scope-test.png"
},
{
title: "Uniparental Disomy",
desc: "Detects regions important in rare recessive conditions.",
icon: "/images/icons/variant-detection.png"
},
{
title: "Homologous Gene Analysis",
desc: <span><em>Includes SMN1, SMN2, DMD</em>.</span>,
icon: "/images/icons/functional-genomics.png"
},
{
title: "Aneuploidy & Ploidy Estimation",
desc: "Detects abnormal chromosome numbers and sex karyotype.",
icon: "/images/icons/chromosomal.png"
}
];
return (
<section className="mx-auto px-8 pt-10">
<h3 className="text-3xl font-bold text-teal-700 mb-6 leading-tight">Key Features</h3>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
{features.map((feature, index) => (
<div
key={index}
className="p-6 rounded-2xl shadow-sm border-0 h-full transition-transform duration-300 ease-in-out hover:scale-105 hover:shadow-lg group"
style={{ backgroundColor: '#f2fcfc' }}
>
<div className="flex items-center space-x-4 mb-4">
<div className="w-12 h-12 bg-orange-100 rounded-xl flex items-center justify-center flex-shrink-0">
<Image src={feature.icon} alt={feature.title} width={24} height={24} />
</div>
<h3 className="text-lg font-semibold text-teal-700 leading-tight">{feature.title}</h3>
</div>
<div className="relative w-full h-px bg-gray-300 mb-4 overflow-hidden">
<div className="absolute top-0 left-0 h-full bg-gray-600 w-0 group-hover:w-full transition-all duration-500 ease-in-out"></div>
</div>
<p className="text-gray-600 leading-relaxed text-sm text-justify">{feature.desc}</p>
</div>
))}
</div>
</section>
);
};
export default ExomeMitoKeyFeatures;

4
app/health/rare-disorders/exomemito/components/ExomeMitoTitle.jsx
View File

@ -28,7 +28,7 @@ const ExomeMitoTitle = () => {
<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 ExomeMito</span>
<span className="text-white">ExomeMito</span>
</nav>
</div>
</div>
@ -36,7 +36,7 @@ const ExomeMitoTitle = () => {
{/* 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 ExomeMito
ExomeMito
</h1>
<div className="w-16 h-1 bg-yellow-400 mx-auto"></div>
</div>

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

@ -1,60 +1,8 @@
import React from 'react';
import Image from 'next/image';
const FeatureCard = ({ icon, title, description }) => (
<div className="p-6 rounded-2xl shadow-sm border-0 h-full transition-transform duration-300 ease-in-out hover:scale-105 hover:shadow-lg group" style={{ backgroundColor: '#f2fcfc' }}>
<div className="flex items-center space-x-4 mb-4">
<div className="w-12 h-12 bg-orange-100 rounded-xl flex items-center justify-center flex-shrink-0">
<Image src={icon} alt={title} width={24} height={24} />
</div>
<h3 className="text-lg font-semibold text-teal-700 leading-tight">{title}</h3>
</div>
<div className="relative w-full h-px bg-gray-300 mb-4 overflow-hidden">
<div className="absolute top-0 left-0 h-full bg-gray-600 w-0 group-hover:w-full transition-all duration-500 ease-in-out"></div>
</div>
<p className="text-gray-600 leading-relaxed text-sm text-justify">{description}</p>
</div>
);
export default function OperifyExomeMito() {
const features = [
{
title: "High Mean Target Depth",
desc: "≥100X coverage for reliable detection.",
icon: "/images/icons/deep-coverage.png"
},
{
title: "High Base Quality",
desc: "≥90% of bases with Q30 score.",
icon: "/images/icons/data-quality.png"
},
{
title: "Scope of Test",
desc: "Covers SNVs/Indels, CNVs in nuclear and mitochondrial genome.",
icon: "/images/icons/scope-test.png"
},
{
title: "Uniparental Disomy",
desc: "Detects regions important in rare recessive conditions.",
icon: "/images/icons/variant-detection.png"
},
{
title: "Homologous Gene Analysis",
desc: "Includes SMN1, SMN2, DMD.",
icon: "/images/icons/functional-genomics.png"
},
{
title: "Aneuploidy & Ploidy Estimation",
desc: "Detects abnormal chromosome numbers and sex karyotype.",
icon: "/images/icons/chromosomal.png"
},
{
title: "Reanalysis & Reclassification",
desc: "Updates based on latest scientific knowledge.",
icon: "/images/icons/reanalysis.png"
}
];
const genomeCoverage = [
{ genome: "Nuclear Genome", coverage: "Protein-coding regions of ~20000 genes" },
{ genome: "Mitochondrial genome", coverage: "37 genes" }
@ -70,7 +18,7 @@ export default function OperifyExomeMito() {
return (
<section className="mx-auto px-8 pt-10">
<h2 className="text-3xl font-bold text-teal-700 pb-2 mb-4">Operify ExomeMito</h2>
<h2 className="text-3xl font-bold text-teal-700 pb-2 mb-4">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">
@ -110,19 +58,6 @@ export default function OperifyExomeMito() {
</table>
</div>
</div>
<h3 className="text-3xl font-bold text-teal-700 mb-6 leading-tight">Key Features</h3>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
{features.map((feature, index) => (
<FeatureCard
key={index}
icon={feature.icon}
title={feature.title}
description={feature.desc}
/>
))}
</div>
</section>
);
}

6
app/health/rare-disorders/exomemito/page.js
View File

@ -2,6 +2,7 @@ import ExomeMitoTitle from './components/ExomeMitoTitle';
import OperifyExomeMito from './components/OperifyExomeMito';
import SampleRequirements from '../exome/components/SampleRequirements';
import ClinicalAreasGrid from '../components/ClinicalAreasGrid';
import ExomeMitoKeyFeatures from './components/ExomeMitoKeyFeatures';
import PageLayout from '../../../components/Layout/PageLayout';
export default function ExomeMitoPage() {
@ -12,15 +13,16 @@ export default function ExomeMitoPage() {
{/* Operify ExomeMito */}
<OperifyExomeMito />
<ClinicalAreasGrid/>
<ExomeMitoKeyFeatures/>
<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"
]}
/>
<ClinicalAreasGrid/>
</PageLayout>
);
}