Flanked stat overview

Install kit: "Flanked stat overview"
Library page: https://astro.baysixmedia.com/components/flanked-stat-overview/
Files: 3 required, 1 supporting

Write each block below to the path named in its header, relative to the project root. A block marked (required) is one the component does not work without; (supporting) is documentation. Nothing here needs downloading except a block that says so in as many words.

===== FILE (required): src/components/FlankedStatOverview.astro =====
---
/**
 * FlankedStatOverview
 *
 * A company overview: an outlined eyebrow, a big centred uppercase heading
 * with an orange phrase, a paragraph and an orange pill, flanked by two tall
 * photos with chamfered inner corners. Underneath, a row of three stat cards
 * (navy, orange, navy) with a line icon, a big figure and a caption.
 *
 * Heading words rise in one after another and the stat cards lift in, the
 * first time each scrolls into view.
 *
 * Heading syntax: wrap the orange words in asterisks, e.g. "Data-driven
 * logistic global *network*".
 *
 * Reads the --tw-* tokens from any ancestor, with fallbacks.
 */

export type FlankedStatIcon = "burst" | "people" | "truck" | "globe" | "clock" | "box";

export interface FlankedStat {
	value: string;
	label: string;
	icon?: FlankedStatIcon;
	tone?: "navy" | "orange";
}

export interface FlankedStatOverviewProps {
	eyebrow?: string;
	heading?: string;
	headingLevel?: "h2" | "h3";
	text?: string;
	cta?: { label: string; href: string } | null;
	/** Left and right photos. No `src` renders a labelled placeholder; `null` drops both. */
	images?: [{ src?: string; alt?: string }, { src?: string; alt?: string }] | null;
	stats?: FlankedStat[];
	background?: string;
	fontStylesheet?: string;
	class?: string;
	id?: string;
}

interface Props extends FlankedStatOverviewProps {}

/*
 * The heading, copy, button, photos and figures are the caller's: nothing
 * about a business is filled in here. "Company Overview" is a generic label
 * and never renders the section on its own. The catalog demo passes its
 * sample content through the registry's `props`.
 */
const {
	eyebrow = "Company Overview",
	heading = "",
	headingLevel = "h2",
	text = "",
	cta = null,
	images: imagesProp,
	stats = [],
	background = "#ffffff",
	fontStylesheet = "https://fonts.googleapis.com/css2?family=Outfit:wght@500;600;700;800;900&family=Noto+Sans:wght@400;500;600;700&family=Inter:wght@500;600;700&display=swap",
	class: className,
	id,
} = Astro.props;

/* A photo given without alt is decorative. No photo: the neutral placeholder. */
const images =
	imagesProp === null
		? null
		: [0, 1].map((i) => ({ src: imagesProp?.[i]?.src ?? "", alt: imagesProp?.[i]?.alt ?? "" }));

const hasTop = Boolean(heading || text || cta);
/* Nothing to say → nothing rendered: the generic eyebrow alone is not a section. */
const hasContent = hasTop || stats.length > 0;

const words = heading
	.split("*")
	.flatMap((seg, i) => seg.split(/\s+/).filter(Boolean).map((w) => ({ w, accent: i % 2 === 1 })));

