Further Updates

app/components/Layout/Header.jsx

@@ -12,7 +12,7 @@ const Header = () => {
     if (event) {
       event.stopPropagation();
     }
-    
+
     setOpenDropdown(current => {
       if (current.includes(dropdownName)) {
         // Remove this dropdown and any child dropdowns
@@ -379,13 +379,34 @@ const Header = () => {
                   Health
                 </Link>
                 <ul className="absolute top-full left-0 bg-white shadow-lg rounded-md py-2 w-64 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-300 z-50 border border-gray-100">
-                  <li>
+                  <li className="relative group/rare">
                     <Link
                       href="/health/rare-disorders"
-                      className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-teal-600"
+                      className="flex items-center justify-between px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-teal-600"
                     >
                       Rare Disorders
+                      <svg className="w-3 h-3 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
+                      </svg>
                     </Link>
+                    <ul className="absolute top-0 left-full bg-white shadow-xl rounded-md py-2 w-48 opacity-0 invisible group-hover/rare:opacity-100 group-hover/rare:visible transition-all duration-300 z-50 border border-gray-100 ml-1">
+                      <li>
+                        <Link
+                          href="/health/rare-disorders/exome"
+                          className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-teal-600"
+                        >
+                          Exome
+                        </Link>
+                      </li>
+                      <li>
+                        <Link
+                          href="/health/rare-disorders/exomemito"
+                          className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-teal-600"
+                        >
+                          ExomeMito
+                        </Link>
+                      </li>
+                    </ul>
                   </li>
                   <li>
                     <Link
@@ -496,7 +517,7 @@ const Header = () => {
               <span className="hidden md:inline">Get In Touch</span>
               <span className="md:hidden">Contact</span>
               <svg className="w-3 h-3 sm:w-4 sm:h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
-                <path d="M5 12h14M12 5l7 7-7 7"/>
+                <path d="M5 12h14M12 5l7 7-7 7" />
               </svg>
             </Link>
             {/* Mobile menu button */}
@@ -544,9 +565,8 @@ const Header = () => {
                   >
                     <span>Research</span>
                     <svg
-                      className={`w-4 h-4 transition-transform duration-200 ${
-                        openDropdown.includes('research') ? 'rotate-180' : ''
-                      }`}
+                      className={`w-4 h-4 transition-transform duration-200 ${openDropdown.includes('research') ? 'rotate-180' : ''
+                        }`}
                       fill="none"
                       stroke="currentColor"
                       viewBox="0 0 24 24"
@@ -568,9 +588,8 @@ const Header = () => {
                         >
                           <span>DNA Sequencing</span>
                           <svg
-                            className={`w-3 h-3 transition-transform duration-200 ${
-                              openDropdown.includes('dna') ? 'rotate-180' : ''
-                            }`}
+                            className={`w-3 h-3 transition-transform duration-200 ${openDropdown.includes('dna') ? 'rotate-180' : ''
+                              }`}
                             fill="none"
                             stroke="currentColor"
                             viewBox="0 0 24 24"
@@ -680,9 +699,8 @@ const Header = () => {
                         >
                           <span>RNA Sequencing</span>
                           <svg
-                            className={`w-3 h-3 transition-transform duration-200 ${
-                              openDropdown.includes('rna') ? 'rotate-180' : ''
-                            }`}
+                            className={`w-3 h-3 transition-transform duration-200 ${openDropdown.includes('rna') ? 'rotate-180' : ''
+                              }`}
                             fill="none"
                             stroke="currentColor"
                             viewBox="0 0 24 24"
@@ -801,9 +819,8 @@ const Header = () => {
                   >
                     <span>Knowledge Hub</span>
                     <svg
-                      className={`w-4 h-4 transition-transform duration-200 ${
-                        openDropdown.includes('knowledge') ? 'rotate-180' : ''
-                      }`}
+                      className={`w-4 h-4 transition-transform duration-200 ${openDropdown.includes('knowledge') ? 'rotate-180' : ''
+                        }`}
                       fill="none"
                       stroke="currentColor"
                       viewBox="0 0 24 24"
@@ -858,9 +875,8 @@ const Header = () => {
                   >
                     <span>About Us</span>
                     <svg
-                      className={`w-4 h-4 transition-transform duration-200 ${
-                        openDropdown.includes('about') ? 'rotate-180' : ''
-                      }`}
+                      className={`w-4 h-4 transition-transform duration-200 ${openDropdown.includes('about') ? 'rotate-180' : ''
+                        }`}
                       fill="none"
                       stroke="currentColor"
                       viewBox="0 0 24 24"
@@ -916,7 +932,7 @@ const Header = () => {
                   >
                     <span>Get In Touch</span>
                     <svg className="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
-                      <path d="M5 12h14M12 5l7 7-7 7"/>
+                      <path d="M5 12h14M12 5l7 7-7 7" />
                     </svg>
                   </Link>
                 </li>

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

@@ -14,7 +14,7 @@ const WGSSpecifications = () => {
           </div>
           <div className="mt-4 text-sm">
             <strong>
-              PLEASE refer to{' '}
+              Please refer to{' '}
               <Link 
                 href="/sample-submission-guideline" 
                 className="text-teal-600 underline hover:text-teal-700"

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

@@ -13,7 +13,6 @@ export default function ClinicalAreasGrid() {
     { name: "Metabolic Disorders", icon: "/images/icons/metabolic.png" },
     { name: "Nephrology", icon: "/images/icons/nephrology.png" },
     { name: "Neurology", icon: "/images/icons/neurology.png" },
-    { name: "Oncology", icon: "/images/icons/oncology.png" },
     { name: "Ophthalmology", icon: "/images/icons/ophthalmology.png" },
     { name: "Osteology", icon: "/images/icons/osteology.png" },
     { name: "Pneumology", icon: "/images/icons/pneumology.png" },

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

@@ -15,7 +15,7 @@ export default function SampleRequirements({ title, items }) {
   ];
 
   return (
-    <section className="mx-auto px-8 pt-8 pb-12">
+    <section className="mx-auto px-8 pt-8">
       <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-none mx-auto">

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

@@ -1,7 +1,7 @@
 import ExomeTitle from './components/ExomeTitle';
 import OperifyExome from './components/OperifyExome';
 import SampleRequirements from './components/SampleRequirements';
-
+import ClinicalAreasGrid from '../components/ClinicalAreasGrid';
 import PageLayout from '../../../components/Layout/PageLayout';
 
 export default function ExomePage() {
@@ -20,6 +20,7 @@ export default function ExomePage() {
           "Fresh or frozen tissue for certain cases"
         ]}
       />
+      <ClinicalAreasGrid/>
     </PageLayout>
   );
 }

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

@@ -1,7 +1,7 @@
 import ExomeMitoTitle from './components/ExomeMitoTitle';
 import OperifyExomeMito from './components/OperifyExomeMito';
 import SampleRequirements from '../exome/components/SampleRequirements';
-
+import ClinicalAreasGrid from '../components/ClinicalAreasGrid';
 import PageLayout from '../../../components/Layout/PageLayout';
 
 export default function ExomeMitoPage() {
@@ -20,6 +20,7 @@ export default function ExomeMitoPage() {
           "Fresh or frozen tissue for certain cases"
         ]}
       />
+      <ClinicalAreasGrid/>
     </PageLayout>
   );
 }