49 lines
1.7 KiB
JavaScript
49 lines
1.7 KiB
JavaScript
import React from 'react';
|
|
|
|
const SNPWorkflow = ({
|
|
workflowImage = "/images/flowchart/snp_flow.svg"
|
|
}) => {
|
|
const introItems = [
|
|
"SNP-based genotyping identifies single nucleotide polymorphisms (SNPs) across the genome, offering insights into genetic diversity, disease associations, and trait inheritance. It is widely applied in population genetics, evolutionary biology, and plant and animal breeding."
|
|
];
|
|
|
|
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]">
|
|
|
|
{/* Left Column - Content */}
|
|
<div className="px-6 lg:px-6 py-8">
|
|
{/* Introduction Section */}
|
|
<section>
|
|
<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">
|
|
{introItems.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 - Workflow Image */}
|
|
<div className="relative flex items-start justify-center p-4">
|
|
<img
|
|
src={workflowImage}
|
|
alt="SNP Genotyping Workflow"
|
|
className="max-w-full min-h-90px object-contain"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default SNPWorkflow; |