<LandingHero
	title="Know it is down before your users do"
	description="Checks from six regions, and a status page your customers trust."
	actions={…}
	media={
		<SegmentedStage name="hero-views" aria-label="Product views">
			<SegmentedStage.Item value="status" label="Status page" defaultChecked>
				<ProductFrame lights title="Status" url="status.example.com">
					<StatusBoard />
				</ProductFrame>
			</SegmentedStage.Item>
			<SegmentedStage.Item value="incident" label="Incidents">
				<ProductFrame lights title="Incident" url="app.beacon.dev">
					<IncidentCard />
				</ProductFrame>
			</SegmentedStage.Item>
			<SegmentedStage.Item value="api" label="API">
				<CodeStage variant="slab" title="create-monitor.ts" language="ts">{snippet}</CodeStage>
			</SegmentedStage.Item>
		</SegmentedStage>
	}
/>