117 lines
5.2 KiB
TypeScript
117 lines
5.2 KiB
TypeScript
"use client";
|
|
|
|
import { Link, useTranslation } from "@/i18n/navigation";
|
|
import ShopCard from "./ShopCard";
|
|
|
|
const linkKeys = ["github", "destinations", "appDownload"] as const;
|
|
const linkIcons: Record<(typeof linkKeys)[number], string> = {
|
|
github: "📦",
|
|
destinations: "🗺️",
|
|
appDownload: "📱",
|
|
};
|
|
const linkHrefs: Record<(typeof linkKeys)[number], { href: string; newTab?: boolean }> = {
|
|
github: { href: "https://github.com" },
|
|
destinations: { href: "#" },
|
|
appDownload: { href: "/app" },
|
|
};
|
|
|
|
export default function Community() {
|
|
const { t } = useTranslation("community");
|
|
return (
|
|
<section id="community" className="py-20 sm:py-28 dark:bg-slate-950">
|
|
<div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
|
|
{/* 电商独立站卡片 */}
|
|
<div id="shop">
|
|
<ShopCard />
|
|
</div>
|
|
|
|
{/* 数字游民社区 - 优化布局 */}
|
|
<div className="mb-20">
|
|
<Link
|
|
href="/join"
|
|
className="group block overflow-hidden rounded-2xl border border-sky-200/80 bg-gradient-to-br from-sky-50 via-white to-cyan-50/60 p-8 shadow-sm transition-all duration-300 hover:border-sky-300 hover:shadow-xl hover:shadow-sky-100/50 dark:border-sky-800/80 dark:from-sky-900/30 dark:via-slate-900 dark:to-cyan-900/20 dark:hover:border-sky-700 dark:hover:shadow-sky-900/30 sm:p-10"
|
|
>
|
|
<div className="flex flex-col gap-6 sm:flex-row sm:items-center sm:justify-between">
|
|
<div className="flex-1">
|
|
<div className="mb-3 inline-flex items-center gap-2 rounded-full bg-sky-100 px-4 py-1.5 text-sm font-semibold text-sky-700 dark:bg-sky-900/50 dark:text-sky-300">
|
|
<span className="text-lg">👥</span>
|
|
{t("nomadCommunity")}
|
|
</div>
|
|
<h3 className="mb-3 text-2xl font-bold tracking-tight text-slate-900 dark:text-slate-100 sm:text-3xl">
|
|
{t("joinTitle")}
|
|
</h3>
|
|
<p className="mb-4 max-w-xl text-base leading-relaxed text-slate-600 dark:text-slate-400">
|
|
{t("joinDesc")}
|
|
</p>
|
|
<div className="flex flex-wrap gap-3">
|
|
<span className="rounded-lg bg-white/90 px-3 py-1.5 text-sm font-medium text-slate-600 shadow-sm dark:bg-slate-800/90 dark:text-slate-300">
|
|
{t("applyForm")}
|
|
</span>
|
|
<span className="rounded-lg bg-white/90 px-3 py-1.5 text-sm font-medium text-slate-600 shadow-sm dark:bg-slate-800/90 dark:text-slate-300">
|
|
{t("approveJoin")}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div className="flex shrink-0 items-center gap-4 rounded-2xl bg-white/90 p-6 shadow-md backdrop-blur-sm transition-transform dark:bg-slate-800/90 group-hover:scale-[1.02] sm:p-8">
|
|
<div className="flex h-16 w-16 items-center justify-center rounded-2xl bg-gradient-to-br from-sky-400 to-cyan-500 text-3xl shadow-lg shadow-sky-200/50">
|
|
📝
|
|
</div>
|
|
<div className="text-left">
|
|
<div className="font-bold text-slate-800 dark:text-slate-200">
|
|
{t("applyNow")}
|
|
</div>
|
|
<div className="mt-1 text-sm text-slate-500 dark:text-slate-400">
|
|
{t("applyHint")}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Link>
|
|
</div>
|
|
|
|
<div id="resources" className="text-center">
|
|
<h2 className="text-3xl font-bold tracking-tight text-slate-900 dark:text-slate-100 sm:text-4xl">
|
|
<span className="gradient-text">{t("resourcesTitle")}</span>
|
|
</h2>
|
|
<p className="mx-auto mt-4 max-w-2xl text-lg text-slate-600 dark:text-slate-400">
|
|
{t("contributeSubtitle")}
|
|
<br />
|
|
{t("contributeSubtitle2")}
|
|
</p>
|
|
</div>
|
|
|
|
<div className="mt-12 grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
|
|
{linkKeys.map((key) => {
|
|
const { href, newTab } = linkHrefs[key];
|
|
const content = (
|
|
<>
|
|
<span className="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-slate-50 text-xl dark:bg-slate-800">
|
|
{linkIcons[key]}
|
|
</span>
|
|
<div>
|
|
<h4 className="font-bold text-slate-900 dark:text-slate-100">{t(`links.${key}.title`)}</h4>
|
|
<p className="mt-1 text-sm text-slate-500 dark:text-slate-400">{t(`links.${key}.desc`)}</p>
|
|
<span className="mt-2 inline-block text-sm font-medium text-sky-600">
|
|
{t(`links.${key}.label`)}
|
|
</span>
|
|
</div>
|
|
</>
|
|
);
|
|
return (
|
|
<Link
|
|
key={key}
|
|
href={href}
|
|
target={newTab ? "_blank" : undefined}
|
|
rel={newTab ? "noopener noreferrer" : undefined}
|
|
className="card-hover flex items-start gap-4 rounded-xl border border-slate-100 bg-white p-5 shadow-sm dark:border-slate-800 dark:bg-slate-900"
|
|
>
|
|
{content}
|
|
</Link>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|