UI styling update

app/dna-sequencing/metagenomics-sequencing/components/MetagenomicsIntroduction.jsx

@@ -8,11 +8,19 @@ const MetagenomicsIntroduction = () => {
     "Bioinformatics analysis encompasses sequence alignment, taxonomy identification, and phylogenetic analysis. Additional analyses may involve functional annotation, comparative genomics, and statistical evaluations.",
     "Can be used to study diverse environmental samples like water, soil, and fecal matter, providing valuable insights into microbial diversity and host-microbiome interactions."
   ];
+  const advantageItems = [
+    "Offers a comprehensive view of microbial diversity in complex samples, capturing both known and novel species. NGS enables the parallel sequencing of thousands of organisms in a single run, providing high sequence coverage and detecting low-abundance microbes that may be missed or are cost-prohibitive with other techniques.",
+    "Analyzes genomes directly from environmental samples without prior isolation or cultivation, overcoming the limitations of traditional culture-based methods. This approach is effective for studying microbial communities in their natural habitats.",
+    "Reveals the metabolic capabilities and functional diversity of microbial communities, enhancing our understanding of ecosystem processes and microbial roles within various environments.",
+    "Facilitates detailed genetic and ecological analysis, supporting studies on microbial interactions, evolution, and adaptation, with broad applications in environmental monitoring, biotechnology, agriculture, and human health."
+  ];
 
   return (
     <IntroductionLayout
-      title="Introduction and Workflow"
-      contentItems={contentItems}
+      introTitle="Introduction and Workflow"
+      advantageTitle="Advantage"
+      introItems={contentItems}
+      advantageItems={advantageItems}
       imageUrl="/images/metagenomics-sequencing.png"
       imageAlt="Metagenomics Sequencing"
       useParagraphs={true}

app/dna-sequencing/metagenomics-sequencing/components/MetagenomicsPipeline.jsx

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

@@ -47,8 +47,7 @@ export default function MetagenomicsSequencingPage() {
         {/* Introduction Section */}
         <MetagenomicsIntroduction />
 
-        {/* Advantages Section */}
-        <MetagenomicsAdvantages />
+        
         <MetagenomicsPipeline/>
 
         {/* Applications Section */}