Badge image intro

Install kit: "Badge image intro"
Library page: https://astro.baysixmedia.com/components/badge-image-intro/
Files: 2 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/BadgeImageIntro.astro =====
---
/**
 * BadgeImageIntro
 *
 * An intro section: a large rounded photo with a round bite taken out of its
 * top-right edge, where a spinning orange badge (circular text around an
 * icon) sits; beside it an uppercase heading with orange words, a paragraph
 * and two pale cards, each with a round orange icon, a title, a hairline and a
 * short checklist.
 *
 * The badge turns slowly and forever (stopped under reduced motion); heading
 * words rise in and the cards lift in the first time they scroll into view.
 *
 * Heading syntax: wrap the orange words in asterisks.
 *
 * Reads the --tw-* tokens from any ancestor, with fallbacks.
 */

export type BadgeIntroIcon = "plane" | "cube" | "truck" | "shield" | "route" | "clock";

export interface BadgeIntroCard {
	title: string;
	points: string[];
	icon?: BadgeIntroIcon;
}

export interface BadgeImageIntroProps {
	badgeText?: string;
	heading?: string;
	headingLevel?: "h2" | "h3";
	text?: string;
	cards?: BadgeIntroCard[];
	/** `src: ""` renders a labelled placeholder. */
	image?: { src?: string; alt?: string };
	background?: string;
	fontStylesheet?: string;
	class?: string;
	id?: string;
}

interface Props extends BadgeImageIntroProps {}

