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,6 +1,27 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import "tailwindcss";
+
+@theme {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+}
+
+/*
+  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);
+  }
+}
 
 body {
   color: var(--foreground);
@@ -52,3 +73,7 @@ body {
 .transition-shadow {
   transition: box-shadow 0.3s ease-in-out;
 }
+
+.container {
+  max-width: 1200px;
+}

app/layout.tsx

@@ -12,7 +12,7 @@ export default function RootLayout({
 }>) {
   return (
     <html lang="zh-cn" className="dark">
-      <body className="antialiased min-h-screen flex flex-col bg-gray-100 dark:bg-gray-900 transition-colors ">{children}</body>
+      <body className="antialiased min-h-screen flex flex-col">{children}</body>
     </html>
   );
 }

app/page.tsx

@@ -7,7 +7,7 @@ export default function Home() {
   return (
     <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">
+      <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">
@@ -17,9 +17,9 @@ export default function Home() {
         <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" className="flex justify-center">
-              <div className="flex items-center bg-gray-50 dark:bg-gray-800 p-3 rounded-xl shadow 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 flex-shrink-0" />
-                <div className="list-info flex-shrink pl-3 pt-2 my-1 truncate w-full">
+              <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>