create-nextdevtpl 2.6.0

package/template/src/features/marketing/components/header.tsx

@@ -0,0 +1,255 @@
+"use client";
+
+import { ChevronDown, Menu } from "lucide-react";
+import { useTranslations } from "next-intl";
+import { useState } from "react";
+
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { Button } from "@/components/ui/button";
+import { Sheet, SheetContent, SheetTitle } from "@/components/ui/sheet";
+import { mainNav, productsNav } from "@/config/nav";
+import { LanguageSwitcher, ModeToggle } from "@/features/shared";
+import { Link } from "@/i18n/routing";
+import { useSession } from "@/lib/auth/client";
+
+import { NavMenu } from "./nav-menu";
+
+/**
+ * Products 下拉菜单翻译映射 key (移动端复用)
+ */
+const productsTitleMap: Record<string, string> = {
+  Core: "productsMenu.core.title",
+  "DX Platform": "productsMenu.dx.title",
+  Infrastructure: "productsMenu.infra.title",
+  Authentication: "productsMenu.core.auth",
+  Payments: "productsMenu.core.payments",
+  Credits: "productsMenu.core.credits",
+  "Background Jobs": "productsMenu.dx.jobs",
+  Internationalization: "productsMenu.dx.i18n",
+  "AI Integration": "productsMenu.dx.ai",
+  "Admin Panel": "productsMenu.infra.admin",
+  "File Storage": "productsMenu.infra.storage",
+  Monitoring: "productsMenu.infra.monitoring",
+};
+
+/**
+ * Marketing 页面顶部导航栏
+ *
+ * 布局: [Logo + Nav 靠左] -------- [Actions 靠右]
+ */
+export function Header() {
+  // 获取当前用户会话状态
+  const { data: session, isPending } = useSession();
+  const user = session?.user;
+  const t = useTranslations("Header");
+  const tNav = useTranslations("Navigation");
+  const [mobileOpen, setMobileOpen] = useState(false);
+  const [productsExpanded, setProductsExpanded] = useState(false);
+
+  /**
+   * 获取用户名首字母作为头像回退
+   */
+  const getInitials = (name: string) => {
+    return name
+      .split(" ")
+      .map((n) => n[0])
+      .join("")
+      .toUpperCase()
+      .slice(0, 2);
+  };
+
+  /**
+   * 导航项标题翻译映射
+   */
+  const navTitleMap: Record<string, string> = {
+    Products: tNav("products"),
+    Docs: tNav("docs"),
+    Pricing: tNav("pricing"),
+    Blog: tNav("blog"),
+  };
+
+  return (
+    <header className="sticky top-0 z-50 w-full border-b border-border/60 bg-background/80 backdrop-blur-xl supports-[backdrop-filter]:bg-background/70">
+      <div className="container flex h-16 items-center justify-between">
+        {/* 左侧 - Logo + 导航菜单 */}
+        <div className="flex items-center gap-8">
+          {/* Logo */}
+          <Link href="/" className="flex items-center gap-2">
+            {/* biome-ignore lint/a11y/noSvgWithoutTitle: decorative logo */}
+            <svg
+              className="h-6 w-6 text-primary"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              strokeWidth={2.4}
+              strokeLinecap="round"
+              strokeLinejoin="round"
+            >
+              <path d="M3 17 L9 7 L13 14 L21 4" />
+              <circle cx="9" cy="7" r="1.4" fill="currentColor" stroke="none" />
+              <circle
+                cx="21"
+                cy="4"
+                r="1.4"
+                fill="currentColor"
+                stroke="none"
+              />
+            </svg>
+            <span className="text-xl font-bold tracking-tight">
+              NextDev<span className="text-muted-foreground">Tpl</span>
+            </span>
+          </Link>
+
+          {/* 导航菜单 (桌面端) */}
+          <div className="hidden md:flex">
+            <NavMenu />
+          </div>
+        </div>
+
+        {/* 右侧 - 操作区域 */}
+        <div className="flex items-center gap-2">
+          {/* 语言切换 */}
+          <LanguageSwitcher />
+
+          {/* 主题切换 */}
+          <ModeToggle />
+
+          {isPending ? (
+            // 加载状态 - 显示骨架
+            <div className="hidden h-9 w-24 animate-pulse rounded-md bg-muted md:block" />
+          ) : user ? (
+            // 已登录 - 显示 Dashboard 按钮和头像
+            <>
+              <Button
+                asChild
+                variant="ghost"
+                className="hidden text-muted-foreground md:inline-flex"
+              >
+                <Link href="/dashboard">{t("dashboard")}</Link>
+              </Button>
+              <Link href="/dashboard" className="hidden md:block">
+                <Avatar className="h-8 w-8">
+                  <AvatarImage src={user.image || undefined} alt={user.name} />
+                  <AvatarFallback className="bg-primary text-xs text-primary-foreground">
+                    {getInitials(user.name)}
+                  </AvatarFallback>
+                </Avatar>
+              </Link>
+            </>
+          ) : (
+            // 未登录 - 显示登录和注册按钮（桌面端）
+            <>
+              <Button
+                asChild
+                variant="ghost"
+                className="hidden text-muted-foreground hover:text-foreground md:inline-flex"
+              >
+                <Link href="/sign-in">{t("login")}</Link>
+              </Button>
+              <Button asChild className="hidden md:inline-flex">
+                <Link href="/sign-up">{t("getStarted")}</Link>
+              </Button>
+            </>
+          )}
+
+          {/* 移动端汉堡按钮 */}
+          <button
+            type="button"
+            onClick={() => setMobileOpen(true)}
+            className="flex h-9 w-9 items-center justify-center rounded-md text-muted-foreground hover:text-foreground hover:bg-accent transition-colors md:hidden"
+          >
+            <Menu className="h-5 w-5" />
+          </button>
+        </div>
+      </div>
+
+      {/* 移动端导航 Sheet */}
+      <Sheet open={mobileOpen} onOpenChange={setMobileOpen}>
+        <SheetContent side="right" className="w-72 p-0">
+          <SheetTitle className="sr-only">Navigation</SheetTitle>
+          <div className="flex h-full flex-col">
+            {/* 导航链接 */}
+            <nav className="flex-1 overflow-y-auto px-4 pt-12">
+              {/* Products 可折叠区域 */}
+              <div className="space-y-1">
+                <button
+                  type="button"
+                  onClick={() => setProductsExpanded(!productsExpanded)}
+                  className="flex w-full items-center justify-between rounded-md px-3 py-2 text-sm font-medium text-foreground/70 hover:bg-accent hover:text-foreground transition-colors"
+                >
+                  {navTitleMap.Products}
+                  <ChevronDown
+                    className={`h-4 w-4 transition-transform duration-200 ${productsExpanded ? "rotate-180" : ""}`}
+                  />
+                </button>
+                {productsExpanded && (
+                  <div className="ml-3 space-y-1 border-l border-border pl-3">
+                    {productsNav.map((group) => (
+                      <div key={group.title} className="py-1">
+                        <div className="px-3 py-1 text-xs font-semibold uppercase tracking-wider text-muted-foreground">
+                          {tNav(productsTitleMap[group.title] || group.title)}
+                        </div>
+                        {group.items.map((item) => {
+                          const Icon = item.icon;
+                          return (
+                            <Link
+                              key={item.title}
+                              href={item.href}
+                              onClick={() => setMobileOpen(false)}
+                              className="flex items-center gap-2 rounded-md px-3 py-1.5 text-sm text-foreground/70 hover:bg-accent hover:text-foreground transition-colors"
+                            >
+                              <Icon className="h-3.5 w-3.5 text-primary" />
+                              {tNav(productsTitleMap[item.title] || item.title)}
+                            </Link>
+                          );
+                        })}
+                      </div>
+                    ))}
+                  </div>
+                )}
+              </div>
+
+              {/* 主导航链接 */}
+              <div className="space-y-1">
+                {mainNav.map((item) => (
+                  <Link
+                    key={item.href}
+                    href={item.href}
+                    onClick={() => setMobileOpen(false)}
+                    className="flex items-center rounded-md px-3 py-2 text-sm font-medium text-foreground/70 hover:bg-accent hover:text-foreground transition-colors"
+                  >
+                    {navTitleMap[item.title] || item.title}
+                  </Link>
+                ))}
+              </div>
+            </nav>
+
+            {/* 底部操作按钮 */}
+            <div className="border-t border-border p-4 space-y-2">
+              {user ? (
+                <Button asChild className="w-full">
+                  <Link href="/dashboard" onClick={() => setMobileOpen(false)}>
+                    {t("dashboard")}
+                  </Link>
+                </Button>
+              ) : (
+                <>
+                  <Button asChild variant="outline" className="w-full">
+                    <Link href="/sign-in" onClick={() => setMobileOpen(false)}>
+                      {t("login")}
+                    </Link>
+                  </Button>
+                  <Button asChild className="w-full">
+                    <Link href="/sign-up" onClick={() => setMobileOpen(false)}>
+                      {t("getStarted")}
+                    </Link>
+                  </Button>
+                </>
+              )}
+            </div>
+          </div>
+        </SheetContent>
+      </Sheet>
+    </header>
+  );
+}

