Team reveal cards

Install kit: "Team reveal cards"
Library page: https://astro.baysixmedia.com/components/team-reveal-cards/
Files: 5 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/TeamRevealCards.astro =====
---
/**
 * TeamRevealCards
 *
 * A team section: outlined eyebrow, big uppercase heading and an orange pill
 * across the top over a hairline, then four pale cards. Each card has a
 * portrait on a tinted panel with chamfered top corners, a name and an orange
 * role. Hovering a card (or focusing into it) slides a row of round social
 * links up over the foot of the portrait; on touch screens the row is always
 * shown.
 *
 * 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 type TeamSocial = "linkedin" | "x" | "email" | "facebook" | "instagram";

export interface TeamMember {
	name: string;
	role: string;
	/** `src: ""` renders initials. */
	photo?: { src?: string; alt?: string };
	/** Panel behind the portrait. */
	tint?: string;
	social?: { network: TeamSocial; href: string }[];
}

export interface TeamRevealCardsProps {
	eyebrow?: string;
	heading?: string;
	headingLevel?: "h2" | "h3";
	cta?: { label: string; href: string } | null;
	members?: TeamMember[];
	background?: string;
	fontStylesheet?: string;
	class?: string;
	id?: string;
}

interface Props extends TeamRevealCardsProps {}

