From 32a397afe0e574b866e920daedad3e03a3201b9a Mon Sep 17 00:00:00 2001
From: flym <mu.blank@gmail.com>
Date: Fri, 11 Sep 2026 14:51:33 +0800
Subject: [PATCH] Revert "feat: add temporary coming soon homepage"

This reverts commit 97abca8f0f6b25e7b39b54ea18f10911488e7fcf.
---
 app/page.tsx | 126 +++++++++++++++++++++++++++++++++++++++------------
 1 file changed, 96 insertions(+), 30 deletions(-)

diff --git a/app/page.tsx b/app/page.tsx
index 1c17284..371fd7c 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -1,40 +1,106 @@
 import Link from "next/link";
-import { ArrowRight } from "@/components/icons";
+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: "让设备更智能" },
+];
 
 export const dynamic = "force-dynamic";
 
-export default function HomePage() {
+export default async function HomePage() {
+  const products = await getProducts();
   return (
-    <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="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>
+    <>
+      <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>
             </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>
-    </main>
+
+      <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>
+            ))}
+          </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>
+    </>
   );
 }