const Heading = headingLevel;
const SAFE = /^(?:https?:|mailto:|tel:|[#/.?])/i;
const safeHref = (href: string) => (SAFE.test(href.trim()) ? href.trim() : "#");

const ICONS: Record<FlankedStatIcon, string> = {
	burst: "M24 6l4.2 9.3 10.1 1.1-7.5 6.8 2.1 9.9L24 28l-8.9 5.1 2.1-9.9-7.5-6.8 10.1-1.1Z M24 40v4 M8 30l-3 2 M40 30l3 2 M10 8l2 3 M38 8l-2 3",
	people: "M24 20a5 5 0 1 0 0-10 5 5 0 0 0 0 10Z M15 38v-4a9 9 0 0 1 18 0v4Z M12 22a4 4 0 1 0 0-8 4 4 0 0 0 0 8Z M36 22a4 4 0 1 0 0-8 4 4 0 0 0 0 8Z M5 38v-3a7 7 0 0 1 9-6.7 M43 38v-3a7 7 0 0 0-9-6.7",
	truck: "M4 14h24v18H4Z M28 20h8l6 7v5H28 M12 38a4 4 0 1 0 0-8 4 4 0 0 0 0 8Z M34 38a4 4 0 1 0 0-8 4 4 0 0 0 0 8Z M1 20h8 M3 26h6",
	globe: "M24 42a18 18 0 1 0 0-36 18 18 0 0 0 0 36Z M6 24h36 M24 6c6 6 6 30 0 36 M24 6c-6 6-6 30 0 36",
	clock: "M24 42a18 18 0 1 0 0-36 18 18 0 0 0 0 36Z M24 14v10l7 5",
	box: "M24 6 40 14v20L24 42 8 34V14Z M8 14l16 8 16-8 M24 22v20",
};
---

{hasContent && fontStylesheet && <link rel="stylesheet" href={fontStylesheet} />}
{hasContent && (
<section class:list={["fso", className]} id={id} style={`--fso-band:${background}`} data-fso-root>
	<div class="fso-inner">
		{hasTop && (
		<div class="fso-top" data-fso-reveal="up">
			{
				images && (
					<div class="fso-img fso-img--left">
						{images[0].src ? (
							<img src={images[0].src} alt={images[0].alt} width="490" height="624" loading="lazy" decoding="async" />
						) : (
							<div class="fso-ph" role="img" aria-label="Image placeholder: left photo, portrait">
								<span>Image · portrait · 490 × 624</span>
							</div>
						)}
					</div>
				)
			}
			<div class="fso-center">
				{eyebrow && <p class="fso-eyebrow">{eyebrow}</p>}
				{heading && (
				<Heading class="fso-heading" data-fso-reveal="words">
					{
						words.map((t, i) => (
							<>
								{i > 0 && " "}
								<span class:list={["fso-w", { "fso-accent": t.accent }]} style={`--i:${i}`}>
									{t.w}
								</span>
							</>
						))
					}
				</Heading>
				)}
				{text && <p class="fso-text">{text}</p>}
				{
					cta && (
						<a class="fso-btn" href={safeHref(cta.href)}>
							<span>{cta.label}</span>
							<span class="fso-btn-ic" aria-hidden="true">
								<svg viewBox="0 0 24 24"><path d="M8 5l10 7-10 7 3-7Z" fill="currentColor" /></svg>
							</span>
						</a>
					)
				}
			</div>
			{
				images && (
					<div class="fso-img fso-img--right">
						{images[1].src ? (
							<img src={images[1].src} alt={images[1].alt} width="490" height="624" loading="lazy" decoding="async" />
						) : (
							<div class="fso-ph" role="img" aria-label="Image placeholder: right photo, portrait">
								<span>Image · portrait · 490 × 624</span>
							</div>
						)}
					</div>
				)
			}
		</div>
		)}

		{
			stats.length > 0 && (
				<ul class="fso-stats">
					{stats.map((s, i) => (
						<li class:list={["fso-stat", `fso-stat--${s.tone ?? "navy"}`]} data-fso-reveal="up" style={`--d:${i * 0.12}s`}>
							<svg class="fso-ic" viewBox="0 0 48 48" aria-hidden="true">
								<path d={ICONS[s.icon ?? "box"]} fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" />
							</svg>
							<div>
								<p class="fso-value">{s.value}</p>
								<p class="fso-label">{s.label}</p>
							</div>
						</li>
					))}
				</ul>
			)
		}
	</div>
</section>
)}

<style>
	.fso {
		--fso-navy: var(--tw-navy, #0b4654);
		--fso-deep: var(--tw-navy-deep, #052931);
		--fso-accent: var(--tw-accent, #ff6d45);
		--fso-display: var(--tw-display, Outfit, ui-sans-serif, system-ui, sans-serif);
		--fso-body: var(--tw-body, "Noto Sans", ui-sans-serif, system-ui, sans-serif);
		--fso-ease: cubic-bezier(0.44, 0, 0.56, 1);
		--fso-cut: 36px;

		background: var(--fso-band);
		color: var(--fso-navy);
		font-family: var(--fso-body);
	}

	.fso *,
	.fso *::before,
	.fso *::after {
		box-sizing: border-box;
	}

	.fso-inner {
		max-width: 1440px;
		margin: 0 auto;
		padding: 64px 16px;
	}

	.fso-top {
		display: grid;
		justify-items: center;
		gap: 36px;
	}

	.fso-img {
		width: min(245px, 70%);
		aspect-ratio: 245 / 312;
	}

	.fso-img img,
	.fso-img .fso-ph {
		display: block;
		width: 100%;
		height: 100%;
		object-fit: cover;
		border-radius: 12px;
	}

	/* Chamfers on the inner corners, facing the copy. */
	.fso-img--left img,
	.fso-img--left .fso-ph {
		clip-path: polygon(0 0, calc(100% - var(--fso-cut)) 0, 100% var(--fso-cut), 100% calc(100% - var(--fso-cut)), calc(100% - var(--fso-cut)) 100%, 0 100%);
	}

	.fso-img--right img,
	.fso-img--right .fso-ph {
		clip-path: polygon(var(--fso-cut) 0, 100% 0, 100% 100%, var(--fso-cut) 100%, 0 calc(100% - var(--fso-cut)), 0 var(--fso-cut));
	}

	.fso-center {
		display: flex;
		flex-direction: column;
		align-items: center;
		text-align: center;
	}

	.fso-eyebrow {
		margin: 0 0 18px;
		padding: 4px 14px;
		border: 1px solid var(--fso-accent);
		border-radius: 999px;
		color: var(--fso-accent);
		font: 500 15px/24px var(--fso-body);
		letter-spacing: -0.3px;
		text-transform: uppercase;
	}

	.fso-heading {
		max-width: 620px;
		margin: 0;
		font: 700 28px/1.2 var(--fso-display);
		letter-spacing: -0.56px;
		text-transform: uppercase;
	}

	.fso-w {
		display: inline-block;
	}

	.fso-accent {
		color: var(--fso-accent);
	}

	.fso-text {
		max-width: 520px;
		margin: 30px 0 0;
		font: 400 16px/25.6px var(--fso-body);
		letter-spacing: -0.32px;
	}

	.fso-btn {
		display: inline-flex;
		align-items: center;
		gap: 12px;
		height: 50px;
		margin-top: 40px;
		padding: 0 8px 0 25px;
		border-radius: 999px;
		background: var(--fso-accent);
		color: #fff;
		font: 400 16px/25.6px var(--fso-body);
		letter-spacing: -0.32px;
		text-decoration: none;
		transition: background-color 0.3s var(--fso-ease);
	}

	.fso-btn:hover {
		background: var(--fso-deep);
	}

	.fso-btn-ic {
		display: grid;
		place-items: center;
		width: 34px;
		height: 34px;
		border-radius: 50%;
		background: #fff;
		color: var(--fso-accent);
		transition: transform 0.3s var(--fso-ease);
	}

	.fso-btn-ic svg {
		width: 18px;
		height: 18px;
	}

	.fso-btn:hover .fso-btn-ic {
		transform: rotate(-45deg);
	}

	.fso-btn:focus-visible {
		outline: 2px solid var(--fso-navy);
		outline-offset: 3px;
	}

	.fso-stats {
		display: grid;
		gap: 16px;
		margin: 48px 0 0;
		padding: 0;
		list-style: none;
	}

	.fso-stat {
		display: flex;
		align-items: center;
		gap: 12px;
		min-height: 140px;
		padding: 24px 28px;
		border-radius: 10px;
		background: var(--fso-navy);
		color: #fff;
	}

	.fso-stat--orange {
		background: var(--fso-accent);
	}

	.fso-ic {
		flex: none;
		width: 56px;
		height: 56px;
		color: var(--fso-accent);
	}

	.fso-stat--orange .fso-ic {
		color: rgb(255 255 255 / 0.7);
	}

	.fso-value {
		margin: 0;
		font: 700 28px/1.2 var(--fso-display);
		letter-spacing: -0.56px;
		text-transform: uppercase;
	}

	.fso-label {
		margin: 0;
		font: 400 16px/25.6px var(--fso-body);
		letter-spacing: -0.32px;
		text-transform: uppercase;
	}

	.fso-ph {
		display: grid;
		place-items: center;
		padding: 12px;
		background: repeating-linear-gradient(135deg, #e3eef1 0 12px, #edf5f7 12px 24px);
		color: var(--fso-navy);
		font: 500 13px/1.4 var(--fso-body);
		text-align: center;
	}

	/* ---- appear on scroll: hidden poses exist only once the script runs ---- */
	[data-fso-reveal="up"] {
		transition:
			opacity 0.8s var(--fso-ease) var(--d, 0s),
			transform 0.8s var(--fso-ease) var(--d, 0s);
	}

	.fso[data-fso-ready] [data-fso-reveal="up"]:not([data-in]) {
		opacity: 0;
		transform: translateY(80px);
	}

	.fso-w {
		transition:
			opacity 0.6s var(--fso-ease) calc(var(--i) * 0.06s),
			transform 0.6s var(--fso-ease) calc(var(--i) * 0.06s);
	}

	.fso[data-fso-ready] [data-fso-reveal="words"]:not([data-in]) .fso-w {
		opacity: 0;
		transform: translateY(10px);
	}

	@media (min-width: 810px) {
		.fso-inner {
			padding: 90px 40px;
		}

		.fso-top {
			grid-template-columns: minmax(0, 200px) minmax(0, 1fr) minmax(0, 200px);
			align-items: start;
			gap: 24px;
		}

		.fso-img {
			width: 100%;
		}

		.fso-heading {
			font-size: 38px;
			letter-spacing: -0.76px;
		}

		.fso-stats {
			grid-template-columns: repeat(3, minmax(0, 1fr));
			margin-top: 50px;
		}

		.fso-stat {
			flex-direction: column;
			align-items: flex-start;
			padding: 24px;
		}

		.fso-value {
			font-size: 36px;
		}
	}

	@media (min-width: 1200px) {
		.fso-inner {
			padding: 105px 65px 100px;
		}

		.fso-top {
			grid-template-columns: 245px minmax(0, 1fr) 245px;
		}

		.fso-heading {
			max-width: 640px;
			font-size: 50px;
			line-height: 60px;
			letter-spacing: -1px;
		}

		.fso-text {
			max-width: 520px;
		}

		.fso-stats {
			gap: 30px;
		}

		.fso-stat {
			flex-direction: row;
			align-items: center;
			min-height: 166px;
			padding: 30px 40px;
			gap: 12px;
		}

		.fso-ic {
			width: 70px;
			height: 70px;
		}

		.fso-value {
			font-size: 50px;
			line-height: 60px;
			letter-spacing: -1px;
		}
	}

	@media (prefers-reduced-motion: reduce) {
		[data-fso-reveal="up"],
		.fso-w,
		.fso-btn,
		.fso-btn-ic {
			transition: none;
		}

		.fso-btn:hover .fso-btn-ic {
			transform: none;
		}
	}
</style>

<script>
	/*
	 * Appear-on-scroll. One IntersectionObserver per instance, scoped to its
	 * root, disconnected on astro:before-swap. Under reduced motion the root is
	 * never marked ready, so nothing starts hidden.
	 */
	function initFlankedStatOverview(root: HTMLElement) {
		if (root.dataset.fsoReady === "") return;
		if (window.matchMedia("(prefers-reduced-motion: reduce)").matches || !("IntersectionObserver" in window)) return;
		const targets = root.querySelectorAll<HTMLElement>("[data-fso-reveal]");
		const controller = new AbortController();
		root.dataset.fsoReady = "";
		const io = new IntersectionObserver(
			(entries) => {
				for (const entry of entries) {
					if (!entry.isIntersecting) continue;
					(entry.target as HTMLElement).dataset.in = "";
					io.unobserve(entry.target);
				}
			},
			{ threshold: 0.1, rootMargin: "0px 0px -5% 0px" },
		);
		targets.forEach((t) => io.observe(t));
		controller.signal.addEventListener("abort", () => io.disconnect());
		document.addEventListener(
			"astro:before-swap",
			() => {
				controller.abort();
				delete root.dataset.fsoReady;
			},
			{ once: true, signal: controller.signal },
		);
	}

	const boot = () => document.querySelectorAll<HTMLElement>("[data-fso-root]").forEach(initFlankedStatOverview);

	if (document.readyState === "loading") {
		document.addEventListener("DOMContentLoaded", boot, { once: true });
	} else {
		boot();
	}

	document.addEventListener("astro:page-load", boot);
</script>

===== END src/components/FlankedStatOverview.astro =====

===== FILE (supporting): src/components/FlankedStatOverview.md =====
# Flanked stat overview

A company overview: centred outlined eyebrow, a big uppercase heading with an
orange phrase, a paragraph and an orange pill, flanked by two tall photos
with chamfered inner corners; below, three stat cards (navy, orange, navy)
with a line icon, a big figure and a caption.

Catalog page: `/components/flanked-stat-overview`

## Files required

- **`FlankedStatOverview.astro`** — the component, with one small appear script.
- `public/flanked-stat-overview/ship.webp`, `trucks.webp` — the catalog demo's photos, passed as `images`. There are no default photos.
- `FlankedStatOverview.md` — this file.

## Props

| Prop | Type | Default | What it does |
| :--- | :--- | :--- | :--- |
| `eyebrow` | `string?` | `"Company Overview"` | Generic label. `""` drops it. On its own it never renders the section. |
| `heading` | `string?` | `""` | Wrap orange words in `*asterisks*`. Hidden when empty. |
| `headingLevel` | `"h2" \| "h3"` | `"h2"` | |
| `text` | `string?` | `""` | Hidden when empty. |
| `cta` | `{ label, href } \| null` | `null` | |
| `images` | `[{src?,alt?},{src?,alt?}] \| null` | none | No `src` → a neutral labelled placeholder; `null` drops both. A `src` without `alt` is decorative. |
| `stats` | `{ value, label, icon?, tone? }[]` | `[]` | `icon`: burst, people, truck, globe, clock, box. `tone`: navy, orange. Real numbers only; the default is none, and the row is dropped. |
| `background` | `string?` | `#ffffff` | Band colour. |
| `fontStylesheet`, `class`, `id` | | | |

Nothing about a business is a default. The top block (photos, eyebrow,
heading, text, button) shows only with a heading, text or button; the stat
row only with stats; with neither the component renders nothing.

## Behaviour (measured)

- **Appear:** the top block and each stat card rise from `translateY(80px)`,
  opacity 0; heading words rise from 10px one after another (60ms stagger).
  Cards stagger 120ms. Hidden poses only apply once the script has run.
- **Pill hover:** `#ff6d45` → `#052931`, arrow rotates −45°.

## Images and credits

| File | Size | Credit |
| :--- | :--- | :--- |
| `ship.webp` | 490 × 624 | Unsplash 0A7YwYhZhWw, Unsplash License |
| `trucks.webp` | 490 × 624 | Unsplash P0bVatS8Jdw, Unsplash License |

## Approximations

- The reference chamfers are baked into its images; here they are a
  clip-path polygon, so the non-chamfered corners are square rather than
  gently rounded.
- Stat icons are drawn line icons in the reference's style, not its artwork.

===== END src/components/FlankedStatOverview.md =====

===== FILE (required): public/flanked-stat-overview/ship.webp =====
[binary asset — download https://astro.baysixmedia.com/flanked-stat-overview/ship.webp and save it to public/flanked-stat-overview/ship.webp]

===== FILE (required): public/flanked-stat-overview/trucks.webp =====
[binary asset — download https://astro.baysixmedia.com/flanked-stat-overview/trucks.webp and save it to public/flanked-stat-overview/trucks.webp]

--- VERIFIED IN THE COMPONENT LIBRARY ---
Enrolled for verification but never run.
No verification run has been recorded.
No checks have passed yet.
No usable source fingerprint, so these results cannot be tied to the files below.

--- NOT PROVEN ---
- ClientRouter: event-tested only. Handlers respond to dispatched lifecycle events; this has NOT been certified against a real <ClientRouter /> transition.

--- WHAT THIS DOES NOT CERTIFY ---
Verification was performed on the unmodified component, in an isolated fixture, in the
library. It says nothing about this project's CSS, routes, layout or data, and nothing
about the component once you adapt it. A verified component is a good starting point,
not a guarantee about the installation you are about to build.

--- TEST IN THIS PROJECT AFTER INSTALLING OR CUSTOMISING ---
- Horizontal overflow at 1440, 1280, 1024, 834, 390 and 320px.
- Keyboard operation end to end, including visible focus.
- The no-JavaScript render.
- prefers-reduced-motion: reduce.
- Two instances on one page, if this project renders more than one.
- If this project uses <ClientRouter />: teardown and reinitialisation across a real navigation.

“Flanked stat overview” from my Astro Component Library:
https://astro.baysixmedia.com/components/flanked-stat-overview/

Use the existing library component as the implementation source. Preserve its design structure, layout, proportions, spacing system, responsive behavior, visual effects, animations, transitions, hover states, interactions, and accessibility.

The copy, colors, typography, images, and other content may be adapted to match the destination website. Do not redesign, simplify, or reinterpret the component’s underlying design build or effects.