UI styling update
This commit is contained in:
@ -5,16 +5,15 @@ const LncRNABioinformatics = ({
|
||||
svgContent = null, // Pass your SVG content here as JSX
|
||||
svgUrl = "/images/flowchart/totalrna.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 LncRNABioinformatics = ({
|
||||
<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-180 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-180"
|
||||
/>
|
||||
) : svgContent ? (
|
||||
// If SVG content is provided as JSX
|
||||
<div className="w-full">
|
||||
<div className="w-full">
|
||||
<div className="w-full max-h-180">
|
||||
<div className="w-full max-h-180 overflow-hidden">
|
||||
{svgContent}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -8,11 +8,19 @@ const LncRNAIntroduction = () => {
|
||||
"The bioinformatics pipeline for lncRNA sequencing involves the alignment of sequencing data to reference genomes, identification of lncRNAs, quantification of their expression level, and other downstream analyses.",
|
||||
"lncRNA sequencing uncovers their roles in gene regulation and highlights their various functions, including chromatin remodeling, transcriptional control, nucleosome repositioning, and post-transcriptional processing."
|
||||
];
|
||||
const advantageItems = [
|
||||
"Identifies both well-known and novel lncRNAs, providing fresh insights into their roles and potential as biomarkers.",
|
||||
"Reveals lncRNAs' involvement in a broad range of molecular functions, such as chromatin remodeling, which is essential for regulating gene expression. This process includes modifying chromatin structure to control gene accessibility and influencing various cellular mechanisms, demonstrating lncRNAs' crucial roles in gene regulation and cellular function across mammals and plants.",
|
||||
"Provides a thorough understanding of lncRNAs' roles in gene regulation, encompassing both transcriptional and post-transcriptional levels. It highlights how lncRNAs affect transcription factors, alter nucleosome positioning, and contribute to RNA splicing and stability, thus impacting overall gene expression and cellular processes.",
|
||||
"Enables high-resolution analysis, allowing for precise detection and detailed characterization of lncRNA expression and their regulatory networks, offering a deep dive into their functional roles within cells."
|
||||
];
|
||||
|
||||
return (
|
||||
<IntroductionLayout
|
||||
title="Introduction and Workflow"
|
||||
contentItems={contentItems}
|
||||
introTitle="Introduction and Workflow"
|
||||
advantageTitle="Advantage"
|
||||
introItems={contentItems}
|
||||
advantageItems={advantageItems}
|
||||
imageUrl="/images/rna/lncRNA_sequencing.png"
|
||||
imageAlt="lncRNA Sequencing Workflow"
|
||||
useParagraphs={true}
|
||||
|
||||
@ -21,7 +21,6 @@ export default function LncRNASequencingPage() {
|
||||
breadcrumbs={breadcrumbs}
|
||||
/>
|
||||
<LncRNAIntroduction />
|
||||
<LncRNAAdvantages />
|
||||
<LncRNABioinformatics />
|
||||
<LncRNAApplications />
|
||||
<LncRNASpecifications />
|
||||
|
||||
Reference in New Issue
Block a user