Logo文档
配置

营销配置

配置营销页面和落地页组件

NEXTDEVKIT 为您的落地页组件提供全面的营销配置。所有营销配置都位于 src/config/marketing/ 目录中,控制营销页面如何向访问者展示。

📁 营销配置结构

营销配置分为几个模块:

// 营销配置模块
src/config/marketing/
├── pricing.ts          // 定价计划和显示
├── faq.ts              // 常见问题
├── feature-tabs.ts     // 功能标签组件
├── feature-steps.ts    // 功能步骤组件  
├── hero-section.ts     // 主页横幅内容
├── testimonials.ts     // 客户推荐
├── animated-tool-tip.ts // 动画提示
├── blog.ts            // 博客配置
└── changelog.ts       // 更新日志条目和更新

💰 定价配置

配置定价计划显示和内容:

src/config/marketing/pricing.ts
export async function getPricingConfig(): Promise<PricingConfig> {
  const t = await getTranslations("pricing");
  const priceConfig = appConfig.payment;
  
  return {
    title: t("title"),        // "Pricing"
    subtitle: t("subtitle"),  // "Choose the best plan for your needs"
    plans,
  };
}

messages/en.json 中的定价配置示例:

{
  "pricing": {
    "title": "Pricing",
    "subtitle": "Choose the best plan for your needs",
    "frequencies": {
      "monthly": "Monthly",
      "yearly": "Yearly"
    },
    "popularBadge": "Most Popular",
    "products": {
      "free": {
        "title": "Starter",
        "description": "For your hobby projects",
        "features": {
          "feature1": "Up to 5 projects",
          "feature2": "Basic analytics",
          "feature3": "Community support"
        }
      },
      "pro": {
        "title": "Pro",
        "description": "Great for small businesses",
        "features": {
          "feature1": "Unlimited projects",
          "feature2": "Advanced analytics",
          "feature3": "Priority support"
        }
      }
    }
  }
}

如何修改定价配置:

  1. 修改定价页面标题:编辑 "pricing"."title"
  2. 修改副标题:编辑 "pricing"."subtitle"
  3. 添加新定价计划:在 "products" 中添加新的计划对象
  4. 修改计划功能:编辑每个计划中的 "features" 部分

定价计划结构

属性类型描述
titlestring定价部分标题
subtitlestring定价部分副标题
plansPricePlan[]定价计划数组

❓ FAQ配置

配置常见问题:

src/config/marketing/faq.ts
export function getFaqConfig(): FaqConfig {
  const t = useTranslations("faq");

  const faqItems: FaqItem[] = [
    {
      id: t("items.faq-1.id"),           // "faq-1"
      question: t("items.faq-1.question"), // "Do you offer a free trial?"
      answer: t("items.faq-1.answer"),     // "Yes, we offer a 14-day free trial..."
    },
    // ... 更多FAQ项目
  ];

  return {
    heading: t("heading"),                    // "Frequently asked questions"
    description: t("description"),           // "Everything you need to know..."
    items: faqItems,
    supportHeading: t("supportHeading"),     // "Still have questions?"
    supportDescription: t("supportDescription"), // "Can't find the answer..."
    supportButtonText: t("supportButtonText"),   // "Contact Support"
    supportButtonUrl: "/contact",
  };
}

messages/en.json 中的FAQ配置示例:

{
  "faq": {
    "heading": "Frequently asked questions",
    "description": "Everything you need to know about our Next.js starter template. Can't find the answer you're looking for? Feel free to contact our support team.",
    "items": {
      "faq-1": {
        "id": "faq-1",
        "question": "Do you offer a free trial?",
        "answer": "Yes, we offer a 14-day free trial. You can cancel at any time during the trial period and you won't be charged."
      },
      "faq-2": {
        "id": "faq-2",
        "question": "Can I cancel my subscription?",
        "answer": "You can cancel your subscription at any time. You can do this from your account settings."
      },
      "faq-3": {
        "id": "faq-3",
        "question": "What payment methods do you accept?",
        "answer": "We accept all major credit cards and PayPal."
      }
    },
    "supportHeading": "Still have questions?",
    "supportDescription": "Can't find the answer you're looking for? Our support team is here to help with any technical questions or concerns.",
    "supportButtonText": "Contact Support"
  }
}

