eric/gitlab-instance-0a899031_cnomadcna
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

'grok建议功能'

Browse Source
This commit is contained in:
eric
2026-03-09 00:05:00 -05:00
parent 41487dc22e
commit 8eef28536e
14 changed files with 1044 additions and 87 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
app/components/Footer.tsx
View File

@@ -15,8 +15,9 @@ const footerSections = [
{
titleKey: "tools" as const,
links: [
{ labelKey: "climate" as const, href: "#" },
{ labelKey: "cost" as const, href: "#" },
{ labelKey: "dashboard" as const, href: "/dashboard" },
{ labelKey: "cost" as const, href: "/tools" },
{ labelKey: "ai" as const, href: "/ai" },
{ labelKey: "coworking" as const, href: "#" },
{ labelKey: "compare" as const, href: "#" },
],
@@ -27,6 +28,7 @@ const footerSections = [
{ labelKey: "guide" as const, href: "#" },
{ labelKey: "cityGuide" as const, href: "#" },
{ labelKey: "stories" as const, href: "#" },
{ labelKey: "report" as const, href: "/report" },
{ labelKey: "faq" as const, href: "#" },
],
},
@@ -34,6 +36,8 @@ const footerSections = [
titleKey: "about" as const,
links: [
{ labelKey: "aboutUs" as const, href: "/about" },
{ labelKey: "pricing" as const, href: "/pricing" },
{ labelKey: "gigs" as const, href: "/gigs" },
{ labelKey: "recruit" as const, href: "/jobs" },
{ labelKey: "terms" as const, href: "#" },
{ labelKey: "privacy" as const, href: "#" },

88
app/components/HeroSection.tsx
View File

@@ -2,6 +2,7 @@
import { useState } from "react";
import { Link } from "@/i18n/navigation";
import { useTranslation } from "@/i18n/navigation";
const avatarPhotos = [
"https://i.pravatar.cc/150?img=32",
@@ -18,14 +19,16 @@ const avatarPhotos = [
];
const features = [
{ icon: "🍹", text: "每年在 30+ 城市参加线下聚会" },
{ icon: "❤️", text: "结识新朋友，约会交友" },
{ icon: "🧪", text: "研究目的地，找到最适合居住和工作的地方" },
{ icon: "🌎", text: "追踪你的旅行，记录你去过的地方" },
{ icon: "💬", text: "加入社群聊天，在旅途中找到你的归属" },
{ icon: "📍", key: "feature1" as const },
{ icon: "📊", key: "feature2" as const },
{ icon: "👥", key: "feature3" as const },
{ icon: "💰", key: "feature4" as const },
{ icon: "📈", key: "feature5" as const },
];
export default function HeroSection() {
const { t } = useTranslation("common");
const { t: tHero } = useTranslation("hero");
const [email, setEmail] = useState("");
const handleJoin = (e: React.FormEvent) => {
@@ -57,29 +60,28 @@ export default function HeroSection() {
<div className="flex flex-col lg:flex-row lg:items-start lg:gap-10 xl:gap-16">
{/* Left Column */}
<div className="flex-1 min-w-0">
<span className="inline-flex items-center gap-1.5 text-xs font-semibold text-orange-700 bg-orange-100 px-3 py-1.5 rounded-full mb-5">
🏆 中国数字游民社区 · 始于 2024
<span className="inline-flex items-center gap-1.5 text-xs font-semibold text-orange-700 dark:text-orange-400 bg-orange-100 dark:bg-orange-900/30 px-3 py-1.5 rounded-full mb-5">
🏆 {tHero("badge")}
</span>
<h1 className="text-3xl sm:text-4xl md:text-5xl lg:text-6xl font-bold tracking-tight leading-tight mb-5">
<span className="hero-gradient-text">探索中国</span>
<span className="hero-gradient-text">{tHero("title")}</span>
<br />
<span className="text-gray-900">远程工作，自由生活</span>
<span className="text-gray-900 dark:text-gray-100">{tHero("titleSuffix")}</span>
</h1>
<p className="text-base sm:text-lg text-gray-500 max-w-2xl mb-7 leading-relaxed">
加入全球华人数字游民社区，发现中国最适合远程工作和生活的城市，
从大理到成都，从深圳到杭州，开启你的游牧人生
<p className="text-base sm:text-lg text-gray-500 dark:text-gray-400 max-w-2xl mb-7 leading-relaxed">
{tHero("subtitle")}
</p>
<div className="space-y-2.5 mb-8">
{features.map((f) => (
<div key={f.text} className="flex items-start gap-2.5">
<div key={f.key} className="flex items-start gap-2.5">
<span className="text-base sm:text-lg shrink-0 mt-0.5">
{f.icon}
</span>
<span className="text-sm sm:text-base text-gray-600 underline decoration-gray-300 underline-offset-2">
{f.text}
<span className="text-sm sm:text-base text-gray-600 dark:text-gray-400 underline decoration-gray-300 dark:decoration-gray-600 underline-offset-2">
{tHero(f.key)}
</span>
</div>
))}
@@ -92,26 +94,26 @@ export default function HeroSection() {
key={i}
src={src}
alt=""
className="w-8 h-8 rounded-full border-2 border-white shadow-sm object-cover"
className="w-8 h-8 rounded-full border-2 border-white dark:border-gray-800 shadow-sm object-cover"
/>
))}
</div>
<span className="text-sm text-gray-500">
<strong className="text-gray-900">5,000+</strong> 成员已加入
<span className="text-sm text-gray-500 dark:text-gray-400">
<strong className="text-gray-900 dark:text-gray-100">5,000+</strong> 成员已加入
</span>
</div>
<div className="pt-7 border-t border-gray-100">
<p className="text-xs text-gray-400 uppercase tracking-wider mb-3">
<div className="pt-7 border-t border-gray-100 dark:border-gray-800">
<p className="text-xs text-gray-400 dark:text-gray-500 uppercase tracking-wider mb-3">
媒体报道
</p>
<div className="flex flex-wrap items-center gap-x-8 gap-y-2">
{["36氪", "少数派", "极客公园", "虎嗅", "创业邦", "澎湃新闻"].map(
(name) => (
<span
key={name}
className="text-sm font-semibold text-gray-300 hover:text-gray-400 transition-colors cursor-default"
>
<span
key={name}
className="text-sm font-semibold text-gray-300 dark:text-gray-600 hover:text-gray-400 dark:hover:text-gray-500 transition-colors cursor-default"
>
{name}
</span>
),
@@ -122,7 +124,7 @@ export default function HeroSection() {
{/* Right Column: Video + Email */}
<div className="lg:w-[360px] xl:w-[400px] shrink-0 mt-10 lg:mt-4">
<div className="bg-white rounded-2xl shadow-xl overflow-hidden border border-gray-100">
<div className="bg-white dark:bg-gray-900 rounded-2xl shadow-xl overflow-hidden border border-gray-100 dark:border-gray-800">
<div className="relative h-48 sm:h-56 bg-gradient-to-br from-emerald-400 via-teal-500 to-cyan-600 flex items-center justify-center cursor-pointer group overflow-hidden">
<div className="absolute inset-0 opacity-20">
<div className="absolute top-4 left-4 w-20 h-16 rounded-lg bg-white/20" />
@@ -147,7 +149,7 @@ export default function HeroSection() {
value={email}
onChange={(e) => setEmail(e.target.value)}
placeholder="输入你的邮箱..."
className="w-full border border-gray-200 rounded-lg px-4 py-3 text-sm placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-[#ff4d4f]/20 focus:border-[#ff4d4f] transition-colors mb-3"
className="w-full border border-gray-200 dark:border-gray-700 rounded-lg px-4 py-3 text-sm placeholder-gray-400 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-[#ff4d4f]/20 focus:border-[#ff4d4f] transition-colors mb-3"
/>
<button
type="submit"
@@ -155,29 +157,35 @@ export default function HeroSection() {
>
加入游牧中国 →
</button>
<p className="text-xs text-gray-400 text-center mt-3">
<p className="text-xs text-gray-400 dark:text-gray-500 text-center mt-3">
已有账号？输入邮箱即可自动登录
</p>
</form>
</div>
<div className="mt-4 flex flex-wrap gap-2 justify-center">
<Link
href="/meetups"
className="text-xs text-gray-400 hover:text-gray-600 bg-white rounded-full px-3 py-1.5 border border-gray-100 transition-colors"
>
<Link href="/dashboard" className="text-xs text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 bg-white dark:bg-gray-800 rounded-full px-3 py-1.5 border border-gray-100 dark:border-gray-700 transition-colors">
📍 下一站
</Link>
<Link href="/meetups" className="text-xs text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 bg-white dark:bg-gray-800 rounded-full px-3 py-1.5 border border-gray-100 dark:border-gray-700 transition-colors">
🍹 线下聚会
</Link>
<Link
href="/dating"
className="text-xs text-gray-400 hover:text-gray-600 bg-white rounded-full px-3 py-1.5 border border-gray-100 transition-colors"
>
❤️ 交友约会
<Link href="/dating" className="text-xs text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 bg-white dark:bg-gray-800 rounded-full px-3 py-1.5 border border-gray-100 dark:border-gray-700 transition-colors">
❤️ 智能匹配
</Link>
<Link
href="/join"
className="text-xs text-gray-400 hover:text-gray-600 bg-white rounded-full px-3 py-1.5 border border-gray-100 transition-colors"
>
<Link href="/tools" className="text-xs text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 bg-white dark:bg-gray-800 rounded-full px-3 py-1.5 border border-gray-100 dark:border-gray-700 transition-colors">
📊 工具箱
</Link>
<Link href="/ai" className="text-xs text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 bg-white dark:bg-gray-800 rounded-full px-3 py-1.5 border border-gray-100 dark:border-gray-700 transition-colors">
🤖 AI 助理
</Link>
<Link href="/gigs" className="text-xs text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 bg-white dark:bg-gray-800 rounded-full px-3 py-1.5 border border-gray-100 dark:border-gray-700 transition-colors">
💰 赏金墙
</Link>
<Link href="/report" className="text-xs text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 bg-white dark:bg-gray-800 rounded-full px-3 py-1.5 border border-gray-100 dark:border-gray-700 transition-colors">
📊 年报
</Link>
<Link href="/join" className="text-xs text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 bg-white dark:bg-gray-800 rounded-full px-3 py-1.5 border border-gray-100 dark:border-gray-700 transition-colors">
💬 加入社群
</Link>
</div>

7
app/components/Navbar.tsx
View File

@@ -8,8 +8,13 @@ import ThemeToggle from "./ThemeToggle";
const navLinks = [
{ labelKey: "cities" as const, icon: "🏙️", href: "/" },
{ labelKey: "dashboard" as const, icon: "📍", href: "/dashboard" },
{ labelKey: "travel" as const, icon: "✈️", href: "/meetups" },
{ labelKey: "community" as const, icon: "💬", href: "/dating" },
{ labelKey: "tools" as const, icon: "📊", href: "/tools" },
{ labelKey: "ai" as const, icon: "🤖", href: "/ai" },
{ labelKey: "gigs" as const, icon: "💰", href: "/gigs" },
{ labelKey: "pricing" as const, icon: "👑", href: "/pricing" },
{ labelKey: "explore" as const, icon: "🎒", href: "/#community" },
];
@@ -48,7 +53,7 @@ export default function Navbar() {
</span>
</Link>
<div className="hidden md:flex items-center gap-1">
<div className="hidden md:flex items-center gap-1 overflow-x-auto max-w-[calc(100vw-280px)] scrollbar-hide">
{navLinks.map((link) => (
<Link
key={link.labelKey}