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

Responsive check

Browse Source
This commit is contained in:
mukesh13
2025-09-12 11:17:42 +05:30
parent e925b985f2
commit b85ec3d929
14 changed files with 102 additions and 170 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
app/components/shared/AdvantagesLayout.jsx
View File

@ -4,24 +4,29 @@ const AdvantagesLayout = ({
title = "Advantages", title = "Advantages",
advantageItems = [], advantageItems = [],
backgroundGradient = "bg-gradient-to-br from-white to-white", backgroundGradient = "bg-gradient-to-br from-white to-white",
titleColor = "text-gray-700" titleColor = "text-teal-700"
}) => { }) => {
return ( return (
<section className={`py-5 lg:py-8 ${backgroundGradient} rounded-2xl shadow-sm`}> <div className="w-full min-w-0 bg-white">
<div className="container-fluid px-4 lg:px-6"> <div className="w-full max-w-none px-4 sm:px-6 lg:px-6 py-4 mb-2">
<h2 className={`text-2xl lg:text-3xl ${titleColor} text-left pb-2 mb-6 lg:mb-6`}> <section>
{title} <h2 className={`text-2xl sm:text-3xl font-bold ${titleColor} mb-4`}>
</h2> {title}
</h2>
<div className="text-justify px-4 lg:px-10"> <ul className="space-y-4 text-gray-600 leading-relaxed text-sm sm:text-base">
<ul className="space-y-4 text-gray-600 text-base leading-relaxed list-disc">
{advantageItems.map((item, index) => ( {advantageItems.map((item, index) => (
<li key={index}>{item}</li> <li key={index} className="flex items-start">
<span
className="inline-block w-2 h-2 rounded-full mt-2 mr-3 flex-shrink-0"
style={{backgroundColor: '#faae31'}}
></span>
<span className="text-justify break-words">{item}</span>
</li>
))} ))}
</ul> </ul>
</div> </section>
</div> </div>
</section> </div>
); );
}; };

8
app/components/shared/ApplicationsLayout.jsx
View File

@ -7,9 +7,9 @@ const ApplicationsLayout = ({
titleColor = "text-gray-700" titleColor = "text-gray-700"
}) => { }) => {
return ( return (
<section className={`py-5 lg:py-5 ${backgroundColor}`}> <section className={`w-full min-w-0 py-5 lg:py-5 ${backgroundColor}`}>
<div className="container-fluid px-4 lg:px-6"> <div className="w-full max-w-none px-4 sm:px-6 lg:px-6">
<h2 className={"text-3xl font-bold text-teal-700 mb-4"}> <h2 className="text-2xl sm:text-3xl font-bold text-teal-700 mb-4">
{title} {title}
</h2> </h2>
@ -20,7 +20,7 @@ const ApplicationsLayout = ({
className="w-1.5 h-1.5 rounded-full mt-2 mr-3 flex-shrink-0" className="w-1.5 h-1.5 rounded-full mt-2 mr-3 flex-shrink-0"
style={{backgroundColor: '#faae31'}} style={{backgroundColor: '#faae31'}}
></span> ></span>
<span className="text-base">{item}</span> <span className="text-sm sm:text-base break-words">{item}</span>
</li> </li>
))} ))}
</ul> </ul>

48
app/components/shared/IntroductionLayout.jsx
View File

