Dark contact panel

Install kit: "Dark contact panel"
Library page: https://astro.baysixmedia.com/components/dark-contact-panel/
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/DarkContactPanel.astro =====
---
/**
 * DarkContactPanel
 *
 * A navy contact section: a tall photo beside a translucent panel holding an
 * outlined eyebrow, a big uppercase heading with orange words and a real
 * contact form (name and phone side by side, email, message, a full-width
 * send button). Underneath, an optional row of info cards: round orange
 * icon, a title and a few lines each (address, phone numbers, opening hours).
 *
 * Nothing about the business is assumed: no heading, photo or info card is
 * shown unless it is passed. With none of them the form still renders under
 * the generic eyebrow.
 *
 * The form posts to `action`. The send button dims until the required fields
 * are valid but is never disabled, so the browser's own validation messages
 * still explain what is missing.
 *
 * Heading syntax: wrap the orange words in asterisks.
 *
 * Reads the --tw-* tokens from any ancestor, with fallbacks.
 */

export type ContactInfoIcon = "pin" | "headset" | "clock" | "mail" | "phone";

export interface ContactInfoCard {
	title: string;
	lines: string[];
	icon?: ContactInfoIcon;
	/** Makes the lines one link, e.g. tel: or a map URL. */
	href?: string;
}

export interface DarkContactPanelProps {
	eyebrow?: string;
	heading?: string;
	headingLevel?: "h2" | "h3";
	action?: string;
	submitLabel?: string;
	/** Unset or `null`: none, and the panel spans the row. `src: ""` renders a labelled placeholder. */
	image?: { src?: string; alt?: string } | null;
	info?: ContactInfoCard[];
	background?: string;
	fontStylesheet?: string;
	class?: string;
	id?: string;
}

interface Props extends DarkContactPanelProps {}

const {
	eyebrow = "Contact Request",
	heading = "",
	headingLevel = "h2",
	action = "/contact",
	submitLabel = "Send Message",
	image: imageProp,
	info = [],
	background = "#0b4654",
	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 photo unless one is passed; a passed photo is taken as given, alt "" (decorative) if unset. */
const image = imageProp ? { src: imageProp.src ?? "", alt: imageProp.alt ?? "" } : null;

const seed = `${id ?? "dcp"}-${Math.random().toString(36).slice(2, 7)}`;
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() : "#");

const ICONS: Record<ContactInfoIcon, string> = {
	pin: "M12 21s-7-6.2-7-12a7 7 0 0 1 14 0c0 5.8-7 12-7 12Z M12 11.5a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5Z",
	headset: "M4 14v-2a8 8 0 0 1 16 0v2 M4 14h3v5H5a1 1 0 0 1-1-1Z M20 14h-3v5h2a1 1 0 0 0 1-1Z M17 19c0 1.5-2 2-5 2",
	clock: "M12 21a9 9 0 1 0 0-18 9 9 0 0 0 0 18Z M12 7v5l3 2",
	mail: "M3 6h18v12H3Z M3 7l9 6 9-6",
	phone: "M5 4h4l2 5-2.5 1.5a11 11 0 0 0 5 5L15 13l5 2v4a2 2 0 0 1-2 2A16 16 0 0 1 3 6a2 2 0 0 1 2-2Z",
};
---

{fontStylesheet && <link rel="stylesheet" href={fontStylesheet} />}
<section class:list={["dcp", className]} id={id} style={`--dcp-band:${background}`} data-dcp-root>
	<div class="dcp-inner">
		<div class:list={["dcp-row", { "dcp-row--solo": !image }]}>
			{
				image && (
					<div class="dcp-media" data-dcp-reveal="up">
						{image.src ? (
							<img src={image.src} alt={image.alt} width="900" height="1160" loading="lazy" decoding="async" />
						) : (
							<div class="dcp-ph" role="img" aria-label="Image placeholder: portrait">
								<span>Image · portrait · 900 × 1160</span>
							</div>
						)}
					</div>
				)
			}

			<div class="dcp-panel" data-dcp-reveal="up" style="--d:0.1s">
				{eyebrow && <p class="dcp-eyebrow">{eyebrow}</p>}
				{words.length > 0 && (
				<Heading class="dcp-heading" data-dcp-reveal="words">
					{
						words.map((t, i) => (
							<>
								{i > 0 && " "}
								<span class:list={["dcp-w", { "dcp-accent": t.accent }]} style={`--i:${i}`}>
									{t.w}
								</span>
							</>
						))
					}
				</Heading>
				)}

				<form class="dcp-form" action={safeHref(action)} method="post">
					<div class="dcp-field">
						<label for={`${seed}-name`}>Name</label>
						<input id={`${seed}-name`} name="name" type="text" autocomplete="name" required placeholder="Jane Smith" />
					</div>
					<div class="dcp-field">
						<label for={`${seed}-phone`}>Phone</label>
						<input id={`${seed}-phone`} name="phone" type="tel" autocomplete="tel" placeholder="(555) 000-0000" />
					</div>
					<div class="dcp-field dcp-field--wide">
						<label for={`${seed}-email`}>Email</label>
						<input id={`${seed}-email`} name="email" type="email" autocomplete="email" required placeholder="jane@company.com" />
					</div>
					<div class="dcp-field dcp-field--wide">
						<label for={`${seed}-message`}>Message</label>
						<textarea id={`${seed}-message`} name="message" rows="4" required placeholder="Tell us about your shipment…"></textarea>
					</div>
					<button class="dcp-submit dcp-field--wide" type="submit">{submitLabel}</button>
				</form>
			</div>
		</div>

		{
			info.length > 0 && (
				<ul class="dcp-info">
					{info.map((c, i) => (
						<li class="dcp-card" data-dcp-reveal="up" style={`--d:${i * 0.1}s`}>
							<span class="dcp-ic" aria-hidden="true">
								<svg viewBox="0 0 24 24">
									<path d={ICONS[c.icon ?? "pin"]} fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" />
								</svg>
							</span>
							<div>
								<Title class="dcp-card-title">{c.title}</Title>
								{c.href ? (
									<a class="dcp-lines" href={safeHref(c.href)}>
										{c.lines.map((l) => (
											<span>{l}</span>
										))}
									</a>
								) : (
									<p class="dcp-lines">
										{c.lines.map((l) => (
											<span>{l}</span>
										))}
									</p>
								)}
							</div>
						</li>
					))}
				</ul>
			)
		}
	</div>
