create-nextdevtpl 2.6.0

package/template/src/features/marketing/components/cookie-consent.tsx

@@ -0,0 +1,255 @@
+"use client";
+
+import { useTranslations } from "next-intl";
+import { useCallback, useEffect, useState } from "react";
+
+import { Button } from "@/components/ui/button";
+import { Switch } from "@/components/ui/switch";
+import { Link } from "@/i18n/routing";
+import {
+  COOKIE_CONSENT_CHANGE_EVENT,
+  COOKIE_CONSENT_KEY,
+  COOKIE_PREFERENCES_KEY,
+  type CookieConsentType,
+  type CookiePreferences,
+} from "@/lib/cookie-consent";
+import { cn } from "@/lib/utils";
+
+/**
+ * 默认 Cookie 偏好
+ */
+const DEFAULT_PREFERENCES: CookiePreferences = {
+  analytics: true,
+  marketing: true,
+};
+
+/**
+ * Cookie Consent Banner 组件
+ *
+ * 功能:
+ * - 首次访问时显示 Cookie 同意横幅
+ * - 用户可选择接受全部、仅必要或管理偏好
+ * - 选择后存储到 localStorage
+ * - 支持动画过渡效果
+ * - 跟踪用户的具体偏好设置
+ * - 支持多语言 (中英文)
+ */
+export function CookieConsent() {
+  const t = useTranslations("Cookie");
+
+  // 是否显示横幅
+  const [isVisible, setIsVisible] = useState(false);
+  // 是否显示详细设置面板
+  const [showDetails, setShowDetails] = useState(false);
+  // Cookie 偏好设置
+  const [preferences, setPreferences] =
+    useState<CookiePreferences>(DEFAULT_PREFERENCES);
+
+  /**
+   * 检查是否已有 Cookie 同意记录
+   */
+  useEffect(() => {
+    const consent = localStorage.getItem(COOKIE_CONSENT_KEY);
+    if (!consent) {
+      // 延迟显示，避免页面加载时闪烁
+      const timer = setTimeout(() => setIsVisible(true), 1000);
+      return () => clearTimeout(timer);
+    }
+    // 加载已保存的偏好设置
+    const savedPreferences = localStorage.getItem(COOKIE_PREFERENCES_KEY);
+    if (savedPreferences) {
+      try {
+        setPreferences(JSON.parse(savedPreferences));
+      } catch {
+        // 忽略解析错误
+      }
+    }
+    return undefined;
+  }, []);
+
+  /**
+   * 保存 Cookie 同意设置
+   */
+  const saveConsent = useCallback(
+    (consent: CookieConsentType, prefs?: CookiePreferences) => {
+      localStorage.setItem(COOKIE_CONSENT_KEY, consent || "");
+      if (prefs) {
+        localStorage.setItem(COOKIE_PREFERENCES_KEY, JSON.stringify(prefs));
+      }
+      // 触发自定义事件通知 Analytics 组件
+      window.dispatchEvent(new CustomEvent(COOKIE_CONSENT_CHANGE_EVENT));
+      setIsVisible(false);
+    },
+    []
+  );
+
+  /**
+   * 处理接受全部 Cookie
+   */
+  const handleAcceptAll = useCallback(() => {
+    const allPreferences: CookiePreferences = {
+      analytics: true,
+      marketing: true,
+    };
+    setPreferences(allPreferences);
+    saveConsent("all", allPreferences);
+  }, [saveConsent]);
+
+  /**
+   * 处理仅接受必要 Cookie
+   */
+  const handleRejectAll = useCallback(() => {
+    const essentialPreferences: CookiePreferences = {
+      analytics: false,
+      marketing: false,
+    };
+    setPreferences(essentialPreferences);
+    saveConsent("essential", essentialPreferences);
+  }, [saveConsent]);
+
+  /**
+   * 处理保存当前偏好设置
+   */
+  const handleSavePreferences = useCallback(() => {
+    // 根据偏好确定同意类型
+    const consentType: CookieConsentType =
+      preferences.analytics || preferences.marketing ? "all" : "essential";
+    saveConsent(consentType, preferences);
+  }, [preferences, saveConsent]);
+
+  /**
+   * 更新偏好设置
+   */
+  const updatePreference = useCallback(
+    (key: keyof CookiePreferences, value: boolean) => {
+      setPreferences((prev) => ({ ...prev, [key]: value }));
+    },
+    []
+  );
+
+  // 不显示时返回 null
+  if (!isVisible) return null;
+
+  return (
+    <div
+      className={cn(
+        "fixed bottom-0 left-0 right-0 z-50 p-4",
+        "animate-in slide-in-from-bottom-5 duration-300"
+      )}
+    >
+      <div className="container">
+        <div className="rounded-lg border bg-background p-6 shadow-lg">
+          {!showDetails ? (
+            // 简洁视图
+            <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
+              <div className="flex-1">
+                <h3 className="text-lg font-semibold">{t("title")}</h3>
+                <p className="mt-1 text-sm text-muted-foreground">
+                  {t("description")}
+                  <Link
+                    href="/legal/privacy"
+                    className="ml-1 underline underline-offset-4 hover:text-foreground"
+                  >
+                    {t("privacyPolicy")}
+                  </Link>
+                  。
+                </p>
+              </div>
+              <div className="flex flex-wrap items-center gap-2">
+                <Button
+                  variant="outline"
+                  size="sm"
+                  onClick={() => setShowDetails(true)}
+                >
+                  {t("managePreferences")}
+                </Button>
+                <Button variant="outline" size="sm" onClick={handleRejectAll}>
+                  {t("rejectAll")}
+                </Button>
+                <Button size="sm" onClick={handleAcceptAll}>
+                  {t("acceptAll")}
+                </Button>
+              </div>
+            </div>
+          ) : (
+            // 详细设置视图
+            <div className="space-y-4">
+              <div className="flex items-center justify-between">
+                <h3 className="text-lg font-semibold">
+                  {t("preferencesTitle")}
+                </h3>
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  onClick={() => setShowDetails(false)}
+                >
+                  {t("back")}
+                </Button>
+              </div>
+
+              <div className="space-y-3">
+                {/* 必要 Cookie */}
+                <div className="flex items-start justify-between rounded-md border p-4">
+                  <div className="flex-1">
+                    <h4 className="font-medium">{t("essential.title")}</h4>
+                    <p className="mt-1 text-sm text-muted-foreground">
+                      {t("essential.description")}
+                    </p>
+                  </div>
+                  <div className="ml-4 text-sm text-muted-foreground">
+                    {t("alwaysEnabled")}
+                  </div>
+                </div>
+
+                {/* 分析 Cookie */}
+                <div className="flex items-start justify-between rounded-md border p-4">
+                  <div className="flex-1">
+                    <h4 className="font-medium">{t("analytics.title")}</h4>
+                    <p className="mt-1 text-sm text-muted-foreground">
+                      {t("analytics.description")}
+                    </p>
+                  </div>
+                  <div className="ml-4">
+                    <Switch
+                      checked={preferences.analytics}
+                      onCheckedChange={(checked) =>
+                        updatePreference("analytics", checked)
+                      }
+                    />
+                  </div>
+                </div>
+
+                {/* 营销 Cookie */}
+                <div className="flex items-start justify-between rounded-md border p-4">
+                  <div className="flex-1">
+                    <h4 className="font-medium">{t("marketing.title")}</h4>
+                    <p className="mt-1 text-sm text-muted-foreground">
+                      {t("marketing.description")}
+                    </p>
+                  </div>
+                  <div className="ml-4">
+                    <Switch
+                      checked={preferences.marketing}
+                      onCheckedChange={(checked) =>
+                        updatePreference("marketing", checked)
+                      }
+                    />
+                  </div>
+                </div>
+              </div>
+
+              <div className="flex justify-end gap-2 pt-2">
+                <Button variant="outline" size="sm" onClick={handleRejectAll}>
+                  {t("rejectAll")}
+                </Button>
+                <Button size="sm" onClick={handleSavePreferences}>
+                  {t("saveSettings")}
+                </Button>
+              </div>
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,50 @@
+"use client";
+
+import { ArrowRight } from "lucide-react";
+import Link from "next/link";
+import { useTranslations } from "next-intl";
+
+import { Reveal } from "@/components/motion/reveal";
+import { Button } from "@/components/ui/button";
+
+export function CTASection() {
+  const t = useTranslations("CTA");
+
+  return (
+    <section className="border-t py-24">
+      <div className="container">
+        <Reveal>
+          {/* spec-sheet 风格盒子：卡片底 + 顶部主色光晕 + 网格 + 颗粒 */}
+          <div className="aura grain relative overflow-hidden rounded-2xl border bg-card px-6 py-16 text-center shadow-soft md:px-16 md:py-20">
+            <div
+              aria-hidden
+              className="bg-grid pointer-events-none absolute inset-0 opacity-60 [mask-image:radial-gradient(60%_60%_at_50%_0%,black,transparent)]"
+            />
+            <div className="relative mx-auto max-w-2xl">
+              <span className="eyebrow justify-center">{t("badge")}</span>
+
+              <h2 className="mt-5 text-balance text-3xl font-extrabold tracking-tight text-foreground md:text-4xl">
+                {t("title")}
+              </h2>
+              <p className="mx-auto mt-4 max-w-xl text-muted-foreground">
+                {t("subtitle")}
+              </p>
+
+              <div className="mt-8 flex flex-col items-center justify-center gap-3 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="/dashboard/generate">{t("seeDemo")}</Link>
+                </Button>
+              </div>
+            </div>
+          </div>
+        </Reveal>
+      </div>
+    </section>
+  );
+}

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

@@ -0,0 +1,59 @@
+"use client";
+
+import { useTranslations } from "next-intl";
+
+import { Reveal } from "@/components/motion/reveal";
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "@/components/ui/accordion";
+
+export function FAQSection() {
+  const t = useTranslations("FAQ");
+
+  const faqItems = [
+    {
+      question: t("items.0.question"),
+      answer: t("items.0.answer"),
+    },
+    {
+      question: t("items.1.question"),
+      answer: t("items.1.answer"),
+    },
+    {
+      question: t("items.2.question"),
+      answer: t("items.2.answer"),
+    },
+  ];
+
+  return (
+    <section className="border-t py-24">
+      <div className="container max-w-3xl">
+        <Reveal>
+          <div className="mb-12 text-center">
+            <span className="eyebrow justify-center">{t("label")}</span>
+            <h2 className="mt-4 text-balance text-3xl font-extrabold tracking-tight text-foreground md:text-4xl">
+              {t("title")}
+            </h2>
+          </div>
+        </Reveal>
+
+        <Reveal delay={0.08}>
+          <Accordion type="single" collapsible className="w-full">
+            {faqItems.map((faq, index) => (
+              // biome-ignore lint/suspicious/noArrayIndexKey: static FAQ list
+              <AccordionItem key={index} value={`item-${index}`}>
+                <AccordionTrigger className="text-left">
+                  {faq.question}
+                </AccordionTrigger>
+                <AccordionContent>{faq.answer}</AccordionContent>
+              </AccordionItem>
+            ))}
+          </Accordion>
+        </Reveal>
+      </div>
+    </section>
+  );
+}

package/template/src/features/marketing/components/feature-grid.tsx

@@ -0,0 +1,80 @@
+"use client";
+
+import {
+  Coins,
+  CreditCard,
+  Languages,
+  LayoutGrid,
+  ShieldCheck,
+  Zap,
+} from "lucide-react";
+import { useTranslations } from "next-intl";
+
+import { Reveal } from "@/components/motion/reveal";
+
+/**
+ * 功能模块配置
+ * - icon 与卡片内容匹配（认证/支付/积分/异步/国际化/管理后台）
+ * - path 是展示用的"工程化"代码路径标签，不需要翻译
+ */
+const featureConfig = [
+  { key: "ai" as const, icon: ShieldCheck, path: "/auth" },
+  { key: "multiSource" as const, icon: CreditCard, path: "/payment" },
+  { key: "outline" as const, icon: Coins, path: "/credits" },
+  { key: "export" as const, icon: Zap, path: "/jobs" },
+  { key: "batch" as const, icon: Languages, path: "/i18n" },
+  { key: "multilingual" as const, icon: LayoutGrid, path: "/admin" },
+];
+
+export function FeatureGrid() {
+  const t = useTranslations("Features");
+
+  return (
+    <section id="features" className="border-t py-24">
+      <div className="container">
+        <Reveal>
+          <div className="mb-14 flex flex-col gap-5 md:flex-row md:items-end md:justify-between">
+            <div>
+              <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>
+            </div>
+            <p className="max-w-md text-muted-foreground">{t("subtitle")}</p>
+          </div>
+        </Reveal>
+
+        <Reveal delay={0.08}>
+          <div className="grid gap-px overflow-hidden rounded-xl border bg-border md:grid-cols-2 lg:grid-cols-3">
+            {featureConfig.map((feature) => {
+              const Icon = feature.icon;
+              return (
+                <div
+                  key={feature.key}
+                  className="group relative bg-card p-7 transition-colors hover:bg-muted/40"
+                >
+                  {/* 右上角代码路径索引 */}
+                  <span className="absolute top-6 right-6 font-mono text-[10px] font-semibold tracking-[0.14em] text-muted-foreground/60 uppercase">
+                    {feature.path}
+                  </span>
+
+                  {/* 图标：hover 时反色填充 */}
+                  <div className="mb-5 flex h-10 w-10 items-center justify-center rounded-md bg-primary/10 text-primary ring-1 ring-primary/20 transition-colors group-hover:bg-primary group-hover:text-primary-foreground">
+                    <Icon className="h-5 w-5" />
+                  </div>
+
+                  <h3 className="mb-2 font-semibold tracking-tight">
+                    {t(`items.${feature.key}.title`)}
+                  </h3>
+                  <p className="text-sm leading-relaxed text-muted-foreground">
+                    {t(`items.${feature.key}.description`)}
+                  </p>
+                </div>
+              );
+            })}
+          </div>
+        </Reveal>
+      </div>
+    </section>
+  );
+}

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

@@ -0,0 +1,128 @@
+import { Github, Twitter } from "lucide-react";
+import Link from "next/link";
+import { useTranslations } from "next-intl";
+
+import { footerNav, siteConfig } from "@/config";
+
+export function Footer() {
+  const t = useTranslations("Footer");
+
+  return (
+    <footer className="border-t bg-background">
+      <div className="container py-16">
+        <div className="grid gap-12 lg:grid-cols-[1fr_1fr]">
+          {/* 品牌区 */}
+          <div>
+            <Link
+              href="/"
+              className="mb-4 inline-flex items-center gap-2 text-xl font-bold"
+            >
+              {/* 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>
+              {siteConfig.name}
+            </Link>
+            <p className="max-w-sm text-sm text-muted-foreground">
+              {t("description")}
+            </p>
+          </div>
+
+          {/* 链接区 */}
+          <div className="grid grid-cols-2 gap-8">
+            {/* 产品 */}
+            <div>
+              <h3 className="mb-4 text-sm font-semibold">{t("product")}</h3>
+              <ul className="space-y-3">
+                {footerNav.product.map((link) => (
+                  <li key={link.href}>
+                    <Link
+                      href={link.href}
+                      {...(link.external
+                        ? { target: "_blank", rel: "noopener noreferrer" }
+                        : {})}
+                      className="text-sm text-muted-foreground transition-colors hover:text-foreground"
+                    >
+                      {link.title}
+                    </Link>
+                  </li>
+                ))}
+              </ul>
+            </div>
+
+            {/* 法律 */}
+            <div>
+              <h3 className="mb-4 text-sm font-semibold">{t("legal")}</h3>
+              <ul className="space-y-3">
+                {footerNav.legal.map((link) => (
+                  <li key={link.href}>
+                    <Link
+                      href={link.href}
+                      className="text-sm text-muted-foreground transition-colors hover:text-foreground"
+                    >
+                      {link.title}
+                    </Link>
+                  </li>
+                ))}
+              </ul>
+            </div>
+          </div>
+        </div>
+
+        {/* 底部栏 */}
+        <div className="mt-12 flex flex-col items-center justify-between gap-4 border-t pt-8 sm:flex-row">
+          <p className="font-mono text-xs tracking-wide text-muted-foreground">
+            {t("copyright", {
+              year: new Date().getFullYear(),
+              name: siteConfig.name,
+            })}
+          </p>
+
+          {/* 社交链接 */}
+          <div className="flex items-center gap-4">
+            <Link
+              href={siteConfig.links.twitter}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="text-muted-foreground transition-colors hover:text-foreground"
+            >
+              <Twitter className="h-5 w-5" />
+              <span className="sr-only">{t("twitter")}</span>
+            </Link>
+            <Link
+              href={siteConfig.links.github}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="text-muted-foreground transition-colors hover:text-foreground"
+            >
+              <Github className="h-5 w-5" />
+              <span className="sr-only">{t("github")}</span>
+            </Link>
+          </div>
+        </div>
+      </div>
+    </footer>
+  );
+}