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

97
app/dna-sequencing/enrichment-sequencing/components/EnrichmentIntroduction.jsx
View File

@ -9,6 +9,7 @@ const EnrichmentIntroduction = () => {
"In the bioinformatics analysis, these reads are aligned to a known reference genome to detect genomic alterations.",
"It is a powerful tool for diverse genomic studies, capable of sequencing humans, livestock, plants, bacteria, and disease-related microbes."
];
const advantageItems = [
"Provides a more affordable alternative to Whole Genome Sequencing (WGS), making it accessible to a wider range of researchers and clinicians.",
"Enhances detection of single-nucleotide variants (SNVs), copy number variants (CNVs), and insertions/deletions (InDels) with sensitivity and accuracy comparable to WGS, particularly in exonic regions.",
@ -16,38 +17,80 @@ const EnrichmentIntroduction = () => {
"Focuses on exonic regions, which are more likely to harbor disease-causing variants, leading to a more efficient and targeted approach in identifying genetic variants."
];
const customBadgeContent = (
<div className="text-center">
<div className="bg-teal-600 text-white px-4 py-2 rounded-lg mb-4">
<span className="text-sm font-medium">ENRICHMENT SEQUENCING</span>
</div>
<div className="flex flex-col space-y-2">
<div className="bg-orange-400 text-white px-3 py-2 rounded text-xs">
Whole Exome DNA Sequencing
return (
<div className="w-full bg-white">
{/* Main container with two columns */}
<div className="grid grid-cols-1 lg:grid-cols-[1.2fr_1.0fr] min-h-screen">
{/* Left Column - Content using existing IntroductionLayout structure */}
<div className="px-6 lg:px-12 py-8">
{/* Introduction Section */}
<section className="mb-8">
<h2 className="text-3xl font-bold text-teal-700 mb-4">
Introduction and Workflow
</h2>
<ul className="space-y-4 text-gray-600 leading-relaxed text-sm lg:text-base">
{contentItems.map((item, index) => (
<li key={index} className="flex items-start">
<span
className="inline-block w-2 h-2 rounded-full mt-2 mr-3 flex-shrink-0"
style={{backgroundColor: '#faae31'}}
></span>
<span className="text-justify">{item}</span>
</li>
))}
</ul>
</section>
{/* Advantage Section */}
<section>
<h2 className="text-3xl font-bold text-teal-700 mb-4">
Advantage
</h2>
<ul className="space-y-4 text-gray-600 leading-relaxed text-sm lg:text-base">
{advantageItems.map((item, index) => (
<li key={index} className="flex items-start">
<span
className="inline-block w-2 h-2 rounded-full mt-2 mr-3 flex-shrink-0"
style={{backgroundColor: '#faae31'}}
></span>
<span className="text-justify">{item}</span>
</li>
))}
</ul>
</section>
</div>
<div className="bg-orange-400 text-white px-3 py-2 rounded text-xs">
Amplicon Sequencing (16S/18S/ITS)
</div>
<div className="bg-orange-400 text-white px-3 py-2 rounded text-xs">
Targeted Sequencing
{/* Right Column - Custom Content with Image and SVG */}
<div className="relative p-4">
<div className="flex flex-col h-full space-y-4">
{/* Top Section - Flowchart with larger fixed width */}
<div className="w-full flex items-center justify-center py-6">
<div className="w-full max-w-md flex items-center justify-center">
<img
src="/images/flowchart/enrichment_flow.svg"
alt="ISO Certified Process Flow"
className="w-full h-auto object-contain"
/>
</div>
</div>
{/* Bottom Section - Image with same width */}
<div className="flex items-center justify-center">
<div className="w-full max-w-md flex items-center justify-center">
<img
src="/images/dna/whole_genome_seq-normal_denovo.png"
alt="Enrichment Overview"
className="w-full h-auto object-contain"
/>
</div>
</div>
</div>
</div>
</div>
</div>
);
return (
<IntroductionLayout
introTitle="Introduction and Workflow"
advantageTitle="Advantage"
introItems={contentItems}
advantageItems={advantageItems}
imageUrl="/images/dna/enrichment-overview.png"
imageAlt="Enrichment Overview"
backgroundColor="#f8f9fa"
customBadgeContent={customBadgeContent}
useParagraphs={true}
/>
);
};
export default EnrichmentIntroduction;