DNA image update

This commit is contained in:
mukesh13
2025-08-19 10:50:29 +05:30
parent a1526200ae
commit 04a9f5689b
75 changed files with 500 additions and 60 deletions

View File

@ -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;

View File

@ -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;

View File

@ -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"

View File

@ -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 }
];

View File

@ -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}

View File

@ -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 }
];

View File

@ -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"

View File

@ -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 }
];

View File

@ -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}
/>

View File

@ -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"

View File

@ -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 }
];

View File

@ -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"

View File

@ -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 }
];

View File

@ -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 }
];

View File

@ -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)"

View File

@ -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 }
];

View File

@ -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}
/>

View File

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

View File

@ -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}
/>

View File

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

View File

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

View File

@ -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}
/>

View File

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

View File

@ -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"
/>

View File

@ -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"

View File

@ -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 }
];

View File

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

View File

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

View File

@ -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>
);
}

View File

@ -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}
/>

View File

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

View File

@ -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}

View File

@ -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}
/>

View File

@ -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"

View File

@ -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 }
];

View File

@ -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 }
];

View File

@ -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"

View File

@ -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 }
];