100 lines
3.3 KiB
TypeScript
100 lines
3.3 KiB
TypeScript
"use client";
|
|
|
|
import Link from "next/link";
|
|
import { ChevronRight } from "lucide-react";
|
|
import { ENTRY_CARDS } from "~/lib/data";
|
|
|
|
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="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>
|
|
|
|
{/* 入口卡片 */}
|
|
<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}`}
|
|
>
|
|
{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>
|
|
);
|
|
}
|