From 059c009a8b1ecf09a305325ebce6f41cbd24d69f Mon Sep 17 00:00:00 2001
From: kurihada <kurihada@qq.com>
Date: Tue, 24 Feb 2026 18:12:29 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E9=A6=96=E9=A1=B5=E5=A2=9E=E5=8A=A0=20?=
 =?UTF-8?q?3=20=E6=AD=A5=E7=8E=A9=E6=B3=95=E5=9B=BE=E7=A4=BA=EF=BC=8C?=
 =?UTF-8?q?=E9=99=8D=E4=BD=8E=E6=96=B0=E7=94=A8=E6=88=B7=E8=AE=A4=E7=9F=A5?=
 =?UTF-8?q?=E9=97=A8=E6=A7=9B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

在 slogan 与操作区之间加入"创建房间 → 各自滑卡 → 匹配结果"的极简流程说明，
帮助新用户快速理解核心机制。同时将布局改为 min-h-dvh 以适配小屏滚动。
---
 src/app/page.tsx | 39 +++++++++++++++++++++++++++++++++++++--
 1 file changed, 37 insertions(+), 2 deletions(-)

diff --git a/src/app/page.tsx b/src/app/page.tsx
index 39eb400..b05ad89 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -3,7 +3,7 @@
 import { useState, useRef, useEffect, useCallback } from "react";
 import { useRouter } from "next/navigation";
 import { motion, AnimatePresence } from "framer-motion";
-import { Plus, LogIn, Utensils, Loader2, MapPin, Navigation, X } from "lucide-react";
+import { Plus, LogIn, Utensils, Loader2, MapPin, Navigation, X, Users, Heart, Sparkles, ChevronRight } from "lucide-react";
 import { getUserId } from "@/lib/userId";
 
 interface LocationSuggestion {
@@ -172,7 +172,7 @@ export default function LandingPage() {
   };
 
   return (
-    <div className="flex h-dvh flex-col items-center justify-center bg-background px-6">
+    <div className="flex min-h-dvh flex-col items-center justify-center bg-background px-6 py-12">
       <motion.div
         className="flex flex-col items-center"
         initial={{ y: -20, opacity: 0 }}
@@ -194,6 +194,41 @@ export default function LandingPage() {
         </p>
       </motion.div>
 
+      <motion.div
+        className="mt-8 flex items-start justify-center gap-3"
+        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>
+          <span className="text-xs font-semibold text-zinc-700">创建房间</span>
+          <span className="text-[10px] leading-tight text-zinc-400 text-center">邀请朋友加入</span>
+        </div>
+
+        <ChevronRight size={14} className="mt-3 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>
+          <span className="text-xs font-semibold text-zinc-700">各自滑卡</span>
+          <span className="text-[10px] leading-tight text-zinc-400 text-center">右滑喜欢的店</span>
+        </div>
+
+        <ChevronRight size={14} className="mt-3 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>
+          <span className="text-xs font-semibold text-zinc-700">匹配结果</span>
+          <span className="text-[10px] leading-tight text-zinc-400 text-center">滑中同一家就去</span>
+        </div>
+      </motion.div>
+
       <motion.div
         className="mt-10 flex w-full max-w-xs flex-col gap-3"
         initial={{ y: 20, opacity: 0 }}