Redesign landing page and add Caddy deployment for nomadro.com

Co-authored-by: Cursor <cursoragent@cursor.com>

components/sections/entry-grid.tsx

@@ -1,82 +1,96 @@
 "use client";
 
 import Link from "next/link";
-import { MapPin, BookOpen, Crown, Zap, Users, ArrowRight } from "lucide-react";
+import { MapPin, Zap, Radio, ArrowRight } from "lucide-react";
 import { motion } from "framer-motion";
 import { ENTRY_PATHS } from "~/lib/data";
 
 const ICON_MAP = {
   MapPin,
-  BookOpen,
-  Crown,
   Zap,
-  Users,
+  Radio,
 } as const;
 
 const ACCENT_STYLES = {
-  blue: "border-l-4 border-l-blue-500 bg-gradient-to-r from-blue-50/80 to-white hover:from-blue-100/80",
-  green: "border-l-4 border-l-emerald-500 bg-gradient-to-r from-emerald-50/80 to-white hover:from-emerald-100/80",
-  amber: "border-l-4 border-l-amber-500 bg-gradient-to-r from-amber-50/80 to-white hover:from-amber-100/80",
+  blue: {
+    border: "border-blue-400/20 hover:border-blue-400/40",
+    glow: "hover:shadow-blue-500/10",
+    icon: "from-blue-500 to-cyan-500",
+    text: "text-blue-300",
+  },
+  green: {
+    border: "border-emerald-400/20 hover:border-emerald-400/40",
+    glow: "hover:shadow-emerald-500/10",
+    icon: "from-emerald-500 to-teal-500",
+    text: "text-emerald-300",
+  },
+  rose: {
+    border: "border-rose-400/20 hover:border-rose-400/40",
+    glow: "hover:shadow-rose-500/10",
+    icon: "from-rose-500 to-pink-500",
+    text: "text-rose-300",
+  },
 } as const;
 
-const CARD_EMOJI: Record<string, string> = {
-  nav: "🧭",
-  arbitrage: "⚡",
-  salon: "🎯",
-};
-
 export function EntryGrid() {
   return (
-    <section className="bg-gradient-to-b from-violet-50/30 to-white py-20 md:py-28">
+    <section className="relative py-20 md:py-28">
       <div className="container mx-auto px-4 md:px-6">
-        <motion.h2
+        <motion.div
           initial={{ opacity: 0, y: 12 }}
           whileInView={{ opacity: 1, y: 0 }}
           viewport={{ once: true, margin: "-80px" }}
-          className="text-center text-2xl font-bold text-neutral-900 md:text-3xl"
+          className="text-center"
         >
-          🚀 选择你的入口
-        </motion.h2>
-        <motion.p
-          initial={{ opacity: 0 }}
-          whileInView={{ opacity: 1 }}
-          viewport={{ once: true }}
-          className="mx-auto mt-3 max-w-2xl text-center text-neutral-600"
-        >
-          三大路径，对应不同的需求和阶段
-        </motion.p>
+          <span className="text-3xl">🚀</span>
+          <h2 className="mt-3 text-2xl font-bold text-white md:text-3xl">
+            选择你的入口
+          </h2>
+          <p className="mx-auto mt-3 max-w-2xl text-white/40">
+            三大路径，对应不同的需求和阶段
+          </p>
+        </motion.div>
 
-        <div className="mt-14 grid gap-6 md:grid-cols-3">
+        <div className="mt-14 grid gap-5 md:grid-cols-3">
           {ENTRY_PATHS.map((path, i) => {
-            const Icon = ICON_MAP[path.icon as keyof typeof ICON_MAP] ?? MapPin;
+            const Icon = ICON_MAP[path.icon];
             const accent = ACCENT_STYLES[path.accent];
-            const emoji = CARD_EMOJI[path.id] ?? "✨";
             return (
               <motion.div
                 key={path.id}
                 initial={{ opacity: 0, y: 20 }}
                 whileInView={{ opacity: 1, y: 0 }}
                 viewport={{ once: true, margin: "-40px" }}
-                transition={{ delay: i * 0.08 }}
-                whileHover={{ y: -4 }}
+                transition={{ delay: i * 0.1 }}
+                whileHover={{ y: -6 }}
               >
                 <Link
                   href={path.href}
                   target="_blank"
                   rel="noopener noreferrer"
-                  className={`group block rounded-2xl border border-neutral-200/80 p-6 transition-all hover:shadow-xl ${accent}`}
+                  className={`group glass-card glass-card-hover block rounded-2xl p-6 shadow-lg ${accent.border} ${accent.glow}`}
                 >
-                  <span className="text-2xl">{emoji}</span>
-                  <Icon className="mt-3 h-10 w-10 text-neutral-600 transition-transform group-hover:scale-110" />
-                  <h3 className="mt-4 text-lg font-bold text-neutral-900">
+                  <div className="flex items-start justify-between">
+                    <span className="text-3xl">{path.emoji}</span>
+                    {path.id === "live" && (
+                      <span className="flex items-center gap-1 rounded-full bg-rose-500/15 px-2 py-0.5 text-[10px] font-medium text-rose-300 ring-1 ring-rose-400/20">
+                        <span className="h-1 w-1 rounded-full bg-rose-400 animate-pulse" />
+                        nomadro.live
+                      </span>
+                    )}
+                  </div>
+                  <div className={`mt-4 inline-flex h-10 w-10 items-center justify-center rounded-xl bg-gradient-to-br ${accent.icon} shadow-lg`}>
+                    <Icon className="h-5 w-5 text-white" />
+                  </div>
+                  <h3 className="mt-4 text-lg font-bold text-white">
                     {path.title}
                   </h3>
-                  <p className="mt-2 text-sm text-neutral-600">
+                  <p className="mt-2 text-sm leading-relaxed text-white/40">
                     {path.description}
                   </p>
-                  <span className="mt-4 inline-flex items-center gap-1 text-sm font-semibold text-neutral-700 group-hover:text-neutral-900">
+                  <span className={`mt-5 inline-flex items-center gap-1.5 text-sm font-semibold ${accent.text} transition-all group-hover:gap-2.5`}>
                     {path.cta}
-                    <ArrowRight className="h-4 w-4 transition-transform group-hover:translate-x-2" />
+                    <ArrowRight className="h-4 w-4" />
                   </span>
                 </Link>
               </motion.div>