diff --git a/app/globals.css b/app/globals.css index 6ea7b2f..16eea3b 100644 --- a/app/globals.css +++ b/app/globals.css @@ -18,3 +18,67 @@ body { color: var(--foreground); font-family: var(--font-sans); } + +@keyframes float { + 0%, 100% { + transform: translate(0, 0) scale(1); + opacity: 0.6; + } + 25% { + transform: translate(10px, -20px) scale(1.1); + opacity: 0.9; + } + 50% { + transform: translate(-15px, 10px) scale(0.9); + opacity: 0.7; + } + 75% { + transform: translate(5px, 15px) scale(1.05); + opacity: 0.8; + } +} + +@keyframes shimmer { + 0% { + background-position: -200% 0; + } + 100% { + background-position: 200% 0; + } +} + +@keyframes pulse-glow { + 0%, 100% { + box-shadow: 0 0 20px rgba(139, 92, 246, 0.3); + } + 50% { + box-shadow: 0 0 40px rgba(139, 92, 246, 0.5); + } +} + +@keyframes gradient-shift { + 0% { + background-position: 0% 50%; + } + 50% { + background-position: 100% 50%; + } + 100% { + background-position: 0% 50%; + } +} + +.animate-shimmer { + background: linear-gradient( + 90deg, + transparent 0%, + rgba(255, 255, 255, 0.4) 50%, + transparent 100% + ); + background-size: 200% 100%; + animation: shimmer 2s infinite; +} + +.animate-pulse-glow { + animation: pulse-glow 3s ease-in-out infinite; +} diff --git a/app/page.tsx b/app/page.tsx index 1d3fe6a..2b448cf 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -1,31 +1,11 @@ -import { SiteHeader } from "~/components/layout/site-header"; -import { SiteFooter } from "~/components/layout/site-footer"; import { Hero } from "~/components/sections/hero"; -import { ValueGrid } from "~/components/sections/value-grid"; -import { EntryGrid } from "~/components/sections/entry-grid"; -import { Methodology } from "~/components/sections/methodology"; -import { Scenarios } from "~/components/sections/scenarios"; -import { Ecosystem } from "~/components/sections/ecosystem"; -import { ContentPreview } from "~/components/sections/content-preview"; -import { Trust } from "~/components/sections/trust"; -import { FinalCta } from "~/components/sections/final-cta"; export default function HomePage() { return (
-
- - - - - - - -
-
); } diff --git a/components/sections/entry-grid.tsx b/components/sections/entry-grid.tsx index 1720208..2fd798d 100644 --- a/components/sections/entry-grid.tsx +++ b/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 = { + nav: "🧭", + arbitrage: "⚡", + salon: "🎯", +}; + export function EntryGrid() { return ( -
+
- 选择你的入口 + 🚀 选择你的入口 -
+
{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 ( - -

+ {emoji} + +

{path.title}

{path.description}

- + {path.cta} - + diff --git a/components/sections/final-cta.tsx b/components/sections/final-cta.tsx index e9b1fec..d50b6b5 100644 --- a/components/sections/final-cta.tsx +++ b/components/sections/final-cta.tsx @@ -10,15 +10,15 @@ const ICONS = [MapPin, BookOpen, Crown] as const; export function FinalCta() { return ( -
+
- 从这里开始你的数字游民路径 + ✨ 从这里开始你的数字游民路径 {cta.label} diff --git a/components/sections/hero.tsx b/components/sections/hero.tsx index 8b28586..b5ee9f5 100644 --- a/components/sections/hero.tsx +++ b/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 ( -
-
-
-
- -

- 中文数字游民操作系统 -

-

- 从城市、技能、工具到社群，一站开始 -

-

- 帮你从固定工位，走向自由生活与自由收入 -

- - - - 数字游民不只是旅行，而是「地点自由 + 收入结构 + 系统工具 + 社群连接」的组合。 - - - - - - - - - - - - - - - - {HERO_TAGS.map((tag, i) => ( - - {tag} - - ))} - -
+
+ +
+
+
+ +

+ + 数字游民 + {" "} + nomadro +

+ -
- {HERO_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 ( + - -

- {card.title} -

-

{card.desc}

- - ))} -
+ +
+ {emoji} +
+
+ +
+
+

+ {card.label} +

+

+ {card.title} +

+

+ {card.description} +

+
+ + + + ); + })}
diff --git a/components/sections/methodology.tsx b/components/sections/methodology.tsx index f1fcd33..4a0d170 100644 --- a/components/sections/methodology.tsx +++ b/components/sections/methodology.tsx @@ -13,15 +13,15 @@ const ICON_MAP = { export function Methodology() { return ( -
+
- 数字游民，不只是旅行 + 🌍 数字游民，不只是旅行

diff --git a/components/sections/scenarios.tsx b/components/sections/scenarios.tsx index 553fe7a..d62dc74 100644 --- a/components/sections/scenarios.tsx +++ b/components/sections/scenarios.tsx @@ -7,15 +7,15 @@ import { SCENARIOS } from "~/lib/data"; export function Scenarios() { return ( -
+
- 找到你的场景 + 🎯 找到你的场景

{s.pain}

{s.path}

diff --git a/components/sections/trust.tsx b/components/sections/trust.tsx index 129d1da..d7d7509 100644 --- a/components/sections/trust.tsx +++ b/components/sections/trust.tsx @@ -8,15 +8,15 @@ const ICON_MAP = [Target, Layers, Handshake] as const; export function Trust() { return ( -
+
- 我们的原则 + 💎 我们的原则

diff --git a/components/sections/value-grid.tsx b/components/sections/value-grid.tsx index e67ff56..72019c1 100644 --- a/components/sections/value-grid.tsx +++ b/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 ( -
+
- 你能在这里获得什么 + 🎯 你能在这里获得什么 - 不是功能列表，而是实实在在的结果 + 不是功能列表，而是实实在在的结果 ✨ -
+
{VALUE_PROPOSITIONS.map((item, i) => { const Icon = ICON_MAP[item.icon]; + const gradient = ACCENT_COLORS[i]; return ( - -

+
+ +
+

{item.title}

diff --git a/components/ui/particles.tsx b/components/ui/particles.tsx new file mode 100644 index 0000000..be39e0b --- /dev/null +++ b/components/ui/particles.tsx @@ -0,0 +1,30 @@ +"use client"; + +const PARTICLES = Array.from({ length: 50 }, (_, i) => ({ + size: 4 + (i % 6), + left: (i * 17.3) % 100, + top: (i * 23.7) % 100, + duration: 10 + (i % 8), + delay: (i * 0.3) % 5, +})); + +export function Particles() { + return ( +

+ {PARTICLES.map((p, i) => ( +
+ ))} +
+ ); +} diff --git a/lib/data.ts b/lib/data.ts index 75c3653..8480ad7 100644 --- a/lib/data.ts +++ b/lib/data.ts @@ -5,7 +5,9 @@ export const NAV_LINKS = [ { href: "/", label: "首页", external: false }, - { href: "https://meetup.hackrobot.cn", label: "探索城市", external: true }, + { href: "https://nav.hackrobot.cn", label: "游民导航", external: true }, + { href: "https://hackrobot.cn", label: "地理套利", external: true }, + { href: "https://nomadyt.com/", label: "同城沙龙", external: true }, { href: "https://digital.hackrobot.cn", label: "学习路径", external: true }, { href: "https://vip.hackrobot.cn", label: "会员社区", external: true }, { href: "/about", label: "关于", external: false }, @@ -13,10 +15,41 @@ export const NAV_LINKS = [ export const HERO_TAGS = [ "城市探索", - "远程技能", - "自动化杠杆", + "地理套利", + "AI自动化", "社群连接", - "会员成长", + "同城沙龙", +] as const; + +/** 入口页主卡片：游民导航、地理套利、同城沙龙 */ +export const ENTRY_CARDS = [ + { + id: "nav", + label: "游民导航", + title: "出海赚美金", + description: "资源导航、工具推荐、出海指南", + href: "https://nav.hackrobot.cn", + icon: "MapPin", + accent: "blue", + }, + { + id: "arbitrage", + label: "地理套利", + title: "AI自动化杠杆", + description: "低成本工作室、自建云手机、自动化系统", + href: "https://hackrobot.cn", + icon: "Zap", + accent: "emerald", + }, + { + id: "salon", + label: "同城沙龙", + title: "线下连接与交流", + description: "城市聚会、主题沙龙、同频人面对面", + href: "https://nomadyt.com/", + icon: "Users", + accent: "amber", + }, ] as const; export const VALUE_PROPOSITIONS = [ @@ -48,30 +81,30 @@ export const VALUE_PROPOSITIONS = [ export const ENTRY_PATHS = [ { - id: "meetup", - title: "探索城市与连接同类人", - description: "适合想找目的地、找活动、找社群、找线下连接的人", - cta: "进入社区与城市探索", - href: "https://meetup.hackrobot.cn", + id: "nav", + title: "游民导航 · 出海赚美金", + description: "适合想找资源、工具、出海指南的人", + cta: "进入导航", + href: "https://nav.hackrobot.cn", icon: "MapPin", accent: "blue", }, { - id: "digital", - title: "学习路径、专题内容与实战资源", - description: "适合还没跑通技能变现、远程工作、副业体系的人", - cta: "进入学习与专题", - href: "https://digital.hackrobot.cn", - icon: "BookOpen", + id: "arbitrage", + title: "地理套利 · AI自动化杠杆", + description: "适合想搭建低成本工作室、自建云手机、自动化系统的人", + cta: "进入工作室", + href: "https://hackrobot.cn", + icon: "Zap", accent: "green", }, { - id: "vip", - title: "核心会员、私域社群与持续成长", - description: "适合已经认可品牌，想获得全模块解锁、社群、问答、长期更新的人", - cta: "进入会员中心", - href: "https://vip.hackrobot.cn", - icon: "Crown", + id: "salon", + title: "同城沙龙 · 线下连接", + description: "适合想参加城市聚会、主题沙龙、面对面交流的人", + cta: "探索同城活动", + href: "https://nomadyt.com/", + icon: "Users", accent: "amber", }, ] as const;