Kaotings/www_site
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add temporary coming soon homepage

Browse Source
This commit is contained in:
flym 2026-09-10 19:59:25 +08:00
parent f613fc5680
commit 97abca8f0f
1 changed files with 30 additions and 96 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

120
app/page.tsx
View File

@ -1,106 +1,40 @@
import Link from "next/link";
import { ArrowRight, BluetoothIcon, ChipIcon, SparkIcon, WaveIcon } from "@/components/icons";
import { ArrowLink, DevPlaceholder, ProductVisual, SectionHeading } from "@/components/ui";
import { getProducts } 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: "让设备更智能" },
];
import { ArrowRight } from "@/components/icons";
export const dynamic = "force-dynamic";
export default async function HomePage() {
const products = await getProducts();
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-[560px] items-center gap-10 py-16 lg:grid-cols-[0.85fr_1.15fr] lg:py-20">
<div>
<p className="eyebrow">Connecting technology with everyday life</p>
<h1 className="display-heading text-balance">连接技术与日常。</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>
<main className="relative isolate flex min-h-[calc(100vh-82px)] items-center overflow-hidden">
<div className="surface-grid pointer-events-none absolute inset-0 -z-10 opacity-50" />
<div className="absolute left-1/2 top-1/2 -z-10 h-[28rem] w-[28rem] -translate-x-1/2 -translate-y-1/2 rounded-full bg-blue/10 blur-3xl" />
<section className="container-shell w-full py-24 sm:py-32">
<div className="mx-auto max-w-3xl text-center">
<div className="mx-auto inline-flex items-center gap-2 rounded-full border border-cyan/25 bg-cyan/5 px-3 py-1.5 text-xs font-semibold uppercase tracking-[0.2em] text-cyan">
<span className="h-1.5 w-1.5 rounded-full bg-cyan shadow-[0_0_12px_rgba(0,209,230,0.9)]" />
Coming soon
</div>
<h1 className="display-heading mt-8 text-balance">连接技术与日常。</h1>
<p className="body-copy mx-auto mt-7 max-w-xl text-lg">考町科技官网正在准备中。我们专注于蓝牙周边、音频与智能设备，稍后带来更多产品与技术信息。</p>
<div className="mt-10 flex flex-wrap justify-center gap-4">
<Link className="button-primary" href="mailto:tech@kaotings.com">联系我们 <ArrowRight /></Link>
<Link className="button-secondary" href="/about">了解考町科技</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-20 sm:py-24">
<div className="container-shell">
<div className="flex flex-col justify-between gap-6 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.length ? <div className="rounded-2xl border border-dashed border-line p-8 text-sm leading-7 text-muted">CMS 当前没有已发布产品。产品发布后会自动出现在这里。</div> : null}
{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-20 sm:py-24" 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 className="mx-auto mt-24 grid max-w-4xl border-y border-line sm:grid-cols-3">
{[
["01", "Bluetooth", "稳定连接"],
["02", "Audio", "更好的声音体验"],
["03", "AI Lab", "持续探索"],
].map(([number, title, copy]) => (
<div className="border-line px-1 py-6 sm:border-r sm:px-7 sm:first:pl-0 sm:last:border-r-0" key={title}>
<p className="text-xs font-semibold tracking-[0.2em] text-subtle">{number}</p>
<p className="mt-3 font-semibold text-copy">{title}</p>
<p className="mt-1 text-sm text-muted">{copy}</p>
</div>
))}
</div>
</div>
</section>
<section className="section-rule overflow-hidden py-20 sm:py-24" 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="text-balance mt-5 max-w-lg 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>
</>
</main>
);
}