Service index

Install kit: "Service index"
Library page: https://astro.baysixmedia.com/components/service-index/
Files: 1 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/ServiceIndex.astro =====
---
/**
 * ServiceIndex (candidate, Step 28)
 *
 * A type-led services index. The header puts the heading on the left and the
 * intro and an optional action on the right; below, each service is one ruled
 * row set in large type — the name, the line that explains it, and an arrow —
 * and the whole row is the link. No cards, no icon tiles, no photos: the
 * hierarchy is the design.
 *
 * An optional call button (from a real number only) sits beside the intro.
 *
 * Rows follow the section's own width (container queries): name, line and
 * arrow in three columns from 900px; the line under the name from 560px;
 * stacked on phones. A row without a link is a plain row with no arrow. An
 * optional short label ("24/7", "Same day") sits beside the name — only a fact
 * the business states.
 *
 * Nothing renders that was not passed: with no services, no section.
 * No script. Reads --si-* tokens from any ancestor, with fallbacks.
 * Step 34: --si-grid-max / --si-grid-gutter (desktop) put the content on a
 * site's page grid, and --si-heading-size lets the site's heading scale size the heading;
 * with no input the design is exactly as it was.
 */

export interface ServiceIndexItem {
	title: string;
	description?: string;
	label?: string;
	href?: string;
}

export interface ServiceIndexProps {
	heading: string;
	headingLevel?: "h2" | "h3";
	eyebrow?: string;
	intro?: string;
	services?: readonly ServiceIndexItem[];
	cta?: { label: string; href: string } | null;
	/** A real number for a call action in the header. No number, no button. */
	phone?: { number: string; label?: string } | null;
	fontStylesheet?: string;
	class?: string;
	id?: string;
}

interface Props extends ServiceIndexProps {}

const {
	heading,
	headingLevel = "h2",
	eyebrow = "",
	intro = "",
	services = [],
	cta = null,
	phone = null,
	fontStylesheet = "https://fonts.googleapis.com/css2?family=Manrope:wght@500;600;700;800&display=swap",
	class: className,
	id,
} = Astro.props;

