108 lines
5.1 KiB
JavaScript
108 lines
5.1 KiB
JavaScript
// 7c - LongReadNanopore.jsx
|
|
const LongReadNanopore = () => {
|
|
const nanoporeItems = [
|
|
"Long-read Sequencing using Oxford Nanopore Technologies (ONT) delivers longer, continuous, and unambiguously assembled sequences, resulting in fewer contigs and enhancing overlap for accurate genome assembly.",
|
|
"Helps in sequencing long stretches of DNA for complete genome assemblies of microbial, human, animal and plant species.",
|
|
"Enables direct, real-time analysis of long DNA or RNA fragments by measuring changes in electric current as they pass through a nanopore embedded in a flow cell.",
|
|
"Nanopore sequencing offers advantages across multiple research areas, including genome assembly, full-length transcript detection, base modification detection, and specialized applications like rapid clinical diagnoses and outbreak surveillance."
|
|
];
|
|
|
|
const pacbioItems = [
|
|
"PCR-free SMRT technology producing Hi-Fi reads via circular consensus sequencing (CCS) mode, yielding long reads up to 25 kb with 99.9% base level accuracy.",
|
|
"Enables rapid and cost-effective generation of contiguous, complete, and accurate de novo genome assemblies, even for complex genomes.",
|
|
"Allows the haplotype resolution of complex polyploids, particularly in plants.",
|
|
"The technology can be utilized to provide a comprehensive view of the epigenome and transcriptome, as well as uncover different variants such as SNPs, homopolymer repeats, translocations, structural variants, and copy number variants."
|
|
];
|
|
|
|
return (
|
|
<section className="py-0 md:py-12 lg:py-8">
|
|
<div className="container-fluid px-0">
|
|
<h2 className="text-3xl font-bold text-teal-700 pb-2 px-4 lg:px-8 mb-4">
|
|
Long Read Sequencing Technologies
|
|
</h2>
|
|
|
|
{/* Oxford Nanopore Technology Section */}
|
|
<div className="mb-4">
|
|
<h3 className="text-xl lg:text-2xl text-gray-700 text-left pb-2 px-4 lg:px-8 mb-4">
|
|
Long Read Sequencing using Oxford Nanopore Technology
|
|
</h3>
|
|
|
|
<div className="grid grid-cols-1 lg:grid-cols-[1fr_1.14fr] min-h-[140px] lg:min-h-[280px]">
|
|
<div
|
|
className="bg-cover bg-center bg-no-repeat min-h-[220px] lg:min-h-[280px] flex items-center justify-center bg-gray-100 order-2 lg:order-1"
|
|
style={{
|
|
backgroundImage: "url('/images/oxford-nanopore-tech.png')",
|
|
backgroundColor: '#f8f9fa'
|
|
}}
|
|
>
|
|
<div className="text-center p-4">
|
|
<div className="bg-blue-600 text-white px-4 py-2 rounded-lg mb-4">
|
|
<span className="text-sm font-medium">OXFORD NANOPORE</span>
|
|
</div>
|
|
<div className="text-gray-600 text-sm">
|
|
Real-time DNA Analysis
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="px-6 lg:px-9 py-6 lg:py-0 order-1 lg:order-2">
|
|
<ul className="space-y-3 text-gray-600 leading-relaxed">
|
|
{nanoporeItems.map((item, index) => (
|
|
<li key={index} className="flex items-start">
|
|
<span
|
|
className="w-1.5 h-1.5 rounded-full mt-2 mr-3 flex-shrink-0"
|
|
style={{backgroundColor: '#faae31'}}
|
|
></span>
|
|
<span>{item}</span>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* PacBio Technology Section */}
|
|
<div>
|
|
<h3 className="text-xl lg:text-2xl text-gray-700 text-left pb-2 px-4 lg:px-8 mb-4">
|
|
Long Read Sequencing using PacBio Technology
|
|
</h3>
|
|
|
|
<div className="grid grid-cols-1 lg:grid-cols-[1.14fr_1fr] min-h-[140px] lg:min-h-[280px]">
|
|
<div className="px-6 lg:px-9 py-6 lg:py-0">
|
|
<ul className="space-y-3 text-gray-600 leading-relaxed">
|
|
{pacbioItems.map((item, index) => (
|
|
<li key={index} className="flex items-start">
|
|
<span
|
|
className="w-1.5 h-1.5 rounded-full mt-2 mr-3 flex-shrink-0"
|
|
style={{backgroundColor: '#faae31'}}
|
|
></span>
|
|
<span>{item}</span>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
|
|
<div
|
|
className="bg-cover bg-center bg-no-repeat min-h-[220px] lg:min-h-[280px] flex items-center justify-center bg-gray-100"
|
|
style={{
|
|
backgroundImage: "url('/images/pacbio-tech.png')",
|
|
backgroundColor: '#f8f9fa'
|
|
}}
|
|
>
|
|
<div className="text-center p-4">
|
|
<div className="bg-green-600 text-white px-4 py-2 rounded-lg mb-4">
|
|
<span className="text-sm font-medium">PACBIO SMRT</span>
|
|
</div>
|
|
<div className="text-gray-600 text-sm">
|
|
Hi-Fi Circular Consensus Sequencing
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export default LongReadNanopore; |