feat: scaffold headless frontend integration per design doc

2026-08-06 15:51:59 +08:00
parent b0919bf8b5
commit 7e30631c68
28 changed files with 708 additions and 126 deletions
@@ -0,0 +1,30 @@
+import Link from "next/link";
+import type { HeroBlockValue } from "@/types/wagtail";
+
+export default function Hero({ value }: { value: HeroBlockValue }) {
+  return (
+    <section className="relative overflow-hidden bg-gradient-to-b from-slate-50 to-white py-32">
+      <div className="mx-auto flex max-w-5xl flex-col items-center px-6 text-center">
+        <h1 className="mb-6 text-5xl font-bold leading-tight text-slate-900">
+          {value.title}
+        </h1>
+        {value.subtitle && (
+          <p className="mb-10 max-w-2xl text-lg leading-8 text-slate-600">
+            {value.subtitle}
+          </p>
+        )}
+        <div className="flex gap-4">
+          {value.buttons?.map((button, index) => (
+            <Link
+              key={`${button.link}-${index}`}
+              href={button.link}
+              className="rounded-2xl bg-primary px-8 py-4 text-white"
+            >
+              {button.text}
+            </Link>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}