Freight pricing plans

Install kit: "Freight pricing plans"
Library page: https://astro.baysixmedia.com/components/freight-pricing-plans/
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/FreightPricingPlans.astro =====
---
/**
 * FreightPricingPlans
 *
 * A pale pricing band: outlined eyebrow, a big three-line uppercase heading
 * with an orange last line and a photo underneath on the left; two white plan
 * cards on the right. Each card has an orange asterisk, an optional outlined
 * badge, the plan name, a one-line pitch, a big price with its period, a
 * full-width orange pill and a checklist.
 *
 * Heading words rise in and the cards lift in, staggered, 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 FreightPlan {
	name: string;
	pitch?: string;
	price: string;
	period?: string;
	/** Outlined badge in the card corner, e.g. "Popular". */
	badge?: string;
	cta?: { label: string; href: string } | null;
	features: string[];
}

export interface FreightPricingPlansProps {
	eyebrow?: string;
	heading?: string;
	headingLevel?: "h2" | "h3";
	/** `src: ""` renders a labelled placeholder; `null` drops it. */
	image?: { src?: string; alt?: string } | null;
	plans?: FreightPlan[];
	background?: string;
	fontStylesheet?: string;
	class?: string;
	id?: string;
}

interface Props extends FreightPricingPlansProps {}