如何修改FAQ配置:

  1. 修改FAQ页面标题:编辑 "faq"."heading"
  2. 添加新的FAQ项目:在 "items" 中添加新的FAQ对象
  3. 修改支持部分文本:编辑 "supportHeading""supportDescription"
  4. 更新按钮文本:编辑 "supportButtonText"

FAQ配置结构

属性类型描述
headingstringFAQ部分标题
descriptionstringFAQ部分描述
itemsFaqItem[]FAQ项目数组
supportHeadingstring支持部分标题
supportDescriptionstring支持部分描述
supportButtonTextstring支持按钮文本
supportButtonUrlstring支持按钮URL
avatarsobject[]头像图片数组

FAQ项目结构

属性类型描述
idstringFAQ项目的唯一标识符
questionstring问题文本
answerstring答案文本(支持markdown)

🎯 功能标签配置

配置功能标签组件:

src/config/marketing/feature-tabs.ts
export function getFeatureTabsConfig(): FeatureTabsConfig {
  const t = useTranslations("featureSection.tabs");

  const featureTabs: FeatureTabItem[] = [
    {
      value: "tab-1",
      label: t("items.tab-1.label"),                   // "Customizable Themes"
      icon: Zap,
      content: {
        badge: t("items.tab-1.content.badge"),         // "Beautiful & Modern"
        title: t("items.tab-1.content.title"),         // "Customize themes..."
        description: t("items.tab-1.content.description"), // "Beautiful and modern styling..."
        buttonText: t("items.tab-1.content.buttonText"),   // "View Themes"
        imageSrc: "/marketing/feature-themes.png",
        imageAlt: "通过最少的代码更改自定义主题",
        link: "/docs/themes",
      },
    },
    // ... 更多标签
  ];

  return {
    heading: t("heading"),        // "A Collection of Components..."
    description: t("description"), // "Join us to build flawless web solutions."
    tabs: featureTabs,
  };
}

messages/en.json 中的功能标签配置示例:

{
  "featureSection": {
    "tabs": {
      "heading": "A Collection of Components Built With Shadcn & Tailwind",
      "description": "Join us to build flawless web solutions.",
      "items": {
        "tab-1": {
          "label": "Customizable Themes",
          "content": {
            "badge": "Beautiful & Modern",
            "title": "Customize themes with minimal code changes.",
            "description": "Beautiful and modern styling that can be easily customized to match your brand. Change colors, fonts, and layouts with just a few lines of code.",
            "buttonText": "View Themes"
          }
        },
        "tab-2": {
          "label": "Multi-Platform Deploy",
          "content": {
            "badge": "Deploy Anywhere",
            "title": "Deploy to any platform natively.",
            "description": "Native support for deployment to Cloudflare, AWS, Vercel, and other major platforms. Deploy everywhere with optimized configurations.",
            "buttonText": "View Deployments"
          }
        }
      }
    },
    "steps": {
      "title": "How to get started",
      "items": {
        "step-1": {
          "step": "Step 1",
          "title": "Clone the Template",
          "content": "Clone or download the Next.js starter template from GitHub"
        },
        "step-2": {
          "step": "Step 2", 
          "title": "Configure Your Project",
          "content": "Set up your environment variables, and customize the template to match your project needs."
        }
      }
    }
  }
}

如何修改功能标签配置:

  1. 修改标题和描述:编辑 "featureSection"."tabs"."heading""description"
  2. 添加新标签:在 "items" 中添加新的标签对象
  3. 修改标签内容:编辑每个标签的 "content" 部分
  4. 更新按钮文本:编辑 "buttonText" 字段