const SAFE = /^(?:https?:|mailto:|tel:|[#/.?])/i;
/* An unsafe or empty link is dropped, never replaced with "#": the row renders plain and the action does not render. */
const safeHref = (href: string | undefined) => (href && SAFE.test(href.trim()) ? href.trim() : "");
const rows = (services ?? [])
	.filter((s) => s && typeof s.title === "string" && s.title.trim())
	.map((s) => ({ title: s.title.trim(), description: s.description?.trim() ?? "", label: s.label?.trim() ?? "", href: safeHref(s.href) }));
const number = phone?.number?.trim() ?? "";
const digits = number.replace(/\D/g, "");
const callHref = digits ? `tel:${number.startsWith("+") ? "+" : ""}${digits}` : "";
const ctaHref = cta?.label?.trim() ? safeHref(cta.href) : "";
const hasActions = Boolean(ctaHref || callHref);
const Heading = headingLevel;
const RowTitle = headingLevel === "h2" ? "h3" : "h4";
---

{rows.length > 0 && (
<>
{fontStylesheet && <link rel="stylesheet" href={fontStylesheet} />}
<section class:list={["si", className]} id={id}>
	<div class="si-inner">
		<header class:list={["si-head", { "si-head--split": intro || hasActions }]}>
			<div class="si-lead">
				{eyebrow && <p class="si-eyebrow">{eyebrow}</p>}
				<Heading class="si-title">{heading}</Heading>
			</div>
			{
				(intro || hasActions) && (
					<div class="si-aside">
						{intro && <p class="si-intro">{intro}</p>}
						{hasActions && (
							<div class="si-actions">
								{callHref && (
									<a class="si-call" href={callHref}>
										<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
											<path d="M6.6 3.5h3l1.5 4.2-2 1.3a11 11 0 0 0 5.9 5.9l1.3-2 4.2 1.5v3a2 2 0 0 1-2.2 2A17 17 0 0 1 4.6 5.7a2 2 0 0 1 2-2.2z" />
										</svg>
										<span>{phone?.label?.trim() || "Call"} {number}</span>
									</a>
								)}
								{ctaHref && (
									<a class="si-cta" href={ctaHref}>
										{cta?.label}
									</a>
								)}
							</div>
						)}
					</div>
				)
			}
		</header>

		<ul class="si-list" role="list">
			{rows.map((row) => {
				const Tag = row.href ? "a" : "div";
				return (
					<li class="si-item">
						<Tag class:list={["si-row", { "si-row--link": row.href }]} href={row.href || undefined}>
							<span class="si-name">
								<RowTitle class="si-row-title">{row.title}</RowTitle>
								{row.label && <span class="si-label">{row.label}</span>}
							</span>
							{row.description && <p class="si-desc">{row.description}</p>}
							{row.href && (
								<span class="si-go" aria-hidden="true">
									<svg viewBox="0 0 24 24" focusable="false">
										<path d="M5 12h13M13 6l6 6-6 6" />
									</svg>
								</span>
							)}
						</Tag>
					</li>
				);
			})}
		</ul>
	</div>
</section>
</>
)}

<style>
	.si {
		--si-surface: var(--si-bg, #f4f5f3);
		--si-ink: var(--si-text, #101418);
		--si-soft: var(--si-text-muted, #474d55);
		--si-accent: var(--si-brand, #2336a8);
		--si-rule: var(--si-border, #d3d6d9);
		--si-font: var(--si-family, Manrope, ui-sans-serif, system-ui, sans-serif);

		container-type: inline-size;
		background: var(--si-surface);
		color: var(--si-ink);
		font-family: var(--si-font);
	}

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

	.si-inner {
		max-width: var(--si-grid-max, 1240px);
		margin: 0 auto;
		padding: 64px 20px;
	}

	/* ---- head ---- */

	.si-head {
		display: grid;
		gap: 18px;
	}

	.si-lead,
	.si-aside {
		min-width: 0;
	}

	.si-eyebrow {
		margin: 0 0 14px;
		color: var(--si-accent);
		font: 700 14px/1.4 var(--si-font);
	}

	.si-title {
		max-width: 16ch;
		margin: 0;
		font: 800 var(--si-heading-size, clamp(34px, 8cqi, 64px)) / 1 var(--si-font);
		letter-spacing: -0.04em;
		text-wrap: balance;
		overflow-wrap: anywhere;
	}

	.si-intro {
		max-width: 44ch;
		margin: 0;
		color: var(--si-soft);
		font: 500 17px/1.6 var(--si-font);
		overflow-wrap: anywhere;
	}

	.si-actions {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: 12px 24px;
		margin-top: 22px;
	}

	.si-call {
		display: inline-flex;
		align-items: center;
		gap: 10px;
		min-height: 48px;
		padding: 0 20px 0 16px;
		border-radius: 999px;
		background: var(--si-ink);
		color: var(--si-surface);
		font: 700 16px/1.2 var(--si-font);
		text-decoration: none;
		transition: background-color 0.2s ease;
	}

	.si-call svg {
		width: 18px;
		height: 18px;
		fill: currentColor;
	}

	.si-call:hover {
		background: var(--si-accent);
	}

	.si-call:focus-visible {
		outline: 3px solid var(--si-accent);
		outline-offset: 3px;
	}

	.si-cta {
		display: inline-flex;
		align-items: center;
		min-height: 48px;
		padding: 0;
		color: var(--si-ink);
		font: 700 16px/1.3 var(--si-font);
		text-decoration: underline;
		text-decoration-color: var(--si-accent);
		text-decoration-thickness: 2px;
		text-underline-offset: 7px;
		transition: text-underline-offset 0.18s ease;
	}

	.si-cta:hover {
		text-underline-offset: 4px;
	}

	.si-cta:focus-visible {
		outline: 3px solid var(--si-accent);
		outline-offset: 3px;
		border-radius: 2px;
	}

	/* ---- the index ---- */

	.si-list {
		margin: 44px 0 0;
		padding: 0;
		border-top: 2px solid var(--si-ink);
		list-style: none;
	}

	.si-item {
		border-bottom: 1px solid var(--si-rule);
	}

	/* Phones: name, then line, arrow at the right of the name. */
	.si-row {
		position: relative;
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		column-gap: 16px;
		row-gap: 6px;
		align-items: start;
		padding: 22px 0 24px;
		color: inherit;
		text-decoration: none;
	}

	.si-name {
		display: flex;
		flex-wrap: wrap;
		align-items: baseline;
		gap: 6px 12px;
		min-width: 0;
	}

	.si-row-title {
		margin: 0;
		font: 700 clamp(24px, 5.4cqi, 42px) / 1.05 var(--si-font);
		letter-spacing: -0.035em;
		text-wrap: balance;
		overflow-wrap: anywhere;
		transition: color 0.2s ease;
	}

	.si-label {
		flex: none;
		padding: 3px 9px;
		border: 1.5px solid currentColor;
		border-radius: 999px;
		color: var(--si-accent);
		font: 700 13px/1.25 var(--si-font);
		white-space: nowrap;
	}

	.si-desc {
		grid-column: 1;
		max-width: 52ch;
		margin: 0;
		color: var(--si-soft);
		font: 500 16px/1.55 var(--si-font);
		overflow-wrap: anywhere;
	}

	.si-go {
		grid-column: 2;
		grid-row: 1 / span 2;
		align-self: center;
		display: grid;
		place-items: center;
		width: 44px;
		height: 44px;
		border: 1.5px solid var(--si-ink);
		border-radius: 50%;
		transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.25s ease;
	}

	.si-go svg {
		width: 20px;
		height: 20px;
		fill: none;
		stroke: currentColor;
		stroke-width: 2;
		stroke-linecap: round;
		stroke-linejoin: round;
		transition: transform 0.25s ease;
	}

	/* A bar that draws in under the row on hover and focus. */
	.si-row--link::after {
		content: "";
		position: absolute;
		right: 0;
		bottom: -1px;
		left: 0;
		height: 2px;
		background: var(--si-accent);
		transform: scaleX(0);
		transform-origin: left;
		transition: transform 0.3s ease;
	}

	.si-row--link:hover .si-row-title,
	.si-row--link:focus-visible .si-row-title {
		color: var(--si-accent);
	}

	.si-row--link:hover .si-go,
	.si-row--link:focus-visible .si-go {
		border-color: var(--si-accent);
		background: var(--si-accent);
		color: #fff;
	}

	.si-row--link:hover .si-go svg,
	.si-row--link:focus-visible .si-go svg {
		transform: translateX(2px);
	}

	.si-row--link:hover::after,
	.si-row--link:focus-visible::after {
		transform: scaleX(1);
	}

	.si-row--link:focus-visible {
		outline: 3px solid var(--si-accent);
		outline-offset: 4px;
		border-radius: 4px;
	}

	/* ---- tablet: the line sits under the name, arrow centred on the row ---- */

	@container (min-width: 560px) {
		.si-inner {
			padding: 84px 32px;
		}

		.si-row {
			align-items: center;
			padding: 26px 0 28px;
		}

		.si-go {
			grid-row: 1 / span 2;
			width: 52px;
			height: 52px;
		}
	}

	/* ---- desktop: name, line and arrow in three columns ---- */

	@container (min-width: 900px) {
		.si-inner {
			padding: 104px var(--si-grid-gutter, 40px);
		}

		/* The header shares the rows' columns, so the intro starts where each row's line starts. */
		.si-head--split {
			grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) 52px;
			column-gap: 40px;
			align-items: end;
		}

		.si-head--split .si-aside {
			grid-column: 2 / span 2;
		}

		.si-list {
			margin-top: 64px;
		}

		.si-row {
			grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) auto;
			column-gap: 40px;
			padding: 30px 0 32px;
		}

		.si-desc {
			grid-column: 2;
			grid-row: 1;
			color: var(--si-ink);
			font-size: 18px;
			line-height: 1.5;
		}

		.si-go {
			grid-column: 3;
			grid-row: 1;
		}
	}

	@media (prefers-reduced-motion: reduce) {
		.si-row-title,
		.si-go,
		.si-go svg,
		.si-row--link::after,
		.si-call,
		.si-cta {
			transition: none;
		}
	}

	@media (forced-colors: active) {
		.si-go,
		.si-label,
		.si-call {
			border: 1px solid CanvasText;
		}

		.si-row--link::after {
			background: CanvasText;
		}
	}
</style>

===== END src/components/ServiceIndex.astro =====

===== FILE (supporting): src/components/ServiceIndex.md =====
# Service index

A type-led services section: heading beside a short intro, a call button and a text action (each only if given), then each service as a full-width ruled row set in large type — name, one line, arrow — with the whole row the link. No cards, icons or photos.

## Integration

- A section heading (h2 by default); row titles are one level down.
- No services, no section. A row with an href is one link; without one it is a plain row with no arrow.
- The call button renders only from a real `phone.number` (tel: built from its digits); the text action only from `cta`.
- Three columns from 900px of the section's own width (container queries), the line under the name from 560px, stacked below.
- Loads Manrope from Google Fonts by default. Pass fontStylesheet="" on a site that already loads it.

## Provenance

Staged as candidate `service-index` (Step 28) and admitted through the candidate pipeline. Source type: original. References (direction only): https://21st.dev/@educalvolpz/components/hover-image-list, https://www.serviceexperts.com/. Quality history: quality/candidates/records/service-index.json.

===== END src/components/ServiceIndex.md =====

--- 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: not applicable — this component ships no script.

--- 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.

“Service index” from my Astro Component Library:
https://astro.baysixmedia.com/components/service-index/

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.