33 lines
1.9 KiB
TypeScript
33 lines
1.9 KiB
TypeScript
|
import { SectionHeading, DevPlaceholder, ProductVisual, ArrowLink } from "@/components/ui";
|
||
|
|
import { products } from "@/lib/content";
|
||
|
|
|
||
|
|
export const metadata = { title: "产品中心" };
|
||
|
|
|
||
|
|
export default function ProductsPage() {
|
||
|
|
return (
|
||
|
|
<div className="container-shell py-20 sm:py-28">
|
||
|
|
<SectionHeading eyebrow="Products" title="产品中心" description="围绕蓝牙周边、音频与智能硬件的产品结构。真实产品资料入库前，页面使用明确标注的开发占位数据。" />
|
||
|
|
<div className="mt-12 flex flex-wrap gap-2 border-y border-line py-4">
|
||
|
|
<span className="rounded-full bg-copy px-4 py-2 text-sm font-semibold text-ink">全部</span>
|
||
|
|
<span className="rounded-full border border-line px-4 py-2 text-sm text-muted">无线音频</span>
|
||
|
|
<span className="rounded-full border border-line px-4 py-2 text-sm text-muted">蓝牙配件</span>
|
||
|
|
<span className="ml-auto self-center text-xs text-subtle">分类筛选将在 CMS 接入后启用</span>
|
||
|
|
</div>
|
||
|
|
<div className="mt-10 grid gap-6 lg:grid-cols-2">
|
||
|
|
{products.map((product) => (
|
||
|
|
<article className="overflow-hidden rounded-2xl border border-line bg-panel/50" key={product.slug}>
|
||
|
|
<ProductVisual accent={product.accent} label={product.category.toUpperCase()} />
|
||
|
|
<div className="p-6 sm:p-8">
|
||
|
|
<DevPlaceholder>{product.shortLabel}</DevPlaceholder>
|
||
|
|
<p className="mt-5 text-xs font-semibold uppercase tracking-[0.18em] text-subtle">{product.category}</p>
|
||
|
|
<h2 className="mt-3 text-2xl font-semibold tracking-[-0.03em]">{product.name}</h2>
|
||
|
|
<p className="mt-3 max-w-lg text-sm leading-7 text-muted">{product.summary}</p>
|
||
|
|
<div className="mt-6"><ArrowLink href={`/products/${product.slug}`}>查看产品模板</ArrowLink></div>
|
||
|
|
</div>
|
||
|
|
</article>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|