fix: rename contacts page and update layout; enhance styling for better UX

app/contacts/page.tsx

@@ -1,13 +1,15 @@
 import Link from "next/link";
-import { contacts } from "../../data/contacts";
+import { contacts } from "@/data/contacts";
 
-export default function Contacts() {
+export default function Page() {
   return (
     <div className="min-h-screen flex flex-col bg-gray-50">
       <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="/" className="text-blue-600 hover:underline">返回主页</Link>
+          <Link href="/" className="text-blue-600 hover:underline">
+            返回主页
+          </Link>
         </nav>
       </header>
       <main className="container mx-auto p-4 flex-grow">
@@ -17,15 +19,15 @@ export default function Contacts() {
         </section>
         <section className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8">
           {contacts.map((contact, index) => (
-            <div key={index} className="bg-white shadow rounded-lg p-6 text-center">
+            <a key={index} href={`mailto:${contact.email}`}>
-              <h3 className="text-xl font-semibold text-gray-900">{contact.name}</h3>
+              <div className="bg-white shadow rounded-lg p-6 text-center hover:shadow-lg transition-shadow duration-300">
-              <p className="text-gray-600 mt-2">
+                <h3 className="text-xl font-semibold text-gray-900">{contact.name}</h3>
-                <a href={`mailto:${contact.email}`} className="text-blue-600 hover:underline">{contact.email}</a>
+                <p className="text-gray-600 mt-2">{contact.email}</p>
-              </p>
+              </div>
-            </div>
+            </a>
           ))}
         </section>
       </main>
     </div>
   );
-}
+}

app/contatcts/layout.tsx

@@ -1,34 +0,0 @@
-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: "Create Next App",
-  description: "Generated by create next app",
-};
-
-export default function RootLayout({
-  children,
-}: Readonly<{
-  children: React.ReactNode;
-}>) {
-  return (
-    <html lang="en">
-      <body
-        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
-      >
-        {children}
-      </body>
-    </html>
-  );
-}

app/globals.css

@@ -19,3 +19,48 @@ body {
   background: var(--background);
   font-family: Arial, Helvetica, sans-serif;
 }
+
+.url-wrapper {
+  background: var(--main);
+  max-height: 80px;
+  width: 100%;
+}
+
+.url-item {
+  display: flex;
+  border-radius: 1.125rem;
+}
+
+.url-avatar {
+  width: 80px;
+  height: 80px;
+  background-size: cover;
+  border-radius: 0; /* rounded-none */
+  overflow: hidden;
+  flex-shrink: 0;
+}
+
+.url-info {
+  flex-shrink: 1;
+  padding-left: 0.75rem; /* pl-3 */
+  padding-top: 0.5rem; /* pt-2 */
+  margin-top: 0.25rem; /* my-1 */
+  margin-bottom: 0.25rem; /* my-1 */
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.url-name {
+  font-size: 1.25rem; /* text-xl */
+  font-weight: 700; /* font-bold */
+  margin-top: 0.25rem; /* my-1 */
+  margin-bottom: 0.25rem; /* my-1 */
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.transition-shadow {
+  transition: box-shadow 0.3s ease-in-out;
+}

app/layout.tsx

@@ -13,8 +13,7 @@ const geistMono = Geist_Mono({
 });
 
 export const metadata: Metadata = {
-  title: "Create Next App",
+  title: "智能计算实验室",
-  description: "Generated by create next app",
 };
 
 export default function RootLayout({
@@ -24,11 +23,7 @@ export default function RootLayout({
 }>) {
   return (
     <html lang="en">
-      <body
+      <body className={`${geistSans.variable} ${geistMono.variable} antialiased`}>{children}</body>
-        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
-      >
-        {children}
-      </body>
     </html>
   );
 }

app/page.tsx

@@ -5,23 +5,24 @@ import Footer from "@/components/footer";
 
 export default function Home() {
   return (
-    <div className="min-h-screen flex flex-col bg-gray-50">
+    <div className="min-h-screen flex flex-col bg-gray-100">
       <Header />
       <main className="container mx-auto p-4 flex-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">
+        <section className="url-wrapper grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8">
           {websites.map((website, index) => (
-            <div key={index} className="bg-white shadow rounded-lg p-6 text-center">
+            <a key={index} href={website.link}>
-              <Image src={website.icon} alt={`${website.title}图标`} width={64} height={64} className="mx-auto mb-4" />
+              <div  className="url-item flex bg-gray-50 p-3 shadow hover:shadow-lg transition-shadow duration-300">
-              <h3 className="text-xl font-semibold text-gray-900">{website.title}</h3>
+                <Image src={website.icon} alt={website.title} width={80} height={80} className="url-avatar rounded-lg overflow-hidden flex-shrink-0" />
-              <p className="text-gray-600 mt-2">{website.description}</p>
+                <div className="url-info flex-shrink pl-3 pt-2 my-1 truncate">
-              <a href={website.link} className="text-blue-600 hover:underline mt-4 block">
+                  <h3 className="url-name text-xl font-bold my-1 truncate">{website.title}</h3>
-                访问{website.title}
+                  <div className="text-sm text-gray-500 truncate">{website.description}</div>
-              </a>
+                </div>
-            </div>
+              </div>
+            </a>
           ))}
         </section>
       </main>

app/styles.css

@@ -0,0 +1,3 @@
+.transition-shadow {
+  transition: box-shadow 0.3s ease-in-out;
+}

data/urls.tsx

@@ -1,19 +1,19 @@
 // data/websites.ts
 export const websites = [
   {
-    icon: "/path/to/icon1.png",
+    icon: "./globe.svg",
     title: "实验室网站1",
     description: "网站1的简介。",
     link: "https://website1.example.com",
   },
   {
-    icon: "/path/to/icon2.png",
+    icon: "./globe.svg",
     title: "实验室网站2",
     description: "网站2的简介。",
     link: "https://website2.example.com",
   },
   {
-    icon: "/path/to/icon3.png",
+    icon: "./globe.svg",
     title: "实验室网站3",
     description: "网站3的简介。",
     link: "https://website3.example.com",