Alternating service rows

Install kit: "Alternating service rows"
Library page: https://astro.baysixmedia.com/components/alternating-service-rows/
Files: 4 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/AlternatingServiceRows.astro =====
---
/**
 * AlternatingServiceRows
 *
 * A services section on a pale band: centred eyebrow and big uppercase
 * heading, then rows that pair a photo with a navy panel, swapping sides
 * each row. The inner top corners of both halves are chamfered and a round
 * orange arrow link sits in a white collar on the seam between them. Each
 * navy panel has an orange pill, an uppercase title, a huge faded index
 * number, a hairline and two check-marked points.
 *
 * The arrow link turns navy and tilts on hover; rows 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 interface AlternatingService {
	title: string;
	tag?: string;
	points?: string[];
	href?: string;
	/** `src: ""` renders a labelled placeholder. */
	image?: { src?: string; alt?: string };
}

export interface AlternatingServiceRowsProps {
	eyebrow?: string;
	heading?: string;
	headingLevel?: "h2" | "h3";
	services?: AlternatingService[];
	/** Show the faded "01", "02"… in each panel. */
	numbered?: boolean;
	background?: string;
	fontStylesheet?: string;
	class?: string;
	id?: string;
}

interface Props extends AlternatingServiceRowsProps {}

const {
	eyebrow = "Core Services",
	heading = "",
	headingLevel = "h2",
	services = [],
	numbered = true,
	background = "#f0f8fa",
	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;

const words = heading
	.split("*")
	.flatMap((seg, i) => seg.split(/\s+/).filter(Boolean).map((w) => ({ w, accent: i % 2 === 1 })));
/* A row needs a title, or it is dropped rather than drawn half-empty. No rows,
   no section: the eyebrow and heading alone never render. */
const list = services
	.filter((s) => s?.title)
	.map((s) => ({ ...s, points: s.points?.filter(Boolean) }));
const Heading = headingLevel;
const Title = headingLevel === "h2" ? "h3" : "h4";
const SAFE = /^(?:https?:|mailto:|tel:|[#/.?])/i;
const safeHref = (href: string) => (SAFE.test(href.trim()) ? href.trim() : "#");
const pad = (n: number) => String(n).padStart(2, "0");
---

{list.length > 0 && fontStylesheet && <link rel="stylesheet" href={fontStylesheet} />}
{list.length > 0 && (
<section class:list={["asr", className]} id={id} style={`--asr-band:${background}`} data-asr-root>
	<div class="asr-inner">
		<div class="asr-head">
			{eyebrow && <p class="asr-eyebrow">{eyebrow}</p>}
			{words.length > 0 && (
			<Heading class="asr-heading" data-asr-reveal="words">
				{
					words.map((t, i) => (
						<>
							{i > 0 && " "}
							<span class:list={["asr-w", { "asr-accent": t.accent }]} style={`--i:${i}`}>
								{t.w}
							</span>
						</>
					))
				}
			</Heading>
			)}
		</div>

		<ol class="asr-rows">
			{
				list.map((s, i) => {
					const img = s.image ?? { src: "" };
					return (
						<li class:list={["asr-row", { "asr-row--flip": i % 2 === 1 }]} data-asr-reveal="up">
							<div class="asr-media">
								{img.src ? (
									<img src={img.src} alt={img.alt ?? ""} width="1290" height="902" loading="lazy" decoding="async" />
								) : (
									<div class="asr-ph" role="img" aria-label={`Image placeholder: ${s.title}`}>
										<span>Image · 1290 × 902</span>
									</div>
								)}
							</div>
							<div class="asr-panel">
								{s.tag && <span class="asr-tag">{s.tag}</span>}
								<Title class="asr-title">{s.title}</Title>
								{numbered && (
									<span class="asr-num" aria-hidden="true">
										{pad(i + 1)}
									</span>
								)}
								{s.points && s.points.length > 0 && (
									<ul class="asr-points">
										{s.points.map((p) => (
											<li>
												<svg viewBox="0 0 20 20" aria-hidden="true">
													<circle cx="10" cy="10" r="9" fill="currentColor" />
													<path d="m6 10.2 2.6 2.6L14 7.5" fill="none" stroke="#fff" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" />
												</svg>
												{p}
											</li>
										))}
									</ul>
								)}
							</div>
							{s.href && (
								<span class="asr-collar">
									<a class="asr-link" href={safeHref(s.href)} aria-label={`Learn more: ${s.title}`}>
										<svg viewBox="0 0 24 24" aria-hidden="true">
											<path d="M5 12h14M13 6l6 6-6 6" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" />
										</svg>
									</a>
								</span>
							)}
						</li>
					);
				})
			}
		</ol>
	</div>
</section>
)}

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

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

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

	/* Step 39.2: --tw-grid-max / --tw-grid-gutter put the content on a site grid; the fallbacks are the original values. */
	.asr-inner {
		max-width: var(--tw-grid-max, 1440px);
		margin: 0 auto;
		padding: 64px 16px;
	}

	.asr-head {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 18px;
		text-align: center;
	}

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

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

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

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

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

	.asr-row {
		position: relative;
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		gap: 16px;
	}

	.asr-media {
		aspect-ratio: 645 / 451;
	}

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

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

	.asr-panel {
		position: relative;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		padding: 36px 28px 104px;
		overflow: hidden;
		border-radius: 20px;
		background: var(--asr-navy);
		color: #fff;
	}

	.asr-tag {
		padding: 4px 12px;
		border-radius: 18px;
		background: var(--asr-accent);
		font: 400 12px/19.2px var(--asr-body);
		letter-spacing: -0.24px;
		text-transform: uppercase;
	}

	.asr-title {
		position: relative;
		z-index: 1;
		max-width: 420px;
		margin: 30px 0 0;
		font: 700 26px/1.4 var(--asr-card-font);
		letter-spacing: -1.04px;
		text-transform: uppercase;
	}

	.asr-num {
		position: absolute;
		top: 44px;
		right: 36px;
		color: rgb(255 255 255 / 0.1);
		font: 600 72px/1 var(--asr-display);
		letter-spacing: -2px;
	}

	.asr-points {
		display: grid;
		gap: 15px;
		width: 100%;
		margin: 40px 0 0;
		padding: 30px 0 0;
		border-top: 1px solid rgb(255 255 255 / 0.12);
		list-style: none;
	}

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

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

	.asr-collar {
		position: absolute;
		top: calc(50% - 40px);
		left: calc(50% - 40px);
		z-index: 2;
		display: none;
		place-items: center;
		width: 80px;
		height: 80px;
		border-radius: 50%;
		background: #fff;
	}

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

	.asr-link svg {
		width: 22px;
		height: 22px;
		transition: transform 0.3s var(--asr-ease);
	}

	.asr-link:hover {
		background: var(--asr-navy);
	}

	.asr-link:hover svg {
		transform: rotate(-45deg);
	}

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

	/* Phone: the link sits at the panel's foot instead of on a seam. */
	.asr-row .asr-collar {
		display: grid;
		top: auto;
		bottom: 20px;
		left: auto;
		right: 20px;
		width: 66px;
		height: 66px;
	}

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

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

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

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

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

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

		.asr-row {
			grid-template-columns: repeat(2, minmax(0, 1fr));
			gap: 20px;
		}

		.asr-row--flip .asr-media {
			order: 2;
		}

		.asr-media {
			aspect-ratio: auto;
			min-height: 380px;
		}

		/* Chamfer the inner top corner of each half. */
		.asr-row:not(.asr-row--flip) .asr-media img,
		.asr-row:not(.asr-row--flip) .asr-ph,
		.asr-row--flip .asr-panel {
			clip-path: polygon(0 0, calc(100% - var(--asr-cut)) 0, 100% var(--asr-cut), 100% 100%, 0 100%);
		}

		.asr-row:not(.asr-row--flip) .asr-panel,
		.asr-row--flip .asr-media img,
		.asr-row--flip .asr-ph {
			clip-path: polygon(var(--asr-cut) 0, 100% 0, 100% 100%, 0 100%, 0 var(--asr-cut));
		}

		.asr-row .asr-collar {
			top: calc(50% - 40px);
			bottom: auto;
			left: calc(50% - 40px);
			right: auto;
			width: 80px;
			height: 80px;
		}

		.asr-panel {
			padding: 56px 40px 50px 56px;
		}

		.asr-row--flip .asr-panel {
			padding: 56px 56px 50px 56px;
		}
	}

	@media (min-width: 1200px) {
		.asr-inner {
			padding: 100px 0;
			padding-inline: var(--tw-grid-gutter, 65px);
		}

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

		.asr-rows {
			gap: 15px;
			margin-top: 55px;
		}

		.asr-media {
			min-height: 451px;
		}

		.asr-panel {
			padding: 60px 40px 50px 60px;
		}

		.asr-title {
			margin-top: 28px;
			font-size: 36px;
			line-height: 50.4px;
			letter-spacing: -1.44px;
		}

		.asr-num {
			top: 80px;
			right: 40px;
			font-size: 100px;
			line-height: 110px;
		}

		.asr-points {
			margin-top: auto;
		}
	}

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

		.asr-link:hover svg {
			transform: none;
		}
	}
</style>

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

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

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

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

===== END src/components/AlternatingServiceRows.astro =====

===== FILE (supporting): src/components/AlternatingServiceRows.md =====
# Alternating service rows

A services section on a pale band: centred eyebrow and a big uppercase
heading, then rows pairing a photo with a navy panel, swapping sides every
row. The inner top corner of each half is chamfered and a round orange arrow
link sits in a white collar on the seam. Each panel has an orange pill, an
uppercase title, a huge faded index number, a hairline and two checks.

Catalog page: `/components/alternating-service-rows`

## Files required

- **`AlternatingServiceRows.astro`** — the component, with one small appear script.
- **`public/alternating-service-rows/ocean-freight.webp`**, **`road-freight.webp`**,
  **`express.webp`** — the catalog demo's photos, passed as props (not
  defaults).