const {
	eyebrow = "Pricing",
	heading = "",
	headingLevel = "h2",
	image: imageProp,
	/* Plans and prices are the caller's; none are defaulted. */
	plans = [],
	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;

/* No default photo: the image is drawn only when passed, and never merged
   with a demo one. `src: ""` still draws the neutral labelled placeholder. */
const image = imageProp ? { src: imageProp.src ?? "", alt: imageProp.alt ?? "" } : null;

const filled = (v: unknown): v is string => typeof v === "string" && v.trim() !== "";
/* A plan needs a name and a price; a CTA needs a label and an href; blank
   features are skipped. 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 ?? []).filter(filled),
	}));

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

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() : "#");
---

{planList.length > 0 && fontStylesheet && <link rel="stylesheet" href={fontStylesheet} />}
{planList.length > 0 && (
<section class:list={["fpp", className]} id={id} style={`--fpp-band:${background}`} data-fpp-root>
	<div class="fpp-inner">
		<div class="fpp-side">
			{eyebrow && <p class="fpp-eyebrow">{eyebrow}</p>}
			{words.length > 0 && (
			<Heading class="fpp-heading" data-fpp-reveal="words">
				{
					words.map((t, i) => (
						<>
							{i > 0 && " "}
							<span class:list={["fpp-w", { "fpp-accent": t.accent }]} style={`--i:${i}`}>
								{t.w}
							</span>
						</>
					))
				}
			</Heading>
			)}
			{
				image && (
					<div class="fpp-media">
						{image.src ? (
							<img src={image.src} alt={image.alt} width="748" height="580" loading="lazy" decoding="async" />
						) : (
							<div class="fpp-ph" role="img" aria-label="Image placeholder">
								<span>Image · 748 × 580</span>
							</div>
						)}
					</div>
				)
			}
		</div>

		<ul class="fpp-plans">
			{
				planList.map((plan, i) => (
					<li class="fpp-card" data-fpp-reveal="up" style={`--d:${i * 0.12}s`}>
						<div class="fpp-card-top">
							<svg class="fpp-star" viewBox="0 0 30 30" aria-hidden="true">
								<path d="M12.6 1h4.8l-.9 9.6 7.9-5.6 2.4 4.2-8.8 4 8.8 4-2.4 4.2-7.9-5.6.9 9.6h-4.8l.9-9.6-7.9 5.6-2.4-4.2 8.8-4-8.8-4 2.4-4.2 7.9 5.6Z" fill="currentColor" />
							</svg>
							{plan.badge && <span class="fpp-badge">{plan.badge}</span>}
						</div>
						<Title class="fpp-name">{plan.name}</Title>
						{plan.pitch && <p class="fpp-pitch">{plan.pitch}</p>}
						<p class="fpp-price">
							<span class="fpp-amount">{plan.price}</span>
							{plan.period && <span class="fpp-period">{plan.period}</span>}
						</p>
						{plan.cta && (
							<a class="fpp-btn" href={safeHref(plan.cta.href)}>
								<span>
									{plan.cta.label}
									<span class="fpp-sr">: {plan.name}</span>
								</span>
								<span class="fpp-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>
						)}
						{plan.features.length > 0 && (
						<ul class="fpp-list">
							{plan.features.map((f) => (
								<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>
									{f}
								</li>
							))}
						</ul>
						)}
					</li>
				))
			}
		</ul>
	</div>
</section>
)}

<style>
	.fpp {
		--fpp-navy: var(--tw-navy, #0b4654);
		--fpp-navy-2: var(--tw-navy-2, #15505e);
		--fpp-deep: var(--tw-navy-deep, #052931);
		--fpp-accent: var(--tw-accent, #ff6d45);
		--fpp-muted: var(--tw-muted, #616161);
		--fpp-display: var(--tw-display, Outfit, ui-sans-serif, system-ui, sans-serif);
		--fpp-body: var(--tw-body, "Noto Sans", ui-sans-serif, system-ui, sans-serif);
		--fpp-ease: cubic-bezier(0.44, 0, 0.56, 1);

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

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

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

	.fpp-side {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
	}

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

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

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

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

	.fpp-media {
		width: min(374px, 100%);
		margin-top: 40px;
		aspect-ratio: 374 / 290;
	}

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

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

	.fpp-plans {
		display: grid;
		gap: 20px;
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.fpp-card {
		display: flex;
		flex-direction: column;
		padding: 30px;
		border-radius: 20px;
		background: #fff;
	}

	.fpp-card-top {
		display: flex;
		align-items: center;
		justify-content: space-between;
		min-height: 32px;
		margin-bottom: 22px;
	}

	.fpp-star {
		width: 30px;
		height: 30px;
		color: var(--fpp-accent);
	}

	.fpp-badge {
		padding: 3px 14px;
		border: 1px solid var(--fpp-accent);
		border-radius: 999px;
		color: var(--fpp-accent);
		font: 500 15px/24px var(--fpp-body);
		letter-spacing: -0.3px;
		text-transform: uppercase;
	}

	.fpp-name {
		margin: 0;
		color: var(--fpp-navy-2);
		font: 600 30px/42px var(--fpp-display);
		letter-spacing: -0.6px;
		text-transform: uppercase;
	}

	.fpp-pitch {
		margin: 4px 0 0;
		color: var(--fpp-muted);
		font: 400 16px/25.6px var(--fpp-body);
		letter-spacing: -0.32px;
	}

	.fpp-price {
		display: flex;
		align-items: baseline;
		gap: 10px;
		margin: 16px 0 0;
	}

	.fpp-amount {
		font: 700 50px/60px var(--fpp-display);
		letter-spacing: -1px;
	}

	.fpp-period {
		font: 400 16px/25.6px var(--fpp-body);
		letter-spacing: -0.32px;
	}

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

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

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

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

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

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

	.fpp-list {
		display: grid;
		gap: 14px;
		margin: 44px 0 0;
		padding: 0;
		list-style: none;
	}

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

	.fpp-list svg {
		flex: none;
		width: 18px;
		height: 18px;
		color: var(--fpp-accent);
	}

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

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

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

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

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

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

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

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

	@media (min-width: 1200px) {
		.fpp-inner {
			grid-template-columns: 487px minmax(0, 1fr);
			align-items: start;
			padding: 100px 65px;
		}

		.fpp-side {
			align-self: stretch;
		}

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

		.fpp-media {
			margin-top: auto;
		}
	}

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

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

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

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

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

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

===== END src/components/FreightPricingPlans.astro =====

===== FILE (supporting): src/components/FreightPricingPlans.md =====
# Freight pricing plans

A pale pricing band: eyebrow, a big uppercase heading and a photo on the
left; plan cards on the right, each with an orange asterisk, an optional
outlined badge, the name, a pitch, a big price with its period, a full-width
orange pill and a checklist.

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

## Files required

- **`FreightPricingPlans.astro`** — the component, with one small appear script.
- **`public/freight-pricing-plans/forklift.webp`** — the catalog demo's photo (passed as `image`; not a default).
- `FreightPricingPlans.md` — this file.

## Props

| Prop | Type | Default | What it does |
| :--- | :--- | :--- | :--- |
| `eyebrow` | `string?` | `"Pricing"` | Generic label; never renders the component on its own. |
| `heading`, `headingLevel` | | `""`, `"h2"` | Orange words in `*asterisks*`. No heading → no `<h2>`. |
| `image` | `{ src?, alt? } \| null` | none | Drawn only when passed; `src: ""` draws a neutral "Image placeholder". |
| `plans` | `{ name, pitch?, price, period?, badge?, cta?, features }[]` | `[]` | Your plans and prices — never defaulted. A plan without `name` or `price` is dropped; a `cta` needs `label` and `href`. No plans → the component renders nothing. |
| `background` | `string?` | `#f0f8fa` | |
| `fontStylesheet`, `class`, `id` | | | |

## Behaviour (measured)

- **Select Plan hover:** `#ff6d45` → `#052931`, arrow rotates −45°.
- Cards rise from 80px, staggered; heading words rise from 10px.

## Images and credits

| File | Size | Credit |
| :--- | :--- | :--- |
| `forklift.webp` | 748 × 580 | Unsplash uXc4PvF53fE, Unsplash License |

## Approximations

- The reference uses a cut-out PNG of a forklift lifting a red container with
  no background. No free cut-out was available, so this is a rounded photo of
  the same subject.

===== END src/components/FreightPricingPlans.md =====

===== FILE (required): public/freight-pricing-plans/forklift.webp =====
[binary asset — download https://astro.baysixmedia.com/freight-pricing-plans/forklift.webp and save it to public/freight-pricing-plans/forklift.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.

“Freight pricing plans” from my Astro Component Library:
https://astro.baysixmedia.com/components/freight-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.