DNA SNP update

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

@@ -1,5 +1,6 @@
 // app/dna-sequencing/snp-genotyping/components/SNPIntroduction.jsx
-import IntroductionLayout from '../../../components/shared/IntroductionLayout';
+
+import React from 'react';
 
 const SNPIntroduction = () => {
   const contentItems = [
@@ -8,37 +9,46 @@ const SNPIntroduction = () => {
     "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.",
-    "Provides an efficient, cost-effective solution for analyzing thousands of SNPs across large populations, ideal for high-throughput studies.",
-    "SNP markers are stable and abundant across genomes, providing high data quality, reproducibility, and scalability, which are essential for reliable genetic studies, comparative analyses across multiple populations or species, and make SNP-based genotyping a powerful tool for both research and applied genomics.",
-    "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", 
-    "Genomics Services"
-  ];
 
   return (
-    <>
+    <div className="w-full min-w-0 bg-white">
+      {/* Main container with two columns */}
+      <div className="grid grid-cols-1 lg:grid-cols-[1.2fr_1.0fr] gap-0">
         
-      {/* Introduction Layout */}
+        {/* Left Column - Content */}
-      <IntroductionLayout
+        <div className="w-full min-w-0 px-4 sm:px-6 lg:px-6 py-6">
-        introTitle="Introduction and Workflow"
+          <section>
-        advantageTitle="Advantage"
+            <h2 className="text-2xl sm:text-3xl font-bold text-teal-700 mb-4">
-        introItems={contentItems}
+              Introduction and Workflow
-        advantageItems={advantageItems}
+            </h2>
-        imageUrl="/images/dna/SNP-based_genotyping_(ddRAD).png"
+            <ul className="space-y-4 text-gray-600 leading-relaxed text-sm sm:text-base">
-        imageAlt="SNP Genotyping Overview"
+              {contentItems.map((item, index) => (
-        badgeText="ISO CERTIFIED"
+                <li key={index} className="flex items-start">
-        serviceTypes={serviceTypes}
+                  <span 
-        backgroundColor="#f8f9fa"
+                    className="inline-block w-2 h-2 rounded-full mt-2 mr-3 flex-shrink-0"
-        badgeColor="bg-teal-600"
+                    style={{backgroundColor: '#faae31'}}
-        useParagraphs={true}
+                  ></span>
+                  <span className="text-justify break-words" style={{ fontSize: 'inherit' }}>{item}</span>
+                </li>
+              ))}
+            </ul>
+          </section>
+        </div>
+
+        {/* Right Column - Image */}
+        <div className="w-full min-w-0 relative p-4 lg:p-6">
+          <div className="flex flex-col items-center justify-center">
+            <div className="w-full max-w-md">
+              <img 
+                src="/images/dna/SNP-based_genotyping_(ddRAD).png"
+                alt="SNP Genotyping Overview"
+                className="w-full h-auto object-contain"
               />
-    </>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
   );
 };
 

app/dna-sequencing/snp-genotyping/ddRAD-sequencing/page.js

@@ -1,6 +1,7 @@
 // app/dna-sequencing/snp-genotyping/page.js
 import DNATitleBar from '../../../components/shared/DNATitleBar';
 import SNPIntroduction from '../components/SNPIntroduction';
+import SNPAdvantages from '../components/SNPAdvantages';
 import SNPApplications from '../components/SNPApplications';
 import SNPSpecifications from '../components/SNPSpecifications';
 import PageLayout from '../../../components/Layout/PageLayout';
@@ -25,6 +26,7 @@ export default function ddRADPage() {
         
         <div className="page-content">
           <SNPIntroduction />
+          <SNPAdvantages/>
           <SNPApplications />
           <SNPSpecifications />
         </div>