Files
operify/app/dna-sequencing/long-read-sequencing/components/LongReadNanopore.jsx
2025-06-16 15:53:12 +05:30

84 lines
4.5 KiB
JavaScript

// 7c - LongReadNanopore.jsx
const LongReadNanopore = () => {
return (
<section className="py-0 md:py-12 lg:py-16">
<div className="container-fluid px-0">
<h2 className="text-2xl lg:text-3xl text-gray-700 text-left pb-2 px-4 lg:px-8 mb-8">
Long Read Sequencing Technologies
</h2>
{/* Oxford Nanopore Technology Section */}
<div className="mb-12">
<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="list-disc list-inside space-y-3 text-gray-600 leading-relaxed">
<li>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.</li>
<li>Helps in sequencing long stretches of DNA for complete genome assemblies of microbial, human, animal and plant species.</li>
<li>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.</li>
<li>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.</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="list-disc list-inside space-y-3 text-gray-600 leading-relaxed">
<li>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.</li>
<li>Enables rapid and cost-effective generation of contiguous, complete, and accurate de novo genome assemblies, even for complex genomes.</li>
<li>Allows the haplotype resolution of complex polyploids, particularly in plants.</li>
<li>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.</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;