@ -1,3 +1,5 @@
// components/shared/CombinedWorkflowLayout.jsx
import React from 'react'; import React from 'react';
const CombinedWorkflowLayout = ({ const CombinedWorkflowLayout = ({
@ -9,25 +11,25 @@ const CombinedWorkflowLayout = ({
imageAlt = "Workflow diagram" imageAlt = "Workflow diagram"
}) => { }) => {
return ( return (
<div className="w-full bg-white"> <div className="w-full min-w-0 bg-white">
{/* Main container with two columns */} {/* Main container with two columns */}
<div className="grid grid-cols-1 lg:grid-cols-[1.2fr_1.0fr] min-h-screen"> <div className="grid grid-cols-1 lg:grid-cols-[1.2fr_1.0fr] gap-0">
{/* Left Column - Content */} {/* Left Column - Content */}
<div className="px-6 lg:px-12 py-8"> <div className="w-full min-w-0 px-4 sm:px-6 lg:px-12 py-6 lg:py-8">
{/* Introduction Section */} {/* Introduction Section */}
<section className="mb-8"> <section className="mb-8">
<h2 className="text-3xl font-bold text-teal-700 mb-4"> <h2 className="text-2xl sm:text-3xl font-bold text-teal-700 mb-4">
{introTitle} {introTitle}
</h2> </h2>
<ul className="space-y-4 text-gray-600 leading-relaxed text-sm lg:text-base"> <ul className="space-y-4 text-gray-600 leading-relaxed text-sm sm:text-base">
{introItems.map((item, index) => ( {introItems.map((item, index) => (
<li key={index} className="flex items-start"> <li key={index} className="flex items-start">
<span <span
className="inline-block w-2 h-2 rounded-full mt-2 mr-3 flex-shrink-0" className="inline-block w-2 h-2 rounded-full mt-2 mr-3 flex-shrink-0"
style={{backgroundColor: '#faae31'}} style={{backgroundColor: '#faae31'}}
></span> ></span>
<span className="text-justify">{item}</span> <span className="text-justify break-words">{item}</span>
</li> </li>
))} ))}
</ul> </ul>
@ -35,17 +37,17 @@ const CombinedWorkflowLayout = ({
{/* Advantage Section */} {/* Advantage Section */}
<section> <section>
<h2 className="text-3xl font-bold text-teal-700 mb-4"> <h2 className="text-2xl sm:text-3xl font-bold text-teal-700 mb-4">
{advantageTitle} {advantageTitle}
</h2> </h2>
<ul className="space-y-4 text-gray-600 leading-relaxed text-sm lg:text-base"> <ul className="space-y-4 text-gray-600 leading-relaxed text-sm sm:text-base">
{advantageItems.map((item, index) => ( {advantageItems.map((item, index) => (
<li key={index} className="flex items-start"> <li key={index} className="flex items-start">
<span <span
className="inline-block w-2 h-2 rounded-full mt-2 mr-3 flex-shrink-0" className="inline-block w-2 h-2 rounded-full mt-2 mr-3 flex-shrink-0"
style={{backgroundColor: '#faae31'}} style={{backgroundColor: '#faae31'}}
></span> ></span>
<span className="text-justify">{item}</span> <span className="text-justify break-words">{item}</span>
</li> </li>
))} ))}
</ul> </ul>
@ -53,19 +55,21 @@ const CombinedWorkflowLayout = ({
</div> </div>
{/* Right Column - Workflow Image */} {/* Right Column - Workflow Image */}
<div className="relative flex items-start justify-center p-4"> <div className="w-full min-w-0 flex items-start justify-center p-4 lg:p-6">
{imageUrl ? ( <div className="w-full max-w-md">
<img {imageUrl ? (
src={imageUrl} <img
alt={imageAlt} src={imageUrl}
className="max-w-full min-h-90px object-contain" alt={imageAlt}
/> className="w-full h-auto object-contain"
) : ( />
<div className="text-gray-400 text-center"> ) : (
<p>Workflow image will appear here</p> <div className="text-gray-400 text-center p-8">
<p className="text-sm mt-2">Please provide the imageUrl prop</p> <p>Workflow image will appear here</p>
</div> <p className="text-sm mt-2">Please provide the imageUrl prop</p>
)} </div>
)}
</div>
</div> </div>
</div> </div>
</div> </div>

31
app/components/shared/SpecificationsLayout.jsx
View File

@ -1,4 +1,5 @@
// components/shared/SpecificationsLayout.jsx // components/shared/SpecificationsLayout.jsx
import Link from 'next/link'; import Link from 'next/link';
const SpecificationsLayout = ({ const SpecificationsLayout = ({
@ -8,48 +9,48 @@ const SpecificationsLayout = ({
iconBackgroundColor = "bg-orange-100" iconBackgroundColor = "bg-orange-100"
}) => { }) => {
return ( return (
<section className="py-8 lg:py-6"> <section className="w-full min-w-0 py-6 lg:py-8">
<div className="container-fluid px-4 lg:px-6"> <div className="w-full max-w-none px-4 sm:px-6 lg:px-6">
{/* Section Header */} {/* Section Header */}
<div className="text-left mb-8"> <div className="text-left mb-6 lg:mb-8">
<h2 className={"text-3xl font-bold text-teal-700 mb-4"}> <h2 className="text-2xl sm:text-3xl font-bold text-teal-700 mb-4">
{title} {title}
</h2> </h2>
</div> </div>
{/* Specifications Grid */} {/* Specifications Grid */}
<div className="grid grid-cols-1 md:grid-cols-3 gap-6 max-w-6xl mx-auto"> <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-6 w-full max-w-none">
{specificationItems.map((spec, index) => ( {specificationItems.map((spec, index) => (
<div <div
key={index} key={index}
className="relative" className="w-full min-w-0"
> >
{/* Background Card */} {/* Background Card */}
<div <div
className="rounded-3xl p-8 h-full min-h-[280px] flex flex-col" className="rounded-3xl p-6 lg:p-8 h-full min-h-[240px] sm:min-h-[280px] flex flex-col"
style={{ backgroundColor: backgroundColor }} style={{ backgroundColor: backgroundColor }}
> >
{/* Icon Circle - Updated to match AdvantagesSection */} {/* Icon Circle */}
<div className="flex justify-center mb-6"> <div className="flex justify-center mb-4 lg:mb-6">
<div className={`w-16 h-16 ${iconBackgroundColor} rounded-full flex items-center justify-center`}> <div className={`w-12 h-12 sm:w-16 sm:h-16 ${iconBackgroundColor} rounded-full flex items-center justify-center`}>
<img <img
src={spec.icon} src={spec.icon}
className="w-10 h-10 object-contain" className="w-8 h-8 sm:w-10 sm:h-10 object-contain"
alt={`${spec.title} Icon`} alt={`${spec.title} Icon`}
/> />
</div> </div>
</div> </div>
{/* Title */} {/* Title */}
<h3 className="text-center text-teal-700 text-lg font-semibold mb-4"> <h3 className="text-center text-teal-700 text-base sm:text-lg font-semibold mb-3 lg:mb-4">
{spec.title} {spec.title}
</h3> </h3>
{/* Content */} {/* Content */}
<div className="text-gray-700 text-sm leading-relaxed text-center flex-grow flex items-start justify-center"> <div className="text-gray-700 text-xs sm:text-sm leading-relaxed text-center flex-grow flex items-start justify-center">
<div className="w-full"> <div className="w-full min-w-0">
{spec.renderContent ? spec.renderContent() : ( {spec.renderContent ? spec.renderContent() : (
<div className="text-gray-600"> <div className="text-gray-600 break-words">
{spec.content} {spec.content}
</div> </div>
)} )}

16
app/dna-sequencing/enrichment-sequencing/components/EnrichmentIntroduction.jsx
View File

@ -10,22 +10,16 @@ const EnrichmentIntroduction = () => {
"It is a powerful tool for diverse genomic studies, capable of sequencing humans, livestock, plants, bacteria, and disease-related microbes." "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."
];
return ( return (
<div className="w-full bg-white"> <div className="w-full bg-white">
{/* Main container with two columns */} {/* Main container with two columns */}
<div className="grid grid-cols-1 lg:grid-cols-[1.2fr_1.0fr] min-h-screen"> <div className="grid grid-cols-1 lg:grid-cols-[1.2fr_1.0fr]">
{/* Left Column - Content using existing IntroductionLayout structure */} {/* Left Column - Content using existing IntroductionLayout structure */}
<div className="px-6 lg:px-12 py-8"> <div className="px-6 lg:px-6 py-6">
{/* Introduction Section */} {/* Introduction Section */}
<section className="mb-8"> <section>
<h2 className="text-3xl font-bold text-teal-700 mb-4"> <h2 className="text-3xl font-bold text-teal-700 mb-4">
Introduction and Workflow Introduction and Workflow
</h2> </h2>
@ -43,7 +37,7 @@ const EnrichmentIntroduction = () => {
</section> </section>
{/* Advantage Section */} {/* Advantage Section */}
<section> {/* <section>
<h2 className="text-3xl font-bold text-teal-700 mb-4"> <h2 className="text-3xl font-bold text-teal-700 mb-4">
Advantage Advantage
</h2> </h2>
@ -58,7 +52,7 @@ const EnrichmentIntroduction = () => {
</li> </li>
))} ))}
</ul> </ul>
</section> </section> */}
</div> </div>
{/* Right Column - Custom Content with Image and SVG */} {/* Right Column - Custom Content with Image and SVG */}

2
app/dna-sequencing/enrichment-sequencing/page.js
View File

@ -1,6 +1,7 @@
import PageLayout from '../../components/Layout/PageLayout'; import PageLayout from '../../components/Layout/PageLayout';
import DNATitleBar from '../../components/shared/DNATitleBar'; import DNATitleBar from '../../components/shared/DNATitleBar';
import EnrichmentIntroduction from './components/EnrichmentIntroduction'; import EnrichmentIntroduction from './components/EnrichmentIntroduction';
import EnrichmentAdvantages from './components/EnrichmentAdvantages';
import EnrichmentSpecifications from './components/EnrichmentSpecifications'; import EnrichmentSpecifications from './components/EnrichmentSpecifications';
import EnrichmentPipeline from './components/EnrichmentPipeline'; import EnrichmentPipeline from './components/EnrichmentPipeline';
@ -21,6 +22,7 @@ export default function EnrichmentSequencingPage() {
<div className="page-content"> <div className="page-content">
<EnrichmentIntroduction /> <EnrichmentIntroduction />
<EnrichmentAdvantages/>
<EnrichmentPipeline/> <EnrichmentPipeline/>
<EnrichmentSpecifications /> <EnrichmentSpecifications />
</div> </div>

36
app/dna-sequencing/epigenomics-sequencing/components/EpigenomicsIntroduction.jsx
View File

@ -10,28 +10,16 @@ const EpigenomicsIntroduction = () => {
"It is a powerful tool for diverse genomic studies, capable of sequencing humans, livestock, plants, bacteria, and disease-related microbes." "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)",
"Chip Sequencing",
"ATAC Sequencing"
];
return ( return (
<div className="w-full bg-white"> <div className="w-full bg-white">
{/* Main container with two columns */} {/* Main container with two columns */}
<div className="grid grid-cols-1 lg:grid-cols-[1.2fr_1.0fr] min-h-screen"> <div className="grid grid-cols-1 lg:grid-cols-[1.2fr_1.0fr]">
{/* Left Column - Content using existing IntroductionLayout structure */} {/* Left Column - Content using existing IntroductionLayout structure */}
<div className="px-6 lg:px-12 py-8"> <div className="px-6 lg:px-6 py-8">
{/* Introduction Section */} {/* Introduction Section */}
<section className="mb-8"> <section>
<h2 className="text-3xl font-bold text-teal-700 mb-4"> <h2 className="text-3xl font-bold text-teal-700 mb-4">
Introduction and Workflow Introduction and Workflow
</h2> </h2>
@ -47,24 +35,6 @@ const EpigenomicsIntroduction = () => {
))} ))}
</ul> </ul>
</section> </section>
{/* Advantage Section */}
<section className="mb-8">
<h2 className="text-3xl font-bold text-teal-700 mb-4">
Advantage
</h2>
<ul className="space-y-4 text-gray-600 leading-relaxed text-sm lg:text-base">
{advantageItems.map((item, index) => (
<li key={index} className="flex items-start">
<span
className="inline-block w-2 h-2 rounded-full mt-2 mr-3 flex-shrink-0"
style={{backgroundColor: '#faae31'}}
></span>
<span className="text-justify">{item}</span>
</li>
))}
</ul>
</section>
</div> </div>
{/* Right Column - Custom Content with Image and SVG */} {/* Right Column - Custom Content with Image and SVG */}

2
app/dna-sequencing/epigenomics-sequencing/page.js
View File

@ -1,5 +1,6 @@
import DNATitleBar from '../../components/shared/DNATitleBar'; import DNATitleBar from '../../components/shared/DNATitleBar';
import EpigenomicsIntroduction from './components/EpigenomicsIntroduction'; import EpigenomicsIntroduction from './components/EpigenomicsIntroduction';
import EpigenomicsAdvantages from './components/EpigenomicsAdvantages';
import EpigenomicsSpecifications from './components/EpigenomicsSpecifications'; import EpigenomicsSpecifications from './components/EpigenomicsSpecifications';
import EpigenomicsPipeline from './components/EpigenomicsPipeline'; import EpigenomicsPipeline from './components/EpigenomicsPipeline';
import PageLayout from '../../components/Layout/PageLayout'; import PageLayout from '../../components/Layout/PageLayout';
@ -21,6 +22,7 @@ export default function EpigenomicsSequencingPage() {
<div className="page-content"> <div className="page-content">
<EpigenomicsIntroduction /> <EpigenomicsIntroduction />
<EpigenomicsAdvantages/>
<EpigenomicsPipeline/> <EpigenomicsPipeline/>
<EpigenomicsSpecifications /> <EpigenomicsSpecifications />
</div> </div>

35
app/dna-sequencing/genome-mapping/components/GenomeMappingIntroduction.jsx
View File

@ -10,27 +10,16 @@ const GenomeMappingIntroduction = () => {
"It is a powerful tool for diverse genomic studies, capable of sequencing humans, livestock, plants, bacteria, and disease-related microbes." "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",
"Optical Sequencing"
];
return ( return (
<div className="w-full bg-white"> <div className="w-full bg-white">
{/* Main container with two columns */} {/* Main container with two columns */}
<div className="grid grid-cols-1 lg:grid-cols-[1.2fr_1.0fr] min-h-screen"> <div className="grid grid-cols-1 lg:grid-cols-[1.2fr_1.0fr]">
{/* Left Column - Content using existing IntroductionLayout structure */} {/* Left Column - Content using existing IntroductionLayout structure */}
<div className="px-6 lg:px-12 py-8"> <div className="px-6 lg:px-6 py-8">
{/* Introduction Section */} {/* Introduction Section */}
<section className="mb-8"> <section>
<h2 className="text-3xl font-bold text-teal-700 mb-4"> <h2 className="text-3xl font-bold text-teal-700 mb-4">
Introduction and Workflow Introduction and Workflow
</h2> </h2>
@ -46,24 +35,6 @@ const GenomeMappingIntroduction = () => {
))} ))}
</ul> </ul>
</section> </section>
{/* Advantage Section */}
<section className="mb-8">
<h2 className="text-3xl font-bold text-teal-700 mb-4">
Advantage
</h2>
<ul className="space-y-4 text-gray-600 leading-relaxed text-sm lg:text-base">
{advantageItems.map((item, index) => (
<li key={index} className="flex items-start">
<span
className="inline-block w-2 h-2 rounded-full mt-2 mr-3 flex-shrink-0"
style={{backgroundColor: '#faae31'}}
></span>
<span className="text-justify">{item}</span>
</li>
))}
</ul>
</section>
</div> </div>
{/* Right Column - Custom Content with Image and SVG */} {/* Right Column - Custom Content with Image and SVG */}

3
app/dna-sequencing/genome-mapping/page.js
View File

@ -1,6 +1,7 @@
// app/dna-sequencing/genome-mapping/page.js // app/dna-sequencing/genome-mapping/page.js
import DNATitleBar from '../../components/shared/DNATitleBar'; import DNATitleBar from '../../components/shared/DNATitleBar';
import GenomeMappingIntroduction from './components/GenomeMappingIntroduction'; import GenomeMappingIntroduction from './components/GenomeMappingIntroduction';
import GenomeMappingAdvantages from './components/GenomeMappingAdvantages'
import GenomeMappingPipeline from './components/GenomeMappingPipeline'; import GenomeMappingPipeline from './components/GenomeMappingPipeline';
import GenomeMappingSpecifications from './components/GenomeMappingSpecifications'; import GenomeMappingSpecifications from './components/GenomeMappingSpecifications';
import PageLayout from '../../components/Layout/PageLayout'; import PageLayout from '../../components/Layout/PageLayout';
@ -44,7 +45,7 @@ export default function GenomeMappingPage() {
<div className="page-content"> <div className="page-content">
{/* Introduction Section */} {/* Introduction Section */}
<GenomeMappingIntroduction /> <GenomeMappingIntroduction />
<GenomeMappingAdvantages/>
<GenomeMappingPipeline/> <GenomeMappingPipeline/>
{/* Specifications Section */} {/* Specifications Section */}

54
app/dna-sequencing/whole-genome-sequencing/components/WGSIntroduction.jsx
View File

@ -10,51 +10,33 @@ const WGSIntroduction = () => {
"It is a powerful tool for diverse genomic studies, capable of sequencing humans, livestock, plants, bacteria, and disease-related microbes." "It is a powerful tool for diverse genomic studies, capable of sequencing humans, livestock, plants, bacteria, and disease-related microbes."
]; ];
const advantageItems = [ // const advantageItems = [
"Provides a comprehensive, high-resolution view of the genome, surpassing the coverage offered by targeted sequencing.", // "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.", // "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.", // "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." // "Uncovers genomic diversity, taxonomic classifications, and evolutionary relationships, enhancing our understanding of biological complexity."
]; // ];
return ( return (
<div className="w-full bg-white"> <div className="w-full min-w-0 bg-white">
{/* Main container with two columns */} {/* Main container with two columns */}
<div className="grid grid-cols-1 lg:grid-cols-[1.2fr_1.0fr] min-h-screen"> <div className="grid grid-cols-1 lg:grid-cols-[1.2fr_1.0fr] gap-0">
{/* Left Column - Content using existing IntroductionLayout structure */} {/* Left Column - Content using existing IntroductionLayout structure */}
<div className="px-6 lg:px-12 py-8"> <div className="w-full min-w-0 px-4 sm:px-6 lg:px-6 py-6">
{/* Introduction Section */} {/* Introduction Section */}
<section className="mb-8"> <section>
<h2 className="text-3xl font-bold text-teal-700 mb-4"> <h2 className="text-2xl sm:text-3xl font-bold text-teal-700 mb-4">
Introduction and Workflow Introduction and Workflow
</h2> </h2>
<ul className="space-y-4 text-gray-600 leading-relaxed text-sm lg:text-base"> <ul className="space-y-4 text-gray-600 leading-relaxed text-sm sm:text-base">
{contentItems.map((item, index) => ( {contentItems.map((item, index) => (
<li key={index} className="flex items-start"> <li key={index} className="flex items-start">
<span <span
className="inline-block w-2 h-2 rounded-full mt-2 mr-3 flex-shrink-0" className="inline-block w-2 h-2 rounded-full mt-2 mr-3 flex-shrink-0"
style={{backgroundColor: '#faae31'}} style={{backgroundColor: '#faae31'}}
></span> ></span>
<span className="text-justify">{item}</span> <span className="text-justify break-words" style={{ fontSize: 'inherit' }}>{item}</span>
</li>
))}
</ul>
</section>
{/* Advantage Section */}
<section>
<h2 className="text-3xl font-bold text-teal-700 mb-4">
Advantage
</h2>
<ul className="space-y-4 text-gray-600 leading-relaxed text-sm lg:text-base">
{advantageItems.map((item, index) => (
<li key={index} className="flex items-start">
<span
className="inline-block w-2 h-2 rounded-full mt-2 mr-3 flex-shrink-0"
style={{backgroundColor: '#faae31'}}
></span>
<span className="text-justify">{item}</span>
</li> </li>
))} ))}
</ul> </ul>
@ -62,11 +44,11 @@ const WGSIntroduction = () => {
</div> </div>
{/* Right Column - Custom Content with Image and SVG */} {/* Right Column - Custom Content with Image and SVG */}
<div className="relative p-4"> <div className="w-full min-w-0 relative p-4 lg:p-6">
<div className="flex flex-col h-full space-y-4"> <div className="flex flex-col">
{/* Top Section - Flowchart with larger fixed width */} {/* Top Section - Flowchart with larger fixed width */}
<div className="w-full flex items-center justify-center py-6"> <div className="w-full flex items-center justify-center">
<div className="w-full max-w-md flex items-center justify-center"> <div className="w-full max-w-md">
<img <img
src="/images/flowchart/WGS_flow.svg" src="/images/flowchart/WGS_flow.svg"
alt="WGS Process Flow" alt="WGS Process Flow"
@ -77,7 +59,7 @@ const WGSIntroduction = () => {
{/* Bottom Section - Image with same width */} {/* Bottom Section - Image with same width */}
{/* <div className="flex items-center justify-center"> {/* <div className="flex items-center justify-center">
<div className="w-full max-w-md flex items-center justify-center"> <div className="w-full max-w-md">
<img <img
src="/images/dna/whole_genome_seq-normal_denovo.png" src="/images/dna/whole_genome_seq-normal_denovo.png"
alt="WGS Overview" alt="WGS Overview"

2
app/dna-sequencing/whole-genome-sequencing/page.js
View File

@ -1,6 +1,7 @@
// app/dna-sequencing/whole-genome-sequencing/page.js (Updated) // app/dna-sequencing/whole-genome-sequencing/page.js (Updated)
import DNATitleBar from '../../components/shared/DNATitleBar'; import DNATitleBar from '../../components/shared/DNATitleBar';
import WGSIntroduction from './components/WGSIntroduction'; import WGSIntroduction from './components/WGSIntroduction';
import WGSAdvantages from './components/WGSAdvantages';
import WGSSpecifications from './components/WGSSpecifications'; import WGSSpecifications from './components/WGSSpecifications';
import PageLayout from '@/app/components/Layout/PageLayout'; import PageLayout from '@/app/components/Layout/PageLayout';
@ -21,6 +22,7 @@ export default function WholeGenomeSequencingPage() {
<div className="page-content"> <div className="page-content">
<WGSIntroduction /> <WGSIntroduction />
<WGSAdvantages />
<WGSSpecifications /> <WGSSpecifications />
</div> </div>
</PageLayout> </PageLayout>

3
app/health/oncology/Components/CancerKeyFeatures.jsx
View File

@ -5,8 +5,7 @@ export default function CancerKeyFeatures() {
{ title: "Family-Centered Testing", desc: "Supports cascade testing for at-risk relatives, enabling early detection and prevention." }, { title: "Family-Centered Testing", desc: "Supports cascade testing for at-risk relatives, enabling early detection and prevention." },
{ title: "Clinical Actionability", desc: "Provides insights that guide surveillance, preventive measures, and personalized treatment planning." }, { title: "Clinical Actionability", desc: "Provides insights that guide surveillance, preventive measures, and personalized treatment planning." },
{ title: "High Sensitivity & Specificity", desc: "Uses ≥100X sequencing depth with ≥90% Q30 base quality for reliable variant calling." }, { title: "High Sensitivity & Specificity", desc: "Uses ≥100X sequencing depth with ≥90% Q30 base quality for reliable variant calling." },
{ title: "Expert Interpretation & Reporting", desc: "Variants classified using ACMG guidelines, backed by curated literature and clinical databases." }, { title: "Expert Interpretation & Reporting", desc: "Variants classified using ACMG guidelines, backed by curated literature and clinical databases." }
{ title: "Genetic Counseling Support", desc: "Optional access to pre- and post-test counseling for patient education and informed decision-making." }
]; ];
return ( return (

3
app/health/oncology/components/CancerKeyFeatures.jsx
View File

@ -5,8 +5,7 @@ export default function CancerKeyFeatures() {
{ title: "Family-Centered Testing", desc: "Supports cascade testing for at-risk relatives, enabling early detection and prevention." }, { title: "Family-Centered Testing", desc: "Supports cascade testing for at-risk relatives, enabling early detection and prevention." },
{ title: "Clinical Actionability", desc: "Provides insights that guide surveillance, preventive measures, and personalized treatment planning." }, { title: "Clinical Actionability", desc: "Provides insights that guide surveillance, preventive measures, and personalized treatment planning." },
{ title: "High Sensitivity & Specificity", desc: "Uses ≥100X sequencing depth with ≥90% Q30 base quality for reliable variant calling." }, { title: "High Sensitivity & Specificity", desc: "Uses ≥100X sequencing depth with ≥90% Q30 base quality for reliable variant calling." },
{ title: "Expert Interpretation & Reporting", desc: "Variants classified using ACMG guidelines, backed by curated literature and clinical databases." }, { title: "Expert Interpretation & Reporting", desc: "Variants classified using ACMG guidelines, backed by curated literature and clinical databases." }
{ title: "Genetic Counseling Support", desc: "Optional access to pre- and post-test counseling for patient education and informed decision-making." }
]; ];
return ( return (