export default function DTFenceShowcase() {
const stats = [
{ label: "Clubs Connected", value: "32+" },
{ label: "Live Match Streams", value: "120" },
{ label: "Event Sync Speed", value: "< 3s" },
{ label: "Display Modes", value: "6" },
];
const modules = [
{
id: "01",
title: "实时赛程展示",
desc: "大屏、iPad 与手机同步展示分组赛、淘汰赛、团体赛与实时比分。",
},
{
id: "02",
title: "二维码快速进入",
desc: "观众扫描二维码即可查看比赛进度、对阵信息、场地分配与成绩更新。",
},
{
id: "03",
title: "赛事数据统一发布",
desc: "支持云端同步发布名单、签表、成绩、公告与奖牌榜，适合俱乐部与小型赛事。",
},
{
id: "04",
title: "俱乐部品牌化页面",
desc: "可加入俱乐部 Logo、赛事主视觉、赞助商区块与报名入口，形成完整展示门户。",
},
];
const displayCards = [
{
title: "Live Board",
subtitle: "实时比分与比赛状态",
items: ["当前场次", "已完成比分", "下一场叫号"],
},
{
title: "Bracket View",
subtitle: "淘汰赛签表总览",
items: ["轮次切换", "胜者高亮", "触屏滚动查看"],
},
{
title: "Club Info",
subtitle: "俱乐部与赛事信息卡",
items: ["地址 / 联系方式", "赛事公告", "赞助展示"],
},
];
return (
<div className="min-h-screen bg-neutral-950 text-white">
<div className="mx-auto max-w-7xl px-6 py-6 lg:px-10">
<header className="flex items-center justify-between border-b border-white/10 pb-5">
<div>
<div className="text-xs uppercase tracking-[0.35em] text-white/45">DT Fence</div>
<div className="mt-2 text-lg font-medium text-white/90">Competition Display System</div>
</div>
<nav className="hidden gap-8 text-sm text-white/60 md:flex">
<a href="#overview" className="transition hover:text-white">Overview</a>
<a href="#modules" className="transition hover:text-white">Modules</a>
<a href="#screens" className="transition hover:text-white">Screens</a>
<a href="#contact" className="transition hover:text-white">Contact</a>
</nav>
</header>
<section
id="overview"
className="grid gap-8 py-14 lg:grid-cols-[1.2fr_0.8fr] lg:items-end lg:py-20"
>
<div>
<div className="mb-5 inline-flex items-center rounded-full border border-emerald-400/20 bg-emerald-400/10 px-4 py-2 text-xs tracking-[0.25em] text-emerald-200">
FOR CLUB EVENTS · LIVE DISPLAY
</div>
<h1 className="max-w-4xl text-4xl font-semibold leading-tight text-white md:text-6xl">
让比赛编排、实时比分与赛事展示，
<span className="text-white/55">在同一个界面中稳定运行。</span>
</h1>
<p className="mt-6 max-w-2xl text-base leading-8 text-white/65 md:text-lg">
DT Fence 延续 NoteFencing 网站的简洁、专业、数据化表达方式，重点突出赛事可视化、俱乐部品牌展示与观众查看体验。
</p>
<div className="mt-8 flex flex-wrap gap-4">
<button className="rounded-2xl bg-white px-6 py-3 text-sm font-medium text-black transition hover:scale-[1.01]">
查看展示流程
</button>
<button className="rounded-2xl border border-white/15 px-6 py-3 text-sm font-medium text-white/80 transition hover:border-white/30 hover:text-white">
预约 DT Fence 演示
</button>
</div>
</div>
<div className="rounded-[28px] border border-white/10 bg-white/5 p-4 shadow-2xl shadow-black/30 backdrop-blur-xl">
<div className="rounded-[24px] border border-white/10 bg-neutral-900 p-5">
<div className="flex items-center justify-between border-b border-white/10 pb-4">
<div>
<div className="text-sm text-white/50">Event Dashboard</div>
<div className="mt-1 text-xl font-semibold">DT Fence Open 2026</div>
</div>
<div className="rounded-full bg-emerald-400/15 px-3 py-1 text-xs text-emerald-200">
Live Sync
</div>
</div>
<div className="mt-5 grid grid-cols-2 gap-3">
{stats.map((stat) => (
<div key={stat.label} className="rounded-2xl border border-white/10 bg-white/[0.03] p-4">
<div className="text-2xl font-semibold">{stat.value}</div>
<div className="mt-2 text-sm text-white/45">{stat.label}</div>
</div>
))}
</div>
<div className="mt-5 grid gap-3">
<div className="rounded-2xl border border-white/10 bg-gradient-to-r from-white/[0.04] to-emerald-300/[0.06] p-4">
<div className="text-sm text-white/45">Now Showing</div>
<div className="mt-2 flex items-center justify-between text-sm md:text-base">
<span>Strip A · Senior Men Épée</span>
<span className="rounded-full bg-white/10 px-3 py-1 text-xs">Table of 16</span>
</div>
<div className="mt-4 grid grid-cols-[1fr_auto_1fr] items-center gap-3 rounded-2xl border border-white/10 bg-black/20 p-4">
<div>
<div className="text-xs text-white/35">Left</div>
<div className="mt-1 text-lg font-medium">LI Wei</div>
</div>
<div className="text-2xl font-semibold text-emerald-200">12 : 10</div>
<div className="text-right">
<div className="text-xs text-white/35">Right</div>
<div className="mt-1 text-lg font-medium">CHEN Hao</div>
</div>
</div>
</div>
<div className="grid grid-cols-3 gap-3">
{displayCards.map((card) => (
<div key={card.title} className="rounded-2xl border border-white/10 bg-white/[0.03] p-4">
<div className="text-sm font-medium">{card.title}</div>
<div className="mt-1 text-xs text-white/45">{card.subtitle}</div>
<div className="mt-4 space-y-2">
{card.items.map((item) => (
<div key={item} className="rounded-xl border border-white/8 bg-black/20 px-3 py-2 text-xs text-white/70">
{item}
</div>
))}
</div>
</div>
))}
</div>
</div>
</div>
</div>
</section>
<section id="modules" className="border-t border-white/10 py-14 lg:py-20">
<div className="mb-10 flex items-end justify-between gap-6">
<div>
<div className="text-sm tracking-[0.3em] text-white/35">CORE MODULES</div>
<h2 className="mt-3 text-3xl font-semibold md:text-4xl">围绕赛事展示与信息发布的 4 个重点模块</h2>
</div>
<div className="max-w-md text-sm leading-7 text-white/55">
保持与 notefencing.com 一致的“极简版块 + 数据面板 + 明确模块编号”语言，让 DT Fence 与 Fencing X 在品牌上相互呼应。
</div>
</div>
<div className="grid gap-4 md:grid-cols-2">
{modules.map((module) => (
<div
key={module.id}
className="rounded-[24px] border border-white/10 bg-white/[0.03] p-6 transition hover:border-emerald-400/30 hover:bg-white/[0.05]"
>
<div className="text-sm text-white/35">{module.id}</div>
<div className="mt-3 text-2xl font-semibold">{module.title}</div>
<p className="mt-4 text-sm leading-7 text-white/60">{module.desc}</p>
</div>
))}
</div>
</section>
<section id="screens" className="border-t border-white/10 py-14 lg:py-20">
<div className="grid gap-6 lg:grid-cols-[0.9fr_1.1fr]">
<div>
<div className="text-sm tracking-[0.3em] text-white/35">SCREEN SYSTEM</div>
<h2 className="mt-3 text-3xl font-semibold md:text-4xl">建议的 DT Fence 展示界面结构</h2>
<div className="mt-6 space-y-4 text-sm leading-7 text-white/60">
<p>1. 首页 Hero：一句话说明赛事实时编排与展示能力，配合右侧数据面板。</p>
<p>2. 赛事进行中：展示当前剑道、对阵双方、实时比分、下一场叫号。</p>
<p>3. 签表与赛程：平铺小组、淘汰表、场地安排与时间轴。</p>
<p>4. 俱乐部信息区：展示主办方、地址、报名链接、赞助商与公告。</p>
</div>
</div>
<div className="grid gap-4 md:grid-cols-2">
<div className="rounded-[28px] border border-white/10 bg-white/[0.03] p-5">
<div className="text-sm text-white/45">Mobile Spectator View</div>
<div className="mt-4 rounded-[24px] border border-white/10 bg-neutral-900 p-4">
<div className="rounded-2xl bg-emerald-400/10 p-3 text-xs text-emerald-100">扫码后查看实时比分</div>
<div className="mt-4 space-y-3">
<div className="rounded-2xl border border-white/10 p-4">
<div className="text-xs text-white/35">Current Match</div>
<div className="mt-2 text-base font-medium">Strip B · U14 Girls Épée</div>
<div className="mt-3 flex items-center justify-between text-sm text-white/75">
<span>YANG</span>
<span className="text-lg font-semibold text-white">8 : 7</span>
<span>LIN</span>
</div>
</div>
<div className="rounded-2xl border border-white/10 p-4 text-sm text-white/60">Pool ranking / Next bout / Referee assignment</div>
</div>
</div>
</div>
<div className="rounded-[28px] border border-white/10 bg-white/[0.03] p-5">
<div className="text-sm text-white/45">Venue Screen View</div>
<div className="mt-4 rounded-[24px] border border-white/10 bg-neutral-900 p-4">
<div className="grid gap-3">
<div className="rounded-2xl border border-white/10 p-4">
<div className="text-xs text-white/35">Bracket Overview</div>
<div className="mt-3 grid grid-cols-4 gap-2 text-center text-xs text-white/75">
<div className="rounded-xl bg-white/5 p-2">64</div>
<div className="rounded-xl bg-white/5 p-2">32</div>
<div className="rounded-xl bg-white/5 p-2">16</div>
<div className="rounded-xl bg-emerald-400/15 p-2 text-emerald-100">Final</div>
</div>
</div>
<div className="rounded-2xl border border-white/10 p-4 text-sm text-white/60">Sponsor area / event notice / award ceremony timing</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section id="contact" className="border-t border-white/10 py-14">
<div className="rounded-[32px] border border-white/10 bg-gradient-to-r from-white/[0.04] to-emerald-300/[0.06] p-8 md:p-10">
<div className="max-w-3xl">
<div className="text-sm tracking-[0.3em] text-white/35">DT FENCE CONTACT</div>
<h2 className="mt-3 text-3xl font-semibold md:text-4xl">把 DT Fence 做成一个与 Fencing X 风格统一的赛事展示入口</h2>
<p className="mt-5 text-sm leading-7 text-white/65">
视觉上延续现有官网的深色背景、清晰留白、数据卡片和极简结构；内容上聚焦赛事实时信息、签表展示和俱乐部品牌呈现。
</p>
<div className="mt-8 flex flex-wrap gap-4">
<button className="rounded-2xl bg-white px-6 py-3 text-sm font-medium text-black">开始设计 DT Fence 页面</button>
<button className="rounded-2xl border border-white/15 px-6 py-3 text-sm font-medium text-white/80">导出为官网模块</button>
</div>
</div>
</div>
</section>
</div>
</div>
);
}
Tournament Management
DT Fence
遵循 FIE 赛制，从 pools 到 direct elimination，都可以直接在设备上完成编排与管理。
DT Fence 让俱乐部比赛、训练营、队内对抗和本地小型赛事的组织工作更轻量、更清晰。它把赛制编排、比分录入、排名计算、屏幕展示和云同步集中到一个专业界面中。