130 lines
5.5 KiB
TypeScript
130 lines
5.5 KiB
TypeScript
"use client";
|
|
|
|
import { useEffect } from "react";
|
|
import { useTranslation } from "@/i18n/navigation";
|
|
import { getThemeConfig } from "@/config";
|
|
import SocialPlatformIcon from "../../components/SocialPlatformIcon";
|
|
|
|
export default function AboutContent() {
|
|
const { t } = useTranslation("about");
|
|
|
|
useEffect(() => {
|
|
window.history.scrollRestoration = "manual";
|
|
window.scrollTo(0, 0);
|
|
return () => {
|
|
window.history.scrollRestoration = "auto";
|
|
};
|
|
}, []);
|
|
const config = getThemeConfig();
|
|
const linktreeUrl = config.linktreeUrl;
|
|
const socialLinks = config.socialLinks ?? [];
|
|
const teamMembers = config.teamMembers ?? [];
|
|
|
|
return (
|
|
<div className="min-h-screen bg-slate-50 dark:bg-slate-950">
|
|
<section className="py-20 sm:py-28">
|
|
<div className="mx-auto max-w-4xl px-4 sm:px-6 lg:px-8">
|
|
<div className="text-center">
|
|
<h1 className="text-4xl font-bold tracking-tight text-slate-900 dark:text-slate-100 sm:text-5xl">
|
|
{t("title")}
|
|
</h1>
|
|
<p className="mx-auto mt-4 max-w-2xl text-lg text-slate-600 dark:text-slate-400">
|
|
{t("subtitle")}
|
|
</p>
|
|
</div>
|
|
|
|
{/* 团队成员 */}
|
|
{teamMembers.length > 0 && (
|
|
<div className="mt-16">
|
|
<h2 className="mb-2 text-center text-2xl font-bold text-slate-900 dark:text-slate-100 sm:text-3xl">
|
|
{t("teamTitle")}
|
|
</h2>
|
|
<p className="mb-10 text-center text-slate-600 dark:text-slate-400">
|
|
{t("teamDesc")}
|
|
</p>
|
|
<div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
|
|
{teamMembers.map((member) => {
|
|
const content = (
|
|
<div className="card-hover flex flex-col items-center rounded-2xl border border-slate-100 bg-white p-6 text-center shadow-sm dark:border-slate-800 dark:bg-slate-900">
|
|
<div className="mb-4 flex h-20 w-20 items-center justify-center overflow-hidden rounded-full bg-gradient-to-br from-sky-100 to-cyan-50 text-4xl dark:from-sky-900/50 dark:to-cyan-900/50">
|
|
{member.avatar ?? "👤"}
|
|
</div>
|
|
<h3 className="text-lg font-bold text-slate-900 dark:text-slate-100">
|
|
{member.name}
|
|
</h3>
|
|
<p className="mt-1 text-sm text-slate-500 dark:text-slate-400">
|
|
{member.role}
|
|
</p>
|
|
</div>
|
|
);
|
|
if (member.link) {
|
|
return (
|
|
<a
|
|
key={member.name}
|
|
href={member.link}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="block"
|
|
>
|
|
{content}
|
|
</a>
|
|
);
|
|
}
|
|
return <div key={member.name}>{content}</div>;
|
|
})}
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* 社交平台 Linktree */}
|
|
{(linktreeUrl || socialLinks.length > 0) && (
|
|
<div className="mt-16">
|
|
<h2 className="mb-2 text-center text-2xl font-bold text-slate-900 dark:text-slate-100 sm:text-3xl">
|
|
{t("linktreeTitle")}
|
|
</h2>
|
|
<p className="mb-10 text-center text-slate-600 dark:text-slate-400">
|
|
{t("linktreeDesc")}
|
|
</p>
|
|
{(["domestic", "overseas"] as const).map((group) => {
|
|
const items = socialLinks.filter((l) => l.group === group);
|
|
if (items.length === 0) return null;
|
|
return (
|
|
<div key={group} className="mb-10 last:mb-0">
|
|
<h3 className="mb-4 text-sm font-semibold uppercase tracking-wider text-slate-500 dark:text-slate-400">
|
|
{group === "domestic" ? t("groupDomestic") : t("groupOverseas")}
|
|
</h3>
|
|
<div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
|
|
{items.map((item) => (
|
|
<a
|
|
key={item.platform}
|
|
href={item.url}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="card-hover group flex items-center gap-4 rounded-2xl border border-slate-100 bg-white p-5 shadow-sm transition-all dark:border-slate-800 dark:bg-slate-900"
|
|
>
|
|
<SocialPlatformIcon platform={item.platform} />
|
|
<div className="min-w-0 flex-1">
|
|
<div className="font-bold text-slate-900 dark:text-slate-100">
|
|
{item.label}
|
|
</div>
|
|
<div className="mt-0.5 text-sm text-slate-500 dark:text-slate-400">
|
|
{t("linktreeCta")}
|
|
</div>
|
|
</div>
|
|
<span className="shrink-0 text-slate-400 transition-transform group-hover:translate-x-1">
|
|
↗
|
|
</span>
|
|
</a>
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</section>
|
|
</div>
|
|
);
|
|
}
|