/* No built-in services, copy or photo: everything shown comes from the caller. */
const {
	badgeText = "",
	heading = "",
	headingLevel = "h2",
	text = "",
	cards = [],
	image: imageProp,
	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;

/* Never merged with a demo photo: a caller's image is used exactly as given. */
const image = { src: imageProp?.src ?? "", alt: imageProp?.alt ?? "" };

const words = heading
	.split("*")
	.flatMap((seg, i) => seg.split(/\s+/).filter(Boolean).map((w) => ({ w, accent: i % 2 === 1 })));
const hasCopy = words.length > 0 || Boolean(text) || cards.length > 0;
const hasContent = hasCopy || Boolean(image.src);
const Heading = headingLevel;
const Title = headingLevel === "h2" ? "h3" : "h4";
const pathId = `${id ?? "bii"}-arc-${Math.random().toString(36).slice(2, 7)}`;

const ICONS: Record<BadgeIntroIcon, string> = {
	plane: "M2 13l20-8-6 16-4-7Z M12 14l4-4 M3 19h8",
	cube: "M12 3 20 7v10l-8 4-8-4V7Z M4 7l8 4 8-4 M12 11v10 M8 5l8 4",
	truck: "M2 7h12v9H2Z M14 10h4l3 3v3h-7 M6 19a2 2 0 1 0 0-4 2 2 0 0 0 0 4Z M17 19a2 2 0 1 0 0-4 2 2 0 0 0 0 4Z",
	shield: "M12 3 19 6v5c0 5-3 8.5-7 10-4-1.5-7-5-7-10V6Z M9 12l2 2 4-4",
	route: "M6 20a2 2 0 1 0 0-4 2 2 0 0 0 0 4Z M18 8a2 2 0 1 0 0-4 2 2 0 0 0 0 4Z M6 16V9a3 3 0 0 1 3-3h3 M18 8v7a3 3 0 0 1-3 3h-3",
	clock: "M12 21a9 9 0 1 0 0-18 9 9 0 0 0 0 18Z M12 7v5l3 2",
};
---

{hasContent && fontStylesheet && <link rel="stylesheet" href={fontStylesheet} />}
{hasContent && (
<section class:list={["bii", className]} id={id} style={`--bii-band:${background}`} data-bii-root>
	<div class="bii-inner">
		<div class="bii-visual">
			<div class:list={["bii-media", { "bii-media--bite": badgeText }]}>
				{
					image.src ? (
						<img src={image.src} alt={image.alt} width="1244" height="1100" loading="lazy" decoding="async" />
					) : (
						<div class="bii-ph" role="img" aria-label="Image placeholder">
							<span>Image · 1244 × 1100</span>
						</div>
					)
				}
			</div>
			{
				badgeText && (
					<div class="bii-badge" aria-hidden="true">
						<svg class="bii-ring" viewBox="0 0 136 136">
							<defs>
								<path id={pathId} d="M68 68m-50 0a50 50 0 1 1 100 0a50 50 0 1 1-100 0" />
							</defs>
							<text>
								<textPath href={`#${pathId}`} textLength="312">
									{badgeText.toUpperCase()}
								</textPath>
							</text>
						</svg>
						<span class="bii-core">
							<svg viewBox="0 0 24 24">
								<path d="M12 3 21 12 12 21 3 12Z" fill="currentColor" />
								<path d="M9.5 14.5 14.5 9.5M11 9.5h3.5V13" fill="none" stroke="#fff" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" />
							</svg>
						</span>
					</div>
				)
			}
		</div>

		{hasCopy && (
		<div class="bii-copy">
			{words.length > 0 && (
			<Heading class="bii-heading" data-bii-reveal="words">
				{
					words.map((t, i) => (
						<>
							{i > 0 && " "}
							<span class:list={["bii-w", { "bii-accent": t.accent }]} style={`--i:${i}`}>
								{t.w}
							</span>
						</>
					))
				}
			</Heading>
			)}
			{text && <p class="bii-text">{text}</p>}
			{cards.length > 0 && (
			<ul class="bii-cards">
				{
					cards.map((c, i) => (
						<li class="bii-card" data-bii-reveal="up" style={`--d:${i * 0.12}s`}>
							<div class="bii-card-head">
								<span class="bii-ic" aria-hidden="true">
									<svg viewBox="0 0 24 24">
										<path d={ICONS[c.icon ?? "truck"]} fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" />
									</svg>
								</span>
								<Title class="bii-title">{c.title}</Title>
							</div>
							<ul class="bii-points">
								{c.points.map((p) => (
									<li>
										<svg viewBox="0 0 24 24" aria-hidden="true">
											<path d="m5 12.5 4.5 4.5L19 6" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" />
										</svg>
										{p}
									</li>
								))}
							</ul>
						</li>
					))
				}
			</ul>
			)}
		</div>
		)}
	</div>
</section>
)}

<style>
	.bii {
		--bii-navy: var(--tw-navy, #0b4654);
		--bii-accent: var(--tw-accent, #ff6d45);
		--bii-surface: var(--tw-surface, #f0f8fa);
		--bii-muted: var(--tw-muted, #616161);
		--bii-body: var(--tw-body, "Noto Sans", ui-sans-serif, system-ui, sans-serif);
		--bii-card-font: var(--tw-card, Inter, ui-sans-serif, system-ui, sans-serif);
		--bii-ease: cubic-bezier(0.44, 0, 0.56, 1);
		--bii-badge: 112px;

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

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

	.bii-inner {
		display: grid;
		gap: 40px;
		max-width: 1440px;
		margin: 0 auto;
		padding: 64px 16px;
	}

	.bii-visual {
		position: relative;
		aspect-ratio: 622 / 550;
	}

	.bii-media {
		position: absolute;
		inset: 0;
		overflow: hidden;
		border-radius: 30px;
	}

	/* The bite the badge sits in: a circle centred on the badge, a little
	   larger than it. */
	.bii-media--bite {
		-webkit-mask-image: radial-gradient(circle calc(var(--bii-badge) / 2 + 22px) at calc(100% - var(--bii-badge) / 2 - 36px) calc(var(--bii-badge) / 2), transparent 98%, #000 100%);
		mask-image: radial-gradient(circle calc(var(--bii-badge) / 2 + 22px) at calc(100% - var(--bii-badge) / 2 - 36px) calc(var(--bii-badge) / 2), transparent 98%, #000 100%);
	}

	.bii-media img,
	.bii-ph {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

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

	.bii-badge {
		position: absolute;
		top: 0;
		right: 36px;
		display: grid;
		place-items: center;
		width: var(--bii-badge);
		height: var(--bii-badge);
		border-radius: 50%;
		background: var(--bii-accent);
	}

	.bii-ring {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		fill: #fff;
		font: 500 14px/1 var(--bii-card-font);
		letter-spacing: 1px;
		animation: bii-spin 14s linear infinite;
	}

	@keyframes bii-spin {
		to {
			transform: rotate(360deg);
		}
	}

	.bii-core {
		display: grid;
		place-items: center;
		width: 44%;
		height: 44%;
		border-radius: 50%;
		background: #fff;
		color: var(--bii-accent);
	}

	.bii-core svg {
		width: 58%;
		height: 58%;
	}

	.bii-copy {
		min-width: 0;
	}

	.bii-heading {
		margin: 0;
		font: 700 26px/1.4 var(--bii-card-font);
		letter-spacing: -1.04px;
		text-transform: uppercase;
	}

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

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

	.bii-text {
		max-width: 572px;
		margin: 24px 0 0;
		color: var(--bii-muted);
		font: 400 15px/24px var(--bii-body);
		letter-spacing: -0.3px;
	}

	.bii-cards {
		display: grid;
		gap: 20px;
		margin: 40px 0 0;
		padding: 0;
		list-style: none;
	}

	.bii-card {
		padding: 30px;
		border-radius: 20px;
		background: var(--bii-surface);
	}

	.bii-card-head {
		display: flex;
		align-items: center;
		gap: 15px;
		padding-bottom: 22px;
		border-bottom: 1px solid rgb(11 70 84 / 0.12);
	}

	.bii-ic {
		display: grid;
		flex: none;
		place-items: center;
		width: 52px;
		height: 52px;
		border-radius: 50%;
		background: var(--bii-accent);
		color: #fff;
	}

	.bii-ic svg {
		width: 26px;
		height: 26px;
	}

	.bii-title {
		margin: 0;
		font: 600 22px/1.2 var(--bii-card-font);
		letter-spacing: -0.88px;
	}

	.bii-points {
		display: grid;
		gap: 9px;
		margin: 22px 0 0;
		padding: 0;
		list-style: none;
	}

	.bii-points li {
		display: flex;
		align-items: center;
		gap: 12px;
		color: var(--bii-muted);
		font: 400 16px/25.6px var(--bii-body);
		letter-spacing: -0.32px;
	}

	.bii-points svg {
		flex: none;
		width: 20px;
		height: 20px;
		color: var(--bii-accent);
	}

	[data-bii-reveal="up"] {
		transition:
			opacity 0.8s var(--bii-ease) var(--d, 0s),
			transform 0.8s var(--bii-ease) var(--d, 0s);
	}

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

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

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

	@media (min-width: 810px) {
		.bii {
			--bii-badge: 136px;
		}

		.bii-inner {
			padding: 90px 40px;
		}

		.bii-heading {
			font-size: 32px;
		}

		.bii-cards {
			grid-template-columns: repeat(2, minmax(0, 1fr));
		}
	}

	@media (min-width: 1200px) {
		.bii-inner {
			grid-template-columns: 622px minmax(0, 1fr);
			gap: 76px;
			align-items: start;
			padding: 100px 60px 110px;
		}

		.bii-copy {
			padding-top: 25px;
		}

		.bii-heading {
			font-size: 36px;
			line-height: 50.4px;
			letter-spacing: -1.44px;
		}

		.bii-title {
			font-size: 24px;
			line-height: 28.8px;
			letter-spacing: -0.96px;
		}
	}

	@media (prefers-reduced-motion: reduce) {
		.bii-ring {
			animation: none;
		}

		[data-bii-reveal="up"],
		.bii-w {
			transition: none;
		}
	}
</style>

<script>
	/* Appear-on-scroll; one observer per instance, torn down on astro:before-swap. */
	function initBadgeImageIntro(root: HTMLElement) {
		if (root.dataset.biiReady === "") return;
		if (window.matchMedia("(prefers-reduced-motion: reduce)").matches || !("IntersectionObserver" in window)) return;
		const controller = new AbortController();
		root.dataset.biiReady = "";
		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" },
		);
		root.querySelectorAll<HTMLElement>("[data-bii-reveal]").forEach((t) => io.observe(t));
		controller.signal.addEventListener("abort", () => io.disconnect());
		document.addEventListener(
			"astro:before-swap",
			() => {
				controller.abort();
				delete root.dataset.biiReady;
			},
			{ once: true, signal: controller.signal },
		);
	}

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

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

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

===== END src/components/BadgeImageIntro.astro =====

===== FILE (supporting): src/components/BadgeImageIntro.md =====
# Badge image intro

An intro section: a large rounded photo with a round bite taken out of its
top-right edge, where a slowly spinning orange badge sits; beside it an
uppercase heading with orange words, a paragraph and two pale cards, each
with a round orange icon, a title, a hairline and a short checklist.

Catalog page: `/components/badge-image-intro`

## Files required

- **`BadgeImageIntro.astro`** — the component, with one small appear script.
- **`public/badge-image-intro/trailer.webp`** — the catalog demo's photo;
  only needed if you pass it.
- `BadgeImageIntro.md` — this file.

## Props

| Prop | Type | Default | What it does |
| :--- | :--- | :--- | :--- |
| `badgeText` | `string?` | `""` | The words round the spinning badge. `""` drops the badge and the bite. |
| `heading`, `headingLevel`, `text` | | `""`, `"h2"`, `""` | Orange words in `*asterisks*`. Each is omitted when empty. |
| `cards` | `{ title, points, icon? }[]` | `[]` | `icon`: plane, cube, truck, shield, route, clock. |
| `image` | `{ src?, alt? }?` | none | Used exactly as given, never merged with a demo photo. No `src` → a plain labelled placeholder. |

With no heading, text, cards or image the component renders nothing. It
carries no services, claims or photo of its own; the catalog preview passes
its demo copy through the registry props.
| `background` | `string?` | `#ffffff` | |
| `fontStylesheet`, `class`, `id` | | | |

## Behaviour (measured)

- The badge rotates continuously (14s a turn); stopped under reduced motion.
- Heading words rise from 10px; cards rise from 80px.

## Images and credits

| File | Size | Credit |
| :--- | :--- | :--- |
| `trailer.webp` | 1244 × 1100 | Unsplash HJLXsppUuU8, Unsplash License |

## Approximations

The reference bite is a smooth rounded notch in the image; here it is a CSS
radial mask centred on the badge.

===== END src/components/BadgeImageIntro.md =====

===== FILE (required): public/badge-image-intro/trailer.webp =====
[binary asset — download https://astro.baysixmedia.com/badge-image-intro/trailer.webp and save it to public/badge-image-intro/trailer.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.

“Badge image intro” from my Astro Component Library:
https://astro.baysixmedia.com/components/badge-image-intro/

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.