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

components/footer.tsx

@@ -1,7 +1,13 @@
+import Script from "next/script";
+
 export default function Footer() {
   return (
-    <footer className="w-full bg-white shadow p-4 text-left text-gray-500">
-      <p>© {new Date().getFullYear()} 智能计算实验室</p>
+    <footer className="container w-full bg-white shadow p-4 text-left text-gray-500 flex flex-row gap-2">
+      <div>© {new Date().getFullYear()} 智能计算实验室 </div>
+      <Script src="https://npm.onmicrosoft.cn/cloudflare-trace-info-on-web@0.0.5/cftiwo.min.js" strategy="afterInteractive" />
+      <div className="cloudflare-trace-info" data-template="[${colo}]${iata}">
+        [HKG]中国香港
+      </div>
     </footer>
   );
 }

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>
   );
-}
+}