From b85ec3d929c20aa0c02a80313689637280cd838e Mon Sep 17 00:00:00 2001 From: mukesh13 Date: Fri, 12 Sep 2025 11:17:42 +0530 Subject: [PATCH] Responsive check --- app/components/shared/AdvantagesLayout.jsx | 29 +++++----- app/components/shared/ApplicationsLayout.jsx | 8 +-- app/components/shared/IntroductionLayout.jsx | 48 +++++++++-------- .../shared/SpecificationsLayout.jsx | 31 +++++------ .../components/EnrichmentIntroduction.jsx | 16 ++---- .../enrichment-sequencing/page.js | 2 + .../components/EpigenomicsIntroduction.jsx | 36 ++----------- .../epigenomics-sequencing/page.js | 2 + .../components/GenomeMappingIntroduction.jsx | 35 ++---------- app/dna-sequencing/genome-mapping/page.js | 3 +- .../components/WGSIntroduction.jsx | 54 +++++++------------ .../whole-genome-sequencing/page.js | 2 + .../oncology/Components/CancerKeyFeatures.jsx | 3 +- .../oncology/components/CancerKeyFeatures.jsx | 3 +- 14 files changed, 102 insertions(+), 170 deletions(-) diff --git a/app/components/shared/AdvantagesLayout.jsx b/app/components/shared/AdvantagesLayout.jsx index ae24f61..62f028f 100644 --- a/app/components/shared/AdvantagesLayout.jsx +++ b/app/components/shared/AdvantagesLayout.jsx @@ -4,24 +4,29 @@ const AdvantagesLayout = ({ title = "Advantages", advantageItems = [], backgroundGradient = "bg-gradient-to-br from-white to-white", - titleColor = "text-gray-700" + titleColor = "text-teal-700" }) => { return ( -
-
-

- {title} -

- -
-
    +
    +
    +
    +

    + {title} +

    +
      {advantageItems.map((item, index) => ( -
    • {item}
      • +
    • + + {item} +
      • ))}
    -
    +
- + ); }; diff --git a/app/components/shared/ApplicationsLayout.jsx b/app/components/shared/ApplicationsLayout.jsx index 527942f..9420d87 100644 --- a/app/components/shared/ApplicationsLayout.jsx +++ b/app/components/shared/ApplicationsLayout.jsx @@ -7,9 +7,9 @@ const ApplicationsLayout = ({ titleColor = "text-gray-700" }) => { return ( -
-
-

+
+
+

{title}

@@ -20,7 +20,7 @@ const ApplicationsLayout = ({ className="w-1.5 h-1.5 rounded-full mt-2 mr-3 flex-shrink-0" style={{backgroundColor: '#faae31'}} > - {item} + {item} ))} diff --git a/app/components/shared/IntroductionLayout.jsx b/app/components/shared/IntroductionLayout.jsx index dadb07d..f983b11 100644 --- a/app/components/shared/IntroductionLayout.jsx +++ b/app/components/shared/IntroductionLayout.jsx @@ -1,3 +1,5 @@ +// components/shared/CombinedWorkflowLayout.jsx + import React from 'react'; const CombinedWorkflowLayout = ({ @@ -9,25 +11,25 @@ const CombinedWorkflowLayout = ({ imageAlt = "Workflow diagram" }) => { return ( -
+
{/* Main container with two columns */} -
+
{/* Left Column - Content */} -
+
{/* Introduction Section */}
-

+

{introTitle}

-
    +
      {introItems.map((item, index) => (
    • - {item} + {item}
      • ))}
    @@ -35,17 +37,17 @@ const CombinedWorkflowLayout = ({ {/* Advantage Section */}
    -

    +

    {advantageTitle}

    -
      +
        {advantageItems.map((item, index) => (
      • - {item} + {item}
        • ))}
      @@ -53,19 +55,21 @@ const CombinedWorkflowLayout = ({
{/* Right Column - Workflow Image */} -
- {imageUrl ? ( - {imageAlt} - ) : ( -
-

Workflow image will appear here

-

Please provide the imageUrl prop

-
- )} +
+
+ {imageUrl ? ( + {imageAlt} + ) : ( +
+

Workflow image will appear here

+

Please provide the imageUrl prop

+
+ )} +
diff --git a/app/components/shared/SpecificationsLayout.jsx b/app/components/shared/SpecificationsLayout.jsx index 1b949c4..662cd46 100644 --- a/app/components/shared/SpecificationsLayout.jsx +++ b/app/components/shared/SpecificationsLayout.jsx @@ -1,4 +1,5 @@ // components/shared/SpecificationsLayout.jsx + import Link from 'next/link'; const SpecificationsLayout = ({ @@ -8,48 +9,48 @@ const SpecificationsLayout = ({ iconBackgroundColor = "bg-orange-100" }) => { return ( -
-
+
+
{/* Section Header */} -
-

+
+

{title}

{/* Specifications Grid */} -
+
{specificationItems.map((spec, index) => (
{/* Background Card */}
- {/* Icon Circle - Updated to match AdvantagesSection */} -
-
+ {/* Icon Circle */} +
+
{`${spec.title}
{/* Title */} -

+

{spec.title}

{/* Content */} -
-
+
+
{spec.renderContent ? spec.renderContent() : ( -
+
{spec.content}
)} diff --git a/app/dna-sequencing/enrichment-sequencing/components/EnrichmentIntroduction.jsx b/app/dna-sequencing/enrichment-sequencing/components/EnrichmentIntroduction.jsx index ec20f5b..cd766b3 100644 --- a/app/dna-sequencing/enrichment-sequencing/components/EnrichmentIntroduction.jsx +++ b/app/dna-sequencing/enrichment-sequencing/components/EnrichmentIntroduction.jsx @@ -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." ]; - 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 (
{/* Main container with two columns */} -
+
{/* Left Column - Content using existing IntroductionLayout structure */} -
+
{/* Introduction Section */} -
+

Introduction and Workflow

@@ -43,7 +37,7 @@ const EnrichmentIntroduction = () => {
{/* Advantage Section */} -
+ {/*

Advantage

@@ -58,7 +52,7 @@ const EnrichmentIntroduction = () => { ))} -
+
*/}
{/* Right Column - Custom Content with Image and SVG */} diff --git a/app/dna-sequencing/enrichment-sequencing/page.js b/app/dna-sequencing/enrichment-sequencing/page.js index 57dfd59..790b50c 100644 --- a/app/dna-sequencing/enrichment-sequencing/page.js +++ b/app/dna-sequencing/enrichment-sequencing/page.js @@ -1,6 +1,7 @@ import PageLayout from '../../components/Layout/PageLayout'; import DNATitleBar from '../../components/shared/DNATitleBar'; import EnrichmentIntroduction from './components/EnrichmentIntroduction'; +import EnrichmentAdvantages from './components/EnrichmentAdvantages'; import EnrichmentSpecifications from './components/EnrichmentSpecifications'; import EnrichmentPipeline from './components/EnrichmentPipeline'; @@ -21,6 +22,7 @@ export default function EnrichmentSequencingPage() {
+
diff --git a/app/dna-sequencing/epigenomics-sequencing/components/EpigenomicsIntroduction.jsx b/app/dna-sequencing/epigenomics-sequencing/components/EpigenomicsIntroduction.jsx index 50d9eea..1beebb1 100644 --- a/app/dna-sequencing/epigenomics-sequencing/components/EpigenomicsIntroduction.jsx +++ b/app/dna-sequencing/epigenomics-sequencing/components/EpigenomicsIntroduction.jsx @@ -9,29 +9,17 @@ 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)", - "Chip Sequencing", - "ATAC Sequencing" - ]; return (
{/* Main container with two columns */} -
+
{/* Left Column - Content using existing IntroductionLayout structure */} -
+
{/* Introduction Section */} -
+

Introduction and Workflow

@@ -47,24 +35,6 @@ const EpigenomicsIntroduction = () => { ))}
- - {/* Advantage Section */} -
-

- Advantage -

-
    - {advantageItems.map((item, index) => ( -
  • - - {item} -
    • - ))} -
-
{/* Right Column - Custom Content with Image and SVG */} diff --git a/app/dna-sequencing/epigenomics-sequencing/page.js b/app/dna-sequencing/epigenomics-sequencing/page.js index 4496b90..c0256fd 100644 --- a/app/dna-sequencing/epigenomics-sequencing/page.js +++ b/app/dna-sequencing/epigenomics-sequencing/page.js @@ -1,5 +1,6 @@ import DNATitleBar from '../../components/shared/DNATitleBar'; 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'; @@ -21,6 +22,7 @@ export default function EpigenomicsSequencingPage() {
+
diff --git a/app/dna-sequencing/genome-mapping/components/GenomeMappingIntroduction.jsx b/app/dna-sequencing/genome-mapping/components/GenomeMappingIntroduction.jsx index 2efb65f..9b78fed 100644 --- a/app/dna-sequencing/genome-mapping/components/GenomeMappingIntroduction.jsx +++ b/app/dna-sequencing/genome-mapping/components/GenomeMappingIntroduction.jsx @@ -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." ]; - 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 (
{/* Main container with two columns */} -
+
{/* Left Column - Content using existing IntroductionLayout structure */} -
+
{/* Introduction Section */} -
+

Introduction and Workflow

@@ -46,24 +35,6 @@ const GenomeMappingIntroduction = () => { ))}
- - {/* Advantage Section */} -
-

- Advantage -

-
    - {advantageItems.map((item, index) => ( -
  • - - {item} -
    • - ))} -
-
{/* Right Column - Custom Content with Image and SVG */} diff --git a/app/dna-sequencing/genome-mapping/page.js b/app/dna-sequencing/genome-mapping/page.js index f47e4eb..9b8bf3f 100644 --- a/app/dna-sequencing/genome-mapping/page.js +++ b/app/dna-sequencing/genome-mapping/page.js @@ -1,6 +1,7 @@ // app/dna-sequencing/genome-mapping/page.js import DNATitleBar from '../../components/shared/DNATitleBar'; 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'; @@ -44,7 +45,7 @@ export default function GenomeMappingPage() {
{/* Introduction Section */} - + {/* Specifications Section */} diff --git a/app/dna-sequencing/whole-genome-sequencing/components/WGSIntroduction.jsx b/app/dna-sequencing/whole-genome-sequencing/components/WGSIntroduction.jsx index e94eb91..e8e9e17 100644 --- a/app/dna-sequencing/whole-genome-sequencing/components/WGSIntroduction.jsx +++ b/app/dna-sequencing/whole-genome-sequencing/components/WGSIntroduction.jsx @@ -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." ]; - 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." - ]; + // 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 ( -
+
{/* Main container with two columns */} -
+
{/* Left Column - Content using existing IntroductionLayout structure */} -
+
{/* Introduction Section */} -
-

+
+

Introduction and Workflow

-
    +
      {contentItems.map((item, index) => (
    • - {item} -
      • - ))} -
    -
- - {/* Advantage Section */} -
-

- Advantage -

-
    - {advantageItems.map((item, index) => ( -
  • - - {item} + {item}
    • ))}
@@ -62,11 +44,11 @@ const WGSIntroduction = () => {

{/* Right Column - Custom Content with Image and SVG */} -
-
+
+
{/* Top Section - Flowchart with larger fixed width */} -
-
+
+
WGS Process Flow { {/* Bottom Section - Image with same width */} {/*
-
+
WGS Overview +
diff --git a/app/health/oncology/Components/CancerKeyFeatures.jsx b/app/health/oncology/Components/CancerKeyFeatures.jsx index d1b93e9..f98ed00 100644 --- a/app/health/oncology/Components/CancerKeyFeatures.jsx +++ b/app/health/oncology/Components/CancerKeyFeatures.jsx @@ -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: "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: "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." } + { title: "Expert Interpretation & Reporting", desc: "Variants classified using ACMG guidelines, backed by curated literature and clinical databases." } ]; return ( diff --git a/app/health/oncology/components/CancerKeyFeatures.jsx b/app/health/oncology/components/CancerKeyFeatures.jsx index d1b93e9..f98ed00 100644 --- a/app/health/oncology/components/CancerKeyFeatures.jsx +++ b/app/health/oncology/components/CancerKeyFeatures.jsx @@ -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: "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: "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." } + { title: "Expert Interpretation & Reporting", desc: "Variants classified using ACMG guidelines, backed by curated literature and clinical databases." } ]; return (