103 lines
6.7 KiB
TypeScript
103 lines
6.7 KiB
TypeScript
import Link from "next/link";
|
||
import { ArrowRight, BluetoothIcon, ChipIcon, SparkIcon, WaveIcon } from "@/components/icons";
|
||
import { ArrowLink, DevPlaceholder, ProductVisual, SectionHeading } from "@/components/ui";
|
||
import { products } from "@/lib/content";
|
||
|
||
const capabilities = [
|
||
{ icon: BluetoothIcon, title: "Bluetooth", copy: "稳定连接" },
|
||
{ icon: WaveIcon, title: "Audio", copy: "更好的声音体验" },
|
||
{ icon: ChipIcon, title: "Embedded", copy: "可靠的硬件与固件" },
|
||
{ icon: SparkIcon, title: "AI", copy: "让设备更智能" },
|
||
];
|
||
|
||
export default function HomePage() {
|
||
return (
|
||
<>
|
||
<section className="relative isolate overflow-hidden hero-glow">
|
||
<div className="surface-grid pointer-events-none absolute inset-0 -z-10 opacity-60" />
|
||
<div className="container-shell grid min-h-[680px] items-center gap-12 py-20 lg:grid-cols-[0.8fr_1.2fr] lg:py-28">
|
||
<div>
|
||
<p className="eyebrow">Connecting technology with everyday life</p>
|
||
<h1 className="display-heading">连接技术与日常。</h1>
|
||
<p className="body-copy mt-8 max-w-md text-lg">我们专注于蓝牙周边、音频与智能设备，持续把可靠的技术变成简单、可用的产品。</p>
|
||
<div className="mt-9 flex flex-wrap items-center gap-4">
|
||
<Link className="button-primary" href="/products">了解产品 <ArrowRight /></Link>
|
||
<Link className="text-sm font-semibold text-muted hover:text-copy" href="#technology">探索技术 <span className="ml-2">↓</span></Link>
|
||
</div>
|
||
</div>
|
||
<div className="relative lg:pl-8">
|
||
<div className="absolute -right-16 top-1/2 h-64 w-64 -translate-y-1/2 rounded-full bg-blue/10 blur-3xl" />
|
||
<ProductVisual label="AUDIO / HARDWARE CONCEPT" />
|
||
<div className="absolute -bottom-5 left-5 rounded-xl border border-line bg-panel/90 px-4 py-3 backdrop-blur sm:left-12">
|
||
<p className="text-[0.65rem] uppercase tracking-[0.2em] text-subtle">Product first</p>
|
||
<p className="mt-1 text-sm text-copy">真实产品资料待补充</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section className="section-rule py-24 sm:py-32">
|
||
<div className="container-shell">
|
||
<div className="flex flex-col justify-between gap-8 sm:flex-row sm:items-end">
|
||
<SectionHeading eyebrow="Products" title="为真实场景，打造可靠的蓝牙周边。" description="产品中心将由结构化内容驱动。当前资料尚未确认，以下内容仅用于开发阶段验证模板。" />
|
||
<ArrowLink href="/products">查看全部产品</ArrowLink>
|
||
</div>
|
||
<div className="mt-14 grid gap-5 lg:grid-cols-2">
|
||
{products.map((product) => (
|
||
<Link className="group grid gap-5 rounded-2xl border border-line bg-panel/60 p-4 transition-colors hover:border-blue/60 sm:grid-cols-[0.9fr_1.1fr] sm:p-5" href={`/products/${product.slug}`} key={product.slug}>
|
||
<ProductVisual accent={product.accent} label={product.category.toUpperCase()} />
|
||
<div className="flex flex-col justify-center p-2 sm:p-4">
|
||
<DevPlaceholder>{product.shortLabel}</DevPlaceholder>
|
||
<p className="mt-5 text-xs font-semibold uppercase tracking-[0.18em] text-subtle">{product.category}</p>
|
||
<h3 className="mt-3 text-2xl font-semibold tracking-[-0.03em] text-copy">{product.name}</h3>
|
||
<p className="mt-3 text-sm leading-7 text-muted">{product.summary}</p>
|
||
<span className="mt-6 inline-flex items-center gap-2 text-sm font-semibold text-cyan">查看模板 <ArrowRight /></span>
|
||
</div>
|
||
</Link>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section className="section-rule py-24 sm:py-32" id="technology">
|
||
<div className="container-shell">
|
||
<SectionHeading eyebrow="Technology" title="从无线连接到嵌入式开发，关注产品背后的核心技术。" description="以硬件经验为基础，持续探索可靠连接、音频体验、嵌入式系统与 AI 在设备中的应用。" tone="cyan" />
|
||
<div className="mt-14 grid border-y border-line sm:grid-cols-2 lg:grid-cols-4">
|
||
{capabilities.map(({ icon: Icon, title, copy }, index) => (
|
||
<div className="flex items-start gap-4 border-line py-7 sm:px-6 lg:border-r lg:first:pl-0 lg:last:border-r-0" key={title}>
|
||
<span className={index === 0 ? "text-blue" : index === 3 ? "text-cyan" : "text-copy"}><Icon /></span>
|
||
<div><h3 className="font-semibold text-copy">{title}</h3><p className="mt-2 text-sm text-muted">{copy}</p></div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section className="section-rule overflow-hidden py-24 sm:py-32" id="ai-lab">
|
||
<div className="container-shell grid items-center gap-12 lg:grid-cols-[0.8fr_1.2fr]">
|
||
<div>
|
||
<p className="eyebrow eyebrow-cyan">AI Lab</p>
|
||
<h2 className="mt-5 max-w-md text-4xl font-semibold tracking-[-0.05em] text-copy sm:text-6xl">让设备更懂声音。</h2>
|
||
<p className="body-copy mt-6 max-w-md">从文本转语音开始，探索语音能力在真实产品中的应用。完整工具位于独立工作台，不抢占首页的产品叙事。</p>
|
||
<Link className="button-secondary mt-8" href="/tts">体验 TTS <ArrowRight /></Link>
|
||
</div>
|
||
<div className="relative flex min-h-64 items-center justify-center overflow-hidden rounded-2xl border border-line bg-panel/50 p-8">
|
||
<div className="absolute inset-x-12 h-px bg-cyan/30" />
|
||
<div className="flex items-center gap-1 opacity-90" aria-hidden="true">
|
||
{[22, 42, 70, 105, 66, 132, 90, 48, 112, 78, 36, 58, 96, 50, 26].map((height, index) => <span className={`w-1 rounded-full ${index % 3 === 0 ? "bg-orange" : "bg-cyan"}`} style={{ height }} key={index} />)}
|
||
</div>
|
||
<span className="absolute bottom-5 right-5 text-[0.65rem] font-semibold uppercase tracking-[0.22em] text-subtle">Voice / exploration</span>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section className="section-rule py-20 sm:py-24">
|
||
<div className="container-shell flex flex-col justify-between gap-8 rounded-2xl border border-line bg-panel/50 p-7 sm:flex-row sm:items-center sm:p-10">
|
||
<div><p className="eyebrow eyebrow-blue">About Kaotings</p><h2 className="mt-4 text-3xl font-semibold tracking-[-0.04em]">把技术做成日常可用的体验。</h2></div>
|
||
<ArrowLink href="/about">了解我们</ArrowLink>
|
||
</div>
|
||
</section>
|
||
</>
|
||
);
|
||
}
|