UI styling update

app/dna-sequencing/enrichment-sequencing/amplicon-sequencing/components/AmpliconIntroduction.jsx

@@ -9,11 +9,19 @@ const AmpliconIntroduction = () => {
     "This multiplexing enables the simultaneous targeting of hundreds of genes from various libraries in a single run.",
     "This method is particularly useful for studying genetic variation, microbial communities, and evolutionary relationships. By selectively amplifying regions of interest, such as 16S rRNA for bacteria or ITS regions for fungi."
   ];
+  const advantageItems = [
+    "Unlike targeted or exome sequencing, amplicon sequencing narrows down to even smaller, highly specific regions, resulting in a more efficient and focused approach for certain applications, such as microbial diversity studies or detecting rare variants.",
+    "Capable of detecting low-abundance species or genetic variants, providing specific resolution of target regions.",
+    "Focuses on specific genomic regions, allowing for detailed and precise analysis.",
+    "Provides quick insights into genetic composition and diversity, facilitating timely research and diagnostics."
+  ];
 
   return (
     <IntroductionLayout
-      title="Introduction and Workflow"
-      contentItems={contentItems}
+      introTitle="Introduction and Workflow"
+      advantageTitle="Advantage"
+      introItems={contentItems}
+      advantageItems={advantageItems}
       imageUrl="/images/dna/amplicon_seq.png"
       imageAlt="Amplicon Workflow"
       badgeText="AMPLICON SEQUENCING"

app/dna-sequencing/enrichment-sequencing/amplicon-sequencing/page.js

@@ -23,7 +23,6 @@ export default function AmpliconSequencingPage() {
       
       <div className="page-content">
         <AmpliconIntroduction />
-        <AmpliconAdvantages />
         <AmpliconApplications />
         <AmpliconSpecifications />
       </div>

app/dna-sequencing/enrichment-sequencing/components/EnrichmentIntroduction.jsx

@@ -9,6 +9,12 @@ const EnrichmentIntroduction = () => {
     "In the bioinformatics analysis, these reads are aligned to a known reference genome to detect genomic alterations.",
     "It is a powerful tool for diverse genomic studies, capable of sequencing humans, livestock, plants, bacteria, and disease-related microbes."
   ];
+  const advantageItems = [
+    "Provides a more affordable alternative to Whole Genome Sequencing (WGS), making it accessible to a wider range of researchers and clinicians.",
+    "Enhances detection of single-nucleotide variants (SNVs), copy number variants (CNVs), and insertions/deletions (InDels) with sensitivity and accuracy comparable to WGS, particularly in exonic regions.",
+    "Produces smaller data sets compared to WGS, allowing for quicker and more straightforward data analysis, which accelerates research and diagnostics.",
+    "Focuses on exonic regions, which are more likely to harbor disease-causing variants, leading to a more efficient and targeted approach in identifying genetic variants."
+  ];
 
   const customBadgeContent = (
     <div className="text-center">
@@ -31,8 +37,10 @@ const EnrichmentIntroduction = () => {
 
   return (
     <IntroductionLayout
-      title="Introduction and Workflow"
-      contentItems={contentItems}
+      introTitle="Introduction and Workflow"
+      advantageTitle="Advantage"
+      introItems={contentItems}
+      advantageItems={advantageItems}
       imageUrl="/images/dna/enrichment-overview.png"
       imageAlt="Enrichment Overview"
       backgroundColor="#f8f9fa"

app/dna-sequencing/enrichment-sequencing/components/EnrichmentPipeline.jsx

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

@@ -22,7 +22,6 @@ export default function EnrichmentSequencingPage() {
       
       <div className="page-content">
         <EnrichmentIntroduction />
-        <EnrichmentAdvantages />
         <EnrichmentPipeline/>
         <EnrichmentSpecifications />
       </div>

app/dna-sequencing/enrichment-sequencing/targeted-sequencing/components/TargetedIntroduction.jsx

@@ -9,11 +9,19 @@ const TargetedIntroduction = () => {
     "Advanced bioinformatics tools are employed to analyze the sequencing data, providing detailed insights into genetic variants, their potential impact, and relevance to disease.",
     "Targeted sequencing is widely used in clinical settings for the diagnosis of genetic disorders, personalized medicine, and cancer genomics, providing actionable insights that can directly impact patient care."
   ];
+  const advantageItems = [
+    "Focuses on specific genes or genomic regions, providing high-resolution analysis of mutations that are most relevant to particular diseases or conditions.",
+    "Delivers deep coverage of targeted regions, increasing the likelihood of detecting low-frequency variants and rare mutations.",
+    "The streamlined workflow and reduced data set enable quicker data processing and analysis, allowing for more rapid diagnostic and research outcomes.",
+    "Widely used in clinical settings, targeted sequencing enables the identification of actionable genetic variants that can guide personalized treatment strategies."
+  ];
 
   return (
     <IntroductionLayout
-      title="Introduction and Workflow"
-      contentItems={contentItems}
+      introTitle="Introduction and Workflow"
+      advantageTitle="Advantage"
+      introItems={contentItems}
+      advantageItems={advantageItems}
       imageUrl="/images/dna/whole_exome_seq_targeted_dna_seq.png"
       imageAlt="Targeted Sequencing Overview"
       badgeText="TARGETED SEQUENCING"

app/dna-sequencing/enrichment-sequencing/targeted-sequencing/page.js

@@ -23,7 +23,6 @@ export default function TargetedSequencingPage() {
       
       <div className="page-content">
         <TargetedIntroduction />
-        <TargetedAdvantages />
         <TargetedApplications />
         <TargetedSpecifications />
       </div>

app/dna-sequencing/enrichment-sequencing/whole-exome/components/ExomeIntroduction.jsx

@@ -9,11 +9,19 @@ const ExomeIntroduction = () => {
     "Pinpoints potential disease-causing mutations, providing valuable insights for population genetics, genetic disease research, and cancer studies.",
     "Extensively utilized in diagnostic setting to detect clinically relevant genomic alterations associated with phenotype of the patient."
   ];
+  const advantageItems = [
+    "Cost-effective as compared to Whole Genome Sequencing (WGS), making it accessible to a broader range of researchers and clinicians.",
+    "WES offers extensive sequencing of exonic regions, improving the detection of single-nucleotide variants (SNVs), copy number variants (CNVs), and insertions/deletions (InDels) with a sensitivity comparable to WGS, ensuring high accuracy in identifying genetic variants.",
+    "WES generates a smaller data set compared to WGS, facilitating faster and easier data analysis, which can expedite research and diagnostic processes.",
+    "WES is widely used in both medical and agricultural fields, supporting advancements in disease diagnosis, personalized medicine, and crop improvement. Provides a comprehensive, high-resolution view of the genome, surpassing the coverage offered by targeted sequencing."
+  ];
 
   return (
     <IntroductionLayout
-      title="Introduction and Workflow"
-      contentItems={contentItems}
+      introTitle="Introduction and Workflow"
+      advantageTitle="Advantage"
+      introItems={contentItems}
+      advantageItems={advantageItems}
       imageUrl="/images/dna/whole_exome_seq_targeted_dna_seq.png"
       imageAlt="DNA Structure"
       useParagraphs={true}

app/dna-sequencing/enrichment-sequencing/whole-exome/page.js

@@ -26,7 +26,6 @@ export default function WholeExomeSequencingPage() {
         
         <div className="page-content">
           <ExomeIntroduction />
-          <ExomeAdvantages />
           <ExomeApplications />
           <ExomeSpecifications />
         </div>