create-nextdevtpl 2.6.0

package/template/src/features/marketing/components/index.ts

@@ -0,0 +1,14 @@
+// 布局组件
+
+export { CookieConsent } from "./cookie-consent";
+// 页面区块组件
+export { CTASection } from "./cta-section";
+export { FAQSection } from "./faq-section";
+export { FeatureGrid } from "./feature-grid";
+export { Footer } from "./footer";
+export { Header } from "./header";
+export { HeroSection } from "./hero-section";
+export { HowItWorks } from "./how-it-works";
+export { PricingSection } from "./pricing-section";
+export { Testimonials } from "./testimonials";
+export { UseCasesSection } from "./use-cases-section";

package/template/src/features/marketing/components/nav-menu.tsx

@@ -0,0 +1,236 @@
+"use client";
+
+import { AnimatePresence, motion } from "framer-motion";
+import { ChevronDown } from "lucide-react";
+import { usePathname } from "next/navigation";
+import { useTranslations } from "next-intl";
+import { useRef, useState } from "react";
+
+import {
+  NavigationMenu,
+  NavigationMenuItem,
+  NavigationMenuLink,
+  NavigationMenuList,
+} from "@/components/ui/navigation-menu";
+import { mainNav, productsNav } from "@/config";
+import { Link } from "@/i18n/routing";
+import { cn } from "@/lib/utils";
+
+/**
+ * Products 下拉菜单翻译映射 key
+ * 用 i18n 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",
+};
+
+const productsDescMap: Record<string, string> = {
+  Authentication: "productsMenu.core.authDesc",
+  Payments: "productsMenu.core.paymentsDesc",
+  Credits: "productsMenu.core.creditsDesc",
+  "Background Jobs": "productsMenu.dx.jobsDesc",
+  Internationalization: "productsMenu.dx.i18nDesc",
+  "AI Integration": "productsMenu.dx.aiDesc",
+  "Admin Panel": "productsMenu.infra.adminDesc",
+  "File Storage": "productsMenu.infra.storageDesc",
+  Monitoring: "productsMenu.infra.monitoringDesc",
+};
+
+/**
+ * 导航菜单组件
+ *
+ * 包含 Products 下拉菜单和普通导航链接
+ */
+export function NavMenu() {
+  const pathname = usePathname();
+  const t = useTranslations("Navigation");
+  const [hoveredItem, setHoveredItem] = useState<string | null>(null);
+  const [productsOpen, setProductsOpen] = useState(false);
+  const closeTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  const navTitleMap: Record<string, string> = {
+    Docs: t("docs"),
+    PSEO: t("pseo"),
+    Pricing: t("pricing"),
+    Blog: t("blog"),
+  };
+
+  const isActive = (href: string) => {
+    if (href.startsWith("/#")) return false;
+    const cleanPath = pathname.replace(/^\/[a-z]{2}/, "") || "/";
+    return cleanPath === href || cleanPath.startsWith(`${href}/`);
+  };
+
+  const handleClick = (
+    e: React.MouseEvent<HTMLAnchorElement>,
+    href: string
+  ) => {
+    if (href.startsWith("/#")) {
+      const anchor = href.substring(2);
+      const isHomePage = pathname === "/" || pathname.match(/^\/[a-z]{2}$/);
+      if (isHomePage) {
+        e.preventDefault();
+        const element = document.getElementById(anchor);
+        if (element) {
+          element.scrollIntoView({ behavior: "smooth" });
+        }
+      }
+    }
+  };
+
+  const handleProductsEnter = () => {
+    if (closeTimeoutRef.current) {
+      clearTimeout(closeTimeoutRef.current);
+      closeTimeoutRef.current = null;
+    }
+    setProductsOpen(true);
+  };
+
+  const handleProductsLeave = () => {
+    closeTimeoutRef.current = setTimeout(() => {
+      setProductsOpen(false);
+    }, 150);
+  };
+
+  return (
+    <NavigationMenu onMouseLeave={() => setHoveredItem(null)}>
+      <NavigationMenuList className="gap-0">
+        {/* Products 下拉菜单 */}
+        <NavigationMenuItem
+          className="relative"
+          onMouseEnter={handleProductsEnter}
+          onMouseLeave={handleProductsLeave}
+        >
+          <button
+            type="button"
+            className={cn(
+              "relative inline-flex h-9 items-center justify-center gap-1 px-4 py-2 text-sm font-medium transition-colors",
+              productsOpen
+                ? "text-foreground"
+                : "text-muted-foreground hover:text-foreground"
+            )}
+            onMouseEnter={() => setHoveredItem("products")}
+          >
+            {hoveredItem === "products" && (
+              <motion.span
+                layoutId="nav-pill"
+                className="absolute inset-0 -z-10 rounded-md bg-muted"
+                transition={{ type: "spring", bounce: 0.2, duration: 0.6 }}
+              />
+            )}
+            {t("products")}
+            <ChevronDown
+              className={cn(
+                "h-3.5 w-3.5 transition-transform duration-200",
+                productsOpen && "rotate-180"
+              )}
+            />
+          </button>
+
+          {/* Dropdown panel */}
+          <AnimatePresence>
+            {productsOpen && (
+              <motion.div
+                initial={{ opacity: 0, y: 8 }}
+                animate={{ opacity: 1, y: 0 }}
+                exit={{ opacity: 0, y: 8 }}
+                transition={{ duration: 0.15 }}
+                className="absolute left-1/2 top-full z-50 -translate-x-1/2 pt-2"
+                onMouseEnter={handleProductsEnter}
+                onMouseLeave={handleProductsLeave}
+              >
+                <div className="w-[640px] rounded-xl border bg-popover p-4 shadow-lg">
+                  <div className="grid grid-cols-3 gap-4">
+                    {productsNav.map((group) => (
+                      <div key={group.title}>
+                        <h4 className="mb-3 px-2 text-xs font-semibold uppercase tracking-wider text-muted-foreground">
+                          {t(productsTitleMap[group.title] || group.title)}
+                        </h4>
+                        <div className="space-y-1">
+                          {group.items.map((item) => {
+                            const Icon = item.icon;
+                            return (
+                              <Link
+                                key={item.title}
+                                href={item.href}
+                                onClick={() => setProductsOpen(false)}
+                                className="flex items-start gap-3 rounded-lg px-2 py-2 transition-colors hover:bg-muted"
+                              >
+                                <Icon className="mt-0.5 h-4 w-4 shrink-0 text-primary" />
+                                <div>
+                                  <div className="text-sm font-medium">
+                                    {t(
+                                      productsTitleMap[item.title] || item.title
+                                    )}
+                                  </div>
+                                  <div className="text-xs text-muted-foreground">
+                                    {t(
+                                      productsDescMap[item.title] || item.title
+                                    )}
+                                  </div>
+                                </div>
+                              </Link>
+                            );
+                          })}
+                        </div>
+                      </div>
+                    ))}
+                  </div>
+                </div>
+              </motion.div>
+            )}
+          </AnimatePresence>
+        </NavigationMenuItem>
+
+        {/* 普通导航链接 */}
+        {mainNav.map((item) => {
+          const active = isActive(item.href);
+          return (
+            <NavigationMenuItem key={item.href}>
+              <NavigationMenuLink asChild>
+                <Link
+                  href={item.href}
+                  onClick={(e) => handleClick(e, item.href)}
+                  onMouseEnter={() => setHoveredItem(item.href)}
+                  className={cn(
+                    "relative inline-flex h-9 items-center justify-center px-4 py-2 text-sm font-medium transition-colors",
+                    active
+                      ? "text-foreground"
+                      : "text-muted-foreground hover:text-foreground"
+                  )}
+                >
+                  {hoveredItem === item.href && (
+                    <motion.span
+                      layoutId="nav-pill"
+                      className="absolute inset-0 -z-10 rounded-md bg-muted"
+                      transition={{
+                        type: "spring",
+                        bounce: 0.2,
+                        duration: 0.6,
+                      }}
+                    />
+                  )}
+                  {active && !hoveredItem && (
+                    <motion.span className="absolute inset-0 -z-10 rounded-md bg-muted/50" />
+                  )}
+                  {navTitleMap[item.title] || item.title}
+                </Link>
+              </NavigationMenuLink>
+            </NavigationMenuItem>
+          );
+        })}
+      </NavigationMenuList>
+    </NavigationMenu>
+  );
+}

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