功能标签结构

属性类型描述
valuestring唯一标签标识符
labelstring标签标签文本
iconLucideIconLucide图标组件
contentobject标签内容配置
content.badgestring徽章文本
content.titlestring内容标题
content.descriptionstring内容描述
content.buttonTextstring按钮文本
content.imageSrcstring图片源路径
content.imageAltstring图片替代文本
content.linkstring按钮链接URL

📈 功能步骤配置

配置功能步骤组件:

src/config/marketing/feature-steps.ts
export function getFeatureStepsConfig(): FeatureStepsConfig {
  const t = useTranslations("featureSection.steps");

  const featureSteps: FeatureStepItem[] = [
    {
      step: t("items.step-1.step"),      // "Step 1"
      title: t("items.step-1.title"),    // "Clone the Template"
      content: t("items.step-1.content"), // "Clone or download the Next.js starter template from GitHub"
      image: "https://images.unsplash.com/photo-1723958929247-ef054b525153?q=80&w=2070&auto=format&fit=crop",
    },
    {
      step: t("items.step-2.step"),      // "Step 2"
      title: t("items.step-2.title"),    // "Configure Your Project"
      content: t("items.step-2.content"), // "Set up your environment variables..."
      image: "https://images.unsplash.com/photo-1723931464622-b7df7c71e380?q=80&w=2070&auto=format&fit=crop",
    },
    // ... 更多步骤
  ];

  return {
    title: t("title"),  // "How to get started"
    steps: featureSteps,
  };
}

功能步骤配置已包含在上面的功能标签示例中,主要配置项:

  • 标题"featureSection"."steps"."title"
  • 步骤项目"featureSection"."steps"."items"
  • 每个步骤包含:"step""title""content"

如何修改功能步骤配置:

  1. 修改步骤标题:编辑 "featureSection"."steps"."title"
  2. 添加新步骤:在 "items" 中添加新的步骤对象
  3. 修改步骤内容:编辑每个步骤的标题和描述
  4. 更新步骤编号:编辑 "step" 字段

功能步骤结构

属性类型描述
stepstring步骤编号或标识符
titlestring步骤标题
contentstring步骤描述内容
imagestring步骤图片URL

🦸 主页横幅配置

配置主页横幅部分:

src/config/marketing/hero-section.ts
export function getHeroSectionConfig(): HeroSectionConfig {
  const t = useTranslations("hero");

  return {
    badge: t("badge"),                          // "New"
    badgeText: t("badgeText"),                 // "Introducing Support for AI Models"
    heading: t("heading"),                     // "The Ultimate Next.js Starter Kit..."
    highlightHeading: t("highlightHeading"),   // "Next.js Starter Kit"
    subHeading: t("subHeading"),              // "Build and Ship faster..."
    animatedTooltipTitle: t("AnimatedTooltipTitle"), // "LOVED BY DEVELOPERS WORLDWIDE"
    buttons: {
      getStarted: t("buttons.getStarted"),     // "Get Started"
      seeDemo: t("buttons.seeDemo"),          // "See Demo"
    },
    links: {
      badge: "/blog",
      getStarted: "/#pricing",
      seeDemo: "/",
    },
  };
}

messages/en.json 中的主页横幅配置示例:

{
  "hero": {
    "badge": "New",
    "badgeText": "Introducing Support for AI Models",
    "heading": "The Ultimate Next.js Starter Kit for Your Next Project",
    "highlightHeading": "Next.js Starter Kit",
    "subHeading": "Build and Ship faster with the Next.js Starter Kit. Ship in days, not months.",
    "buttons": {
      "getStarted": "Get Started",
      "seeDemo": "See Demo"
    },
    "AnimatedTooltipTitle": "LOVED BY DEVELOPERS WORLDWIDE"
  }
}

