flowchart changes updated

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">
-      <div className="container-fluid">
-        <div className="bg-gradient-to-br from-teal-600 to-teal-700 text-white p-8 lg:p-8 flex items-center">
-          <div className="w-full">
-            <h2 className="text-3xl font-bold text-white mb-6 leading-tight">
-              Transforming Delays into Diagnoses
-            </h2>
-            <ul className="space-y-4">
-              <li className="flex items-start gap-3">
-                <div className="w-2 h-2 rounded-full mt-2 flex-shrink-0" style={{backgroundColor: '#faae31'}}></div>
-                <span className="leading-relaxed text-justify">
-                  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.
-                </span>
-              </li>
-              <li className="flex items-start gap-3">
-                <div className="w-2 h-2 rounded-full mt-2 flex-shrink-0" style={{backgroundColor: '#faae31'}}></div>
-                <span className="leading-relaxed text-justify">
-                  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.
-                </span>
-              </li>
-            </ul>
+    <section>
+      <div className="flex min-h-[350px]">
+        {/* Left Side - Content */}
+        <div className="w-full lg:w-3/4 bg-white">
+          <div className="h-full flex flex-col justify-center px-4 lg:px-8 py-4">
+            {/* Brand/Title */}
+            <div className="mb-4">
+              <h2 className="text-3xl font-bold text-teal-700 mb-4">
+                <span>Transforming</span>
+                <span className="ml-2">Delays into Diagnoses</span>
+              </h2>
+              <div className="w-10 h-0.5" style={{backgroundColor: '#faae31'}}></div>
+            </div>
+
+            {/* Content Slider */}
+            <div className="mb-4 max-w-3xl">
+              <div className="text-gray-600 leading-relaxed text-base mb-4 text-justify font-light transition-opacity duration-500">
+                {slides[currentSlide].content}
+              </div>
+            </div>
+
+            {/* Navigation */}
+            <div className="flex items-center justify-between">
+              <div className="flex items-center space-x-3">
+                <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>
-                <p className="text-gray-500 text-sm leading-relaxed">{sol.desc}</p>
+                <h3 className="text-lg font-semibold text-gray-900 mb-2 hover:text-teal-700 transition-colors">
+                  {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}
-                  height={40}
+                  width={36}
+                  height={36}
                   className="object-contain"
                 />
               </div>
               <div className="flex-1">
-                <h4 className="text-lg font-semibold text-gray-900 mb-2">{req.title}</h4>
-                <p className="text-gray-500 text-sm leading-relaxed">
+                <h4 className="text-lg font-semibold text-teal-700 mb-2">{req.title}</h4>
+                <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>
   );
 }