further updates oh health,research and leader

app/dna-sequencing/snp-genotyping/components/SNPWorkflow .jsx

@@ -1,32 +1,48 @@
+import React from 'react';
+
 const SNPWorkflow = ({ 
-  workflowImage = "/images/flowchart/WGS_flow.svg"
+  workflowImage = "/images/flowchart/snp_flow.svg"
 }) => {
+  const introItems = [
+    "SNP-based genotyping identifies single nucleotide polymorphisms (SNPs) across the genome, offering insights into genetic diversity, disease associations, and trait inheritance. It is widely applied in population genetics, evolutionary biology, and plant and animal breeding."
+  ];
+
   return (
-    <section className={'py-5 lg:py-5'}>
-      <div className="container-fluid px-4 lg:px-6">
-        <h2 className="text-3xl font-bold text-teal-700 mb-4">
-          Introduction and Workflow
-        </h2>
+    <div className="w-full bg-white">
+      {/* Main container with two columns */}
+      <div className="grid grid-cols-1 lg:grid-cols-[1.2fr_1.0fr]">
         
-        <div className="lg:px-6 grid grid-cols-1 lg:grid-cols-2 gap-8 items-center">
-          <div>
-            <p className="text-base leading-relaxed" style={{color: '#555555'}}>
-              SNP-based genotyping identifies single nucleotide polymorphisms (SNPs) across the genome, 
-              offering insights into genetic diversity, disease associations, and trait inheritance. It is widely applied in 
-              population genetics, evolutionary biology, and plant and animal breeding.
-            </p>
-          </div>
-          
-          <div className="flex justify-center lg:justify-end">
-            <img 
-              src={workflowImage} 
-              alt="SNP Genotyping Workflow" 
-              className="max-w-full h-auto rounded-lg"
-            />
-          </div>
+        {/* Left Column - Content */}
+        <div className="px-6 lg:px-6 py-8">
+          {/* Introduction Section */}
+          <section>
+            <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">
+              {introItems.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>
+
+        {/* Right Column - Workflow Image */}
+        <div className="relative flex items-start justify-center p-4">
+          <img 
+            src={workflowImage}
+            alt="SNP Genotyping Workflow"
+            className="max-w-full min-h-90px object-contain"
+          />
         </div>
       </div>
-    </section>
+    </div>
   );
 };