Customize Landing Page
Configure the display content for product introduction, pricing plans, FAQ, and other modules
Landing Page Configuration
All landing page content is configured in src/config/locale/landing.content.ts, with multi-language support.
Module Display Control
Each module has a display field to control visibility (except Hero, which is always shown):
banner: { display: true, ... },
powerBy: { display: true, ... },
threeBenefits: { display: true, ... },
introduction: { display: true, items: [...] },
features: { display: true, ... },
pricing: { display: true },
horizontalShowcase: { display: true, ... },
userTestimonials: { display: true, ... },
mediaCoverage: { display: true, ... },
faq: { display: true, ... },
cta: { display: true, ... },
header: { display: true, ... },
footer: { display: true, ... },Banner
banner: {
display: true,
text: t({
en: "Open Sourced in 2026: Production-grade AI SaaS template available!",
ru: "Открытый исходный код в 2026 году: шаблон AI SaaS промышленного уровня уже доступен!",
}),
button: {
text: t({ en: "View on GitHub", ru: "Посмотреть на GitHub" }),
href: github,
},
},| Config Item | Description |
|---|---|
display | Whether to show the Banner |
text | Banner text content |
button.text | Button text |
button.href | Button link |
Hero Section
hero: {
title: t({
en: "GolOps AI Startups in hours, not days",
ru: "Запускайте AI-стартапы с GolOps за часы, а не за дни",
}),
description: t({
en: "GolOps is a TanStack boilerplate...",
ru: "GolOps — это шаблон на TanStack Start...",
}),
announcement: {
show: true,
text: t({ en: "...", ru: "..." }),
href: github,
},
buttons: {
start: { text: t({ en: "Get Started", ru: "Начать" }), url: "/chat" },
docs: { text: t({ en: "Learn More", ru: "Узнать больше" }), url: "/docs" },
},
image: {
enabled: false,
src: "/landing/hero/home.png",
width: 2700,
height: 1440,
},
},Three Key Benefits
threeBenefits: {
display: true,
title: t({ en: "Three Key Benefits", ru: "Три ключевых преимущества" }),
description: t({ en: "Discover why...", ru: "Узнайте, почему..." }),
items: [
{
title: t({ en: "Lightning Fast Startup", ru: "Молниеносный старт" }),
description: t({ en: "...", ru: "..." }),
icon: "Zap",
},
// ...more items
],
},Icons
The icon field uses Lucide React icon names, such as Zap, Shield,
Code, etc.
Feature Introduction
The introduction section configures multiple feature introduction blocks with images:
introduction: {
display: true,
items: [
{
type: "image",
title: t({ en: "Zero-Config Authentication", ru: "Аутентификация без настройки" }),
description: t({ en: "...", ru: "..." }),
image: "/landing/introduction/auth.webp",
imagePosition: "left", // "left" | "right"
features: [
{
title: t({ en: "One-Click Social Login", ru: "Вход через соцсети в один клик" }),
description: t({ en: "...", ru: "..." }),
},
// ...
],
},
],
},User Testimonials
userTestimonials: {
display: true,
title: t({ en: "What Our Users Say", ru: "Что говорят наши пользователи" }),
testimonials: [
{
text: t({ en: "...", ru: "..." }),
image: "/avatars/user1.avif",
name: "Sarah Chen",
role: t({ en: "CTO, TechStart", ru: "Технический директор, TechStart" }),
},
// ...
],
},FAQ
faq: {
display: true,
title: t({ en: "Frequently Asked Questions", ru: "Часто задаваемые вопросы" }),
description: t({ en: "...", ru: "..." }),
items: [
{
question: t({ en: "What is GolOps?", ru: "Что такое GolOps?" }),
answer: t({ en: "...", ru: "..." }),
},
],
},Header Navigation
header: {
display: true,
items: [
{ label: t({ en: "Documentation", ru: "Документация" }), href: "/docs" },
{ label: t({ en: "Chat", ru: "Чат" }), href: "/chat" },
{
label: t({ en: "More Features", ru: "Еще возможности" }),
children: [
{ label: t({ en: "Blog", ru: "Блог" }), href: "/blog" },
{ label: t({ en: "Roadmap", ru: "Дорожная карта" }), href: "/roadmap" },
],
},
],
},Footer
footer: {
display: true,
companyName: "GolOps",
scrollToTop: t({ en: "Back to Top", ru: "Наверх" }),
sections: [
{
title: t({ en: "About", ru: "О нас" }),
links: [
{ label: t({ en: "About Us", ru: "О компании" }), href: "/about" },
// ...
],
},
],
},Pricing Configuration
The pricing module display is controlled in landing.content.ts:
pricing: {
display: true,
},Pricing page content is configured in src/config/locale/pricing.content.ts.
Package prices and subscription logic are configured in src/config/website-config.ts. See the Payment System section for details.
Privacy Policy & Terms of Service
Legal page content is stored in the content/legal/ directory, written in MDX format:
| File | Page | Route |
|---|---|---|
content/legal/privacy-policy.mdx | Privacy Policy (English) | /legal/privacy-policy |
content/legal/privacy-policy.ru.mdx | Privacy Policy (Russian) | /ru/legal/privacy-policy |
content/legal/terms-of-service.mdx | Terms of Service (English) | /legal/terms-of-service |
content/legal/terms-of-service.ru.mdx | Terms of Service (Russian) | /ru/legal/terms-of-service |
Other Page Configurations
| File Path | Page |
|---|---|
src/config/locale/auth.content.ts | Login/Registration |
src/config/locale/user-dashboard.content.ts | User Dashboard |
src/config/locale/admin.content.ts | Admin Panel |
src/config/locale/404.content.ts | 404 Page |
src/config/locale/error.content.ts | Error Page |