Homepages

Homepages

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

Margo has three homepages, one per kind of portfolio: a solo designer, a small studio, and a photographer. They use the same sections with different content, layouts, header, and footer, so each one also shows which combination suits that kind of site. Keep one as your homepage and delete the others, or keep a second one as a landing page.

Each content file has a copy in each other language folder: src/content/homepage/french/ and src/content/homepage/arabic/.

Solo Designer (Main Homepage)

For an independent designer: a hero with a very large headline and a mosaic of three projects, then the work, services, and the person behind it.

Sections, top to bottom, with the layout set in -index.md:

1. Hero, masthead (heroSection)
2. Projects, stack (projectsSection)
3. Services, ruled (servicesSection)
4. Stats, ruled (statsSection)
5. About, statement (aboutSection)
6. Testimonials, spotlight (testimonialsSection)
7. Logos, grid (logosSection)
8. Pricing, cards (pricingSection)
9. FAQ, two-column (faqSection)
10. Journal, grid (journalSection), showing two chosen posts

Header and footer come from config.toml (bar and email). This page has no call to action above the footer: the footer carries the contact.

The hero’s cards list names projects from src/content/projects/english/ (up to four), in order; the masthead layout shows the first three. To feature other work, change the ids in cards, in every language folder.

Small Studio

For a design studio of a few people: a dark panel hero, client logos, a project index you can filter, and the team.

1. Hero, panel (heroSection)
2. Logos, marquee (logosSection)
3. Projects, index with filter chips (projectsSection)
4. Quote, statement (quoteSection)
5. Services, list (servicesSection)
6. Steps, timeline (stepsSection)
7. Stats, cards (statsSection)
8. Team, strip (teamGridSection)
9. Testimonials, marquee (testimonialsSection)
10. Journal, list (journalSection)
11. Call to action, band (ctaSection)

Header bar, footer columns, contact dock off. The studio’s copy speaks as “we”, so most of it is in home-studio.md rather than in the section files.

Photographer

For a photographer: a full-screen photo under a see-through header, an artist’s statement, a series that scrolls sideways, and commission rates.

1. Hero, photo (heroSection)
2. Quote, statement: the artist’s statement (quoteSection)
3. Gallery, horizontal: one series, pinned while it scrolls sideways on larger screens, a swipe row on phones (gallerySection)
4. Projects, wall: the photo series (projectsSection)
5. Pricing, rates: commission packages and the open months (pricingSection)
6. Logos, grid (logosSection)
7. Testimonials, spotlight (testimonialsSection)
8. Call to action, split (ctaSection)

Header overlay, footer email, and the contact dock on.

How A Homepage Gets Its Content

Each section reads its default copy from its own file in src/content/sections/english/ (hero-section.md, projects-section.md, …). The homepage content file holds one named block per section (heroSection:, projectsSection:, …) with only this page’s choices: its layouts and, on the studio and photographer homepages, its own copy.

heroSection:
  cards: ["ceramic-forms", "envelope-system", "stone-still-life", "colour-fan"]
  options:
    layout: "masthead" # stack | panel | photo | centered | masthead

• Objects merge key by key, so a block only needs the fields it changes.
• A list replaces the whole list: repeat every item you want to keep.
• An empty string ("") clears a value.
• enable: false hides that section on this homepage.

Because the main homepage’s blocks hold almost no copy, edit the section files to change its text, in every language folder. Remember that the section files are shared: an inner page that shows the same section shows your new text too. To change a text on the main homepage only, add the field to its block in -index.md. More in Sections and Section Layouts.

Reorder Or Remove Sections

The order of the sections is set in the route file, not the content file. index.astro lists its sections top to bottom:

<Base {...homepageContent?.data} footerSpaceTop={false} hideCallToAction>
  <LayoutVariants section="hero" content={heroSection} />
  <LayoutVariants section="projects" content={projectsSection} />
  <LayoutVariants section="services" content={servicesSection} />
  <LayoutVariants section="stats" content={statsSection} />
  <LayoutVariants section="about" content={aboutSection} />
  <LayoutVariants section="testimonials" content={testimonialsSection} />
  <LayoutVariants section="logos" content={logosSection} />
  <LayoutVariants section="pricing" content={pricingSection} />
  <LayoutVariants section="faq" content={faqSection} />
  <LayoutVariants section="journal" content={journalSection} />
</Base>

Move a line up or down to move the section. Delete a line to remove it, or set enable: false in its block instead, which is easier to undo. home-studio.astro and home-photo.astro work the same way.

Keep the <LayoutVariants section="..." content={...} /> wrapper when you move a line. It renders the layout you set in options.layout, exactly like the section component itself would.

Add a section. Add a line with the section’s key and its block, and take the block from the content file at the top of the route. For example, -index.md already has a quoteSection block that the main homepage doesn’t show. To show it after the projects:

---
const {
  heroSection,
  projectsSection,
  quoteSection, // add the block here
  // ...
} = homepageContent?.data ?? {};
---
<LayoutVariants section="projects" content={projectsSection} />
<LayoutVariants section="quote" content={quoteSection} />

The keys are hero, projects, quote, services, tools, stats, about, experience, pricing, steps, logos, testimonials, faq, journal, team, gallery, nextProject, and cta (listed in src/lib/layoutVariants.ts).

The call to action. It is not in the list: the page’s <Base> renders it above the footer from the ctaSection block. index.astro turns it off with hideCallToAction. Remove that word to show it on the main homepage too.

Use Another Homepage As Your Homepage

1. Copy the route. Replace the contents of src/pages/[...lang]/index.astro with the contents of the homepage you want, for example home-studio.astro. In the copied code, change the entry name from "home-studio" to "-index":

   const homepageContent = await getEntryCTM(
     "homepage",
     "-index",
     Astro.currentLocale,
   );

2. Copy the content. Replace the frontmatter of src/content/homepage/english/-index.md with that of home-studio.md. Set metaTitle to the browser title you want for your homepage (the tagline is added after it). Do the same in the other language folders.

3. Delete the demo homepages you don’t keep: the route files in src/pages/[...lang]/ and the content files in every language folder of homepage/.

4. Update the menus. Remove the deleted homepages from the Pages menu in every menu.<language>.json, or turn the whole Pages menu off.

5. Check it. Run npm run astro-check and open /, /fr/, and /ar/.

Header, Footer, And Contact Dock Per Homepage

The studio and photographer homepages pick their header, footer, and contact dock in their content files. They win over config.toml:

headerLayout: "overlay" # pill | bar | overlay
footerLayout: "email"   # wordmark | columns | email
contactDock: true       # the Copy email / Book a call bar at the bottom of the screen

When you copy a demo homepage into -index.md, these lines come with it. Delete them to use the site defaults. The overlay header has light text, so keep it with the photo hero. See Header and Footer.

Do It With AI

On the main homepage (src/pages/[...lang]/index.astro), move the [SECTION] above the
[SECTION] and remove the [SECTION]. Keep the LayoutVariants wrappers. Then rewrite the text of
the hero and services sections for my work: [ONE PARAGRAPH]. Edit hero-section.md and
services-section.md in every language folder of src/content/sections/, keeping every key,
option, and list length.

Make the /home-[studio | photo]/ design my homepage. Replace src/pages/[...lang]/index.astro
with the contents of home-[NAME].astro, reading the "-index" entry. Copy the frontmatter of
src/content/homepage/english/home-[NAME].md into -index.md (same for the french and arabic
folders) and set metaTitle to "[HOMEPAGE TITLE]". Delete the other homepage routes and content files, remove them
from the Pages menu in each src/config/menu.<language>.json, and run npm run astro-check.