- `AlternatingServiceRows.md` — this file.

## Props

| Prop | Type | Default | What it does |
| :--- | :--- | :--- | :--- |
| `eyebrow`, `heading`, `headingLevel` | | `"Core Services"`, `""`, `"h2"` | Orange words in `*asterisks*`. An empty heading is left out. |
| `services` | `{ title, tag?, points?, href?, image? }[]` | `[]` | No `href` → no arrow. No `image.src` → a neutral "Image · 1290 × 902" placeholder. A row without a `title` is dropped. With no rows the component renders nothing. The catalog demo passes its heading and three rows as props. |
| `numbered` | `boolean?` | `true` | The faded "01", "02"… |
| `background` | `string?` | `#f0f8fa` | |
| `fontStylesheet`, `class`, `id` | | | |

## Behaviour (measured)

- **Arrow hover:** `#ff6d45` → `#0b4654`; arrow rotates −45°. 0.3s.
- Rows rise from 80px as each enters; heading words rise from 10px.

## Images and credits

| File | Size | Credit |
| :--- | :--- | :--- |
| `ocean-freight.webp` | 1290 × 902 | Unsplash WI_KrzzBRPg, Unsplash License |
| `road-freight.webp` | 1290 × 902 | Unsplash ucuOscdCaO4, Unsplash License |
| `express.webp` | 1290 × 902 | Unsplash WSknglfFYH0, Unsplash License |

## Approximations

Chamfers (64px) are clip-path polygons, so the other corners of a chamfered
half are square rather than rounded.

===== END src/components/AlternatingServiceRows.md =====

===== FILE (required): public/alternating-service-rows/ocean-freight.webp =====
[binary asset — download https://astro.baysixmedia.com/alternating-service-rows/ocean-freight.webp and save it to public/alternating-service-rows/ocean-freight.webp]

===== FILE (required): public/alternating-service-rows/road-freight.webp =====
[binary asset — download https://astro.baysixmedia.com/alternating-service-rows/road-freight.webp and save it to public/alternating-service-rows/road-freight.webp]

===== FILE (required): public/alternating-service-rows/express.webp =====
[binary asset — download https://astro.baysixmedia.com/alternating-service-rows/express.webp and save it to public/alternating-service-rows/express.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.

“Alternating service rows” from my Astro Component Library:
https://astro.baysixmedia.com/components/alternating-service-rows/

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.