feat: update the contact page and laboratory introduction, optimize the style and structure

app/contacts/page.tsx

@@ -28,12 +28,12 @@ export default function Page() {
       <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>
+          <h2 className="text-4xl font-extrabold text-gray-900">联系</h2>
-          <p className="text-xl text-gray-600 mt-4">以下是我们的联系人的信息，您可以点击卡片查看全部联系方式。</p>
+          <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-white shadow rounded-lg p-6 text-center hover:shadow-lg transition-shadow duration-300 cursor-pointer">
+            <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">
               <h3 className="text-xl font-semibold text-gray-900">{contact.name}</h3>
               <p className="text-gray-600">{contact.describe}</p>
             </div>
@@ -41,17 +41,12 @@ export default function Page() {
         </section>
       </main>
       <Footer />
-      <div
+      <div className={`fixed inset-0 flex items-center justify-center bg-black bg-opacity-50 transition-opacity duration-300 ${modalContent ? "opacity-100" : "opacity-0 pointer-events-none"}`} onClick={closeModal}>
-        className={`fixed inset-0 flex items-center justify-center bg-black bg-opacity-50 transition-opacity duration-300 ${modalContent ? "opacity-100" : "opacity-0 pointer-events-none"}`}
-        onClick={closeModal}
-      >
         {modalContent && (
-          <div
+          <div className={`bg-white p-6 rounded-lg shadow-lg transform transition-transform duration-300 ${modalContent ? "scale-100" : "scale-90"}`} onClick={(e) => e.stopPropagation()}>
-            className={`bg-white p-6 rounded-lg shadow-lg transform transition-transform duration-300 ${modalContent ? "scale-100" : "scale-90"}`}
-            onClick={(e) => e.stopPropagation()}
-          >
             <h3 className="text-xl font-semibold text-gray-900">{modalContent.name}</h3>
-            <p className="text-gray-600">{modalContent.describe}</p>
+            <p className="text-gray-600 ">{modalContent.describe}</p>
+            <br></br>
             {modalContent.email && <p>Email: {modalContent.email}</p>}
             {modalContent.phone && <p>Phone: {modalContent.phone}</p>}
             {modalContent.qq && <p>QQ: {modalContent.qq}</p>}

app/globals.css

@@ -20,18 +20,18 @@ body {
   font-family: Arial, Helvetica, sans-serif;
 }
 
-.url-wrapper {
+.list-wrapper {
   background: var(--main);
   max-height: 80px;
   width: 100%;
 }
 
-.url-item {
+.list-item {
   display: flex;
   border-radius: 1.125rem;
 }
 
-.url-avatar {
+.list-avatar {
   width: 80px;
   height: 80px;
   background-size: cover;
@@ -40,7 +40,7 @@ body {
   flex-shrink: 0;
 }
 
-.url-info {
+.list-info {
   flex-shrink: 1;
   padding-left: 0.75rem; /* pl-3 */
   padding-top: 0.5rem; /* pt-2 */
@@ -51,7 +51,7 @@ body {
   text-overflow: ellipsis;
 }
 
-.url-name {
+.list-name {
   font-size: 1.25rem; /* text-xl */
   font-weight: 700; /* font-bold */
   margin-top: 0.25rem; /* my-1 */

app/page.tsx

@@ -9,16 +9,16 @@ export default function Home() {
       <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>
+          <h2 className="text-4xl font-extrabold text-gray-900">智能计算实验室简介</h2>
-          <p className="text-xl text-gray-600 mt-4">这里是实验室的基本信息简介，简洁明了地介绍实验室。</p>
+          <p className="text-xl text-gray-600 mt-4">这里是实验室的基本信息简介，阿巴阿巴阿巴。</p>
         </section>
-        <section className="url-wrapper grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8">
+        <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}>
+            <a key={index} href={website.link} rel="noopener noreferrer" target="_blank">
-              <div className="url-item flex bg-gray-50 p-3 shadow hover:shadow-lg transition-shadow duration-300">
+              <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="url-avatar rounded-lg overflow-hidden flex-shrink-0" />
+                <Image src={website.icon} alt={website.title} width={80} height={80} className="list-icon rounded-lg overflow-hidden flex-shrink-0" />
-                <div className="url-info flex-shrink pl-3 pt-2 my-1 truncate">
+                <div className="list-info flex-shrink pl-3 pt-2 my-1 truncate">
-                  <h3 className="url-name text-xl font-bold my-1 truncate">{website.title}</h3>
+                  <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>
                 </div>
               </div>

components/footer.tsx

@@ -3,11 +3,9 @@ import Script from "next/script";
 export default function Footer() {
   return (
     <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}">
+      <div>© {new Date().getFullYear()} 智能计算实验室 · Designed by LufsX.</div>
-        [HKG]中国香港
+      <div className="cloudflare-trace-info" data-template="[${colo}]${iata}"></div>
-      </div>
     </footer>
   );
 }

components/header.tsx

@@ -5,7 +5,7 @@ export default function Header() {
     <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">
+          <Link href="/">
             <h1 className="text-2xl font-bold text-gray-900">智能计算实验室</h1>
           </Link>
         </div>

data/urls.tsx

@@ -1,4 +1,3 @@
-// data/websites.ts
 export const websites = [
   {
     icon: "./gitea.svg",
@@ -18,5 +17,4 @@ export const websites = [
     description: "机器学习课程配套挑战赛排行榜。",
     link: "https://rank.intcplab.cn",
   },
-  // 添加更多网站数据
 ];