feat: 首页增加 3 步玩法图示，降低新用户认知门槛

在 slogan 与操作区之间加入"创建房间 → 各自滑卡 → 匹配结果"的极简流程说明，
帮助新用户快速理解核心机制。同时将布局改为 min-h-dvh 以适配小屏滚动。

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 }}