package/template/src/features/marketing/components/hero-section.tsx

@@ -0,0 +1,323 @@
+"use client";
+
+import { motion } from "framer-motion";
+import { ArrowRight } from "lucide-react";
+import { useTranslations } from "next-intl";
+import { useTheme } from "next-themes";
+import type { ReactNode } from "react";
+import { useEffect, useRef } from "react";
+
+import { Button } from "@/components/ui/button";
+import { Link } from "@/i18n/routing";
+
+/**
+ * 缓动曲线（全站统一）+ 入场动画变体
+ */
+const EASE: [number, number, number, number] = [0.22, 0.7, 0.16, 1];
+
+const containerVariants = {
+  hidden: {},
+  show: {
+    transition: { staggerChildren: 0.08, delayChildren: 0.04 },
+  },
+};
+
+const itemVariants = {
+  hidden: { opacity: 0, y: 16 },
+  show: { opacity: 1, y: 0, transition: { duration: 0.6, ease: EASE } },
+};
+
+/**
+ * Hero Section —— 工程图纸风首页主视觉
+ *
+ * 左：eyebrow + 大标题（主色高亮下划线）+ 副标题 + CTA + 真实仓库指标
+ * 右：生产环境读数面板（指标 + 折线 + 状态药丸），展示 dashboard 级精致度
+ */
+export function HeroSection() {
+  const t = useTranslations("Hero");
+
+  return (
+    <section className="relative overflow-hidden">
+      {/* 氛围层：双色光晕 + 极淡网格（顶部渐隐） */}
+      <div
+        aria-hidden
+        className="aura pointer-events-none absolute inset-0 -z-10"
+      />
+      <div
+        aria-hidden
+        className="bg-grid pointer-events-none absolute inset-0 -z-10 opacity-70 [mask-image:radial-gradient(72%_60%_at_50%_0%,black,transparent)]"
+      />
+
+      <div className="container grid items-center gap-14 py-20 md:py-28 lg:grid-cols-[1.05fr_0.95fr] lg:gap-16">
+        {/* 左列 */}
+        <motion.div
+          variants={containerVariants}
+          initial="hidden"
+          animate="show"
+          className="flex flex-col items-start"
+        >
+          <motion.span variants={itemVariants} className="eyebrow">
+            {t("eyebrow")}
+          </motion.span>
+
+          <motion.h1
+            variants={itemVariants}
+            className="mt-6 text-4xl font-extrabold tracking-tight text-balance text-foreground text-[clamp(2.5rem,6vw,4.5rem)] leading-[1.02]"
+          >
+            <span className="block">{t("title1")}</span>
+            <span className="block">
+              <span className="relative inline-block text-primary">
+                {t("titleHighlight")}
+                <span
+                  aria-hidden
+                  className="absolute inset-x-0 -bottom-1 h-[6px] rounded-sm bg-primary/20"
+                />
+              </span>
+            </span>
+          </motion.h1>
+
+          <motion.p
+            variants={itemVariants}
+            className="mt-6 max-w-xl text-base leading-relaxed text-muted-foreground sm:text-lg"
+          >
+            {t("subtitle")}
+          </motion.p>
+
+          <motion.div
+            variants={itemVariants}
+            className="mt-8 flex w-full flex-col gap-3 sm:w-auto sm:flex-row"
+          >
+            <Button size="lg" asChild className="group">
+              <Link href="/sign-up">
+                {t("getStarted")}
+                <ArrowRight className="transition-transform group-hover:translate-x-0.5" />
+              </Link>
+            </Button>
+            <Button size="lg" variant="outline" asChild>
+              <Link href="/#features">{t("seeDemo")}</Link>
+            </Button>
+          </motion.div>
+
+          <motion.div
+            variants={itemVariants}
+            className="mt-10 grid w-full max-w-lg grid-cols-2 gap-x-8 gap-y-5 border-t pt-7 sm:grid-cols-4"
+          >
+            <Stat k="18" v={t("meta.modules")} />
+            <Stat k="256" v={t("meta.tests")} />
+            <Stat k="0" v={t("meta.errors")} />
+            <Stat k="MIT" v={t("meta.license")} />
+          </motion.div>
+        </motion.div>
+
+        {/* 右列：生产环境读数面板 */}
+        <motion.div
+          initial={{ opacity: 0, y: 24 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.8, delay: 0.25, ease: EASE }}
+        >
+          <ProductionPanel />
+        </motion.div>
+      </div>
+    </section>
+  );
+}
+
+/** 指标小卡（左侧大数字 + 标签） */
+function Stat({ k, v }: { k: string; v: string }) {
+  return (
+    <div>
+      <div className="mono-data text-2xl font-bold tracking-tight text-foreground">
+        {k}
+      </div>
+      <div className="mt-1 text-xs text-muted-foreground">{v}</div>
+    </div>
+  );
+}
+
+/** 面板内的指标单元 */
+function Metric({
+  delta,
+  label,
+  unit,
+  value,
+}: {
+  delta: string;
+  label: string;
+  unit?: string;
+  value: string;
+}) {
+  return (
+    <div className="p-3.5 [&:not(:first-child)]:border-l [&:not(:first-child)]:border-border">
+      <div className="font-mono text-[10px] font-semibold tracking-[0.14em] text-muted-foreground/80 uppercase">
+        {label}
+      </div>
+      <div className="mono-data mt-2 text-xl font-bold tracking-tight text-foreground">
+        {value}
+        {unit ? (
+          <span className="text-xs text-muted-foreground">{unit}</span>
+        ) : null}
+      </div>
+      <div className="mt-1 text-[11px] font-semibold text-primary">{delta}</div>
+    </div>
+  );
+}
+
+/** 状态药丸 */
+function Pill({ children, ok = false }: { children: ReactNode; ok?: boolean }) {
+  return (
+    <span
+      className={`inline-flex items-center gap-1.5 rounded-full border px-2.5 py-1 font-mono text-[10px] font-semibold tracking-[0.12em] uppercase ${
+        ok
+          ? "border-primary/30 text-foreground"
+          : "border-border text-muted-foreground"
+      }`}
+    >
+      <span
+        className={`h-1.5 w-1.5 rounded-full ${ok ? "bg-primary" : "bg-muted-foreground/40"}`}
+      />
+      {children}
+    </span>
+  );
+}
+
+/** Hero 右侧：生产环境读数面板（含 canvas 折线图） */
+function ProductionPanel() {
+  const t = useTranslations("Hero.panel");
+  const { resolvedTheme } = useTheme();
+  const canvasRef = useRef<HTMLCanvasElement>(null);
+
+  // resolvedTheme 是有意依赖：主题切换后 CSS 变量（--primary 等）变化，
+  // 需要用新颜色重画 canvas。effect 内部通过 getComputedStyle 间接读取颜色，
+  // Biome 检测不到这层依赖，故显式保留并抑制告警。
+  // biome-ignore lint/correctness/useExhaustiveDependencies: intentional theme-driven redraw
+  useEffect(() => {
+    const cv = canvasRef.current;
+    if (!cv) return;
+    const ctx = cv.getContext("2d");
+    if (!ctx) return;
+
+    const dpr = window.devicePixelRatio || 1;
+    const w = cv.clientWidth;
+    const h = 72;
+    cv.width = w * dpr;
+    cv.height = h * dpr;
+    ctx.scale(dpr, dpr);
+    ctx.clearRect(0, 0, w, h);
+
+    const data = [8, 12, 9, 14, 11, 16, 13, 18, 15, 20, 17, 22, 19, 28, 26, 32];
+    const max = Math.max(...data);
+    const min = Math.min(...data);
+    const pad = 8;
+    const X = (i: number) => (i / (data.length - 1)) * (w - pad * 2) + pad;
+    const Y = (v: number) =>
+      h - pad - ((v - min) / (max - min)) * (h - pad * 2);
+
+    const cs = getComputedStyle(document.documentElement);
+    const accent = cs.getPropertyValue("--primary").trim() || "#0F5C57";
+    const hair = cs.getPropertyValue("--border").trim() || "#ddd";
+
+    // 把任意 CSS 颜色（含 oklch）转成带透明度的合法颜色字符串。
+    // 注意：不能用 hex 拼接 `${accent}55`——主色是 oklch 时拼出来是非法颜色，
+    // 会让 canvas addColorStop 抛异常、整个组件白屏。color-mix 在所有现代浏览器
+    // 都支持，且能正确处理 oklch / hex / rgb。
+    const withAlpha = (color: string, pct: number) =>
+      `color-mix(in srgb, ${color} ${pct}%, transparent)`;
+
+    // 基线
+    ctx.strokeStyle = hair;
+    ctx.lineWidth = 1;
+    ctx.beginPath();
+    ctx.moveTo(0, h - pad + 0.5);
+    ctx.lineTo(w, h - pad + 0.5);
+    ctx.stroke();
+
+    // 区域填充
+    const grad = ctx.createLinearGradient(0, 0, 0, h);
+    grad.addColorStop(0, withAlpha(accent, 33));
+    grad.addColorStop(1, withAlpha(accent, 0));
+    ctx.beginPath();
+    ctx.moveTo(X(0), h - pad);
+    data.forEach((v, i) => {
+      ctx.lineTo(X(i), Y(v));
+    });
+    ctx.lineTo(X(data.length - 1), h - pad);
+    ctx.closePath();
+    ctx.fillStyle = grad;
+    ctx.fill();
+
+    // 折线
+    ctx.beginPath();
+    data.forEach((v, i) => {
+      if (i === 0) ctx.moveTo(X(i), Y(v));
+      else ctx.lineTo(X(i), Y(v));
+    });
+    ctx.strokeStyle = accent;
+    ctx.lineWidth = 1.8;
+    ctx.lineJoin = "round";
+    ctx.stroke();
+
+    // 强调终点
+    const last = data[data.length - 1] ?? 0;
+    const lx = X(data.length - 1);
+    const ly = Y(last);
+    ctx.beginPath();
+    ctx.arc(lx, ly, 7, 0, Math.PI * 2);
+    ctx.fillStyle = withAlpha(accent, 13);
+    ctx.fill();
+    ctx.beginPath();
+    ctx.arc(lx, ly, 3.2, 0, Math.PI * 2);
+    ctx.fillStyle = accent;
+    ctx.fill();
+  }, [resolvedTheme]);
+
+  return (
+    <div className="relative overflow-hidden rounded-xl border bg-card text-card-foreground shadow-lifted">
+      <div
+        aria-hidden
+        className="pointer-events-none absolute inset-0 bg-gradient-to-b from-primary/5 to-transparent"
+      />
+      {/* 面板头 */}
+      <div className="relative flex items-center gap-2.5 border-b px-5 py-3.5">
+        <span className="relative flex h-2 w-2">
+          <span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-primary/60" />
+          <span className="relative inline-flex h-2 w-2 rounded-full bg-primary" />
+        </span>
+        <span className="font-mono text-[11px] font-semibold tracking-[0.14em] text-muted-foreground uppercase">
+          {t("title")}
+        </span>
+        <span className="ml-auto font-mono text-[11px] text-muted-foreground/70">
+          {t("region")}
+        </span>
+      </div>
+
+      {/* 指标行 */}
+      <div className="relative space-y-4 p-5">
+        <div className="grid grid-cols-3 overflow-hidden rounded-lg border bg-card">
+          <Metric delta="↓ 12" label={t("p95")} unit="ms" value="84" />
+          <Metric delta="30d" label={t("uptime")} unit="%" value="99.98" />
+          <Metric delta="↑ 8%" label={t("jobs")} value="1,420" />
+        </div>
+
+        {/* 折线 */}
+        <div className="rounded-lg border bg-muted/30 p-4">
+          <div className="flex items-baseline justify-between">
+            <span className="font-mono text-[10px] font-semibold tracking-[0.14em] text-muted-foreground uppercase">
+              {t("signups")}
+            </span>
+            <span className="mono-data text-lg font-bold text-foreground">
+              3,284{" "}
+              <span className="text-xs font-semibold text-primary">+24%</span>
+            </span>
+          </div>
+          <canvas ref={canvasRef} className="mt-2 h-[72px] w-full" />
+        </div>
+      </div>
+
+      {/* 状态药丸 */}
+      <div className="relative flex flex-wrap gap-2 border-t bg-muted/30 px-5 py-3">
+        <Pill ok>{t("pillOk")}</Pill>
+        <Pill>{t("pillStack")}</Pill>
+      </div>
+    </div>
+  );
+}

