The long page file

A single +page.svelte with hero, features, pricing, testimonials, and FAQ is long. It works, but it is hard to scan and harder to change.

Splitting sections

Move each section into its own component:

  • Hero.svelte
  • Features.svelte
  • Pricing.svelte

The page file imports them and renders them in order. That is the whole change.

What stays in the page

The page still owns:

  • Which sections to render.
  • What data to pass to each section.

Everything else moves into the section component.

Summary

A page file should read like a table of contents. If it reads like a novel, split it.