Stacked pricing plans

Install kit: "Stacked pricing plans"
Library page: https://astro.baysixmedia.com/components/stacked-pricing-plans/
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/StackedPricingPlans.astro =====
---
/**
 * StackedPricingPlans
 *
 * A white pricing section: on the left an eyebrow, heading, paragraph and
 * two bold selling points with orange double-chevron marks; on the right
 * three horizontal plan cards stacked, each with the plan name, a price
 * "/Month", a "Get Started" pill and a feature list with orange checks (or a
 * grey cross for what the plan leaves out). One plan is featured: a dark
 * navy card with white text.
 *
 * The cards rise 40px into place, staggered, when the column scrolls in.
 * Side by side from 1200px; stacked below, and on a phone each card turns
 * vertical with a hairline between the price and the list.
 *
 * Reads --tg-* design tokens from any ancestor, with fallbacks.
 */

export interface PricingFeature {
	label: string;
	/** `false` renders the grey cross: not in this plan. */
	included?: boolean;
}

export interface PricingPlan {
	name: string;
	price: string;
	period?: string;
	featured?: boolean;
	cta?: { label: string; href: string } | null;
	features?: (string | PricingFeature)[];
}

export interface StackedPricingPlansProps {
	eyebrow?: string;
	heading?: string;
	headingLevel?: "h2" | "h3";
	text?: string;
	/** Bold lines under the paragraph, each with the orange double chevron. */
	highlights?: string[];
	plans?: PricingPlan[];
	background?: string;
	fontStylesheet?: string;
	class?: string;
	id?: string;
}

interface Props extends StackedPricingPlansProps {}

/* Plans, prices, heading and copy are the caller's: nothing about a business
   is defaulted. The generic eyebrow stays, but never renders on its own. */
const {
	eyebrow = "Pricing plan",
	heading = "",
	headingLevel = "h2",
	text = "",
	highlights = [],
	plans = [],
	background = "#ffffff",
	fontStylesheet = "https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700&family=DM+Sans:wght@400;500;600&display=swap",
	class: className,
	id,
} = Astro.props;

const Heading = headingLevel;
const PlanHeading = headingLevel === "h2" ? "h3" : "h4";

