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
Following FIE competition formats, DT Fence lets you manage the full tournament flow directly on your device from pools to direct elimination.
DT Fence makes club tournaments, training camps, internal competitions, and local fencing events easier to organize. It brings competition formats, scoring, ranking, external display, and cloud sync into one focused interface.