</section>

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

		background: var(--dcp-band);
		color: #fff;
		font-family: var(--dcp-body);
	}

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

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

	.dcp-row {
		display: grid;
		gap: 24px;
	}

	.dcp-media {
		aspect-ratio: 4 / 3;
		overflow: hidden;
		border-radius: 20px;
	}

	.dcp-media img,
	.dcp-ph {
		display: block;
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

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

	.dcp-panel {
		padding: 28px 20px;
		border-radius: 15px;
		background: rgb(255 255 255 / 0.1);
	}

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

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

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

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

	.dcp-form {
		display: grid;
		gap: 18px 10px;
		margin-top: 30px;
	}

	.dcp-field {
		display: grid;
		gap: 8px;
	}

	.dcp-field label {
		font: 600 14px/22.4px var(--dcp-body);
		letter-spacing: -0.28px;
		text-transform: uppercase;
	}

	.dcp-field input,
	.dcp-field textarea {
		width: 100%;
		min-height: 50px;
		padding: 12px 10px;
		border: 1px solid rgb(255 255 255 / 0.18);
		border-radius: 10px;
		background: rgb(255 255 255 / 0.1);
		color: #fff;
		font: 400 15px/1.4 var(--dcp-body);
		transition: border-color 0.3s var(--dcp-ease);
	}

	.dcp-field textarea {
		min-height: 100px;
		resize: vertical;
	}

	.dcp-field input::placeholder,
	.dcp-field textarea::placeholder {
		color: rgb(255 255 255 / 0.6);
	}

	.dcp-field input:focus-visible,
	.dcp-field textarea:focus-visible {
		outline: 2px solid var(--dcp-accent);
		outline-offset: 1px;
		border-color: transparent;
	}

	.dcp-submit {
		height: 50px;
		margin-top: 4px;
		border: 0;
		border-radius: 25px;
		background: var(--dcp-accent);
		color: #fff;
		font: 400 16px/25.6px var(--dcp-body);
		letter-spacing: -0.32px;
		cursor: pointer;
		transition:
			background-color 0.3s var(--dcp-ease),
			opacity 0.3s var(--dcp-ease);
	}

	/* Dimmed, not disabled, until the required fields are valid. */
	.dcp-form:has(:invalid) .dcp-submit {
		background: #3f646f;
		opacity: 0.6;
	}

	.dcp-submit:hover {
		background: #052931;
		opacity: 1;
	}

	.dcp-submit:focus-visible {
		outline: 2px solid #fff;
		outline-offset: 3px;
	}

	.dcp-info {
		display: grid;
		gap: 16px;
		margin: 40px 0 0;
		padding: 0;
		list-style: none;
	}

	.dcp-card {
		display: flex;
		gap: 15px;
		padding: 22px;
		border-radius: 10px;
		background: var(--dcp-navy-2);
	}

	.dcp-ic {
		display: grid;
		flex: none;
		place-items: center;
		width: 45px;
		height: 45px;
		border-radius: 50%;
		background: var(--dcp-accent);
		color: #fff;
	}

	.dcp-ic svg {
		width: 22px;
		height: 22px;
	}

	.dcp-card-title {
		margin: 0;
		font: 600 20px/32px var(--dcp-body);
		letter-spacing: -0.4px;
	}

	.dcp-lines {
		display: grid;
		margin: 4px 0 0;
		color: #fff;
		font: 400 16px/25.6px var(--dcp-body);
		letter-spacing: -0.32px;
		text-decoration: none;
		transition: color 0.3s var(--dcp-ease);
	}

	a.dcp-lines:hover {
		color: var(--dcp-accent);
	}

	a.dcp-lines:focus-visible {
		outline: 2px solid var(--dcp-accent);
		outline-offset: 3px;
		border-radius: 4px;
	}

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

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

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

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

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

		.dcp-field--wide {
			grid-column: 1 / -1;
		}
	}

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

		.dcp-panel {
			padding: 40px;
		}

		.dcp-heading {
			font-size: 40px;
			letter-spacing: -0.8px;
		}

		.dcp-info {
			grid-template-columns: repeat(3, minmax(0, 1fr));
		}

		.dcp-card {
			padding: 25px;
		}
	}

	@media (min-width: 1200px) {
		.dcp-inner {
			padding: 100px 65px 110px;
		}

		.dcp-row {
			grid-template-columns: 590px minmax(0, 1fr);
			gap: 50px;
		}

		.dcp-row--solo {
			grid-template-columns: minmax(0, 1fr);
		}

		.dcp-media {
			aspect-ratio: auto;
			min-height: 761px;
		}

		.dcp-panel {
			padding: 30px 30px 30px 30px;
		}

		.dcp-panel .dcp-heading,
		.dcp-panel .dcp-eyebrow,
		.dcp-panel .dcp-form {
			margin-left: 15px;
			margin-right: 15px;
		}

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

		.dcp-eyebrow {
			margin-top: 12px;
		}

		.dcp-info {
			gap: 20px;
			margin-top: 67px;
		}
	}

	@media (prefers-reduced-motion: reduce) {
		[data-dcp-reveal="up"],
		.dcp-w,
		.dcp-submit,
		.dcp-lines,
		.dcp-field input,
		.dcp-field textarea {
			transition: none;
		}
	}