package/template/src/features/marketing/components/how-it-works.tsx

@@ -0,0 +1,115 @@
+"use client";
+
+import { Check } from "lucide-react";
+import { useTranslations } from "next-intl";
+import type { ReactNode } from "react";
+
+import { Reveal } from "@/components/motion/reveal";
+
+/**
+ * HowItWorks —— 三步流程
+ *
+ * 用编号 01/02/03 是因为内容本身就是有序流程（克隆 → 配置 → 上线），
+ * 编码承载信息，所以保留；非装饰性编号。
+ */
+const steps: {
+  key: "upload" | "generate" | "export";
+  n: string;
+  code: ReactNode;
+}[] = [
+  {
+    key: "upload",
+    n: "01",
+    code: (
+      <code className="block">
+        <span className="text-muted-foreground/60">$</span> git clone
+        nextdev-tpl{"\n"}
+        <span className="text-muted-foreground/60">$</span> pnpm install
+      </code>
+    ),
+  },
+  {
+    key: "generate",
+    n: "02",
+    code: (
+      <code className="block">
+        <span className="text-muted-foreground/60">.env</span>
+        {"\n"}DATABASE_URL=
+        <span className="text-muted-foreground">postgres://…</span>
+        {"\n"}BETTER_AUTH_SECRET=
+        <span className="text-muted-foreground">…</span>
+        {"\n"}AI_PROVIDER=<span className="text-primary">"openai"</span>
+      </code>
+    ),
+  },
+  {
+    key: "export",
+    n: "03",
+    code: (
+      <code className="block">
+        <span className="text-muted-foreground/60">$</span> pnpm build{" "}
+        <span className="text-muted-foreground/60">&amp;&amp;</span> deploy
+        {"\n"}
+        <span className="text-muted-foreground/60">→</span> live in ~6 min
+      </code>
+    ),
+  },
+];
+
+export function HowItWorks() {
+  const t = useTranslations("HowItWorks");
+
+  return (
+    <section id="how-it-works" className="border-t bg-muted/30 py-24">
+      <div className="container">
+        <Reveal>
+          <div className="mb-14 max-w-2xl">
+            <span className="eyebrow">{t("label")}</span>
+            <h2 className="mt-4 text-balance text-3xl font-extrabold tracking-tight text-foreground md:text-4xl">
+              {t("title")}
+            </h2>
+            <p className="mt-4 text-muted-foreground">{t("subtitle")}</p>
+          </div>
+        </Reveal>
+
+        <Reveal delay={0.08}>
+          <div className="grid gap-8 md:grid-cols-3">
+            {steps.map((s) => (
+              <div key={s.key}>
+                <div className="flex items-center gap-3">
+                  <span className="font-mono text-sm font-bold text-primary">
+                    {s.n}
+                  </span>
+                  <span className="h-px flex-1 bg-border" />
+                </div>
+                <h3 className="mt-5 text-xl font-bold tracking-tight text-foreground">
+                  {t(`steps.${s.key}.title`)}
+                </h3>
+                <p className="mt-2 text-sm leading-relaxed text-muted-foreground">
+                  {t(`steps.${s.key}.description`)}
+                </p>
+                <pre className="mt-5 overflow-x-auto rounded-lg border bg-card p-4 font-mono text-xs leading-relaxed text-foreground">
+                  {s.code}
+                </pre>
+              </div>
+            ))}
+          </div>
+        </Reveal>
+
+        <Reveal delay={0.16}>
+          <div className="mt-10 flex items-center gap-4 rounded-xl border bg-card p-6">
+            <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-success/15 text-success">
+              <Check className="h-5 w-5" />
+            </div>
+            <div>
+              <p className="font-semibold">{t("completion.title")}</p>
+              <p className="text-sm text-muted-foreground">
+                {t("completion.description")}
+              </p>
+            </div>
+          </div>
+        </Reveal>
+      </div>
+    </section>
+  );
+}