const SAFE = /^(?:https?:|mailto:|tel:|[#/.?])/i;
const safeHref = (href: string) => (SAFE.test(href.trim()) ? href.trim() : "#");
const feature = (f: string | PricingFeature): PricingFeature =>
	typeof f === "string" ? { label: f, included: true } : { included: true, ...f };
const filled = (v: unknown): v is string => typeof v === "string" && v.trim() !== "";

/* A plan needs a name and a price to be drawn; a CTA needs a label and an
   href; a feature needs a label. Anything short of that is dropped. No
   plans → no section. */
const planList = (plans ?? [])
	.filter((plan) => plan && filled(plan.name) && filled(plan.price))
	.map((plan) => ({
		...plan,
		cta: plan.cta && filled(plan.cta.label) && filled(plan.cta.href) ? plan.cta : null,
		features: (plan.features ?? []).map(feature).filter((f) => filled(f.label)),
	}));
const lines = (highlights ?? []).filter(filled);
---

{planList.length > 0 && fontStylesheet && <link rel="stylesheet" href={fontStylesheet} />}
{planList.length > 0 && (
<section class:list={["spp", className]} id={id} style={`--spp-bg: ${background};`} data-spp-root>
	<div class="spp-inner">
		<div class="spp-text" data-spp-appear>
			{
				eyebrow && (
					<p class="spp-eyebrow">
						{eyebrow}
						<span class="spp-eyebrow-line" aria-hidden="true" />
					</p>
				)
			}
			{heading && <Heading class="spp-heading">{heading}</Heading>}
			{text && <p class="spp-lede">{text}</p>}
			{
				lines.length > 0 && (
					<ul class="spp-highlights">
						{lines.map((line) => (
							<li class="spp-highlight">
								<svg class="spp-chevrons" viewBox="0 0 18 14" width="18" height="14" aria-hidden="true" focusable="false">
									<path d="M1.5 1.5 7 7l-5.5 5.5M10 1.5 15.5 7 10 12.5" />
								</svg>
								<span>{line}</span>
							</li>
						))}
					</ul>
				)
			}
		</div>

		<ul class="spp-plans" role="list">
			{
				planList.map((plan, i) => (
					<li
						class:list={["spp-plan", { "spp-plan--featured": plan.featured }]}
						data-spp-appear
						style={`--spp-i: ${i};`}
					>
						<div class="spp-head">
							<div class="spp-price-block">
								<PlanHeading class="spp-name">{plan.name}</PlanHeading>
								<p class="spp-price">
									<span class="spp-amount">{plan.price}</span>
									{plan.period && <span class="spp-period">{plan.period}</span>}
								</p>
							</div>
							{plan.cta && (
								<a class="spp-cta" href={safeHref(plan.cta.href)}>
									{plan.cta.label}
									<span class="spp-sr"> with the {plan.name} plan</span>
									<svg class="spp-cta-icon" viewBox="0 0 12 12" width="12" height="12" aria-hidden="true" focusable="false">
										<path d="M2 10 10 2M3.5 2H10v6.5" />
									</svg>
								</a>
							)}
						</div>
						<span class="spp-divider" aria-hidden="true" />
						{plan.features.length > 0 && (
							<ul class="spp-features" role="list">
								{plan.features.map((f) => (
									<li class:list={["spp-feature", { "spp-feature--out": !f.included }]}>
										{f.included ? (
											<svg class="spp-mark" viewBox="0 0 16 12" width="14" height="14" aria-hidden="true" focusable="false">
												<path d="M1.5 6.5 5.5 10.5 14.5 1.5" />
											</svg>
										) : (
											<svg class="spp-mark" viewBox="0 0 12 12" width="14" height="14" aria-hidden="true" focusable="false">
												<path d="M1.5 1.5 10.5 10.5M10.5 1.5 1.5 10.5" />
											</svg>
										)}
										<span>
											{!f.included && <span class="spp-sr">Not included: </span>}
											{f.label}
										</span>
									</li>
								))}
							</ul>
						)}
					</li>
				))
			}
		</ul>
	</div>
</section>
)}

<style>
	.spp {
		--spp-navy: var(--tg-navy, #020e28);
		--spp-orange: var(--tg-orange, #fd5523);
		--spp-muted: var(--tg-muted, #61697d);
		--spp-surface: var(--tg-surface, #ecf0f1);
		--spp-dark: #001f3f;
		--spp-display: var(--tg-font-display, Outfit, ui-sans-serif, system-ui, sans-serif);
		--spp-body: var(--tg-font-body, "DM Sans", ui-sans-serif, system-ui, sans-serif);
		--spp-ease: cubic-bezier(0.22, 1, 0.36, 1);

		box-sizing: border-box;
		padding: 60px 16px;
		background: var(--spp-bg);
		color: var(--spp-navy);
		font-family: var(--spp-body);
		overflow: hidden;
	}

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

	.spp-inner {
		display: flex;
		flex-direction: column;
		gap: 36px;
		max-width: 1253px;
		margin: 0 auto;
	}

	/* ---- left column ---- */
	.spp-text {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: 16px;
		min-width: 0;
	}

	.spp .spp-eyebrow {
		display: flex;
		align-items: center;
		gap: 12px;
		margin: 0;
		font: 600 16px/1 var(--spp-display);
		text-transform: uppercase;
		color: var(--spp-orange);
	}

	.spp-eyebrow-line {
		display: block;
		width: 40px;
		height: 1px;
		background: currentColor;
	}

	.spp-heading {
		margin: 4px 0 0;
		font: 600 30px/1.2 var(--spp-display);
		text-transform: capitalize;
		color: var(--spp-navy);
	}

	.spp .spp-lede {
		margin: 0;
		font: 400 16px/21.04px var(--spp-body);
		color: var(--spp-muted);
	}

	.spp .spp-highlights {
		display: flex;
		flex-direction: column;
		gap: 16px;
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.spp-highlight {
		display: flex;
		align-items: flex-start;
		gap: 12px;
		font: 600 18px/1.5 var(--spp-display);
		color: var(--spp-navy);
	}

	.spp-chevrons {
		flex: none;
		margin-top: 6px;
		fill: none;
		stroke: var(--spp-orange);
		stroke-width: 2.6;
		stroke-linecap: round;
		stroke-linejoin: round;
	}

	/* ---- plan cards ---- */
	.spp .spp-plans {
		display: flex;
		flex-direction: column;
		gap: 24px;
		margin: 0;
		padding: 0;
		list-style: none;
		min-width: 0;
	}

	.spp-plan {
		display: flex;
		flex-direction: column;
		gap: 24px;
		padding: 24px;
		border: 1px solid #e3e6ea;
		border-radius: 20px;
		background: #fff;
	}

	.spp-plan--featured {
		border-color: var(--spp-dark);
		background: var(--spp-dark);
	}

	.spp-head {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: 16px;
		flex: none;
	}

	.spp-name {
		margin: 0;
		font: 600 16px/11.6px var(--spp-display);
		color: var(--spp-navy);
	}

	.spp .spp-price {
		display: flex;
		align-items: flex-end;
		margin: 0;
	}

	.spp-amount {
		font: 600 36px/46px var(--spp-display);
		color: var(--spp-navy);
	}

	.spp-period {
		padding-bottom: 4px;
		font: 400 16px/21.04px var(--spp-body);
		color: var(--spp-muted);
	}

	.spp-plan--featured .spp-name,
	.spp-plan--featured .spp-amount {
		color: #fff;
	}

	.spp-plan--featured .spp-period {
		color: var(--spp-surface);
	}

	/* The pill. Hover as measured: #ecf0f1 → navy, text → white, the arrow
	   inverts and turns 45°. */
	.spp-cta {
		display: inline-flex;
		align-items: center;
		gap: 8px;
		min-height: 47px;
		padding: 0 27px;
		border-radius: 6px;
		background: var(--spp-surface);
		color: var(--spp-navy);
		font: 600 14px/12.46px var(--spp-body);
		text-decoration: none;
		text-transform: capitalize;
		white-space: nowrap;
		transition:
			background-color 0.3s ease-out,
			color 0.3s ease-out;
	}

	.spp-cta-icon {
		flex: none;
		fill: none;
		stroke: var(--spp-navy);
		stroke-width: 1.8;
		stroke-linecap: round;
		stroke-linejoin: round;
		filter: invert(0);
		transition:
			filter 0.3s ease-out,
			transform 0.3s ease-out;
	}

	.spp-cta:hover {
		background: var(--spp-navy);
		color: #fff;
	}

	.spp-cta:hover .spp-cta-icon {
		filter: invert(1);
		transform: rotate(45deg);
	}

	.spp-cta:focus-visible {
		outline: 2px solid var(--spp-orange);
		outline-offset: 3px;
	}

	.spp-divider {
		display: block;
		height: 1px;
		background: #e3e6ea;
	}

	.spp-plan--featured .spp-divider {
		background: rgb(255 255 255 / 0.85);
	}

	.spp .spp-features {
		display: flex;
		flex-direction: column;
		gap: 12px;
		margin: 0;
		padding: 0;
		list-style: none;
		min-width: 0;
	}

	.spp-feature {
		display: flex;
		align-items: flex-start;
		gap: 16px;
		font: 400 16px/24.6px var(--spp-body);
		color: var(--spp-muted);
	}

	.spp-plan--featured .spp-feature {
		color: #fff;
	}

	.spp-mark {
		flex: none;
		margin-top: 5.5px;
		fill: none;
		stroke: var(--spp-orange);
		stroke-width: 2;
		stroke-linecap: round;
		stroke-linejoin: round;
	}

	.spp-feature--out .spp-mark {
		stroke: #7b8394;
	}

	.spp-sr {
		position: absolute;
		width: 1px;
		height: 1px;
		margin: -1px;
		padding: 0;
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
		border: 0;
	}

	/* ---- tablet: cards go horizontal, still stacked under the text ---- */
	@media (min-width: 810px) {
		.spp {
			padding: 100px 30px;
		}

		.spp-inner {
			gap: 48px;
		}

		.spp-text {
			gap: 22px;
		}

		.spp .spp-eyebrow {
			font-size: 18px;
			line-height: 12.6px;
		}

		.spp-heading {
			margin-top: 2px;
			font-size: 40px;
			line-height: 1.2;
		}

		.spp-highlight {
			font-size: 20px;
			line-height: 30px;
		}

		.spp-chevrons {
			margin-top: 7px;
		}

		.spp .spp-plans {
			gap: 30px;
		}

		.spp-plan {
			flex-direction: row;
			align-items: center;
			gap: 40px;
			padding: 40px;
			border-radius: 30px;
		}

		.spp-head {
			width: 190px;
		}

		/* Measured as a 1px-wide, zero-height line wrap: nothing shows at
		   desktop, but it adds a second 40px gap before the list. */
		.spp-divider {
			flex: none;
			width: 1px;
			height: 0;
		}

		.spp-feature {
			font-size: 18px;
		}
	}

	/* ---- desktop: text left (533), cards right (639) ---- */
	@media (min-width: 1200px) {
		.spp {
			padding: 120px 20px;
		}

		.spp-inner {
			flex-direction: row;
			justify-content: space-between;
			align-items: flex-start;
			gap: 40px;
		}

		.spp-text {
			flex: 0 1 533px;
		}

		.spp-heading {
			font-size: 48px;
			line-height: 57.6px;
		}

		.spp .spp-plans {
			flex: 0 1 639px;
		}

		.spp-head {
			width: 150px;
		}
	}

	/* ---- appear on scroll: start pose only once the script is ready ---- */
	[data-spp-appear] {
		transition:
			opacity 0.8s var(--spp-ease),
			transform 0.8s var(--spp-ease);
		transition-delay: calc(var(--spp-i, 0) * 0.1s);
	}

	.spp[data-spp-ready]:not([data-in]) [data-spp-appear] {
		opacity: 0;
		transform: translateY(40px);
	}

	@media (prefers-reduced-motion: reduce) {
		[data-spp-appear] {
			transition: none;
		}

		.spp[data-spp-ready]:not([data-in]) [data-spp-appear] {
			opacity: 1;
			transform: none;
		}

		.spp-cta:hover .spp-cta-icon {
			transform: none;
		}
	}

	@media (forced-colors: active) {
		.spp-cta {
			border: 1px solid ButtonText;
		}

		.spp-cta-icon,
		.spp-mark,
		.spp-chevrons {
			stroke: CanvasText;
		}
	}
</style>

<script>
	/*
	 * Appear-on-scroll for StackedPricingPlans. One IntersectionObserver per
	 * instance, scoped to its root, torn down on astro:before-swap. Under
	 * reduced motion (or with no IntersectionObserver) it marks the root in
	 * straight away, so nothing ever starts hidden.
	 */
	function initStackedPricingPlans(root: HTMLElement) {
		if (root.dataset.sppReady === "") return;

		const controller = new AbortController();
		const { signal } = controller;
		const reduced = window.matchMedia("(prefers-reduced-motion: reduce)").matches;

		root.dataset.sppReady = "";
		if (reduced || !("IntersectionObserver" in window)) {
			root.setAttribute("data-in", "");
		} else {
			const observer = new IntersectionObserver(
				(entries) => {
					if (entries.some((entry) => entry.isIntersecting)) {
						root.setAttribute("data-in", "");
						observer.disconnect();
					}
				},
				{ threshold: 0.15 },
			);
			observer.observe(root);
			signal.addEventListener("abort", () => observer.disconnect());
		}

		document.addEventListener(
			"astro:before-swap",
			() => {
				controller.abort();
				root.removeAttribute("data-in");
				delete root.dataset.sppReady;
			},
			{ once: true, signal },
		);
	}

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

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

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

===== END src/components/StackedPricingPlans.astro =====

===== FILE (supporting): src/components/StackedPricingPlans.md =====
# Stacked pricing plans

A white pricing section. On the left: an orange eyebrow with a line, a big
heading, a paragraph and two bold selling points with orange double chevrons.
On the right: three horizontal plan cards stacked — plan name, price and
period, a "Get Started" pill, and a feature list with orange checks (or a grey
cross for what the plan leaves out). The featured plan is a dark navy card.

Catalog page: `/components/stacked-pricing-plans`

## Files required

**`StackedPricingPlans.astro`** — one file, the whole component. No imports,
no packages, no images (every icon is inline SVG). One small inline
`<script>` for the appear-on-scroll.

`StackedPricingPlans.md` — this file. Documentation, not required to run.

## Basic usage

```astro
---
import StackedPricingPlans from "../components/StackedPricingPlans.astro";
---

<StackedPricingPlans
  plans={[
    { name: "Starter", price: "$249", period: "/Month", cta: { label: "Get Started", href: "/contact" },
      features: ["Regional LTL", { label: "Live tracking", included: false }] },
    { name: "Business", price: "$389", period: "/Month", featured: true, cta: { label: "Get Started", href: "/contact" },
      features: ["Full truckload", "Live tracking"] },
  ]}
/>
```

## Props

| Prop | Type | Default | What it does |
| :--- | :--- | :--- | :--- |
| `eyebrow` | `string?` | `"Pricing plan"` | Orange uppercase label with a 40px line after it. `""` drops it. |
| `heading` | `string?` | `""` | Section heading (capitalised, as measured). Drawn only when passed. |
| `headingLevel` | `"h2" \| "h3"?` | `"h2"` | Plan names are one level below. |
| `text` | `string?` | `""` | Drawn only when passed. |
| `highlights` | `string[]?` | `[]` | Bold lines with the double chevron. `[]` drops them. |
| `plans` | `PricingPlan[]?` | `[]` | Your plans and prices — never defaulted. See below. No plans → the component renders nothing (the eyebrow alone never renders it). |
| `background` | `string?` | `#ffffff` | Band colour. |
| `fontStylesheet` | `string?` | Outfit + DM Sans (Google Fonts) | `""` to skip loading. |
| `class` | `string?` | — | Extra class on the root. |
| `id` | `string?` | — | Root id. |

```ts
interface PricingPlan {
  name: string;
  price: string;              // "$249"
  period?: string;            // "/Month"
  featured?: boolean;         // dark #001f3f card, white text
  cta?: { label: string; href: string } | null;
  features?: (string | { label: string; included?: boolean })[];
}
```

A plan with no `name` or no `price` is dropped, a `cta` without both `label`
and `href` is not drawn, and a feature with no label is skipped. One plan
passed renders exactly one card.

## Behaviour

- **Pill hover** (as measured): background `#ecf0f1` → navy `#020e28`, text
  navy → white, the ↗ arrow gets `filter: invert(1)` and `rotate(45deg)`,
  0.3s ease-out. The rotation is dropped under reduced motion; the colours
  stay.
- **Appear on scroll** (once, at 15% in view): the text block and each card
  rise from `translateY(40px)` with opacity 0 → 1, 0.8s ease-out, cards
  staggered 0.1s.
- No other motion.

## Layout

- **≥ 1200px:** text 533px left, cards 639px right, space-between in a
  1253px row. Cards: 40px padding, 30px radius, 30px apart; price block 150px,
  then a zero-height 1px "line wrap" with 40px either side (as measured, it
  draws nothing), then the list. 18px feature text.
- **810–1199px:** text above, the same horizontal cards below at full width.
- **< 810px:** each card turns vertical — name, price, pill, a hairline, then
  the list — with 24px padding and 20px radius, as in the phone capture.

## Accessibility

- The plans are a `<ul>` of `<li>` cards; plan names are real headings one
  level below the section heading.
- Each pill's accessible name includes the plan ("Get Started with the
  Starter plan") through visually hidden text, so a links list isn't three
  identical "Get Started"s.
- Excluded features are announced "Not included: …"; the cross is decorative.
- Pills are 47px tall with a visible 2px orange focus ring.
- `role="list"` is kept on the unstyled lists so Safari still announces them.

## Images and credits

None. Every icon is original inline SVG.

## Approximations

- **Card border** `1px #e3e6ea` is read off the screenshot; the dump records no
  border on the white cards.
- **Icons** (double chevron, check, cross, ↗) are original SVGs drawn to the
  measured boxes (18 × 14, 14 × 14, 12 × 12), not the reference's files.
- **Appear timing** (0.8s, 0.1s stagger, 15% threshold) is not measured; the
  40px start offset is.
- **Tablet (810–1199)** was not captured; stacking the text over full-width
  horizontal cards is a judgement call.
- **Phone** paddings and the hairline colour are read off the 390px capture.

===== END src/components/StackedPricingPlans.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: 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.

“Stacked pricing plans” from my Astro Component Library:
https://astro.baysixmedia.com/components/stacked-pricing-plans/

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.