Add X button in menu system

src/components/layout/Header.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { useState, useEffect } from 'react';
+import { useState } from 'react';
 import Image from 'next/image';
 import Link from 'next/link';
 import { Menu, X } from 'lucide-react';
@@ -103,6 +103,19 @@ export default function Header() {
               transition={{ type: 'tween', duration: 0.3 }}
             >
               <div className="fixed inset-y-0 w-full bg-white pt-24">
+                <MotionDiv
+                  className="absolute top-6 right-6"
+                  whileHover={{ scale: 1.1 }}
+                  whileTap={{ scale: 0.95 }}
+                >
+                  <button
+                    onClick={() => setMobileMenuOpen(false)}
+                    className="p-2 text-gray-600 hover:text-gray-900"
+                  >
+                    <span className="sr-only">Close menu</span>
+                    <X className="h-6 w-6" aria-hidden="true" />
+                  </button>
+                </MotionDiv>
                 <nav className="flex flex-col items-center space-y-8 bg-white pb-8">
                   {navigation.map((item) => (
                     <MotionDiv