's'

components/sections/entry-grid.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import Link from "next/link";
-import { MapPin, BookOpen, Crown, ArrowRight } from "lucide-react";
+import { MapPin, BookOpen, Crown, Zap, Users, ArrowRight } from "lucide-react";
 import { motion } from "framer-motion";
 import { ENTRY_PATHS } from "~/lib/data";
 
@@ -9,25 +9,33 @@ const ICON_MAP = {
   MapPin,
   BookOpen,
   Crown,
+  Zap,
+  Users,
 } as const;
 
 const ACCENT_STYLES = {
-  blue: "border-l-blue-500/80 hover:border-l-blue-500",
-  green: "border-l-emerald-500/80 hover:border-l-emerald-500",
-  amber: "border-l-amber-500/80 hover:border-l-amber-500",
+  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",
 } as const;
 
+const CARD_EMOJI: Record<string, string> = {
+  nav: "🧭",
+  arbitrage: "⚡",
+  salon: "🎯",
+};
+
 export function EntryGrid() {
   return (
-    <section className="bg-white py-16 md:py-24">
+    <section className="bg-gradient-to-b from-violet-50/30 to-white py-20 md:py-28">
       <div className="container mx-auto px-4 md:px-6">
         <motion.h2
           initial={{ opacity: 0, y: 12 }}
           whileInView={{ opacity: 1, y: 0 }}
           viewport={{ once: true, margin: "-80px" }}
-          className="text-center text-2xl font-semibold text-neutral-900 md:text-3xl"
+          className="text-center text-2xl font-bold text-neutral-900 md:text-3xl"
         >
-          选择你的入口
+          🚀 选择你的入口
         </motion.h2>
         <motion.p
           initial={{ opacity: 0 }}
@@ -38,10 +46,11 @@ export function EntryGrid() {
           三大路径，对应不同的需求和阶段
         </motion.p>
 
-        <div className="mt-12 grid gap-6 md:grid-cols-3">
+        <div className="mt-14 grid gap-6 md:grid-cols-3">
           {ENTRY_PATHS.map((path, i) => {
-            const Icon = ICON_MAP[path.icon];
+            const Icon = ICON_MAP[path.icon as keyof typeof ICON_MAP] ?? MapPin;
             const accent = ACCENT_STYLES[path.accent];
+            const emoji = CARD_EMOJI[path.id] ?? "✨";
             return (
               <motion.div
                 key={path.id}
@@ -49,23 +58,25 @@ export function EntryGrid() {
                 whileInView={{ opacity: 1, y: 0 }}
                 viewport={{ once: true, margin: "-40px" }}
                 transition={{ delay: i * 0.08 }}
+                whileHover={{ y: -4 }}
               >
                 <Link
                   href={path.href}
                   target="_blank"
                   rel="noopener noreferrer"
-                  className={`group block rounded-xl border border-neutral-200 bg-white p-6 transition-all hover:-translate-y-1 hover:shadow-lg ${accent} border-l-4`}
+                  className={`group block rounded-2xl border border-neutral-200/80 p-6 transition-all hover:shadow-xl ${accent}`}
                 >
-                  <Icon className="h-10 w-10 text-neutral-600" />
-                  <h3 className="mt-4 text-lg font-semibold text-neutral-900">
+                  <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">
                     {path.title}
                   </h3>
                   <p className="mt-2 text-sm text-neutral-600">
                     {path.description}
                   </p>
-                  <span className="mt-4 inline-flex items-center gap-1 text-sm font-medium text-neutral-700 group-hover:text-neutral-900">
+                  <span className="mt-4 inline-flex items-center gap-1 text-sm font-semibold text-neutral-700 group-hover:text-neutral-900">
                     {path.cta}
-                    <ArrowRight className="h-4 w-4 transition-transform group-hover:translate-x-1" />
+                    <ArrowRight className="h-4 w-4 transition-transform group-hover:translate-x-2" />
                   </span>
                 </Link>
               </motion.div>

components/sections/final-cta.tsx

@@ -10,15 +10,15 @@ const ICONS = [MapPin, BookOpen, Crown] as const;
 
 export function FinalCta() {
   return (
-    <section className="bg-neutral-900 py-16 text-white md:py-24">
+    <section className="relative overflow-hidden bg-gradient-to-br from-violet-900 via-fuchsia-900 to-cyan-900 py-20 text-white md:py-28">
       <div className="container mx-auto px-4 md:px-6">
         <motion.h2
           initial={{ opacity: 0, y: 12 }}
           whileInView={{ opacity: 1, y: 0 }}
           viewport={{ once: true, margin: "-80px" }}
-          className="text-center text-2xl font-semibold md:text-3xl"
+          className="text-center text-2xl font-bold md:text-3xl"
         >
-          从这里开始你的数字游民路径
+          ✨ 从这里开始你的数字游民路径
         </motion.h2>
         <motion.p
           initial={{ opacity: 0 }}
@@ -48,7 +48,7 @@ export function FinalCta() {
                 <Button
                   variant="outline"
                   size="lg"
-                  className="w-full min-w-[200px] border-neutral-600 bg-transparent text-white hover:bg-neutral-800 hover:text-white sm:w-auto"
+                  className="w-full min-w-[200px] border-white/40 bg-white/10 text-white backdrop-blur-sm hover:bg-white/20 hover:border-white/60 sm:w-auto"
                 >
                   <Icon className="mr-2 h-4 w-4" />
                   {cta.label}

components/sections/hero.tsx

@@ -1,138 +1,108 @@
 "use client";
 
 import Link from "next/link";
-import { MapPin, BookOpen, Crown } from "lucide-react";
+import { MapPin, Zap, Users, ArrowRight } from "lucide-react";
 import { motion } from "framer-motion";
-import { HERO_TAGS } from "~/lib/data";
-import { Button } from "~/components/ui/button";
+import { ENTRY_CARDS } from "~/lib/data";
+import { Particles } from "~/components/ui/particles";
 
-const HERO_CARDS = [
-  {
-    title: "探索城市",
-    desc: "找到适合远程生活的地方",
-    icon: MapPin,
-    href: "https://meetup.hackrobot.cn",
-  },
-  {
-    title: "学习专题",
-    desc: "从零搭建你的技能与收入结构",
-    icon: BookOpen,
-    href: "https://digital.hackrobot.cn",
-  },
-  {
-    title: "会员社区",
-    desc: "进入更高密度的人脉与资源网络",
-    icon: Crown,
-    href: "https://vip.hackrobot.cn",
-  },
-];
+const ICON_MAP = {
+  MapPin,
+  Zap,
+  Users,
+} as const;
+
+const ACCENT_STYLES = {
+  blue: "from-blue-500/20 to-cyan-500/10 border-blue-300/80 hover:border-blue-400 hover:shadow-2xl",
+  emerald: "from-emerald-500/20 to-teal-500/10 border-emerald-300/80 hover:border-emerald-400 hover:shadow-2xl",
+  amber: "from-amber-500/20 to-orange-500/10 border-amber-300/80 hover:border-amber-400 hover:shadow-2xl",
+} as const;
+
+const CARD_EMOJI = {
+  nav: "🧭",
+  arbitrage: "⚡",
+  salon: "🎯",
+} as const;
+
+const ICON_COLORS = {
+  blue: "text-blue-600",
+  emerald: "text-emerald-600",
+  amber: "text-amber-600",
+} as const;
 
 export function Hero() {
   return (
-    <section className="relative overflow-hidden bg-white">
-      <div className="container mx-auto px-4 py-16 md:px-6 md:py-24 lg:py-32">
-        <div className="grid gap-12 lg:grid-cols-2 lg:gap-16">
-          <div className="flex flex-col justify-center">
-            <motion.div
-              initial={{ opacity: 0, y: 16 }}
-              animate={{ opacity: 1, y: 0 }}
-              transition={{ duration: 0.5 }}
-            >
-              <h1 className="text-3xl font-semibold tracking-tight text-neutral-900 sm:text-4xl md:text-5xl">
-                中文数字游民操作系统
-              </h1>
-              <p className="mt-4 text-lg text-neutral-600 md:text-xl">
-                从城市、技能、工具到社群，一站开始
-              </p>
-              <p className="mt-2 text-base text-neutral-500">
-                帮你从固定工位，走向自由生活与自由收入
-              </p>
-            </motion.div>
-
-            <motion.p
-              initial={{ opacity: 0 }}
-              animate={{ opacity: 1 }}
-              transition={{ delay: 0.2, duration: 0.4 }}
-              className="mt-6 max-w-lg text-sm text-neutral-500"
-            >
-              数字游民不只是旅行，而是「地点自由 + 收入结构 + 系统工具 + 社群连接」的组合。
-            </motion.p>
-
-            <motion.div
-              initial={{ opacity: 0, y: 12 }}
-              animate={{ opacity: 1, y: 0 }}
-              transition={{ delay: 0.3, duration: 0.4 }}
-              className="mt-8 flex flex-wrap gap-3"
-            >
-              <Link
-                href="https://meetup.hackrobot.cn"
-                target="_blank"
-                rel="noopener noreferrer"
-              >
-                <Button size="lg" className="min-w-[180px]">
-                  开始你的数字游民路径
-                </Button>
-              </Link>
-              <Link
-                href="https://meetup.hackrobot.cn"
-                target="_blank"
-                rel="noopener noreferrer"
-              >
-                <Button variant="outline" size="lg">
-                  探索适合你的城市
-                </Button>
-              </Link>
-              <Link
-                href="https://digital.hackrobot.cn"
-                target="_blank"
-                rel="noopener noreferrer"
-              >
-                <Button variant="ghost" size="lg">
-                  查看学习专题
-                </Button>
-              </Link>
-            </motion.div>
-
-            <motion.div
-              initial={{ opacity: 0 }}
-              animate={{ opacity: 1 }}
-              transition={{ delay: 0.5 }}
-              className="mt-10 flex flex-wrap gap-2"
-            >
-              {HERO_TAGS.map((tag, i) => (
-                <span
-                  key={tag}
-                  className="rounded-full border border-neutral-200 bg-neutral-50 px-3 py-1 text-xs text-neutral-600"
-                >
-                  {tag}
-                </span>
-              ))}
-            </motion.div>
-          </div>
+    <section className="relative min-h-[100dvh] overflow-hidden bg-gradient-to-br from-violet-50 via-white to-cyan-50">
+      <Particles />
+      <div
+        className="pointer-events-none absolute inset-0 opacity-30"
+        style={{
+          backgroundImage: `radial-gradient(circle at 20% 80%, rgba(139, 92, 246, 0.15) 0%, transparent 50%),
+            radial-gradient(circle at 80% 20%, rgba(6, 182, 212, 0.15) 0%, transparent 50%)`,
+        }}
+      />
+      <div className="container relative mx-auto flex min-h-[100dvh] flex-col justify-center px-3 py-6 sm:px-4 sm:py-8 md:px-6 md:py-16 lg:py-24">
+        <div className="mx-auto max-w-4xl text-center">
+          <motion.div
+            initial={{ opacity: 0, y: 16 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ delay: 0.1, duration: 0.5 }}
+          >
+            <h1 className="text-2xl font-bold tracking-tight sm:text-4xl md:text-5xl lg:text-6xl">
+              <span className="bg-gradient-to-r from-violet-600 via-fuchsia-500 to-cyan-600 bg-clip-text text-transparent">
+                数字游民
+              </span>{" "}
+              <span className="text-neutral-800">nomadro</span>
+            </h1>
+          </motion.div>
 
           <motion.div
-            initial={{ opacity: 0, x: 24 }}
-            animate={{ opacity: 1, x: 0 }}
-            transition={{ delay: 0.4, duration: 0.5 }}
-            className="flex flex-col gap-4 lg:justify-center"
+            initial={{ opacity: 0, y: 24 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ delay: 0.3, duration: 0.5 }}
+            className="mt-6 flex flex-col gap-3 sm:mt-8 sm:gap-4 lg:mt-12 lg:grid lg:grid-cols-3 lg:gap-6"
           >
-            <div className="grid gap-4 sm:grid-cols-3">
-              {HERO_CARDS.map((card, i) => (
-                <Link
-                  key={card.title}
-                  href={card.href}
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  className="group flex flex-col rounded-xl border border-neutral-200 bg-white p-5 shadow-sm transition-all hover:-translate-y-1 hover:shadow-md"
+            {ENTRY_CARDS.map((card, i) => {
+              const Icon = ICON_MAP[card.icon];
+              const accent = ACCENT_STYLES[card.accent];
+              const emoji = CARD_EMOJI[card.id];
+              const iconColor = ICON_COLORS[card.accent];
+              return (
+                <motion.div
+                  key={card.id}
+                  initial={{ opacity: 0, y: 20 }}
+                  animate={{ opacity: 1, y: 0 }}
+                  transition={{ delay: 0.4 + i * 0.1, duration: 0.4 }}
+                  whileHover={{ scale: 1.01, y: -2 }}
                 >
-                  <card.icon className="h-8 w-8 text-neutral-400 transition-colors group-hover:text-neutral-700" />
-                  <h3 className="mt-3 font-medium text-neutral-900">
-                    {card.title}
-                  </h3>
-                  <p className="mt-1 text-sm text-neutral-500">{card.desc}</p>
-                </Link>
-              ))}
-            </div>
+                  <Link
+                    href={card.href}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className={`group relative flex items-center gap-4 overflow-hidden rounded-2xl border-2 bg-gradient-to-br p-4 transition-all duration-300 active:scale-[0.99] lg:flex-col lg:items-stretch lg:gap-0 lg:p-6 ${accent}`}
+                  >
+                    <div className="absolute -right-6 -top-6 text-5xl opacity-20 transition-transform group-hover:scale-110 group-hover:opacity-30 sm:-right-8 sm:-top-8 sm:text-6xl">
+                      {emoji}
+                    </div>
+                    <div className={`relative flex h-11 w-11 shrink-0 items-center justify-center self-start rounded-xl bg-white/80 shadow-sm lg:h-12 lg:w-12 ${iconColor}`}>
+                      <Icon className="h-5 w-5 group-hover:scale-110 transition-transform lg:h-6 lg:w-6" />
+                    </div>
+                    <div className="relative min-w-0 flex-1 lg:mt-4">
+                      <h2 className="text-base font-bold text-neutral-900 lg:text-xl">
+                        {card.label}
+                      </h2>
+                      <p className="mt-0.5 text-sm text-neutral-600">
+                        {card.title}
+                      </p>
+                      <p className="mt-1 hidden text-xs text-neutral-500 lg:block">
+                        {card.description}
+                      </p>
+                    </div>
+                    <ArrowRight className="relative h-5 w-5 shrink-0 text-neutral-400 transition-all group-hover:translate-x-1 group-hover:text-violet-500 lg:absolute lg:right-4 lg:top-4" />
+                  </Link>
+                </motion.div>
+              );
+            })}
           </motion.div>
         </div>
       </div>

components/sections/methodology.tsx

@@ -13,15 +13,15 @@ const ICON_MAP = {
 
 export function Methodology() {
   return (
-    <section className="bg-neutral-50 py-16 md:py-24">
+    <section className="bg-gradient-to-b from-white to-cyan-50/20 py-20 md:py-28">
       <div className="container mx-auto px-4 md:px-6">
         <motion.h2
           initial={{ opacity: 0, y: 12 }}
           whileInView={{ opacity: 1, y: 0 }}
           viewport={{ once: true, margin: "-80px" }}
-          className="text-center text-2xl font-semibold text-neutral-900 md:text-3xl"
+          className="text-center text-2xl font-bold text-neutral-900 md:text-3xl"
         >
-          数字游民，不只是旅行
+          🌍 数字游民，不只是旅行
         </motion.h2>
         <motion.p
           initial={{ opacity: 0 }}
@@ -38,11 +38,12 @@ export function Methodology() {
             return (
               <motion.div
                 key={sys.id}
+                whileHover={{ y: -4 }}
                 initial={{ opacity: 0, y: 20 }}
                 whileInView={{ opacity: 1, y: 0 }}
                 viewport={{ once: true, margin: "-40px" }}
                 transition={{ delay: i * 0.05 }}
-                className="rounded-xl border border-neutral-200 bg-white p-6"
+                className="rounded-2xl border-2 border-neutral-200/80 bg-white p-6 shadow-sm transition-all hover:border-cyan-200 hover:shadow-xl"
               >
                 <Icon className="h-9 w-9 text-neutral-600" />
                 <h3 className="mt-4 font-medium text-neutral-900">

components/sections/scenarios.tsx

@@ -7,15 +7,15 @@ import { SCENARIOS } from "~/lib/data";
 
 export function Scenarios() {
   return (
-    <section className="bg-white py-16 md:py-24">
+    <section className="bg-gradient-to-b from-cyan-50/20 to-white py-20 md:py-28">
       <div className="container mx-auto px-4 md:px-6">
         <motion.h2
           initial={{ opacity: 0, y: 12 }}
           whileInView={{ opacity: 1, y: 0 }}
           viewport={{ once: true, margin: "-80px" }}
-          className="text-center text-2xl font-semibold text-neutral-900 md:text-3xl"
+          className="text-center text-2xl font-bold text-neutral-900 md:text-3xl"
         >
-          找到你的场景
+          🎯 找到你的场景
         </motion.h2>
         <motion.p
           initial={{ opacity: 0 }}
@@ -39,7 +39,7 @@ export function Scenarios() {
                 href={s.href}
                 target="_blank"
                 rel="noopener noreferrer"
-                className="group block rounded-xl border border-neutral-200 bg-neutral-50/50 p-5 transition-all hover:border-neutral-300 hover:bg-white hover:shadow-md"
+                className="group block rounded-2xl border-2 border-neutral-200/80 bg-white p-5 transition-all hover:border-fuchsia-200 hover:shadow-xl"
               >
                 <p className="font-medium text-neutral-900">{s.pain}</p>
                 <p className="mt-1 text-sm text-neutral-500">{s.path}</p>

components/sections/trust.tsx

@@ -8,15 +8,15 @@ const ICON_MAP = [Target, Layers, Handshake] as const;
 
 export function Trust() {
   return (
-    <section className="bg-neutral-50 py-16 md:py-24">
+    <section className="bg-gradient-to-b from-white to-amber-50/20 py-20 md:py-28">
       <div className="container mx-auto px-4 md:px-6">
         <motion.h2
           initial={{ opacity: 0, y: 12 }}
           whileInView={{ opacity: 1, y: 0 }}
           viewport={{ once: true, margin: "-80px" }}
-          className="text-center text-2xl font-semibold text-neutral-900 md:text-3xl"
+          className="text-center text-2xl font-bold text-neutral-900 md:text-3xl"
         >
-          我们的原则
+          💎 我们的原则
         </motion.h2>
         <motion.p
           initial={{ opacity: 0 }}
@@ -37,7 +37,7 @@ export function Trust() {
                 whileInView={{ opacity: 1, y: 0 }}
                 viewport={{ once: true, margin: "-40px" }}
                 transition={{ delay: i * 0.06 }}
-                className="rounded-xl border border-neutral-200 bg-white p-6 text-center"
+                className="rounded-2xl border-2 border-neutral-200/80 bg-white p-6 text-center shadow-sm transition-all hover:border-amber-200 hover:shadow-lg"
               >
                 <Icon className="mx-auto h-9 w-9 text-neutral-600" />
                 <h3 className="mt-4 font-medium text-neutral-900">

components/sections/value-grid.tsx

@@ -11,17 +11,25 @@ const ICON_MAP = {
   Users,
 } as const;
 
+const ACCENT_COLORS = [
+  "from-blue-500 to-cyan-500",
+  "from-emerald-500 to-teal-500",
+  "from-violet-500 to-fuchsia-500",
+  "from-amber-500 to-orange-500",
+] as const;
+
+
 export function ValueGrid() {
   return (
-    <section className="bg-neutral-50 py-16 md:py-24">
+    <section className="bg-gradient-to-b from-white to-violet-50/30 py-20 md:py-28">
       <div className="container mx-auto px-4 md:px-6">
         <motion.h2
           initial={{ opacity: 0, y: 12 }}
           whileInView={{ opacity: 1, y: 0 }}
           viewport={{ once: true, margin: "-80px" }}
-          className="text-center text-2xl font-semibold text-neutral-900 md:text-3xl"
+          className="text-center text-2xl font-bold text-neutral-900 md:text-3xl"
         >
-          你能在这里获得什么
+          🎯 你能在这里获得什么
         </motion.h2>
         <motion.p
           initial={{ opacity: 0 }}
@@ -29,23 +37,27 @@ export function ValueGrid() {
           viewport={{ once: true }}
           className="mx-auto mt-3 max-w-2xl text-center text-neutral-600"
         >
-          不是功能列表，而是实实在在的结果
+          不是功能列表，而是实实在在的结果 ✨
         </motion.p>
 
-        <div className="mt-12 grid gap-6 sm:grid-cols-2 lg:grid-cols-4">
+        <div className="mt-14 grid gap-6 sm:grid-cols-2 lg:grid-cols-4">
           {VALUE_PROPOSITIONS.map((item, i) => {
             const Icon = ICON_MAP[item.icon];
+            const gradient = ACCENT_COLORS[i];
             return (
               <motion.div
                 key={item.id}
                 initial={{ opacity: 0, y: 20 }}
                 whileInView={{ opacity: 1, y: 0 }}
                 viewport={{ once: true, margin: "-40px" }}
-                transition={{ delay: i * 0.05 }}
-                className="rounded-xl border border-neutral-200 bg-white p-6 shadow-sm transition-all hover:shadow-md"
+                transition={{ delay: i * 0.08 }}
+                whileHover={{ y: -4 }}
+                className="group rounded-2xl border-2 border-neutral-200/80 bg-white p-6 shadow-sm transition-all hover:border-violet-200 hover:shadow-xl hover:shadow-violet-100/50"
               >
-                <Icon className="h-10 w-10 text-neutral-600" />
-                <h3 className="mt-4 font-medium text-neutral-900">
+                <div className={`inline-flex h-12 w-12 items-center justify-center rounded-xl bg-gradient-to-br ${gradient} text-white shadow-lg transition-transform group-hover:scale-110`}>
+                  <Icon className="h-6 w-6" />
+                </div>
+                <h3 className="mt-4 font-semibold text-neutral-900">
                   {item.title}
                 </h3>
                 <p className="mt-2 text-sm text-neutral-600">