UI styling update

app/rna-sequencing/metatranscriptomics-sequencing/components/MetatranscriptomicsIntroduction.jsx

@@ -8,11 +8,19 @@ const MetatranscriptomicsIntroduction = () => {
     "The bioinformatics workflow includes preprocessing the raw sequencing reads, performing quality control, and normalizing the data. The reads are mapped to reference genomes or databases to quantify gene expression levels. Functional annotation and pathway analysis are then carried out to understand the roles of various transcripts and their impact on microbial community functions.",
     "Metatranscriptomics is applicable to a wide range of environmental samples, such as soil, oceans, and the human gut, facilitating studies on microbial diversity, disease mechanisms, nutrient cycling, and environmental adaptation."
   ];
+  const advantageItems = [
+    "Provides insights into the functional dynamics of microorganisms by revealing active gene expression and their roles within complex communities. This approach uncovers how microorganisms contribute to ecosystem processes and their interactions.",
+    "Analyzes microbial communities directly from environmental samples, removing the need for isolating or cultivating individual microbes. This method captures a more comprehensive view of microbial diversity.",
+    "Uses next-generation sequencing (NGS) to identify novel genes and track transcriptional changes, offering high-resolution data on gene expression. This allows for precise identification of active genes, pathways, and regulatory networks within microbial communities.",
+    "Offers an advantage over metagenomics by including both microbial species information and gene expression data. This dual focus provides a deeper understanding of microbial community changes from a transcriptional perspective and aids in the discovery of potential new genes."
+  ];
 
   return (
     <IntroductionLayout
-      title="Introduction and Workflow"
-      contentItems={contentItems}
+      introTitle="Introduction and Workflow"
+      advantageTitle="Advantage"
+      introItems={contentItems}
+      advantageItems={advantageItems}
       imageUrl="/images/rna/Metatranscriptomics.png"
       imageAlt="Metatranscriptomics Workflow"
       useParagraphs={true}

app/rna-sequencing/metatranscriptomics-sequencing/components/MetatranscriptomicsPipeline.jsx

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

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

@@ -20,7 +20,6 @@ export default function MetatranscriptomicsSequencingPage() {
         breadcrumbs={breadcrumbs}
       />
       <MetatranscriptomicsIntroduction />
-      <MetatranscriptomicsAdvantages />
       <MetatranscriptomicsPipeline/>
       <MetatranscriptomicsApplications />
       <MetatranscriptomicsSpecifications />