/* No built-in people, links or CTA route: everything shown comes from the caller. */
const {
	eyebrow = "Our Team",
	heading = "",
	headingLevel = "h2",
	cta = null,
	members = [],
	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;

const words = heading
	.split("*")
	.flatMap((seg, i) => seg.split(/\s+/).filter(Boolean).map((w) => ({ w, accent: i % 2 === 1 })));
const Heading = headingLevel;
const Name = headingLevel === "h2" ? "h3" : "h4";
const SAFE = /^(?:https?:|mailto:|tel:|[#/.?])/i;
const safeHref = (href: string) => (SAFE.test(href.trim()) ? href.trim() : "#");
const initials = (name: string) =>
	name
		.split(/\s+/)
		.map((p) => p[0])
		.join("")
		.slice(0, 2)
		.toUpperCase();

const GLYPHS: Record<TeamSocial, { label: string; path: string }> = {
	linkedin: { label: "LinkedIn", path: "M5 9v10 M5 5v.01 M10 19v-6a3 3 0 0 1 6 0v6 M10 9v10" },
	x: { label: "X", path: "M5 4h4l10 16h-4Z M19 4l-6 7 M5 20l6-7" },
	email: { label: "Email", path: "M3 6h18v12H3Z M3 7l9 6 9-6" },
	facebook: { label: "Facebook", path: "M14 8h3V4h-3a4 4 0 0 0-4 4v2H8v4h2v6h4v-6h3l1-4h-4V8Z" },
	instagram: { label: "Instagram", path: "M8 4h8a4 4 0 0 1 4 4v8a4 4 0 0 1-4 4H8a4 4 0 0 1-4-4V8a4 4 0 0 1 4-4Z M12 15.5a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7Z" },
};
---

{members.length > 0 && fontStylesheet && <link rel="stylesheet" href={fontStylesheet} />}
{members.length > 0 && (
<section class:list={["trc", className]} id={id} style={`--trc-band:${background}`} data-trc-root>
	<div class="trc-inner">
		{(eyebrow || words.length > 0 || cta) && (
		<div class="trc-head">
			{eyebrow && <p class="trc-eyebrow">{eyebrow}</p>}
			{words.length > 0 && (
			<Heading class="trc-heading" data-trc-reveal="words">
				{
					words.map((t, i) => (
						<>
							{i > 0 && " "}
							<span class:list={["trc-w", { "trc-accent": t.accent }]} style={`--i:${i}`}>
								{t.w}
							</span>
						</>
					))
				}
			</Heading>
			)}
			{
				cta && (
					<a class="trc-btn" href={safeHref(cta.href)}>
						<span>{cta.label}</span>
						<span class="trc-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>
				)
			}
		</div>
		)}

		<ul class="trc-grid">
			{
				members.map((m, i) => (
					<li class="trc-card" data-trc-reveal="up" style={`--d:${i * 0.1}s;--tint:${m.tint ?? "#e3eef1"}`}>
						<div class="trc-photo">
							{m.photo?.src ? (
								<img src={m.photo.src} alt={m.photo.alt ?? ""} width="570" height="496" loading="lazy" decoding="async" />
							) : (
								<span class="trc-initials" aria-hidden="true">
									{initials(m.name)}
								</span>
							)}
							{m.social && m.social.length > 0 && (
								<ul class="trc-social">
									{m.social.map((s) => (
										<li>
											<a href={safeHref(s.href)} rel="noopener" aria-label={`${m.name} on ${GLYPHS[s.network].label}`}>
												<svg viewBox="0 0 24 24" aria-hidden="true">
													<path d={GLYPHS[s.network].path} fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" />
												</svg>
											</a>
										</li>
									))}
								</ul>
							)}
						</div>
						<Name class="trc-name">{m.name}</Name>
						<p class="trc-role">{m.role}</p>
					</li>
				))
			}
		</ul>
	</div>
</section>
)}

<style>
	.trc {
		--trc-navy: var(--tw-navy, #0b4654);
		--trc-deep: var(--tw-navy-deep, #052931);
		--trc-accent: var(--tw-accent, #ff6d45);
		--trc-surface: var(--tw-surface, #f0f8fa);
		--trc-display: var(--tw-display, Outfit, ui-sans-serif, system-ui, sans-serif);
		--trc-body: var(--tw-body, "Noto Sans", ui-sans-serif, system-ui, sans-serif);
		--trc-ease: cubic-bezier(0.44, 0, 0.56, 1);
		--trc-cut: 34px;

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

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

	.trc-inner {
		max-width: 1440px;
		margin: 0 auto;
		padding: 64px 16px;
	}

	.trc-head {
		display: grid;
		gap: 18px;
		justify-items: start;
		padding-bottom: 40px;
		border-bottom: 1px solid rgb(11 70 84 / 0.1);
	}

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

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

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

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

	.trc-btn {
		display: inline-flex;
		align-items: center;
		gap: 12px;
		height: 50px;
		padding: 0 8px 0 25px;
		border-radius: 999px;
		background: var(--trc-accent);
		color: #fff;
		font: 400 16px/25.6px var(--trc-body);
		letter-spacing: -0.32px;
		text-decoration: none;
		white-space: nowrap;
		transition: background-color 0.3s var(--trc-ease);
	}

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

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

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

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

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

	.trc-grid {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		gap: 20px;
		margin: 40px 0 0;
		padding: 0;
		list-style: none;
	}

	.trc-card {
		padding: 15px 15px 22px;
		border-radius: 15px;
		background: var(--trc-surface);
	}

	.trc-photo {
		position: relative;
		display: grid;
		place-items: center;
		aspect-ratio: 285 / 248;
		overflow: hidden;
		border-radius: 15px;
		background: var(--tint);
		clip-path: polygon(var(--trc-cut) 0, calc(100% - var(--trc-cut)) 0, 100% var(--trc-cut), 100% 100%, 0 100%, 0 var(--trc-cut));
	}

	.trc-photo img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		mix-blend-mode: multiply;
	}

	.trc-initials {
		font: 700 48px/1 var(--trc-display);
		color: var(--trc-navy);
	}

	.trc-social {
		position: absolute;
		left: 0;
		right: 0;
		bottom: 12px;
		display: flex;
		justify-content: center;
		gap: 10px;
		margin: 0;
		padding: 0;
		list-style: none;
		transition:
			opacity 0.35s var(--trc-ease),
			transform 0.35s var(--trc-ease);
	}

	.trc-social a {
		display: grid;
		place-items: center;
		width: 36px;
		height: 36px;
		border-radius: 50%;
		background: #fff;
		color: var(--trc-navy);
		transition:
			background-color 0.3s var(--trc-ease),
			color 0.3s var(--trc-ease);
	}

	.trc-social a:hover {
		background: var(--trc-accent);
		color: #fff;
	}

	.trc-social svg {
		width: 17px;
		height: 17px;
	}

	/* Hidden until hover or focus, only where a pointer can hover. */
	@media (hover: hover) {
		.trc-card:not(:hover):not(:focus-within) .trc-social {
			opacity: 0;
			transform: translateY(14px);
		}
	}

	.trc-name {
		margin: 20px 0 0;
		padding: 0 14px;
		font: 600 20px/32px var(--trc-body);
		letter-spacing: -0.4px;
	}

	.trc-role {
		margin: 0;
		padding: 0 14px;
		color: var(--trc-accent);
		font: 600 14px/22.4px var(--trc-body);
		letter-spacing: -0.28px;
		text-transform: uppercase;
	}

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

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

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

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

	@media (min-width: 540px) {
		.trc-grid {
			grid-template-columns: repeat(2, minmax(0, 1fr));
		}
	}

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

		.trc-head {
			grid-template-columns: auto minmax(0, 1fr) auto;
			align-items: center;
			column-gap: 40px;
		}

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

	@media (min-width: 1200px) {
		.trc-inner {
			padding: 100px 60px;
		}

		.trc-head {
			grid-template-columns: 330px minmax(0, 1fr) auto;
			column-gap: 0;
			padding-bottom: 55px;
		}

		.trc-eyebrow {
			margin-left: 0;
			justify-self: start;
		}

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

		.trc-grid {
			grid-template-columns: repeat(4, minmax(0, 1fr));
			margin-top: 65px;
		}
	}

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

		.trc-card:not(:hover):not(:focus-within) .trc-social {
			transform: none;
		}

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

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

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

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

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

===== END src/components/TeamRevealCards.astro =====

===== FILE (supporting): src/components/TeamRevealCards.md =====
# Team reveal cards

A team section: outlined eyebrow, big uppercase heading and an orange pill
across the top over a hairline, then pale cards with a portrait on a tinted
panel (both top corners chamfered), a name and an orange role. Hovering or
focusing into a card slides a row of round social links up over the foot of
the portrait.

Catalog page: `/components/team-reveal-cards`

## Files required

- **`TeamRevealCards.astro`** — the component, with one small appear script.
- **`public/team-reveal-cards/member-1.webp` … `member-4.webp`** — the
  catalog demo's portraits; only needed if you pass them.
- `TeamRevealCards.md` — this file.

## Props

| Prop | Type | Default | What it does |
| :--- | :--- | :--- | :--- |
| `eyebrow` | `string?` | `"Our Team"` | `""` drops it. |
| `heading`, `headingLevel` | | `""`, `"h2"` | Orange words in `*asterisks*`. Omitted when empty. |
| `cta` | `{ label, href } \| null` | `null` | No button unless you pass one. |
| `members` | `{ name, role, photo?, tint?, social? }[]` | `[]` | `social: { network, href }[]`, network: linkedin, x, email, facebook, instagram. No photo → initials. No members → the component renders nothing. |
| `background` | `string?` | `#ffffff` | |
| `fontStylesheet`, `class`, `id` | | | |

## Behaviour (measured)

- **Card hover:** the social row goes from opacity 0 and a small offset to
  rest (the reference slides it in from the side; this rises 14px), 0.35s.
- **Social button hover:** white → `#ff6d45`, glyph navy → white.
- **Pill hover:** `#ff6d45` → `#052931`, arrow rotates −45°.
- Cards rise from 80px, staggered; heading words from 10px.

## Accessibility

The row is hidden only where the device can hover, and `:focus-within`
reveals it, so a keyboard user always sees the link they are on. Touch screens
show it permanently. Each link is named "<person> on <network>".

## Content

The component carries no people, profile links, email addresses or CTA
route of its own. The catalog preview passes a fictional demo team through
its registry props.

## Images and credits

| File | Size | Credit |
| :--- | :--- | :--- |
| `member-1.webp` | 570 × 496 | Unsplash QeF6ifnTpww, Unsplash License |
| `member-2.webp` | 570 × 496 | Unsplash xhQUcSQpotU, Unsplash License |
| `member-3.webp` | 570 × 496 | Unsplash x27-edtdfio, Unsplash License |
| `member-4.webp` | 570 × 496 | Unsplash SNvrVyUYyK0, Unsplash License |

## Approximations

The reference uses studio cut-outs on flat tints. Stock portraits have their
own backgrounds, so they are multiplied over the tint to keep the four cards
in one palette.

===== END src/components/TeamRevealCards.md =====

===== FILE (required): public/team-reveal-cards/member-1.webp =====
[binary asset — download https://astro.baysixmedia.com/team-reveal-cards/member-1.webp and save it to public/team-reveal-cards/member-1.webp]

===== FILE (required): public/team-reveal-cards/member-2.webp =====
[binary asset — download https://astro.baysixmedia.com/team-reveal-cards/member-2.webp and save it to public/team-reveal-cards/member-2.webp]

===== FILE (required): public/team-reveal-cards/member-3.webp =====
[binary asset — download https://astro.baysixmedia.com/team-reveal-cards/member-3.webp and save it to public/team-reveal-cards/member-3.webp]

===== FILE (required): public/team-reveal-cards/member-4.webp =====
[binary asset — download https://astro.baysixmedia.com/team-reveal-cards/member-4.webp and save it to public/team-reveal-cards/member-4.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.

“Team reveal cards” from my Astro Component Library:
https://astro.baysixmedia.com/components/team-reveal-cards/

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.