@@ -0,0 +1,446 @@
+"use client";
+
+import { BookOpen, Check, Coins, Layers, Loader2 } from "lucide-react";
+import { useTranslations } from "next-intl";
+import { useEffect, useState, useTransition } from "react";
+import { Reveal } from "@/components/motion/reveal";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Label } from "@/components/ui/label";
+import { Switch } from "@/components/ui/switch";
+import { getPlanPrice, paymentConfig } from "@/config/payment";
+import {
+  createCheckoutSession,
+  getUserSubscription,
+} from "@/features/payment/actions";
+import { PlanInterval } from "@/features/payment/types";
+import { useRouter } from "@/i18n/routing";
+import { useSession } from "@/lib/auth/client";
+import { cn } from "@/lib/utils";
+
+import { AnimatedPrice } from "./animated-price";
+
+/**
+ * 计划配置（用于获取价格等非翻译数据）
+ */
+const PLAN_IDS = ["free", "starter", "pro", "ultra"] as const;
+
+/**
+ * 计划功能 keys（按顺序显示，credits 单独突出显示）
+ */
+const PLAN_FEATURE_KEYS: Record<string, string[]> = {
+  free: [
+    "creditsNeverExpire",
+    "input",
+    "characters",
+    "fileSize",
+    "export",
+    "history",
+  ],
+  starter: [
+    "creditsNeverExpire",
+    "input",
+    "characters",
+    "fileSize",
+    "export",
+    "history",
+    "support",
+  ],
+  pro: [
+    "creditsNeverExpire",
+    "input",
+    "characters",
+    "fileSize",
+    "queue",
+    "export",
+    "history",
+    "customCards",
+    "support",
+  ],
+  ultra: [
+    "creditsNeverExpire",
+    "input",
+    "characters",
+    "fileSize",
+    "queue",
+    "export",
+    "history",
+    "customCards",
+    "aiAssist",
+    "support",
+  ],
+};
+
+/**
+ * 价格计划组件属性
+ */
+interface PricingSectionProps {
+  /** 用户当前订阅的价格 ID */
+  currentPriceId?: string | null;
+}
+
+/**
+ * 价格计划展示组件
+ */
+export function PricingSection({ currentPriceId }: PricingSectionProps) {
+  const t = useTranslations("Pricing");
+  const [isYearly, setIsYearly] = useState(false);
+  const [isPending, startTransition] = useTransition();
+  const [loadingPlan, setLoadingPlan] = useState<string | null>(null);
+  const router = useRouter();
+  const { data: session } = useSession();
+
+  // 获取用户当前订阅状态
+  const [activePriceId, setActivePriceId] = useState<string | null>(
+    currentPriceId ?? null
+  );
+
+  useEffect(() => {
+    if (!session?.user || currentPriceId) return;
+    getUserSubscription().then((result) => {
+      if (
+        result?.data?.subscription?.isActive &&
+        result.data.subscription.priceId
+      ) {
+        setActivePriceId(result.data.subscription.priceId);
+      }
+    });
+  }, [session?.user, currentPriceId]);
+
+  const { yearlyDiscount } = paymentConfig;
+
+  /**
+   * 获取计划配置
+   */
+  const getPlanConfig = (planId: string) => {
+    return paymentConfig.plans[planId as keyof typeof paymentConfig.plans];
+  };
+
+  /**
+   * 获取计划的当前价格
+   */
+  const getCurrentPrice = (planId: string) => {
+    const config = getPlanConfig(planId);
+    if (!config || !("prices" in config) || !config.prices) return null;
+    const interval = isYearly ? PlanInterval.YEAR : PlanInterval.MONTH;
+    return getPlanPrice(
+      { ...config, name: "", description: "", features: [], cta: "" },
+      interval
+    );
+  };
+
+  /**
+   * 获取显示价格
+   */
+  const getDisplayPrice = (planId: string): number => {
+    if (planId === "free") return 0;
+    const price = getCurrentPrice(planId);
+    return price?.amount ?? 0;
+  };
+
+  /**
+   * 获取价格后缀
+   */
+  const getPriceSuffix = (planId: string): string => {
+    if (planId === "free") return "";
+    return isYearly ? "/year" : "/month";
+  };
+
+  /**
+   * 检查是否为当前订阅
+   */
+  const isCurrentPlan = (planId: string) => {
+    if (!activePriceId) return false;
+    const config = getPlanConfig(planId);
+    if (!config || !("prices" in config) || !config.prices) return false;
+    return config.prices.some((p) => p.priceId === activePriceId);
+  };
+
+  /**
+   * 检查用户是否有活跃订阅（任意计划）
+   */
+  const hasSubscription = !!activePriceId;
+
+  /**
+   * 检查是否为热门计划
+   */
+  const isPopular = (planId: string) => {
+    const config = getPlanConfig(planId);
+    return config && "popular" in config && config.popular;
+  };
+
+  /**
+   * 处理订阅按钮点击
+   */
+  const handleSubscribe = async (planId: string) => {
+    if (planId === "free") {
+      router.push(session?.user ? "/dashboard" : "/sign-up");
+      return;
+    }
+
+    if (!session?.user) {
+      router.push("/sign-in?redirect=/#pricing");
+      return;
+    }
+
+    const price = getCurrentPrice(planId);
+    if (!price?.priceId) return;
+
+    setLoadingPlan(planId);
+
+    startTransition(async () => {
+      try {
+        const result = await createCheckoutSession({
+          priceId: price.priceId,
+          type: price.type,
+        });
+        if (result?.data?.url) {
+          window.location.href = result.data.url;
+        }
+      } catch (error) {
+        console.error("Failed to create checkout session:", error);
+      } finally {
+        setLoadingPlan(null);
+      }
+    });
+  };
+
+  /**
+   * 处理管理订阅按钮点击 — 跳转到账单设置页
+   */
+  const handleManageSubscription = () => {
+    router.push("/dashboard/settings");
+  };
+
+  return (
+    <section id="pricing" className="border-t py-24">
+      <div className="container">
+        {/* Header */}
+        <Reveal>
+          <div className="mx-auto mb-12 max-w-2xl text-center">
+            <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="mx-auto mt-4 max-w-xl text-muted-foreground">
+              {t.rich("subtitle", {
+                strong: (chunks) => (
+                  <strong className="font-semibold text-primary">
+                    {chunks}
+                  </strong>
+                ),
+              })}
+            </p>
+          </div>
+        </Reveal>
+
+        <Reveal delay={0.06}>
+          {/* Toggle */}
+          <div className="mb-12 flex items-center justify-center gap-4">
+            <Label
+              htmlFor="billing-toggle"
+              className={cn(
+                "text-sm font-medium",
+                !isYearly && "text-foreground",
+                isYearly && "text-muted-foreground"
+              )}
+            >
+              {t("monthly")}
+            </Label>
+            <Switch
+              id="billing-toggle"
+              checked={isYearly}
+              onCheckedChange={setIsYearly}
+            />
+            <Label
+              htmlFor="billing-toggle"
+              className={cn(
+                "text-sm font-medium",
+                isYearly && "text-foreground",
+                !isYearly && "text-muted-foreground"
+              )}
+            >
+              {t("yearly")}
+              <Badge variant="secondary" className="ml-2 text-xs">
+                {t("save")} {yearlyDiscount}%
+              </Badge>
+            </Label>
+          </div>
+        </Reveal>
+
+        <Reveal delay={0.12}>
+          {/* Cards */}
+          <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-4">
+            {PLAN_IDS.map((planId) => {
+              const price = getDisplayPrice(planId);
+              const isCurrent = isCurrentPlan(planId);
+              const isLoading = loadingPlan === planId;
+              const popular = isPopular(planId);
+              const featureKeys = PLAN_FEATURE_KEYS[planId] || [];
+
+              return (
+                <Card
+                  key={planId}
+                  className={cn(
+                    "relative flex flex-col shadow-none transition-all duration-300 hover:shadow-soft",
+                    popular && "border-primary shadow-soft",
+                    isCurrent && "border-primary ring-1 ring-primary"
+                  )}
+                >
+                  {popular && !isCurrent && (
+                    <Badge className="absolute -top-3 left-1/2 -translate-x-1/2 bg-primary">
+                      {t("mostPopular")}
+                    </Badge>
+                  )}
+                  {isCurrent && (
+                    <Badge className="absolute -top-3 left-1/2 -translate-x-1/2 bg-primary">
+                      {t("currentPlan")}
+                    </Badge>
+                  )}
+                  <CardHeader>
+                    <CardTitle className="text-lg font-semibold tracking-tight">
+                      {t(`plans.${planId}.name`)}
+                    </CardTitle>
+                    <p className="text-sm text-muted-foreground">
+                      {t(`plans.${planId}.description`)}
+                    </p>
+                  </CardHeader>
+                  <CardContent className="flex flex-1 flex-col">
+                    <div className="mb-4">
+                      <span className="mono-data text-4xl font-bold tracking-tight">
+                        $<AnimatedPrice value={price} />
+                      </span>
+                      <span className="text-sm text-muted-foreground">
+                        {getPriceSuffix(planId)}
+                      </span>
+                    </div>
+
+                    {/* Credits highlight */}
+                    <div className="mb-5 rounded-lg border bg-muted/30 px-3 py-2.5">
+                      <div className="flex items-center gap-1.5">
+                        <Coins className="size-4 text-primary" />
+                        <span className="text-lg font-bold">
+                          {planId === "free" ? (
+                            t(`plans.${planId}.creditsAmount`)
+                          ) : (
+                            <AnimatedPrice
+                              value={
+                                parseInt(
+                                  t(`plans.${planId}.creditsAmount`).replace(
+                                    /,/g,
+                                    ""
+                                  ),
+                                  10
+                                ) * (isYearly ? 12 : 1)
+                              }
+                              formatOptions={{
+                                useGrouping: true,
+                                maximumFractionDigits: 0,
+                              }}
+                            />
+                          )}
+                        </span>
+                        <span className="text-xs text-muted-foreground">
+                          {planId === "free"
+                            ? t(`plans.${planId}.creditsLabel`)
+                            : isYearly
+                              ? t("creditsPerYear")
+                              : t(`plans.${planId}.creditsLabel`)}
+                        </span>
+                        {planId !== "free" && isYearly && (
+                          <Badge
+                            variant="secondary"
+                            className="ml-1 text-[10px] px-1.5 py-0"
+                          >
+                            {t("creditsUpfront")}
+                          </Badge>
+                        )}
+                      </div>
+                      {t.has(`plans.${planId}.booksCount`) && (
+                        <div className="mt-1 flex items-center gap-1 text-xs text-muted-foreground">
+                          <BookOpen className="size-3" />
+                          <span>
+                            {t("booksNote", {
+                              count: String(
+                                parseInt(t(`plans.${planId}.booksCount`), 10) *
+                                  (isYearly ? 12 : 1)
+                              ),
+                            })}
+                          </span>
+                        </div>
+                      )}
+                      {t.has(`plans.${planId}.booksCount`) && (
+                        <div className="mt-1 flex items-center gap-1 text-xs text-muted-foreground">
+                          <Layers className="size-3" />
+                          <span>
+                            {t("cardsNote", {
+                              count: (
+                                parseInt(t(`plans.${planId}.booksCount`), 10) *
+                                300 *
+                                (isYearly ? 12 : 1)
+                              ).toLocaleString(),
+                            })}
+                          </span>
+                        </div>
+                      )}
+                      {t.has(`plans.${planId}.creditsNote`) && (
+                        <div className="mt-1 text-xs text-muted-foreground">
+                          {t(`plans.${planId}.creditsNote`)}
+                        </div>
+                      )}
+                    </div>
+
+                    <ul className="mb-6 flex-1 space-y-3">
+                      {featureKeys.map((featureKey) => (
+                        <li
+                          key={featureKey}
+                          className="flex items-center gap-2"
+                        >
+                          <Check className="h-4 w-4 shrink-0 text-primary" />
+                          <span className="text-sm text-muted-foreground">
+                            {t(`plans.${planId}.features.${featureKey}`)}
+                          </span>
+                        </li>
+                      ))}
+                    </ul>
+
+                    {isCurrent ? (
+                      <Button
+                        className="w-full"
+                        variant="outline"
+                        onClick={handleManageSubscription}
+                        disabled={isPending}
+                      >
+                        {isPending ? (
+                          <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                        ) : null}
+                        {t("manageSubscription")}
+                      </Button>
+                    ) : hasSubscription && planId !== "free" ? (
+                      <Button className="w-full" variant="outline" disabled>
+                        {t("alreadySubscribed")}
+                      </Button>
+                    ) : (
+                      <Button
+                        className="w-full"
+                        variant={popular ? "default" : "outline"}
+                        onClick={() => handleSubscribe(planId)}
+                        disabled={isLoading || isPending}
+                      >
+                        {isLoading ? (
+                          <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                        ) : null}
+                        {t(`plans.${planId}.cta`)}
+                      </Button>
+                    )}
+                  </CardContent>
+                </Card>
+              );
+            })}
+          </div>
+        </Reveal>
+      </div>
+    </section>
+  );
+}