feat: update the contact page, add a modal box to display detailed information; refactor the header and footer components

components/header.tsx

@@ -2,11 +2,22 @@ import Link from "next/link";
 
 export default function Header() {
   return (
-    <header className="w-full bg-white shadow p-4 flex justify-between items-center">
-      <h1 className="text-2xl font-bold text-gray-900">智能计算实验室</h1>
-      <nav>
-        <Link href="/contacts" className="text-blue-600 hover:underline">联系人</Link>
+    <header className="home-header w-full bg-white shadow flex">
+      <nav className="container mx-auto flex justify-between items-center">
+        <div className="flex items-center">
+          <Link href="/" className="hover:shadow">
+            <h1 className="text-2xl font-bold text-gray-900">智能计算实验室</h1>
+          </Link>
+        </div>
+        <div className="flex space-x-4">
+          <Link className="nav-link py-3 px-2" href="/">
+            首页
+          </Link>
+          <Link className="nav-link py-3 px-2" href="/contacts">
+            联系
+          </Link>
+        </div>
       </nav>
     </header>
   );
-}
+}