From fa2de88fea44695885ded6b2404767e8a1359187 Mon Sep 17 00:00:00 2001
From: Copilot <198982749+Copilot@users.noreply.github.com>
Date: Wed, 20 Aug 2025 14:37:10 +0800
Subject: [PATCH] Center login form and simplify layout with main slogan only
 (#283)

Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>
Co-authored-by: samanhappy <2755122+samanhappy@users.noreply.github.com>
Co-authored-by: samanhappy <samanhappy@gmail.com>
---
 frontend/src/pages/LoginPage.tsx | 36 ++++++++++----------------------
 1 file changed, 11 insertions(+), 25 deletions(-)

diff --git a/frontend/src/pages/LoginPage.tsx b/frontend/src/pages/LoginPage.tsx
index 9adcbd6..dc6d04b 100644
--- a/frontend/src/pages/LoginPage.tsx
+++ b/frontend/src/pages/LoginPage.tsx
@@ -68,33 +68,19 @@ const LoginPage: React.FC = () => {
       </div>
 
       {/* Main content */}
-      <div className="relative mx-auto grid min-h-screen w-full max-w-7xl grid-cols-1 items-center px-10 py-16 md:grid-cols-3">
-        {/* Left: brand + slogan */}
-        <div className="order-2 space-y-6 md:order-1 md:col-span-2 pr-6">
-          <div className="inline-flex items-center gap-2 rounded-full border border-indigo-500/20 bg-indigo-500/10 px-3 py-1 text-xs font-medium text-indigo-700 shadow-sm backdrop-blur dark:text-indigo-300">
-            <span className="h-2 w-2 animate-pulse rounded-full bg-indigo-500" />
-            {t('app.name')}
+      <div className="relative mx-auto flex min-h-screen w-full max-w-md items-center justify-center px-6 py-16">
+        <div className="w-full space-y-8">
+          {/* Centered slogan */}
+          <div className="flex justify-center w-full">
+            <h1 className="text-2xl font-extrabold leading-tight tracking-tight text-gray-900 dark:text-white sm:text-3xl whitespace-nowrap">
+              <span className="bg-gradient-to-r from-indigo-400 via-cyan-400 to-emerald-400 bg-clip-text text-transparent">
+                {t('auth.slogan')}
+              </span>
+            </h1>
           </div>
-          <h1 className="whitespace-nowrap text-4xl font-extrabold leading-tight tracking-tight text-gray-900 dark:text-white sm:text-5xl">
-            <span className="bg-gradient-to-r from-indigo-400 via-cyan-400 to-emerald-400 bg-clip-text text-transparent">
-              {t('auth.slogan')}
-            </span>
-          </h1>
-          <p className="text-base text-gray-600 dark:text-gray-300">
-            {t('auth.subtitle')}
-          </p>
 
-          <div className="flex flex-wrap gap-3 pt-2 text-xs text-gray-500 dark:text-gray-400">
-            <span className="rounded-md border border-white/10 bg-white/5 px-2 py-1 backdrop-blur">MCP</span>
-            <span className="rounded-md border border-white/10 bg-white/5 px-2 py-1 backdrop-blur">Group</span>
-            <span className="rounded-md border border-white/10 bg-white/5 px-2 py-1 backdrop-blur">Market</span>
-            <span className="rounded-md border border-white/10 bg-white/5 px-2 py-1 backdrop-blur">Logging</span>
-          </div>
-        </div>
-
-        {/* Right: login card */}
-        <div className="order-1 md:order-2 md:col-span-1">
-          <div className="login-card relative w-full max-w-md rounded-2xl border border-white/10 bg-white/60 p-8 shadow-xl backdrop-blur-md transition dark:border-white/10 dark:bg-gray-900/60">
+          {/* Centered login card */}
+          <div className="login-card relative w-full rounded-2xl border border-white/10 bg-white/60 p-8 shadow-xl backdrop-blur-md transition dark:border-white/10 dark:bg-gray-900/60">
             <div className="absolute -top-24 right-12 h-40 w-40 -translate-y-6 rounded-full bg-indigo-500/30 blur-3xl" />
             <div className="absolute -bottom-24 -left-12 h-40 w-40 translate-y-6 rounded-full bg-cyan-500/20 blur-3xl" />
             <h2 className="text-center text-2xl font-bold text-gray-900 dark:text-white">