UI styling update

This commit is contained in:
mukesh13
2025-08-21 13:08:42 +05:30
parent 24ec58a76b
commit 500802e62f
31 changed files with 144 additions and 173 deletions

View File

@ -1,14 +1,28 @@
// 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-16">
<section className="py-0 md:py-12 lg:py-8">
<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">
<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-12">
<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>
@ -32,11 +46,16 @@ const LongReadNanopore = () => {
</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 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>
@ -50,11 +69,16 @@ const LongReadNanopore = () => {
<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 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>