如何修改主页横幅配置:

  1. 修改徽章文本:编辑 "hero"."badge""hero"."badgeText"
  2. 修改主标题:编辑 "hero"."heading""hero"."highlightHeading"
  3. 修改副标题:编辑 "hero"."subHeading"
  4. 修改按钮文本:编辑 "hero"."buttons" 下的文本
  5. 修改动画提示标题:编辑 "hero"."AnimatedTooltipTitle"

主页横幅结构

属性类型描述
badgestring徽章文本
badgeTextstring徽章描述文本
headingstring主标题文本
highlightHeadingstring突出显示的标题文本
subHeadingstring副标题文本
animatedTooltipTitlestring动画提示标题
buttonsobject按钮文本
buttons.getStartedstring开始按钮文本
buttons.seeDemostring查看演示按钮文本
imagesobject主页图片配置
images.darkobject深色主题图片
images.lightobject浅色主题图片
linksobject链接URL
links.badgestring徽章链接URL
links.getStartedstring开始链接URL
links.seeDemostring查看演示链接URL

💬 客户推荐配置

配置客户推荐:

src/config/marketing/testimonials.ts
export function getTestimonialsConfig(): TestimonialsConfig {
  const t = useTranslations("testimonials");

  const testimonials: TestimonialItem[] = [
    {
      author: {
        name: t("items.testimonial-1.author.name"),     // "Emma Thompson"
        handle: t("items.testimonial-1.author.handle"), // "@emmaai"
        avatar: t("items.testimonial-1.author.avatar"), // "https://images.unsplash.com/..."
      },
      text: t("items.testimonial-1.text"),              // "Using this AI platform..."
      href: t("items.testimonial-1.href"),             // "https://twitter.com/emmaai"
    },
    // ... 更多推荐
  ];

  return {
    title: t("title"),           // "Trusted by developers worldwide"
    description: t("description"), // "Join thousands of developers..."
    testimonials,
  };
}

messages/en.json 中的客户推荐配置示例:

{
  "testimonials": {
    "title": "Trusted by developers worldwide",
    "description": "Join thousands of developers who are already building the future with our AI platform",
    "items": {
      "testimonial-1": {
        "author": {
          "name": "Emma Thompson",
          "handle": "@emmaai",
          "avatar": "https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=150&h=150&fit=crop&crop=face"
        },
        "text": "Using this AI platform has transformed how we handle data analysis. The speed and accuracy are unprecedented.",
        "href": "https://twitter.com/emmaai"
      },
      "testimonial-2": {
        "author": {
          "name": "David Park",
          "handle": "@davidtech",
          "avatar": "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=150&h=150&fit=crop&crop=face"
        },
        "text": "The API integration is flawless. We've reduced our development time by 60% since implementing this solution.",
        "href": "https://twitter.com/davidtech"
      }
    }
  }
}

如何修改客户推荐配置:

  1. 修改推荐部分标题:编辑 "testimonials"."title"
  2. 修改描述文本:编辑 "testimonials"."description"
  3. 添加新推荐:在 "items" 中添加新的推荐对象
  4. 修改推荐内容:编辑每个推荐的 "text" 部分
  5. 更新作者信息:编辑 "author" 下的姓名、用户名和头像

推荐结构

属性类型描述
authorTestimonialAuthor推荐作者信息
author.namestring作者姓名
author.handlestring作者用户名/把手
author.avatarstring作者头像URL
textstring推荐文本
hrefstring推荐来源的可选链接

💡 动画提示配置

配置用于营销的动画提示:

src/config/marketing/animated-tool-tip.ts
export interface AnimatedTooltipItem {
  id: number;
  name: string;
  designation: string;
  image: string;
}

