Accident Nav Changed into 2 row

components/layout/Menu.js

@@ -79,7 +79,7 @@ export default function Menu() {
                 </li> */}
 
                 <li className="dropdown menu-item-has-children"><Link href="/area-of-injury">Area of Injury</Link>
-                    <ul>
+                    {/* <ul>
                         {areaOfInjuryData.map(item => (
                             <li key={item.id}>
                                 <Link href={`/area-of-injury/${item.slug}`}>
@@ -87,6 +87,17 @@ export default function Menu() {
                                 </Link>
                             </li>
                         ))}
+                    </ul> */}
+                      <ul className="absolute left-0 hidden group-hover:grid p-4
+                 grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4"
+                        style={{ columnCount: 2, width: "50%", left: "450px" }}>
+                        {areaOfInjuryData.map((item) => (
+                            <li key={item.id} className="break-inside-avoid">
+                                <Link href={`/area-of-injury/${item.slug}`}>
+                                    {item.title}
+                                </Link>
+                            </li>
+                        ))}
                     </ul>
                 </li>
 

utils/Accident.utils.js

@@ -162,6 +162,7 @@ const Accident = [
     mainImage: "/assets/images/accident/slip.webp",
     icon: "/assets/images/accident/icons/slip.webp",
     bannerImage: "/assets/images/accident/slip/slip-fall-banner.webp",
+    metaTitle: "Slip and Fall Injury Rehabilitation in Etobicoke | Rapharehab",
     metaDescription: "Specialized slip and fall injury rehabilitation in Etobicoke at Rapharehab. Recover quickly with expert physiotherapy and personalized care.",
     content: `  
       <div class="content-one mb_30">