flowchart changes updated

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

@@ -0,0 +1,57 @@
+const SNPGenotypingTechniques = ({ 
+  title = "Types of SNP-Based Genotyping using technique:",
+  backgroundColor = "bg-teal-50"
+}) => {
+  const techniques = [
+    {
+      name: "PCR:",
+      description: "Utilizes PCR to amplify DNA regions containing SNPs, relying on allele-specific primers, probes, or melting curve differences for SNP detection.",
+      examples: "TaqMan Assay, KASP, ARMS-PCR, qPCR, High-Resolution Melting (HRM)."
+    },
+    {
+      name: "Microarray:",
+      description: "Employs DNA microarrays to detect and analyze SNPs across the genome using hybridization with oligonucleotide probes specific to SNP loci.",
+      examples: "Affymetrix GeneChips, Illumina Infinium Arrays, SNPlex, Axiom Array Platforms, MALDI-TOF Mass Spectrometry Arrays."
+    },
+    {
+      name: "NGS:",
+      description: "Uses Next-Generation Sequencing (NGS) for high-resolution, high-throughput SNP detection and analysis.",
+      examples: "Whole-Genome Sequencing (WGS), Exome Sequencing, Targeted Sequencing, Genotyping-by-Sequencing (GBS), Double Digest Restriction-site Associated DNA (ddRAD) Sequencing."
+    }
+  ];
+
+  return (
+    <section className={`py-5 lg:py-5 ${backgroundColor}`}>
+      <div className="container-fluid px-4 lg:px-6">
+        <h2 className="text-3xl font-bold text-teal-700 mb-4">
+          {title}
+        </h2>
+        
+        <ol className="space-y-4 lg:px-6" style={{color: '#555555'}}>
+          {techniques.map((technique, index) => (
+            <li key={index} className="leading-relaxed">
+              <div className="flex items-start">
+                <span 
+                  className="inline-flex items-center justify-center w-6 h-6 rounded-full text-white font-bold text-sm mr-3 flex-shrink-0 mt-0.5"
+                  style={{backgroundColor: '#faae31'}}
+                >
+                  {index + 1}
+                </span>
+                <div className="flex-1">
+                  <span className="font-semibold text-base">{technique.name}</span>
+                  <br />
+                  <span className="text-base">{technique.description}</span>
+                  <br />
+                  <span className="font-semibold" style={{color: '#faae31'}}>Examples: </span>
+                  <span className="text-base italic">{technique.examples}</span>
+                </div>
+              </div>
+            </li>
+          ))}
+        </ol>
+      </div>
+    </section>
+  );
+};
+
+export default SNPGenotypingTechniques;