Landing Page

Landing Page Configuration

The landing page is composed of independent blocks, each mapped to a React component. The block list is freely composable — a default is defined in code, and users can rearrange it in-app.

Available Blocks

All blocks are registered in:

apps/web/src/configs/landing-page-component/landing-page-component-registry.tsx

Note: Only one block per type is rendered. If both hero-section-23 and hero-section-03 are in the list, only the one with the higher sort priority is shown.

Changing the Default Block List

The default landing page blocks are defined in:

const defaultLandingPageComponents = [
  "hero-section-23",
  "tailark-logo-cloud",
  "features-section-21",
  "tailark-integrations",
  "tailark-content",
  "tailark-stats",
  "tailark-pricing",
  "tailark-faqs",
  "tailark-call-to-action",
  "tailark-testimonials",
] as const satisfies readonly LandingPageComponentKey[];

Edit this array to change the landing page structure new users see:

• Reorder: move key names up or down — display order follows
• Remove: delete the key name from the array
• Add: insert a registered key name into the array

Storage Key

When a user customizes the landing page in the app, the selection is saved to localStorage:

If the stored list is empty or all entries are invalid, it falls back to defaultLandingPageComponents.

Adding a Custom Block

apps/web/src/components/landing-page/
└── my-section/
    └── my-section.tsx

import MySection from "@/components/landing-page/my-section/my-section";

export const landingPageComponentMap = {
  // existing blocks...
  "my-section": () => <MySection />,
};

export const LANDING_PAGE_COMPONENTS = {
  // existing entries...
  "my-section": { label: "My Section", group: "Custom", type: "my-type" },
};