login page

app/page.tsx

@@ -45,39 +45,65 @@ export default function HomePage() {
   ];
 
   return (
-    <div className="container mx-auto px-4">
-      <div className="max-w-4xl mx-auto">
-        <div className="text-center mb-12">
-          <h1 className="text-4xl font-bold text-gray-900 dark:text-gray-100 mb-4">
-            Welcome to ShortURL Analytics
-          </h1>
-          <p className="text-lg text-gray-600 dark:text-gray-400">
-            Get detailed insights into your link performance and visitor behavior
-          </p>
+    <div className="min-h-screen bg-gray-50 dark:bg-gray-900">
+      <header className="bg-white dark:bg-gray-800 shadow">
+        <div className="container mx-auto px-4 py-4">
+          <div className="flex items-center justify-between">
+            <h1 className="text-2xl font-bold text-gray-900 dark:text-gray-100">
+              ShortURL Analytics
+            </h1>
+            <div>
+              <Link
+                href="/login"
+                className="inline-block bg-blue-600 text-white px-4 py-2 rounded-md text-sm font-medium hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
+              >
+                登录
+              </Link>
+              <Link
+                href="/register"
+                className="ml-4 inline-block bg-gray-200 dark:bg-gray-700 text-gray-900 dark:text-gray-100 px-4 py-2 rounded-md text-sm font-medium hover:bg-gray-300 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500"
+              >
+                注册
+              </Link>
+            </div>
+          </div>
         </div>
+      </header>
 
-        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
-          {sections.map((section) => (
-            <Link
-              key={section.title}
-              href={section.href}
-              className="group block p-6 bg-white dark:bg-gray-800 rounded-lg shadow-sm hover:shadow-md transition-shadow duration-200"
-            >
-              <div className="flex items-center mb-4">
-                <div className="p-2 bg-blue-100 dark:bg-blue-900 rounded-lg mr-4">
-                  <div className="text-blue-600 dark:text-blue-300">
-                    {section.icon}
+      <div className="container mx-auto px-4 py-16">
+        <div className="max-w-4xl mx-auto">
+          <div className="text-center mb-12">
+            <h2 className="text-4xl font-bold text-gray-900 dark:text-gray-100 mb-4">
+              Welcome to ShortURL Analytics
+            </h2>
+            <p className="text-lg text-gray-600 dark:text-gray-400">
+              Get detailed insights into your link performance and visitor behavior
+            </p>
+          </div>
+
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+            {sections.map((section) => (
+              <Link
+                key={section.title}
+                href={section.href}
+                className="group block p-6 bg-white dark:bg-gray-800 rounded-lg shadow-sm hover:shadow-md transition-shadow duration-200"
+              >
+                <div className="flex items-center mb-4">
+                  <div className="p-2 bg-blue-100 dark:bg-blue-900 rounded-lg mr-4">
+                    <div className="text-blue-600 dark:text-blue-300">
+                      {section.icon}
+                    </div>
                   </div>
+                  <h2 className="text-xl font-semibold text-gray-900 dark:text-gray-100 group-hover:text-blue-600 dark:group-hover:text-blue-400 transition-colors duration-200">
+                    {section.title}
+                  </h2>
                 </div>
-                <h2 className="text-xl font-semibold text-gray-900 dark:text-gray-100 group-hover:text-blue-600 dark:group-hover:text-blue-400 transition-colors duration-200">
-                  {section.title}
-                </h2>
-              </div>
-              <p className="text-gray-600 dark:text-gray-400">
-                {section.description}
-              </p>
-            </Link>
-          ))}
+                <p className="text-gray-600 dark:text-gray-400">
+                  {section.description}
+                </p>
+              </Link>
+            ))}
+          </div>
         </div>
       </div>
     </div>