UI styling update

app/rna-sequencing/whole-transcriptome-sequencing/components/WTSIntroduction.jsx

@@ -2,17 +2,27 @@
 import IntroductionLayout from '../../../components/shared/IntroductionLayout';
 
 const WTSIntroduction = () => {
-  const contentItems = [
+  const introItems = [
     "Whole Transcriptome Sequencing (WTS) comprehensively captures and quantifies all RNA transcripts, both coding (mRNA) and long non-coding (rRNA, tRNA), providing an in-depth view of gene expression.",
     "This method combines a ribosomal RNA depletion strategy with Illumina NGS technology for efficient and precise results. The approach (1) reduces ribosomal contamination and increases the proportion of uniquely mapped reads, and (2) is particularly beneficial for species, such as bacteria, whose mRNA may lack a poly-A tail.",
     "The bioinformatics pipeline includes data preprocessing, genome mapping, transcript identification, and downstream analyses like differential expression analysis, lncRNA target gene analysis, GO enrichment analysis, and KEGG enrichment analysis.",
     "This technique is applicable to a wide range of species, including humans, mouse, rat, other animals, plants, and prokaryotes. It is compatible with various samples like; high and low-quality RNA samples, cell-free RNA, formalin-fixed paraffin-embedded (FFPE) tissues and RNA."
   ];
+  const advantageItems = [
+    "Enables the identification of novel transcripts, alternative splicing events, post-transcriptional modifications, and gene fusions without prior knowledge, making it ideal for exploratory research.",
+    "Analyzing the entire transcriptome helps gain a deeper understanding of gene regulation, cellular responses, and pathways, leading to a more comprehensive view of biological processes.",
+    "Enables allele-specific gene expression analysis, offering valuable insights into gene regulation and genetic variability.",
+    "Facilitates higher detection rates of gene fusions, indels, SNPs, and other genetic variations, offering greater reliability in research outcomes.",
+    "Widely used in fields such as cancer research and developmental biology, WTS uncovers complex molecular mechanisms and aids in the discovery of potential biomarkers.",
+    "Provides valuable insights into bacterial gene expression, helping to unravel the mysteries of gene regulation, host-pathogen interactions, antibiotic resistance, and the underlying causes of various diseases."
+  ];
 
   return (
     <IntroductionLayout
-      title="Introduction and Workflow"
-      contentItems={contentItems}
+      introTitle="Introduction and Workflow"
+      advantageTitle="Advantage"
+      introItems={introItems}
+      advantageItems={advantageItems}
       imageUrl="/images/rna/total_rna_sequencing.png"
       imageAlt="Whole Transcriptome Sequencing Workflow"
       useParagraphs={true}

app/rna-sequencing/whole-transcriptome-sequencing/components/WTSPipeline.jsx

@@ -5,16 +5,15 @@ const WTSPipeline = ({
   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 WTSPipeline = ({
         <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/whole-transcriptome-sequencing/page.js

@@ -21,7 +21,6 @@ export default function WholeTranscriptomeSequencingPage() {
         breadcrumbs={breadcrumbs}
       />
       <WTSIntroduction />
-      <WTSAdvantages />
       <WTSPipeline/>
       <WTSApplications />
       <WTSSpecifications />