Hero 13

File: src/blocks/hero/Hero13.astro

Centered hero like Hero 03 with a full-bleed logo marquee under the copy. Marquee controls mirror Scroller Logos 01 (logos* props).

Config (`blocks.ts` → `hero13`)

hero13: {
    width: "standard",
    eyebrow: "Available for freelance & contract",
    heading: "I build websites that work as hard as you do!",
    subheading:
      "Full-stack web development for brands that need speed, clarity, and craft. Astro, React, headless CMS, and everything in between.",
    primaryCta: "View my work",
    primaryCtaUrl: "/work/",
    secondaryCta: "Get in touch",
    secondaryCtaUrl: "/contact/",
    padding: "lg",
    borderBottom: false,
    borderThickness: "sm",
    borderColor: "soft",
    logos: [
      { src: "/images/logo/clients/northline.svg", alt: "Northline" },
      { src: "/images/logo/clients/formfield.svg", alt: "Form & Field" },
      { src: "/images/logo/clients/scalepath.svg", alt: "Scalepath" },
      { src: "/images/logo/clients/lunarlab.svg", alt: "Lunar Lab" },
      { src: "/images/logo/clients/orbitco.svg", alt: "Orbit Co" },
      { src: "/images/logo/clients/baselayer.svg", alt: "Baselayer" },
    ],
    logosMotion: "auto",
    logosDirection: "ltr",
    logosSpeed: "slow",
    logosPauseOnHover: true,
    logosGap: "lg",
    logosHeight: "md",
    logosGrayscale: true,
    logosFadeEdges: true,
  },

Add to a page

---
import Hero13 from "@/blocks/hero/Hero13.astro";
---

<Hero13 />

Props override matching keys from config:

<Hero13
  width="wide"
  heading="Custom headline"
  padding="md"
/>

Props

Prop	Config key	Type / values	Default / notes
`width`	`hero13.width`	`standard` \| `narrow` \| `wide`	Wrapper max-width
`eyebrow`	`hero13.eyebrow`	`string`	—
`heading`	`hero13.heading`	`string`	—
`subheading`	`hero13.subheading`	`string`	—
`primaryCta`	`hero13.primaryCta`	`string`	—
`primaryCtaUrl`	`hero13.primaryCtaUrl`	`string`	—
`secondaryCta`	`hero13.secondaryCta`	`string`	—
`secondaryCtaUrl`	`hero13.secondaryCtaUrl`	`string`	—
`padding`	`hero13.padding`	`none` \| `sm` \| `md` \| `lg` \| `xl`	Vertical section padding
`borderBottom`	`hero13.borderBottom`	`boolean`	Show a bottom border under the section
`borderThickness`	`hero13.borderThickness`	`sm` (1px) \| `md` (2px) \| `lg` (4px)	—
`borderColor`	`hero13.borderColor`	`soft` \| `medium` \| `hard`	—
`logos`	`hero13.logos`	Array of `{ src: string, alt: string, href?: string }`	Logo marquee items
`logosMotion`	`hero13.logosMotion`	`auto` (continuous) \| `scroll` (tied to page scroll)	—
`logosDirection`	`hero13.logosDirection`	`ltr` \| `rtl`	—
`logosSpeed`	`hero13.logosSpeed`	`slow` \| `normal` \| `fast`	—
`logosPauseOnHover`	`hero13.logosPauseOnHover`	`boolean`	Pause logo marquee on hover
`logosGap`	`hero13.logosGap`	`sm` \| `md` \| `lg`	—
`logosHeight`	`hero13.logosHeight`	`sm` \| `md` \| `lg`	—
`logosGrayscale`	`hero13.logosGrayscale`	`boolean`	Grayscale logo marquee
`logosFadeEdges`	`hero13.logosFadeEdges`	`boolean`	Fade logo marquee edges

Marquee uses the same scroller internals as Scroller Logos 01.

← Hero versions · Blocks overview

I build websites that work as hard as you do!

Config (blocks.ts → hero13)

Add to a page

Props

Config (`blocks.ts` → `hero13`)