UI styling update
This commit is contained in:
mukesh13
@ -9,11 +9,19 @@ const AmpliconIntroduction = () => {
|
||||
"This multiplexing enables the simultaneous targeting of hundreds of genes from various libraries in a single run.",
|
||||
"This method is particularly useful for studying genetic variation, microbial communities, and evolutionary relationships. By selectively amplifying regions of interest, such as 16S rRNA for bacteria or ITS regions for fungi."
|
||||
];
|
||||
const advantageItems = [
|
||||
"Unlike targeted or exome sequencing, amplicon sequencing narrows down to even smaller, highly specific regions, resulting in a more efficient and focused approach for certain applications, such as microbial diversity studies or detecting rare variants.",
|
||||
"Capable of detecting low-abundance species or genetic variants, providing specific resolution of target regions.",
|
||||
"Focuses on specific genomic regions, allowing for detailed and precise analysis.",
|
||||
"Provides quick insights into genetic composition and diversity, facilitating timely research and diagnostics."
|
||||
];
|
||||
|
||||
return (
|
||||
<IntroductionLayout
|
||||
title="Introduction and Workflow"
|
||||
contentItems={contentItems}
|
||||
introTitle="Introduction and Workflow"
|
||||
advantageTitle="Advantage"
|
||||
introItems={contentItems}
|
||||
advantageItems={advantageItems}
|
||||
imageUrl="/images/dna/amplicon_seq.png"
|
||||
imageAlt="Amplicon Workflow"
|
||||
badgeText="AMPLICON SEQUENCING"
|
||||
|
||||
@ -23,7 +23,6 @@ export default function AmpliconSequencingPage() {
|
||||
|
||||
<div className="page-content">
|
||||
<AmpliconIntroduction />
|
||||
<AmpliconAdvantages />
|
||||
<AmpliconApplications />
|
||||
<AmpliconSpecifications />
|
||||
</div>
|
||||
|
||||
@ -9,6 +9,12 @@ const EnrichmentIntroduction = () => {
|
||||
"In the bioinformatics analysis, these reads are aligned to a known reference genome to detect genomic alterations.",
|
||||
"It is a powerful tool for diverse genomic studies, capable of sequencing humans, livestock, plants, bacteria, and disease-related microbes."
|
||||
];
|
||||
const advantageItems = [
|
||||
"Provides a more affordable alternative to Whole Genome Sequencing (WGS), making it accessible to a wider range of researchers and clinicians.",
|
||||
"Enhances detection of single-nucleotide variants (SNVs), copy number variants (CNVs), and insertions/deletions (InDels) with sensitivity and accuracy comparable to WGS, particularly in exonic regions.",
|
||||
"Produces smaller data sets compared to WGS, allowing for quicker and more straightforward data analysis, which accelerates research and diagnostics.",
|
||||
"Focuses on exonic regions, which are more likely to harbor disease-causing variants, leading to a more efficient and targeted approach in identifying genetic variants."
|
||||
];
|
||||
|
||||
const customBadgeContent = (
|
||||
<div className="text-center">
|
||||
@ -31,8 +37,10 @@ const EnrichmentIntroduction = () => {
|
||||
|
||||
return (
|
||||
<IntroductionLayout
|
||||
title="Introduction and Workflow"
|
||||
contentItems={contentItems}
|
||||
introTitle="Introduction and Workflow"
|
||||
advantageTitle="Advantage"
|
||||
introItems={contentItems}
|
||||
advantageItems={advantageItems}
|
||||
imageUrl="/images/dna/enrichment-overview.png"
|
||||
imageAlt="Enrichment Overview"
|
||||
backgroundColor="#f8f9fa"
|
||||
|
||||
@ -5,16 +5,15 @@ const EnrichmentPipeline = ({
|
||||
svgContent = null, // Pass your SVG content here as JSX
|
||||
svgUrl = "/images/flowchart/resequencing.svg",
|
||||
backgroundColor = "bg-gray-50",
|
||||
textColor = "text-gray-700",
|
||||
className = "",
|
||||
titleClassName = "",
|
||||
svgClassName = "",
|
||||
containerClassName = ""
|
||||
}) => {
|
||||
return (
|
||||
<section className={`py-6 sm:py-8 lg:py-12 ${backgroundColor} ${className}`}>
|
||||
<section className={`py-6 sm:py-8 lg:py-4 ${backgroundColor} ${className}`}>
|
||||
<div className={`container mx-auto max-w-none px-3 sm:px-4 lg:px-6 ${containerClassName}`}>
|
||||
<h2 className={`${textColor} text-left pb-4 sm:pb-6 text-xl sm:text-2xl lg:text-3xl font-normal ${titleClassName}`}>
|
||||
<h2 className={"text-3xl font-bold text-teal-700 mb-4"}>
|
||||
{title}
|
||||
</h2>
|
||||
|
||||
@ -22,19 +21,19 @@ const EnrichmentPipeline = ({
|
||||
<div className="bg-white rounded-xl shadow-lg p-4 sm:p-6 lg:p-8">
|
||||
<div className="flex justify-center">
|
||||
<div className="w-full max-w-6xl">
|
||||
{/* SVG Container with responsive sizing */}
|
||||
<div className={`w-full ${svgClassName}`}>
|
||||
{/* SVG Container with responsive sizing and reduced height */}
|
||||
<div className={`w-full max-h-100 overflow-hidden ${svgClassName}`}>
|
||||
{svgUrl ? (
|
||||
// If SVG URL/path is provided
|
||||
<img
|
||||
src={svgUrl}
|
||||
alt="Flowchart diagram"
|
||||
className="w-full h-auto object-contain"
|
||||
className="w-full h-auto object-contain max-h-100"
|
||||
/>
|
||||
) : svgContent ? (
|
||||
// If SVG content is provided as JSX
|
||||
<div className="w-full">
|
||||
<div className="w-full">
|
||||
<div className="w-full max-h-100">
|
||||
<div className="w-full max-h-100 overflow-hidden">
|
||||
{svgContent}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -22,7 +22,6 @@ export default function EnrichmentSequencingPage() {
|
||||
|
||||
<div className="page-content">
|
||||
<EnrichmentIntroduction />
|
||||
<EnrichmentAdvantages />
|
||||
<EnrichmentPipeline/>
|
||||
<EnrichmentSpecifications />
|
||||
</div>
|
||||
|
||||
@ -9,11 +9,19 @@ const TargetedIntroduction = () => {
|
||||
"Advanced bioinformatics tools are employed to analyze the sequencing data, providing detailed insights into genetic variants, their potential impact, and relevance to disease.",
|
||||
"Targeted sequencing is widely used in clinical settings for the diagnosis of genetic disorders, personalized medicine, and cancer genomics, providing actionable insights that can directly impact patient care."
|
||||
];
|
||||
const advantageItems = [
|
||||
"Focuses on specific genes or genomic regions, providing high-resolution analysis of mutations that are most relevant to particular diseases or conditions.",
|
||||
"Delivers deep coverage of targeted regions, increasing the likelihood of detecting low-frequency variants and rare mutations.",
|
||||
"The streamlined workflow and reduced data set enable quicker data processing and analysis, allowing for more rapid diagnostic and research outcomes.",
|
||||
"Widely used in clinical settings, targeted sequencing enables the identification of actionable genetic variants that can guide personalized treatment strategies."
|
||||
];
|
||||
|
||||
return (
|
||||
<IntroductionLayout
|
||||
title="Introduction and Workflow"
|
||||
contentItems={contentItems}
|
||||
introTitle="Introduction and Workflow"
|
||||
advantageTitle="Advantage"
|
||||
introItems={contentItems}
|
||||
advantageItems={advantageItems}
|
||||
imageUrl="/images/dna/whole_exome_seq_targeted_dna_seq.png"
|
||||
imageAlt="Targeted Sequencing Overview"
|
||||
badgeText="TARGETED SEQUENCING"
|
||||
|
||||
@ -23,7 +23,6 @@ export default function TargetedSequencingPage() {
|
||||
|
||||
<div className="page-content">
|
||||
<TargetedIntroduction />
|
||||
<TargetedAdvantages />
|
||||
<TargetedApplications />
|
||||
<TargetedSpecifications />
|
||||
</div>
|
||||
|
||||
@ -9,11 +9,19 @@ const ExomeIntroduction = () => {
|
||||
"Pinpoints potential disease-causing mutations, providing valuable insights for population genetics, genetic disease research, and cancer studies.",
|
||||
"Extensively utilized in diagnostic setting to detect clinically relevant genomic alterations associated with phenotype of the patient."
|
||||
];
|
||||
const advantageItems = [
|
||||
"Cost-effective as compared to Whole Genome Sequencing (WGS), making it accessible to a broader range of researchers and clinicians.",
|
||||
"WES offers extensive sequencing of exonic regions, improving the detection of single-nucleotide variants (SNVs), copy number variants (CNVs), and insertions/deletions (InDels) with a sensitivity comparable to WGS, ensuring high accuracy in identifying genetic variants.",
|
||||
"WES generates a smaller data set compared to WGS, facilitating faster and easier data analysis, which can expedite research and diagnostic processes.",
|
||||
"WES is widely used in both medical and agricultural fields, supporting advancements in disease diagnosis, personalized medicine, and crop improvement. Provides a comprehensive, high-resolution view of the genome, surpassing the coverage offered by targeted sequencing."
|
||||
];
|
||||
|
||||
return (
|
||||
<IntroductionLayout
|
||||
title="Introduction and Workflow"
|
||||
contentItems={contentItems}
|
||||
introTitle="Introduction and Workflow"
|
||||
advantageTitle="Advantage"
|
||||
introItems={contentItems}
|
||||
advantageItems={advantageItems}
|
||||
imageUrl="/images/dna/whole_exome_seq_targeted_dna_seq.png"
|
||||
imageAlt="DNA Structure"
|
||||
useParagraphs={true}
|
||||
|
||||
@ -26,7 +26,6 @@ export default function WholeExomeSequencingPage() {
|
||||
|
||||
<div className="page-content">
|
||||
<ExomeIntroduction />
|
||||
<ExomeAdvantages />
|
||||
<ExomeApplications />
|
||||
<ExomeSpecifications />
|
||||
</div>
|
||||
|
||||
@ -9,11 +9,19 @@ const ATACIntroduction = () => {
|
||||
"The sequenced fragments are analysed using advanced bioinformatics tools to characterize the regulatory landscape, including chromatin accessibility, nucleosome mapping, and transcription factor binding.",
|
||||
"Assist in numerous applications like biomarker discovery, identification of novel enhancer, analysis of cell-type specific regulation, evolutionary studies and comparative epigenomic studies."
|
||||
];
|
||||
const advantageItems = [
|
||||
"ATAC-seq has become the method of choice for studying chromatin accessibility due to its efficiency and robust performance.",
|
||||
"Requires only 50,000 cells per sample, offering high sensitivity and making it ideal for studies with limited cell populations. This technique is versatile, applicable to both bulk tissue and single-cell analysis.",
|
||||
"Features simplified experimental steps, offering good reproducibility and a high success rate in generating reliable data.",
|
||||
"Simultaneously reveals the genomic locations of open chromatin, DNA-binding proteins, and transcription factor binding site interactions, providing a holistic view of chromatin accessibility."
|
||||
];
|
||||
|
||||
return (
|
||||
<IntroductionLayout
|
||||
title="Introduction and Workflow"
|
||||
contentItems={contentItems}
|
||||
introTitle="Introduction and Workflow"
|
||||
advantageTitle="Advantage"
|
||||
introItems={contentItems}
|
||||
advantageItems={advantageItems}
|
||||
imageUrl="/images/dna/atac_sequencin.png"
|
||||
imageAlt="ATAC Workflow"
|
||||
badgeText="ATAC WORKFLOW"
|
||||
|
||||
@ -24,8 +24,6 @@ export default function ATACSequencingPage() {
|
||||
|
||||
<div className="page-content">
|
||||
<ATACIntroduction />
|
||||
<ATACAdvantages />
|
||||
<ATACBioinformatics />
|
||||
<ATACApplications />
|
||||
<ATACSpecifications />
|
||||
</div>
|
||||
|
||||
@ -9,11 +9,19 @@ const ChIPIntroduction = () => {
|
||||
"Following this, NGS libraries are created by adding adapters and amplifying the DNA, which is subsequently sequenced on an Illumina platform.",
|
||||
"It provides valuable insights into gene regulation, revealing dysregulated pathways in cancers, developmental processes, and other biological phenomena."
|
||||
];
|
||||
const advantageItems = [
|
||||
"Offers detailed genome-wide mapping of protein-DNA interactions, identifying binding sites of transcription factors, regulators, and other DNA-associated proteins.",
|
||||
"Utilizes specific antibodies to precisely capture and sequence protein-DNA complexes, providing accurate reflections of in vivo binding events.",
|
||||
"Reveals critical insights into gene regulation and chromatin dynamics, aiding in the understanding of gene expression, regulatory mechanisms, and epigenetic modifications.",
|
||||
"Facilitates studies on gene regulation in various contexts, including developmental processes, cancer research, and other biological phenomena, enhancing our understanding of complex biological systems and diseases."
|
||||
];
|
||||
|
||||
return (
|
||||
<IntroductionLayout
|
||||
title="Introduction and Workflow"
|
||||
contentItems={contentItems}
|
||||
introTitle="Introduction and Workflow"
|
||||
advantageTitle="Advantage"
|
||||
introItems={contentItems}
|
||||
advantageItems={advantageItems}
|
||||
imageUrl="/images/dna/ChIP-sequencing.png"
|
||||
imageAlt="ChIP Workflow"
|
||||
badgeText="ChIP WORKFLOW"
|
||||
|
||||
@ -24,8 +24,6 @@ export default function ChIPSequencingPage() {
|
||||
|
||||
<div className="page-content">
|
||||
<ChIPIntroduction />
|
||||
<ChIPAdvantages />
|
||||
<ChIPBioinformatics />
|
||||
<ChIPApplications />
|
||||
<ChIPSpecifications />
|
||||
</div>
|
||||
|
||||
@ -9,6 +9,13 @@ const EpigenomicsIntroduction = () => {
|
||||
"In the bioinformatics analysis, these reads are aligned to a known reference genome to detect genomic alterations and epigenetic modifications.",
|
||||
"It is a powerful tool for diverse genomic studies, capable of sequencing humans, livestock, plants, bacteria, and disease-related microbes."
|
||||
];
|
||||
const advantageItems = [
|
||||
"Provides comprehensive analysis of epigenetic modifications including DNA methylation, histone modifications, and chromatin accessibility, offering insights into gene regulation mechanisms.",
|
||||
"Enables single-base resolution mapping of epigenetic marks across the genome, allowing for precise identification of regulatory elements and their modifications.",
|
||||
"Reveals epigenetic alterations associated with diseases, development, and environmental responses, providing insights into cellular memory and inheritance patterns.",
|
||||
"Identifies potential therapeutic targets and biomarkers for epigenetic-based treatments, supporting the development of personalized medicine approaches."
|
||||
];
|
||||
|
||||
|
||||
const serviceTypes = [
|
||||
"Whole Genome Bisulphite Sequencing (WGBS)",
|
||||
@ -18,8 +25,10 @@ const EpigenomicsIntroduction = () => {
|
||||
|
||||
return (
|
||||
<IntroductionLayout
|
||||
title="Introduction and Workflow"
|
||||
contentItems={contentItems}
|
||||
introTitle="Introduction and Workflow"
|
||||
advantageTitle="Advantage"
|
||||
introItems={contentItems}
|
||||
advantageItems={advantageItems}
|
||||
imageUrl="/images/epigenomics-overview.png"
|
||||
imageAlt="Epigenomics Overview"
|
||||
badgeText="EPIGENOMICS"
|
||||
|
||||
@ -5,16 +5,15 @@ const EpigenomicsPipeline = ({
|
||||
svgContent = null, // Pass your SVG content here as JSX
|
||||
svgUrl = "/images/flowchart/epigenomics.svg",
|
||||
backgroundColor = "bg-gray-50",
|
||||
textColor = "text-gray-700",
|
||||
className = "",
|
||||
titleClassName = "",
|
||||
svgClassName = "",
|
||||
containerClassName = ""
|
||||
}) => {
|
||||
return (
|
||||
<section className={`py-6 sm:py-8 lg:py-12 ${backgroundColor} ${className}`}>
|
||||
<section className={`py-6 sm:py-8 lg:py-4 ${backgroundColor} ${className}`}>
|
||||
<div className={`container mx-auto max-w-none px-3 sm:px-4 lg:px-6 ${containerClassName}`}>
|
||||
<h2 className={`${textColor} text-left pb-4 sm:pb-6 text-xl sm:text-2xl lg:text-3xl font-normal ${titleClassName}`}>
|
||||
<h2 className={"text-3xl font-bold text-teal-700 mb-4"}>
|
||||
{title}
|
||||
</h2>
|
||||
|
||||
@ -22,19 +21,19 @@ const EpigenomicsPipeline = ({
|
||||
<div className="bg-white rounded-xl shadow-lg p-4 sm:p-6 lg:p-8">
|
||||
<div className="flex justify-center">
|
||||
<div className="w-full max-w-6xl">
|
||||
{/* SVG Container with responsive sizing */}
|
||||
<div className={`w-full ${svgClassName}`}>
|
||||
{/* SVG Container with responsive sizing and reduced height */}
|
||||
<div className={`w-full max-h-100 overflow-hidden ${svgClassName}`}>
|
||||
{svgUrl ? (
|
||||
// If SVG URL/path is provided
|
||||
<img
|
||||
src={svgUrl}
|
||||
alt="Flowchart diagram"
|
||||
className="w-full h-auto object-contain"
|
||||
className="w-full h-auto object-contain max-h-100"
|
||||
/>
|
||||
) : svgContent ? (
|
||||
// If SVG content is provided as JSX
|
||||
<div className="w-full">
|
||||
<div className="w-full">
|
||||
<div className="w-full max-h-100">
|
||||
<div className="w-full max-h-100 overflow-hidden">
|
||||
{svgContent}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -23,7 +23,6 @@ export default function EpigenomicsSequencingPage() {
|
||||
<div className="page-content">
|
||||
<EpigenomicsIntroduction />
|
||||
<EpigenomicsPipeline/>
|
||||
<EpigenomicsAdvantages />
|
||||
<EpigenomicsSpecifications />
|
||||
</div>
|
||||
</PageLayout>
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
// WGBSApplications.jsx
|
||||
import ApplicationsLayout from '../../../../components/shared/AdvantagesLayout';
|
||||
import ApplicationsLayout from '../../../../components/shared/ApplicationsLayout';
|
||||
|
||||
const WGBSApplications = () => {
|
||||
const applicationItems = [
|
||||
|
||||
@ -9,11 +9,20 @@ const WGBSIntroduction = () => {
|
||||
"In bioinformatics analysis, sequencing data is aligned to a reference genome using advanced bioinformatics tools to determine the methylation status at CpG, CHG, and CHH sites.",
|
||||
"Valuable in epigenetic research for its ability to provide high-resolution insights into the regulatory mechanisms of the genome, offering a deeper understanding of cellular functions and molecular pathways."
|
||||
];
|
||||
const advantageItems = [
|
||||
"Provides high-resolution mapping of DNA methylation patterns across the genome, including CpG, CHG, and CHH sites, offering detailed insights into epigenetic modifications.",
|
||||
"Enables precise quantification of methylation levels, distinguishing between methylated and unmethylated cytosines based on read counts.",
|
||||
"This technique can detect effective CpG sites reaching over 75% of all CpG sites in the entire genome.",
|
||||
"Provides valuable insights into cell fate determination, genetic reprogramming, gene regulation, developmental epigenetics, disease mechanisms, and the identification of new epigenetic markers and therapeutic targets."
|
||||
];
|
||||
|
||||
|
||||
return (
|
||||
<IntroductionLayout
|
||||
title="Introduction and Workflow"
|
||||
contentItems={contentItems}
|
||||
introTitle="Introduction and Workflow"
|
||||
advantageTitle="Advantage"
|
||||
introItems={contentItems}
|
||||
advantageItems={advantageItems}
|
||||
imageUrl="/images/dna/whole_genome_bisulphate_sequencing.png"
|
||||
imageAlt="WGBS Workflow"
|
||||
badgeText="WGBS WORKFLOW"
|
||||
|
||||
@ -24,8 +24,6 @@ export default function WGBSPage() {
|
||||
|
||||
<div className="page-content">
|
||||
<WGBSIntroduction />
|
||||
<WGBSAdvantages />
|
||||
<WGBSBioinformatics />
|
||||
<WGBSApplications />
|
||||
<WGBSSpecifications />
|
||||
</div>
|
||||
|
||||
@ -8,6 +8,12 @@ const GenomeMappingIntroduction = () => {
|
||||
"In the bioinformatics analysis, these reads are aligned to a known reference genome to detect genomic alterations and structural arrangements.",
|
||||
"It is a powerful tool for diverse genomic studies, capable of sequencing humans, livestock, plants, bacteria, and disease-related microbes."
|
||||
];
|
||||
const advantageItems = [
|
||||
"Provides detailed structural variant detection and genomic rearrangements, offering comprehensive insights into complex genomic architecture.",
|
||||
"Enables high-resolution analysis of large eukaryotic genomes and their structural features, facilitating better understanding of genome organization.",
|
||||
"Offers comprehensive mapping capabilities that reveal the three-dimensional structure of chromosomes and identify regulatory interactions between distant genomic regions.",
|
||||
"Supports multiple research applications including cancer research, developmental biology, and evolutionary studies by providing detailed genomic structural information."
|
||||
];
|
||||
|
||||
const serviceTypes = [
|
||||
"HiC Mapping",
|
||||
@ -16,8 +22,10 @@ const GenomeMappingIntroduction = () => {
|
||||
|
||||
return (
|
||||
<IntroductionLayout
|
||||
title="Introduction and Workflow"
|
||||
contentItems={contentItems}
|
||||
introTitle="Introduction and Workflow"
|
||||
advantageTitle="Advantage"
|
||||
introItems={contentItems}
|
||||
advantageItems={advantageItems}
|
||||
imageUrl="/images/genome-mapping-overview.png"
|
||||
imageAlt="Genome Mapping Overview"
|
||||
badgeText="GENOME MAPPING"
|
||||
|
||||
@ -5,16 +5,15 @@ const GenomeMappingPipeline = ({
|
||||
svgContent = null, // Pass your SVG content here as JSX
|
||||
svgUrl = "/images/flowchart/genoemapping.svg",
|
||||
backgroundColor = "bg-gray-50",
|
||||
textColor = "text-gray-700",
|
||||
className = "",
|
||||
titleClassName = "",
|
||||
svgClassName = "",
|
||||
containerClassName = ""
|
||||
}) => {
|
||||
return (
|
||||
<section className={`py-6 sm:py-8 lg:py-12 ${backgroundColor} ${className}`}>
|
||||
<section className={`py-6 sm:py-8 lg:py-4 ${backgroundColor} ${className}`}>
|
||||
<div className={`container mx-auto max-w-none px-3 sm:px-4 lg:px-6 ${containerClassName}`}>
|
||||
<h2 className={`${textColor} text-left pb-4 sm:pb-6 text-xl sm:text-2xl lg:text-3xl font-normal ${titleClassName}`}>
|
||||
<h2 className={"text-3xl font-bold text-teal-700 mb-4"}>
|
||||
{title}
|
||||
</h2>
|
||||
|
||||
@ -22,19 +21,19 @@ const GenomeMappingPipeline = ({
|
||||
<div className="bg-white rounded-xl shadow-lg p-4 sm:p-6 lg:p-8">
|
||||
<div className="flex justify-center">
|
||||
<div className="w-full max-w-6xl">
|
||||
{/* SVG Container with responsive sizing */}
|
||||
<div className={`w-full ${svgClassName}`}>
|
||||
{/* SVG Container with responsive sizing and reduced height */}
|
||||
<div className={`w-full max-h-100 overflow-hidden ${svgClassName}`}>
|
||||
{svgUrl ? (
|
||||
// If SVG URL/path is provided
|
||||
<img
|
||||
src={svgUrl}
|
||||
alt="Flowchart diagram"
|
||||
className="w-full h-auto object-contain"
|
||||
className="w-full h-auto object-contain max-h-100"
|
||||
/>
|
||||
) : svgContent ? (
|
||||
// If SVG content is provided as JSX
|
||||
<div className="w-full">
|
||||
<div className="w-full">
|
||||
<div className="w-full max-h-100">
|
||||
<div className="w-full max-h-100 overflow-hidden">
|
||||
{svgContent}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -10,11 +10,19 @@ const HiCMappingIntroduction = () => {
|
||||
"The sequenced reads are processed using advanced bioinformatics tools, starting with alignment to a reference genome, followed by the identification of chromatin loops and the construction of 3D models of genome organization.",
|
||||
"Plays pivotal role in multiple applications, including identifying promoter-enhancer interactions for gene regulation studies, detecting structural rearrangements, scaffolding contigs to define chromosomes de novo, and revealing structural errors while accurately reintegrating mis-joined contigs during genome assembly processes."
|
||||
];
|
||||
const advantageItems = [
|
||||
"Quantifies interactions between closely located genomic loci in 3-D space, despite being separated by many nucleotides in the linear genome.",
|
||||
"Provides a detailed view of the 3D architecture of the genome, helping researchers understand how chromatin folding impacts gene regulation, genome organization, and cellular function.",
|
||||
"Captures interactions between distant regions of DNA, enabling the mapping of chromatin loops, topologically associated domains (TADs), and other structural features at high resolution.",
|
||||
"By revealing interactions between regulatory elements, such as enhancers and promoters, Hi-C mapping sheds light on how gene expression is controlled at the epigenetic and transcriptional levels."
|
||||
];
|
||||
|
||||
return (
|
||||
<IntroductionLayout
|
||||
title="Introduction and Workflow"
|
||||
contentItems={contentItems}
|
||||
introTitle="Introduction and Workflow"
|
||||
advantageTitle="Advantage"
|
||||
introItems={contentItems}
|
||||
advantageItems={advantageItems}
|
||||
imageUrl="/images/dna/hic-sequencing.png"
|
||||
imageAlt="Hi-C Mapping Workflow"
|
||||
useParagraphs={true}
|
||||
|
||||
@ -51,8 +51,6 @@ export default function HiCMappingPage() {
|
||||
{/* Introduction Section */}
|
||||
<HiCMappingIntroduction />
|
||||
|
||||
{/* Advantages Section */}
|
||||
<HiCMappingAdvantages />
|
||||
|
||||
{/* Applications Section */}
|
||||
<HiCMappingApplications />
|
||||
|
||||
@ -10,11 +10,19 @@ const OpticalMappingIntroduction = () => {
|
||||
"This allows for the comparison of genomic maps, identification of rearrangements, and integration with other sequencing data for comprehensive genome analysis.",
|
||||
"With the application in clinical and discovery research, the technique is improving genomics assembly, understanding of genetic disease and cancer by detecting CNVs, chromosomal aberrations and structural variants. Enables high-resolution analysis of large eukaryotic genomes and their structural features."
|
||||
];
|
||||
const advantageItems = [
|
||||
"Offers detailed genome-wide mapping of protein-DNA interactions, identifying binding sites of transcription factors, regulators, and other DNA-associated proteins.",
|
||||
"Utilizes specific antibodies to precisely capture and sequence protein-DNA complexes, providing accurate reflections of in vivo binding events.",
|
||||
"Reveals critical insights into gene regulation and chromatin dynamics, aiding in the understanding of gene expression, regulatory mechanisms, and epigenetic modifications.",
|
||||
"Facilitates studies on gene regulation in various contexts, including developmental processes, cancer research, and other biological phenomena, enhancing our understanding of complex biological systems and diseases."
|
||||
];
|
||||
|
||||
return (
|
||||
<IntroductionLayout
|
||||
title="Introduction and Workflow"
|
||||
contentItems={contentItems}
|
||||
introTitle="Introduction and Workflow"
|
||||
advantageTitle="Advantage"
|
||||
introItems={contentItems}
|
||||
advantageItems={advantageItems}
|
||||
imageUrl="/images/dna/optical_mapping.png"
|
||||
imageAlt="Optical Mapping Workflow"
|
||||
useParagraphs={true}
|
||||
|
||||
@ -51,9 +51,6 @@ export default function OpticalMappingPage() {
|
||||
{/* Introduction Section */}
|
||||
<OpticalMappingIntroduction />
|
||||
|
||||
{/* Advantages Section */}
|
||||
<OpticalMappingAdvantages />
|
||||
|
||||
{/* Applications Section */}
|
||||
<OpticalMappingApplications />
|
||||
|
||||
|
||||
@ -46,8 +46,6 @@ export default function GenomeMappingPage() {
|
||||
{/* Introduction Section */}
|
||||
<GenomeMappingIntroduction />
|
||||
|
||||
{/* Advantages Section */}
|
||||
<GenomeMappingAdvantages />
|
||||
<GenomeMappingPipeline/>
|
||||
|
||||
{/* Specifications Section */}
|
||||
|
||||
@ -8,11 +8,19 @@ const HybridIntroduction = () => {
|
||||
"Following sequencing, advanced bioinformatics tools are used to align and integrate the long and short reads, enhancing variant detection and improving the resolution of complex genomic regions.",
|
||||
"Hybrid sequencing is applicable to a wide range of research areas, from complex genome assemblies to resolving repetitive regions and improving the quality of reference genomes."
|
||||
];
|
||||
const advantageItems = [
|
||||
"Combines long-read and short-read sequencing for more complete and accurate genome assemblies, effectively resolving complex regions and reducing gaps.",
|
||||
"Balances the cost efficiency of short-read sequencing with the detailed resolution of long-read sequencing, making it a budget-friendly choice for comprehensive genome analysis.",
|
||||
"Enhances detection of structural variants, such as large insertions and deletions, improving the understanding of genetic diversity and disease mechanisms.",
|
||||
"Provides better coverage of challenging genomic features, like high GC content and repetitive sequences, by leveraging the strengths of both sequencing technologies."
|
||||
];
|
||||
|
||||
return (
|
||||
<IntroductionLayout
|
||||
title="Introduction and Workflow"
|
||||
contentItems={contentItems}
|
||||
introTitle="Introduction and Workflow"
|
||||
advantageTitle="Advantage"
|
||||
introItems={contentItems}
|
||||
advantageItems={advantageItems}
|
||||
imageUrl="/images/dna/hybrid_genome_seq.png"
|
||||
imageAlt="Sample Process Steps"
|
||||
useParagraphs={true}
|
||||
|
||||
@ -47,9 +47,6 @@ export default function HybridGenomeSequencingPage() {
|
||||
{/* Introduction Section */}
|
||||
<HybridIntroduction />
|
||||
|
||||
{/* Advantages Section */}
|
||||
<HybridAdvantages />
|
||||
|
||||
{/* Bioinformatics Pipeline Section */}
|
||||
{/* <HybridSequencingPipeline /> */}
|
||||
|
||||
|
||||
@ -10,8 +10,10 @@ const LongReadIntroduction = () => {
|
||||
|
||||
return (
|
||||
<IntroductionLayout
|
||||
title="Introduction and Workflow"
|
||||
contentItems={contentItems}
|
||||
introTitle="Introduction and Workflow"
|
||||
advantageTitle="Advantage"
|
||||
introItems={contentItems}
|
||||
advantageItems={advantageItems}
|
||||
imageUrl="/images/dna/whole_genome_long_read_seq.png"
|
||||
imageAlt="Long Read Sequencing"
|
||||
badgeText="LONG READ SEQUENCING"
|
||||
|
||||
@ -8,11 +8,19 @@ const MetagenomicsIntroduction = () => {
|
||||
"Bioinformatics analysis encompasses sequence alignment, taxonomy identification, and phylogenetic analysis. Additional analyses may involve functional annotation, comparative genomics, and statistical evaluations.",
|
||||
"Can be used to study diverse environmental samples like water, soil, and fecal matter, providing valuable insights into microbial diversity and host-microbiome interactions."
|
||||
];
|
||||
const advantageItems = [
|
||||
"Offers a comprehensive view of microbial diversity in complex samples, capturing both known and novel species. NGS enables the parallel sequencing of thousands of organisms in a single run, providing high sequence coverage and detecting low-abundance microbes that may be missed or are cost-prohibitive with other techniques.",
|
||||
"Analyzes genomes directly from environmental samples without prior isolation or cultivation, overcoming the limitations of traditional culture-based methods. This approach is effective for studying microbial communities in their natural habitats.",
|
||||
"Reveals the metabolic capabilities and functional diversity of microbial communities, enhancing our understanding of ecosystem processes and microbial roles within various environments.",
|
||||
"Facilitates detailed genetic and ecological analysis, supporting studies on microbial interactions, evolution, and adaptation, with broad applications in environmental monitoring, biotechnology, agriculture, and human health."
|
||||
];
|
||||
|
||||
return (
|
||||
<IntroductionLayout
|
||||
title="Introduction and Workflow"
|
||||
contentItems={contentItems}
|
||||
introTitle="Introduction and Workflow"
|
||||
advantageTitle="Advantage"
|
||||
introItems={contentItems}
|
||||
advantageItems={advantageItems}
|
||||
imageUrl="/images/metagenomics-sequencing.png"
|
||||
imageAlt="Metagenomics Sequencing"
|
||||
useParagraphs={true}
|
||||
|
||||
@ -5,16 +5,15 @@ const MetagenomicsPipeline = ({
|
||||
svgContent = null, // Pass your SVG content here as JSX
|
||||
svgUrl = "/images/flowchart/metagenomics.svg",
|
||||
backgroundColor = "bg-gray-50",
|
||||
textColor = "text-gray-700",
|
||||
className = "",
|
||||
titleClassName = "",
|
||||
svgClassName = "",
|
||||
containerClassName = ""
|
||||
}) => {
|
||||
return (
|
||||
<section className={`py-6 sm:py-8 lg:py-12 ${backgroundColor} ${className}`}>
|
||||
<section className={`py-6 sm:py-8 lg:py-4 ${backgroundColor} ${className}`}>
|
||||
<div className={`container mx-auto max-w-none px-3 sm:px-4 lg:px-6 ${containerClassName}`}>
|
||||
<h2 className={`${textColor} text-left pb-4 sm:pb-6 text-xl sm:text-2xl lg:text-3xl font-normal ${titleClassName}`}>
|
||||
<h2 className={"text-3xl font-bold text-teal-700 mb-4"}>
|
||||
{title}
|
||||
</h2>
|
||||
|
||||
@ -22,19 +21,19 @@ const MetagenomicsPipeline = ({
|
||||
<div className="bg-white rounded-xl shadow-lg p-4 sm:p-6 lg:p-8">
|
||||
<div className="flex justify-center">
|
||||
<div className="w-full max-w-6xl">
|
||||
{/* SVG Container with responsive sizing */}
|
||||
<div className={`w-full ${svgClassName}`}>
|
||||
{/* SVG Container with responsive sizing and reduced height */}
|
||||
<div className={`w-full max-h-100 overflow-hidden ${svgClassName}`}>
|
||||
{svgUrl ? (
|
||||
// If SVG URL/path is provided
|
||||
<img
|
||||
src={svgUrl}
|
||||
alt="Flowchart diagram"
|
||||
className="w-full h-auto object-contain"
|
||||
className="w-full h-auto object-contain max-h-100"
|
||||
/>
|
||||
) : svgContent ? (
|
||||
// If SVG content is provided as JSX
|
||||
<div className="w-full">
|
||||
<div className="w-full">
|
||||
<div className="w-full max-h-100">
|
||||
<div className="w-full max-h-100 overflow-hidden">
|
||||
{svgContent}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -47,8 +47,7 @@ export default function MetagenomicsSequencingPage() {
|
||||
{/* Introduction Section */}
|
||||
<MetagenomicsIntroduction />
|
||||
|
||||
{/* Advantages Section */}
|
||||
<MetagenomicsAdvantages />
|
||||
|
||||
<MetagenomicsPipeline/>
|
||||
|
||||
{/* Applications Section */}
|
||||
|
||||
@ -9,11 +9,20 @@ const MicrosatellitesIntroduction = () => {
|
||||
"Electropherogram data is converted into allele calls, allowing allele size analysis, frequency distribution, and individual or population-level genotype matching.",
|
||||
"Microsatellite-based genotyping is widely applied in fields like conservation genetics, forensic science, and agriculture."
|
||||
];
|
||||
const advantageItems = [
|
||||
"Highly variable in repeat number among individuals, making them effective for distinguishing genetic differences within and between populations.",
|
||||
"Unlike multi-locus markers like minisatellites, microsatellites are locus-specific, providing precise, targeted genetic information for detailed genotyping and genetic mapping.",
|
||||
"Highly reproducible across labs, making it a reliable method for studies requiring consistent and repeatable results, such as population genetics and forensic analysis.",
|
||||
"Show co-dominant inheritance, allowing the detection of both alleles at a locus for accurate identification of heterozygous and homozygous genotypes."
|
||||
];
|
||||
|
||||
|
||||
return (
|
||||
<IntroductionLayout
|
||||
title="Introduction and Workflow"
|
||||
contentItems={contentItems}
|
||||
introTitle="Introduction and Workflow"
|
||||
advantageTitle="Advantage"
|
||||
introItems={contentItems}
|
||||
advantageItems={advantageItems}
|
||||
imageUrl="/images/microsatellites-sequencing.png"
|
||||
imageAlt="Microsatellites Sequencing"
|
||||
useParagraphs={true}
|
||||
|
||||
@ -46,9 +46,6 @@ export default function MicrosatellitesSSRSTRPage() {
|
||||
{/* Introduction Section */}
|
||||
<MicrosatellitesIntroduction />
|
||||
|
||||
{/* Advantages Section */}
|
||||
<MicrosatellitesAdvantages />
|
||||
|
||||
{/* Applications Section */}
|
||||
<MicrosatellitesApplications />
|
||||
|
||||
|
||||
@ -9,11 +9,20 @@ const SingleCellIntroduction = () => {
|
||||
"During sequencing, the barcode identifiers enable precise tracking of data to its specific cell or nucleus of origin, thereby providing comprehensive genetic insights for individual cells.",
|
||||
"This technique enables researchers to unravel unique genetic characteristics and variations present within individual cells, providing unprecedented insights into cellular diversity and function."
|
||||
];
|
||||
const advantageItems = [
|
||||
"DNA exhibits greater stability compared to RNA, ensuring ample time for sample processing without degradation.",
|
||||
"Capable of detecting rare mutation-bearing cell clones with sensitivity levels as low as 0.1%, enabling direct analysis of rare cell types or primary cells even with limited samples.",
|
||||
"Reveals the diversity of genetic profiles within cell populations, aiding in the study of complex biological processes and enabling precise profiling of subpopulations like cancer cell evolution or DNA copy number variations in neurons.",
|
||||
"Allows for the tracking of genetic changes over time within individual cells, crucial for understanding disease progression and evolution."
|
||||
];
|
||||
|
||||
|
||||
return (
|
||||
<IntroductionLayout
|
||||
title="Introduction and Workflow"
|
||||
contentItems={contentItems}
|
||||
introTitle="Introduction and Workflow"
|
||||
advantageTitle="Advantage"
|
||||
introItems={contentItems}
|
||||
advantageItems={advantageItems}
|
||||
imageUrl="/images/dna/single_cell_dna_sequencing.png"
|
||||
imageAlt="Single Cell DNA Sequencing"
|
||||
useParagraphs={true}
|
||||
|
||||
@ -5,16 +5,15 @@ const SingleCellPipeline = ({
|
||||
svgContent = null, // Pass your SVG content here as JSX
|
||||
svgUrl = "/images/flowchart/singlecell.svg",
|
||||
backgroundColor = "bg-gray-50",
|
||||
textColor = "text-gray-700",
|
||||
className = "",
|
||||
titleClassName = "",
|
||||
svgClassName = "",
|
||||
containerClassName = ""
|
||||
}) => {
|
||||
return (
|
||||
<section className={`py-6 sm:py-8 lg:py-12 ${backgroundColor} ${className}`}>
|
||||
<section className={`py-6 sm:py-8 lg:py-4 ${backgroundColor} ${className}`}>
|
||||
<div className={`container mx-auto max-w-none px-3 sm:px-4 lg:px-6 ${containerClassName}`}>
|
||||
<h2 className={`${textColor} text-left pb-4 sm:pb-6 text-xl sm:text-2xl lg:text-3xl font-normal ${titleClassName}`}>
|
||||
<h2 className={"text-3xl font-bold text-teal-700 mb-4"}>
|
||||
{title}
|
||||
</h2>
|
||||
|
||||
@ -22,19 +21,19 @@ const SingleCellPipeline = ({
|
||||
<div className="bg-white rounded-xl shadow-lg p-4 sm:p-6 lg:p-8">
|
||||
<div className="flex justify-center">
|
||||
<div className="w-full max-w-6xl">
|
||||
{/* SVG Container with responsive sizing */}
|
||||
<div className={`w-full ${svgClassName}`}>
|
||||
{/* SVG Container with responsive sizing and reduced height */}
|
||||
<div className={`w-full max-h-100 overflow-hidden ${svgClassName}`}>
|
||||
{svgUrl ? (
|
||||
// If SVG URL/path is provided
|
||||
<img
|
||||
src={svgUrl}
|
||||
alt="Flowchart diagram"
|
||||
className="w-full h-auto object-contain"
|
||||
className="w-full h-auto object-contain max-h-100"
|
||||
/>
|
||||
) : svgContent ? (
|
||||
// If SVG content is provided as JSX
|
||||
<div className="w-full">
|
||||
<div className="w-full">
|
||||
<div className="w-full max-h-100">
|
||||
<div className="w-full max-h-100 overflow-hidden">
|
||||
{svgContent}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -47,8 +47,6 @@ export default function SingleCellDNASequencingPage() {
|
||||
{/* Introduction Section */}
|
||||
<SingleCellIntroduction />
|
||||
|
||||
{/* Advantages Section */}
|
||||
<SingleCellAdvantages />
|
||||
<SingleCellPipeline/>
|
||||
|
||||
{/* Applications Section */}
|
||||
|
||||
@ -5,6 +5,13 @@ 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."
|
||||
];
|
||||
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",
|
||||
@ -14,8 +21,10 @@ const SNPIntroduction = () => {
|
||||
|
||||
return (
|
||||
<IntroductionLayout
|
||||
title="Introduction and Workflow"
|
||||
contentItems={contentItems}
|
||||
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"
|
||||
|
||||
@ -25,7 +25,6 @@ export default function SNPGenotypingPage() {
|
||||
|
||||
<div className="page-content">
|
||||
<SNPIntroduction />
|
||||
<SNPAdvantages />
|
||||
<SNPApplications />
|
||||
<SNPSpecifications />
|
||||
</div>
|
||||
|
||||
@ -9,11 +9,19 @@ const WGSIntroduction = () => {
|
||||
"In the bioinformatics analysis, these reads are then assembled to construct the genome or aligned to a known reference genome.",
|
||||
"It is a powerful tool for diverse genomic studies, capable of sequencing humans, livestock, plants, bacteria, and disease-related microbes."
|
||||
];
|
||||
const advantageItems = [
|
||||
"Provides a comprehensive, high-resolution view of the genome, surpassing the coverage offered by targeted sequencing.",
|
||||
"Identifies both small (SNVs, CNVs, InDels) and large structural variants that may be missed with targeted approaches, offering valuable insights into inherited genetic conditions and characterizing mutations driving cancer progression.",
|
||||
"Generates large volumes of data quickly, facilitating the assembly of novel genomes.",
|
||||
"Uncovers genomic diversity, taxonomic classifications, and evolutionary relationships, enhancing our understanding of biological complexity."
|
||||
];
|
||||
|
||||
return (
|
||||
<IntroductionLayout
|
||||
title="Introduction and Workflow"
|
||||
contentItems={contentItems}
|
||||
introTitle="Introduction and Workflow"
|
||||
advantageTitle="Advantage"
|
||||
introItems={contentItems}
|
||||
advantageItems={advantageItems}
|
||||
imageUrl="/images/dna/whole_genome_seq-normal_denovo.png"
|
||||
imageAlt="Sample Process Steps"
|
||||
useParagraphs={true}
|
||||
|
||||
@ -3,17 +3,25 @@
|
||||
import IntroductionLayout from '../../../../components/shared/IntroductionLayout';
|
||||
|
||||
const DenovoIntroduction = () => {
|
||||
const contentItems = [
|
||||
const introItems = [
|
||||
"Whole Genome Denovo Sequencing involves sequencing an organism's entire genome from scratch, without a reference genome. This approach is essential for species with unsequenced or incomplete genomes.",
|
||||
"The workflow includes isolating DNA, fragmenting it, and sequencing to produce millions of short reads.",
|
||||
"These reads are then assembled into longer sequences, called contigs, using bioinformatics tools in the genome assembly process.",
|
||||
"It can be used for sequencing diverse species, such as agriculturally important livestock, plants, bacteria, or disease-related microbes."
|
||||
];
|
||||
const advantageItems = [
|
||||
"Eliminates the need for pre-existing reference genomes, which allows for the discovery of novel genetic elements and variations that may not be present in other genomes, providing a truly unbiased view of the genome.",
|
||||
"Identifies new genes and genetic variations that may be missed by relying on reference genomes alone.",
|
||||
"Offers high-resolution insights into the genome, including complex regions such as repetitive sequences and heterochromatic regions, which are often challenging to assemble with other sequencing approaches.",
|
||||
"Enhances our understanding of genetic diversity, facilitates comparative genomics, and contributes significantly to advancements in genomic research across various fields."
|
||||
];
|
||||
|
||||
return (
|
||||
<IntroductionLayout
|
||||
title="Introduction and Workflow"
|
||||
contentItems={contentItems}
|
||||
introTitle="Introduction and Workflow"
|
||||
advantageTitle="Advantage"
|
||||
introItems={introItems}
|
||||
advantageItems={advantageItems}
|
||||
imageUrl="/images/dna/whole_genome_seq-normal_denovo.png"
|
||||
imageAlt="De Novo Assembly Workflow"
|
||||
badgeText="DE NOVO ASSEMBLY"
|
||||
|
||||
@ -5,16 +5,15 @@ const WGSDeNovoPipeline = ({
|
||||
svgContent = null, // Pass your SVG content here as JSX
|
||||
svgUrl = "/images/flowchart/denovo.svg",
|
||||
backgroundColor = "bg-gray-50",
|
||||
textColor = "text-gray-700",
|
||||
className = "",
|
||||
titleClassName = "",
|
||||
svgClassName = "",
|
||||
containerClassName = ""
|
||||
}) => {
|
||||
return (
|
||||
<section className={`py-6 sm:py-8 lg:py-12 ${backgroundColor} ${className}`}>
|
||||
<section className={`py-6 sm:py-8 lg:py-4 ${backgroundColor} ${className}`}>
|
||||
<div className={`container mx-auto max-w-none px-3 sm:px-4 lg:px-6 ${containerClassName}`}>
|
||||
<h2 className={`${textColor} text-left pb-4 sm:pb-6 text-xl sm:text-2xl lg:text-3xl font-normal ${titleClassName}`}>
|
||||
<h2 className={"text-3xl font-bold text-teal-700 mb-4"}>
|
||||
{title}
|
||||
</h2>
|
||||
|
||||
@ -22,19 +21,19 @@ const WGSDeNovoPipeline = ({
|
||||
<div className="bg-white rounded-xl shadow-lg p-4 sm:p-6 lg:p-8">
|
||||
<div className="flex justify-center">
|
||||
<div className="w-full max-w-6xl">
|
||||
{/* SVG Container with responsive sizing */}
|
||||
<div className={`w-full ${svgClassName}`}>
|
||||
{/* SVG Container with responsive sizing and reduced height */}
|
||||
<div className={`w-full max-h-180 overflow-hidden ${svgClassName}`}>
|
||||
{svgUrl ? (
|
||||
// If SVG URL/path is provided
|
||||
<img
|
||||
src={svgUrl}
|
||||
alt="Flowchart diagram"
|
||||
className="w-full h-auto object-contain"
|
||||
className="w-full h-auto object-contain max-h-180"
|
||||
/>
|
||||
) : svgContent ? (
|
||||
// If SVG content is provided as JSX
|
||||
<div className="w-full">
|
||||
<div className="w-full">
|
||||
<div className="w-full max-h-180">
|
||||
<div className="w-full max-h-180 overflow-hidden">
|
||||
{svgContent}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -24,7 +24,6 @@ export default function WholeGenomeDenovoPage() {
|
||||
|
||||
<div className="page-content">
|
||||
<DenovoIntroduction />
|
||||
<DenovoAdvantages />
|
||||
<WGSDeNovoPipeline/>
|
||||
<DenovoApplications />
|
||||
<DenovoSpecifications />
|
||||
|
||||
@ -1,7 +1,6 @@
|
||||
// app/dna-sequencing/whole-genome-sequencing/page.js (Updated)
|
||||
import DNATitleBar from '../../components/shared/DNATitleBar';
|
||||
import WGSIntroduction from './components/WGSIntroduction';
|
||||
import WGSAdvantages from './components/WGSAdvantages';
|
||||
import WGSSpecifications from './components/WGSSpecifications';
|
||||
import PageLayout from '@/app/components/Layout/PageLayout';
|
||||
|
||||
@ -22,7 +21,6 @@ export default function WholeGenomeSequencingPage() {
|
||||
|
||||
<div className="page-content">
|
||||
<WGSIntroduction />
|
||||
<WGSAdvantages />
|
||||
<WGSSpecifications />
|
||||
</div>
|
||||
</PageLayout>
|
||||
|
||||
@ -9,11 +9,19 @@ const ResequencingIntroduction = () => {
|
||||
"These reads undergo alignment to a reference genome, followed by the analysis of genetic variations using advanced bioinformatics tools.",
|
||||
"It enables detailed analysis of genetic variations across diverse species like humans, plants, and bacteria."
|
||||
];
|
||||
const advantageItems = [
|
||||
"Provides a detailed examination of an organism's entire genome, revealing all genetic variations compared to a reference genome.",
|
||||
"Enables accurate identification of single nucleotide polymorphisms (SNPs), insertions, deletions, and structural variants, crucial for understanding genetic diversity and disease mechanisms.",
|
||||
"Facilitates the discovery of genetic markers associated with diseases, guiding personalized treatment approaches.",
|
||||
"Supports diverse studies including evolutionary biology, agricultural genetics, and microbial genomics, enhancing insights into genetic adaptations and relationships across species."
|
||||
];
|
||||
|
||||
return (
|
||||
<IntroductionLayout
|
||||
title="Introduction and Workflow"
|
||||
contentItems={contentItems}
|
||||
introTitle="Introduction and Workflow"
|
||||
advantageTitle="Advantage"
|
||||
introItems={contentItems}
|
||||
advantageItems={advantageItems}
|
||||
imageUrl="/images/dna/resequencing-workflow.png"
|
||||
imageAlt="Resequencing Workflow"
|
||||
badgeText="RESEQUENCING"
|
||||
|
||||
@ -5,16 +5,15 @@ const WGSResequencingPipeline = ({
|
||||
svgContent = null, // Pass your SVG content here as JSX
|
||||
svgUrl = "/images/flowchart/resequencing.svg",
|
||||
backgroundColor = "bg-gray-50",
|
||||
textColor = "text-gray-700",
|
||||
className = "",
|
||||
titleClassName = "",
|
||||
svgClassName = "",
|
||||
containerClassName = ""
|
||||
}) => {
|
||||
return (
|
||||
<section className={`py-6 sm:py-8 lg:py-12 ${backgroundColor} ${className}`}>
|
||||
<section className={`py-6 sm:py-8 lg:py-4 ${backgroundColor} ${className}`}>
|
||||
<div className={`container mx-auto max-w-none px-3 sm:px-4 lg:px-6 ${containerClassName}`}>
|
||||
<h2 className={`${textColor} text-left pb-4 sm:pb-6 text-xl sm:text-2xl lg:text-3xl font-normal ${titleClassName}`}>
|
||||
<h2 className={"text-3xl font-bold text-teal-700 mb-4"}>
|
||||
{title}
|
||||
</h2>
|
||||
|
||||
@ -22,19 +21,19 @@ const WGSResequencingPipeline = ({
|
||||
<div className="bg-white rounded-xl shadow-lg p-4 sm:p-6 lg:p-8">
|
||||
<div className="flex justify-center">
|
||||
<div className="w-full max-w-6xl">
|
||||
{/* SVG Container with responsive sizing */}
|
||||
<div className={`w-full ${svgClassName}`}>
|
||||
{/* SVG Container with responsive sizing and reduced height */}
|
||||
<div className={`w-full max-h-100 overflow-hidden ${svgClassName}`}>
|
||||
{svgUrl ? (
|
||||
// If SVG URL/path is provided
|
||||
<img
|
||||
src={svgUrl}
|
||||
alt="Flowchart diagram"
|
||||
className="w-full h-auto object-contain"
|
||||
className="w-full h-auto object-contain max-h-100"
|
||||
/>
|
||||
) : svgContent ? (
|
||||
// If SVG content is provided as JSX
|
||||
<div className="w-full">
|
||||
<div className="w-full">
|
||||
<div className="w-full max-h-100">
|
||||
<div className="w-full max-h-100 overflow-hidden">
|
||||
{svgContent}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -24,7 +24,6 @@ export default function WholeGenomeResequencingPage() {
|
||||
|
||||
<div className="page-content">
|
||||
<ResequencingIntroduction />
|
||||
<ResequencingAdvantages />
|
||||
<WGSResequencingPipeline/>
|
||||
<ResequencingApplications />
|
||||
<ResequencingSpecifications />
|
||||
|
||||
Reference in New Issue
Block a user