From 45b31e9319f9643c61b5d17e7a6165e06b58507b Mon Sep 17 00:00:00 2001
From: kurihada <kurihada@qq.com>
Date: Wed, 25 Feb 2026 14:37:00 +0800
Subject: [PATCH] =?UTF-8?q?ui:=20=E5=8E=8B=E7=BC=A9=E9=A6=96=E9=A1=B5?=
 =?UTF-8?q?=E5=B8=83=E5=B1=80=E9=80=82=E9=85=8D=E5=B0=8F=E5=B1=8F=E6=89=8B?=
 =?UTF-8?q?=E6=9C=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Logo 与标题改为横排显示
- 缩小图标和间距，整体高度减少
- 确保创建房间按钮在小屏上可见
---
 src/app/page.tsx | 85 +++++++++++++++++++++++++-----------------------
 1 file changed, 45 insertions(+), 40 deletions(-)

diff --git a/src/app/page.tsx b/src/app/page.tsx
index 881b1ca..095461a 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -256,13 +256,13 @@ export default function LandingPage() {
   };
 
   return (
-    <div className="relative flex min-h-dvh flex-col items-center justify-center bg-background px-6 py-12">
+    <div className="relative flex min-h-dvh flex-col items-center justify-center bg-background px-6 py-6">
       {/* Profile / Auth button */}
-      <div className="absolute right-4 top-4">
+      <div className="absolute right-4 top-3">
         {profile ? (
           <button
             onClick={() => router.push("/profile")}
-            className={`flex h-9 items-center gap-1.5 rounded-full px-3 text-sm font-medium transition-colors active:opacity-80 ${getAvatarBg(profile.avatar)}`}
+            className={`flex h-8 items-center gap-1.5 rounded-full px-3 text-sm font-medium transition-colors active:opacity-80 ${getAvatarBg(profile.avatar)}`}
           >
             <span className="text-base leading-none">{profile.avatar}</span>
             <span className="max-w-[5rem] truncate text-xs font-semibold text-zinc-700">{profile.username}</span>
@@ -270,7 +270,7 @@ export default function LandingPage() {
         ) : (
           <button
             onClick={() => setAuthModalOpen(true)}
-            className="flex h-9 items-center gap-1.5 rounded-full bg-zinc-100 px-3 text-xs font-medium text-zinc-500 transition-colors active:bg-zinc-200"
+            className="flex h-8 items-center gap-1.5 rounded-full bg-zinc-100 px-3 text-xs font-medium text-zinc-500 transition-colors active:bg-zinc-200"
           >
             <User size={14} />
             登录
@@ -279,60 +279,65 @@ export default function LandingPage() {
       </div>
 
       <motion.div
-        className="flex flex-col items-center"
+        className="flex items-center gap-3"
         initial={{ y: -20, opacity: 0 }}
         animate={{ y: 0, opacity: 1 }}
         transition={{ duration: 0.5 }}
       >
-        <BrandLogo size={56} />
-        <h1 className="mt-2.5 text-3xl font-black tracking-tight text-zinc-900">
-          NoWhatever
-        </h1>
-        <p className="mt-0.5 text-sm font-medium tracking-widest text-zinc-400">
-          别说随便
-        </p>
-        <p className="mt-3 max-w-xs text-center text-sm leading-relaxed text-zinc-500">
-          {sceneConfig.subtitle}
-        </p>
+        <BrandLogo size={44} />
+        <div>
+          <h1 className="text-2xl font-black tracking-tight text-zinc-900">
+            NoWhatever
+          </h1>
+          <p className="text-xs font-medium tracking-widest text-zinc-400">
+            别说随便
+          </p>
+        </div>
       </motion.div>
 
+      <motion.p
+        className="mt-2 max-w-xs text-center text-xs leading-relaxed text-zinc-500"
+        initial={{ opacity: 0 }}
+        animate={{ opacity: 1 }}
+        transition={{ duration: 0.5, delay: 0.05 }}
+      >
+        {sceneConfig.subtitle}
+      </motion.p>
+
       <motion.div
-        className="mt-8 flex items-start justify-center gap-3"
+        className="mt-4 flex items-center justify-center gap-4"
         initial={{ y: 10, opacity: 0 }}
         animate={{ y: 0, opacity: 1 }}
         transition={{ duration: 0.5, delay: 0.1 }}
       >
-        <div className="flex flex-col items-center gap-1.5 w-20">
-          <div className="flex h-10 w-10 items-center justify-center rounded-full bg-emerald-50">
-            <Users size={18} className="text-emerald-500" />
+        <div className="flex flex-col items-center gap-1 w-16">
+          <div className="flex h-8 w-8 items-center justify-center rounded-full bg-emerald-50">
+            <Users size={14} className="text-emerald-500" />
           </div>
-          <span className="text-xs font-semibold text-zinc-700">创建房间</span>
-          <span className="text-[10px] leading-tight text-zinc-400 text-center">邀请朋友加入</span>
+          <span className="text-[10px] font-semibold text-zinc-700">创建房间</span>
         </div>
 
-        <ChevronRight size={14} className="mt-3 shrink-0 text-zinc-300" />
+        <ChevronRight size={12} className="shrink-0 text-zinc-300" />
 
-        <div className="flex flex-col items-center gap-1.5 w-20">
-          <div className="flex h-10 w-10 items-center justify-center rounded-full bg-amber-50">
-            <Heart size={18} className="text-amber-500" />
+        <div className="flex flex-col items-center gap-1 w-16">
+          <div className="flex h-8 w-8 items-center justify-center rounded-full bg-amber-50">
+            <Heart size={14} className="text-amber-500" />
           </div>
-          <span className="text-xs font-semibold text-zinc-700">各自滑卡</span>
-          <span className="text-[10px] leading-tight text-zinc-400 text-center">右滑喜欢的店</span>
+          <span className="text-[10px] font-semibold text-zinc-700">各自滑卡</span>
         </div>
 
-        <ChevronRight size={14} className="mt-3 shrink-0 text-zinc-300" />
+        <ChevronRight size={12} className="shrink-0 text-zinc-300" />
 
-        <div className="flex flex-col items-center gap-1.5 w-20">
-          <div className="flex h-10 w-10 items-center justify-center rounded-full bg-rose-50">
-            <Sparkles size={18} className="text-rose-500" />
+        <div className="flex flex-col items-center gap-1 w-16">
+          <div className="flex h-8 w-8 items-center justify-center rounded-full bg-rose-50">
+            <Sparkles size={14} className="text-rose-500" />
           </div>
-          <span className="text-xs font-semibold text-zinc-700">匹配结果</span>
-          <span className="text-[10px] leading-tight text-zinc-400 text-center">滑中同一家就去</span>
+          <span className="text-[10px] font-semibold text-zinc-700">匹配结果</span>
         </div>
       </motion.div>
 
       <motion.div
-        className="mt-8 flex items-center justify-center gap-2"
+        className="mt-4 flex items-center justify-center gap-2"
         initial={{ y: 10, opacity: 0 }}
         animate={{ y: 0, opacity: 1 }}
         transition={{ duration: 0.4, delay: 0.12 }}
@@ -345,7 +350,7 @@ export default function LandingPage() {
               key={s}
               onClick={() => handleSceneChange(s)}
               disabled={loading}
-              className={`flex items-center gap-1.5 rounded-full px-4 py-2 text-sm font-semibold transition-all disabled:opacity-50 ${
+              className={`flex items-center gap-1.5 rounded-full px-3.5 py-1.5 text-xs font-semibold transition-all disabled:opacity-50 ${
                 active
                   ? "bg-emerald-500 text-white shadow-md shadow-emerald-200"
                   : "bg-zinc-100 text-zinc-500 hover:bg-zinc-200"
@@ -359,7 +364,7 @@ export default function LandingPage() {
       </motion.div>
 
       <motion.div
-        className="mt-5 flex w-full max-w-xs flex-col gap-3"
+        className="mt-4 flex w-full max-w-xs flex-col gap-2.5"
         initial={{ y: 20, opacity: 0 }}
         animate={{ y: 0, opacity: 1 }}
         transition={{ duration: 0.5, delay: 0.15 }}
@@ -558,7 +563,7 @@ export default function LandingPage() {
         <button
           onClick={handleCreate}
           disabled={loading}
-          className="flex h-12 w-full items-center justify-center gap-2 rounded-xl bg-emerald-500 text-sm font-bold text-white shadow-md shadow-emerald-200 transition-colors hover:bg-emerald-600 disabled:opacity-50"
+          className="flex h-11 w-full items-center justify-center gap-2 rounded-xl bg-emerald-500 text-sm font-bold text-white shadow-md shadow-emerald-200 transition-colors hover:bg-emerald-600 disabled:opacity-50"
         >
           {loading && loadingText ? (
             <>
@@ -573,7 +578,7 @@ export default function LandingPage() {
           )}
         </button>
 
-        <div className="flex items-center gap-3 py-2">
+        <div className="flex items-center gap-3 py-1">
           <div className="h-px flex-1 bg-zinc-200" />
           <span className="text-xs text-zinc-400">或加入已有房间</span>
           <div className="h-px flex-1 bg-zinc-200" />
@@ -592,12 +597,12 @@ export default function LandingPage() {
               setError("");
             }}
             disabled={loading}
-            className="h-12 flex-1 rounded-xl border border-zinc-200 bg-white px-4 text-center text-lg font-semibold tracking-[0.3em] text-zinc-900 outline-none transition-colors placeholder:text-sm placeholder:tracking-normal placeholder:text-zinc-300 focus:border-emerald-400 focus:ring-2 focus:ring-emerald-100 disabled:opacity-50"
+            className="h-11 flex-1 rounded-xl border border-zinc-200 bg-white px-4 text-center text-lg font-semibold tracking-[0.3em] text-zinc-900 outline-none transition-colors placeholder:text-sm placeholder:tracking-normal placeholder:text-zinc-300 focus:border-emerald-400 focus:ring-2 focus:ring-emerald-100 disabled:opacity-50"
           />
           <button
             type="submit"
             disabled={loading || roomCode.length !== 4}
-            className="flex h-12 w-12 items-center justify-center rounded-xl bg-zinc-900 text-white transition-colors hover:bg-zinc-700 disabled:opacity-30"
+            className="flex h-11 w-11 items-center justify-center rounded-xl bg-zinc-900 text-white transition-colors hover:bg-zinc-700 disabled:opacity-30"
           >
             <LogIn size={18} />
           </button>