export const animatedTooltipItems: AnimatedTooltipItem[] = [
  {
    id: 1,
    name: "约翰·多伊",
    designation: "软件工程师",
    image:
      "https://images.unsplash.com/photo-1599566150163-29194dcaad36?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=3387&q=80",
  },
  {
    id: 2,
    name: "罗伯特·约翰逊",
    designation: "产品经理",
    image:
      "https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8YXZhdGFyfGVufDB8fDB8fHww&auto=format&fit=crop&w=800&q=60",
  },
  {
    id: 3,
    name: "简·史密斯",
    designation: "数据科学家",
    image:
      "https://images.unsplash.com/photo-1580489944761-15a19d654956?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NXx8YXZhdGFyfGVufDB8fDB8fHww&auto=format&fit=crop&w=800&q=60",
  },
  // ... 更多项目
];

提示项目结构

属性类型描述
idnumber唯一标识符
namestring姓名
designationstring职位
imagestring图片路径

📝 博客配置

配置博客设置:

src/config/marketing/blog.ts
export interface BlogConfig {
  title: string;
  description: string;
  placeholderImage: string;
}

export async function getBlogConfig(): Promise<BlogConfig> {
  const t = await getTranslations("blog");

  return {
    title: t("title"),
    description: t("description"),
    placeholderImage: "/marketing/feature-techstacks.png",
  };
}

博客配置结构

属性类型描述
titlestring博客部分标题
descriptionstring博客部分描述
placeholderImagestring博客文章的默认占位符图片

📅 更新日志配置

配置更新日志设置,用于显示产品更新和版本历史:

src/config/marketing/changelog.ts
export function getChangelogConfig(): ChangelogConfig {
  const t = useTranslations("changelog");

  const entries: ChangelogEntry[] = [
    {
      version: t("entries.v1_3_0.version"),      // "Version 1.3.0"
      date: t("entries.v1_3_0.date"),           // "31 July 2025"
      title: t("entries.v1_3_0.title"),         // "Enhanced Documentation and Changelog"
      description: t("entries.v1_3_0.description"), // "We've support for Chinese documentation..."
      items: [
        t("entries.v1_3_0.items.item1"),        // "Add new documentation translation: Chinese"
        t("entries.v1_3_0.items.item2"),        // "Add changelog page"
      ],
    },
    // ... 更多条目
  ];

  return {
    title: t("title"),           // "Changelog"
    description: t("description"), // "Get the latest updates and improvements..."
    entries,
  };
}

messages/en.json 中的更新日志配置示例:

{
  "changelog": {
    "title": "Changelog",
    "description": "Get the latest updates and improvements to our platform.",
    "keywords": "changelog, updates, improvements, releases, features, bug fixes, version history",
    "button": {
      "text": "Learn more"
    },
    "entries": {
      "v1_3_0": {
        "version": "Version 1.3.0",
        "date": "31 July 2025",
        "title": "Enhanced Documentation and Changelog",
        "description": "We've support for Chinese documentation and changelog. You can now read the documentation in Chinese and add the changelog page.",
        "items": {
          "item1": "Add new documentation translation: Chinese",
          "item2": "Add changelog page"
        }
      },
      "v1_2_0": {
        "version": "Version 1.2.0", 
        "date": "21 July 2025",
        "title": "Enhanced Payments and Affiliate System",
        "description": "We've added a new payments(creem.io) and affiliate(Affonso) to our template. You can now easily manage your payments and affiliates.",
        "items": {
          "item1": "Add new payment provider: Creem.io",
          "item2": "Add new affiliate provider: Affonso"
        }
      }
    }
  }
}

如何修改更新日志配置:

  1. 修改页面标题:编辑 "changelog"."title""description"
  2. 添加新版本:在 "entries" 中添加新的版本对象
  3. 修改版本信息:编辑版本号、日期、标题和描述
  4. 更新功能列表:编辑 "items" 中的具体更改项目
  5. 更新按钮文本:编辑 "button"."text"

更新日志配置结构

属性类型描述
titlestring更新日志部分标题
descriptionstring更新日志部分描述
entriesChangelogEntry[]更新日志条目数组

更新日志条目结构

