Documentation
Customize

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: {
  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 ItemDescription
displayWhether to show the Banner
textBanner text content
button.textButton text
button.hrefButton 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: {
  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:

FilePageRoute
content/legal/privacy-policy.mdxPrivacy Policy (English)/legal/privacy-policy
content/legal/privacy-policy.ru.mdxPrivacy Policy (Russian)/ru/legal/privacy-policy
content/legal/terms-of-service.mdxTerms of Service (English)/legal/terms-of-service
content/legal/terms-of-service.ru.mdxTerms of Service (Russian)/ru/legal/terms-of-service

Other Page Configurations

File PathPage
src/config/locale/auth.content.tsLogin/Registration
src/config/locale/user-dashboard.content.tsUser Dashboard
src/config/locale/admin.content.tsAdmin Panel
src/config/locale/404.content.ts404 Page
src/config/locale/error.content.tsError Page

On this page