Landing Page

Edit src/routes/_marketing/index.tsx to add, remove, or reorder the home page's sections. The page composes the existing components in src/components/landing/; it does not own authentication or billing rules.

Choose an edit point

Change	File
Headline, product badge, dashboard preview, and first links	`src/components/landing/hero-section.tsx`
Product preview sections	`src/components/landing/product-showcases.tsx`
Feature descriptions	`src/components/landing/features-section.tsx`
Frequently asked questions	`src/components/landing/faq-section.tsx`
Final call to action	`src/components/landing/final-cta.tsx`
Shared section framing	`src/components/landing/technical-grid.tsx`
Site name, description, and default social image	`src/config/site.config.ts`

The shipped page also includes LogoCloud, LatestBlogPosts, and LatestChanges. Its native loader reads public summaries through src/lib/landing.server.ts; keep that server-only source out of client components when changing those sections.

Change a call to action

Use TanStack Router's Link for application navigation. For example, you can replace a hero link with a signup action:

import { Link } from '@tanstack/react-router';
import { Button } from '@/components/ui/button';

<Button asChild>
  <Link to="/signup">Create an account</Link>
</Button>

For a Docs link, pass the slug to its native catch-all route:

<Link to="/docs/$" params={{ _splat: 'getting-started' }}>
  Read the setup guide
</Link>

These links change navigation only. Keep checkout creation and access checks in the existing billing API and server readers.

Change pricing presentation

The home page links to /pricing; it does not include a pricing section by default. The pricing route uses the shared pricing components and src/config/pricing.config.ts for plan names, descriptions, features, and displayed prices. Public environment settings select the approved Stripe Product and Price IDs.

Change presentation in that configuration and the components under src/components/pricing/. Keep the displayed amount aligned with its actual Stripe Price. The browser starts checkout through the same-origin Hono API; it never lists products with a Stripe secret key. Follow Payments to configure and verify the catalog.

Check your changes

Run bun run dev and inspect / and /pricing. Follow each changed link, check the page on a narrow screen, and confirm that removing a marketing section leaves the corresponding application and billing behavior working.

What's next

Theming — change colors, fonts, and styles.
Components — extend the shared interface.
Content Gating — protect Docs using saved access.

Was this page helpful?