属性类型描述
versionstring版本号或标识符
datestring发布日期
titlestring更新标题
descriptionstring更新描述
itemsstring[]可选的具体更改列表
imagestring可选的展示更新的图片
buttonobject可选的按钮和链接
button.urlstring按钮链接URL
button.textstring按钮文本

🎯 使用示例

访问营销配置

import { getPricingConfig } from "@/config/marketing/pricing";
import { getFaqConfig } from "@/config/marketing/faq";
import { getHeroSectionConfig } from "@/config/marketing/hero-section";

// 在组件中使用
export default function PricingSection() {
  const pricingData = await getPricingConfig();
  
  return (
    <section>
      <h2>{pricingData.title}</h2>
      <p>{pricingData.subtitle}</p>
      {/* 渲染定价计划 */}
    </section>
  );
}

国际化支持

所有营销配置都支持国际化:

// 每个配置函数都使用 useTranslations 或 getTranslations
const t = useTranslations("pricing");
// 或用于服务器组件
const t = await getTranslations("pricing");

// 这允许多语言支持
const title = t("title"); // 英语中的"Pricing"
                          // 中文中的"价格"

📝 配置示例

添加新的FAQ项目

要添加新的FAQ项目,请更新您的翻译文件:

// messages/en.json
{
  "faq": {
    "items": {
      "faq-15": {
        "id": "faq-15",
        "question": "如何自定义主题?",
        "answer": "您可以通过编辑全局样式中的CSS变量或使用主题配置来自定义主题。"
      }
    }
  }
}

添加新的功能标签

要添加新的功能标签:

src/config/marketing/feature-tabs.ts
import { Settings } from "lucide-react";

const featureTabs: FeatureTabItem[] = [
  // ... 现有标签
  {
    value: "tab-4",
    label: t("items.tab-4.label"),
    icon: Settings,
    content: {
      badge: t("items.tab-4.content.badge"),
      title: t("items.tab-4.content.title"),
      description: t("items.tab-4.content.description"),
      buttonText: t("items.tab-4.content.buttonText"),
      imageSrc: "/marketing/feature-example.png",
      imageAlt: "示例功能描述",
      link: "/docs/example",
    },
  },
];

添加新的推荐

要添加新的推荐:

src/config/marketing/testimonials.ts
const testimonials: TestimonialItem[] = [
  // ... 现有推荐
  {
    author: {
      name: t("items.testimonial-4.author.name"),
      handle: t("items.testimonial-4.author.handle"),
      avatar: "https://example.com/avatar.jpg",
    },
    text: t("items.testimonial-4.text"),
    href: "https://twitter.com/example",
  },
];

添加新的更新日志条目

要添加新的更新日志条目,请更新您的翻译文件:

// messages/zh.json
{
  "changelog": {
    "entries": {
      "v1_4_0": {
        "version": "v1.4.0",
        "date": "2024年1月15日",
        "title": "新功能发布",
        "description": "介绍令人兴奋的新功能和改进。",
        "items": {
          "item1": "添加暗黑模式支持",
          "item2": "性能提升30%",
          "item3": "修复关键错误"
        }
      }
    }
  }
}

然后更新配置:

src/config/marketing/changelog.ts
const entries: ChangelogEntry[] = [
  {
    version: t("entries.v1_4_0.version"),
    date: t("entries.v1_4_0.date"),
    title: t("entries.v1_4_0.title"),
    description: t("entries.v1_4_0.description"),
    items: [
      t("entries.v1_4_0.items.item1"),
      t("entries.v1_4_0.items.item2"),
      t("entries.v1_4_0.items.item3"),
    ],
    image: "/marketing/feature-update.png", // 可选
    button: { // 可选
      url: "/blog/v1-4-0-release",
      text: t("button.text"),
    },
  },
  // ... 现有条目
];

你的 NEXTDEVKIT 营销配置现在已完全记录并准备好进行自定义!🚀