Homepages

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

Taskly ships three homepages. They are built from the same section components and the same section files; each one picks a different look with the layout field of its sections and changes some copy with named blocks.

The Three Homepages

Home 2: split hero

URL	Route file	Content file	Look	Header (`headerLayout`)	Footer (`footerLayout`)
`/`	`index.astro`	`src/content/homepage/english/-index.md`	Centered hero on a cream fade with the coded dashboard, two review comments pinned on it	`default`: floating white bar	`wordmark`: ink, your site name across the bottom
`/home-2/`	`home-2.astro`	`src/content/homepage/english/home-2.md`	White split hero with a rating, and a collage of product cards on a lilac block	`bar`: full-width white bar	`newsletter`: cream, a signup card and one row per link group
`/home-3/`	`home-3.astro`	`src/content/homepage/english/home-3.md`	Sign-up hero in a cream card with an email field, a dashboard with side cards, and a dark logo band	`islands`: logo, menus, and buttons in separate boxes	`tiles`: white, pastel cards and the latest release

Every other page uses the default header and footer. Change a homepage’s header or footer with headerLayout or footerLayout in its content file (both languages); they are described in Header and Footer & CTA.

Home 3: sign-up hero

Sections Of Each Homepage

Top to bottom. The call to action above the footer (ctaSection) comes after each list.

`/`	`/home-2/`	`/home-3/`
Hero (`default`)	Hero (`split`)	Hero (`signup`, with the logos inside)
Logos (`default`)	Logos (`boxed`)	Intro statement
Why (`default`)	Why (`simple`)	Bento grid
Features (`default`)	Stats panel	Steps
Integrations (`tiles`)	Solution tabs	Feature rows (`alternating`)
Overview	Feature rows (`alternating`)	Control panel
Testimonials (`columns`, three reviews)	Integrations (`chips`)	Testimonials (`marquee`)
Pricing (`default`)	Pricing (`default`, highlighted plan)	Comparison (old way vs new way)
FAQ (`split`)	Proof (numbers and a quote)	Integrations (`cloud`)
	FAQ (`centered`)	FAQ (`split`)
	Latest posts

Each homepage content file lists the blocks it renders in the comments at its top.

Change The Text Of One Homepage

Because the homepages share section files, an edit to src/content/sections/english/hero-section.md changes the hero on all three (unless a homepage overrides that field). To change one homepage only, add or edit a named block in its content file:

heroSection:
  layout: "signup"
  title: "One calm *home* for remote team work"
  description: "Plan projects, share updates, and keep everyone moving."

Remember the merge rules: only the keys you write change, and a list (items, plans, rows) replaces the whole list. See How Taskly Works.

Change The Layout Of A Section

Set layout in the homepage’s block:

testimonialsSection:
  layout: "marquee"   # columns | marquee

Some layouts read extra fields from the section file, for example the split hero reads rating and visual, and the signup hero reads pill, signup, and visual. They are already filled in with sample content. Compare all layouts at /elements/, and see Section Layouts.

Reorder, Add, Or Remove Sections

Edit the route file. Each line is one section, in display order:

<Base {...data} homepage>
  <LayoutVariants section="hero" content={data?.heroSection} />
  <LayoutVariants section="logos" content={data?.logosSection} />
  <FeaturesSection content={data?.featuresSection} />
  <PricingSection content={data?.pricingSection} />
</Base>

Move a line to move the section. Keep the hero first: the header floats over it.
Delete a line (and its import, if no other line uses it) to remove the section from that homepage.
Add a section from another page: import its component at the top, add a line such as <StepsSection content={data?.stepsSection} />, and add a stepsSection: block to the content file if you want different copy.
To hide a section without touching code, add its block with enable: false.

<LayoutVariants section="…"> renders the section like its own component would. Keep those lines as they are, or replace one with the plain component (<HeroSection content={data?.heroSection} />): the result is the same in your builds.

Keep Only One Homepage

Most sites need one homepage. To make the look of /home-2/ or /home-3/ your main page, copy its section lines into index.astro and its named blocks, headerLayout, and footerLayout into -index.md (in both languages). Then delete the routes and content files you no longer need, and remove the Home menu and the Homepages footer column from the menu files. The Prompt Library has a prompt for this.

Do It With AI

On /home-2/, use the "split" FAQ layout, move the pricing section above the stats panel, and
remove the latest posts. Edit src/pages/[...lang]/home-2.astro for the order and
src/content/homepage/english/home-2.md and french/home-2.md for the layout. Remove unused imports
and run npm run astro-check.