UI styling update

This commit is contained in:
mukesh13
2025-08-21 12:40:06 +05:30
parent 543e21d2e2
commit 24ec58a76b
78 changed files with 524 additions and 307 deletions

View File

@ -9,11 +9,19 @@ const IsoIntroduction = () => {
"The bioinformatics analysis of Iso-Seq data involves assembling full-length transcripts, annotating them, and comparing them to reference genomes or existing databases. This detailed analysis reveals the complexity of gene expression, including novel isoforms and splice variants, and aids in understanding their functional roles in various biological processes.",
"Iso-Seq using PacBio is particularly valuable for exploring gene expression at a granular level, discovering novel transcripts, and enhancing annotations of complex genomes."
];
const advantageItems = [
"Unlike traditional methods, which may miss complex isoforms or splice variants, Iso-Seq captures full-length RNA sequences, enabling the identification of all transcript isoforms, including those with complex splicing and alternative start or end sites.",
"Provides high-fidelity data with long read lengths, reducing errors and missing information common in shorter-read sequencing methods.",
"Reduces challenges with transcript assembly and alignment by providing full-length reads that eliminate ambiguities and enhance transcriptome reconstruction accuracy. Improves genome annotations by precisely identifying gene structures, exons, introns, and regulatory elements, leading to more accurate functional insights.",
"Uncovers novel isoforms, splice variants, and post-transcriptional modifications, providing a comprehensive view of gene expression. This detailed approach is essential for functional genomics, transcriptomics, and alternative splicing studies, offering valuable insights into gene regulation and function."
];
return (
<IntroductionLayout
title="Introduction and Workflow"
contentItems={contentItems}
introTitle="Introduction and Workflow"
advantageTitle="Advantage"
introItems={contentItems}
advantageItems={advantageItems}
imageUrl="/images/rna/ISO_sequencing_using_pacBio.png"
imageAlt="ISO Sequencing using PacBio Workflow"
useParagraphs={true}

View File

@ -5,16 +5,15 @@ const IsoformPipeline = ({
svgContent = null, // Pass your SVG content here as JSX
svgUrl = "/images/flowchart/isoseqrna.svg",
backgroundColor = "bg-gray-50",
textColor = "text-gray-700",
className = "",
titleClassName = "",
svgClassName = "",
containerClassName = ""
}) => {
return (
<section className={`py-6 sm:py-8 lg:py-12 ${backgroundColor} ${className}`}>
<section className={`py-6 sm:py-8 lg:py-4 ${backgroundColor} ${className}`}>
<div className={`container mx-auto max-w-none px-3 sm:px-4 lg:px-6 ${containerClassName}`}>
<h2 className={`${textColor} text-left pb-4 sm:pb-6 text-xl sm:text-2xl lg:text-3xl font-normal ${titleClassName}`}>
<h2 className={"text-3xl font-bold text-teal-700 mb-4"}>
{title}
</h2>
@ -22,19 +21,19 @@ const IsoformPipeline = ({
<div className="bg-white rounded-xl shadow-lg p-4 sm:p-6 lg:p-8">
<div className="flex justify-center">
<div className="w-full max-w-6xl">
{/* SVG Container with responsive sizing */}
<div className={`w-full ${svgClassName}`}>
{/* SVG Container with responsive sizing and reduced height */}
<div className={`w-full max-h-100 overflow-hidden ${svgClassName}`}>
{svgUrl ? (
// If SVG URL/path is provided
<img
src={svgUrl}
alt="Flowchart diagram"
className="w-full h-auto object-contain"
className="w-full h-auto object-contain max-h-100"
/>
) : svgContent ? (
// If SVG content is provided as JSX
<div className="w-full">
<div className="w-full">
<div className="w-full max-h-100">
<div className="w-full max-h-100 overflow-hidden">
{svgContent}
</div>
</div>

View File

@ -20,7 +20,6 @@ export default function IsoSequencingPage() {
breadcrumbs={breadcrumbs}
/>
<IsoIntroduction />
<IsoAdvantages />
<IsoformPipeline/>
<IsoApplications />
<IsoSpecifications />