mukeshs/operify
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

UI styling update

Browse Source
This commit is contained in:
mukesh13
2025-08-21 12:40:06 +05:30
parent 543e21d2e2
commit 24ec58a76b
78 changed files with 524 additions and 307 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

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

15
app/dna-sequencing/whole-genome-sequencing/denovo/components/WGSDeNovoPipeline.tsx
View File

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