Custom Landing Page

MuseMVP's landing pages are highly customizable. Core configuration and custom logic live in src/config. Modify config files and custom components to brand, toggle features, and replace content.

Config Directory Structure

Home Page

src/app/(landing-page)/[locale]/(home)/page.tsx controls which sections appear on the home page via a local systemShowConfig:

const systemShowConfig = {
  hero: true,
  featuresShowcase: false,
  ctaSection: true,
  pricingSection: true, // gated by config.payments.enableBilling
  faqSection: true,
  newsletter: true,
};

Set false to hide a section. Insert custom components at PLACEHOLDER comments in the page file.

Feature Switches (config.ui)

In src/config/index.ts, config.ui controls page visibility:

Header & Footer (custom-common)

src/config/custom-common.ts provides:

• getHeaderMenuItems(): Header menu items
• useFooterLinks(): Footer link groups
• useFooterSocialIcons(): Footer social icons

config.ui.headerConfig.customRoutes adds custom nav items (supports position: "left" | "center" | "right").

Pricing Page

The pricing page at src/app/(landing-page)/[locale]/pricing/page.tsx is controlled by config.payments.enableBilling. When false, the pricing route redirects to home.

Pricing copy and plan display come from src/config/saas/pricing-desc-usage.ts and pricing-desc.ts.

• pricing-desc.ts: plan titles, descriptions, and feature lists
• pricing-desc-usage.ts: actual purchasable price items, productId, and billing behavior

If you want to show a compare-at/original price such as $249 and charge $199, configure it in pricing-desc-usage.ts:

{
  type: "one-time",
  productId: billingProductCatalog.lifetime.productId,
  gatewayProductIds: billingProductCatalog.lifetime.gatewayProductIds,
  originalAmount: 249,
  amount: 199,
  currency: "USD",
}

Field semantics:

• amount: the actual checkout amount sent to the billing gateway
• originalAmount: optional UI-only compare-at price rendered as a strikethrough price in the pricing card

originalAmount is displayed only when it is greater than amount. If omitted, the pricing UI falls back to showing only the current price.

FAQ

FAQ data is defined in src/modules/landing-page/home/components/FaqSection.tsx via two hooks:

• useFaqData(): FAQ list (question, answer) — sourced from i18n translations
• useFaqSectionData(): FAQ section title, description — also from i18n

To customize FAQ content, edit the faq.json translation files in src/i18n/translations/en/ and src/i18n/translations/zh/. You can also add custom items at the PLACEHOLDER comments in FaqSection.tsx.

Legal Pages (custom-legal)

src/config/custom-legal.ts controls privacy policy, terms, and community guidelines:

Quick Customization Flow

Related Docs