<LandingHero
	eyebrow="Status pages are here"
	eyebrowHref="/examples/changelog/status-pages"
	title="Know it is down before your users do"
	description={
		<>
			Checks from six regions, alerts that only fire when <strong>two regions agree</strong>,
			and a status page your customers trust.
		</>
	}
	actions={
		<>
			<Button color="brand" mix={[landingCtaChrome()]}>Start free</Button>
			<LinkButton href="/examples/pricing" variant="surface" mix={[landingCtaChrome()]}>
				See pricing
			</LinkButton>
		</>
	}
	note="Five monitors free, no card required."
	proof={<LogoCloud muted>{marks}</LogoCloud>}
	media={
		<ProductFrame stage="panel" lights title="Status" url="status.example.com">
			<StatusBoard />
		</ProductFrame>
	}
/>

<LandingHero
	mediaPlacement="end"
	tone="plain"
	eyebrow="New"
	eyebrowVariant="pill"
	title="Every outage, explained in one page"
	description="…"
	actions={…}
	backdrop={<svg mix={[landingSlowSpin()]}>{rings}</svg>}
	media={…}
/>