Redesign landing page and add Caddy deployment for nomadro.com
Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
eric
@@ -1,25 +1,27 @@
|
||||
import Link from "next/link";
|
||||
import { SiteHeader } from "~/components/layout/site-header";
|
||||
import { SiteFooter } from "~/components/layout/site-footer";
|
||||
|
||||
export default function AboutPage() {
|
||||
return (
|
||||
<div className="min-h-screen bg-white">
|
||||
<SiteHeader />
|
||||
<main className="container mx-auto px-4 py-16 md:px-6 md:py-24">
|
||||
<h1 className="text-3xl font-semibold text-neutral-900">关于 Nomadro</h1>
|
||||
<p className="mt-6 max-w-2xl text-neutral-600">
|
||||
Nomadro 是中文数字游民操作系统，致力于帮助更多人从固定工位走向自由生活与自由收入。
|
||||
我们提供城市探索、学习路径、会员社区三大核心模块，从地点、技能、工具到社群，构建完整的数字游民支持体系。
|
||||
<div
|
||||
className="flex min-h-dvh flex-col bg-[#f8f7fc] px-5 py-10"
|
||||
style={{
|
||||
paddingTop: "max(2.5rem, calc(1.5rem + var(--safe-top)))",
|
||||
paddingBottom: "max(2.5rem, calc(1.5rem + var(--safe-bottom)))",
|
||||
}}
|
||||
>
|
||||
<div className="mx-auto w-full max-w-md">
|
||||
<h1 className="text-xl font-bold text-neutral-900">关于 Nomadro</h1>
|
||||
<p className="mt-4 text-sm leading-relaxed text-neutral-600">
|
||||
Nomadro 是中文数字游民操作系统，提供游民导航、地理套利、直播工具箱等模块，
|
||||
帮助更多人从固定工位走向自由生活与自由收入。
|
||||
</p>
|
||||
<Link
|
||||
href="/"
|
||||
className="mt-8 inline-block text-sm font-medium text-neutral-700 hover:text-neutral-900"
|
||||
className="mt-8 inline-block text-sm text-violet-600 active:text-violet-800"
|
||||
>
|
||||
← 返回首页
|
||||
</Link>
|
||||
</main>
|
||||
<SiteFooter />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,32 +1,44 @@
|
||||
import Link from "next/link";
|
||||
import { SiteHeader } from "~/components/layout/site-header";
|
||||
import { SiteFooter } from "~/components/layout/site-footer";
|
||||
|
||||
export default function ContactPage() {
|
||||
return (
|
||||
<div className="min-h-screen bg-white">
|
||||
<SiteHeader />
|
||||
<main className="container mx-auto px-4 py-16 md:px-6 md:py-24">
|
||||
<h1 className="text-3xl font-semibold text-neutral-900">联系我们</h1>
|
||||
<p className="mt-6 max-w-2xl text-neutral-600">
|
||||
<div
|
||||
className="flex min-h-dvh flex-col bg-[#f8f7fc] px-5 py-10"
|
||||
style={{
|
||||
paddingTop: "max(2.5rem, calc(1.5rem + var(--safe-top)))",
|
||||
paddingBottom: "max(2.5rem, calc(1.5rem + var(--safe-bottom)))",
|
||||
}}
|
||||
>
|
||||
<div className="mx-auto w-full max-w-md">
|
||||
<h1 className="text-xl font-bold text-neutral-900">联系我们</h1>
|
||||
<p className="mt-4 text-sm leading-relaxed text-neutral-600">
|
||||
加入数字游民社群，获取最新动态与交流机会。
|
||||
</p>
|
||||
<Link
|
||||
href="https://meetup.hackrobot.cn"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="mt-6 inline-block rounded-lg bg-neutral-900 px-6 py-3 text-white hover:bg-neutral-800"
|
||||
>
|
||||
加入社群
|
||||
</Link>
|
||||
<div className="mt-6 flex flex-col gap-3">
|
||||
<Link
|
||||
href="https://nomadro.live"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="flex h-12 items-center justify-center rounded-2xl bg-violet-600 text-sm font-medium text-white active:bg-violet-700"
|
||||
>
|
||||
🎬 直播工具箱
|
||||
</Link>
|
||||
<Link
|
||||
href="https://vip.hackrobot.cn"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="flex h-12 items-center justify-center rounded-2xl border border-neutral-200 bg-white text-sm font-medium text-neutral-700 active:bg-neutral-50"
|
||||
>
|
||||
👑 会员社群
|
||||
</Link>
|
||||
</div>
|
||||
<Link
|
||||
href="/"
|
||||
className="ml-4 mt-8 inline-block text-sm font-medium text-neutral-700 hover:text-neutral-900"
|
||||
className="mt-8 inline-block text-sm text-violet-600 active:text-violet-800"
|
||||
>
|
||||
← 返回首页
|
||||
</Link>
|
||||
</main>
|
||||
<SiteFooter />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,8 +1,10 @@
|
||||
@import "tailwindcss";
|
||||
|
||||
:root {
|
||||
--background: #ffffff;
|
||||
--background: #f8f7fc;
|
||||
--foreground: #171717;
|
||||
--safe-top: env(safe-area-inset-top, 0px);
|
||||
--safe-bottom: env(safe-area-inset-bottom, 0px);
|
||||
}
|
||||
|
||||
@theme inline {
|
||||
@@ -13,72 +15,22 @@
|
||||
--font-mono: var(--font-geist-mono), ui-monospace, monospace;
|
||||
}
|
||||
|
||||
html {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
min-height: 100%;
|
||||
background: var(--background);
|
||||
color: var(--foreground);
|
||||
font-family: var(--font-sans);
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
@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;
|
||||
.text-gradient {
|
||||
background: linear-gradient(135deg, #7c3aed 0%, #0891b2 100%);
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
|
||||
@@ -1,28 +1,39 @@
|
||||
import "./globals.css";
|
||||
|
||||
import { type Metadata } from "next";
|
||||
import { type Metadata, type Viewport } from "next";
|
||||
import { Geist, Geist_Mono } from "next/font/google";
|
||||
|
||||
export const viewport: Viewport = {
|
||||
width: "device-width",
|
||||
initialScale: 1,
|
||||
maximumScale: 5,
|
||||
viewportFit: "cover",
|
||||
themeColor: "#f8f7fc",
|
||||
};
|
||||
|
||||
export const metadata: Metadata = {
|
||||
metadataBase: new URL("https://nomadro.com"),
|
||||
title: "Nomadro | 中文数字游民操作系统",
|
||||
description:
|
||||
"从城市、技能、工具到社群，一站开始你的数字游民生活。探索城市、学习路径、会员社区，帮你从固定工位走向自由生活与自由收入。",
|
||||
"从城市探索到远程收入，从 AI 自动化到直播变现。游民导航、地理套利、直播工具箱，一站开启你的自由生活。",
|
||||
keywords: [
|
||||
"数字游民",
|
||||
"远程工作",
|
||||
"旅居",
|
||||
"自由职业",
|
||||
"城市探索",
|
||||
"直播工具箱",
|
||||
"地理套利",
|
||||
"学习路径",
|
||||
"会员社区",
|
||||
],
|
||||
openGraph: {
|
||||
title: "Nomadro | 中文数字游民操作系统",
|
||||
description:
|
||||
"从城市、技能、工具到社群，一站开始你的数字游民生活。",
|
||||
"从城市探索到远程收入，从 AI 自动化到直播变现，一站开启你的自由生活。",
|
||||
type: "website",
|
||||
url: "https://nomadro.live",
|
||||
},
|
||||
icons: [{ rel: "icon", url: "/nomadro.ico" }],
|
||||
icons: [{ rel: "icon", url: "/favicon.ico" }],
|
||||
};
|
||||
|
||||
const geist = Geist({
|
||||
|
||||
13
app/page.tsx
13
app/page.tsx
@@ -2,10 +2,19 @@ import { Hero } from "~/components/sections/hero";
|
||||
|
||||
export default function HomePage() {
|
||||
return (
|
||||
<div className="min-h-screen bg-white">
|
||||
<main>
|
||||
<div
|
||||
className="flex min-h-dvh flex-col"
|
||||
style={{ minHeight: "100dvh" }}
|
||||
>
|
||||
<main className="flex flex-1 flex-col">
|
||||
<Hero />
|
||||
</main>
|
||||
<footer
|
||||
className="shrink-0 py-5 text-center text-[11px] text-neutral-400"
|
||||
style={{ paddingBottom: "max(1.25rem, var(--safe-bottom))" }}
|
||||
>
|
||||
© {new Date().getFullYear()} Nomadro
|
||||
</footer>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,76 +1,31 @@
|
||||
import Link from "next/link";
|
||||
import { NAV_LINKS, ENTRY_PATHS } from "~/lib/data";
|
||||
import { ENTRY_PATHS } from "~/lib/data";
|
||||
|
||||
export function SiteFooter() {
|
||||
return (
|
||||
<footer className="border-t border-neutral-200 bg-neutral-50">
|
||||
<div className="container mx-auto px-4 py-12 md:px-6">
|
||||
<div className="grid gap-8 md:grid-cols-4">
|
||||
<div className="md:col-span-2">
|
||||
<Link href="/" className="text-lg font-semibold text-neutral-900">
|
||||
Nomadro
|
||||
<footer className="border-t border-neutral-200 bg-neutral-50 px-4 py-8 sm:px-6">
|
||||
<div className="mx-auto max-w-lg sm:max-w-2xl lg:max-w-4xl">
|
||||
<p className="text-center text-xs text-neutral-400">
|
||||
© {new Date().getFullYear()} Nomadro · 数字游民操作系统
|
||||
</p>
|
||||
<div className="mt-4 flex flex-wrap justify-center gap-x-4 gap-y-2">
|
||||
{ENTRY_PATHS.map((path) => (
|
||||
<Link
|
||||
key={path.id}
|
||||
href={path.href}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-xs text-neutral-500 active:text-violet-600"
|
||||
>
|
||||
{path.emoji} {path.title.split(" · ")[0]}
|
||||
</Link>
|
||||
<p className="mt-2 max-w-sm text-sm text-neutral-600">
|
||||
中文数字游民操作系统。从城市、技能、工具到社群，一站开始你的自由生活与自由收入。
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="text-sm font-semibold text-neutral-900">
|
||||
核心入口
|
||||
</h4>
|
||||
<ul className="mt-3 space-y-2">
|
||||
{ENTRY_PATHS.map((path) => (
|
||||
<li key={path.id}>
|
||||
<Link
|
||||
href={path.href}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-sm text-neutral-600 hover:text-neutral-900"
|
||||
>
|
||||
{path.title}
|
||||
</Link>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="text-sm font-semibold text-neutral-900">
|
||||
关于
|
||||
</h4>
|
||||
<ul className="mt-3 space-y-2">
|
||||
<li>
|
||||
<Link
|
||||
href="/about"
|
||||
className="text-sm text-neutral-600 hover:text-neutral-900"
|
||||
>
|
||||
关于我们
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link
|
||||
href="/contact"
|
||||
className="text-sm text-neutral-600 hover:text-neutral-900"
|
||||
>
|
||||
联系我们
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link
|
||||
href="https://meetup.hackrobot.cn"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-sm text-neutral-600 hover:text-neutral-900"
|
||||
>
|
||||
加入社群
|
||||
</Link>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-12 border-t border-neutral-200 pt-8">
|
||||
<p className="text-center text-xs text-neutral-500">
|
||||
© {new Date().getFullYear()} Nomadro. Digital Nomad OS · 数字游民操作系统
|
||||
</p>
|
||||
))}
|
||||
<Link href="/about" className="text-xs text-neutral-500 active:text-violet-600">
|
||||
关于
|
||||
</Link>
|
||||
<Link href="/contact" className="text-xs text-neutral-500 active:text-violet-600">
|
||||
联系
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
@@ -1,116 +1,13 @@
|
||||
"use client";
|
||||
|
||||
import Link from "next/link";
|
||||
import { useState, useEffect } from "react";
|
||||
import { Menu, X } from "lucide-react";
|
||||
import { motion, AnimatePresence } from "framer-motion";
|
||||
import { NAV_LINKS } from "~/lib/data";
|
||||
import { Button } from "~/components/ui/button";
|
||||
|
||||
export function SiteHeader() {
|
||||
const [mobileOpen, setMobileOpen] = useState(false);
|
||||
const [scrolled, setScrolled] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
const onScroll = () => setScrolled(window.scrollY > 20);
|
||||
window.addEventListener("scroll", onScroll, { passive: true });
|
||||
return () => window.removeEventListener("scroll", onScroll);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<header
|
||||
className={`sticky top-0 z-50 w-full border-b transition-colors duration-300 ${
|
||||
scrolled
|
||||
? "border-neutral-200 bg-white/95 shadow-sm backdrop-blur-md"
|
||||
: "border-neutral-200/80 bg-white/80 backdrop-blur-md"
|
||||
}`}
|
||||
>
|
||||
<div className="container mx-auto flex h-16 items-center justify-between px-4 md:px-6">
|
||||
<Link href="/" className="flex items-center gap-2">
|
||||
<span className="text-xl font-semibold tracking-tight text-neutral-900">
|
||||
Nomadro
|
||||
</span>
|
||||
<span className="hidden text-xs text-neutral-500 md:inline">
|
||||
Digital Nomad OS / 数字游民操作系统
|
||||
</span>
|
||||
<header className="sticky top-0 z-50 border-b border-neutral-200/80 bg-white/90 backdrop-blur-sm">
|
||||
<div className="mx-auto flex h-14 max-w-lg items-center px-4 sm:h-16 sm:max-w-2xl sm:px-6 lg:max-w-4xl">
|
||||
<Link href="/" className="text-lg font-bold text-neutral-900">
|
||||
Nomadro
|
||||
</Link>
|
||||
|
||||
<nav className="hidden items-center gap-8 md:flex">
|
||||
{NAV_LINKS.map((link) => (
|
||||
<Link
|
||||
key={link.href}
|
||||
href={link.href}
|
||||
target={link.external ? "_blank" : undefined}
|
||||
rel={link.external ? "noopener noreferrer" : undefined}
|
||||
className="text-sm font-medium text-neutral-600 transition-colors hover:text-neutral-900"
|
||||
>
|
||||
{link.label}
|
||||
</Link>
|
||||
))}
|
||||
<Link
|
||||
href="https://meetup.hackrobot.cn"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<Button size="sm">开始行动</Button>
|
||||
</Link>
|
||||
</nav>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
className="flex h-10 w-10 items-center justify-center rounded-lg md:hidden"
|
||||
onClick={() => setMobileOpen(true)}
|
||||
aria-label="打开菜单"
|
||||
>
|
||||
<Menu className="h-5 w-5 text-neutral-700" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<AnimatePresence>
|
||||
{mobileOpen && (
|
||||
<motion.div
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
exit={{ opacity: 0 }}
|
||||
className="fixed inset-0 z-50 bg-white md:hidden"
|
||||
>
|
||||
<div className="flex h-16 items-center justify-between border-b px-4">
|
||||
<span className="text-lg font-semibold">Nomadro</span>
|
||||
<button
|
||||
type="button"
|
||||
className="flex h-10 w-10 items-center justify-center"
|
||||
onClick={() => setMobileOpen(false)}
|
||||
aria-label="关闭菜单"
|
||||
>
|
||||
<X className="h-5 w-5" />
|
||||
</button>
|
||||
</div>
|
||||
<nav className="flex flex-col gap-1 p-4">
|
||||
{NAV_LINKS.map((link) => (
|
||||
<Link
|
||||
key={link.href}
|
||||
href={link.href}
|
||||
target={link.external ? "_blank" : undefined}
|
||||
rel={link.external ? "noopener noreferrer" : undefined}
|
||||
className="rounded-lg px-4 py-3 text-base font-medium text-neutral-700 hover:bg-neutral-50"
|
||||
onClick={() => setMobileOpen(false)}
|
||||
>
|
||||
{link.label}
|
||||
</Link>
|
||||
))}
|
||||
<Link
|
||||
href="https://meetup.hackrobot.cn"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="mt-4 rounded-lg bg-neutral-900 px-4 py-3 text-center text-base font-medium text-white"
|
||||
onClick={() => setMobileOpen(false)}
|
||||
>
|
||||
开始行动
|
||||
</Link>
|
||||
</nav>
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
</header>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -9,7 +9,7 @@ const TAG_COLORS: Record<string, string> = {
|
||||
城市: "bg-blue-50 text-blue-700",
|
||||
专题: "bg-emerald-50 text-emerald-700",
|
||||
工具: "bg-amber-50 text-amber-700",
|
||||
活动: "bg-rose-50 text-rose-700",
|
||||
直播: "bg-rose-500/15 text-rose-300 ring-1 ring-rose-400/20",
|
||||
学习路径: "bg-violet-50 text-violet-700",
|
||||
会员: "bg-neutral-100 text-neutral-700",
|
||||
};
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -1,61 +1,72 @@
|
||||
"use client";
|
||||
|
||||
import Link from "next/link";
|
||||
import { MapPin, BookOpen, Crown } from "lucide-react";
|
||||
import { motion } from "framer-motion";
|
||||
import { FINAL_CTAS } from "~/lib/data";
|
||||
import { Button } from "~/components/ui/button";
|
||||
|
||||
const ICONS = [MapPin, BookOpen, Crown] as const;
|
||||
|
||||
export function FinalCta() {
|
||||
return (
|
||||
<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
|
||||
<section className="relative overflow-hidden py-20 md:py-28">
|
||||
{/* Background */}
|
||||
<div className="absolute inset-0 bg-gradient-to-br from-violet-950/80 via-[#0a0a1a] to-cyan-950/60" />
|
||||
<div
|
||||
className="absolute inset-0 opacity-30"
|
||||
style={{
|
||||
backgroundImage: `
|
||||
radial-gradient(circle at 20% 50%, rgba(139, 92, 246, 0.3) 0%, transparent 50%),
|
||||
radial-gradient(circle at 80% 50%, rgba(34, 211, 238, 0.2) 0%, transparent 50%)
|
||||
`,
|
||||
}}
|
||||
/>
|
||||
|
||||
<div className="container relative mx-auto px-4 md:px-6">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 12 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true, margin: "-80px" }}
|
||||
className="text-center text-2xl font-bold 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-xl text-center text-neutral-300"
|
||||
>
|
||||
先选择最适合你的入口，然后开始行动。
|
||||
</motion.p>
|
||||
<span className="text-4xl">✨</span>
|
||||
<h2 className="mt-4 text-2xl font-bold text-white md:text-3xl">
|
||||
从这里开始你的数字游民路径
|
||||
</h2>
|
||||
<p className="mx-auto mt-3 max-w-xl text-white/40">
|
||||
先选择最适合你的入口，然后开始行动。
|
||||
</p>
|
||||
</motion.div>
|
||||
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
className="mt-12 flex flex-col gap-4 sm:flex-row sm:flex-wrap sm:justify-center"
|
||||
className="mt-12 flex flex-col items-center gap-4 sm:flex-row sm:flex-wrap sm:justify-center"
|
||||
>
|
||||
{FINAL_CTAS.map((cta, i) => {
|
||||
const Icon = ICONS[i];
|
||||
return (
|
||||
{FINAL_CTAS.map((cta, i) => (
|
||||
<motion.div
|
||||
key={cta.label}
|
||||
initial={{ opacity: 0, y: 16 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ delay: i * 0.1 }}
|
||||
whileHover={{ scale: 1.03 }}
|
||||
>
|
||||
<Link
|
||||
key={cta.label}
|
||||
href={cta.href}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="group"
|
||||
>
|
||||
<Button
|
||||
variant="outline"
|
||||
variant={i === 0 ? "default" : "outline"}
|
||||
size="lg"
|
||||
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"
|
||||
className="min-w-[220px]"
|
||||
>
|
||||
<Icon className="mr-2 h-4 w-4" />
|
||||
<span className="mr-2">{cta.emoji}</span>
|
||||
{cta.label}
|
||||
</Button>
|
||||
</Link>
|
||||
);
|
||||
})}
|
||||
</motion.div>
|
||||
))}
|
||||
</motion.div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@@ -1,109 +1,97 @@
|
||||
"use client";
|
||||
|
||||
import Link from "next/link";
|
||||
import { MapPin, Zap, Users, ArrowRight } from "lucide-react";
|
||||
import { motion } from "framer-motion";
|
||||
import { ChevronRight } from "lucide-react";
|
||||
import { ENTRY_CARDS } from "~/lib/data";
|
||||
import { Particles } from "~/components/ui/particles";
|
||||
|
||||
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",
|
||||
const CARD_STYLE = {
|
||||
blue: {
|
||||
border: "border-blue-200/80",
|
||||
bar: "bg-blue-500",
|
||||
emoji: "bg-blue-50",
|
||||
},
|
||||
emerald: {
|
||||
border: "border-emerald-200/80",
|
||||
bar: "bg-emerald-500",
|
||||
emoji: "bg-emerald-50",
|
||||
},
|
||||
rose: {
|
||||
border: "border-rose-200/80",
|
||||
bar: "bg-rose-500",
|
||||
emoji: "bg-rose-50",
|
||||
},
|
||||
} as const;
|
||||
|
||||
export function Hero() {
|
||||
return (
|
||||
<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>
|
||||
<section
|
||||
className="flex flex-1 flex-col justify-center px-5 pb-8"
|
||||
style={{
|
||||
paddingTop: "max(2rem, calc(1.5rem + var(--safe-top)))",
|
||||
paddingBottom: "max(2rem, calc(1.5rem + var(--safe-bottom)))",
|
||||
}}
|
||||
>
|
||||
<div className="mx-auto w-full max-w-md sm:max-w-lg">
|
||||
{/* 标题 */}
|
||||
<div className="text-center">
|
||||
<h1 className="text-[2rem] font-bold leading-tight sm:text-5xl">
|
||||
<span className="text-gradient">数字游民</span>
|
||||
</h1>
|
||||
<p className="mt-2 text-lg font-medium tracking-[0.2em] text-neutral-400 sm:text-xl">
|
||||
nomadro
|
||||
</p>
|
||||
<p className="mx-auto mt-4 max-w-xs text-[13px] leading-relaxed text-neutral-500 sm:max-w-sm sm:text-sm">
|
||||
游民导航 · 地理套利 · 直播工具箱
|
||||
<br />
|
||||
一站开启自由生活
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<motion.div
|
||||
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"
|
||||
>
|
||||
{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 }}
|
||||
{/* 入口卡片 */}
|
||||
<div className="mt-10 flex flex-col gap-3">
|
||||
{ENTRY_CARDS.map((card) => {
|
||||
const style = CARD_STYLE[card.accent];
|
||||
return (
|
||||
<Link
|
||||
key={card.id}
|
||||
href={card.href}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className={`group relative flex items-center gap-3.5 overflow-hidden rounded-2xl border bg-white p-4 shadow-sm transition-all active:scale-[0.98] active:shadow-none sm:gap-4 sm:p-5 ${style.border}`}
|
||||
>
|
||||
<span
|
||||
className={`absolute left-0 top-0 h-full w-1 ${style.bar}`}
|
||||
/>
|
||||
|
||||
<span
|
||||
className={`flex h-12 w-12 shrink-0 items-center justify-center rounded-xl text-2xl ${style.emoji}`}
|
||||
>
|
||||
<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>
|
||||
{card.emoji}
|
||||
</span>
|
||||
|
||||
<div className="min-w-0 flex-1 pr-1">
|
||||
<div className="flex flex-wrap items-center gap-x-2 gap-y-0.5">
|
||||
<h2 className="text-[15px] font-semibold text-neutral-900 sm:text-base">
|
||||
{card.label}
|
||||
</h2>
|
||||
{card.id === "live" && (
|
||||
<span className="rounded bg-rose-500 px-1.5 py-px text-[10px] font-semibold leading-4 text-white">
|
||||
LIVE
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<p className="mt-0.5 text-sm font-medium text-neutral-700">
|
||||
{card.title}
|
||||
</p>
|
||||
<p className="mt-1 line-clamp-2 text-xs leading-relaxed text-neutral-400">
|
||||
{card.description}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<ChevronRight className="h-5 w-5 shrink-0 text-neutral-300" />
|
||||
</Link>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@@ -18,29 +18,33 @@ const ACCENT_COLORS = [
|
||||
"from-amber-500 to-orange-500",
|
||||
] as const;
|
||||
|
||||
|
||||
export function ValueGrid() {
|
||||
return (
|
||||
<section className="bg-gradient-to-b from-white to-violet-50/30 py-20 md:py-28">
|
||||
<section className="relative py-20 md:py-28">
|
||||
<div
|
||||
className="pointer-events-none absolute inset-x-0 top-0 h-px"
|
||||
style={{
|
||||
background:
|
||||
"linear-gradient(90deg, transparent, rgba(255,255,255,0.06), transparent)",
|
||||
}}
|
||||
/>
|
||||
<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 sm:grid-cols-2 lg:grid-cols-4">
|
||||
<div className="mt-14 grid gap-5 sm:grid-cols-2 lg:grid-cols-4">
|
||||
{VALUE_PROPOSITIONS.map((item, i) => {
|
||||
const Icon = ICON_MAP[item.icon];
|
||||
const gradient = ACCENT_COLORS[i];
|
||||
@@ -52,15 +56,20 @@ export function ValueGrid() {
|
||||
viewport={{ once: true, margin: "-40px" }}
|
||||
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"
|
||||
className="group glass-card glass-card-hover rounded-2xl p-6"
|
||||
>
|
||||
<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 className="flex items-center justify-between">
|
||||
<div className={`inline-flex h-11 w-11 items-center justify-center rounded-xl bg-gradient-to-br ${gradient} text-white shadow-lg transition-transform group-hover:scale-110`}>
|
||||
<Icon className="h-5 w-5" />
|
||||
</div>
|
||||
<span className="text-2xl opacity-40 transition-opacity group-hover:opacity-70">
|
||||
{item.emoji}
|
||||
</span>
|
||||
</div>
|
||||
<h3 className="mt-4 font-semibold text-neutral-900">
|
||||
<h3 className="mt-4 text-sm font-semibold leading-snug text-white/90">
|
||||
{item.title}
|
||||
</h3>
|
||||
<p className="mt-2 text-sm text-neutral-600">
|
||||
<p className="mt-2 text-xs leading-relaxed text-white/35">
|
||||
{item.description}
|
||||
</p>
|
||||
</motion.div>
|
||||
|
||||
53
components/ui/aurora-background.tsx
Normal file
53
components/ui/aurora-background.tsx
Normal file
@@ -0,0 +1,53 @@
|
||||
"use client";
|
||||
|
||||
export function AuroraBackground() {
|
||||
return (
|
||||
<div className="pointer-events-none absolute inset-0 overflow-hidden">
|
||||
{/* Base gradient */}
|
||||
<div className="absolute inset-0 bg-gradient-to-b from-[#0a0a1a] via-[#06060f] to-[#0d1117]" />
|
||||
|
||||
{/* Aurora layers */}
|
||||
<div
|
||||
className="animate-aurora absolute -left-1/4 top-0 h-[60%] w-[150%] opacity-40"
|
||||
style={{
|
||||
background:
|
||||
"radial-gradient(ellipse at 30% 0%, rgba(139, 92, 246, 0.35) 0%, transparent 60%)",
|
||||
}}
|
||||
/>
|
||||
<div
|
||||
className="animate-aurora absolute -right-1/4 top-[10%] h-[50%] w-[120%] opacity-30"
|
||||
style={{
|
||||
background:
|
||||
"radial-gradient(ellipse at 70% 20%, rgba(34, 211, 238, 0.3) 0%, transparent 55%)",
|
||||
animationDelay: "-4s",
|
||||
}}
|
||||
/>
|
||||
<div
|
||||
className="animate-aurora absolute left-0 top-[30%] h-[40%] w-full opacity-25"
|
||||
style={{
|
||||
background:
|
||||
"radial-gradient(ellipse at 50% 50%, rgba(217, 70, 239, 0.25) 0%, transparent 50%)",
|
||||
animationDelay: "-8s",
|
||||
}}
|
||||
/>
|
||||
|
||||
{/* Grid overlay */}
|
||||
<div
|
||||
className="absolute inset-0 opacity-[0.03]"
|
||||
style={{
|
||||
backgroundImage: `
|
||||
linear-gradient(rgba(255,255,255,0.5) 1px, transparent 1px),
|
||||
linear-gradient(90deg, rgba(255,255,255,0.5) 1px, transparent 1px)
|
||||
`,
|
||||
backgroundSize: "60px 60px",
|
||||
}}
|
||||
/>
|
||||
|
||||
{/* Scan line */}
|
||||
<div
|
||||
className="absolute left-0 right-0 h-px bg-gradient-to-r from-transparent via-cyan-400/20 to-transparent"
|
||||
style={{ animation: "scan-line 8s linear infinite" }}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -2,25 +2,21 @@ import * as React from "react";
|
||||
|
||||
export interface ButtonProps
|
||||
extends React.ButtonHTMLAttributes<HTMLButtonElement> {
|
||||
variant?: "default" | "outline" | "ghost" | "link";
|
||||
variant?: "default" | "outline" | "ghost";
|
||||
size?: "default" | "sm" | "lg";
|
||||
asChild?: boolean;
|
||||
}
|
||||
|
||||
const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
|
||||
({ className = "", variant = "default", size = "default", ...props }, ref) => {
|
||||
const base =
|
||||
"inline-flex items-center justify-center whitespace-nowrap rounded-lg font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50";
|
||||
"inline-flex items-center justify-center rounded-xl font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-violet-500 disabled:pointer-events-none disabled:opacity-50";
|
||||
const variants = {
|
||||
default:
|
||||
"bg-neutral-900 text-white hover:bg-neutral-800 focus-visible:ring-neutral-900",
|
||||
outline:
|
||||
"border border-neutral-200 bg-transparent hover:bg-neutral-50 focus-visible:ring-neutral-400",
|
||||
ghost: "hover:bg-neutral-100 focus-visible:ring-neutral-400",
|
||||
link: "text-neutral-900 underline-offset-4 hover:underline focus-visible:ring-neutral-400",
|
||||
default: "bg-violet-600 text-white hover:bg-violet-700 active:bg-violet-800",
|
||||
outline: "border border-neutral-200 text-neutral-700 hover:bg-neutral-50",
|
||||
ghost: "text-neutral-600 hover:bg-neutral-100",
|
||||
};
|
||||
const sizes = {
|
||||
default: "h-10 px-4 py-2 text-sm",
|
||||
default: "h-10 px-4 text-sm",
|
||||
sm: "h-8 px-3 text-xs",
|
||||
lg: "h-12 px-6 text-base",
|
||||
};
|
||||
|
||||
37
components/ui/floating-emojis.tsx
Normal file
37
components/ui/floating-emojis.tsx
Normal file
@@ -0,0 +1,37 @@
|
||||
"use client";
|
||||
|
||||
import { FLOATING_EMOJIS } from "~/lib/data";
|
||||
|
||||
const POSITIONS = [
|
||||
{ left: "8%", top: "18%", size: "text-2xl", delay: 0 },
|
||||
{ left: "85%", top: "12%", size: "text-3xl", delay: 1 },
|
||||
{ left: "15%", top: "65%", size: "text-xl", delay: 2 },
|
||||
{ left: "78%", top: "55%", size: "text-2xl", delay: 0.5 },
|
||||
{ left: "5%", top: "42%", size: "text-lg", delay: 1.5 },
|
||||
{ left: "92%", top: "38%", size: "text-xl", delay: 2.5 },
|
||||
{ left: "25%", top: "8%", size: "text-lg", delay: 3 },
|
||||
{ left: "65%", top: "78%", size: "text-2xl", delay: 1.2 },
|
||||
{ left: "45%", top: "88%", size: "text-lg", delay: 0.8 },
|
||||
{ left: "55%", top: "5%", size: "text-xl", delay: 2.2 },
|
||||
] as const;
|
||||
|
||||
export function FloatingEmojis() {
|
||||
return (
|
||||
<div className="pointer-events-none absolute inset-0 overflow-hidden">
|
||||
{POSITIONS.map((pos, i) => (
|
||||
<span
|
||||
key={i}
|
||||
className={`absolute select-none opacity-[0.15] ${pos.size}`}
|
||||
style={{
|
||||
left: pos.left,
|
||||
top: pos.top,
|
||||
animation: `bounce-gentle ${4 + (i % 3)}s ease-in-out infinite`,
|
||||
animationDelay: `${pos.delay}s`,
|
||||
}}
|
||||
>
|
||||
{FLOATING_EMOJIS[i]}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
117
components/ui/globe-animation.tsx
Normal file
117
components/ui/globe-animation.tsx
Normal file
@@ -0,0 +1,117 @@
|
||||
"use client";
|
||||
|
||||
export function GlobeAnimation() {
|
||||
return (
|
||||
<div className="pointer-events-none absolute right-[-5%] top-[15%] hidden opacity-20 lg:block xl:right-[5%] xl:opacity-30">
|
||||
<div className="relative h-72 w-72 xl:h-96 xl:w-96">
|
||||
{/* Orbit ring 1 */}
|
||||
<div className="animate-orbit absolute inset-0">
|
||||
<svg viewBox="0 0 200 200" className="h-full w-full">
|
||||
<ellipse
|
||||
cx="100"
|
||||
cy="100"
|
||||
rx="95"
|
||||
ry="35"
|
||||
fill="none"
|
||||
stroke="url(#orbitGrad1)"
|
||||
strokeWidth="0.5"
|
||||
strokeDasharray="4 6"
|
||||
/>
|
||||
<circle cx="195" cy="100" r="3" fill="#22d3ee" opacity="0.8">
|
||||
<animate attributeName="opacity" values="0.4;1;0.4" dur="2s" repeatCount="indefinite" />
|
||||
</circle>
|
||||
<defs>
|
||||
<linearGradient id="orbitGrad1" x1="0%" y1="0%" x2="100%" y2="0%">
|
||||
<stop offset="0%" stopColor="#8b5cf6" stopOpacity="0" />
|
||||
<stop offset="50%" stopColor="#8b5cf6" stopOpacity="0.6" />
|
||||
<stop offset="100%" stopColor="#22d3ee" stopOpacity="0" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
{/* Orbit ring 2 */}
|
||||
<div className="animate-orbit-reverse absolute inset-4">
|
||||
<svg viewBox="0 0 200 200" className="h-full w-full">
|
||||
<ellipse
|
||||
cx="100"
|
||||
cy="100"
|
||||
rx="80"
|
||||
ry="80"
|
||||
fill="none"
|
||||
stroke="url(#orbitGrad2)"
|
||||
strokeWidth="0.3"
|
||||
strokeDasharray="2 8"
|
||||
transform="rotate(-30 100 100)"
|
||||
/>
|
||||
<circle cx="100" cy="20" r="2.5" fill="#d946ef" opacity="0.7">
|
||||
<animate attributeName="opacity" values="0.3;0.9;0.3" dur="3s" repeatCount="indefinite" />
|
||||
</circle>
|
||||
<defs>
|
||||
<linearGradient id="orbitGrad2" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" stopColor="#d946ef" stopOpacity="0.2" />
|
||||
<stop offset="100%" stopColor="#34d399" stopOpacity="0.2" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
{/* Globe */}
|
||||
<div className="absolute inset-[25%] flex items-center justify-center">
|
||||
<svg viewBox="0 0 120 120" className="h-full w-full">
|
||||
<defs>
|
||||
<radialGradient id="globeGrad" cx="35%" cy="30%">
|
||||
<stop offset="0%" stopColor="#22d3ee" stopOpacity="0.3" />
|
||||
<stop offset="50%" stopColor="#8b5cf6" stopOpacity="0.15" />
|
||||
<stop offset="100%" stopColor="#06060f" stopOpacity="0.05" />
|
||||
</radialGradient>
|
||||
<linearGradient id="globeLine" x1="0%" y1="0%" x2="100%" y2="0%">
|
||||
<stop offset="0%" stopColor="#22d3ee" stopOpacity="0.1" />
|
||||
<stop offset="50%" stopColor="#8b5cf6" stopOpacity="0.3" />
|
||||
<stop offset="100%" stopColor="#22d3ee" stopOpacity="0.1" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<circle cx="60" cy="60" r="55" fill="url(#globeGrad)" stroke="url(#globeLine)" strokeWidth="0.8" />
|
||||
{/* Latitude lines */}
|
||||
{[30, 45, 60, 75, 90].map((lat) => {
|
||||
const ry = Math.sin((lat * Math.PI) / 180) * 55;
|
||||
return (
|
||||
<ellipse
|
||||
key={lat}
|
||||
cx="60"
|
||||
cy="60"
|
||||
rx="55"
|
||||
ry={ry}
|
||||
fill="none"
|
||||
stroke="#22d3ee"
|
||||
strokeWidth="0.3"
|
||||
opacity="0.2"
|
||||
/>
|
||||
);
|
||||
})}
|
||||
{/* Longitude lines */}
|
||||
{[0, 30, 60, 90, 120, 150].map((lon) => (
|
||||
<ellipse
|
||||
key={lon}
|
||||
cx="60"
|
||||
cy="60"
|
||||
rx={Math.cos((lon * Math.PI) / 180) * 8 + 8}
|
||||
ry="55"
|
||||
fill="none"
|
||||
stroke="#8b5cf6"
|
||||
strokeWidth="0.3"
|
||||
opacity="0.15"
|
||||
transform={`rotate(${lon} 60 60)`}
|
||||
/>
|
||||
))}
|
||||
{/* Glow dot */}
|
||||
<circle cx="42" cy="38" r="4" fill="#22d3ee" opacity="0.6">
|
||||
<animate attributeName="r" values="3;5;3" dur="4s" repeatCount="indefinite" />
|
||||
<animate attributeName="opacity" values="0.3;0.8;0.3" dur="4s" repeatCount="indefinite" />
|
||||
</circle>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,11 +1,20 @@
|
||||
"use client";
|
||||
|
||||
const PARTICLES = Array.from({ length: 50 }, (_, i) => ({
|
||||
size: 4 + (i % 6),
|
||||
const COLOR_MAP = {
|
||||
cyan: "from-cyan-400/60 to-cyan-300/30",
|
||||
violet: "from-violet-400/60 to-violet-300/30",
|
||||
fuchsia: "from-fuchsia-400/60 to-fuchsia-300/30",
|
||||
} as const;
|
||||
|
||||
type ParticleColor = keyof typeof COLOR_MAP;
|
||||
|
||||
const PARTICLES = Array.from({ length: 60 }, (_, i) => ({
|
||||
size: 2 + (i % 5),
|
||||
left: (i * 17.3) % 100,
|
||||
top: (i * 23.7) % 100,
|
||||
duration: 10 + (i % 8),
|
||||
delay: (i * 0.3) % 5,
|
||||
duration: 12 + (i % 10),
|
||||
delay: (i * 0.4) % 6,
|
||||
color: (i % 3 === 0 ? "cyan" : i % 3 === 1 ? "violet" : "fuchsia") as ParticleColor,
|
||||
}));
|
||||
|
||||
export function Particles() {
|
||||
@@ -14,13 +23,13 @@ export function Particles() {
|
||||
{PARTICLES.map((p, i) => (
|
||||
<div
|
||||
key={i}
|
||||
className="absolute rounded-full bg-gradient-to-br from-violet-400/50 via-fuchsia-400/40 to-cyan-400/50 blur-[1px]"
|
||||
className={`absolute rounded-full bg-gradient-to-br ${COLOR_MAP[p.color]} blur-[0.5px]`}
|
||||
style={{
|
||||
width: `${p.size}px`,
|
||||
height: `${p.size}px`,
|
||||
left: `${p.left}%`,
|
||||
top: `${p.top}%`,
|
||||
animation: `float ${p.duration}s ease-in-out infinite`,
|
||||
animation: `float ${p.duration}s ease-in-out infinite, twinkle ${3 + (i % 4)}s ease-in-out infinite`,
|
||||
animationDelay: `${p.delay}s`,
|
||||
}}
|
||||
/>
|
||||
|
||||
4
deploy/Caddyfile
Normal file
4
deploy/Caddyfile
Normal file
@@ -0,0 +1,4 @@
|
||||
nomadro.com, www.nomadro.com {
|
||||
encode gzip
|
||||
reverse_proxy 127.0.0.1:4003
|
||||
}
|
||||
15
deploy/deploy.sh
Normal file
15
deploy/deploy.sh
Normal file
@@ -0,0 +1,15 @@
|
||||
#!/bin/bash
|
||||
# 日常更新部署
|
||||
set -euo pipefail
|
||||
|
||||
APP_DIR="/var/www/nomadro.com"
|
||||
BRANCH="${BRANCH:-test}"
|
||||
|
||||
cd "$APP_DIR"
|
||||
git fetch origin
|
||||
git checkout "$BRANCH"
|
||||
git pull origin "$BRANCH"
|
||||
pnpm install --frozen-lockfile
|
||||
pnpm build
|
||||
systemctl restart nomadro
|
||||
echo "Deployed $(git rev-parse --short HEAD)"
|
||||
15
deploy/nomadro.service
Normal file
15
deploy/nomadro.service
Normal file
@@ -0,0 +1,15 @@
|
||||
[Unit]
|
||||
Description=Nomadro Next.js App
|
||||
After=network.target
|
||||
|
||||
[Service]
|
||||
Type=simple
|
||||
WorkingDirectory=/var/www/nomadro.com
|
||||
Environment=PORT=4003
|
||||
Environment=NODE_ENV=production
|
||||
ExecStart=/usr/bin/pnpm start
|
||||
Restart=on-failure
|
||||
RestartSec=5
|
||||
|
||||
[Install]
|
||||
WantedBy=multi-user.target
|
||||
78
deploy/setup-server.sh
Normal file
78
deploy/setup-server.sh
Normal file
@@ -0,0 +1,78 @@
|
||||
#!/bin/bash
|
||||
# 首次部署：安装依赖、克隆代码、配置 Caddy + systemd
|
||||
# 不影响 nginx:23794 / sing-box 等现有业务
|
||||
set -euo pipefail
|
||||
|
||||
APP_DIR="/var/www/nomadro.com"
|
||||
REPO_URL="${REPO_URL:-https://gitea.dsx2020.com/eric/gitlab-instance-0a899031_nomadro.git}"
|
||||
BRANCH="${BRANCH:-test}"
|
||||
GIT_USER="${GIT_USER:-eric}"
|
||||
GIT_PASS="${GIT_PASS:?Set GIT_PASS}"
|
||||
|
||||
echo "==> Install Node.js 20"
|
||||
if ! command -v node >/dev/null 2>&1; then
|
||||
curl -fsSL https://deb.nodesource.com/setup_20.x | bash -
|
||||
apt-get install -y nodejs
|
||||
fi
|
||||
|
||||
echo "==> Install pnpm"
|
||||
if ! command -v pnpm >/dev/null 2>&1; then
|
||||
corepack enable
|
||||
corepack prepare pnpm@10.25.0 --activate
|
||||
fi
|
||||
|
||||
echo "==> Install Caddy"
|
||||
if ! command -v caddy >/dev/null 2>&1; then
|
||||
apt-get install -y debian-keyring debian-archive-keyring apt-transport-https curl
|
||||
curl -1sLf 'https://dl.caddyserver.com/api/download/installer/deb/caddy-stable/caddy-stable.list' \
|
||||
| tee /etc/apt/sources.list.d/caddy-stable.list
|
||||
curl -1sLf 'https://dl.caddyserver.com/api/download/installer/deb/caddy-stable/caddy-stable-archive-keyring.gpg' \
|
||||
| tee /usr/share/keyrings/caddy-stable-archive-keyring.gpg >/dev/null
|
||||
apt-get update
|
||||
apt-get install -y caddy
|
||||
fi
|
||||
|
||||
echo "==> Clone or update app"
|
||||
mkdir -p /var/www
|
||||
if [ -d "$APP_DIR/.git" ]; then
|
||||
cd "$APP_DIR"
|
||||
git fetch origin
|
||||
git checkout "$BRANCH"
|
||||
git pull origin "$BRANCH"
|
||||
else
|
||||
git clone -b "$BRANCH" "https://${GIT_USER}:${GIT_PASS}@${REPO_URL#https://}" "$APP_DIR"
|
||||
cd "$APP_DIR"
|
||||
fi
|
||||
|
||||
echo "==> Build app"
|
||||
pnpm install --frozen-lockfile
|
||||
pnpm build
|
||||
|
||||
echo "==> Configure Caddy (only nomadro.com, keep nginx untouched)"
|
||||
CADDY_MAIN="/etc/caddy/Caddyfile"
|
||||
SNIPPET="# nomadro.com - managed by nomadro deploy"
|
||||
if [ -f "$CADDY_MAIN" ] && grep -q "nomadro.com" "$CADDY_MAIN"; then
|
||||
echo "Caddy nomadro.com block already exists"
|
||||
else
|
||||
if [ ! -f "$CADDY_MAIN" ] || [ ! -s "$CADDY_MAIN" ]; then
|
||||
cp "$APP_DIR/deploy/Caddyfile" "$CADDY_MAIN"
|
||||
else
|
||||
echo "" >> "$CADDY_MAIN"
|
||||
echo "$SNIPPET" >> "$CADDY_MAIN"
|
||||
cat "$APP_DIR/deploy/Caddyfile" >> "$CADDY_MAIN"
|
||||
fi
|
||||
fi
|
||||
caddy validate --config "$CADDY_MAIN"
|
||||
systemctl enable caddy
|
||||
systemctl reload caddy || systemctl restart caddy
|
||||
|
||||
echo "==> Configure systemd service"
|
||||
cp "$APP_DIR/deploy/nomadro.service" /etc/systemd/system/nomadro.service
|
||||
systemctl daemon-reload
|
||||
systemctl enable nomadro
|
||||
systemctl restart nomadro
|
||||
|
||||
echo "==> Done"
|
||||
systemctl status nomadro --no-pager | head -10
|
||||
systemctl status caddy --no-pager | head -10
|
||||
ss -tlnp | grep -E ':80 |:443 |:4003 ' || true
|
||||
104
lib/data.ts
104
lib/data.ts
@@ -7,21 +7,21 @@ export const NAV_LINKS = [
|
||||
{ href: "/", label: "首页", external: false },
|
||||
{ href: "https://nav.hackrobot.cn", label: "游民导航", external: true },
|
||||
{ href: "https://hackrobot.cn", label: "地理套利", external: true },
|
||||
{ href: "https://salon.hackrobot.cn", label: "同城沙龙", external: true },
|
||||
{ href: "https://nomadro.live", label: "直播工具箱", external: true },
|
||||
{ href: "https://digital.hackrobot.cn", label: "学习路径", external: true },
|
||||
{ href: "https://vip.hackrobot.cn", label: "会员社区", external: true },
|
||||
{ href: "/about", label: "关于", external: false },
|
||||
] as const;
|
||||
|
||||
export const HERO_TAGS = [
|
||||
"城市探索",
|
||||
"地理套利",
|
||||
"AI自动化",
|
||||
"社群连接",
|
||||
"同城沙龙",
|
||||
"🌍 全球旅居",
|
||||
"💰 地理套利",
|
||||
"🤖 AI 自动化",
|
||||
"🎬 直播变现",
|
||||
"🧭 游民导航",
|
||||
] as const;
|
||||
|
||||
/** 入口页主卡片：游民导航、地理套利、同城沙龙 */
|
||||
/** 入口页主卡片：游民导航、地理套利、直播工具箱 */
|
||||
export const ENTRY_CARDS = [
|
||||
{
|
||||
id: "nav",
|
||||
@@ -31,24 +31,27 @@ export const ENTRY_CARDS = [
|
||||
href: "https://nav.hackrobot.cn",
|
||||
icon: "MapPin",
|
||||
accent: "blue",
|
||||
emoji: "🧭",
|
||||
},
|
||||
{
|
||||
id: "arbitrage",
|
||||
label: "地理套利",
|
||||
title: "AI自动化杠杆",
|
||||
title: "AI 自动化杠杆",
|
||||
description: "低成本工作室、自建云手机、自动化系统",
|
||||
href: "https://hackrobot.cn",
|
||||
icon: "Zap",
|
||||
accent: "emerald",
|
||||
emoji: "⚡",
|
||||
},
|
||||
{
|
||||
id: "salon",
|
||||
label: "同城沙龙",
|
||||
title: "线下连接与交流",
|
||||
description: "城市聚会、主题沙龙、同频人面对面",
|
||||
href: "https://salon.hackrobot.cn",
|
||||
icon: "Users",
|
||||
accent: "amber",
|
||||
id: "live",
|
||||
label: "直播工具箱",
|
||||
title: "随时随地开播",
|
||||
description: "推流工具、场景模板、直播变现一站搞定",
|
||||
href: "https://nomadro.live",
|
||||
icon: "Radio",
|
||||
accent: "rose",
|
||||
emoji: "🎬",
|
||||
},
|
||||
] as const;
|
||||
|
||||
@@ -58,24 +61,28 @@ export const VALUE_PROPOSITIONS = [
|
||||
icon: "MapPin",
|
||||
title: "找到适合长期旅居和远程工作的城市",
|
||||
description: "从大理到深圳，从成都到杭州，帮你筛选真正适合数字游民生活的目的地。",
|
||||
emoji: "🏝️",
|
||||
},
|
||||
{
|
||||
id: "income",
|
||||
icon: "TrendingUp",
|
||||
title: "建立可持续的远程技能与收入结构",
|
||||
description: "不是一夜暴富，而是可复制、可积累的技能变现路径。",
|
||||
emoji: "📈",
|
||||
},
|
||||
{
|
||||
id: "tools",
|
||||
icon: "Zap",
|
||||
title: "用工具、系统和自动化放大个人能力",
|
||||
description: "减少重复劳动，把时间用在真正重要的事情上。",
|
||||
emoji: "🛠️",
|
||||
},
|
||||
{
|
||||
id: "community",
|
||||
icon: "Users",
|
||||
title: "进入同频社区，减少孤独和试错成本",
|
||||
description: "找到同类人，分享经验，互相支持，少走弯路。",
|
||||
emoji: "🤝",
|
||||
},
|
||||
] as const;
|
||||
|
||||
@@ -88,24 +95,27 @@ export const ENTRY_PATHS = [
|
||||
href: "https://nav.hackrobot.cn",
|
||||
icon: "MapPin",
|
||||
accent: "blue",
|
||||
emoji: "🧭",
|
||||
},
|
||||
{
|
||||
id: "arbitrage",
|
||||
title: "地理套利 · AI自动化杠杆",
|
||||
title: "地理套利 · AI 自动化杠杆",
|
||||
description: "适合想搭建低成本工作室、自建云手机、自动化系统的人",
|
||||
cta: "进入工作室",
|
||||
href: "https://hackrobot.cn",
|
||||
icon: "Zap",
|
||||
accent: "green",
|
||||
emoji: "⚡",
|
||||
},
|
||||
{
|
||||
id: "salon",
|
||||
title: "同城沙龙 · 线下连接",
|
||||
description: "适合想参加城市聚会、主题沙龙、面对面交流的人",
|
||||
cta: "探索同城活动",
|
||||
href: "https://salon.hackrobot.cn",
|
||||
icon: "Users",
|
||||
accent: "amber",
|
||||
id: "live",
|
||||
title: "直播工具箱 · 随时随地开播",
|
||||
description: "适合想用直播变现、搭建个人 IP、远程开播的数字游民",
|
||||
cta: "进入直播工具箱",
|
||||
href: "https://nomadro.live",
|
||||
icon: "Radio",
|
||||
accent: "rose",
|
||||
emoji: "🎬",
|
||||
},
|
||||
] as const;
|
||||
|
||||
@@ -114,21 +124,25 @@ export const METHODOLOGY_SYSTEMS = [
|
||||
id: "location",
|
||||
title: "地点自由",
|
||||
description: "选择适合远程生活的城市，平衡成本、网速、社群与生活方式。",
|
||||
emoji: "✈️",
|
||||
},
|
||||
{
|
||||
id: "income",
|
||||
title: "收入结构",
|
||||
description: "建立不依赖固定地点的收入来源，技能、内容、自动化缺一不可。",
|
||||
emoji: "💎",
|
||||
},
|
||||
{
|
||||
id: "tools",
|
||||
title: "工具杠杆",
|
||||
description: "用系统和工具放大个人产出，把时间用在创造价值上。",
|
||||
emoji: "⚙️",
|
||||
},
|
||||
{
|
||||
id: "community",
|
||||
title: "社群连接",
|
||||
description: "同频人的归属感，减少孤独，加速成长，共享信息与机会。",
|
||||
emoji: "🌐",
|
||||
},
|
||||
] as const;
|
||||
|
||||
@@ -139,6 +153,7 @@ export const SCENARIOS = [
|
||||
path: "先看学习路径",
|
||||
cta: "查看学习专题",
|
||||
href: "https://digital.hackrobot.cn",
|
||||
emoji: "🌱",
|
||||
},
|
||||
{
|
||||
id: "skill",
|
||||
@@ -146,13 +161,15 @@ export const SCENARIOS = [
|
||||
path: "先看实战资源",
|
||||
cta: "进入学习与专题",
|
||||
href: "https://digital.hackrobot.cn",
|
||||
emoji: "🚀",
|
||||
},
|
||||
{
|
||||
id: "city",
|
||||
pain: "我想换个城市生活，但不知道先去哪",
|
||||
path: "先看城市探索",
|
||||
cta: "探索城市与社区",
|
||||
href: "https://meetup.hackrobot.cn",
|
||||
id: "live",
|
||||
pain: "我想用直播变现，但不知道从哪开始",
|
||||
path: "先看直播工具箱",
|
||||
cta: "进入直播工具箱",
|
||||
href: "https://nomadro.live",
|
||||
emoji: "🎬",
|
||||
},
|
||||
{
|
||||
id: "deep",
|
||||
@@ -160,21 +177,25 @@ export const SCENARIOS = [
|
||||
path: "进入会员社区",
|
||||
cta: "进入会员中心",
|
||||
href: "https://vip.hackrobot.cn",
|
||||
emoji: "👑",
|
||||
},
|
||||
] as const;
|
||||
|
||||
export const ECOSYSTEM_COLUMNS = [
|
||||
{
|
||||
title: "城市 / 活动 / 社群",
|
||||
items: ["城市库", "路线", "聚会", "微信群", "线下连接"],
|
||||
title: "城市 / 直播 / 社群",
|
||||
items: ["城市库", "直播工具", "推流模板", "微信群", "线上连接"],
|
||||
emoji: "🌍",
|
||||
},
|
||||
{
|
||||
title: "学习 / 工具 / 专题",
|
||||
items: ["电子书", "教程", "工具", "训练营", "学习路径"],
|
||||
emoji: "📚",
|
||||
},
|
||||
{
|
||||
title: "会员 / 私域 / 更新",
|
||||
items: ["会员权益", "视频", "社群", "问答", "持续更新"],
|
||||
emoji: "💫",
|
||||
},
|
||||
] as const;
|
||||
|
||||
@@ -205,11 +226,11 @@ export const CONTENT_PREVIEW_ITEMS = [
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
type: "活动",
|
||||
tag: "本周社群动态",
|
||||
title: "深圳 · 3 月线下聚会",
|
||||
summary: "12 人已报名，本周六南山见",
|
||||
href: "https://meetup.hackrobot.cn",
|
||||
type: "直播",
|
||||
tag: "直播工具箱",
|
||||
title: "游民直播开播指南",
|
||||
summary: "推流设置、场景搭建、变现路径一站搞定",
|
||||
href: "https://nomadro.live",
|
||||
},
|
||||
{
|
||||
id: "5",
|
||||
@@ -233,19 +254,26 @@ export const TRUST_PRINCIPLES = [
|
||||
{
|
||||
title: "长期主义",
|
||||
description: "不是速成课，不是躺赚项目，而是一套可持续的生活方式系统。",
|
||||
emoji: "🌿",
|
||||
},
|
||||
{
|
||||
title: "系统搭建",
|
||||
description: "从选择城市到建立收入，再到工具和社群，每一步都有清晰路径。",
|
||||
emoji: "🏗️",
|
||||
},
|
||||
{
|
||||
title: "同频连接",
|
||||
description: "适合愿意行动、愿意搭建自己路径的人，找到同类，一起前行。",
|
||||
emoji: "🔗",
|
||||
},
|
||||
] as const;
|
||||
|
||||
export const FINAL_CTAS = [
|
||||
{ label: "看城市与社区", href: "https://meetup.hackrobot.cn" },
|
||||
{ label: "看专题与学习路径", href: "https://digital.hackrobot.cn" },
|
||||
{ label: "进会员与私域成长", href: "https://vip.hackrobot.cn" },
|
||||
{ label: "进入直播工具箱", href: "https://nomadro.live", emoji: "🎬" },
|
||||
{ label: "看专题与学习路径", href: "https://digital.hackrobot.cn", emoji: "📚" },
|
||||
{ label: "进会员与私域成长", href: "https://vip.hackrobot.cn", emoji: "👑" },
|
||||
] as const;
|
||||
|
||||
export const FLOATING_EMOJIS = [
|
||||
"✈️", "🌍", "💻", "☕", "🏖️", "📡", "🎧", "🌅", "🧳", "📱",
|
||||
] as const;
|
||||
|
||||
@@ -1,3 +1,8 @@
|
||||
#!/bin/bash
|
||||
export PORT=4003
|
||||
exec npm run start
|
||||
set -euo pipefail
|
||||
|
||||
export PORT="${PORT:-4003}"
|
||||
export NODE_ENV=production
|
||||
|
||||
cd "$(dirname "$0")"
|
||||
exec pnpm start
|
||||
|
||||
Reference in New Issue
Block a user