UI styling update

app/rna-sequencing/mrna-sequencing/components/MRNAIntroduction.jsx

@@ -2,17 +2,25 @@
 import IntroductionLayout from '../../../components/shared/IntroductionLayout';
 
 const MRNAIntroduction = () => {
-  const contentItems = [
+  const introItems = [
     "Messenger RNA-Seq (mRNA-Seq) is a focused RNA-Seq method that targets polyadenylated (poly-A) transcripts, which comprise only about 1-2% of the transcriptome, mainly representing coding genes. By enriching these poly-A-tailed RNAs, mRNA-Seq offers a precise snapshot of gene expression, capturing the complete range of mRNA transcripts within a sample and enabling detailed analysis of gene activity across various conditions.",
     "mRNA-seq workflow typically includes RNA extraction, enrichment or depletion of mRNA, library preparation, and high-throughput sequencing. This workflow ensures precise and efficient capture of mRNA transcripts for thorough downstream analysis.",
     "Bioinformatics analysis for mRNA-seq involves several key steps: data preprocessing, alignment to a reference genome, quantifying gene expression levels, and advanced downstream analyses such as differential expression, pathway enrichment, and gene ontology analysis.",
     "Widely applicable across diverse research fields, including human, animal, and plant studies, providing profound insights into genetic landscapes and contributing to our understanding of gene function and regulation."
   ];
+  const advantageItems = [
+    "mRNA-Seq provides a targeted analysis of gene expression specific to protein-coding regions, making it ideal for studies focused on gene regulation, protein synthesis, and disease-related expression changes.",
+    "mRNA-Seq focuses on mRNA enrichment, which minimizes the impact of non-coding RNAs and enhances sensitivity for detecting gene expression changes.",
+    "Focusing solely on coding regions, mRNA-Seq does not require rRNA-specific probes (Costly) for ribosomal RNA removal and requires comparatively lesser data, making it a more cost-effective alternative to Whole Transcriptome Sequencing.",
+    "With a more targeted dataset, the bioinformatics analysis of mRNA-Seq is often simpler and faster, focusing on coding genes without the complexity introduced by non-coding RNAs."
+  ];
 
   return (
     <IntroductionLayout
-      title="Introduction and Workflow"
-      contentItems={contentItems}
+      introTitle="Introduction and Workflow"
+      advantageTitle="Advantage"
+      introItems={introItems}
+      advantageItems={advantageItems}
       imageUrl="/images/rna/mRNA_sequencing.png"
       imageAlt="mRNA Sequencing Workflow"
       useParagraphs={true}

app/rna-sequencing/mrna-sequencing/components/MRNAPipeline.jsx

@@ -5,16 +5,15 @@ const MRNAPipeline = ({
   svgContent = null, // Pass your SVG content here as JSX
   svgUrl = "/images/flowchart/mrna.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 MRNAPipeline = ({
         <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>

app/rna-sequencing/mrna-sequencing/page.js

@@ -21,7 +21,6 @@ export default function MRNASequencingPage() {
         breadcrumbs={breadcrumbs}
       />
       <MRNAIntroduction />
-      <MRNAAdvantages />
       <MRNAPipeline/>
       <MRNAApplications />
       <MRNASpecifications />