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;

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

@@ -3,7 +3,10 @@ import IntroductionLayout from '../../../components/shared/IntroductionLayout';
 
 const SNPIntroduction = () => {
   const contentItems = [
-    "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."
+    "ddRAD sequencing (Double Digest Restriction-site Associated DNA) is based on the Restriction Fragmentation technique combined with Next-Generation Sequencing (NGS). It is a robust approach for \"genotyping and SNP discovery\" that doesn't require a reference genome.",
+    "The ddRAD workflow utilizes the precise cut-site specificity of restriction endonucleases to create library fragments from unique genomic regions. These fragments are then selected and sequenced, capturing data from identical genomic regions across samples.",
+    "In the bioinformatics analysis, reads are aligned to either a reference genome or de novo assembly to detect SNVs and other genetic variations. This analysis supports studies on genetic diversity, population structure, and trait associations, with advanced tools enabling the processing of large datasets to achieve high genotyping accuracy.",
+    "With the potential to develop hundreds to tens of thousands of genetic markers, ddRAD is ideal for applications in population genetics, germplasm assessment, marker-trait associations, GWAS, and QTL mapping. Its targeted, reproducible approach makes it a valuable tool for ecological and agricultural genomics."
   ];
   const advantageItems = [
     "Allows for precise identification of genetic variations at a single nucleotide level, enabling detailed mapping of genetic diversity.",
@@ -12,7 +15,6 @@ const SNPIntroduction = () => {
     "Can reveal associations between genetic variations and complex traits, allowing researchers to identify genetic contributors to health, disease, or productivity in agriculture."
   ];
 
-
   const serviceTypes = [
     "DNA Sequencing",
     "RNA Sequencing", 
@@ -20,19 +22,36 @@ const SNPIntroduction = () => {
   ];
 
   return (
-    <IntroductionLayout
-      introTitle="Introduction and Workflow"
-      advantageTitle="Advantage"
-      introItems={contentItems}
-      advantageItems={advantageItems}
-      imageUrl="/images/dna/SNP-based_genotyping_(ddRAD).png"
-      imageAlt="SNP Genotyping Overview"
-      badgeText="ISO CERTIFIED"
-      serviceTypes={serviceTypes}
-      backgroundColor="#f8f9fa"
-      badgeColor="bg-teal-600"
-      useParagraphs={true}
-    />
+    <>
+      {/* Main Heading Section */}
+      <section className="py-5 lg:py-5">
+        <div className="container-fluid px-4 lg:px-6">
+          <div className="lg:px-6">
+            <h1 className="text-3xl font-bold text-teal-700 mb-2">
+              Double Digest Restriction-site Associated DNA (ddRAD) Sequencing
+            </h1>
+            <p className="text-base leading-relaxed" style={{color: '#faae31'}}>
+              Focused, Cost-Effective Genotyping with ddRAD
+            </p>
+          </div>
+        </div>
+      </section>
+
+      {/* Introduction Layout */}
+      <IntroductionLayout
+        introTitle="Introduction and Workflow"
+        advantageTitle="Advantage"
+        introItems={contentItems}
+        advantageItems={advantageItems}
+        imageUrl="/images/dna/SNP-based_genotyping_(ddRAD).png"
+        imageAlt="SNP Genotyping Overview"
+        badgeText="ISO CERTIFIED"
+        serviceTypes={serviceTypes}
+        backgroundColor="#f8f9fa"
+        badgeColor="bg-teal-600"
+        useParagraphs={true}
+      />
+    </>
   );
 };
 

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;