Homepages

Files: src/pages/[...lang]/index.astro, src/content/homepage/english/ · Skill level: Beginner to edit, light code to reorder

Kivo has four homepages. They use the same sections with different content and layouts, so each one also shows which layouts suit a kind of product.

Main Homepage

Sections, top to bottom:

1. Hero (hero-saas.md)
2. Customer logos (clients.md, overridden by clientsSection in -index.md)
3. Steps (steps-section.md)
4. Stack, a marquee of technologies (stack-section.md)
5. Platform, an animated product grid (platform-section.md)
6. Metrics (metrics-section.md)
7. Testimonials (customer-quotes-section.md)
8. Code tabs (code-tabs-section.md)
9. Features (feature-grid-section.md)
10. Regions map (regions-section.md)
11. Templates (templates-section.md)
12. Security features (security-section.md, drawn by the feature grid)
13. Pricing (plans-section.md)
14. FAQ (questions-section.md)
15. Latest changelog (changelog-section.md)
16. Call to action (call-to-action.md, added by the page shell)

All section files are in src/content/sections/english/ (and french/). The main homepage keeps every section on its default layout, except the logo strip, which uses plain.

API Product Homepage

Hero (code: typed API requests with streamed responses and a test/live key switch), logos, features (tabs), code (compare), pricing (usage, with the usage estimator), testimonials (metrics), FAQ, and call to action (split with an install command).

AI Product Homepage

Hero (screenshot with an animated agent run), logos, features (alternating), steps, testimonials (marquee), pricing (usage), FAQ, and call to action.

Data Or Analytics Homepage

Hero (screenshot with an animated dashboard), logos, features (sticky), metrics, testimonials (spotlight), pricing (compact), FAQ, and call to action (newsletter).

How The Demo Homepages Get Their Look

The three demo homepages don’t use different components: their content files override each section with a named block and a layout. For example, in home-api.md:

featureGridSection:
  enable: true
  title: "Everything around the request, handled"
  # ...list of features...
  options:
    layout: "tabs"

That means you can copy any block from a demo homepage into the main homepage’s -index.md to borrow its look.

Edit A Homepage

• Change text on every page that uses a section: edit the section file in src/content/sections/english/.
• Change text on one homepage only: edit its block in the homepage content file. If there is no block for that section yet, add one with only the keys you want to change.
• Reorder or remove sections: move or delete the lines in the route file. In index.astro, each line like <LayoutVariants section="faq" content={questionsSection} /> is one section. Keep the <LayoutVariants> wrapper when you move a line: it draws the section in the layout set in its content file. It also connects the section to the demo Change layout button, which is off by default ([settings.layoutSwitcher] in config.toml).

Use A Demo Homepage As Your Main Homepage

1. Open the demo route, for example src/pages/[...lang]/home-api.astro, and copy the section lines between <Base ...> and </Base>.

2. Paste them into src/pages/[...lang]/index.astro, replacing the lines there. Copy the import lines at the top that the new sections need, and the names in the const { ... } = homepageContent?.data list.

3. Copy the frontmatter blocks from src/content/homepage/english/home-api.md into src/content/homepage/english/-index.md. Do the same for french/.

4. Delete the demo homepages you don’t need: their route files in src/pages/[...lang]/ and their files in src/content/homepage/english/ and french/.

5. Remove the deleted homepages from the Pages menu in src/config/menu.en.json and menu.fr.json.

Do It With AI

Make the [API | AI | analytics] demo the main homepage. Copy the sections of
src/pages/[...lang]/[home-api].astro into src/pages/[...lang]/index.astro (imports and the
destructured block names too), and copy the frontmatter blocks of
src/content/homepage/english/[home-api].md into -index.md, and the same for french/. Then delete
the three demo homepage routes and content files, remove them from the "Pages" menu in
src/config/menu.en.json and menu.fr.json, and run npm run astro-check.