flowchart changes updated
This commit is contained in:
@ -9,6 +9,7 @@ const EpigenomicsIntroduction = () => {
|
||||
"In the bioinformatics analysis, these reads are aligned to a known reference genome to detect genomic alterations and epigenetic modifications.",
|
||||
"It is a powerful tool for diverse genomic studies, capable of sequencing humans, livestock, plants, bacteria, and disease-related microbes."
|
||||
];
|
||||
|
||||
const advantageItems = [
|
||||
"Provides comprehensive analysis of epigenetic modifications including DNA methylation, histone modifications, and chromatin accessibility, offering insights into gene regulation mechanisms.",
|
||||
"Enables single-base resolution mapping of epigenetic marks across the genome, allowing for precise identification of regulatory elements and their modifications.",
|
||||
@ -16,7 +17,6 @@ const EpigenomicsIntroduction = () => {
|
||||
"Identifies potential therapeutic targets and biomarkers for epigenetic-based treatments, supporting the development of personalized medicine approaches."
|
||||
];
|
||||
|
||||
|
||||
const serviceTypes = [
|
||||
"Whole Genome Bisulphite Sequencing (WGBS)",
|
||||
"Chip Sequencing",
|
||||
@ -24,19 +24,78 @@ const EpigenomicsIntroduction = () => {
|
||||
];
|
||||
|
||||
return (
|
||||
<IntroductionLayout
|
||||
introTitle="Introduction and Workflow"
|
||||
advantageTitle="Advantage"
|
||||
introItems={contentItems}
|
||||
advantageItems={advantageItems}
|
||||
imageUrl="/images/epigenomics-overview.png"
|
||||
imageAlt="Epigenomics Overview"
|
||||
badgeText="EPIGENOMICS"
|
||||
serviceTypes={serviceTypes}
|
||||
backgroundColor="#f8f9fa"
|
||||
badgeColor="bg-teal-600"
|
||||
useParagraphs={true}
|
||||
/>
|
||||
<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 className="mb-8">
|
||||
<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>
|
||||
|
||||
{/* 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/epigenomic_flow.svg"
|
||||
alt="Epigenomics 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/epigenomics-overview.png"
|
||||
alt="Epigenomics Overview"
|
||||
className="w-full h-auto object-contain"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
Reference in New Issue
Block a user