Flowchart update
This commit is contained in:
mukesh13
@ -0,0 +1,103 @@
|
||||
import React from 'react';
|
||||
import { ArrowDown, ArrowRight, ArrowUp } from 'lucide-react';
|
||||
|
||||
const EnrichmentPipeline = ({
|
||||
title = "Bioinformatics Pipeline",
|
||||
leftSteps = [
|
||||
"Raw Sequencing Data (fastq files)",
|
||||
"Quality Control and Preprocessing of Data",
|
||||
"High Quality Sequencing Data (fastq file)",
|
||||
"Alignment to Reference Genome"
|
||||
],
|
||||
rightSteps = [
|
||||
"Downstream Advanced Analysis",
|
||||
"Annotation",
|
||||
"Variants Calling - SNVs, Indels, CNVs",
|
||||
"Mark Duplicates and Post-Processing"
|
||||
],
|
||||
backgroundColor = "bg-gray-50",
|
||||
cardColor = "bg-gray-300",
|
||||
textColor = "text-teal-600",
|
||||
arrowColor = "text-gray-600",
|
||||
className = "",
|
||||
cardClassName = "",
|
||||
titleClassName = ""
|
||||
}) => {
|
||||
// Combine steps for mobile layout
|
||||
const mobileSteps = [...leftSteps, ...rightSteps.slice().reverse()];
|
||||
|
||||
return (
|
||||
<section className={`py-6 sm:py-8 lg:py-12 ${backgroundColor} ${className}`}>
|
||||
<div className="container mx-auto max-w-none px-3 sm:px-4 lg:px-6">
|
||||
<h2 className={`text-gray-700 text-left pb-4 sm:pb-6 text-xl sm:text-2xl lg:text-3xl font-normal ${titleClassName}`}>
|
||||
{title}
|
||||
</h2>
|
||||
|
||||
{/* Pipeline Flowchart */}
|
||||
<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-5xl">
|
||||
<div className="relative">
|
||||
{/* Mobile Layout - Single Column */}
|
||||
<div className="block sm:hidden">
|
||||
<div className="flex flex-col items-center space-y-3">
|
||||
{mobileSteps.map((step, index) => (
|
||||
<React.Fragment key={index}>
|
||||
<div className={`${cardColor} rounded-lg p-3 w-full text-center border ${cardClassName}`}>
|
||||
<h3 className={`text-xs font-medium ${textColor}`}>{step}</h3>
|
||||
</div>
|
||||
{index < mobileSteps.length - 1 && (
|
||||
<ArrowDown className={`w-5 h-5 ${arrowColor}`} />
|
||||
)}
|
||||
</React.Fragment>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Tablet and Desktop Layout - Two Columns */}
|
||||
<div className="hidden sm:block">
|
||||
<div className="grid grid-cols-2 gap-4 sm:gap-6 lg:gap-8">
|
||||
{/* Left Column */}
|
||||
<div className="flex flex-col items-center space-y-2 sm:space-y-3">
|
||||
{leftSteps.map((step, index) => (
|
||||
<React.Fragment key={index}>
|
||||
<div className={`${cardColor} rounded-lg p-3 sm:p-4 w-full max-w-80 text-center border ${cardClassName}`}>
|
||||
<h3 className={`text-xs sm:text-sm font-medium ${textColor}`}>{step}</h3>
|
||||
</div>
|
||||
{index < leftSteps.length - 1 && (
|
||||
<ArrowDown className={`w-5 h-5 sm:w-6 sm:h-6 ${arrowColor}`} />
|
||||
)}
|
||||
</React.Fragment>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Right Column */}
|
||||
<div className="flex flex-col items-center space-y-2 sm:space-y-3">
|
||||
{rightSteps.map((step, index) => (
|
||||
<React.Fragment key={index}>
|
||||
<div className={`${cardColor} rounded-lg p-3 sm:p-4 w-full max-w-80 text-center border ${cardClassName}`}>
|
||||
<h3 className={`text-xs sm:text-sm font-medium ${textColor}`}>{step}</h3>
|
||||
</div>
|
||||
{index < rightSteps.length - 1 && (
|
||||
<ArrowUp className={`w-5 h-5 sm:w-6 sm:h-6 ${arrowColor}`} />
|
||||
)}
|
||||
</React.Fragment>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Horizontal Arrow positioned between Primary and Secondary Assembly */}
|
||||
<div className="absolute bottom-2 sm:bottom-4 lg:bottom-[0.7rem] left-1/2 transform -translate-x-1/2 flex items-center justify-center">
|
||||
<ArrowRight className={`w-6 h-6 sm:w-8 sm:h-8 ${arrowColor}`} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default EnrichmentPipeline;
|
||||
@ -3,6 +3,7 @@ import TitleBar from '../../components/shared/TitleBar';
|
||||
import EnrichmentIntroduction from './components/EnrichmentIntroduction';
|
||||
import EnrichmentAdvantages from './components/EnrichmentAdvantages';
|
||||
import EnrichmentSpecifications from './components/EnrichmentSpecifications';
|
||||
import EnrichmentPipeline from './components/EnrichmentPipeline';
|
||||
|
||||
export default function EnrichmentSequencingPage() {
|
||||
const breadcrumbs = [
|
||||
@ -22,6 +23,7 @@ export default function EnrichmentSequencingPage() {
|
||||
<div className="page-content">
|
||||
<EnrichmentIntroduction />
|
||||
<EnrichmentAdvantages />
|
||||
<EnrichmentPipeline/>
|
||||
<EnrichmentSpecifications />
|
||||
</div>
|
||||
</PageLayout>
|
||||
|
||||
@ -0,0 +1,133 @@
|
||||
import React from 'react';
|
||||
import { ArrowDown, ArrowRight, ArrowUp } from 'lucide-react';
|
||||
|
||||
const EpigenomicsPipeline = ({
|
||||
title = "Bioinformatics Pipeline",
|
||||
leftSteps = [
|
||||
"Raw Sequencing Data (fastq files)",
|
||||
"Quality Control and Preprocessing of Data",
|
||||
"High Quality Sequencing Data (fastq file)",
|
||||
"Aligned to Reference Genome"
|
||||
],
|
||||
middleSteps = [
|
||||
"Downstream Advanced Analysis",
|
||||
"DMR Annotation",
|
||||
"DMR Identification",
|
||||
"Peak Calling"
|
||||
],
|
||||
rightSteps = [
|
||||
"Distribution in genes & repeats",
|
||||
"Methylated Distribution",
|
||||
"Motif Identification",
|
||||
"Relationship with gene expression",
|
||||
"Go clustering",
|
||||
"Pathway analysis"
|
||||
],
|
||||
backgroundColor = "bg-gray-50",
|
||||
cardColor = "bg-gray-300",
|
||||
textColor = "text-teal-600",
|
||||
arrowColor = "text-gray-600",
|
||||
className = "",
|
||||
cardClassName = "",
|
||||
titleClassName = ""
|
||||
}) => {
|
||||
// Combine steps for mobile layout
|
||||
const mobileSteps = [...leftSteps, ...middleSteps, ...rightSteps];
|
||||
|
||||
return (
|
||||
<section className={`py-6 sm:py-8 lg:py-12 ${backgroundColor} ${className}`}>
|
||||
<div className="container mx-auto max-w-none px-3 sm:px-4 lg:px-6">
|
||||
<h2 className={`text-gray-700 text-left pb-4 sm:pb-6 text-xl sm:text-2xl lg:text-3xl font-normal ${titleClassName}`}>
|
||||
{title}
|
||||
</h2>
|
||||
|
||||
{/* Pipeline Flowchart */}
|
||||
<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-7xl">
|
||||
<div className="relative">
|
||||
{/* Mobile Layout - Single Column */}
|
||||
<div className="block lg:hidden">
|
||||
<div className="flex flex-col items-center space-y-3">
|
||||
{mobileSteps.map((step, index) => (
|
||||
<React.Fragment key={index}>
|
||||
<div className={`${cardColor} rounded-lg p-3 w-full text-center border ${cardClassName}`}>
|
||||
<h3 className={`text-xs font-medium ${textColor}`}>{step}</h3>
|
||||
</div>
|
||||
{index < mobileSteps.length - 1 && (
|
||||
<ArrowDown className={`w-5 h-5 ${arrowColor}`} />
|
||||
)}
|
||||
</React.Fragment>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Desktop Layout - Three Columns */}
|
||||
<div className="hidden lg:block">
|
||||
<div className="grid grid-cols-3 gap-6 lg:gap-8">
|
||||
{/* Left Column */}
|
||||
<div className="flex flex-col items-center space-y-3">
|
||||
{leftSteps.map((step, index) => (
|
||||
<React.Fragment key={index}>
|
||||
<div className={`${cardColor} rounded-lg p-4 w-full max-w-76 text-center border ${cardClassName}`} style={{maxWidth: '19rem'}}>
|
||||
<h3 className={`text-sm font-medium ${textColor}`}>{step}</h3>
|
||||
</div>
|
||||
{index < leftSteps.length - 1 && (
|
||||
<ArrowDown className={`w-6 h-6 ${arrowColor}`} />
|
||||
)}
|
||||
</React.Fragment>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Middle Column */}
|
||||
<div className="flex flex-col items-center space-y-3">
|
||||
{middleSteps.map((step, index) => (
|
||||
<React.Fragment key={index}>
|
||||
<div className={`${cardColor} rounded-lg p-4 w-full max-w-76 text-center border ${cardClassName}`} style={{maxWidth: '19rem'}}>
|
||||
<h3 className={`text-sm font-medium ${textColor}`}>{step}</h3>
|
||||
</div>
|
||||
{index < middleSteps.length - 1 && (
|
||||
<ArrowUp className={`w-6 h-6 ${arrowColor}`} />
|
||||
)}
|
||||
</React.Fragment>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Right Column */}
|
||||
<div className="flex flex-col items-center justify-center">
|
||||
<div className={`${cardColor} rounded-lg p-12 w-full max-w-76 text-center border ${cardClassName}`} style={{maxWidth: '19rem'}}>
|
||||
<div className="space-y-6">
|
||||
{rightSteps.map((step, index) => (
|
||||
<div key={index} className={`text-sm font-medium ${textColor}`}>
|
||||
{step}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Horizontal Arrows */}
|
||||
{/* Arrow from Aligned to Reference Genome to Peak Calling */}
|
||||
<div className="absolute bottom-4 left-1/3 transform -translate-x-1/2">
|
||||
<ArrowRight className={`w-8 h-8 ${arrowColor}`} />
|
||||
</div>
|
||||
{/* Arrow from DMR Annotation to right box */}
|
||||
<div className="absolute top-28 left-2/3 transform -translate-x-1/2">
|
||||
<ArrowRight className={`w-8 h-8 ${arrowColor}`} />
|
||||
</div>
|
||||
{/* Arrow from Peak Calling to right box */}
|
||||
<div className="absolute bottom-4 left-2/3 transform -translate-x-1/2">
|
||||
<ArrowRight className={`w-8 h-8 ${arrowColor}`} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default EpigenomicsPipeline;
|
||||
@ -2,6 +2,7 @@ import TitleBar from '../../components/shared/TitleBar';
|
||||
import EpigenomicsIntroduction from './components/EpigenomicsIntroduction';
|
||||
import EpigenomicsAdvantages from './components/EpigenomicsAdvantages';
|
||||
import EpigenomicsSpecifications from './components/EpigenomicsSpecifications';
|
||||
import EpigenomicsPipeline from './components/EpigenomicsPipeline';
|
||||
import PageLayout from '../../components/Layout/PageLayout';
|
||||
|
||||
export default function EpigenomicsSequencingPage() {
|
||||
@ -21,6 +22,7 @@ export default function EpigenomicsSequencingPage() {
|
||||
|
||||
<div className="page-content">
|
||||
<EpigenomicsIntroduction />
|
||||
<EpigenomicsPipeline/>
|
||||
<EpigenomicsAdvantages />
|
||||
<EpigenomicsSpecifications />
|
||||
</div>
|
||||
|
||||
@ -0,0 +1,103 @@
|
||||
import React from 'react';
|
||||
import { ArrowDown, ArrowRight, ArrowUp } from 'lucide-react';
|
||||
|
||||
const GenomeMappingPipeline = ({
|
||||
title = "Bioinformatics Pipeline",
|
||||
leftSteps = [
|
||||
"Raw Sequencing Data (fastq files)",
|
||||
"Quality Control and Preprocessing of Data",
|
||||
"High Quality Sequencing Data (fastq file)",
|
||||
"Alignment to Reference Genome"
|
||||
],
|
||||
rightSteps = [
|
||||
"Evolutionary Analysis",
|
||||
"Annotation",
|
||||
"Variants Calling - structural variants and genomic rearrangements",
|
||||
"Post-Processing"
|
||||
],
|
||||
backgroundColor = "bg-gray-50",
|
||||
cardColor = "bg-gray-300",
|
||||
textColor = "text-teal-600",
|
||||
arrowColor = "text-gray-600",
|
||||
className = "",
|
||||
cardClassName = "",
|
||||
titleClassName = ""
|
||||
}) => {
|
||||
// Combine steps for mobile layout
|
||||
const mobileSteps = [...leftSteps, ...rightSteps.slice().reverse()];
|
||||
|
||||
return (
|
||||
<section className={`py-6 sm:py-8 lg:py-12 ${backgroundColor} ${className}`}>
|
||||
<div className="container mx-auto max-w-none px-3 sm:px-4 lg:px-6">
|
||||
<h2 className={`text-gray-700 text-left pb-4 sm:pb-6 text-xl sm:text-2xl lg:text-3xl font-normal ${titleClassName}`}>
|
||||
{title}
|
||||
</h2>
|
||||
|
||||
{/* Pipeline Flowchart */}
|
||||
<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-5xl">
|
||||
<div className="relative">
|
||||
{/* Mobile Layout - Single Column */}
|
||||
<div className="block sm:hidden">
|
||||
<div className="flex flex-col items-center space-y-3">
|
||||
{mobileSteps.map((step, index) => (
|
||||
<React.Fragment key={index}>
|
||||
<div className={`${cardColor} rounded-lg p-3 w-full text-center border ${cardClassName}`}>
|
||||
<h3 className={`text-xs font-medium ${textColor}`}>{step}</h3>
|
||||
</div>
|
||||
{index < mobileSteps.length - 1 && (
|
||||
<ArrowDown className={`w-5 h-5 ${arrowColor}`} />
|
||||
)}
|
||||
</React.Fragment>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Tablet and Desktop Layout - Two Columns */}
|
||||
<div className="hidden sm:block">
|
||||
<div className="grid grid-cols-2 gap-4 sm:gap-6 lg:gap-8">
|
||||
{/* Left Column */}
|
||||
<div className="flex flex-col items-center space-y-2 sm:space-y-3">
|
||||
{leftSteps.map((step, index) => (
|
||||
<React.Fragment key={index}>
|
||||
<div className={`${cardColor} rounded-lg p-3 sm:p-4 w-full max-w-80 text-center border ${cardClassName}`}>
|
||||
<h3 className={`text-xs sm:text-sm font-medium ${textColor}`}>{step}</h3>
|
||||
</div>
|
||||
{index < leftSteps.length - 1 && (
|
||||
<ArrowDown className={`w-5 h-5 sm:w-6 sm:h-6 ${arrowColor}`} />
|
||||
)}
|
||||
</React.Fragment>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Right Column */}
|
||||
<div className="flex flex-col items-center space-y-2 sm:space-y-3">
|
||||
{rightSteps.map((step, index) => (
|
||||
<React.Fragment key={index}>
|
||||
<div className={`${cardColor} rounded-lg p-3 sm:p-4 w-full max-w-80 text-center border ${cardClassName}`}>
|
||||
<h3 className={`text-xs sm:text-sm font-medium ${textColor}`}>{step}</h3>
|
||||
</div>
|
||||
{index < rightSteps.length - 1 && (
|
||||
<ArrowUp className={`w-5 h-5 sm:w-6 sm:h-6 ${arrowColor}`} />
|
||||
)}
|
||||
</React.Fragment>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Horizontal Arrow positioned between Primary and Secondary Assembly */}
|
||||
<div className="absolute bottom-2 sm:bottom-4 lg:bottom-[0.7rem] left-1/2 transform -translate-x-1/2 flex items-center justify-center">
|
||||
<ArrowRight className={`w-6 h-6 sm:w-8 sm:h-8 ${arrowColor}`} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default GenomeMappingPipeline;
|
||||
@ -2,6 +2,7 @@
|
||||
import TitleBar from '../../components/shared/TitleBar';
|
||||
import GenomeMappingIntroduction from './components/GenomeMappingIntroduction';
|
||||
import GenomeMappingAdvantages from './components/GenomeMappingAdvantages';
|
||||
import GenomeMappingPipeline from './components/GenomeMappingPipeline';
|
||||
import GenomeMappingSpecifications from './components/GenomeMappingSpecifications';
|
||||
import PageLayout from '../../components/Layout/PageLayout';
|
||||
|
||||
@ -47,6 +48,7 @@ export default function GenomeMappingPage() {
|
||||
|
||||
{/* Advantages Section */}
|
||||
<GenomeMappingAdvantages />
|
||||
<GenomeMappingPipeline/>
|
||||
|
||||
{/* Specifications Section */}
|
||||
<GenomeMappingSpecifications />
|
||||
|
||||
@ -1,26 +0,0 @@
|
||||
// app/dna-sequencing/hybrid-genome-sequencing/components/HybridBioinformatics.jsx
|
||||
|
||||
const HybridBioinformatics = () => {
|
||||
return (
|
||||
<section className="py-8 lg:py-12 bg-gray-50">
|
||||
<div className="container mx-auto max-w-none px-4 lg:px-6">
|
||||
<h2 className="text-gray-600 text-left pb-6 text-2xl lg:text-3xl font-normal mb-8">
|
||||
Bioinformatics Pipeline
|
||||
</h2>
|
||||
|
||||
{/* Pipeline Image */}
|
||||
<div className="bg-white rounded-xl shadow-lg p-6 lg:p-8">
|
||||
<div className="flex justify-center">
|
||||
<img
|
||||
src="/images/bioinformatics-pipeline.jpg"
|
||||
alt="Bioinformatics Pipeline Workflow"
|
||||
className="max-w-full h-auto rounded-lg"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default HybridBioinformatics;
|
||||
@ -0,0 +1,139 @@
|
||||
import React from 'react';
|
||||
import { ArrowDown, ArrowRight, ArrowUp } from 'lucide-react';
|
||||
|
||||
const HybridSequencingPipeline = ({
|
||||
title = "Hybrid Sequencing",
|
||||
leftSteps = [
|
||||
"Raw Sequencing Data from Short Read (fastq files)",
|
||||
"Quality Control and Preprocessing of Data",
|
||||
"High Quality Sequencing Data (fastq file)",
|
||||
"Assembly of reads"
|
||||
],
|
||||
rightSteps = [
|
||||
"Annotation & Downstream Advanced Analysis",
|
||||
"Scaffolds of the genome",
|
||||
"Contigs from short reads and mapped to long reads",
|
||||
"Genome Assembly (Contigs from short reads)"
|
||||
],
|
||||
backgroundColor = "bg-gray-50",
|
||||
cardColor = "bg-blue-200",
|
||||
textColor = "text-blue-800",
|
||||
arrowColor = "text-gray-600",
|
||||
className = "",
|
||||
cardClassName = "",
|
||||
titleClassName = ""
|
||||
}) => {
|
||||
return (
|
||||
<section className={`py-6 sm:py-8 lg:py-12 ${backgroundColor} ${className}`}>
|
||||
<div className="container mx-auto max-w-none px-3 sm:px-4 lg:px-6">
|
||||
<h2 className={`text-gray-700 text-left pb-4 sm:pb-6 text-xl sm:text-2xl lg:text-3xl font-normal ${titleClassName}`}>
|
||||
{title}
|
||||
</h2>
|
||||
|
||||
{/* Pipeline Flowchart */}
|
||||
<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-7xl">
|
||||
<div className="relative">
|
||||
{/* Mobile Layout - Single Column */}
|
||||
<div className="block sm:hidden">
|
||||
<div className="flex flex-col items-center space-y-3">
|
||||
{/* Left side steps */}
|
||||
{leftSteps.map((step, index) => (
|
||||
<React.Fragment key={`left-${index}`}>
|
||||
<div className={`${cardColor} rounded-lg p-3 w-full text-center border ${cardClassName}`}>
|
||||
<h3 className={`text-xs font-medium ${textColor}`}>{step}</h3>
|
||||
</div>
|
||||
{index < leftSteps.length - 1 && (
|
||||
<ArrowDown className={`w-5 h-5 ${arrowColor}`} />
|
||||
)}
|
||||
</React.Fragment>
|
||||
))}
|
||||
|
||||
<ArrowRight className={`w-5 h-5 ${arrowColor} my-2`} />
|
||||
|
||||
{/* Right side steps in reverse order */}
|
||||
{[...rightSteps].reverse().map((step, index) => (
|
||||
<React.Fragment key={`right-${index}`}>
|
||||
<div className={`${cardColor} rounded-lg p-3 w-full text-center border ${cardClassName}`}>
|
||||
<h3 className={`text-xs font-medium ${textColor}`}>{step}</h3>
|
||||
</div>
|
||||
{index < rightSteps.length - 1 && (
|
||||
<ArrowUp className={`w-5 h-5 ${arrowColor}`} />
|
||||
)}
|
||||
</React.Fragment>
|
||||
))}
|
||||
|
||||
{/* Long Read Data Box for mobile */}
|
||||
<div className={`${cardColor} rounded-lg p-3 w-full text-center border ${cardClassName} mt-4`}>
|
||||
<h3 className={`text-xs font-medium ${textColor}`}>Raw Sequencing Data from Long Read (fastq file)</h3>
|
||||
</div>
|
||||
<div className="text-xs text-gray-500 text-center">↑ connects to Scaffolds & Contigs</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Desktop Layout - Two Columns with Long Read positioned correctly */}
|
||||
<div className="hidden sm:block">
|
||||
<div className="grid grid-cols-2 gap-8 lg:gap-12">
|
||||
{/* Left Column */}
|
||||
<div className="flex flex-col items-center space-y-4">
|
||||
{leftSteps.map((step, index) => (
|
||||
<React.Fragment key={`left-${index}`}>
|
||||
<div className={`${cardColor} rounded-lg p-4 w-full max-w-80 text-center border ${cardClassName}`}>
|
||||
<h3 className={`text-sm font-medium ${textColor}`}>{step}</h3>
|
||||
</div>
|
||||
{index < leftSteps.length - 1 && (
|
||||
<ArrowDown className={`w-6 h-6 ${arrowColor}`} />
|
||||
)}
|
||||
</React.Fragment>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Right Column */}
|
||||
<div className="flex flex-col items-center space-y-4">
|
||||
{rightSteps.map((step, index) => (
|
||||
<React.Fragment key={`right-${index}`}>
|
||||
<div className={`${cardColor} rounded-lg p-4 w-full max-w-80 text-center border ${cardClassName}`}>
|
||||
<h3 className={`text-sm font-medium ${textColor}`}>{step}</h3>
|
||||
</div>
|
||||
{index < rightSteps.length - 1 && (
|
||||
<ArrowUp className={`w-6 h-6 ${arrowColor}`} />
|
||||
)}
|
||||
</React.Fragment>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Horizontal Arrow from Assembly of reads to Genome Assembly */}
|
||||
<div className="absolute bottom-4 left-1/2 transform -translate-x-1/2 flex items-center justify-center">
|
||||
<ArrowRight className={`w-8 h-8 ${arrowColor}`} />
|
||||
</div>
|
||||
|
||||
{/* Long Read Data Box positioned to the right of Genome Assembly (same level) */}
|
||||
<div className="absolute bottom-4 right-0 transform translate-x-72">
|
||||
<div className={`${cardColor} rounded-lg p-4 w-80 text-center border ${cardClassName}`}>
|
||||
<h3 className={`text-sm font-medium ${textColor}`}>Raw Sequencing Data from Long Read (fastq file)</h3>
|
||||
</div>
|
||||
|
||||
{/* Direct vertical line and arrow to Scaffolds */}
|
||||
<div className="absolute left-1/2 transform -translate-x-1/2 -top-44">
|
||||
<div className="flex flex-col items-center">
|
||||
<ArrowUp className={`w-6 h-6 ${arrowColor}`} />
|
||||
<div className="w-0.5 h-36 bg-gray-400"></div>
|
||||
<ArrowUp className={`w-6 h-6 ${arrowColor}`} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default HybridSequencingPipeline;
|
||||
@ -2,7 +2,7 @@
|
||||
import TitleBar from '../../components/shared/TitleBar';
|
||||
import HybridIntroduction from './components/HybridIntroduction';
|
||||
import HybridAdvantages from './components/HybridAdvantages';
|
||||
import HybridBioinformatics from './components/HybridBioinformatics';
|
||||
// import HybridSequencingPipeline from './components/HybridSequencingPipeline'
|
||||
import HybridApplications from './components/HybridApplications';
|
||||
import HybridSpecifications from './components/HybridSpecifications';
|
||||
import PageLayout from '../../components/Layout/PageLayout';
|
||||
@ -51,7 +51,7 @@ export default function HybridGenomeSequencingPage() {
|
||||
<HybridAdvantages />
|
||||
|
||||
{/* Bioinformatics Pipeline Section */}
|
||||
<HybridBioinformatics />
|
||||
{/* <HybridSequencingPipeline /> */}
|
||||
|
||||
{/* Applications Section */}
|
||||
<HybridApplications />
|
||||
|
||||
@ -0,0 +1,131 @@
|
||||
import React from 'react';
|
||||
import { ArrowDown, ArrowRight, ArrowUp } from 'lucide-react';
|
||||
|
||||
const MetagenomicsPipeline = ({
|
||||
title = "Bioinformatics Pipeline",
|
||||
leftColumn = [
|
||||
"Raw Sequencing Data (fastq files)",
|
||||
"Quality Control and Preprocessing of Data",
|
||||
"High Quality Sequencing Data (fastq file)",
|
||||
"Alignment to Host Genome"
|
||||
],
|
||||
middleColumn = [
|
||||
"Assembly Validation",
|
||||
"Secondary Assembly (Scaffolds)",
|
||||
"Primary Assembly (Contigs) using Unaligned Data",
|
||||
"Remove Aligned reads to Host Genome and Retain only Unaligned Reads"
|
||||
],
|
||||
rightColumn = [
|
||||
"Gene Prediction and Gene Annotation",
|
||||
"Downstream Advanced Analysis"
|
||||
],
|
||||
backgroundColor = "bg-gray-50",
|
||||
cardColor = "bg-gray-300",
|
||||
textColor = "text-teal-600",
|
||||
arrowColor = "text-gray-600",
|
||||
className = "",
|
||||
cardClassName = "",
|
||||
titleClassName = ""
|
||||
}) => {
|
||||
// Combine all steps for mobile layout
|
||||
const mobileSteps = [
|
||||
...leftColumn,
|
||||
...middleColumn.slice().reverse(),
|
||||
...rightColumn
|
||||
];
|
||||
|
||||
return (
|
||||
<section className={`py-6 sm:py-8 lg:py-12 ${backgroundColor} ${className}`}>
|
||||
<div className="container mx-auto max-w-none px-3 sm:px-4 lg:px-6">
|
||||
<h2 className={`text-gray-600 text-left pb-4 sm:pb-6 text-xl sm:text-2xl lg:text-3xl font-normal ${titleClassName}`}>
|
||||
{title}
|
||||
</h2>
|
||||
|
||||
{/* Pipeline Flowchart */}
|
||||
<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">
|
||||
<div className="relative">
|
||||
{/* Mobile Layout - Single Column */}
|
||||
<div className="block lg:hidden">
|
||||
<div className="flex flex-col items-center space-y-3">
|
||||
{mobileSteps.map((step, index) => (
|
||||
<React.Fragment key={index}>
|
||||
<div className={`${cardColor} rounded-lg p-3 w-full text-center border ${cardClassName}`}>
|
||||
<h3 className={`text-xs font-medium ${textColor}`}>{step}</h3>
|
||||
</div>
|
||||
{index < mobileSteps.length - 1 && (
|
||||
<ArrowDown className={`w-5 h-5 ${arrowColor}`} />
|
||||
)}
|
||||
</React.Fragment>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Desktop Layout - Three Columns */}
|
||||
<div className="hidden lg:block">
|
||||
<div className="grid grid-cols-3 gap-6 lg:gap-10">
|
||||
{/* Left Column */}
|
||||
<div className="flex flex-col items-center space-y-3">
|
||||
{leftColumn.map((step, index) => (
|
||||
<React.Fragment key={index}>
|
||||
<div className={`${cardColor} rounded-lg p-4 w-full text-center border ${cardClassName}`}>
|
||||
<h3 className={`text-sm font-medium ${textColor}`}>{step}</h3>
|
||||
</div>
|
||||
{index < leftColumn.length - 1 && (
|
||||
<ArrowDown className={`w-6 h-6 ${arrowColor}`} />
|
||||
)}
|
||||
</React.Fragment>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Middle Column */}
|
||||
<div className="flex flex-col items-center space-y-3">
|
||||
{middleColumn.map((step, index) => (
|
||||
<React.Fragment key={index}>
|
||||
<div className={`${cardColor} rounded-lg p-4 w-full text-center border ${cardClassName}`}>
|
||||
<h3 className={`text-sm font-medium ${textColor}`}>{step}</h3>
|
||||
</div>
|
||||
{index < middleColumn.length - 1 && (
|
||||
<ArrowUp className={`w-6 h-6 ${arrowColor}`} />
|
||||
)}
|
||||
</React.Fragment>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Right Column */}
|
||||
<div className="flex flex-col items-center space-y-3">
|
||||
{rightColumn.map((step, index) => (
|
||||
<React.Fragment key={index}>
|
||||
<div className={`${cardColor} rounded-lg p-4 w-full text-center border ${cardClassName}`}>
|
||||
<h3 className={`text-sm font-medium ${textColor}`}>{step}</h3>
|
||||
</div>
|
||||
{index < rightColumn.length - 1 && (
|
||||
<ArrowDown className={`w-6 h-6 ${arrowColor}`} />
|
||||
)}
|
||||
</React.Fragment>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Horizontal Arrows */}
|
||||
{/* Arrow from left to middle column */}
|
||||
<div className="absolute bottom-8 left-1/3 transform -translate-x-1/2 flex items-center justify-center">
|
||||
<ArrowRight className={`w-8 h-8 ${arrowColor}`} />
|
||||
</div>
|
||||
|
||||
{/* Arrow from middle to right column */}
|
||||
<div className="absolute top-4 right-1/3 transform translate-x-1/2 flex items-center justify-center">
|
||||
<ArrowRight className={`w-8 h-8 ${arrowColor}`} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default MetagenomicsPipeline;
|
||||
@ -4,6 +4,7 @@ import MetagenomicsIntroduction from './components/MetagenomicsIntroduction';
|
||||
import MetagenomicsAdvantages from './components/MetagenomicsAdvantages';
|
||||
import MetagenomicsApplications from './components/MetagenomicsApplications';
|
||||
import MetagenomicsSpecifications from './components/MetagenomicsSpecifications';
|
||||
import MetagenomicsPipeline from './components/MetagenomicsPipeline';
|
||||
import PageLayout from '../../components/Layout/PageLayout';
|
||||
|
||||
export const metadata = {
|
||||
@ -48,6 +49,7 @@ export default function MetagenomicsSequencingPage() {
|
||||
|
||||
{/* Advantages Section */}
|
||||
<MetagenomicsAdvantages />
|
||||
<MetagenomicsPipeline/>
|
||||
|
||||
{/* Applications Section */}
|
||||
<MetagenomicsApplications />
|
||||
|
||||
@ -0,0 +1,103 @@
|
||||
import React from 'react';
|
||||
import { ArrowDown, ArrowRight, ArrowUp } from 'lucide-react';
|
||||
|
||||
const SingleCellPipeline = ({
|
||||
title = "Bioinformatics Pipeline",
|
||||
leftSteps = [
|
||||
"Raw Sequencing Data (fastq files)",
|
||||
"Quality Control and Preprocessing of Data",
|
||||
"High Quality Sequencing Data (fastq file)",
|
||||
"Alignment to Reference Genome"
|
||||
],
|
||||
rightSteps = [
|
||||
"Evolutionary Analysis",
|
||||
"Annotation",
|
||||
"Variants Calling - SNVs, Indels, CNVs",
|
||||
"Mark Duplicates and Post-Processing"
|
||||
],
|
||||
backgroundColor = "bg-gray-50",
|
||||
cardColor = "bg-gray-300",
|
||||
textColor = "text-teal-600",
|
||||
arrowColor = "text-gray-600",
|
||||
className = "",
|
||||
cardClassName = "",
|
||||
titleClassName = ""
|
||||
}) => {
|
||||
// Combine steps for mobile layout
|
||||
const mobileSteps = [...leftSteps, ...rightSteps.slice().reverse()];
|
||||
|
||||
return (
|
||||
<section className={`py-6 sm:py-8 lg:py-12 ${backgroundColor} ${className}`}>
|
||||
<div className="container mx-auto max-w-none px-3 sm:px-4 lg:px-6">
|
||||
<h2 className={`text-gray-700 text-left pb-4 sm:pb-6 text-xl sm:text-2xl lg:text-3xl font-normal ${titleClassName}`}>
|
||||
{title}
|
||||
</h2>
|
||||
|
||||
{/* Pipeline Flowchart */}
|
||||
<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-5xl">
|
||||
<div className="relative">
|
||||
{/* Mobile Layout - Single Column */}
|
||||
<div className="block sm:hidden">
|
||||
<div className="flex flex-col items-center space-y-3">
|
||||
{mobileSteps.map((step, index) => (
|
||||
<React.Fragment key={index}>
|
||||
<div className={`${cardColor} rounded-lg p-3 w-full text-center border ${cardClassName}`}>
|
||||
<h3 className={`text-xs font-medium ${textColor}`}>{step}</h3>
|
||||
</div>
|
||||
{index < mobileSteps.length - 1 && (
|
||||
<ArrowDown className={`w-5 h-5 ${arrowColor}`} />
|
||||
)}
|
||||
</React.Fragment>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Tablet and Desktop Layout - Two Columns */}
|
||||
<div className="hidden sm:block">
|
||||
<div className="grid grid-cols-2 gap-4 sm:gap-6 lg:gap-8">
|
||||
{/* Left Column */}
|
||||
<div className="flex flex-col items-center space-y-2 sm:space-y-3">
|
||||
{leftSteps.map((step, index) => (
|
||||
<React.Fragment key={index}>
|
||||
<div className={`${cardColor} rounded-lg p-3 sm:p-4 w-full max-w-80 text-center border ${cardClassName}`}>
|
||||
<h3 className={`text-xs sm:text-sm font-medium ${textColor}`}>{step}</h3>
|
||||
</div>
|
||||
{index < leftSteps.length - 1 && (
|
||||
<ArrowDown className={`w-5 h-5 sm:w-6 sm:h-6 ${arrowColor}`} />
|
||||
)}
|
||||
</React.Fragment>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Right Column */}
|
||||
<div className="flex flex-col items-center space-y-2 sm:space-y-3">
|
||||
{rightSteps.map((step, index) => (
|
||||
<React.Fragment key={index}>
|
||||
<div className={`${cardColor} rounded-lg p-3 sm:p-4 w-full max-w-80 text-center border ${cardClassName}`}>
|
||||
<h3 className={`text-xs sm:text-sm font-medium ${textColor}`}>{step}</h3>
|
||||
</div>
|
||||
{index < rightSteps.length - 1 && (
|
||||
<ArrowUp className={`w-5 h-5 sm:w-6 sm:h-6 ${arrowColor}`} />
|
||||
)}
|
||||
</React.Fragment>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Horizontal Arrow positioned between Primary and Secondary Assembly */}
|
||||
<div className="absolute bottom-2 sm:bottom-4 lg:bottom-[0.7rem] left-1/2 transform -translate-x-1/2 flex items-center justify-center">
|
||||
<ArrowRight className={`w-6 h-6 sm:w-8 sm:h-8 ${arrowColor}`} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default SingleCellPipeline;
|
||||
@ -3,6 +3,7 @@ import TitleBar from '../../components/shared/TitleBar';
|
||||
import SingleCellIntroduction from './components/SingleCellIntroduction';
|
||||
import SingleCellAdvantages from './components/SingleCellAdvantages';
|
||||
import SingleCellApplications from './components/SingleCellApplications';
|
||||
import SingleCellPipeline from './components/SingleCellPipeline';
|
||||
import SingleCellSpecifications from './components/SingleCellSpecifications';
|
||||
import PageLayout from '../../components/Layout/PageLayout';
|
||||
|
||||
@ -48,6 +49,7 @@ export default function SingleCellDNASequencingPage() {
|
||||
|
||||
{/* Advantages Section */}
|
||||
<SingleCellAdvantages />
|
||||
<SingleCellPipeline/>
|
||||
|
||||
{/* Applications Section */}
|
||||
<SingleCellApplications />
|
||||
|
||||
@ -0,0 +1,103 @@
|
||||
import React from 'react';
|
||||
import { ArrowDown, ArrowRight, ArrowUp } from 'lucide-react';
|
||||
|
||||
const WGSDeNovoPipeline = ({
|
||||
title = "Bioinformatics Pipeline",
|
||||
leftSteps = [
|
||||
"Raw Sequencing Data (fastq files)",
|
||||
"Quality Control and Preprocessing of Data",
|
||||
"High Quality Sequencing Data (fastq file)",
|
||||
"Primary Assembly (Contigs)"
|
||||
],
|
||||
rightSteps = [
|
||||
"Downstream Advanced Analysis",
|
||||
"Gene Prediction and Gene Annotation",
|
||||
"Assembly Validation",
|
||||
"Secondary Assembly (Scaffolds)"
|
||||
],
|
||||
backgroundColor = "bg-gray-50",
|
||||
cardColor = "bg-gray-300",
|
||||
textColor = "text-teal-600",
|
||||
arrowColor = "text-gray-600",
|
||||
className = "",
|
||||
cardClassName = "",
|
||||
titleClassName = ""
|
||||
}) => {
|
||||
// Combine steps for mobile layout
|
||||
const mobileSteps = [...leftSteps, ...rightSteps.slice().reverse()];
|
||||
|
||||
return (
|
||||
<section className={`py-6 sm:py-8 lg:py-12 ${backgroundColor} ${className}`}>
|
||||
<div className="container mx-auto max-w-none px-3 sm:px-4 lg:px-6">
|
||||
<h2 className={`text-gray-700 text-left pb-4 sm:pb-6 text-xl sm:text-2xl lg:text-3xl font-normal ${titleClassName}`}>
|
||||
{title}
|
||||
</h2>
|
||||
|
||||
{/* Pipeline Flowchart */}
|
||||
<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-5xl">
|
||||
<div className="relative">
|
||||
{/* Mobile Layout - Single Column */}
|
||||
<div className="block sm:hidden">
|
||||
<div className="flex flex-col items-center space-y-3">
|
||||
{mobileSteps.map((step, index) => (
|
||||
<React.Fragment key={index}>
|
||||
<div className={`${cardColor} rounded-lg p-3 w-full text-center border ${cardClassName}`}>
|
||||
<h3 className={`text-xs font-medium ${textColor}`}>{step}</h3>
|
||||
</div>
|
||||
{index < mobileSteps.length - 1 && (
|
||||
<ArrowDown className={`w-5 h-5 ${arrowColor}`} />
|
||||
)}
|
||||
</React.Fragment>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Tablet and Desktop Layout - Two Columns */}
|
||||
<div className="hidden sm:block">
|
||||
<div className="grid grid-cols-2 gap-4 sm:gap-6 lg:gap-8">
|
||||
{/* Left Column */}
|
||||
<div className="flex flex-col items-center space-y-2 sm:space-y-3">
|
||||
{leftSteps.map((step, index) => (
|
||||
<React.Fragment key={index}>
|
||||
<div className={`${cardColor} rounded-lg p-3 sm:p-4 w-full max-w-80 text-center border ${cardClassName}`}>
|
||||
<h3 className={`text-xs sm:text-sm font-medium ${textColor}`}>{step}</h3>
|
||||
</div>
|
||||
{index < leftSteps.length - 1 && (
|
||||
<ArrowDown className={`w-5 h-5 sm:w-6 sm:h-6 ${arrowColor}`} />
|
||||
)}
|
||||
</React.Fragment>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Right Column */}
|
||||
<div className="flex flex-col items-center space-y-2 sm:space-y-3">
|
||||
{rightSteps.map((step, index) => (
|
||||
<React.Fragment key={index}>
|
||||
<div className={`${cardColor} rounded-lg p-3 sm:p-4 w-full max-w-80 text-center border ${cardClassName}`}>
|
||||
<h3 className={`text-xs sm:text-sm font-medium ${textColor}`}>{step}</h3>
|
||||
</div>
|
||||
{index < rightSteps.length - 1 && (
|
||||
<ArrowUp className={`w-5 h-5 sm:w-6 sm:h-6 ${arrowColor}`} />
|
||||
)}
|
||||
</React.Fragment>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Horizontal Arrow positioned between Primary and Secondary Assembly */}
|
||||
<div className="absolute bottom-2 sm:bottom-4 lg:bottom-[0.7rem] left-1/2 transform -translate-x-1/2 flex items-center justify-center">
|
||||
<ArrowRight className={`w-6 h-6 sm:w-8 sm:h-8 ${arrowColor}`} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default WGSDeNovoPipeline;
|
||||
@ -3,6 +3,7 @@ import DenovoIntroduction from './components/DenovoIntroduction';
|
||||
import DenovoAdvantages from './components/DenovoAdvantages';
|
||||
import DenovoApplications from './components/DenovoApplications';
|
||||
import DenovoSpecifications from './components/DenovoSpecifications';
|
||||
import WGSDeNovoPipeline from './components/WGSDeNovoPipeline';
|
||||
import PageLayout from '../../../components/Layout/PageLayout';
|
||||
|
||||
export default function WholeGenomeDenovoPage() {
|
||||
@ -24,6 +25,7 @@ export default function WholeGenomeDenovoPage() {
|
||||
<div className="page-content">
|
||||
<DenovoIntroduction />
|
||||
<DenovoAdvantages />
|
||||
<WGSDeNovoPipeline/>
|
||||
<DenovoApplications />
|
||||
<DenovoSpecifications />
|
||||
</div>
|
||||
|
||||
@ -0,0 +1,103 @@
|
||||
import React from 'react';
|
||||
import { ArrowDown, ArrowRight, ArrowUp } from 'lucide-react';
|
||||
|
||||
const WGSResequencingPipeline = ({
|
||||
title = "Bioinformatics Pipeline",
|
||||
leftSteps = [
|
||||
"Raw Sequencing Data (fastq files)",
|
||||
"Quality Control and Preprocessing of Data",
|
||||
"High Quality Sequencing Data (fastq file)",
|
||||
"Alignment to Reference Genome"
|
||||
],
|
||||
rightSteps = [
|
||||
"Downstream Advanced Analysis",
|
||||
"Annotation",
|
||||
"Variants Calling - SNVs, Indels, CNVs",
|
||||
"Mark Duplicates and Post-Processing"
|
||||
],
|
||||
backgroundColor = "bg-gray-50",
|
||||
cardColor = "bg-gray-300",
|
||||
textColor = "text-teal-600",
|
||||
arrowColor = "text-gray-600",
|
||||
className = "",
|
||||
cardClassName = "",
|
||||
titleClassName = ""
|
||||
}) => {
|
||||
// Combine steps for mobile layout
|
||||
const mobileSteps = [...leftSteps, ...rightSteps.slice().reverse()];
|
||||
|
||||
return (
|
||||
<section className={`py-6 sm:py-8 lg:py-12 ${backgroundColor} ${className}`}>
|
||||
<div className="container mx-auto max-w-none px-3 sm:px-4 lg:px-6">
|
||||
<h2 className={`text-gray-700 text-left pb-4 sm:pb-6 text-xl sm:text-2xl lg:text-3xl font-normal ${titleClassName}`}>
|
||||
{title}
|
||||
</h2>
|
||||
|
||||
{/* Pipeline Flowchart */}
|
||||
<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-5xl">
|
||||
<div className="relative">
|
||||
{/* Mobile Layout - Single Column */}
|
||||
<div className="block sm:hidden">
|
||||
<div className="flex flex-col items-center space-y-3">
|
||||
{mobileSteps.map((step, index) => (
|
||||
<React.Fragment key={index}>
|
||||
<div className={`${cardColor} rounded-lg p-3 w-full text-center border ${cardClassName}`}>
|
||||
<h3 className={`text-xs font-medium ${textColor}`}>{step}</h3>
|
||||
</div>
|
||||
{index < mobileSteps.length - 1 && (
|
||||
<ArrowDown className={`w-5 h-5 ${arrowColor}`} />
|
||||
)}
|
||||
</React.Fragment>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Tablet and Desktop Layout - Two Columns */}
|
||||
<div className="hidden sm:block">
|
||||
<div className="grid grid-cols-2 gap-4 sm:gap-6 lg:gap-8">
|
||||
{/* Left Column */}
|
||||
<div className="flex flex-col items-center space-y-2 sm:space-y-3">
|
||||
{leftSteps.map((step, index) => (
|
||||
<React.Fragment key={index}>
|
||||
<div className={`${cardColor} rounded-lg p-3 sm:p-4 w-full max-w-80 text-center border ${cardClassName}`}>
|
||||
<h3 className={`text-xs sm:text-sm font-medium ${textColor}`}>{step}</h3>
|
||||
</div>
|
||||
{index < leftSteps.length - 1 && (
|
||||
<ArrowDown className={`w-5 h-5 sm:w-6 sm:h-6 ${arrowColor}`} />
|
||||
)}
|
||||
</React.Fragment>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Right Column */}
|
||||
<div className="flex flex-col items-center space-y-2 sm:space-y-3">
|
||||
{rightSteps.map((step, index) => (
|
||||
<React.Fragment key={index}>
|
||||
<div className={`${cardColor} rounded-lg p-3 sm:p-4 w-full max-w-80 text-center border ${cardClassName}`}>
|
||||
<h3 className={`text-xs sm:text-sm font-medium ${textColor}`}>{step}</h3>
|
||||
</div>
|
||||
{index < rightSteps.length - 1 && (
|
||||
<ArrowUp className={`w-5 h-5 sm:w-6 sm:h-6 ${arrowColor}`} />
|
||||
)}
|
||||
</React.Fragment>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Horizontal Arrow positioned between Primary and Secondary Assembly */}
|
||||
<div className="absolute bottom-2 sm:bottom-4 lg:bottom-[0.7rem] left-1/2 transform -translate-x-1/2 flex items-center justify-center">
|
||||
<ArrowRight className={`w-6 h-6 sm:w-8 sm:h-8 ${arrowColor}`} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default WGSResequencingPipeline;
|
||||
@ -3,6 +3,7 @@ import ResequencingIntroduction from './components/ResequencingIntroduction';
|
||||
import ResequencingAdvantages from './components/ResequencingAdvantages';
|
||||
import ResequencingApplications from './components/ResequencingApplications';
|
||||
import ResequencingSpecifications from './components/ResequencingSpecifications';
|
||||
import WGSResequencingPipeline from './components/WGSResequencingPipeline';
|
||||
import PageLayout from '../../../components/Layout/PageLayout';
|
||||
|
||||
export default function WholeGenomeResequencingPage() {
|
||||
@ -24,6 +25,7 @@ export default function WholeGenomeResequencingPage() {
|
||||
<div className="page-content">
|
||||
<ResequencingIntroduction />
|
||||
<ResequencingAdvantages />
|
||||
<WGSResequencingPipeline/>
|
||||
<ResequencingApplications />
|
||||
<ResequencingSpecifications />
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user