DNA image update

app/components/Layout/Header.jsx

@@ -60,7 +60,7 @@ const Header = () => {
                 <ul className="absolute top-full left-0 bg-white shadow-lg rounded-md py-2 w-48 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-300 z-50 border border-gray-100">
                   <li className="relative group/dna">
                     <Link
-                      href="#"
+                      href="/dna-sequencing"
                       className="flex items-center justify-between px-4 py-3 text-sm text-gray-700 hover:bg-gray-50 hover:text-teal-600 border-b border-gray-50"
                     >
                       <span className="font-medium">DNA Sequencing</span>
@@ -285,7 +285,7 @@ const Header = () => {
                   </li>
                   <li className="relative group/rna">
                     <Link
-                      href="#"
+                      href="rna-sequencing"
                       className="flex items-center justify-between px-4 py-3 text-sm text-gray-700 hover:bg-gray-50 hover:text-teal-600"
                     >
                       <span className="font-medium">RNA Sequencing</span>

app/components/shared/IntroductionLayout.jsx

@@ -1,5 +1,4 @@
 // components/shared/IntroductionLayout.jsx
-
 const IntroductionLayout = ({ 
   title = "Introduction and Workflow",
   contentItems = [],
@@ -11,35 +10,37 @@ const IntroductionLayout = ({
   badgeColor = "bg-teal-600"
 }) => {
   return (
-    <section className="py-0 md:py-12 lg:py-10">
-      <div className="container-fluid px-0">
+    <section className="py-0 md:py-12 lg:py-10 w-full">
+      <div className="w-full max-w-full px-0">
         <h2 className="text-2xl lg:text-3xl text-gray-700 text-left pb-2 px-4 lg:px-8 mb-4">
           {title}
         </h2>
         
         {/* Two column layout */}
-        <div className="grid grid-cols-1 lg:grid-cols-[1.14fr_1fr] min-h-[140px] lg:min-h-[280px]">
+        <div className="grid grid-cols-1 lg:grid-cols-[1.2fr_1.0fr] w-full gap-4">
           {/* Left side content */}
-          <div className="px-6 lg:px-9 py-6 lg:py-0">
-            <ul className="list-disc list-inside space-y-3 text-gray-600 leading-relaxed lg:px-10 text-justify-center">
+          <div className="px-6 lg:px-9 py-6 lg:py-8 flex items-start">
+            <ul className="list-disc list-inside space-y-4 text-gray-600 leading-relaxed text-sm lg:text-base text-justify">
               {contentItems.map((item, index) => (
                 <li key={index}>{item}</li>
               ))}
             </ul>
           </div>
           
-          {/* Right side image */}
-          <div 
-            style={{ 
-              backgroundImage: imageUrl ? `url('${imageUrl}')` : 'none',
-              backgroundColor: backgroundColor
-            }}
-          >
+          {/* Right side image - increased image size */}
+          <div className="flex items-center justify-center p-2 lg:p-4 w-full">
+            {imageUrl && (
+              <img 
+                src={imageUrl} 
+                alt={imageAlt}
+                className="object-contain"
+                style={{ height: '350px', width: '500px' }}
+              />
+            )}
           </div>
         </div>
       </div>
     </section>
   );
 };
-
 export default IntroductionLayout;

app/dna-sequencing/components/AboutDNA.jsx

@@ -0,0 +1,31 @@
+'use client';
+import React from 'react';
+
+const AboutDNA = () => {
+  return (
+    <section className="pt-6 bg-white">
+      <div className="container mx-auto px-6">
+        <h2 className="text-4xl font-bold text-gray-700 text-left pb-2">
+          About DNA Sequencing
+        </h2>
+        <h2 className="text-lg font-semibold text-gray-600 mb-4">
+          Exploring Life's Blueprint with Every Sequence
+        </h2>
+        
+        <div className="mb-6 text-justify">
+          <p className="text-gray-600 leading-relaxed text-base mb-4">
+            DNA sequencing is a method used to determine the precise order of nucleotides 
+            (adenine, thymine, cytosine, and guanine) in a DNA molecule. This information is 
+            critical for understanding genetic information, mutations, and their roles in disease, 
+            evolution, and various biological processes.
+          </p>
+          <p className="text-gray-600 leading-relaxed text-base">
+            Different DNA sequencing approaches using Next Generation sequencing are listed below:
+          </p>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default AboutDNA;

app/dna-sequencing/components/DNATable.jsx

@@ -0,0 +1,172 @@
+'use client';
+import React from 'react';
+
+const DNATable = () => {
+  const sequencingData = [
+    {
+      approach: { name: 'Whole-Genome Sequencing (WGS)', link: '/dna-sequencing/whole-genome-sequencing' },
+      description: (
+        <>
+          Sequencing of the entire genome to provide comprehensive genetic data. It includes{' '}
+          <a href="/dna-sequencing/whole-genome-sequencing/denovo" className="text-teal-600 hover:underline">
+            WGS-DeNovo
+          </a>{' '}
+          and{' '}
+          <a href="/dna-sequencing/whole-genome-sequencing/resequencing" className="text-teal-600 hover:underline">
+            WGS-ReSequencing
+          </a>
+        </>
+      ),
+      platform: 'Illumina, PacBio SMRT, Oxford Nanopore',
+      applications: 'Mapping genetic diversity, disease research, evolutionary studies'
+    },
+    {
+      approach: { name: 'Enrichment Sequencing', link: '/dna-sequencing/enrichment-sequencing' },
+      description: (
+        <>
+          Sequencing of the regions of interest of the genome to provide comprehensive genetic data. It includes{' '}
+          <a href="/dna-sequencing/enrichment-sequencing/whole-exome" className="text-teal-600 hover:underline">
+            Whole-Exome
+          </a>,{' '}
+          <a href="/dna-sequencing/enrichment-sequencing/amplicon-sequencing" className="text-teal-600 hover:underline">
+            Amplicon
+          </a>{' '}
+          and{' '}
+          <a href="/dna-sequencing/enrichment-sequencing/targeted-sequencing" className="text-teal-600 hover:underline">
+            Targeted Sequencing
+          </a>
+        </>
+      ),
+      platform: 'Illumina',
+      applications: 'Disease gene identification, rare disorders, clinical genomics'
+    },
+    {
+      approach: { name: 'Single Cell DNA Sequencing', link: '/dna-sequencing/single-cell-dna-sequencing' },
+      description: 'Analyzes DNA from individual cells to study cellular heterogeneity, copy number variations, and genetic diversity at single-cell resolution.',
+      platform: '10X Genomics Chromium System followed by Illumina Sequencer',
+      applications: 'Cancer research, developmental biology, rare cell analysis'
+    },
+    {
+      approach: { name: 'Metagenomics Sequencing', link: '/dna-sequencing/metagenomics-sequencing' },
+      description: 'Studies genetic material recovered directly from environmental samples to explore microbial diversity.',
+      platform: 'Illumina, PacBio SMRT',
+      applications: 'Microbial community analysis, pathogen detection, environmental research'
+    },
+    {
+      approach: { name: 'Epigenomics Sequencing', link: '/dna-sequencing/epigenomics-sequencing' },
+      description: (
+        <>
+          Studies the epigenetic modifications (e.g., DNA methylation, histone modification) of the genome. It includes{' '}
+          <a href="/dna-sequencing/epigenomics-sequencing/wgbs" className="text-teal-600 hover:underline">
+            Whole Genome Bisulphite Sequencing (WGBS)
+          </a>,{' '}
+          <a href="/dna-sequencing/epigenomics-sequencing/chip-sequencing" className="text-teal-600 hover:underline">
+            ChIP Sequencing
+          </a>,{' '}
+          <a href="/dna-sequencing/epigenomics-sequencing/atac-sequencing" className="text-teal-600 hover:underline">
+            ATAC Sequencing
+          </a>
+        </>
+      ),
+      platform: 'Illumina',
+      applications: 'Epigenetic research, cancer studies, imprinting disorders'
+    },
+    {
+      approach: { name: 'Genome Mapping', link: '/dna-sequencing/genome-mapping' },
+      description: (
+        <>
+          Focuses on determining the structure and order of genes within a genome. It includes{' '}
+          <a href="/dna-sequencing/genome-mapping/hi-c-mapping" className="text-teal-600 hover:underline">
+            Hi-C Mapping
+          </a>{' '}
+          and{' '}
+          <a href="/dna-sequencing/genome-mapping/optical-mapping" className="text-teal-600 hover:underline">
+            Optical Mapping
+          </a>
+        </>
+      ),
+      platform: 'Illumina',
+      applications: 'Structural variant detection, genomic rearrangements'
+    },
+    {
+      approach: { name: 'Whole Genome Long Read Sequencing', link: '/dna-sequencing/long-read-sequencing' },
+      description: 'Sequencing technologies that provide long DNA reads, suitable for de novo assembly and complex regions.',
+      platform: 'PacBio SMRT, Oxford Nanopore',
+      applications: 'De novo assembly, complex genome sequencing, repetitive region analysis'
+    },
+    {
+      approach: { name: 'Hybrid Genome Sequencing', link: '/dna-sequencing/hybrid-genome-sequencing' },
+      description: 'Combines short-read and long-read sequencing to optimize accuracy and genome assembly.',
+      platform: 'Illumina and Oxford Nanopore or PacBio SMRT',
+      applications: 'Comprehensive genome analysis, structural variation studies, complex genome sequencing'
+    },
+    {
+      approach: { name: 'SNP-based Genotyping', link: '/dna-sequencing/snp-genotyping' },
+      description: 'Genotyping is the process of determining the genetic constitution (genotype) of an individual by analyzing their DNA. It identifies genetic variations, such as single nucleotide variants (SNVs), insertions, deletions, or other mutations.',
+      platform: 'PCR-Based, Microarray-Based, NGS-Based Genotyping',
+      applications: 'Genetic variation analysis, disease association studies, population genetics'
+    },
+    {
+      approach: { name: 'Microsatellites (SSR/STR) Genotyping', link: '/dna-sequencing/microsatellites-ssr-str' },
+      description: 'Analyzes short tandem repeats (STRs) or simple sequence repeats (SSRs) to study genetic diversity, population structure, and individual identification.',
+      platform: 'Capillary electrophoresis, NGS-based approaches',
+      applications: 'Population genetics, breeding programs, forensic analysis, paternity testing'
+    }
+  ];
+
+  return (
+    <section className="pt-6 bg-white">
+      <div className="container mx-auto px-6">
+        <h3 className="text-2xl font-semibold text-gray-700 mb-6">DNA Sequencing Approaches</h3>
+        <div className="mb-6 text-justify">
+          <p className="text-gray-600 leading-relaxed text-base">
+            Different DNA sequencing approaches and their applications are summarized below:
+          </p>
+        </div>
+
+        <div className="overflow-x-auto mb-8">
+          <table className="w-full border-collapse border border-gray-300 text-sm bg-white shadow-sm">
+            <thead>
+              <tr className="bg-teal-50">
+                <th className="border border-gray-300 px-4 py-3 text-left font-semibold text-teal-700">
+                  Sequencing Approach
+                </th>
+                <th className="border border-gray-300 px-4 py-3 text-left font-semibold text-teal-700">
+                  Description
+                </th>
+                <th className="border border-gray-300 px-4 py-3 text-left font-semibold text-teal-700">
+                  Sequencing Platform
+                </th>
+                <th className="border border-gray-300 px-4 py-3 text-left font-semibold text-teal-700">
+                  Applications
+                </th>
+              </tr>
+            </thead>
+            <tbody>
+              {sequencingData.map((row, index) => (
+                <tr key={index} className={`${index % 2 === 1 ? 'bg-gray-50' : 'bg-white'} hover:bg-teal-25 transition-colors`}>
+                  <td className="border border-gray-300 px-4 py-3 align-top">
+                    <a href={row.approach.link} className="text-teal-600 hover:underline font-medium text-base">
+                      {row.approach.name}
+                    </a>
+                  </td>
+                  <td className="border border-gray-300 px-4 py-3 align-top text-gray-600 leading-relaxed">
+                    {row.description}
+                  </td>
+                  <td className="border border-gray-300 px-4 py-3 align-top text-gray-600 font-medium">
+                    {row.platform}
+                  </td>
+                  <td className="border border-gray-300 px-4 py-3 align-top text-gray-600 leading-relaxed">
+                    {row.applications}
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default DNATable;

app/dna-sequencing/enrichment-sequencing/amplicon-sequencing/components/AmpliconIntroduction.jsx

@@ -14,7 +14,7 @@ const AmpliconIntroduction = () => {
     <IntroductionLayout
       title="Introduction and Workflow"
       contentItems={contentItems}
-      imageUrl="/images/amplicon-workflow.png"
+      imageUrl="/images/dna/amplicon_seq.png"
       imageAlt="Amplicon Workflow"
       badgeText="AMPLICON SEQUENCING"
       badgeSubtext="Brochure to be modified from Amplicon Sequencing"

app/dna-sequencing/enrichment-sequencing/amplicon-sequencing/page.js

@@ -8,7 +8,7 @@ import PageLayout from '../../../components/Layout/PageLayout';
 export default function AmpliconSequencingPage() {
   const breadcrumbs = [
     { label: 'Home', href: '/' },
-    { label: 'Research', href: '/research' },
+    { label: 'DNA Sequencing', href: '/dna-sequencing' },
     { label: 'Enrichment Sequencing', href: '/dna-sequencing/enrichment-sequencing' },
     { label: 'Amplicon Sequencing (16S/18S/ITS)', current: true }
   ];

app/dna-sequencing/enrichment-sequencing/components/EnrichmentIntroduction.jsx

@@ -33,7 +33,7 @@ const EnrichmentIntroduction = () => {
     <IntroductionLayout
       title="Introduction and Workflow"
       contentItems={contentItems}
-      imageUrl="/images/enrichment-overview.png"
+      imageUrl="/images/dna/enrichment-overview.png"
       imageAlt="Enrichment Overview"
       backgroundColor="#f8f9fa"
       customBadgeContent={customBadgeContent}

app/dna-sequencing/enrichment-sequencing/page.js

@@ -8,7 +8,7 @@ import EnrichmentPipeline from './components/EnrichmentPipeline';
 export default function EnrichmentSequencingPage() {
   const breadcrumbs = [
     { label: 'Home', href: '/' },
-    { label: 'Research', href: '/research' },
+    { label: 'DNA Sequencing', href: '/dna-sequencing' },
     { label: 'Enrichment Sequencing', current: true }
   ];
 

app/dna-sequencing/enrichment-sequencing/targeted-sequencing/components/TargetedIntroduction.jsx

@@ -14,7 +14,7 @@ const TargetedIntroduction = () => {
     <IntroductionLayout
       title="Introduction and Workflow"
       contentItems={contentItems}
-      imageUrl="/images/targeted-sequencing-overview.png"
+      imageUrl="/images/dna/whole_exome_seq_targeted_dna_seq.png"
       imageAlt="Targeted Sequencing Overview"
       badgeText="TARGETED SEQUENCING"
       badgeSubtext="Targeted Region of Interest"

app/dna-sequencing/enrichment-sequencing/targeted-sequencing/page.js

@@ -8,7 +8,7 @@ import PageLayout from '../../../components/Layout/PageLayout';
 export default function TargetedSequencingPage() {
   const breadcrumbs = [
     { label: 'Home', href: '/' },
-    { label: 'Research', href: '/research' },
+    { label: 'DNA Sequencing', href: '/dna-sequencing' },
     { label: 'Enrichment Sequencing', href: '/dna-sequencing/enrichment-sequencing' },
     { label: 'Targeted DNA Sequencing', current: true }
   ];

app/dna-sequencing/enrichment-sequencing/whole-exome/components/ExomeIntroduction.jsx

@@ -14,7 +14,7 @@ const ExomeIntroduction = () => {
     <IntroductionLayout
       title="Introduction and Workflow"
       contentItems={contentItems}
-      imageUrl="/images/dna.jpg"
+      imageUrl="/images/dna/whole_exome_seq_targeted_dna_seq.png"
       imageAlt="DNA Structure"
       useParagraphs={true}
     />

app/dna-sequencing/epigenomics-sequencing/atac-sequencing/components/ATACIntroduction.jsx

@@ -14,7 +14,7 @@ const ATACIntroduction = () => {
     <IntroductionLayout
       title="Introduction and Workflow"
       contentItems={contentItems}
-      imageUrl="/images/atac-workflow.png"
+      imageUrl="/images/dna/atac_sequencin.png"
       imageAlt="ATAC Workflow"
       badgeText="ATAC WORKFLOW"
       badgeSubtext="Workflow from Assay for Transposase-Accessible Chromatin (ATAC) Sequencing"

app/dna-sequencing/epigenomics-sequencing/atac-sequencing/page.js

@@ -9,7 +9,7 @@ import PageLayout from '../../../components/Layout/PageLayout';
 export default function ATACSequencingPage() {
   const breadcrumbs = [
     { label: 'Home', href: '/' },
-    { label: 'Research', href: '/research' },
+    { label: 'DNA Sequencing', href: '/dna-sequencing' },
     { label: 'Epigenomics Sequencing', href: '/dna-sequencing/epigenomics-sequencing' },
     { label: 'ATAC (Assay for Transposase-Accessible Chromatin) Sequencing', current: true }
   ];

app/dna-sequencing/epigenomics-sequencing/chip-sequencing/components/ChIPIntroduction.jsx

@@ -14,7 +14,7 @@ const ChIPIntroduction = () => {
     <IntroductionLayout
       title="Introduction and Workflow"
       contentItems={contentItems}
-      imageUrl="/images/chip-workflow.png"
+      imageUrl="/images/dna/ChIP-sequencing.png"
       imageAlt="ChIP Workflow"
       badgeText="ChIP WORKFLOW"
       badgeSubtext="Workflow from Chromatin Immunoprecipitation (ChIP) Sequencing"

app/dna-sequencing/epigenomics-sequencing/chip-sequencing/page.js

@@ -9,7 +9,7 @@ import PageLayout from '../../../components/Layout/PageLayout';
 export default function ChIPSequencingPage() {
   const breadcrumbs = [
     { label: 'Home', href: '/' },
-    { label: 'Research', href: '/research' },
+    { label: 'DNA Sequencing', href: '/dna-sequencing' },
     { label: 'Epigenomics Sequencing', href: '/dna-sequencing/epigenomics-sequencing' },
     { label: 'ChIP (Chromatin immunoprecipitation) Sequencing', current: true }
   ];

app/dna-sequencing/epigenomics-sequencing/page.js

@@ -8,7 +8,7 @@ import PageLayout from '../../components/Layout/PageLayout';
 export default function EpigenomicsSequencingPage() {
   const breadcrumbs = [
     { label: 'Home', href: '/' },
-    { label: 'Research', href: '/research' },
+    { label: 'DNA Sequencing', href: '/dna-sequencing' },
     { label: 'Epigenomics Sequencing', current: true }
   ];
 

app/dna-sequencing/epigenomics-sequencing/wgbs/components/WGBSIntroduction.jsx

@@ -14,7 +14,7 @@ const WGBSIntroduction = () => {
     <IntroductionLayout
       title="Introduction and Workflow"
       contentItems={contentItems}
-      imageUrl="/images/wgbs-workflow.png"
+      imageUrl="/images/dna/whole_genome_bisulphate_sequencing.png"
       imageAlt="WGBS Workflow"
       badgeText="WGBS WORKFLOW"
       badgeSubtext="Workflow from Whole Genome Bisulfite Sequencing (WGBS)"

app/dna-sequencing/epigenomics-sequencing/wgbs/page.js

@@ -9,7 +9,7 @@ import PageLayout from '../../../components/Layout/PageLayout';
 export default function WGBSPage() {
   const breadcrumbs = [
     { label: 'Home', href: '/' },
-    { label: 'Research', href: '/research' },
+    { label: 'DNA Sequencing', href: '/dna-sequencing' },
     { label: 'Epigenomics Sequencing', href: '/dna-sequencing/epigenomics-sequencing' },
     { label: 'Whole Genome Bisulphite Sequencing', current: true }
   ];

app/dna-sequencing/genome-mapping/hi-c-mapping/components/HiCMappingIntroduction.jsx

@@ -15,7 +15,7 @@ const HiCMappingIntroduction = () => {
     <IntroductionLayout
       title="Introduction and Workflow"
       contentItems={contentItems}
-      imageUrl="/images/hic-mapping-workflow.png"
+      imageUrl="/images/dna/hic-sequencing.png"
       imageAlt="Hi-C Mapping Workflow"
       useParagraphs={true}
     />

app/dna-sequencing/genome-mapping/hi-c-mapping/page.js

@@ -20,7 +20,7 @@ export default function HiCMappingPage() {
       current: false 
     },
     { 
-      label: 'Research', 
+      label: 'DNA Sequencing', 
       href: '/dna-sequencing', 
       current: false 
     },

app/dna-sequencing/genome-mapping/optical-mapping/components/OpticalMappingIntroduction.jsx

@@ -15,7 +15,7 @@ const OpticalMappingIntroduction = () => {
     <IntroductionLayout
       title="Introduction and Workflow"
       contentItems={contentItems}
-      imageUrl="/images/optical-mapping-workflow.png"
+      imageUrl="/images/dna/optical_mapping.png"
       imageAlt="Optical Mapping Workflow"
       useParagraphs={true}
     />

app/dna-sequencing/genome-mapping/optical-mapping/page.js

@@ -20,7 +20,7 @@ export default function OpticalMappingPage() {
       current: false 
     },
     { 
-      label: 'Research', 
+      label: 'DNA Sequencing', 
       href: '/dna-sequencing', 
       current: false 
     },

app/dna-sequencing/genome-mapping/page.js

@@ -20,7 +20,7 @@ export default function GenomeMappingPage() {
       current: false 
     },
     { 
-      label: 'Research', 
+      label: 'DNA Sequencing', 
       href: '/dna-sequencing', 
       current: false 
     },

app/dna-sequencing/hybrid-genome-sequencing/components/HybridIntroduction.jsx

@@ -13,7 +13,7 @@ const HybridIntroduction = () => {
     <IntroductionLayout
       title="Introduction and Workflow"
       contentItems={contentItems}
-      imageUrl="/images/sample-process-steps.png"
+      imageUrl="/images/dna/hybrid_genome_seq.png"
       imageAlt="Sample Process Steps"
       useParagraphs={true}
     />

app/dna-sequencing/hybrid-genome-sequencing/page.js

@@ -21,7 +21,7 @@ export default function HybridGenomeSequencingPage() {
       current: false 
     },
     { 
-      label: 'Research', 
+      label: 'DNA Sequencing', 
       href: '/dna-sequencing', 
       current: false 
     },

app/dna-sequencing/long-read-sequencing/components/LongReadComparison.jsx

@@ -69,7 +69,7 @@ const LongReadComparison = () => {
         <div className="mb-12">
           <div className="text-center">
             <img
-              src="/images/long-read-comparison.jpg"
+              src="/images/comparison-sequencers.png"
               alt="Long Read Comparison Chart"
               className="w-full max-w-4xl mx-auto rounded-lg border shadow-md"
             />

app/dna-sequencing/long-read-sequencing/components/LongReadIntroduction.jsx

@@ -12,7 +12,7 @@ const LongReadIntroduction = () => {
     <IntroductionLayout
       title="Introduction and Workflow"
       contentItems={contentItems}
-      imageUrl="/images/long-read-intro.png"
+      imageUrl="/images/dna/whole_genome_long_read_seq.png"
       imageAlt="Long Read Sequencing"
       badgeText="LONG READ SEQUENCING"
       badgeSubtext="Oxford Nanopore & PacBio Platforms"

app/dna-sequencing/long-read-sequencing/page.js

@@ -10,7 +10,6 @@ import PageLayout from '../../components/Layout/PageLayout';
 export default function LongReadSequencingPage() {
   const breadcrumbs = [
     { label: 'Home', href: '/' },
-    { label: 'Research', href: '/research' },
     { label: 'DNA Sequencing', href: '/dna-sequencing' },
     { label: 'Whole Genome Long Read Sequencing', current: true }
   ];

app/dna-sequencing/metagenomics-sequencing/page.js

@@ -21,7 +21,7 @@ export default function MetagenomicsSequencingPage() {
       current: false 
     },
     { 
-      label: 'Research', 
+      label: 'DNA Sequencing', 
       href: '/dna-sequencing', 
       current: false 
     },

app/dna-sequencing/microsatellites-ssr-str/page.js

@@ -20,7 +20,7 @@ export default function MicrosatellitesSSRSTRPage() {
       current: false 
     },
     { 
-      label: 'Research', 
+      label: 'DNA Sequencing', 
       href: '/dna-sequencing', 
       current: false 
     },

app/dna-sequencing/page.js

@@ -0,0 +1,23 @@
+// app/rna-sequencing/whole-transcriptome-sequencing/page.js
+import TitleBar from '../components/shared/TitleBar'
+import AboutDNA from './components/AboutDNA';
+import DNATable from './components/DNATable';
+import PageLayout from '../components/Layout/PageLayout';
+
+export default function DNAPage() {
+  const breadcrumbs = [
+    { label: 'Home', href: '/', current: false },
+    { label: 'DNA Sequencing', href: '#', current: true }
+  ];
+
+  return (
+    <PageLayout fixedHeader={true}>
+      <TitleBar 
+        title="DNA Sequencing"
+        breadcrumbs={breadcrumbs}
+      />
+      <AboutDNA />
+      <DNATable />
+    </PageLayout>
+  );
+}

app/dna-sequencing/single-cell-dna-sequencing/components/SingleCellIntroduction.jsx

@@ -14,7 +14,7 @@ const SingleCellIntroduction = () => {
     <IntroductionLayout
       title="Introduction and Workflow"
       contentItems={contentItems}
-      imageUrl="/images/single-cell-dna-sequencing.png"
+      imageUrl="/images/dna/single_cell_dna_sequencing.png"
       imageAlt="Single Cell DNA Sequencing"
       useParagraphs={true}
     />

app/dna-sequencing/single-cell-dna-sequencing/page.js

@@ -21,7 +21,7 @@ export default function SingleCellDNASequencingPage() {
       current: false 
     },
     { 
-      label: 'Research', 
+      label: 'DNA Sequencing', 
       href: '/dna-sequencing', 
       current: false 
     },

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

@@ -16,7 +16,7 @@ const SNPIntroduction = () => {
     <IntroductionLayout
       title="Introduction and Workflow"
       contentItems={contentItems}
-      imageUrl="/images/snp-genotyping-overview.png"
+      imageUrl="/images/dna/SNP-based_genotyping_(ddRAD).png"
       imageAlt="SNP Genotyping Overview"
       badgeText="ISO CERTIFIED"
       serviceTypes={serviceTypes}

app/dna-sequencing/whole-genome-sequencing/components/WGSIntroduction.jsx

@@ -14,7 +14,7 @@ const WGSIntroduction = () => {
     <IntroductionLayout
       title="Introduction and Workflow"
       contentItems={contentItems}
-      imageUrl="/images/denovo-workflow.png"
+      imageUrl="/images/dna/whole_genome_seq-normal_denovo.png"
       imageAlt="Sample Process Steps"
       useParagraphs={true}
     />

app/dna-sequencing/whole-genome-sequencing/denovo/components/DenovoIntroduction.jsx

@@ -14,7 +14,7 @@ const DenovoIntroduction = () => {
     <IntroductionLayout
       title="Introduction and Workflow"
       contentItems={contentItems}
-      imageUrl="/images/denovo.png"
+      imageUrl="/images/dna/whole_genome_seq-normal_denovo.png"
       imageAlt="De Novo Assembly Workflow"
       badgeText="DE NOVO ASSEMBLY"
       badgeSubtext="Brochure from whole genome"

app/dna-sequencing/whole-genome-sequencing/denovo/page.js

@@ -9,7 +9,7 @@ import PageLayout from '../../../components/Layout/PageLayout';
 export default function WholeGenomeDenovoPage() {
   const breadcrumbs = [
     { label: 'Home', href: '/' },
-    { label: 'Research', href: '/research' },
+    { label: 'DNA Sequencing', href: '/dna-sequencing' },
     { label: 'Whole Genome Sequencing', href: '/dna-sequencing/whole-genome-sequencing' },
     { label: 'Whole Genome Denovo Sequencing', current: true }
   ];

app/dna-sequencing/whole-genome-sequencing/page.js

@@ -8,7 +8,7 @@ import PageLayout from '@/app/components/Layout/PageLayout';
 export default function WholeGenomeSequencingPage() {
   const breadcrumbs = [
     { label: 'Home', href: '/' },
-    { label: 'Research', href: '/research' },
+    { label: 'DNA Sequencing', href: '/dna-sequencing' },
     { label: 'Whole Genome Sequencing', current: true }
   ];
 

app/dna-sequencing/whole-genome-sequencing/resequencing/components/ResequencingIntroduction.jsx

@@ -14,7 +14,7 @@ const ResequencingIntroduction = () => {
     <IntroductionLayout
       title="Introduction and Workflow"
       contentItems={contentItems}
-      imageUrl="/images/resequencing-workflow.png"
+      imageUrl="/images/dna/resequencing-workflow.png"
       imageAlt="Resequencing Workflow"
       badgeText="RESEQUENCING"
       badgeSubtext="Change only sequencing and analysis by adding it from whole exome"

app/dna-sequencing/whole-genome-sequencing/resequencing/page.js

@@ -9,7 +9,7 @@ import PageLayout from '../../../components/Layout/PageLayout';
 export default function WholeGenomeResequencingPage() {
   const breadcrumbs = [
     { label: 'Home', href: '/' },
-    { label: 'Research', href: '/research' },
+    { label: 'DNA Sequencing', href: '/dna-sequencing' },
     { label: 'Whole Genome Sequencing', href: '/dna-sequencing/whole-genome-sequencing' },
     { label: 'Whole Genome ReSequencing', current: true }
   ];

app/rna-sequencing/circular-rna-sequencing/components/CircularIntroduction.jsx

@@ -13,7 +13,8 @@ const CircularIntroduction = () => {
     <IntroductionLayout
       title="Introduction and Workflow"
       contentItems={contentItems}
-      badgeSubtext="image from Circular RNA Sequencing"
+      imageUrl="/images/rna/circular_rna_sequencing.png"
+      imageAlt="Circular RNA Sequencing Workflow"
       useParagraphs={true}
     />
   );

app/rna-sequencing/components/AboutRNA.jsx

@@ -0,0 +1,28 @@
+'use client';
+import React from 'react';
+
+const AboutRNA = () => {
+  return (
+    <section className="pt-6 bg-white">
+      <div className="container mx-auto px-6">
+        <h2 className="text-4xl font-bold text-gray-700 text-left pb-2">
+          About RNA Sequencing
+        </h2>
+        <h2 className="text-lg font-semibold text-gray-600 mb-4">
+          Where RNA Meets Revolutionary Research
+        </h2>
+        
+        <div className="mb-6 text-justify">
+          <p className="text-gray-600 leading-relaxed text-base mb-4">
+            RNA sequencing (RNA-Seq) is a method used to determine the sequence and quantity of RNA present in a sample, providing insight into gene expression, alternative splicing, and non-coding RNA functions. It is essential for understanding various biological processes, including disease mechanisms, gene regulation, and cellular responses.
+          </p>
+          <p className="text-gray-600 leading-relaxed text-base">
+            Different RNA sequencing approaches using Next-Generation Sequencing (NGS) are listed below:
+          </p>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default AboutRNA;

app/rna-sequencing/components/RNATable.jsx

@@ -0,0 +1,156 @@
+'use client';
+import React from 'react';
+
+const RNATable = () => {
+  const sequencingData = [
+    {
+      approach: { name: 'Whole Transcriptome (Total RNA) Sequencing', link: '/rna-sequencing/whole-transcriptome-sequencing' },
+      description: (
+        <>
+          Sequencing of all RNA molecules in a sample, including mRNA and non-coding RNA.
+          Captures and quantifies all RNA transcripts, both coding and long non-coding RNAs.
+        </>
+      ),
+      platform: 'Illumina NovaSeq 6000/ NovaSeq X Plus',
+      applications: 'Gene expression profiling, discovery of novel RNAs, transcriptome analysis'
+    },
+    {
+      approach: { name: 'mRNA Sequencing (mRNA-Seq)', link: '/rna-sequencing/mrna-sequencing' },
+      description: (
+        <>
+          Focuses on sequencing messenger RNA to study gene expression and alternative splicing.
+          Targets polyadenylated (poly-A) transcripts for precise gene expression analysis.
+        </>
+      ),
+      platform: 'Illumina NovaSeq 6000/ NovaSeq X',
+      applications: 'Quantifying gene expression, alternative splicing, transcript discovery'
+    },
+    {
+      approach: { name: 'Small RNA Sequencing (sRNA-Seq)', link: '/rna-sequencing/small-rna-sequencing' },
+      description: (
+        <>
+          Detects and sequences small RNA species, such as microRNA (miRNA) and piRNA, in a sample.
+          Analyzes small non-coding RNAs under 200 nucleotides in length.
+        </>
+      ),
+      platform: 'Illumina MiSeq, Nextseq 550',
+      applications: 'miRNA profiling, regulatory RNA studies, biomarker discovery'
+    },
+    {
+      approach: { name: 'Long Non-Coding RNA (lncRNA) Sequencing', link: '/rna-sequencing/lncrna-sequencing' },
+      description: (
+        <>
+          Focuses on sequencing long non-coding RNAs, which play crucial roles in gene regulation.
+          Identifies RNA molecules longer than 200 nucleotides that do not code for proteins.
+        </>
+      ),
+      platform: 'Illumina NovaSeq 6000/ NovaSeq X',
+      applications: 'Gene regulation, disease mechanisms, novel lncRNA discovery'
+    },
+    {
+      approach: { name: 'Metatranscriptomics', link: '/rna-sequencing/metatranscriptomics-sequencing' },
+      description: (
+        <>
+          Sequencing of RNA from microbial communities to understand gene expression in environmental samples.
+          Examines active gene expression in entire microbial ecosystems.
+        </>
+      ),
+      platform: 'Illumina NovaSeq 6000/ NovaSeq X',
+      applications: 'Microbial community analysis, environmental and ecological research'
+    },
+    {
+      approach: { name: 'Degradome Sequencing', link: '/rna-sequencing/degradome-sequencing' },
+      description: (
+        <>
+          Targets and sequences degraded RNA to study RNA degradation processes and associated regulatory mechanisms.
+          Also called Parallel Analysis of RNA Ends (PARE).
+        </>
+      ),
+      platform: 'Illumina NovaSeq 6000/ NovaSeq X',
+      applications: 'RNA stability, degradation pathway analysis, regulation of RNA turnover'
+    },
+    {
+      approach: { name: 'Isoform Sequencing (Iso-Seq)', link: '/rna-sequencing/iso-sequencing' },
+      description: (
+        <>
+          Uses long-read sequencing to capture full-length RNA isoforms, providing insights into alternative splicing.
+          Leverages PacBio's SMRT sequencing technology for detailed transcript analysis.
+        </>
+      ),
+      platform: 'PacBio SMRT, Oxford Nanopore',
+      applications: 'Full-length transcript analysis, isoform discovery, gene expression'
+    },
+    {
+      approach: { name: 'Circular RNA Sequencing', link: '/rna-sequencing/circular-rna-sequencing' },
+      description: (
+        <>
+          Focuses on the identification and sequencing of circular RNAs, which are implicated in gene regulation and disease.
+          Analyzes non-coding circular RNAs formed through back-splicing events.
+        </>
+      ),
+      platform: 'Illumina NovaSeq 6000/ NovaSeq X',
+      applications: 'Circular RNA discovery, gene regulation, disease studies'
+    },
+    {
+      approach: { name: 'Single-Cell RNA Sequencing (scRNA-Seq)', link: '/rna-sequencing/single-cell-rna-sequencing' },
+      description: (
+        <>
+          Analyzes RNA from individual cells to investigate cellular heterogeneity and gene expression at the single-cell level.
+          Explores transcriptomic diversity within complex tissues.
+        </>
+      ),
+      platform: '10X Genomics Chromium System followed by Illumina Sequencer',
+      applications: 'Single-cell gene expression, cellular diversity, rare cell analysis'
+    }
+  ];
+
+  return (
+    <section className="pt-6 bg-white">
+      <div className="container mx-auto px-6">
+        <h3 className="text-2xl font-semibold text-gray-700 mb-6">RNA Sequencing Approaches</h3>
+        <div className="overflow-x-auto mb-8">
+          <table className="w-full border-collapse border border-gray-300 text-sm bg-white shadow-sm">
+            <thead>
+              <tr className="bg-teal-50">
+                <th className="border border-gray-300 px-4 py-3 text-left font-semibold text-teal-700">
+                  Sequencing Approach
+                </th>
+                <th className="border border-gray-300 px-4 py-3 text-left font-semibold text-teal-700">
+                  Description
+                </th>
+                <th className="border border-gray-300 px-4 py-3 text-left font-semibold text-teal-700">
+                  Sequencing Platform
+                </th>
+                <th className="border border-gray-300 px-4 py-3 text-left font-semibold text-teal-700">
+                  Applications
+                </th>
+              </tr>
+            </thead>
+            <tbody>
+              {sequencingData.map((row, index) => (
+                <tr key={index} className={`${index % 2 === 1 ? 'bg-gray-50' : 'bg-white'} hover:bg-teal-25 transition-colors`}>
+                  <td className="border border-gray-300 px-4 py-3 align-top">
+                    <a href={row.approach.link} className="text-teal-600 hover:underline font-medium text-base">
+                      {row.approach.name}
+                    </a>
+                  </td>
+                  <td className="border border-gray-300 px-4 py-3 align-top text-gray-600 leading-relaxed">
+                    {row.description}
+                  </td>
+                  <td className="border border-gray-300 px-4 py-3 align-top text-gray-600 font-medium">
+                    {row.platform}
+                  </td>
+                  <td className="border border-gray-300 px-4 py-3 align-top text-gray-600 leading-relaxed">
+                    {row.applications}
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default RNATable;

app/rna-sequencing/degradome-sequencing/components/DegradomeIntroduction.jsx

@@ -13,7 +13,8 @@ const DegradomeIntroduction = () => {
     <IntroductionLayout
       title="Introduction and Workflow"
       contentItems={contentItems}
-      badgeSubtext="Brochure from Degradome sequencing"
+      imageUrl="/images/rna/degradome_sequencing.png"
+      imageAlt="Degradome Sequencing Workflow"
       useParagraphs={true}
     />
   );

app/rna-sequencing/iso-sequencing/components/IsoIntroduction.jsx

@@ -14,7 +14,8 @@ const IsoIntroduction = () => {
     <IntroductionLayout
       title="Introduction and Workflow"
       contentItems={contentItems}
-      badgeSubtext="image from Iso Sequencing using PacBio"
+      imageUrl="/images/rna/ISO_sequencing_using_pacBio.png"
+      imageAlt="ISO Sequencing using PacBio Workflow"
       useParagraphs={true}
     />
   );

app/rna-sequencing/lncrna-sequencing/components/LncRNAIntroduction.jsx

@@ -13,7 +13,8 @@ const LncRNAIntroduction = () => {
     <IntroductionLayout
       title="Introduction and Workflow"
       contentItems={contentItems}
-      badgeSubtext="Brochure lncRNA Sequencing"
+      imageUrl="/images/rna/lncRNA_sequencing.png"
+      imageAlt="lncRNA Sequencing Workflow"
       useParagraphs={true}
     />
   );

app/rna-sequencing/metatranscriptomics-sequencing/components/MetatranscriptomicsIntroduction.jsx

@@ -13,7 +13,8 @@ const MetatranscriptomicsIntroduction = () => {
     <IntroductionLayout
       title="Introduction and Workflow"
       contentItems={contentItems}
-      badgeSubtext="Brochure Metatranscriptomics"
+      imageUrl="/images/rna/Metatranscriptomics.png"
+      imageAlt="Metatranscriptomics Workflow"
       useParagraphs={true}
     />
   );

app/rna-sequencing/mrna-sequencing/components/MRNAIntroduction.jsx

@@ -13,7 +13,7 @@ const MRNAIntroduction = () => {
     <IntroductionLayout
       title="Introduction and Workflow"
       contentItems={contentItems}
-      imageUrl="https://stock.adobe.com/in/images/messenger-rna-or-mrna-strand-3d-rendering-illustration-with-copy-space-genetics-science-medical-research-genome-replication-concepts/404350568"
+      imageUrl="/images/rna/mRNA_sequencing.png"
       imageAlt="mRNA Sequencing Workflow"
       useParagraphs={true}
     />

app/rna-sequencing/page.js

@@ -0,0 +1,23 @@
+// app/rna-sequencing/whole-transcriptome-sequencing/page.js
+import TitleBar from '../components/shared/TitleBar'
+import AboutRNA from './components/AboutRNA';
+import RNATable from './components/RNATable';
+import PageLayout from '../components/Layout/PageLayout';
+
+export default function RNAPage() {
+  const breadcrumbs = [
+    { label: 'Home', href: '/', current: false },
+    { label: 'RNA Sequencing', href: '#', current: true }
+  ];
+
+  return (
+    <PageLayout fixedHeader={true}>
+      <TitleBar 
+        title="RNA Sequencing"
+        breadcrumbs={breadcrumbs}
+      />
+      <AboutRNA />
+      <RNATable />
+    </PageLayout>
+  );
+}

app/rna-sequencing/single-cell-rna-sequencing/components/SingleCellIntroduction.jsx

@@ -13,7 +13,8 @@ const SingleCellIntroduction = () => {
     <IntroductionLayout
       title="Introduction and Workflow"
       contentItems={contentItems}
-      badgeSubtext="Workflow from Single Cell RNA Sequencing"
+      imageUrl="/images/rna/Single_cell_RNA_sequencing.png"
+      imageAlt="Single Cell RNA Sequencing Workflow"
       useParagraphs={true}
     />
   );

app/rna-sequencing/small-rna-sequencing/components/SRNAIntroduction.jsx

@@ -13,7 +13,8 @@ const SRNAIntroduction = () => {
     <IntroductionLayout
       title="Introduction and Workflow"
       contentItems={contentItems}
-      badgeSubtext="from brochure Small RNA sequencing"
+      imageUrl="/images/rna/small_RNA_sequencing.png"
+      imageAlt="Small RNA Sequencing Workflow"
       useParagraphs={true}
     />
   );

app/rna-sequencing/whole-transcriptome-sequencing/components/WTSIntroduction.jsx

@@ -13,7 +13,7 @@ const WTSIntroduction = () => {
     <IntroductionLayout
       title="Introduction and Workflow"
       contentItems={contentItems}
-      imageUrl="https://stock.adobe.com/in/images/messenger-rna-or-mrna-strand-3d-rendering-illustration-with-copy-space-genetics-science-medical-research-genome-replication-concepts/404350568"
+      imageUrl="/images/rna/total_rna_sequencing.png"
       imageAlt="Whole Transcriptome Sequencing Workflow"
       useParagraphs={true}
     />