配置
营销配置
配置营销页面和落地页组件
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 // 更新日志条目和更新
💰 定价配置
配置定价计划显示和内容:
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"
}
}
}
}
}
如何修改定价配置:
- 修改定价页面标题:编辑
"pricing"."title"
- 修改副标题:编辑
"pricing"."subtitle"
- 添加新定价计划:在
"products"
中添加新的计划对象 - 修改计划功能:编辑每个计划中的
"features"
部分
定价计划结构
属性 | 类型 | 描述 |
---|---|---|
title | string | 定价部分标题 |
subtitle | string | 定价部分副标题 |
plans | PricePlan[] | 定价计划数组 |
❓ FAQ配置
配置常见问题:
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配置:
- 修改FAQ页面标题:编辑
"faq"."heading"
- 添加新的FAQ项目:在
"items"
中添加新的FAQ对象 - 修改支持部分文本:编辑
"supportHeading"
和"supportDescription"
- 更新按钮文本:编辑
"supportButtonText"
FAQ配置结构
属性 | 类型 | 描述 |
---|---|---|
heading | string | FAQ部分标题 |
description | string | FAQ部分描述 |
items | FaqItem[] | FAQ项目数组 |
supportHeading | string | 支持部分标题 |
supportDescription | string | 支持部分描述 |
supportButtonText | string | 支持按钮文本 |
supportButtonUrl | string | 支持按钮URL |
avatars | object[] | 头像图片数组 |
FAQ项目结构
属性 | 类型 | 描述 |
---|---|---|
id | string | FAQ项目的唯一标识符 |
question | string | 问题文本 |
answer | string | 答案文本(支持markdown) |
🎯 功能标签配置
配置功能标签组件:
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."
}
}
}
}
}
如何修改功能标签配置:
- 修改标题和描述:编辑
"featureSection"."tabs"."heading"
和"description"
- 添加新标签:在
"items"
中添加新的标签对象 - 修改标签内容:编辑每个标签的
"content"
部分 - 更新按钮文本:编辑
"buttonText"
字段
功能标签结构
属性 | 类型 | 描述 |
---|---|---|
value | string | 唯一标签标识符 |
label | string | 标签标签文本 |
icon | LucideIcon | Lucide图标组件 |
content | object | 标签内容配置 |
content.badge | string | 徽章文本 |
content.title | string | 内容标题 |
content.description | string | 内容描述 |
content.buttonText | string | 按钮文本 |
content.imageSrc | string | 图片源路径 |
content.imageAlt | string | 图片替代文本 |
content.link | string | 按钮链接URL |
📈 功能步骤配置
配置功能步骤组件:
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"
如何修改功能步骤配置:
- 修改步骤标题:编辑
"featureSection"."steps"."title"
- 添加新步骤:在
"items"
中添加新的步骤对象 - 修改步骤内容:编辑每个步骤的标题和描述
- 更新步骤编号:编辑
"step"
字段
功能步骤结构
属性 | 类型 | 描述 |
---|---|---|
step | string | 步骤编号或标识符 |
title | string | 步骤标题 |
content | string | 步骤描述内容 |
image | string | 步骤图片URL |
🦸 主页横幅配置
配置主页横幅部分:
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"
}
}
如何修改主页横幅配置:
- 修改徽章文本:编辑
"hero"."badge"
和"hero"."badgeText"
- 修改主标题:编辑
"hero"."heading"
和"hero"."highlightHeading"
- 修改副标题:编辑
"hero"."subHeading"
- 修改按钮文本:编辑
"hero"."buttons"
下的文本 - 修改动画提示标题:编辑
"hero"."AnimatedTooltipTitle"
主页横幅结构
属性 | 类型 | 描述 |
---|---|---|
badge | string | 徽章文本 |
badgeText | string | 徽章描述文本 |
heading | string | 主标题文本 |
highlightHeading | string | 突出显示的标题文本 |
subHeading | string | 副标题文本 |
animatedTooltipTitle | string | 动画提示标题 |
buttons | object | 按钮文本 |
buttons.getStarted | string | 开始按钮文本 |
buttons.seeDemo | string | 查看演示按钮文本 |
images | object | 主页图片配置 |
images.dark | object | 深色主题图片 |
images.light | object | 浅色主题图片 |
links | object | 链接URL |
links.badge | string | 徽章链接URL |
links.getStarted | string | 开始链接URL |
links.seeDemo | string | 查看演示链接URL |
💬 客户推荐配置
配置客户推荐:
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"
}
}
}
}
如何修改客户推荐配置:
- 修改推荐部分标题:编辑
"testimonials"."title"
- 修改描述文本:编辑
"testimonials"."description"
- 添加新推荐:在
"items"
中添加新的推荐对象 - 修改推荐内容:编辑每个推荐的
"text"
部分 - 更新作者信息:编辑
"author"
下的姓名、用户名和头像
推荐结构
属性 | 类型 | 描述 |
---|---|---|
author | TestimonialAuthor | 推荐作者信息 |
author.name | string | 作者姓名 |
author.handle | string | 作者用户名/把手 |
author.avatar | string | 作者头像URL |
text | string | 推荐文本 |
href | string | 推荐来源的可选链接 |
💡 动画提示配置
配置用于营销的动画提示:
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",
},
// ... 更多项目
];
提示项目结构
属性 | 类型 | 描述 |
---|---|---|
id | number | 唯一标识符 |
name | string | 姓名 |
designation | string | 职位 |
image | string | 图片路径 |
📝 博客配置
配置博客设置:
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",
};
}
博客配置结构
属性 | 类型 | 描述 |
---|---|---|
title | string | 博客部分标题 |
description | string | 博客部分描述 |
placeholderImage | string | 博客文章的默认占位符图片 |
📅 更新日志配置
配置更新日志设置,用于显示产品更新和版本历史:
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"
}
}
}
}
}
如何修改更新日志配置:
- 修改页面标题:编辑
"changelog"."title"
和"description"
- 添加新版本:在
"entries"
中添加新的版本对象 - 修改版本信息:编辑版本号、日期、标题和描述
- 更新功能列表:编辑
"items"
中的具体更改项目 - 更新按钮文本:编辑
"button"."text"
更新日志配置结构
属性 | 类型 | 描述 |
---|---|---|
title | string | 更新日志部分标题 |
description | string | 更新日志部分描述 |
entries | ChangelogEntry[] | 更新日志条目数组 |
更新日志条目结构
属性 | 类型 | 描述 |
---|---|---|
version | string | 版本号或标识符 |
date | string | 发布日期 |
title | string | 更新标题 |
description | string | 更新描述 |
items | string[] | 可选的具体更改列表 |
image | string | 可选的展示更新的图片 |
button | object | 可选的按钮和链接 |
button.url | string | 按钮链接URL |
button.text | string | 按钮文本 |
🎯 使用示例
访问营销配置
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变量或使用主题配置来自定义主题。"
}
}
}
}
添加新的功能标签
要添加新的功能标签:
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",
},
},
];
添加新的推荐
要添加新的推荐:
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": "修复关键错误"
}
}
}
}
}
然后更新配置:
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 营销配置现在已完全记录并准备好进行自定义!🚀