chore: update TailwindCSS and opt max-w

app/contacts/page.tsx

@@ -26,14 +26,14 @@ export default function Page() {
   return (
     <div className="min-h-screen flex flex-col bg-gray-100">
       <Header />
-      <main className="container mx-auto p-4 flex-grow">
+      <main className="container mx-auto p-4 grow">
         <section className="text-center mb-12">
           <h2 className="text-4xl font-extrabold text-gray-900">联系</h2>
           <p className="text-xl text-gray-600 mt-4">以下是主要负责人的联系信息，可以点击卡片查看全部联系方式。</p>
         </section>
         <section className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8">
           {contacts.map((contact, index) => (
-            <div key={index} onClick={() => handleModal(contact)} className="bg-gray-50 shadow rounded-2xl p-6 text-center hover:shadow-lg transition-shadow duration-300 cursor-pointer">
+            <div key={index} onClick={() => handleModal(contact)} className="bg-gray-50 shadow-sm rounded-2xl p-6 text-center hover:shadow-lg transition-shadow duration-300 cursor-pointer">
               <h3 className="text-xl font-semibold text-gray-900">{contact.name}</h3>
               <p className="text-gray-600">{contact.describe}</p>
             </div>

app/globals.css

@@ -1,16 +1,25 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import "tailwindcss";
 
-:root {
-  --background: #ffffff;
-  --foreground: #171717;
+@theme {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
 }
 
-@media (prefers-color-scheme: dark) {
-  :root {
-    --background: #0a0a0a;
-    --foreground: #ededed;
+/*
+  The default border color has changed to `currentcolor` in Tailwind CSS v4,
+  so we've added these compatibility styles to make sure everything still
+  looks the same as it did with Tailwind CSS v3.
+
+  If we ever want to remove these styles, we need to add an explicit border
+  color utility to any element that depends on these defaults.
+*/
+@layer base {
+  *,
+  ::after,
+  ::before,
+  ::backdrop,
+  ::file-selector-button {
+    border-color: var(--color-gray-200, currentcolor);
   }
 }
 
@@ -64,3 +73,7 @@ body {
 .transition-shadow {
   transition: box-shadow 0.3s ease-in-out;
 }
+
+.container {
+  max-width: 1200px;
+}

app/layout.tsx

@@ -1,17 +1,6 @@
 import type { Metadata } from "next";
-import { Geist, Geist_Mono } from "next/font/google";
 import "./globals.css";
 
-const geistSans = Geist({
-  variable: "--font-geist-sans",
-  subsets: ["latin"],
-});
-
-const geistMono = Geist_Mono({
-  variable: "--font-geist-mono",
-  subsets: ["latin"],
-});
-
 export const metadata: Metadata = {
   title: "智能计算实验室",
 };
@@ -22,8 +11,8 @@ export default function RootLayout({
   children: React.ReactNode;
 }>) {
   return (
-    <html lang="en">
-      <body className={`${geistSans.variable} ${geistMono.variable} antialiased`}>{children}</body>
+    <html lang="zh-cn" className="dark">
+      <body className="antialiased min-h-screen flex flex-col">{children}</body>
     </html>
   );
 }

app/page.tsx

@@ -5,21 +5,23 @@ import Footer from "@/components/footer";
 
 export default function Home() {
   return (
-    <div className="min-h-screen flex flex-col bg-gray-100">
+    <div className="min-h-screen flex flex-col bg-gray-100 dark:bg-gray-900 transition-colors duration-300">
       <Header />
-      <main className="container mx-auto p-4 flex-grow">
-        <section className="text-center mb-12 max-md: max-w-2xl mx-auto">
-          <h2 className="text-4xl font-extrabold text-gray-900">智能计算实验室简介</h2>
-          <p className="text-xl text-gray-600 mt-4 text-left">　　在物理的世界里，粒子有形形色色的活法，有的粒子很轻，终生不为人所注意；有的粒子会一鸣惊人，在湮灭时释放出大量的光；有的粒子狡黠善变，一辈子不停地改变身份，时时刻刻要成为别的粒子；但有的粒子一生稳定，怀揣着出发时得到的巨大能量，一生孤独而平静地飞行，只活在自己的轨道里。</p>
+      <main className="container mx-auto p-4 grow">
+        <section className="text-center mb-12 max-w-2xl mt-8 mx-auto max-md:mt-4">
+          <h2 className="text-4xl font-extrabold text-gray-900 dark:text-gray-100">智能计算实验室简介</h2>
+          <p className="text-xl text-gray-600 dark:text-gray-300 mt-4 text-left indent-8">
+            在物理的世界里，粒子有形形色色的活法，有的粒子很轻，终生不为人所注意；有的粒子会一鸣惊人，在湮灭时释放出大量的光；有的粒子狡黠善变，一辈子不停地改变身份，时时刻刻要成为别的粒子；但有的粒子一生稳定，怀揣着出发时得到的巨大能量，一生孤独而平静地飞行，只活在自己的轨道里。
+          </p>
         </section>
         <section className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8">
           {websites.map((website, index) => (
-            <a key={index} href={website.link} rel="noopener noreferrer" target="_blank">
-              <div className="list-item bg-gray-50 p-3 shadow hover:shadow-lg transition-shadow duration-300">
-                <Image src={website.icon} alt={website.title} width={80} height={80} className="list-icon rounded-lg overflow-hidden flex-shrink-0" />
-                <div className="list-info flex-shrink pl-3 pt-2 my-1 truncate">
-                  <h3 className="list-name text-xl font-bold my-1 truncate">{website.title}</h3>
-                  <div className="text-sm text-gray-500 truncate">{website.description}</div>
+            <a key={index} href={website.link} rel="noopener noreferrer" target="_blank" className="flex justify-center">
+              <div className="flex items-center bg-gray-50 dark:bg-gray-800 p-3 rounded-xl shadow-sm hover:shadow-xl transition-all duration-300 w-full max-w-md">
+                <Image src={website.icon} alt={website.title} width={80} height={80} className="list-icon rounded-lg overflow-hidden shrink-0" />
+                <div className="list-info shrink pl-3 pt-2 my-1 truncate w-full">
+                  <h3 className="list-name text-xl font-bold my-1 truncate text-gray-900 dark:text-gray-100">{website.title}</h3>
+                  <div className="text-sm text-gray-500 dark:text-gray-400 truncate">{website.description}</div>
                 </div>
               </div>
             </a>

components/footer.tsx

@@ -1,8 +1,16 @@
+import Link from "next/link";
+
 export default function Footer() {
   return (
-    <footer className="w-full bg-white shadow p-4 text-left text-gray-500 flex flex-row gap-2">
+    <footer className="w-full bg-white dark:bg-gray-950 shadow-sm p-4 text-left text-gray-500 dark:text-gray-400 flex flex-row gap-2">
       <div className="container mx-auto">
-        <div>© {new Date().getFullYear()} 智能计算实验室 · Designed by LufsX.</div>
+        <div>
+          © {new Date().getFullYear()} 智能计算实验室 · Designed by{" "}
+          <Link href="https://isteed.cc" target="_blank" rel="noopener noreferrer">
+            LufsX
+          </Link>
+          .
+        </div>
       </div>
     </footer>
   );

components/header.tsx

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

data/urls.tsx

@@ -23,4 +23,22 @@ export const websites = [
     description: "机器学习课程配套挑战赛排行榜。",
     link: "https://rank.intcplab.cn",
   },
+  {
+    icon: "./img/cloudflare.svg",
+    title: "Dashflare",
+    description: "域名控制面板。",
+    link: "https://dashflare.intcplab.cn",
+  },
+  {
+    icon: "https://1panel.cn/img/favicon.png",
+    title: "1Panel",
+    description: "Linux 服务器运维管理面板。",
+    link: "https://1p.intcplab.cn",
+  },
+  {
+    icon: "./img/terminal.svg",
+    title: "WEB SSH",
+    description: "服务器备用 WEB SSH 客户端。",
+    link: "https://webssh.intcplab.cn",
+  },
 ];

next.config.ts

@@ -4,6 +4,7 @@ const nextConfig: NextConfig = {
   /* config options here */
   output: "export",
   distDir: "out",
+  images: { unoptimized: true },
 };
 
 export default nextConfig;

package.json

@@ -9,19 +9,25 @@
     "lint": "next lint"
   },
   "dependencies": {
-    "react": "19.0.0",
-    "react-dom": "19.0.0",
-    "next": "15.1.0"
+    "next": "15.3.0",
+    "react": "19.1.0",
+    "react-dom": "19.1.0"
   },
   "devDependencies": {
-    "typescript": "5.7.2",
-    "@types/node": "22.10.2",
-    "@types/react": "19.0.1",
-    "@types/react-dom": "19.0.2",
-    "postcss": "8.4.49",
-    "tailwindcss": "3.4.16",
-    "eslint": "9.17.0",
-    "eslint-config-next": "15.1.0",
-    "@eslint/eslintrc": "3.2.0"
+    "@eslint/eslintrc": "3.3.1",
+    "@tailwindcss/postcss": "^4.1.4",
+    "@types/node": "22.14.1",
+    "@types/react": "19.1.2",
+    "@types/react-dom": "19.1.2",
+    "eslint": "9.24.0",
+    "eslint-config-next": "15.3.0",
+    "postcss": "8.5.3",
+    "tailwindcss": "4.1.4",
+    "typescript": "5.8.3"
+  },
+  "pnpm": {
+    "ignoredBuiltDependencies": [
+      "sharp"
+    ]
   }
 }

postcss.config.mjs

@@ -1,7 +1,7 @@
 /** @type {import('postcss-load-config').Config} */
 const config = {
   plugins: {
-    tailwindcss: {},
+    '@tailwindcss/postcss': {},
   },
 };
 

public/img/cloudflare.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="#FD7E14" stroke="currentColor" stroke-width="0" viewBox="0 0 24 24">
+    <path stroke="none"
+        d="M16.5 16.84c.16-.5.1-.97-.15-1.31-.22-.32-.6-.5-1.06-.52l-8.66-.11a.16.16 0 0 1-.13-.07.2.2 0 0 1-.02-.16.24.24 0 0 1 .2-.16l8.74-.1a3.13 3.13 0 0 0 2.55-1.92l.5-1.3a.27.27 0 0 0 .02-.17 5.68 5.68 0 0 0-10.94-.59 2.56 2.56 0 0 0-4.02 2.68 3.63 3.63 0 0 0-3.5 4.17c.02.08.09.15.17.15H16.2c.09 0 .17-.07.2-.16l.12-.43zm2.77-5.56-.24.01c-.06 0-.1.04-.13.1l-.34 1.17c-.14.51-.09.98.16 1.32.22.32.6.5 1.06.52l1.84.11c.06 0 .1.03.14.07.02.05.03.11.02.16a.24.24 0 0 1-.2.16l-1.93.1a3.12 3.12 0 0 0-2.55 1.92l-.14.36c-.03.07.02.14.1.14h6.6c.07 0 .14-.05.16-.12a4.74 4.74 0 0 0-4.56-6">
+    </path>
+</svg>

public/img/terminal.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-terminal-fill" viewBox="0 0 16 16">
+  <path d="M0 3a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3zm9.5 5.5h-3a.5.5 0 0 0 0 1h3a.5.5 0 0 0 0-1zm-6.354-.354a.5.5 0 1 0 .708.708l2-2a.5.5 0 0 0 0-.708l-2-2a.5.5 0 1 0-.708.708L4.793 6.5 3.146 8.146z"/>
+</svg>

tailwind.config.ts

@@ -1,18 +0,0 @@
-import type { Config } from "tailwindcss";
-
-export default {
-  content: [
-    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
-    "./components/**/*.{js,ts,jsx,tsx,mdx}",
-    "./app/**/*.{js,ts,jsx,tsx,mdx}",
-  ],
-  theme: {
-    extend: {
-      colors: {
-        background: "var(--background)",
-        foreground: "var(--foreground)",
-      },
-    },
-  },
-  plugins: [],
-} satisfies Config;