flowchart changes updated

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

@@ -9,6 +9,7 @@ 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.",
@@ -16,38 +17,80 @@ const EnrichmentIntroduction = () => {
     "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">
-      <div className="bg-teal-600 text-white px-4 py-2 rounded-lg mb-4">
-        <span className="text-sm font-medium">ENRICHMENT SEQUENCING</span>
-      </div>
-      <div className="flex flex-col space-y-2">
-        <div className="bg-orange-400 text-white px-3 py-2 rounded text-xs">
-          Whole Exome DNA Sequencing
+  return (
+    <div className="w-full bg-white">
+      {/* Main container with two columns */}
+      <div className="grid grid-cols-1 lg:grid-cols-[1.2fr_1.0fr] min-h-screen">
+        
+        {/* Left Column - Content using existing IntroductionLayout structure */}
+        <div className="px-6 lg:px-12 py-8">
+          {/* Introduction Section */}
+          <section className="mb-8">
+            <h2 className="text-3xl font-bold text-teal-700 mb-4">
+              Introduction and Workflow
+            </h2>
+            <ul className="space-y-4 text-gray-600 leading-relaxed text-sm lg:text-base">
+              {contentItems.map((item, index) => (
+                <li key={index} className="flex items-start">
+                  <span 
+                    className="inline-block w-2 h-2 rounded-full mt-2 mr-3 flex-shrink-0"
+                    style={{backgroundColor: '#faae31'}}
+                  ></span>
+                  <span className="text-justify">{item}</span>
+                </li>
+              ))}
+            </ul>
+          </section>
+
+          {/* Advantage Section */}
+          <section>
+            <h2 className="text-3xl font-bold text-teal-700 mb-4">
+              Advantage
+            </h2>
+            <ul className="space-y-4 text-gray-600 leading-relaxed text-sm lg:text-base">
+              {advantageItems.map((item, index) => (
+                <li key={index} className="flex items-start">
+                  <span 
+                    className="inline-block w-2 h-2 rounded-full mt-2 mr-3 flex-shrink-0"
+                    style={{backgroundColor: '#faae31'}}
+                  ></span>
+                  <span className="text-justify">{item}</span>
+                </li>
+              ))}
+            </ul>
+          </section>
         </div>
-        <div className="bg-orange-400 text-white px-3 py-2 rounded text-xs">
-          Amplicon Sequencing (16S/18S/ITS)
-        </div>
-        <div className="bg-orange-400 text-white px-3 py-2 rounded text-xs">
-          Targeted Sequencing
+
+        {/* Right Column - Custom Content with Image and SVG */}
+        <div className="relative p-4">
+          <div className="flex flex-col h-full space-y-4">
+            {/* Top Section - Flowchart with larger fixed width */}
+            <div className="w-full flex items-center justify-center py-6">
+              <div className="w-full max-w-md flex items-center justify-center">
+                <img 
+                  src="/images/flowchart/enrichment_flow.svg"
+                  alt="ISO Certified Process Flow"
+                  className="w-full h-auto object-contain"
+                />
+              </div>
+            </div>
+            
+            {/* Bottom Section - Image with same width */}
+            <div className="flex items-center justify-center">
+              <div className="w-full max-w-md flex items-center justify-center">
+                <img 
+                  src="/images/dna/whole_genome_seq-normal_denovo.png"
+                  alt="Enrichment Overview"
+                  className="w-full h-auto object-contain"
+                />
+              </div>
+            </div>
+            
+          </div>
         </div>
       </div>
     </div>
   );
-
-  return (
-    <IntroductionLayout
-      introTitle="Introduction and Workflow"
-      advantageTitle="Advantage"
-      introItems={contentItems}
-      advantageItems={advantageItems}
-      imageUrl="/images/dna/enrichment-overview.png"
-      imageAlt="Enrichment Overview"
-      backgroundColor="#f8f9fa"
-      customBadgeContent={customBadgeContent}
-      useParagraphs={true}
-    />
-  );
 };
 
 export default EnrichmentIntroduction;

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

@@ -12,7 +12,7 @@ const TargetedApplications = () => {
 
   return (
     <ApplicationsLayout
-      title="Applications of Targeted Sequencing"
+      title="Applications of Custom Sequencing"
       applicationItems={applicationItems}
     />
   );

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

@@ -4,7 +4,7 @@ import IntroductionLayout from '../../../../components/shared/IntroductionLayout
 
 const TargetedIntroduction = () => {
   const contentItems = [
-    "Targeted DNA Sequencing (also know as Gene Panel Sequencing) concentrate on specific genes or genomic regions of interest, allowing for in-depth analysis of mutations that are most relevant to particular diseases or conditions.",
+    "Custom DNA Sequencing (also know as Gene Panel Sequencing) concentrate on specific genes or genomic regions of interest, allowing for in-depth analysis of mutations that are most relevant to particular diseases or conditions.",
     "The process begins with the selection of specific genes or regions, followed by the amplification of these targets through PCR. Sequencing is then performed on the amplified regions, ensuring high coverage and accuracy.",
     "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."

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

@@ -9,13 +9,13 @@ export default function TargetedSequencingPage() {
     { label: 'Home', href: '/' },
     { label: 'DNA Sequencing', href: '/dna-sequencing' },
     { label: 'Enrichment Sequencing', href: '/dna-sequencing/enrichment-sequencing' },
-    { label: 'Targeted DNA Sequencing', current: true }
+    { label: 'Custom DNA Sequencing', current: true }
   ];
 
   return (
     <PageLayout fixedHeader={true}>
       <DNATitleBar
-        title="Targeted DNA Sequencing"
+        title="Custom DNA Sequencing"
         desc="Pinpoint Precision for Your Genetic Insights"
         breadcrumbs={breadcrumbs}
       />