Templates, blocks and components for modern websites.

return (
  <>
    <HomeHeroSection {...home.hero} accounts={{ ...home.hero.accounts, names: clients.slice(0, 4).map((client) => client.name) }} lane={lanes[0]} />
    <ClientsSection {...clientsIntro} clients={clients} />
    <HomeAboutSection {...home.about} facts={facts} />
    <HomeServicesSection
      {...home.services}
      phone={contact.phone}
      email={contact.supportEmail}
      services={services.map((service, index) => ({
        number: String(index + 1).padStart(2, "0"),
        title: service.title,
        description: service.summary,
        href: routes.service(service.slug),

<Layout absoluteTitle={siteContent.site.title} cover>
  <HomeHeroSection {...home.hero} accounts={{ ...home.hero.accounts, names: clients.slice(0, 4).map((client) => client.name) }} lane={lanes[0]} />
  <ClientsSection {...clientsIntro} clients={clients} />
  <HomeAboutSection {...home.about} facts={facts} />
  <HomeServicesSection
    {...home.services}
    phone={contact.phone}
    email={contact.supportEmail}
    services={services.map((service, index) => ({
      number: String(index + 1).padStart(2, "0"),
      title: service.title,
      description: service.summary,
      href: routes.service(service.slug),
      linkLabel: `${home.services.explore} ${service.title}`,

<main class="pt-[58px] md:pt-[81px] has-[>[data-header-cover]]:pt-0">
  <section data-header-cover class="relative flex justify-center overflow-hidden md:h-[900px]">
    <img
      src="assets/images/home-hero.jpg"
      alt
      loading="eager"
      fetchpriority="high"
      decoding="async"
      width="2400"
      height="1602"
      class="absolute inset-0 size-full object-cover"
    />
    <div
      class="relative flex w-full items-end justify-center bg-ink/70 px-[15px] pt-[100px] pb-[30px] md:px-5 md:pt-[120px] md:pb-10 lg:px-10 lg:pt-[150px] lg:pb-[50px]"