</style>

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

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

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

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

===== END src/components/DarkContactPanel.astro =====

===== FILE (supporting): src/components/DarkContactPanel.md =====
# Dark contact panel

A navy contact section: a tall photo beside a translucent panel with an
outlined eyebrow, a big uppercase heading and a real contact form (name and
phone side by side, email, message, a full-width send button). Underneath,
info cards for address, phone numbers and opening hours.

Nothing about the business is assumed. No heading, photo, address, phone
number or opening hours renders unless you pass it; with no props you get the
generic "Contact Request" eyebrow over the form, and the panel spans the row.
The catalog demo passes its heading, photo and info cards as props.

Catalog page: `/components/dark-contact-panel`

## Files required

- **`DarkContactPanel.astro`** — the component, with one small appear script.
- **`public/dark-contact-panel/aerial-ship.webp`** — the catalog demo's photo. Only needed if you pass it.
- `DarkContactPanel.md` — this file.

## Props

| Prop | Type | Default | What it does |
| :--- | :--- | :--- | :--- |
| `eyebrow` | `string?` | `"Contact Request"` | Generic label. `""` hides it. |
| `heading` | `string?` | none | Orange words in `*asterisks*`. Unset: no heading. |
| `headingLevel` | `"h2" \| "h3"` | `"h2"` | |
| `action` | `string?` | `"/contact"` | Form POST target. |
| `submitLabel` | `string?` | `"Send Message"` | |
| `image` | `{ src?, alt? } \| null` | none | Unset or `null` → the panel spans the row. `src: ""` → labelled placeholder. `alt` defaults to `""` (decorative). |
| `info` | `{ title, lines, icon?, href? }[]` | `[]` | Real contact facts only. `icon`: pin, headset, clock, mail, phone. `href` makes the lines one link. Empty: no cards. |
| `background` | `string?` | `#0b4654` | |
| `fontStylesheet`, `class`, `id` | | | |

## Form

Fields: `name` (required), `phone`, `email` (required), `message`
(required). Labels are real `<label for>`; ids are seeded per instance. The
send button dims while a required field is invalid (the reference shows it
dimmed) but is never disabled. Nothing is sent client-side — wire `action` to
your handler.

## Behaviour (measured)

- Photo, panel and info cards rise from 80px on first view; heading words
  rise from 10px.
- Send hover: → `#052931`. Info links: white → orange.

## Images and credits

| File | Size | Credit |
| :--- | :--- | :--- |
| `aerial-ship.webp` (demo only) | 900 × 1160 | Unsplash 0A7YwYhZhWw, Unsplash License |

## Approximations

- The reference's disabled send state is `#3f646f` at 50%; here it is the same
  colour at 60% and turns orange once the form is valid.
- The reference labels its phone field "Number"; this uses "Phone".

===== END src/components/DarkContactPanel.md =====

===== FILE (required): public/dark-contact-panel/aerial-ship.webp =====
[binary asset — download https://astro.baysixmedia.com/dark-contact-panel/aerial-ship.webp and save it to public/dark-contact-panel/aerial-ship.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.

“Dark contact panel” from my Astro Component Library:
https://astro.baysixmedia.com/components/dark-contact-panel/

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.