flowchart changes updated

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

@@ -0,0 +1,33 @@
+const SNPWorkflow = ({ 
+  workflowImage = "/images/flowchart/WGS_flow.svg"
+}) => {
+  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="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>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default SNPWorkflow;