101 lines
4.6 KiB
JavaScript
101 lines
4.6 KiB
JavaScript
// app/dna-sequencing/genome-mapping/components/GenomeMappingIntroduction.jsx
|
|
|
|
import IntroductionLayout from '../../../components/shared/IntroductionLayout';
|
|
|
|
const GenomeMappingIntroduction = () => {
|
|
const contentItems = [
|
|
"Genome Mapping focuses on determining the structure and order of genes within a genome, providing comprehensive insights into genomic organization and structural variations.",
|
|
"The workflow includes isolating DNA, fragmenting it, capturing the regions of interest followed by sequencing to produce millions of short reads.",
|
|
"In the bioinformatics analysis, these reads are aligned to a known reference genome to detect genomic alterations and structural arrangements.",
|
|
"It is a powerful tool for diverse genomic studies, capable of sequencing humans, livestock, plants, bacteria, and disease-related microbes."
|
|
];
|
|
|
|
const advantageItems = [
|
|
"Provides detailed structural variant detection and genomic rearrangements, offering comprehensive insights into complex genomic architecture.",
|
|
"Enables high-resolution analysis of large eukaryotic genomes and their structural features, facilitating better understanding of genome organization.",
|
|
"Offers comprehensive mapping capabilities that reveal the three-dimensional structure of chromosomes and identify regulatory interactions between distant genomic regions.",
|
|
"Supports multiple research applications including cancer research, developmental biology, and evolutionary studies by providing detailed genomic structural information."
|
|
];
|
|
|
|
const serviceTypes = [
|
|
"HiC Mapping",
|
|
"Optical 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 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/genome_mapping_flow.svg"
|
|
alt="Genome Mapping 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/genome-mapping-overview.png"
|
|
alt="Genome Mapping Overview"
|
|
className="w-full h-auto object-contain"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default GenomeMappingIntroduction; |