UI styling update
This commit is contained in:
mukesh13
@ -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