flowchart changes updated

app/components/CTA/CTASection.jsx

@@ -1,7 +1,16 @@
+"use client";
+
 import React from 'react';
 import Image from 'next/image';
+import { useRouter } from 'next/navigation';
 
 const CTASection = () => {
+  const router = useRouter();
+
+  const handleEnquireClick = () => {
+    router.push('/contact-us');
+  };
+
   return (
     <section className="py-6">
       <div className="container mx-auto max-w-none px-6">
@@ -31,7 +40,10 @@ const CTASection = () => {
             your samples, and generate your first NGS dataset.
           </p>
           
-          <button className="bg-yellow-400 text-white px-8 py-4 rounded-full text-lg font-semibold hover:bg-yellow-300 transition-colors">
+          <button 
+            onClick={handleEnquireClick}
+            className="bg-yellow-400 text-white px-8 py-4 rounded-full text-lg font-semibold hover:bg-yellow-300 transition-colors"
+          >
             Enquire Now
           </button>
         </div>

app/components/Layout/Footer.jsx

@@ -1,4 +1,5 @@
 // components/Layout/Footer.jsx
+'use client';
 import React from 'react';
 import Link from 'next/link';
 import Image from 'next/image';
@@ -71,11 +72,11 @@ const Footer = () => {
           <div>
             <h3 className="text-xl font-semibold mb-6 text-white">Services</h3>
             <ul className="space-y-3 text-teal-100">
-              <li className="hover:text-white transition-colors cursor-pointer">DNA Sequencing</li>
+              <li className="hover:text-[#faae31] transition-colors cursor-pointer">DNA Sequencing</li>
-              <li className="hover:text-white transition-colors cursor-pointer">RNA Sequencing</li>
+              <li className="hover:text-[#faae31] transition-colors cursor-pointer">RNA Sequencing</li>
-              <li className="hover:text-white transition-colors cursor-pointer">Genotyping</li>
+              <li className="hover:text-[#faae31] transition-colors cursor-pointer">Genotyping</li>
-              <li className="hover:text-white transition-colors cursor-pointer">Bioinformatics Services</li>
+              <li className="hover:text-[#faae31] transition-colors cursor-pointer">Bioinformatics Services</li>
-              <li className="hover:text-white transition-colors cursor-pointer">Long Read Sequencing</li>
+              <li className="hover:text-[#faae31] transition-colors cursor-pointer">Long Read Sequencing</li>
             </ul>
           </div>
 
@@ -83,12 +84,12 @@ const Footer = () => {
           <div>
             <h3 className="text-xl font-semibold mb-6 text-white">Useful Link</h3>
             <ul className="space-y-3">
-              <li><Link href="/" className="text-teal-100 hover:text-white transition-colors">Home</Link></li>
+              <li><Link href="/" className="text-teal-100 hover:text-[#faae31] transition-colors">Home</Link></li>
-              <li><Link href="#research" className="text-teal-100 hover:text-white transition-colors">Research</Link></li>
+              <li><Link href="#research" className="text-teal-100 hover:text-[#faae31] transition-colors">Research</Link></li>
-              <li><Link href="#" className="text-teal-100 hover:text-white transition-colors">Health</Link></li>
+              <li><Link href="#" className="text-teal-100 hover:text-[#faae31] transition-colors">Health</Link></li>
-              <li><Link href="/sample-submission-guideline" className="text-teal-100 hover:text-white transition-colors">Knowledge Hub</Link></li>
+              <li><Link href="/sample-submission-guideline" className="text-teal-100 hover:text-[#faae31] transition-colors">Knowledge Hub</Link></li>
-              <li><Link href="/company" className="text-teal-100 hover:text-white transition-colors">About Us</Link></li>
+              <li><Link href="/company" className="text-teal-100 hover:text-[#faae31] transition-colors">About Us</Link></li>
-              <li><Link href="/contact-us" className="text-teal-100 hover:text-white transition-colors">Contact</Link></li>
+              <li><Link href="/contact-us" className="text-teal-100 hover:text-[#faae31] transition-colors">Contact</Link></li>
             </ul>
           </div>
 
@@ -102,7 +103,7 @@ const Footer = () => {
                     <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 8l7.89 4.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
                   </svg>
                 </div>
-                <a href="mailto:info@operifytech.com" className="hover:text-white transition-colors">
+                <a href="mailto:info@operifytech.com" className="hover:text-[#faae31] transition-colors">
                   Info@operifytech.com
                 </a>
               </div>
@@ -112,7 +113,7 @@ const Footer = () => {
                     <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" />
                   </svg>
                 </div>
-                <a href="tel:01143046242" className="hover:text-white transition-colors">
+                <a href="tel:01143046242" className="hover:text-[#faae31] transition-colors">
                   01143046242
                 </a>
               </div>
@@ -122,7 +123,7 @@ const Footer = () => {
                     <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" />
                   </svg>
                 </div>
-                <a href="tel:9319171176" className="hover:text-white transition-colors">
+                <a href="tel:9319171176" className="hover:text-[#faae31] transition-colors">
                   9319171176
                 </a>
               </div>
@@ -139,11 +140,11 @@ const Footer = () => {
               Copyright © 2025 <span className="text-gray-800 font-medium">Operify</span> All Rights Reserved.
             </p>
             <ul className="flex space-x-6 mt-3 md:mt-0">
-              <li><Link href="#" className="hover:text-gray-800 transition-colors">Privacy Policy</Link></li>
+              <li><Link href="#" className="transition-colors" style={{ ':hover': { color: '#faae31' } }} onMouseEnter={(e) => e.target.style.color = '#faae31'} onMouseLeave={(e) => e.target.style.color = ''}>Privacy Policy</Link></li>
               <li className="text-gray-400">|</li>
-              <li><Link href="#" className="hover:text-gray-800 transition-colors">Term And Condition</Link></li>
+              <li><Link href="#" className="transition-colors" style={{ ':hover': { color: '#faae31' } }} onMouseEnter={(e) => e.target.style.color = '#faae31'} onMouseLeave={(e) => e.target.style.color = ''}>Term And Condition</Link></li>
               <li className="text-gray-400">|</li>
-              <li><Link href="#" className="hover:text-gray-800 transition-colors">FAQ</Link></li>
+              <li><Link href="#" className="transition-colors" style={{ ':hover': { color: '#faae31' } }} onMouseEnter={(e) => e.target.style.color = '#faae31'} onMouseLeave={(e) => e.target.style.color = ''}>FAQ</Link></li>
             </ul>
           </div>
         </div>

app/components/Layout/Header.jsx

@@ -146,7 +146,7 @@ const Header = () => {
                               href="/dna-sequencing/enrichment-sequencing/targeted-sequencing"
                               className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-teal-600"
                             >
-                              Targeted DNA Sequencing
+                              Custom DNA Sequencing
                             </Link>
                           </li>
                         </ul>

app/components/Research/AnimalResearch.jsx

@@ -23,7 +23,7 @@ export default function AnimalResearch() {
             Animal genomics plays a vital role in understanding genetic diversity, disease resistance, and the evolutionary relationships of species. Sequencing animal genomes enables researchers to trace ancestry, identify genes responsible for desirable traits, and analyze gene expression patterns across populations. Our NGS-based animal genomics services provide in-depth analysis of genetic diversity, helping researchers and breeders identify genes that contribute to health, behavior, and other important characteristics.
           </p>
           <p className="text-gray-600 mb-4">
-            From wildlife conservation to livestock improvement, we offer comprehensive sequencing solutions that support a wide range of applications. These include whole-genome sequencing, exome sequencing, and targeted sequencing of disease-related genes. Our advanced technologies allow you to study genetic variations with unparalleled precision, offering valuable insights into both domesticated and wild animal populations.
+            From wildlife conservation to livestock improvement, we offer comprehensive sequencing solutions that support a wide range of applications. These include whole-genome sequencing, exome sequencing, and Custom sequencing of disease-related genes. Our advanced technologies allow you to study genetic variations with unparalleled precision, offering valuable insights into both domesticated and wild animal populations.
           </p>
         </div>
       </div>
@@ -33,7 +33,7 @@ export default function AnimalResearch() {
         <tbody>
           <tr className="bg-gray-100">
             <td className="border border-gray-300 px-3 py-2 text-left font-semibold text-teal-700 w-1/4">DNA Sequencing</td>
-            <td className="border border-gray-300 px-3 py-2 align-top p-2" style={{ color: '#555555' }}>Whole Genome (Short Read, Long Read, Hybrid), Enrichment (Whole Exome, Amplicon and Targeted), Single Cell DNA, Genome Mapping, Genotyping (Based on SNP, ddRAD, Microsatellites)</td>
+            <td className="border border-gray-300 px-3 py-2 align-top p-2" style={{ color: '#555555' }}>Whole Genome (Short Read, Long Read, Hybrid), Enrichment (Whole Exome, Amplicon and Custom), Single Cell DNA, Genome Mapping, Genotyping (Based on SNP, ddRAD, Microsatellites)</td>
           </tr>
           <tr>
             <td className="border border-gray-300 px-3 py-2 text-left font-semibold text-teal-700 w-1/4">RNA Sequencing</td>

app/components/SampleGuideline/PageTitle.jsx

@@ -4,7 +4,7 @@ const PageTitle = () => {
   return (
     <section 
       className="relative bg-cover bg-center py-4 sm:py-6 h-auto sm:h-32 md:h-40 lg:h-24 min-h-[120px] sm:min-h-[120px]" 
-      style={{ backgroundImage: "url('images/bredcrumb.jpg')" }}
+      style={{ backgroundImage: "url('/images/bredcrumb.jpg')" }}
     >
       {/* Breadcrumb */}
       <div className="relative z-10 mb-2 sm:mb-1 pt-2 sm:pt-0 sm:-mt-3 lg:-mt-3">

app/components/shared/IntroductionLayout.jsx

@@ -53,12 +53,12 @@ const CombinedWorkflowLayout = ({
         </div>
 
         {/* Right Column - Workflow Image */}
-        <div className="relative flex items-center justify-center p-4">
+        <div className="relative flex items-start justify-center p-4">
           {imageUrl ? (
             <img 
               src={imageUrl}
               alt={imageAlt}
-              className="max-w-full max-h-full object-contain"
+              className="max-w-full min-h-90px object-contain"
             />
           ) : (
             <div className="text-gray-400 text-center">

app/components/shared/SpecificationsLayout.jsx

@@ -5,7 +5,7 @@ const SpecificationsLayout = ({
   title = "Service Specifications",
   specificationItems = [],
   backgroundColor = "#e8f5f3",
-  iconBackgroundColor = "bg-teal-600"
+  iconBackgroundColor = "bg-orange-100"
 }) => {
   return (
     <section className="py-8 lg:py-6">
@@ -29,24 +29,24 @@ const SpecificationsLayout = ({
                 className="rounded-3xl p-8 h-full min-h-[280px] flex flex-col"
                 style={{ backgroundColor: backgroundColor }}
               >
-                {/* Icon Circle */}
+                {/* Icon Circle - Updated to match AdvantagesSection */}
                 <div className="flex justify-center mb-6">
                   <div className={`w-16 h-16 ${iconBackgroundColor} rounded-full flex items-center justify-center`}>
                     <img 
                       src={spec.icon} 
-                      className="w-14 h-14 object-contain brightness-0 invert" 
+                      className="w-10 h-10 object-contain" 
                       alt={`${spec.title} Icon`}
                     />
                   </div>
                 </div>
                 
                 {/* Title */}
-                <h3 className="text-center text-gray-800 text-lg font-semibold mb-4">
+                <h3 className="text-center text-teal-700 text-lg font-semibold mb-4">
                   {spec.title}
                 </h3>
                 
                 {/* Content */}
-                <div className="text-gray-700 text-sm leading-relaxed text-center flex-grow flex items-center justify-center">
+                <div className="text-gray-700 text-sm leading-relaxed text-center flex-grow flex items-start justify-center">
                   <div className="w-full">
                     {spec.renderContent ? spec.renderContent() : (
                       <div className="text-gray-600">

app/dna-sequencing/components/DNATable.jsx

@@ -33,7 +33,7 @@ const DNATable = () => {
           </a>{' '}
           and{' '}
           <a href="/dna-sequencing/enrichment-sequencing/targeted-sequencing" className="text-teal-600 hover:underline">
-            Targeted Sequencing
+            Custom Sequencing
           </a>
         </>
       ),

app/dna-sequencing/enrichment-sequencing/components/EnrichmentIntroduction.jsx

@@ -9,6 +9,7 @@ const EnrichmentIntroduction = () => {
     "In the bioinformatics analysis, these reads are aligned to a known reference genome to detect genomic alterations.",
     "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.",
@@ -16,38 +17,80 @@ const EnrichmentIntroduction = () => {
     "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."
   ];
 
-  const customBadgeContent = (
+  return (
-    <div className="text-center">
+    <div className="w-full bg-white">
-      <div className="bg-teal-600 text-white px-4 py-2 rounded-lg mb-4">
+      {/* Main container with two columns */}
-        <span className="text-sm font-medium">ENRICHMENT SEQUENCING</span>
+      <div className="grid grid-cols-1 lg:grid-cols-[1.2fr_1.0fr] min-h-screen">
-      </div>
+        
-      <div className="flex flex-col space-y-2">
+        {/* Left Column - Content using existing IntroductionLayout structure */}
-        <div className="bg-orange-400 text-white px-3 py-2 rounded text-xs">
+        <div className="px-6 lg:px-12 py-8">
-          Whole Exome DNA Sequencing
+          {/* Introduction Section */}
+          <section className="mb-8">
+            <h2 className="text-3xl font-bold text-teal-700 mb-4">
+              Introduction and Workflow
+            </h2>
+            <ul className="space-y-4 text-gray-600 leading-relaxed text-sm lg:text-base">
+              {contentItems.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>
+
+          {/* 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>
+              ))}
+            </ul>
+          </section>
         </div>
-        <div className="bg-orange-400 text-white px-3 py-2 rounded text-xs">
+
-          Amplicon Sequencing (16S/18S/ITS)
+        {/* Right Column - Custom Content with Image and SVG */}
-        </div>
+        <div className="relative p-4">
-        <div className="bg-orange-400 text-white px-3 py-2 rounded text-xs">
+          <div className="flex flex-col h-full space-y-4">
-          Targeted Sequencing
+            {/* Top Section - Flowchart with larger fixed width */}
+            <div className="w-full flex items-center justify-center py-6">
+              <div className="w-full max-w-md flex items-center justify-center">
+                <img 
+                  src="/images/flowchart/enrichment_flow.svg"
+                  alt="ISO Certified Process Flow"
+                  className="w-full h-auto object-contain"
+                />
+              </div>
+            </div>
+            
+            {/* Bottom Section - Image with same width */}
+            <div className="flex items-center justify-center">
+              <div className="w-full max-w-md flex items-center justify-center">
+                <img 
+                  src="/images/dna/whole_genome_seq-normal_denovo.png"
+                  alt="Enrichment Overview"
+                  className="w-full h-auto object-contain"
+                />
+              </div>
+            </div>
+            
+          </div>
         </div>
       </div>
     </div>
   );
-
-  return (
-    <IntroductionLayout
-      introTitle="Introduction and Workflow"
-      advantageTitle="Advantage"
-      introItems={contentItems}
-      advantageItems={advantageItems}
-      imageUrl="/images/dna/enrichment-overview.png"
-      imageAlt="Enrichment Overview"
-      backgroundColor="#f8f9fa"
-      customBadgeContent={customBadgeContent}
-      useParagraphs={true}
-    />
-  );
 };
 
 export default EnrichmentIntroduction;

app/dna-sequencing/enrichment-sequencing/targeted-sequencing/components/TargetedApplications.jsx

@@ -12,7 +12,7 @@ const TargetedApplications = () => {
 
   return (
     <ApplicationsLayout
-      title="Applications of Targeted Sequencing"
+      title="Applications of Custom Sequencing"
       applicationItems={applicationItems}
     />
   );

app/dna-sequencing/enrichment-sequencing/targeted-sequencing/components/TargetedIntroduction.jsx

@@ -4,7 +4,7 @@ import IntroductionLayout from '../../../../components/shared/IntroductionLayout
 
 const TargetedIntroduction = () => {
   const contentItems = [
-    "Targeted DNA Sequencing (also know as Gene Panel Sequencing) concentrate on specific genes or genomic regions of interest, allowing for in-depth analysis of mutations that are most relevant to particular diseases or conditions.",
+    "Custom DNA Sequencing (also know as Gene Panel Sequencing) concentrate on specific genes or genomic regions of interest, allowing for in-depth analysis of mutations that are most relevant to particular diseases or conditions.",
     "The process begins with the selection of specific genes or regions, followed by the amplification of these targets through PCR. Sequencing is then performed on the amplified regions, ensuring high coverage and accuracy.",
     "Advanced bioinformatics tools are employed to analyze the sequencing data, providing detailed insights into genetic variants, their potential impact, and relevance to disease.",
     "Targeted sequencing is widely used in clinical settings for the diagnosis of genetic disorders, personalized medicine, and cancer genomics, providing actionable insights that can directly impact patient care."

app/dna-sequencing/enrichment-sequencing/targeted-sequencing/page.js

@@ -9,13 +9,13 @@ export default function TargetedSequencingPage() {
     { label: 'Home', href: '/' },
     { label: 'DNA Sequencing', href: '/dna-sequencing' },
     { label: 'Enrichment Sequencing', href: '/dna-sequencing/enrichment-sequencing' },
-    { label: 'Targeted DNA Sequencing', current: true }
+    { label: 'Custom DNA Sequencing', current: true }
   ];
 
   return (
     <PageLayout fixedHeader={true}>
       <DNATitleBar
-        title="Targeted DNA Sequencing"
+        title="Custom DNA Sequencing"
         desc="Pinpoint Precision for Your Genetic Insights"
         breadcrumbs={breadcrumbs}
       />

app/dna-sequencing/epigenomics-sequencing/components/EpigenomicsIntroduction.jsx

@@ -9,6 +9,7 @@ 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.",
@@ -16,7 +17,6 @@ const EpigenomicsIntroduction = () => {
     "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",
@@ -24,19 +24,78 @@ const EpigenomicsIntroduction = () => {
   ];
 
   return (
-    <IntroductionLayout
+    <div className="w-full bg-white">
-      introTitle="Introduction and Workflow"
+      {/* Main container with two columns */}
-      advantageTitle="Advantage"
+      <div className="grid grid-cols-1 lg:grid-cols-[1.2fr_1.0fr] min-h-screen">
-      introItems={contentItems}
+        
-      advantageItems={advantageItems}
+        {/* Left Column - Content using existing IntroductionLayout structure */}
-      imageUrl="/images/epigenomics-overview.png"
+        <div className="px-6 lg:px-12 py-8">
-      imageAlt="Epigenomics Overview"
+          {/* Introduction Section */}
-      badgeText="EPIGENOMICS"
+          <section className="mb-8">
-      serviceTypes={serviceTypes}
+            <h2 className="text-3xl font-bold text-teal-700 mb-4">
-      backgroundColor="#f8f9fa"
+              Introduction and Workflow
-      badgeColor="bg-teal-600"
+            </h2>
-      useParagraphs={true}
+            <ul className="space-y-4 text-gray-600 leading-relaxed text-sm lg:text-base">
-    />
+              {contentItems.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>
+
+          {/* 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>
+
+        {/* Right Column - Custom Content with Image and SVG */}
+        <div className="relative p-4">
+          <div className="flex flex-col h-full space-y-4">
+            {/* Top Section - Flowchart with larger fixed width */}
+            <div className="w-full flex items-center justify-center py-6">
+              <div className="w-full max-w-md flex items-center justify-center">
+                <img 
+                  src="/images/flowchart/epigenomic_flow.svg"
+                  alt="Epigenomics Process Flow"
+                  className="w-full h-auto object-contain"
+                />
+              </div>
+            </div>
+            
+            {/* Bottom Section - Image with same width */}
+            <div className="flex items-center justify-center">
+              <div className="w-full max-w-md flex items-center justify-center">
+                <img 
+                  src="/images/epigenomics-overview.png"
+                  alt="Epigenomics Overview"
+                  className="w-full h-auto object-contain"
+                />
+              </div>
+            </div>
+            
+          </div>
+        </div>
+      </div>
+    </div>
   );
 };
 

app/dna-sequencing/genome-mapping/components/GenomeMappingIntroduction.jsx

@@ -1,4 +1,5 @@
 // app/dna-sequencing/genome-mapping/components/GenomeMappingIntroduction.jsx
+
 import IntroductionLayout from '../../../components/shared/IntroductionLayout';
 
 const GenomeMappingIntroduction = () => {
@@ -8,6 +9,7 @@ const GenomeMappingIntroduction = () => {
     "In the bioinformatics analysis, these reads are aligned to a known reference genome to detect genomic alterations and structural arrangements.",
     "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.",
@@ -21,19 +23,78 @@ const GenomeMappingIntroduction = () => {
   ];
 
   return (
-    <IntroductionLayout
+    <div className="w-full bg-white">
-      introTitle="Introduction and Workflow"
+      {/* Main container with two columns */}
-      advantageTitle="Advantage"
+      <div className="grid grid-cols-1 lg:grid-cols-[1.2fr_1.0fr] min-h-screen">
-      introItems={contentItems}
+        
-      advantageItems={advantageItems}
+        {/* Left Column - Content using existing IntroductionLayout structure */}
-      imageUrl="/images/genome-mapping-overview.png"
+        <div className="px-6 lg:px-12 py-8">
-      imageAlt="Genome Mapping Overview"
+          {/* Introduction Section */}
-      badgeText="GENOME MAPPING"
+          <section className="mb-8">
-      serviceTypes={serviceTypes}
+            <h2 className="text-3xl font-bold text-teal-700 mb-4">
-      backgroundColor="#f8f9fa"
+              Introduction and Workflow
-      badgeColor="bg-teal-600"
+            </h2>
-      useParagraphs={true}
+            <ul className="space-y-4 text-gray-600 leading-relaxed text-sm lg:text-base">
-    />
+              {contentItems.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>
+
+          {/* 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>
+
+        {/* Right Column - Custom Content with Image and SVG */}
+        <div className="relative p-4">
+          <div className="flex flex-col h-full space-y-4">
+            {/* Top Section - Flowchart with larger fixed width */}
+            <div className="w-full flex items-center justify-center py-6">
+              <div className="w-full max-w-md flex items-center justify-center">
+                <img 
+                  src="/images/flowchart/genome_mapping_flow.svg"
+                  alt="Genome Mapping Process Flow"
+                  className="w-full h-auto object-contain"
+                />
+              </div>
+            </div>
+            
+            {/* Bottom Section - Image with same width */}
+            <div className="flex items-center justify-center">
+              <div className="w-full max-w-md flex items-center justify-center">
+                <img 
+                  src="/images/genome-mapping-overview.png"
+                  alt="Genome Mapping Overview"
+                  className="w-full h-auto object-contain"
+                />
+              </div>
+            </div>
+            
+          </div>
+        </div>
+      </div>
+    </div>
   );
 };
 

app/dna-sequencing/hybrid-genome-sequencing/components/HybridSequencingPipeline.jsx

@@ -1,132 +1,48 @@
 import React from 'react';
-import { ArrowDown, ArrowRight, ArrowUp } from 'lucide-react';
 
 const HybridSequencingPipeline = ({
-  title = "Hybrid Sequencing",
+  title = "Bioinformatics Pipeline",
-  leftSteps = [
+  svgContent = null, // Pass your SVG content here as JSX
-    "Raw Sequencing Data from Short Read (fastq files)",
+  svgUrl = "/images/flowchart/hybridseq.svg",
-    "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 = "",
+
-  titleclass='',
+  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">
+      <div className={`container mx-auto max-w-none px-3 sm:px-4 lg:px-6 ${containerClassName}`}>
-        <h2 className={`text-gray-700 text-left pb-4 sm:pb-6 text-xl sm:text-2xl lg:text-3xl font-normal ${titleclass}`}>
+        <h2 className={"text-3xl font-bold text-teal-700 mb-4"}>
           {title}
         </h2>
 
-        {/* Pipeline Flowchart */}
+        {/* SVG Flowchart Container */}
         <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="w-full max-w-6xl">
-              <div className="relative">
+              {/* SVG Container with responsive sizing and reduced height */}
-                {/* Mobile Layout - Single Column */}
+              <div className={`w-full max-h-100 overflow-hidden ${svgClassName}`}>
-                <div className="block sm:hidden">
+                {svgUrl ? (
-                  <div className="flex flex-col items-center space-y-3">
+                  // If SVG URL/path is provided
-                    {/* Left side steps */}
+                  <img 
-                    {leftSteps.map((step, index) => (
+                    src={svgUrl} 
-                      <React.Fragment key={`left-${index}`}>
+                    alt="Flowchart diagram"
-                        <div className={`${cardColor} rounded-lg p-3 w-full text-center border ${cardClassName}`}>
+                    className="w-full h-auto object-contain max-h-100"
-                          <h3 className={`text-xs font-medium ${textColor}`}>{step}</h3>
+                  />
-                        </div>
+                ) : svgContent ? (
-                        {index < leftSteps.length - 1 && (
+                  // If SVG content is provided as JSX
-                          <ArrowDown className={`w-5 h-5 ${arrowColor}`} />
+                  <div className="w-full max-h-100">
-                        )}
+                    <div className="w-full max-h-100 overflow-hidden">
-                      </React.Fragment>
+                      {svgContent}
-                    ))}
-                    
-                    <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 */}
+                  // Fallback message
-                  <div className="absolute bottom-4 left-1/2 transform -translate-x-1/2 flex items-center justify-center">
+                  <div className="flex items-center justify-center h-40 text-gray-500">
-                    <ArrowRight className={`w-8 h-8 ${arrowColor}`} />
+                    <p>Please provide SVG content or URL</p>
                   </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>

app/dna-sequencing/hybrid-genome-sequencing/page.js

@@ -1,7 +1,7 @@
 // app/dna-sequencing/snp-genotyping/page.js
 import DNATitleBar from '../../components/shared/DNATitleBar';
 import HybridIntroduction from './components/HybridIntroduction';
-// import HybridSequencingPipeline from './components/HybridSequencingPipeline'
+import HybridSequencingPipeline from './components/HybridSequencingPipeline'
 import HybridApplications from './components/HybridApplications';
 import HybridSpecifications from './components/HybridSpecifications';
 import PageLayout from '../../components/Layout/PageLayout';
@@ -47,7 +47,7 @@ export default function HybridGenomeSequencingPage() {
         <HybridIntroduction />
 
         {/* Bioinformatics Pipeline Section */}
-        {/* <HybridSequencingPipeline /> */}
+        <HybridSequencingPipeline />
 
         {/* Applications Section */}
         <HybridApplications />

app/dna-sequencing/long-read-sequencing/components/LongReadComparison.jsx

@@ -2,31 +2,26 @@ const LongReadComparison = () => {
   const comparisonData = [
     {
       category: "Read Length",
-      illumina: "Paired-end 150 bp or 250bp\nHighly accurate (> 99.9%) while Limited to ~500bp",
       pacbio: "Average ≥ 15 kb\nbp to kb",
       nanopore: "Average > 17 kb\nKb to Mb"
     },
     {
       category: "Variant Calling",
-      illumina: "Accurately detect the SNVs and InDels\nWhile Lower accuracy on the complex SVs detection",
       pacbio: "Long Read Length with High Accuracy: Good coverage of highly repetition and complexity area\nDetect SVs with high precision",
       nanopore: "Long Read Length with High Accuracy: Good coverage of highly repetition and complexity area\nDetect SVs with high precision"
     },
     {
       category: "Amplification/GC Bias",
-      illumina: "PCR for cluster generation:\n1.Clonally amplified templates masquerade as variants\n2.Underrepresentation of AT-rich and GC-rich regions",
       pacbio: "NO GC Bias & Amplification Bias\nPCR-free to allow a uniform coverage and High Contiguity",
       nanopore: "NO GC Bias & Amplification Bias\nPCR-free to allow a uniform coverage and High Contiguity"
     },
     {
       category: "Machine Errors",
-      illumina: "Signal Decay and Dephasing:\nGradual consumption of reagent\nSeq error rate increases with the length of reads",
       pacbio: "Relaxed requirement for cycle efficiency",
       nanopore: "Relaxed requirement for cycle efficiency"
     },
     {
       category: "DNA Methylation Detection",
-      illumina: "WGBS or RRBS is required and limited on detection of CpG, CHH, CHG",
       pacbio: "Simultaneous Epigenetic Characterization\nDiverse DNA methylation types: CpG, CHH, CHG, 6mA, 4mC, 5hmc",
       nanopore: "Simultaneous Epigenetic Characterization\nDiverse DNA methylation types: CpG, CHH, CHG, 6mA, 4mC, 5hmc"
     }
@@ -95,9 +90,6 @@ const LongReadComparison = () => {
                 <th className="border border-gray-300 px-4 py-3 text-left font-semibold text-teal-700">
                   Platform Types
                 </th>
-                <th className="border border-gray-300 px-4 py-3 text-left font-semibold text-teal-700">
-                  Illumina NovaSeq 6000
-                </th>
                 <th className="border border-gray-300 px-4 py-3 text-left font-semibold text-teal-700">
                   PacBio Sequel II/IIe
                 </th>
@@ -112,11 +104,6 @@ const LongReadComparison = () => {
                   <td className="border border-gray-300 px-4 py-3 align-top text-gray-600 font-medium text-base">
                     {row.category}
                   </td>
-                  <td className="border border-gray-300 px-4 py-3 align-top text-gray-600 leading-relaxed">
-                    <div className="whitespace-pre-line">
-                      {row.illumina}
-                    </div>
-                  </td>
                   <td className="border border-gray-300 px-4 py-3 align-top text-gray-600 leading-relaxed">
                     <div className="whitespace-pre-line">
                       {formatContent(row.pacbio)}
@@ -132,60 +119,6 @@ const LongReadComparison = () => {
             </tbody>
           </table>
         </div>
-
-        {/* Key Technology Highlights */}
-        <div className="bg-gradient-to-br from-teal-50 to-blue-50 rounded-lg p-6">
-          <h3 className="text-lg font-semibold text-gray-600 mb-4 border-b border-teal-200 pb-2">
-            Key Technology Highlights
-          </h3>
-          
-          <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
-            <div className="bg-white rounded-lg p-4 shadow-sm">
-              <h4 className="font-medium text-teal-600 mb-2">Oxford Nanopore</h4>
-              <ul className="space-y-1">
-                {["Real-time sequencing via protein nanopores", "Portable devices for field diagnostics", "Direct base modification detection"].map((item, index) => (
-                  <li key={index} className="flex items-start">
-                    <span 
-                      className="w-2 h-2 rounded-full mt-2 mr-3 flex-shrink-0"
-                      style={{backgroundColor: '#faae31'}}
-                    ></span>
-                    <span className="text-sm text-gray-600">{item}</span>
-                  </li>
-                ))}
-              </ul>
-            </div>
-            
-            <div className="bg-white rounded-lg p-4 shadow-sm">
-              <h4 className="font-medium text-teal-600 mb-2">PacBio SMRT</h4>
-              <ul className="space-y-1">
-                {["Hi-Fi reads with 99.9% accuracy", "Excellent for complex genomes", "Haplotype resolution in polyploids"].map((item, index) => (
-                  <li key={index} className="flex items-start">
-                    <span 
-                      className="w-2 h-2 rounded-full mt-2 mr-3 flex-shrink-0"
-                      style={{backgroundColor: '#faae31'}}
-                    ></span>
-                    <span className="text-sm text-gray-600">{item}</span>
-                  </li>
-                ))}
-              </ul>
-            </div>
-            
-            <div className="bg-white rounded-lg p-4 shadow-sm">
-              <h4 className="font-medium text-teal-600 mb-2">Illumina</h4>
-              <ul className="space-y-1">
-                {["High accuracy for SNVs and InDels", "Cost-effective for large studies", "Mature bioinformatics tools"].map((item, index) => (
-                  <li key={index} className="flex items-start">
-                    <span 
-                      className="w-2 h-2 rounded-full mt-2 mr-3 flex-shrink-0"
-                      style={{backgroundColor: '#faae31'}}
-                    ></span>
-                    <span className="text-sm text-gray-600">{item}</span>
-                  </li>
-                ))}
-              </ul>
-            </div>
-          </div>
-        </div>
       </div>
     </section>
   );

app/dna-sequencing/snp-genotyping/components/SNPGenotypingTechniques.jsx

@@ -0,0 +1,57 @@
+const SNPGenotypingTechniques = ({ 
+  title = "Types of SNP-Based Genotyping using technique:",
+  backgroundColor = "bg-teal-50"
+}) => {
+  const techniques = [
+    {
+      name: "PCR:",
+      description: "Utilizes PCR to amplify DNA regions containing SNPs, relying on allele-specific primers, probes, or melting curve differences for SNP detection.",
+      examples: "TaqMan Assay, KASP, ARMS-PCR, qPCR, High-Resolution Melting (HRM)."
+    },
+    {
+      name: "Microarray:",
+      description: "Employs DNA microarrays to detect and analyze SNPs across the genome using hybridization with oligonucleotide probes specific to SNP loci.",
+      examples: "Affymetrix GeneChips, Illumina Infinium Arrays, SNPlex, Axiom Array Platforms, MALDI-TOF Mass Spectrometry Arrays."
+    },
+    {
+      name: "NGS:",
+      description: "Uses Next-Generation Sequencing (NGS) for high-resolution, high-throughput SNP detection and analysis.",
+      examples: "Whole-Genome Sequencing (WGS), Exome Sequencing, Targeted Sequencing, Genotyping-by-Sequencing (GBS), Double Digest Restriction-site Associated DNA (ddRAD) Sequencing."
+    }
+  ];
+
+  return (
+    <section className={`py-5 lg:py-5 ${backgroundColor}`}>
+      <div className="container-fluid px-4 lg:px-6">
+        <h2 className="text-3xl font-bold text-teal-700 mb-4">
+          {title}
+        </h2>
+        
+        <ol className="space-y-4 lg:px-6" style={{color: '#555555'}}>
+          {techniques.map((technique, index) => (
+            <li key={index} className="leading-relaxed">
+              <div className="flex items-start">
+                <span 
+                  className="inline-flex items-center justify-center w-6 h-6 rounded-full text-white font-bold text-sm mr-3 flex-shrink-0 mt-0.5"
+                  style={{backgroundColor: '#faae31'}}
+                >
+                  {index + 1}
+                </span>
+                <div className="flex-1">
+                  <span className="font-semibold text-base">{technique.name}</span>
+                  <br />
+                  <span className="text-base">{technique.description}</span>
+                  <br />
+                  <span className="font-semibold" style={{color: '#faae31'}}>Examples: </span>
+                  <span className="text-base italic">{technique.examples}</span>
+                </div>
+              </div>
+            </li>
+          ))}
+        </ol>
+      </div>
+    </section>
+  );
+};
+
+export default SNPGenotypingTechniques;

app/dna-sequencing/snp-genotyping/components/SNPIntroduction.jsx

@@ -3,7 +3,10 @@ import IntroductionLayout from '../../../components/shared/IntroductionLayout';
 
 const SNPIntroduction = () => {
   const contentItems = [
-    "SNP-based genotyping identifies single nucleotide polymorphisms (SNPs) across the genome, offering insights into genetic diversity, disease associations, and trait inheritance. It is widely applied in population genetics, evolutionary biology, and plant and animal breeding."
+    "ddRAD sequencing (Double Digest Restriction-site Associated DNA) is based on the Restriction Fragmentation technique combined with Next-Generation Sequencing (NGS). It is a robust approach for \"genotyping and SNP discovery\" that doesn't require a reference genome.",
+    "The ddRAD workflow utilizes the precise cut-site specificity of restriction endonucleases to create library fragments from unique genomic regions. These fragments are then selected and sequenced, capturing data from identical genomic regions across samples.",
+    "In the bioinformatics analysis, reads are aligned to either a reference genome or de novo assembly to detect SNVs and other genetic variations. This analysis supports studies on genetic diversity, population structure, and trait associations, with advanced tools enabling the processing of large datasets to achieve high genotyping accuracy.",
+    "With the potential to develop hundreds to tens of thousands of genetic markers, ddRAD is ideal for applications in population genetics, germplasm assessment, marker-trait associations, GWAS, and QTL mapping. Its targeted, reproducible approach makes it a valuable tool for ecological and agricultural genomics."
   ];
   const advantageItems = [
     "Allows for precise identification of genetic variations at a single nucleotide level, enabling detailed mapping of genetic diversity.",
@@ -12,7 +15,6 @@ const SNPIntroduction = () => {
     "Can reveal associations between genetic variations and complex traits, allowing researchers to identify genetic contributors to health, disease, or productivity in agriculture."
   ];
 
-
   const serviceTypes = [
     "DNA Sequencing",
     "RNA Sequencing", 
@@ -20,19 +22,36 @@ const SNPIntroduction = () => {
   ];
 
   return (
-    <IntroductionLayout
+    <>
-      introTitle="Introduction and Workflow"
+      {/* Main Heading Section */}
-      advantageTitle="Advantage"
+      <section className="py-5 lg:py-5">
-      introItems={contentItems}
+        <div className="container-fluid px-4 lg:px-6">
-      advantageItems={advantageItems}
+          <div className="lg:px-6">
-      imageUrl="/images/dna/SNP-based_genotyping_(ddRAD).png"
+            <h1 className="text-3xl font-bold text-teal-700 mb-2">
-      imageAlt="SNP Genotyping Overview"
+              Double Digest Restriction-site Associated DNA (ddRAD) Sequencing
-      badgeText="ISO CERTIFIED"
+            </h1>
-      serviceTypes={serviceTypes}
+            <p className="text-base leading-relaxed" style={{color: '#faae31'}}>
-      backgroundColor="#f8f9fa"
+              Focused, Cost-Effective Genotyping with ddRAD
-      badgeColor="bg-teal-600"
+            </p>
-      useParagraphs={true}
+          </div>
-    />
+        </div>
+      </section>
+
+      {/* Introduction Layout */}
+      <IntroductionLayout
+        introTitle="Introduction and Workflow"
+        advantageTitle="Advantage"
+        introItems={contentItems}
+        advantageItems={advantageItems}
+        imageUrl="/images/dna/SNP-based_genotyping_(ddRAD).png"
+        imageAlt="SNP Genotyping Overview"
+        badgeText="ISO CERTIFIED"
+        serviceTypes={serviceTypes}
+        backgroundColor="#f8f9fa"
+        badgeColor="bg-teal-600"
+        useParagraphs={true}
+      />
+    </>
   );
 };
 

app/dna-sequencing/snp-genotyping/components/SNPWorkflow .jsx

@@ -0,0 +1,33 @@
+const SNPWorkflow = ({ 
+  workflowImage = "/images/flowchart/WGS_flow.svg"
+}) => {
+  return (
+    <section className={'py-5 lg:py-5'}>
+      <div className="container-fluid px-4 lg:px-6">
+        <h2 className="text-3xl font-bold text-teal-700 mb-4">
+          Introduction and Workflow
+        </h2>
+        
+        <div className="lg:px-6 grid grid-cols-1 lg:grid-cols-2 gap-8 items-center">
+          <div>
+            <p className="text-base leading-relaxed" style={{color: '#555555'}}>
+              SNP-based genotyping identifies single nucleotide polymorphisms (SNPs) across the genome, 
+              offering insights into genetic diversity, disease associations, and trait inheritance. It is widely applied in 
+              population genetics, evolutionary biology, and plant and animal breeding.
+            </p>
+          </div>
+          
+          <div className="flex justify-center lg:justify-end">
+            <img 
+              src={workflowImage} 
+              alt="SNP Genotyping Workflow" 
+              className="max-w-full h-auto rounded-lg"
+            />
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default SNPWorkflow;

app/dna-sequencing/snp-genotyping/page.js

@@ -1,8 +1,10 @@
 // app/dna-sequencing/snp-genotyping/page.js
 import DNATitleBar from '../../components/shared/DNATitleBar';
+import SNPWorkflow from './components/SNPWorkflow ';
 import SNPIntroduction from './components/SNPIntroduction';
 import SNPApplications from './components/SNPApplications';
 import SNPSpecifications from './components/SNPSpecifications';
+import SNPGenotypingTechniques from './components/SNPGenotypingTechniques';
 import PageLayout from '../../components/Layout/PageLayout';
 
 export default function SNPGenotypingPage() {
@@ -23,6 +25,8 @@ export default function SNPGenotypingPage() {
         />
         
         <div className="page-content">
+          <SNPWorkflow/>
+          <SNPGenotypingTechniques/>
           <SNPIntroduction />
           <SNPApplications />
           <SNPSpecifications />

app/dna-sequencing/whole-genome-sequencing/components/WGSIntroduction.jsx

@@ -9,6 +9,7 @@ const WGSIntroduction = () => {
     "In the bioinformatics analysis, these reads are then assembled to construct the genome or aligned to a known reference genome.",
     "It is a powerful tool for diverse genomic studies, capable of sequencing humans, livestock, plants, bacteria, and disease-related microbes."
   ];
+  
   const advantageItems = [
     "Provides a comprehensive, high-resolution view of the genome, surpassing the coverage offered by targeted sequencing.",
     "Identifies both small (SNVs, CNVs, InDels) and large structural variants that may be missed with targeted approaches, offering valuable insights into inherited genetic conditions and characterizing mutations driving cancer progression.",
@@ -17,15 +18,78 @@ const WGSIntroduction = () => {
   ];
 
   return (
-    <IntroductionLayout
+    <div className="w-full bg-white">
-      introTitle="Introduction and Workflow"
+      {/* Main container with two columns */}
-      advantageTitle="Advantage"
+      <div className="grid grid-cols-1 lg:grid-cols-[1.2fr_1.0fr] min-h-screen">
-      introItems={contentItems}
+        
-      advantageItems={advantageItems}
+        {/* Left Column - Content using existing IntroductionLayout structure */}
-      imageUrl="/images/dna/whole_genome_seq-normal_denovo.png"
+        <div className="px-6 lg:px-12 py-8">
-      imageAlt="Sample Process Steps"
+          {/* Introduction Section */}
-      useParagraphs={true}
+          <section className="mb-8">
-    />
+            <h2 className="text-3xl font-bold text-teal-700 mb-4">
+              Introduction and Workflow
+            </h2>
+            <ul className="space-y-4 text-gray-600 leading-relaxed text-sm lg:text-base">
+              {contentItems.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>
+
+          {/* 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>
+              ))}
+            </ul>
+          </section>
+        </div>
+
+        {/* Right Column - Custom Content with Image and SVG */}
+        <div className="relative p-4">
+          <div className="flex flex-col h-full space-y-4">
+            {/* Top Section - Flowchart with larger fixed width */}
+            <div className="w-full flex items-center justify-center py-6">
+              <div className="w-full max-w-md flex items-center justify-center">
+                <img 
+                  src="/images/flowchart/WGS_flow.svg"
+                  alt="WGS Process Flow"
+                  className="w-full h-auto object-contain"
+                />
+              </div>
+            </div>
+            
+            {/* Bottom Section - Image with same width */}
+            <div className="flex items-center justify-center">
+              <div className="w-full max-w-md flex items-center justify-center">
+                <img 
+                  src="/images/dna/whole_genome_seq-normal_denovo.png"
+                  alt="WGS Overview"
+                  className="w-full h-auto object-contain"
+                />
+              </div>
+            </div>
+            
+          </div>
+        </div>
+      </div>
+    </div>
   );
 };
 

app/health/Components/ClinicalAreas.jsx

@@ -20,10 +20,10 @@ export default function ClinicalAreas() {
       <div className="grid grid-cols-1 sm:grid-cols-2 gap-6">
         {/* Rare Disorders */}
         <Link href="/health/rare-disorders">
-          <div className="rounded-lg p-6 hover:shadow-sm transition-shadow cursor-pointer" style={{backgroundColor: '#f2fcfc'}}>
+          <div className="rounded-2xl p-6 hover:shadow-sm transition-shadow cursor-pointer" style={{backgroundColor: '#f2fcfc'}}>
             <div className="flex items-start gap-4">
               {/* Icon */}
-              <div className="flex-shrink-0 mt-1">
+              <div className="flex-shrink-0 mt-1 rounded-full bg-orange-100 w-14 h-14 flex items-center justify-center">
                 <Image
                   src="/images/icons/disorder.png"
                   alt="Rare Disorders"
@@ -33,7 +33,7 @@ export default function ClinicalAreas() {
                 />
               </div>
               <div className="flex-1">
-                <h3 className="text-lg font-semibold text-gray-900 mb-2">Rare Disorders</h3>
+                <h3 className="text-lg font-semibold text-teal-700 mb-2">Rare Disorders</h3>
                 <p className="text-gray-500 text-sm leading-relaxed">
                   Advancing diagnostics and treatments for rare genetic conditions.
                 </p>
@@ -44,10 +44,10 @@ export default function ClinicalAreas() {
 
         {/* Oncology */}
         <Link href="/health/oncology">
-          <div className="rounded-lg p-6 hover:shadow-sm transition-shadow cursor-pointer" style={{backgroundColor: '#f2fcfc'}}>
+          <div className="rounded-2xl p-6 hover:shadow-sm transition-shadow cursor-pointer" style={{backgroundColor: '#f2fcfc'}}>
             <div className="flex items-start gap-4">
               {/* Icon */}
-              <div className="flex-shrink-0 mt-1">
+              <div className="flex-shrink-0 mt-1 rounded-full bg-orange-100 w-14 h-14 flex items-center justify-center">
                 <Image
                   src="/images/icons/oncology.png"
                   alt="Oncology"
@@ -57,7 +57,7 @@ export default function ClinicalAreas() {
                 />
               </div>
               <div className="flex-1">
-                <h3 className="text-lg font-semibold text-gray-900 mb-2">Oncology</h3>
+                <h3 className="text-lg font-semibold text-teal-700 mb-2">Oncology</h3>
                 <p className="text-gray-500 text-sm leading-relaxed">
                   Revolutionizing cancer care with targeted therapies and early detection.
                 </p>

app/health/Components/HealthIntro.jsx

@@ -1,42 +1,166 @@
 // components/AboutHealth.js
+'use client'
+// components/AboutHealth.js
 import Image from "next/image";
 import Link from "next/link";
+import { useState, useEffect } from "react";
 
 export default function AboutHealth() {
+  const [currentSlide, setCurrentSlide] = useState(0);
+
+  const slides = [
+    {
+      content: "At Operify Health, we believe every patient deserves answers that are not only accurate — but actionable. By harnessing the power of Next Generation Sequencing (NGS), we transform patient samples into rich genomic insights that enable clinicians and oncologists to make informed, personalized decisions. From rare genetic disorders to complex oncological cases, our solutions help uncover what traditional diagnostics often miss."
+    },
+    {
+      content: "At Operify Health, we believe every patient deserves answers that are not only accurate — but actionable. By harnessing the power of Next Generation Sequencing (NGS), we transform patient samples into rich genomic insights that enable clinicians and oncologists to make informed, personalized decisions. From rare genetic disorders to complex oncological cases, our solutions help uncover what traditional diagnostics often miss."
+    },
+    {
+      content: "At Operify Health, we believe every patient deserves answers that are not only accurate — but actionable. By harnessing the power of Next Generation Sequencing (NGS), we transform patient samples into rich genomic insights that enable clinicians and oncologists to make informed, personalized decisions. From rare genetic disorders to complex oncological cases, our solutions help uncover what traditional diagnostics often miss."
+    }
+  ];
+
+  // Auto-advance slides every 5 seconds
+  useEffect(() => {
+    const timer = setInterval(() => {
+      setCurrentSlide((prev) => (prev + 1) % slides.length);
+    }, 5000);
+
+    return () => clearInterval(timer);
+  }, [slides.length]);
+
+  const goToSlide = (index) => {
+    setCurrentSlide(index);
+  };
+
+  const nextSlide = () => {
+    setCurrentSlide((prev) => (prev + 1) % slides.length);
+  };
+
+  const prevSlide = () => {
+    setCurrentSlide((prev) => (prev - 1 + slides.length) % slides.length);
+  };
+
   return (
-    <section className="py-0">
+    <section>
-      <div className="container-fluid">
+      <div className="flex min-h-[350px]">
-        <div className="bg-gradient-to-br from-teal-600 to-teal-700 text-white p-8 lg:p-8 flex items-center">
+        {/* Left Side - Content */}
-          <div className="w-full">
+        <div className="w-full lg:w-3/4 bg-white">
-            <ul className="list-disc list-inside space-y-4 leading-relaxed pl-4">
+          <div className="h-full flex flex-col justify-center px-4 lg:px-8 py-4">
-              <li className="text-justify" style={{color: '#faae31'}}>
+            {/* Brand/Title */}
-                <span style={{color: '#ffffff'}}>
+            <div className="mb-4">
-                  At Operify Health, we believe every patient deserves answers that are not only
+              <h2 className="text-3xl font-bold text-teal-700 mb-4">
-                  accurate — but actionable. By harnessing the power of Next Generation Sequencing
+                <span>Operify</span>
-                  (NGS), we transform patient samples into rich genomic insights that enable
+                <span className="ml-2">Health</span>
-                  clinicians and oncologists to make informed, personalized decisions. From rare
+              </h2>
-                  genetic disorders to complex oncological cases, our solutions help uncover what
+              <div className="w-10 h-0.5" style={{backgroundColor: '#faae31'}}></div>
-                  traditional diagnostics often miss.
+            </div>
-                </span>
+
-              </li>
+            {/* Content Slider */}
-              <li className="text-justify" style={{color: '#faae31'}}>
+            <div className="mb-4 max-w-3xl">
-                <span style={{color: '#ffffff'}}>
+              <div className="text-gray-600 leading-relaxed text-base mb-4 text-justify font-light transition-opacity duration-500">
-                  Our strength lies in our multidisciplinary team of researchers, bioinformaticians,
+                {slides[currentSlide].content}
-                  and data scientists who use custom-built algorithms and cutting-edge analytics to
+              </div>
-                  interpret genetic data with unmatched depth. Backed by curated scientific evidence
+            </div>
-                  and real-world clinical findings, we deliver recommendations that are current,
+
-                  relevant, and patient-focused.
+            {/* Navigation */}
-                </span>
+            <div className="flex items-center justify-between">
-              </li>
+              <div className="flex items-center space-x-3">
-              <li className="text-justify" style={{color: '#faae31'}}>
+                <button
-                <span style={{color: '#ffffff'}}>
+                  onClick={prevSlide}
-                  With every genome we decode, we move closer to truly personalized medicine —
+                  className="w-8 h-8 flex items-center justify-center border rounded-full transition-all duration-200"
-                  bridging data and care, science and life.
+                  style={{
-                </span>
+                    borderColor: '#555555',
-              </li>
+                    color: '#555555'
-            </ul>
+                  }}
+                  onMouseEnter={(e) => {
+                    e.target.style.borderColor = '#faae31';
+                    e.target.style.backgroundColor = '#faae31';
+                    e.target.style.color = '#2a6564';
+                  }}
+                  onMouseLeave={(e) => {
+                    e.target.style.borderColor = '#555555';
+                    e.target.style.backgroundColor = 'transparent';
+                    e.target.style.color = '#555555';
+                  }}
+                  aria-label="Previous slide"
+                >
+                  <svg className="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M15 19l-7-7 7-7" />
+                  </svg>
+                </button>
+
+                <button
+                  onClick={nextSlide}
+                  className="w-8 h-8 flex items-center justify-center border rounded-full transition-all duration-200"
+                  style={{
+                    borderColor: '#555555',
+                    color: '#555555'
+                  }}
+                  onMouseEnter={(e) => {
+                    e.target.style.borderColor = '#faae31';
+                    e.target.style.backgroundColor = '#faae31';
+                    e.target.style.color = '#2a6564';
+                  }}
+                  onMouseLeave={(e) => {
+                    e.target.style.borderColor = '#555555';
+                    e.target.style.backgroundColor = 'transparent';
+                    e.target.style.color = '#555555';
+                  }}
+                  aria-label="Next slide"
+                >
+                  <svg className="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M9 5l7 7-7 7" />
+                  </svg>
+                </button>
+
+                {/* Progress Indicators */}
+                <div className="flex space-x-2 ml-4">
+                  {slides.map((_, index) => (
+                    <button
+                      key={index}
+                      onClick={() => goToSlide(index)}
+                      className="transition-all duration-200 rounded-full"
+                      style={{
+                        width: index === currentSlide ? '24px' : '6px',
+                        height: '6px',
+                        backgroundColor: index === currentSlide ? '#faae31' : '#555555'
+                      }}
+                      onMouseEnter={(e) => {
+                        if (index !== currentSlide) {
+                          e.target.style.backgroundColor = '#2a6564';
+                        }
+                      }}
+                      onMouseLeave={(e) => {
+                        if (index !== currentSlide) {
+                          e.target.style.backgroundColor = '#555555';
+                        }
+                      }}
+                      aria-label={`Go to slide ${index + 1}`}
+                    />
+                  ))}
+                </div>
+              </div>
+            </div>
           </div>
         </div>
+
+        {/* Right Side - Image */}
+        <div className="hidden lg:block w-1/2 relative">
+          <div className="absolute inset-0">
+            <Image
+              src="https://images.unsplash.com/photo-1559757148-5c350d0d3c56?ixlib=rb-4.0.3&auto=format&fit=crop&w=1200&q=80"
+              alt="Healthcare professional working in modern laboratory"
+              fill
+              className="object-cover grayscale-[20%]"
+              priority
+            />
+            <div className="absolute inset-0 bg-slate-900/10"></div>
+          </div>
+          
+          {/* Subtle border */}
+          <div className="absolute left-0 top-0 w-px h-full bg-slate-200"></div>
+        </div>
       </div>
     </section>
   );

app/health/components/ClinicalAreas.jsx

@@ -20,10 +20,10 @@ export default function ClinicalAreas() {
       <div className="grid grid-cols-1 sm:grid-cols-2 gap-6">
         {/* Rare Disorders */}
         <Link href="/health/rare-disorders">
-          <div className="rounded-lg p-6 hover:shadow-sm transition-shadow cursor-pointer" style={{backgroundColor: '#f2fcfc'}}>
+          <div className="rounded-2xl p-6 hover:shadow-sm transition-shadow cursor-pointer" style={{backgroundColor: '#f2fcfc'}}>
             <div className="flex items-start gap-4">
               {/* Icon */}
-              <div className="flex-shrink-0 mt-1">
+              <div className="flex-shrink-0 mt-1 rounded-full bg-orange-100 w-14 h-14 flex items-center justify-center">
                 <Image
                   src="/images/icons/disorder.png"
                   alt="Rare Disorders"
@@ -33,7 +33,7 @@ export default function ClinicalAreas() {
                 />
               </div>
               <div className="flex-1">
-                <h3 className="text-lg font-semibold text-gray-900 mb-2">Rare Disorders</h3>
+                <h3 className="text-lg font-semibold text-teal-700 mb-2">Rare Disorders</h3>
                 <p className="text-gray-500 text-sm leading-relaxed">
                   Advancing diagnostics and treatments for rare genetic conditions.
                 </p>
@@ -44,10 +44,10 @@ export default function ClinicalAreas() {
 
         {/* Oncology */}
         <Link href="/health/oncology">
-          <div className="rounded-lg p-6 hover:shadow-sm transition-shadow cursor-pointer" style={{backgroundColor: '#f2fcfc'}}>
+          <div className="rounded-2xl p-6 hover:shadow-sm transition-shadow cursor-pointer" style={{backgroundColor: '#f2fcfc'}}>
             <div className="flex items-start gap-4">
               {/* Icon */}
-              <div className="flex-shrink-0 mt-1">
+              <div className="flex-shrink-0 mt-1 rounded-full bg-orange-100 w-14 h-14 flex items-center justify-center">
                 <Image
                   src="/images/icons/oncology.png"
                   alt="Oncology"
@@ -57,7 +57,7 @@ export default function ClinicalAreas() {
                 />
               </div>
               <div className="flex-1">
-                <h3 className="text-lg font-semibold text-gray-900 mb-2">Oncology</h3>
+                <h3 className="text-lg font-semibold text-teal-700 mb-2">Oncology</h3>
                 <p className="text-gray-500 text-sm leading-relaxed">
                   Revolutionizing cancer care with targeted therapies and early detection.
                 </p>

app/health/components/HealthIntro.jsx

@@ -1,42 +1,166 @@
 // components/AboutHealth.js
+'use client'
+// components/AboutHealth.js
 import Image from "next/image";
 import Link from "next/link";
+import { useState, useEffect } from "react";
 
 export default function AboutHealth() {
+  const [currentSlide, setCurrentSlide] = useState(0);
+
+  const slides = [
+    {
+      content: "At Operify Health, we believe every patient deserves answers that are not only accurate — but actionable. By harnessing the power of Next Generation Sequencing (NGS), we transform patient samples into rich genomic insights that enable clinicians and oncologists to make informed, personalized decisions. From rare genetic disorders to complex oncological cases, our solutions help uncover what traditional diagnostics often miss."
+    },
+    {
+      content: "At Operify Health, we believe every patient deserves answers that are not only accurate — but actionable. By harnessing the power of Next Generation Sequencing (NGS), we transform patient samples into rich genomic insights that enable clinicians and oncologists to make informed, personalized decisions. From rare genetic disorders to complex oncological cases, our solutions help uncover what traditional diagnostics often miss."
+    },
+    {
+      content: "At Operify Health, we believe every patient deserves answers that are not only accurate — but actionable. By harnessing the power of Next Generation Sequencing (NGS), we transform patient samples into rich genomic insights that enable clinicians and oncologists to make informed, personalized decisions. From rare genetic disorders to complex oncological cases, our solutions help uncover what traditional diagnostics often miss."
+    }
+  ];
+
+  // Auto-advance slides every 5 seconds
+  useEffect(() => {
+    const timer = setInterval(() => {
+      setCurrentSlide((prev) => (prev + 1) % slides.length);
+    }, 5000);
+
+    return () => clearInterval(timer);
+  }, [slides.length]);
+
+  const goToSlide = (index) => {
+    setCurrentSlide(index);
+  };
+
+  const nextSlide = () => {
+    setCurrentSlide((prev) => (prev + 1) % slides.length);
+  };
+
+  const prevSlide = () => {
+    setCurrentSlide((prev) => (prev - 1 + slides.length) % slides.length);
+  };
+
   return (
-    <section className="py-0">
+    <section>
-      <div className="container-fluid">
+      <div className="flex min-h-[350px]">
-        <div className="bg-gradient-to-br from-teal-600 to-teal-700 text-white p-8 lg:p-8 flex items-center">
+        {/* Left Side - Content */}
-          <div className="w-full">
+        <div className="w-full lg:w-3/4 bg-white">
-            <ul className="list-disc list-inside space-y-4 leading-relaxed pl-4">
+          <div className="h-full flex flex-col justify-center px-4 lg:px-8 py-4">
-              <li className="text-justify" style={{color: '#faae31'}}>
+            {/* Brand/Title */}
-                <span style={{color: '#ffffff'}}>
+            <div className="mb-4">
-                  At Operify Health, we believe every patient deserves answers that are not only
+              <h2 className="text-3xl font-bold text-teal-700 mb-4">
-                  accurate — but actionable. By harnessing the power of Next Generation Sequencing
+                <span>Operify</span>
-                  (NGS), we transform patient samples into rich genomic insights that enable
+                <span className="ml-2">Health</span>
-                  clinicians and oncologists to make informed, personalized decisions. From rare
+              </h2>
-                  genetic disorders to complex oncological cases, our solutions help uncover what
+              <div className="w-10 h-0.5" style={{backgroundColor: '#faae31'}}></div>
-                  traditional diagnostics often miss.
+            </div>
-                </span>
+
-              </li>
+            {/* Content Slider */}
-              <li className="text-justify" style={{color: '#faae31'}}>
+            <div className="mb-4 max-w-3xl">
-                <span style={{color: '#ffffff'}}>
+              <div className="text-gray-600 leading-relaxed text-base mb-4 text-justify font-light transition-opacity duration-500">
-                  Our strength lies in our multidisciplinary team of researchers, bioinformaticians,
+                {slides[currentSlide].content}
-                  and data scientists who use custom-built algorithms and cutting-edge analytics to
+              </div>
-                  interpret genetic data with unmatched depth. Backed by curated scientific evidence
+            </div>
-                  and real-world clinical findings, we deliver recommendations that are current,
+
-                  relevant, and patient-focused.
+            {/* Navigation */}
-                </span>
+            <div className="flex items-center justify-between">
-              </li>
+              <div className="flex items-center space-x-3">
-              <li className="text-justify" style={{color: '#faae31'}}>
+                <button
-                <span style={{color: '#ffffff'}}>
+                  onClick={prevSlide}
-                  With every genome we decode, we move closer to truly personalized medicine —
+                  className="w-8 h-8 flex items-center justify-center border rounded-full transition-all duration-200"
-                  bridging data and care, science and life.
+                  style={{
-                </span>
+                    borderColor: '#555555',
-              </li>
+                    color: '#555555'
-            </ul>
+                  }}
+                  onMouseEnter={(e) => {
+                    e.target.style.borderColor = '#faae31';
+                    e.target.style.backgroundColor = '#faae31';
+                    e.target.style.color = '#2a6564';
+                  }}
+                  onMouseLeave={(e) => {
+                    e.target.style.borderColor = '#555555';
+                    e.target.style.backgroundColor = 'transparent';
+                    e.target.style.color = '#555555';
+                  }}
+                  aria-label="Previous slide"
+                >
+                  <svg className="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M15 19l-7-7 7-7" />
+                  </svg>
+                </button>
+
+                <button
+                  onClick={nextSlide}
+                  className="w-8 h-8 flex items-center justify-center border rounded-full transition-all duration-200"
+                  style={{
+                    borderColor: '#555555',
+                    color: '#555555'
+                  }}
+                  onMouseEnter={(e) => {
+                    e.target.style.borderColor = '#faae31';
+                    e.target.style.backgroundColor = '#faae31';
+                    e.target.style.color = '#2a6564';
+                  }}
+                  onMouseLeave={(e) => {
+                    e.target.style.borderColor = '#555555';
+                    e.target.style.backgroundColor = 'transparent';
+                    e.target.style.color = '#555555';
+                  }}
+                  aria-label="Next slide"
+                >
+                  <svg className="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M9 5l7 7-7 7" />
+                  </svg>
+                </button>
+
+                {/* Progress Indicators */}
+                <div className="flex space-x-2 ml-4">
+                  {slides.map((_, index) => (
+                    <button
+                      key={index}
+                      onClick={() => goToSlide(index)}
+                      className="transition-all duration-200 rounded-full"
+                      style={{
+                        width: index === currentSlide ? '24px' : '6px',
+                        height: '6px',
+                        backgroundColor: index === currentSlide ? '#faae31' : '#555555'
+                      }}
+                      onMouseEnter={(e) => {
+                        if (index !== currentSlide) {
+                          e.target.style.backgroundColor = '#2a6564';
+                        }
+                      }}
+                      onMouseLeave={(e) => {
+                        if (index !== currentSlide) {
+                          e.target.style.backgroundColor = '#555555';
+                        }
+                      }}
+                      aria-label={`Go to slide ${index + 1}`}
+                    />
+                  ))}
+                </div>
+              </div>
+            </div>
           </div>
         </div>
+
+        {/* Right Side - Image */}
+        <div className="hidden lg:block w-1/2 relative">
+          <div className="absolute inset-0">
+            <Image
+              src="https://images.unsplash.com/photo-1559757148-5c350d0d3c56?ixlib=rb-4.0.3&auto=format&fit=crop&w=1200&q=80"
+              alt="Healthcare professional working in modern laboratory"
+              fill
+              className="object-cover grayscale-[20%]"
+              priority
+            />
+            <div className="absolute inset-0 bg-slate-900/10"></div>
+          </div>
+          
+          {/* Subtle border */}
+          <div className="absolute left-0 top-0 w-px h-full bg-slate-200"></div>
+        </div>
       </div>
     </section>
   );

app/health/oncology/Components/HereditaryCancerPanel.jsx

@@ -37,7 +37,7 @@ export default function HereditaryCancerPanel() {
         </ul>
       </div>
 
-      <h3 className="text-2xl font-semibold text-gray-700 mb-4">Key Features</h3>
+      <h3 className="text-3xl font-semibold text-teal-700 pb-2 mb-4">Key Features</h3>
       <div className="overflow-x-auto">
         <table className="w-full border-collapse border border-gray-300 rounded-lg">
           <thead>

app/health/oncology/Components/OncologyIntro.jsx

@@ -1,51 +1,167 @@
+'use client'
+import Image from "next/image";
+import Link from "next/link";
+import { useState, useEffect } from "react";
+
 export default function OncologyIntro() {
+  const [currentSlide, setCurrentSlide] = useState(0);
+
+  const slides = [
+    {
+      content: "Cancer is not a single disease—it's a highly complex and dynamic group of disorders, often driven by a multitude of genomic alterations. Despite advancements in treatment, many patients still face uncertainty due to incomplete or delayed molecular diagnoses."
+    },
+    {
+      content: "At Operify Health, we recognize that behind every tumor is a unique genetic story waiting to be told. Our precision oncology solutions utilize high-throughput Next Generation Sequencing (NGS) to analyze both somatic and germline mutations—providing clinicians with actionable insights that inform targeted therapies, immunotherapy decisions, and hereditary cancer risk assessments."
+    },
+    {
+      content: "This genomic-driven approach is especially critical in advanced and treatment-resistant cancers, where conventional methods often fall short. Studies have shown that integrating broad-panel NGS into cancer care can impact clinical decision-making in up to 30% of cases, leading to more personalized and effective treatment strategies."
+    },
+    {
+      content: "By combining cutting-edge sequencing, advanced bioinformatics, and curated clinical evidence, Operify Health empowers oncologists to move from uncertainty to precision—ensuring every cancer patient's care is as individualized as their diagnosis."
+    }
+  ];
+
+  // Auto-advance slides every 5 seconds
+  useEffect(() => {
+    const timer = setInterval(() => {
+      setCurrentSlide((prev) => (prev + 1) % slides.length);
+    }, 5000);
+
+    return () => clearInterval(timer);
+  }, [slides.length]);
+
+  const goToSlide = (index) => {
+    setCurrentSlide(index);
+  };
+
+  const nextSlide = () => {
+    setCurrentSlide((prev) => (prev + 1) % slides.length);
+  };
+
+  const prevSlide = () => {
+    setCurrentSlide((prev) => (prev - 1 + slides.length) % slides.length);
+  };
+
   return (
-    <section className="py-0">
+    <section>
-      <div className="container-fluid">
+      <div className="flex min-h-[350px]">
-        <div className="bg-gradient-to-br from-teal-600 to-teal-700 text-white p-8 lg:p-8 flex items-center">
+        {/* Left Side - Content */}
-          <div className="w-full">
+        <div className="w-full lg:w-3/4 bg-white">
-            <h2 className="text-3xl font-bold text-white mb-6 leading-tight">
+          <div className="h-full flex flex-col justify-center px-4 lg:px-8 py-4">
-              Turning Complexity into Clarity
+            {/* Brand/Title */}
-            </h2>
+            <div className="mb-4">
-            <ul className="space-y-4">
+              <h2 className="text-3xl font-bold text-teal-700 mb-4">
-              <li className="flex items-start gap-3">
+                <span>Turning</span>
-                <div className="w-2 h-2 rounded-full mt-2 flex-shrink-0" style={{backgroundColor: '#faae31'}}></div>
+                <span className="ml-2">Complexity into Clarity</span>
-                <span className="leading-relaxed text-justify">
+              </h2>
-                  Cancer is not a single disease—it's a highly complex and dynamic group of disorders, 
+              <div className="w-10 h-0.5" style={{backgroundColor: '#faae31'}}></div>
-                  often driven by a multitude of genomic alterations. Despite advancements in treatment, 
+            </div>
-                  many patients still face uncertainty due to incomplete or delayed molecular diagnoses.
+
-                </span>
+            {/* Content Slider */}
-              </li>
+            <div className="mb-4 max-w-3xl">
-              <li className="flex items-start gap-3">
+              <div className="text-gray-600 leading-relaxed text-base mb-4 text-justify font-light transition-opacity duration-500">
-                <div className="w-2 h-2 rounded-full mt-2 flex-shrink-0" style={{backgroundColor: '#faae31'}}></div>
+                {slides[currentSlide].content}
-                <span className="leading-relaxed text-justify">
+              </div>
-                  At Operify Health, we recognize that behind every tumor is a unique genetic story waiting 
+            </div>
-                  to be told. Our precision oncology solutions utilize high-throughput Next Generation 
+
-                  Sequencing (NGS) to analyze both somatic and germline mutations—providing clinicians 
+            {/* Navigation */}
-                  with actionable insights that inform targeted therapies, immunotherapy decisions, and 
+            <div className="flex items-center justify-between">
-                  hereditary cancer risk assessments.
+              <div className="flex items-center space-x-3">
-                </span>
+                <button
-              </li>
+                  onClick={prevSlide}
-              <li className="flex items-start gap-3">
+                  className="w-8 h-8 flex items-center justify-center border rounded-full transition-all duration-200"
-                <div className="w-2 h-2 rounded-full mt-2 flex-shrink-0" style={{backgroundColor: '#faae31'}}></div>
+                  style={{
-                <span className="leading-relaxed text-justify">
+                    borderColor: '#555555',
-                  This genomic-driven approach is especially critical in advanced and treatment-resistant 
+                    color: '#555555'
-                  cancers, where conventional methods often fall short. Studies have shown that integrating 
+                  }}
-                  broad-panel NGS into cancer care can impact clinical decision-making in up to 30% of cases, 
+                  onMouseEnter={(e) => {
-                  leading to more personalized and effective treatment strategies.
+                    e.target.style.borderColor = '#faae31';
-                </span>
+                    e.target.style.backgroundColor = '#faae31';
-              </li>
+                    e.target.style.color = '#2a6564';
-              <li className="flex items-start gap-3">
+                  }}
-                <div className="w-2 h-2 rounded-full mt-2 flex-shrink-0" style={{backgroundColor: '#faae31'}}></div>
+                  onMouseLeave={(e) => {
-                <span className="leading-relaxed text-justify">
+                    e.target.style.borderColor = '#555555';
-                  By combining cutting-edge sequencing, advanced bioinformatics, and curated clinical evidence, 
+                    e.target.style.backgroundColor = 'transparent';
-                  Operify Health empowers oncologists to move from uncertainty to precision—ensuring every cancer 
+                    e.target.style.color = '#555555';
-                  patient's care is as individualized as their diagnosis.
+                  }}
-                </span>
+                  aria-label="Previous slide"
-              </li>
+                >
-            </ul>
+                  <svg className="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M15 19l-7-7 7-7" />
+                  </svg>
+                </button>
+
+                <button
+                  onClick={nextSlide}
+                  className="w-8 h-8 flex items-center justify-center border rounded-full transition-all duration-200"
+                  style={{
+                    borderColor: '#555555',
+                    color: '#555555'
+                  }}
+                  onMouseEnter={(e) => {
+                    e.target.style.borderColor = '#faae31';
+                    e.target.style.backgroundColor = '#faae31';
+                    e.target.style.color = '#2a6564';
+                  }}
+                  onMouseLeave={(e) => {
+                    e.target.style.borderColor = '#555555';
+                    e.target.style.backgroundColor = 'transparent';
+                    e.target.style.color = '#555555';
+                  }}
+                  aria-label="Next slide"
+                >
+                  <svg className="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M9 5l7 7-7 7" />
+                  </svg>
+                </button>
+
+                {/* Progress Indicators */}
+                <div className="flex space-x-2 ml-4">
+                  {slides.map((_, index) => (
+                    <button
+                      key={index}
+                      onClick={() => goToSlide(index)}
+                      className="transition-all duration-200 rounded-full"
+                      style={{
+                        width: index === currentSlide ? '24px' : '6px',
+                        height: '6px',
+                        backgroundColor: index === currentSlide ? '#faae31' : '#555555'
+                      }}
+                      onMouseEnter={(e) => {
+                        if (index !== currentSlide) {
+                          e.target.style.backgroundColor = '#2a6564';
+                        }
+                      }}
+                      onMouseLeave={(e) => {
+                        if (index !== currentSlide) {
+                          e.target.style.backgroundColor = '#555555';
+                        }
+                      }}
+                      aria-label={`Go to slide ${index + 1}`}
+                    />
+                  ))}
+                </div>
+              </div>
+            </div>
           </div>
         </div>
+
+        {/* Right Side - Image */}
+        <div className="hidden lg:block w-1/2 relative">
+          <div className="absolute inset-0">
+            <Image
+              src="https://images.unsplash.com/photo-1579684385127-1ef15d508118?ixlib=rb-4.0.3&auto=format&fit=crop&w=1200&q=80"
+              alt="Cancer research and oncology molecular analysis"
+              fill
+              className="object-cover grayscale-[20%]"
+              priority
+            />
+            <div className="absolute inset-0 bg-slate-900/10"></div>
+          </div>
+          
+          {/* Subtle border */}
+          <div className="absolute left-0 top-0 w-px h-full bg-slate-200"></div>
+        </div>
       </div>
     </section>
   );

app/health/oncology/components/HereditaryCancerPanel.jsx

@@ -37,7 +37,7 @@ export default function HereditaryCancerPanel() {
         </ul>
       </div>
 
-      <h3 className="text-2xl font-semibold text-gray-700 mb-4">Key Features</h3>
+      <h3 className="text-3xl font-semibold text-teal-700 pb-2 mb-4">Key Features</h3>
       <div className="overflow-x-auto">
         <table className="w-full border-collapse border border-gray-300 rounded-lg">
           <thead>

app/health/oncology/components/OncologyIntro.jsx

@@ -1,51 +1,167 @@
+'use client'
+import Image from "next/image";
+import Link from "next/link";
+import { useState, useEffect } from "react";
+
 export default function OncologyIntro() {
+  const [currentSlide, setCurrentSlide] = useState(0);
+
+  const slides = [
+    {
+      content: "Cancer is not a single disease—it's a highly complex and dynamic group of disorders, often driven by a multitude of genomic alterations. Despite advancements in treatment, many patients still face uncertainty due to incomplete or delayed molecular diagnoses."
+    },
+    {
+      content: "At Operify Health, we recognize that behind every tumor is a unique genetic story waiting to be told. Our precision oncology solutions utilize high-throughput Next Generation Sequencing (NGS) to analyze both somatic and germline mutations—providing clinicians with actionable insights that inform targeted therapies, immunotherapy decisions, and hereditary cancer risk assessments."
+    },
+    {
+      content: "This genomic-driven approach is especially critical in advanced and treatment-resistant cancers, where conventional methods often fall short. Studies have shown that integrating broad-panel NGS into cancer care can impact clinical decision-making in up to 30% of cases, leading to more personalized and effective treatment strategies."
+    },
+    {
+      content: "By combining cutting-edge sequencing, advanced bioinformatics, and curated clinical evidence, Operify Health empowers oncologists to move from uncertainty to precision—ensuring every cancer patient's care is as individualized as their diagnosis."
+    }
+  ];
+
+  // Auto-advance slides every 5 seconds
+  useEffect(() => {
+    const timer = setInterval(() => {
+      setCurrentSlide((prev) => (prev + 1) % slides.length);
+    }, 5000);
+
+    return () => clearInterval(timer);
+  }, [slides.length]);
+
+  const goToSlide = (index) => {
+    setCurrentSlide(index);
+  };
+
+  const nextSlide = () => {
+    setCurrentSlide((prev) => (prev + 1) % slides.length);
+  };
+
+  const prevSlide = () => {
+    setCurrentSlide((prev) => (prev - 1 + slides.length) % slides.length);
+  };
+
   return (
-    <section className="py-0">
+    <section>
-      <div className="container-fluid">
+      <div className="flex min-h-[350px]">
-        <div className="bg-gradient-to-br from-teal-600 to-teal-700 text-white p-8 lg:p-8 flex items-center">
+        {/* Left Side - Content */}
-          <div className="w-full">
+        <div className="w-full lg:w-3/4 bg-white">
-            <h2 className="text-3xl font-bold text-white mb-6 leading-tight">
+          <div className="h-full flex flex-col justify-center px-4 lg:px-8 py-4">
-              Turning Complexity into Clarity
+            {/* Brand/Title */}
-            </h2>
+            <div className="mb-4">
-            <ul className="space-y-4">
+              <h2 className="text-3xl font-bold text-teal-700 mb-4">
-              <li className="flex items-start gap-3">
+                <span>Turning</span>
-                <div className="w-2 h-2 rounded-full mt-2 flex-shrink-0" style={{backgroundColor: '#faae31'}}></div>
+                <span className="ml-2">Complexity into Clarity</span>
-                <span className="leading-relaxed text-justify">
+              </h2>
-                  Cancer is not a single disease—it's a highly complex and dynamic group of disorders, 
+              <div className="w-10 h-0.5" style={{backgroundColor: '#faae31'}}></div>
-                  often driven by a multitude of genomic alterations. Despite advancements in treatment, 
+            </div>
-                  many patients still face uncertainty due to incomplete or delayed molecular diagnoses.
+
-                </span>
+            {/* Content Slider */}
-              </li>
+            <div className="mb-4 max-w-3xl">
-              <li className="flex items-start gap-3">
+              <div className="text-gray-600 leading-relaxed text-base mb-4 text-justify font-light transition-opacity duration-500">
-                <div className="w-2 h-2 rounded-full mt-2 flex-shrink-0" style={{backgroundColor: '#faae31'}}></div>
+                {slides[currentSlide].content}
-                <span className="leading-relaxed text-justify">
+              </div>
-                  At Operify Health, we recognize that behind every tumor is a unique genetic story waiting 
+            </div>
-                  to be told. Our precision oncology solutions utilize high-throughput Next Generation 
+
-                  Sequencing (NGS) to analyze both somatic and germline mutations—providing clinicians 
+            {/* Navigation */}
-                  with actionable insights that inform targeted therapies, immunotherapy decisions, and 
+            <div className="flex items-center justify-between">
-                  hereditary cancer risk assessments.
+              <div className="flex items-center space-x-3">
-                </span>
+                <button
-              </li>
+                  onClick={prevSlide}
-              <li className="flex items-start gap-3">
+                  className="w-8 h-8 flex items-center justify-center border rounded-full transition-all duration-200"
-                <div className="w-2 h-2 rounded-full mt-2 flex-shrink-0" style={{backgroundColor: '#faae31'}}></div>
+                  style={{
-                <span className="leading-relaxed text-justify">
+                    borderColor: '#555555',
-                  This genomic-driven approach is especially critical in advanced and treatment-resistant 
+                    color: '#555555'
-                  cancers, where conventional methods often fall short. Studies have shown that integrating 
+                  }}
-                  broad-panel NGS into cancer care can impact clinical decision-making in up to 30% of cases, 
+                  onMouseEnter={(e) => {
-                  leading to more personalized and effective treatment strategies.
+                    e.target.style.borderColor = '#faae31';
-                </span>
+                    e.target.style.backgroundColor = '#faae31';
-              </li>
+                    e.target.style.color = '#2a6564';
-              <li className="flex items-start gap-3">
+                  }}
-                <div className="w-2 h-2 rounded-full mt-2 flex-shrink-0" style={{backgroundColor: '#faae31'}}></div>
+                  onMouseLeave={(e) => {
-                <span className="leading-relaxed text-justify">
+                    e.target.style.borderColor = '#555555';
-                  By combining cutting-edge sequencing, advanced bioinformatics, and curated clinical evidence, 
+                    e.target.style.backgroundColor = 'transparent';
-                  Operify Health empowers oncologists to move from uncertainty to precision—ensuring every cancer 
+                    e.target.style.color = '#555555';
-                  patient's care is as individualized as their diagnosis.
+                  }}
-                </span>
+                  aria-label="Previous slide"
-              </li>
+                >
-            </ul>
+                  <svg className="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M15 19l-7-7 7-7" />
+                  </svg>
+                </button>
+
+                <button
+                  onClick={nextSlide}
+                  className="w-8 h-8 flex items-center justify-center border rounded-full transition-all duration-200"
+                  style={{
+                    borderColor: '#555555',
+                    color: '#555555'
+                  }}
+                  onMouseEnter={(e) => {
+                    e.target.style.borderColor = '#faae31';
+                    e.target.style.backgroundColor = '#faae31';
+                    e.target.style.color = '#2a6564';
+                  }}
+                  onMouseLeave={(e) => {
+                    e.target.style.borderColor = '#555555';
+                    e.target.style.backgroundColor = 'transparent';
+                    e.target.style.color = '#555555';
+                  }}
+                  aria-label="Next slide"
+                >
+                  <svg className="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M9 5l7 7-7 7" />
+                  </svg>
+                </button>
+
+                {/* Progress Indicators */}
+                <div className="flex space-x-2 ml-4">
+                  {slides.map((_, index) => (
+                    <button
+                      key={index}
+                      onClick={() => goToSlide(index)}
+                      className="transition-all duration-200 rounded-full"
+                      style={{
+                        width: index === currentSlide ? '24px' : '6px',
+                        height: '6px',
+                        backgroundColor: index === currentSlide ? '#faae31' : '#555555'
+                      }}
+                      onMouseEnter={(e) => {
+                        if (index !== currentSlide) {
+                          e.target.style.backgroundColor = '#2a6564';
+                        }
+                      }}
+                      onMouseLeave={(e) => {
+                        if (index !== currentSlide) {
+                          e.target.style.backgroundColor = '#555555';
+                        }
+                      }}
+                      aria-label={`Go to slide ${index + 1}`}
+                    />
+                  ))}
+                </div>
+              </div>
+            </div>
           </div>
         </div>
+
+        {/* Right Side - Image */}
+        <div className="hidden lg:block w-1/2 relative">
+          <div className="absolute inset-0">
+            <Image
+              src="https://images.unsplash.com/photo-1579684385127-1ef15d508118?ixlib=rb-4.0.3&auto=format&fit=crop&w=1200&q=80"
+              alt="Cancer research and oncology molecular analysis"
+              fill
+              className="object-cover grayscale-[20%]"
+              priority
+            />
+            <div className="absolute inset-0 bg-slate-900/10"></div>
+          </div>
+          
+          {/* Subtle border */}
+          <div className="absolute left-0 top-0 w-px h-full bg-slate-200"></div>
+        </div>
       </div>
     </section>
   );

app/health/oncology/page.js

@@ -1,7 +1,7 @@
 import OncologyTitle from './components/OncologyTitle';
 import OncologyIntro from './components/OncologyIntro';
 import HereditaryCancerPanel from './components/HereditaryCancerPanel';
-import SampleRequirements from '../rare-disorders/components/SampleRequirements';
+import SampleRequirements from '../rare-disorders/exome/components/SampleRequirements';
 
 import PageLayout from '../../components/Layout/PageLayout';
 

app/health/rare-disorders/components/ClinicalAreasGrid.jsx

@@ -21,7 +21,7 @@ export default function ClinicalAreasGrid() {
   ];
 
   return (
-    <section className="mx-auto px-8 pt-8">
+    <section className="mx-auto px-8 py-8">
       <h2 className="text-3xl font-bold text-teal-700 pb-2 mb-4">Clinical Areas</h2>
       <div className="grid sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
         {areas.map((area, idx) => (

app/health/rare-disorders/components/RareIntro.jsx

@@ -1,32 +1,161 @@
+'use client'
+import Image from "next/image";
+import Link from "next/link";
+import { useState, useEffect } from "react";
+
 export default function RareIntro() {
+  const [currentSlide, setCurrentSlide] = useState(0);
+
+  const slides = [
+    {
+      content: "There are over 7,000 identified rare diseases, many of which begin in childhood—and nearly 80% have a genetic cause. Yet, the average time to diagnose a rare disorder is still 4.8 years, with some cases taking up to 20 years."
+    },
+    {
+      content: "At Operify Health, we leverage advanced Next Generation Sequencing (NGS) and proprietary bioinformatics to deliver rapid, reliable insights—helping reduce the diagnostic journey from years to days."
+    }
+  ];
+
+  // Auto-advance slides every 5 seconds
+  useEffect(() => {
+    const timer = setInterval(() => {
+      setCurrentSlide((prev) => (prev + 1) % slides.length);
+    }, 5000);
+
+    return () => clearInterval(timer);
+  }, [slides.length]);
+
+  const goToSlide = (index) => {
+    setCurrentSlide(index);
+  };
+
+  const nextSlide = () => {
+    setCurrentSlide((prev) => (prev + 1) % slides.length);
+  };
+
+  const prevSlide = () => {
+    setCurrentSlide((prev) => (prev - 1 + slides.length) % slides.length);
+  };
+
   return (
-    <section className="py-0">
+    <section>
-      <div className="container-fluid">
+      <div className="flex min-h-[350px]">
-        <div className="bg-gradient-to-br from-teal-600 to-teal-700 text-white p-8 lg:p-8 flex items-center">
+        {/* Left Side - Content */}
-          <div className="w-full">
+        <div className="w-full lg:w-3/4 bg-white">
-            <h2 className="text-3xl font-bold text-white mb-6 leading-tight">
+          <div className="h-full flex flex-col justify-center px-4 lg:px-8 py-4">
-              Transforming Delays into Diagnoses
+            {/* Brand/Title */}
-            </h2>
+            <div className="mb-4">
-            <ul className="space-y-4">
+              <h2 className="text-3xl font-bold text-teal-700 mb-4">
-              <li className="flex items-start gap-3">
+                <span>Transforming</span>
-                <div className="w-2 h-2 rounded-full mt-2 flex-shrink-0" style={{backgroundColor: '#faae31'}}></div>
+                <span className="ml-2">Delays into Diagnoses</span>
-                <span className="leading-relaxed text-justify">
+              </h2>
-                  There are over 7,000 identified rare diseases, many of which begin in childhood—and
+              <div className="w-10 h-0.5" style={{backgroundColor: '#faae31'}}></div>
-                  nearly 80% have a genetic cause. Yet, the average time to diagnose a rare disorder is
+            </div>
-                  still 4.8 years, with some cases taking up to 20 years.
+
-                </span>
+            {/* Content Slider */}
-              </li>
+            <div className="mb-4 max-w-3xl">
-              <li className="flex items-start gap-3">
+              <div className="text-gray-600 leading-relaxed text-base mb-4 text-justify font-light transition-opacity duration-500">
-                <div className="w-2 h-2 rounded-full mt-2 flex-shrink-0" style={{backgroundColor: '#faae31'}}></div>
+                {slides[currentSlide].content}
-                <span className="leading-relaxed text-justify">
+              </div>
-                  At Operify Health, we leverage advanced Next Generation Sequencing (NGS) and proprietary
+            </div>
-                  bioinformatics to deliver rapid, reliable insights—helping reduce the diagnostic journey
+
-                  from years to days.
+            {/* Navigation */}
-                </span>
+            <div className="flex items-center justify-between">
-              </li>
+              <div className="flex items-center space-x-3">
-            </ul>
+                <button
+                  onClick={prevSlide}
+                  className="w-8 h-8 flex items-center justify-center border rounded-full transition-all duration-200"
+                  style={{
+                    borderColor: '#555555',
+                    color: '#555555'
+                  }}
+                  onMouseEnter={(e) => {
+                    e.target.style.borderColor = '#faae31';
+                    e.target.style.backgroundColor = '#faae31';
+                    e.target.style.color = '#2a6564';
+                  }}
+                  onMouseLeave={(e) => {
+                    e.target.style.borderColor = '#555555';
+                    e.target.style.backgroundColor = 'transparent';
+                    e.target.style.color = '#555555';
+                  }}
+                  aria-label="Previous slide"
+                >
+                  <svg className="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M15 19l-7-7 7-7" />
+                  </svg>
+                </button>
+
+                <button
+                  onClick={nextSlide}
+                  className="w-8 h-8 flex items-center justify-center border rounded-full transition-all duration-200"
+                  style={{
+                    borderColor: '#555555',
+                    color: '#555555'
+                  }}
+                  onMouseEnter={(e) => {
+                    e.target.style.borderColor = '#faae31';
+                    e.target.style.backgroundColor = '#faae31';
+                    e.target.style.color = '#2a6564';
+                  }}
+                  onMouseLeave={(e) => {
+                    e.target.style.borderColor = '#555555';
+                    e.target.style.backgroundColor = 'transparent';
+                    e.target.style.color = '#555555';
+                  }}
+                  aria-label="Next slide"
+                >
+                  <svg className="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M9 5l7 7-7 7" />
+                  </svg>
+                </button>
+
+                {/* Progress Indicators */}
+                <div className="flex space-x-2 ml-4">
+                  {slides.map((_, index) => (
+                    <button
+                      key={index}
+                      onClick={() => goToSlide(index)}
+                      className="transition-all duration-200 rounded-full"
+                      style={{
+                        width: index === currentSlide ? '24px' : '6px',
+                        height: '6px',
+                        backgroundColor: index === currentSlide ? '#faae31' : '#555555'
+                      }}
+                      onMouseEnter={(e) => {
+                        if (index !== currentSlide) {
+                          e.target.style.backgroundColor = '#2a6564';
+                        }
+                      }}
+                      onMouseLeave={(e) => {
+                        if (index !== currentSlide) {
+                          e.target.style.backgroundColor = '#555555';
+                        }
+                      }}
+                      aria-label={`Go to slide ${index + 1}`}
+                    />
+                  ))}
+                </div>
+              </div>
+            </div>
           </div>
         </div>
+
+        {/* Right Side - Image */}
+        <div className="hidden lg:block w-1/2 relative">
+          <div className="absolute inset-0">
+            <Image
+              src="https://images.unsplash.com/photo-1576091160399-112ba8d25d1f?ixlib=rb-4.0.3&auto=format&fit=crop&w=1200&q=80"
+              alt="DNA sequencing and genetic analysis in modern laboratory"
+              fill
+              className="object-cover grayscale-[20%]"
+              priority
+            />
+            <div className="absolute inset-0 bg-slate-900/10"></div>
+          </div>
+          
+          {/* Subtle border */}
+          <div className="absolute left-0 top-0 w-px h-full bg-slate-200"></div>
+        </div>
       </div>
     </section>
   );

app/health/rare-disorders/components/SolutionsOffer.jsx

@@ -1,15 +1,29 @@
+"use client";
+
 export default function SolutionsOffer() {
   const solutions = [
     {
       name: "Exome",
-      desc: "Whole Exome Sequencing for uncovering the genetic basis of rare diseases."
+      desc: "Whole Exome Sequencing for uncovering the genetic basis of rare diseases.",
+      path: "/health/rare-disorders/exome"
     },
     {
       name: "ExomeMito",
-      desc: "Exome + Mitochondrial Genome Sequencing for a higher diagnostic yield."
+      desc: "Exome + Mitochondrial Genome Sequencing for a higher diagnostic yield.",
+      path: "/health/rare-disorders/exomemito"
     }
   ];
 
+  const handleCardClick = (path) => {
+    // Using Next.js router for navigation
+    window.location.href = path;
+    
+    // Alternative: If you want to use Next.js useRouter hook:
+    // import { useRouter } from 'next/navigation';
+    // const router = useRouter();
+    // router.push(path);
+  };
+
   return (
     <div className="mx-auto px-8 py-6">
       <h2 className="text-3xl font-bold text-teal-700 mb-4">Our Rare Disease Solutions Offer</h2>
@@ -23,13 +37,22 @@ export default function SolutionsOffer() {
         {solutions.map((sol, idx) => (
           <div
             key={idx}
-            className="rounded-lg p-6 hover:shadow-sm transition-shadow cursor-pointer"
+            onClick={() => handleCardClick(sol.path)}
+            className="rounded-xl p-4 hover:shadow-lg hover:scale-105 transition-all duration-300 cursor-pointer"
             style={{backgroundColor: '#f2fcfc'}}
           >
             <div className="flex items-start">
               <div className="flex-1">
-                <h3 className="text-lg font-semibold text-gray-900 mb-2">{sol.name}</h3>
+                <h3 className="text-lg font-semibold text-gray-900 mb-2 hover:text-teal-700 transition-colors">
-                <p className="text-gray-500 text-sm leading-relaxed">{sol.desc}</p>
+                  {sol.name}
+                </h3>
+                <p className="text-gray-500 text-sm leading-relaxed mb-3">{sol.desc}</p>
+                <div className="flex items-center text-teal-600 text-sm font-medium">
+                  Learn more 
+                  <svg className="ml-1 w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
+                  </svg>
+                </div>
               </div>
             </div>
           </div>

app/health/rare-disorders/exome/components/ExomeTitle.jsx

@@ -0,0 +1,47 @@
+import React from 'react';
+
+const ExomeTitle = () => {
+  return (
+    <section 
+      className="relative bg-cover bg-center py-6 h-24" 
+      style={{ backgroundImage: "url('/images/bredcrumb.jpg')" }}
+    >
+      {/* Breadcrumb */}
+      <div className="relative z-10 mb-1 -mt-3">
+        <div className="container mx-auto max-w-none px-4">
+          <nav className="flex items-center space-x-2 text-sm">
+            <a href="/" className="text-white hover:text-yellow-400 underline">Home</a>
+            <span className="text-white">
+              <svg className="w-3 h-3" fill="currentColor" viewBox="0 0 20 20">
+                <path fillRule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clipRule="evenodd" />
+              </svg>
+            </span>
+            <a href="/health" className="text-white hover:text-yellow-400 underline">Health</a>
+             <span className="text-white">
+              <svg className="w-3 h-3" fill="currentColor" viewBox="0 0 20 20">
+                <path fillRule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clipRule="evenodd" />
+              </svg>
+            </span>
+            <a href="/health/rare-disorders" className="text-white hover:text-yellow-400 underline">Rare Disorder</a>
+            <span className="text-white">
+              <svg className="w-3 h-3" fill="currentColor" viewBox="0 0 20 20">
+                <path fillRule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clipRule="evenodd" />
+              </svg>
+            </span>
+            <span className="text-white">Operify Exome</span>
+          </nav>
+        </div>
+      </div>
+      
+      {/* Page Title */}
+      <div className="relative z-10 text-center -mt-2">
+        <h1 className="text-4xl md:text-4xl font-bold text-white mb-2">
+          Operify Exome
+        </h1>
+        <div className="w-16 h-1 bg-yellow-400 mx-auto"></div>
+      </div>
+    </section>
+  );
+};
+
+export default ExomeTitle;

app/health/rare-disorders/exome/components/OperifyExome.jsx

@@ -17,7 +17,7 @@ export default function OperifyExome() {
   ];
 
   return (
-    <section className="mx-auto px-8 pt-8">
+    <section className="mx-auto px-8 pt-10">
       <h2 className="text-3xl font-bold text-teal-700 pb-2 mb-4">Operify Exome</h2>
       
       <div className="mb-8">

app/health/rare-disorders/exome/components/SampleRequirements.jsx

@@ -18,26 +18,26 @@ export default function SampleRequirements({ title, items }) {
     <section className="mx-auto px-8 pt-8 pb-12">
       <h3 className="text-3xl font-bold text-teal-700 mb-6">{title} Sample Requirements</h3>
       
-      <div className="grid grid-cols-1 sm:grid-cols-2 gap-6 max-w-5xl mx-auto">
+      <div className="grid grid-cols-1 sm:grid-cols-2 gap-6 max-w-none mx-auto">
         {requirements.map((req, idx) => (
           <div 
             key={idx}
-            className="rounded-lg p-6 hover:shadow-sm transition-shadow cursor-pointer" 
+            className="rounded-2xl p-4 hover:shadow-sm transition-shadow cursor-pointer" 
             style={{backgroundColor: '#f2fcfc'}}
           >
             <div className="flex items-start gap-4">
-              <div className="flex-shrink-0 mt-1">
+              <div className="flex-shrink-0 mt-1 rounded-full bg-orange-100 w-14 h-14 flex items-center justify-center">
                 <Image
                   src={req.icon}
                   alt={req.title}
-                  width={40}
+                  width={36}
-                  height={40}
+                  height={36}
                   className="object-contain"
                 />
               </div>
               <div className="flex-1">
-                <h4 className="text-lg font-semibold text-gray-900 mb-2">{req.title}</h4>
+                <h4 className="text-lg font-semibold text-teal-700 mb-2">{req.title}</h4>
-                <p className="text-gray-500 text-sm leading-relaxed">
+                <p className="text-gray-600 text-sm leading-relaxed">
                   {req.description}
                 </p>
               </div>

app/health/rare-disorders/exome/page.js

@@ -0,0 +1,25 @@
+import ExomeTitle from './components/ExomeTitle';
+import OperifyExome from './components/OperifyExome';
+import SampleRequirements from './components/SampleRequirements';
+
+import PageLayout from '../../../components/Layout/PageLayout';
+
+export default function ExomePage() {
+  return (
+    <PageLayout fixedHeader={true}>
+      {/* Page Title */}
+      <ExomeTitle />
+
+      {/* Operify Exome */}
+      <OperifyExome />
+      <SampleRequirements
+        title="Operify Exome"
+        items={[
+          "2-5 mL peripheral blood in EDTA tube",
+          "High-quality extracted DNA (minimum 2 µg)",
+          "Fresh or frozen tissue for certain cases"
+        ]}
+      />
+    </PageLayout>
+  );
+}

app/health/rare-disorders/exomemito/components/ExomeMitoTitle.jsx

@@ -0,0 +1,47 @@
+import React from 'react';
+
+const ExomeMitoTitle = () => {
+  return (
+    <section 
+      className="relative bg-cover bg-center py-6 h-24" 
+      style={{ backgroundImage: "url('/images/bredcrumb.jpg')" }}
+    >
+      {/* Breadcrumb */}
+      <div className="relative z-10 mb-1 -mt-3">
+        <div className="container mx-auto max-w-none px-4">
+          <nav className="flex items-center space-x-2 text-sm">
+            <a href="/" className="text-white hover:text-yellow-400 underline">Home</a>
+            <span className="text-white">
+              <svg className="w-3 h-3" fill="currentColor" viewBox="0 0 20 20">
+                <path fillRule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clipRule="evenodd" />
+              </svg>
+            </span>
+            <a href="/health" className="text-white hover:text-yellow-400 underline">Health</a>
+             <span className="text-white">
+              <svg className="w-3 h-3" fill="currentColor" viewBox="0 0 20 20">
+                <path fillRule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clipRule="evenodd" />
+              </svg>
+            </span>
+            <a href="/health/rare-disorders" className="text-white hover:text-yellow-400 underline">Rare Disorder</a>
+            <span className="text-white">
+              <svg className="w-3 h-3" fill="currentColor" viewBox="0 0 20 20">
+                <path fillRule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clipRule="evenodd" />
+              </svg>
+            </span>
+            <span className="text-white">Operify ExomeMito</span>
+          </nav>
+        </div>
+      </div>
+      
+      {/* Page Title */}
+      <div className="relative z-10 text-center -mt-2">
+        <h1 className="text-4xl md:text-4xl font-bold text-white mb-2">
+          Operify ExomeMito
+        </h1>
+        <div className="w-16 h-1 bg-yellow-400 mx-auto"></div>
+      </div>
+    </section>
+  );
+};
+
+export default ExomeMitoTitle;

app/health/rare-disorders/exomemito/components/OperifyExomeMito.jsx

@@ -23,7 +23,7 @@ export default function OperifyExomeMito() {
   ];
 
   return (
-    <section className="mx-auto px-8">
+    <section className="mx-auto px-8 pt-10">
       <h2 className="text-3xl font-bold text-teal-700 pb-2 mb-4">Operify ExomeMito</h2>
       <h3 className="text-xl font-semibold text-gray-700 mb-4">Boost diagnostic yield with Exome + Mito Sequencing</h3>
       

app/health/rare-disorders/exomemito/page.js

@@ -0,0 +1,25 @@
+import ExomeMitoTitle from './components/ExomeMitoTitle';
+import OperifyExomeMito from './components/OperifyExomeMito';
+import SampleRequirements from '../exome/components/SampleRequirements';
+
+import PageLayout from '../../../components/Layout/PageLayout';
+
+export default function ExomeMitoPage() {
+  return (
+    <PageLayout fixedHeader={true}>
+      {/* Page Title */}
+      <ExomeMitoTitle />
+
+      {/* Operify ExomeMito */}
+      <OperifyExomeMito />
+      <SampleRequirements
+        title="Operify ExomeMito"
+        items={[
+          "2-5 mL peripheral blood in EDTA tube",
+          "High-quality extracted DNA (minimum 2 µg)",
+          "Fresh or frozen tissue for certain cases"
+        ]}
+      />
+    </PageLayout>
+  );
+}

app/health/rare-disorders/page.js

@@ -3,9 +3,6 @@ import RareIntro from './components/RareIntro';
 import ClinicalAreasGrid from './components/ClinicalAreasGrid';
 import SolutionsOffer from './components/SolutionsOffer';
 import WESInfo from './components/WESInfo';
-import OperifyExome from './components/OperifyExome';
-import OperifyExomeMito from './components/OperifyExomeMito';
-import SampleRequirements from './components/SampleRequirements';
 
 import PageLayout from '../../components/Layout/PageLayout';
 
@@ -26,27 +23,6 @@ export default function RareDisorderPage() {
       {/* Clinical Areas Grid */}
       <ClinicalAreasGrid />
 
-      {/* Operify Exome */}
-      <OperifyExome />
-      <SampleRequirements
-        title="Operify Exome"
-        items={[
-          "2-5 mL peripheral blood in EDTA tube",
-          "High-quality extracted DNA (minimum 2 µg)",
-          "Fresh or frozen tissue for certain cases"
-        ]}
-      />
-
-      {/* Operify ExomeMito */}
-      <OperifyExomeMito />
-      <SampleRequirements
-        title="Operify ExomeMito"
-        items={[
-          "2-5 mL peripheral blood in EDTA tube",
-          "High-quality extracted DNA (minimum 2 µg)",
-          "Fresh or frozen tissue for certain cases"
-        ]}
-      />
     </PageLayout>
   );
 }