@publier/shell 2.1.1

package/src/components/ui/feature-section.astro

@@ -0,0 +1,85 @@
+---
+interface Props {
+	eyebrow?: string;
+	title: string;
+	subtitle?: string;
+	bullets?: string[];
+	primaryCta?: { label: string; href: string };
+	reverse?: boolean;
+	class?: string;
+}
+
+const {
+	eyebrow,
+	title,
+	subtitle,
+	bullets,
+	primaryCta,
+	reverse = false,
+	class: cls,
+} = Astro.props;
+
+const items = Array.isArray(bullets) ? bullets : [];
+const hasBullets = items.length > 0;
+const visualOrder = reverse ? 'md:order-first' : '';
+---
+
+<section class={`py-14 md:py-20 ${cls ?? ''}`}>
+	<div class="max-w-6xl mx-auto px-6 grid gap-10 md:grid-cols-2 md:items-center">
+		<div>
+			{eyebrow && (
+				<span class="badge badge-outline badge-primary">{eyebrow}</span>
+			)}
+			<h2 class="text-3xl md:text-4xl font-bold text-base-content">{title}</h2>
+			{subtitle && <p class="mt-3 text-lg text-base-content/70">{subtitle}</p>}
+			{hasBullets && (
+				<ul class="mt-6 space-y-2">
+					{items.map((bullet) => (
+						<li class="flex items-start gap-2 text-base-content">
+							<svg
+								class="text-primary shrink-0 mt-1"
+								width="16"
+								height="16"
+								viewBox="0 0 16 16"
+								fill="none"
+								stroke="currentColor"
+								stroke-width="2"
+								aria-hidden="true"
+							>
+								<path d="M3 8.5l3 3 7-7" />
+							</svg>
+							<span>{bullet}</span>
+						</li>
+					))}
+				</ul>
+			)}
+			{primaryCta && (
+				<a class="link link-primary inline-flex items-center gap-2 group mt-6" href={primaryCta.href}>
+					<span>{primaryCta.label}</span>
+					<svg
+						class="transition-transform group-hover:translate-x-1"
+						width="16"
+						height="16"
+						viewBox="0 0 16 16"
+						fill="none"
+						stroke="currentColor"
+						stroke-width="2"
+						aria-hidden="true"
+					>
+						<path d="M3 8h10m-4-4 4 4-4 4" />
+					</svg>
+				</a>
+			)}
+		</div>
+		<div
+			class:list={[
+				'card bg-base-200 border border-base-300',
+				visualOrder,
+			]}
+		>
+			<div class="card-body flex items-center justify-center">
+				<slot />
+			</div>
+		</div>
+	</div>
+</section>

package/src/components/ui/frame.astro

@@ -0,0 +1,52 @@
+---
+interface Props {
+	caption?: string;
+	hint?: string;
+	video?: boolean;
+	src?: string;
+	autoPlay?: boolean;
+	loop?: boolean;
+	muted?: boolean;
+	poster?: string;
+}
+
+const {
+	caption,
+	hint,
+	video = false,
+	src,
+	autoPlay = false,
+	loop = false,
+	muted,
+	poster,
+} = Astro.props;
+
+const resolvedMuted = muted !== undefined ? muted : Boolean(autoPlay);
+const renderVideo = video && src;
+const hasCaption = Boolean(caption) || Boolean(hint);
+---
+
+<figure class="mockup-window bg-base-200 border border-base-300 my-6">
+	<div class="bg-base-100 p-0 overflow-hidden rounded-b-box">
+		{renderVideo ? (
+			<video
+				class="w-full h-auto block"
+				src={src}
+				autoplay={autoPlay}
+				loop={loop}
+				muted={resolvedMuted}
+				poster={poster}
+				controls={!autoPlay}
+				playsinline
+			/>
+		) : (
+			<slot />
+		)}
+	</div>
+	{hasCaption && (
+		<figcaption class="flex flex-wrap items-baseline gap-2 px-4 py-2 text-sm text-base-content/70 border-t border-base-300">
+			{caption && <span>{caption}</span>}
+			{hint && <span class="text-xs text-base-content/50 italic">{hint}</span>}
+		</figcaption>
+	)}
+</figure>

package/src/components/ui/hero.astro

@@ -0,0 +1,47 @@
+---
+export type HeroAlign = 'center' | 'left';
+
+interface Props {
+	eyebrow?: string;
+	title: string;
+	subtitle?: string;
+	primaryCta?: { label: string; href: string };
+	secondaryCta?: { label: string; href: string };
+	align?: HeroAlign;
+}
+
+const { eyebrow, title, subtitle, primaryCta, secondaryCta, align = 'center' } = Astro.props;
+
+const alignCls = align === 'center' ? 'text-center items-center' : 'text-left items-start';
+const ctasCls = align === 'center' ? 'justify-center' : 'justify-start';
+---
+
+<section class="hero py-16 md:py-24">
+	<div class={`hero-content max-w-4xl mx-auto flex-col px-6 ${alignCls}`}>
+		{eyebrow && (
+			<div class="badge badge-outline badge-primary mb-3">{eyebrow}</div>
+		)}
+		<h1 class="text-4xl md:text-5xl lg:text-6xl font-bold text-base-content">{title}</h1>
+		{subtitle && (
+			<p class="mt-4 text-lg md:text-xl text-base-content/70 max-w-2xl">{subtitle}</p>
+		)}
+		{(primaryCta || secondaryCta) && (
+			<div class={`mt-8 flex flex-wrap gap-3 ${ctasCls}`}>
+				{primaryCta && (
+					<a class="btn btn-primary" href={primaryCta.href}>
+						{primaryCta.label}
+					</a>
+				)}
+				{secondaryCta && (
+					<a
+						class="btn btn-outline"
+						href={secondaryCta.href}
+					>
+						{secondaryCta.label}
+					</a>
+				)}
+			</div>
+		)}
+		<slot />
+	</div>
+</section>

package/src/components/ui/jobs-list.astro

@@ -0,0 +1,53 @@
+---
+interface Item {
+	title: string;
+	department: string;
+	location: string;
+	type?: string;
+	href: string;
+}
+
+interface Props {
+	jobs: Item[];
+	heading?: string;
+	emptyMessage?: string;
+}
+
+const { jobs, heading, emptyMessage = "We're not hiring right now." } = Astro.props;
+
+const groups: Record<string, Item[]> = {};
+const departmentOrder: string[] = [];
+for (const job of jobs) {
+	if (!groups[job.department]) {
+		groups[job.department] = [];
+		departmentOrder.push(job.department);
+	}
+	groups[job.department]?.push(job);
+}
+const isEmpty = jobs.length === 0;
+---
+
+<section>
+	{heading && <h2 class="text-2xl md:text-3xl font-bold text-base-content mb-6">{heading}</h2>}
+	{isEmpty ? (
+		<p class="text-base-content/60 italic">{emptyMessage}</p>
+	) : (
+		departmentOrder.map((dept) => (
+			<div class="mb-8">
+				<h3 class="text-xs uppercase tracking-wider text-base-content/60 mb-2">{dept}</h3>
+				<ul class="menu menu-compact bg-base-100 border border-base-300 rounded-box">
+					{groups[dept]?.map((job) => (
+						<li>
+							<a href={job.href} class="justify-between">
+								<span class="font-semibold">{job.title}</span>
+								<span class="text-xs text-base-content/60">
+									{job.location}{job.type ? ` · ${job.type}` : ''}
+								</span>
+							</a>
+						</li>
+					))}
+				</ul>
+			</div>
+		))
+	)}
+</section>

package/src/components/ui/logo-cloud.astro

@@ -0,0 +1,68 @@
+---
+interface Item {
+	name: string;
+	src: string;
+	alt?: string;
+	href?: string;
+	width?: number;
+	height?: number;
+}
+
+interface Props {
+	items: Item[];
+	title?: string;
+	subtitle?: string;
+	columns?: 3 | 4 | 5 | 6;
+}
+
+const { items, title, subtitle, columns = 5 } = Astro.props;
+const hasHeader = Boolean(title) || Boolean(subtitle);
+
+const colCls = columns === 3
+	? 'grid-cols-2 md:grid-cols-3'
+	: columns === 4
+		? 'grid-cols-2 md:grid-cols-4'
+		: columns === 6
+			? 'grid-cols-2 md:grid-cols-3 lg:grid-cols-6'
+			: 'grid-cols-2 md:grid-cols-3 lg:grid-cols-5';
+---
+
+<section class="py-12">
+	{hasHeader && (
+		<header class="max-w-2xl mx-auto text-center mb-8 px-6">
+			{title && <h2 class="text-2xl md:text-3xl font-bold text-base-content">{title}</h2>}
+			{subtitle && <p class="mt-2 text-base-content/70">{subtitle}</p>}
+		</header>
+	)}
+	<ul class={`list-none grid gap-8 items-center px-6 max-w-6xl mx-auto ${colCls}`}>
+		{items.map((item) => {
+			const img = (
+				<img
+					class="max-h-10 w-auto mx-auto opacity-70 grayscale hover:opacity-100 hover:grayscale-0 transition"
+					src={item.src}
+					alt={item.alt ?? item.name}
+					width={item.width ?? 144}
+					height={item.height ?? 40}
+					loading="lazy"
+					decoding="async"
+				/>
+			);
+			return (
+				<li class="flex items-center justify-center">
+					{item.href ? (
+						<a
+							class="block"
+							href={item.href}
+							aria-label={item.name}
+							rel={item.href.startsWith('http') ? 'noopener' : undefined}
+						>
+							{img}
+						</a>
+					) : (
+						img
+					)}
+				</li>
+			);
+		})}
+	</ul>
+</section>

package/src/components/ui/press-gallery.astro

@@ -0,0 +1,52 @@
+---
+interface Item {
+	outlet: string;
+	logoUrl?: string;
+	quote?: string;
+	href: string;
+	date?: string;
+}
+
+interface Props {
+	items: Item[];
+}
+
+const { items } = Astro.props;
+---
+
+<ul class="list-none grid gap-4 md:grid-cols-2 lg:grid-cols-3">
+	{items.map((item) => (
+		<li>
+			<a
+				class="card bg-base-100 border border-base-300 hover:shadow-md transition-shadow h-full"
+				href={item.href}
+				target="_blank"
+				rel="noopener noreferrer"
+			>
+				<div class="card-body">
+					{item.logoUrl ? (
+						<img
+							class="max-h-8 w-auto"
+							src={item.logoUrl}
+							alt={`${item.outlet} logo`}
+							width="144"
+							height="32"
+							loading="lazy"
+						/>
+					) : (
+						<span class="font-semibold text-base-content">{item.outlet}</span>
+					)}
+					{item.quote && (
+						<blockquote class="italic text-base-content/80 mt-2">&ldquo;{item.quote}&rdquo;</blockquote>
+					)}
+					<footer class="mt-3 flex items-center justify-between text-sm text-base-content/60">
+						<span>{item.outlet}</span>
+						{item.date && (
+							<time datetime={item.date}>{item.date}</time>
+						)}
+					</footer>
+				</div>
+			</a>
+		</li>
+	))}
+</ul>

package/src/components/ui/pricing-comparison-table.astro

@@ -0,0 +1,73 @@
+---
+type CellValue = boolean | string;
+
+interface Row {
+	feature: string;
+	values: CellValue[];
+}
+
+interface Category {
+	title: string;
+	rows: Row[];
+}
+
+interface Props {
+	tiers: string[];
+	categories: Category[];
+}
+
+const { tiers, categories } = Astro.props;
+---
+
+<div class="max-w-6xl mx-auto px-6 space-y-12 overflow-x-auto">
+	{categories.map((category) => (
+		<table class="table table-zebra w-full min-w-[32rem]">
+			<caption class="text-left text-xs uppercase tracking-wider font-semibold text-primary/70 mb-1 caption-top">{category.title}</caption>
+			<thead>
+				<tr>
+					<th scope="col" class="w-1/3">
+						<span class="sr-only">Feature</span>
+					</th>
+					{tiers.map((tier) => (
+						<th scope="col" class="text-center font-semibold">{tier}</th>
+					))}
+				</tr>
+			</thead>
+			<tbody>
+				{category.rows.map((row) => (
+					<tr>
+						<th scope="row" class="font-normal text-base-content">{row.feature}</th>
+						{row.values.map((value) => (
+							<td class="text-center">
+								{value === true ? (
+									<>
+										<svg
+											class="inline text-primary"
+											width="16"
+											height="16"
+											viewBox="0 0 16 16"
+											fill="none"
+											stroke="currentColor"
+											stroke-width="2"
+											aria-hidden="true"
+										>
+											<path d="M3 8.5l3 3 7-7" />
+										</svg>
+										<span class="sr-only">Included</span>
+									</>
+								) : value === false ? (
+									<>
+										<span aria-hidden="true" class="text-base-content/40">—</span>
+										<span class="sr-only">Not included</span>
+									</>
+								) : (
+									<span class="text-sm text-base-content/80">{value}</span>
+								)}
+							</td>
+						))}
+					</tr>
+				))}
+			</tbody>
+		</table>
+	))}
+</div>

package/src/components/ui/pricing-section.astro

@@ -0,0 +1,113 @@
+---
+import PricingTable from './pricing-table.astro';
+import type { PricingSectionProps } from './types.ts';
+
+const {
+	title,
+	subtitle,
+	monthlyTiers,
+	yearlyTiers,
+	defaultPeriod = 'monthly',
+	yearlyDiscountLabel,
+} = Astro.props as PricingSectionProps;
+
+const hasToggle = Array.isArray(yearlyTiers) && yearlyTiers.length > 0;
+
+const groupId = Math.random().toString(36).slice(2, 9);
+const monthlyId = `publier-pricing-${groupId}-monthly`;
+const yearlyId = `publier-pricing-${groupId}-yearly`;
+---
+
+<section class="pt-4 pb-14 md:pb-20">
+	<div class="max-w-6xl mx-auto px-6">
+		{(title || subtitle) && (
+			<header class="max-w-2xl mx-auto text-center mb-8">
+				{title && <h2 class="text-3xl md:text-4xl font-bold text-base-content">{title}</h2>}
+				{subtitle && <p class="mt-3 text-lg text-base-content/70">{subtitle}</p>}
+			</header>
+		)}
+
+		{hasToggle ? (
+			<div class="publier-pricing-toggle" data-default={defaultPeriod}>
+				<input
+					type="radio"
+					name={`publier-pricing-${groupId}`}
+					id={monthlyId}
+					class="publier-pricing-radio"
+					value="monthly"
+					checked={defaultPeriod === 'monthly'}
+				/>
+				<input
+					type="radio"
+					name={`publier-pricing-${groupId}`}
+					id={yearlyId}
+					class="publier-pricing-radio"
+					value="yearly"
+					checked={defaultPeriod === 'yearly'}
+				/>
+
+				<div class="flex justify-center mb-8" role="radiogroup" aria-label="Billing period">
+					<div class="tabs tabs-box bg-base-200 rounded-full p-1">
+						<label class="tab rounded-full tab-monthly" for={monthlyId}>Monthly</label>
+						<label class="tab rounded-full tab-yearly" for={yearlyId}>
+							Yearly
+							{yearlyDiscountLabel && (
+								<span class="badge badge-success badge-sm ml-2">{yearlyDiscountLabel}</span>
+							)}
+						</label>
+					</div>
+				</div>
+
+				<div class="publier-pricing-panel" data-period="monthly">
+					<PricingTable tiers={monthlyTiers} />
+				</div>
+				<div class="publier-pricing-panel" data-period="yearly">
+					<PricingTable tiers={yearlyTiers!} />
+				</div>
+			</div>
+		) : (
+			<PricingTable tiers={monthlyTiers} />
+		)}
+	</div>
+</section>
+
+<style>
+	/* Hide the raw radio inputs; labels above drive the state. */
+	.publier-pricing-toggle > .publier-pricing-radio {
+		position: absolute;
+		width: 1px;
+		height: 1px;
+		padding: 0;
+		margin: -1px;
+		overflow: hidden;
+		clip: rect(0, 0, 0, 0);
+		white-space: nowrap;
+		border: 0;
+	}
+
+	/* Panel visibility — driven by which radio is checked. */
+	.publier-pricing-toggle .publier-pricing-panel { display: none; }
+
+	/* biome-ignore-start lint: CSS adjacency + attribute selectors. */
+	.publier-pricing-toggle > input[value="monthly"]:checked
+		~ .publier-pricing-panel[data-period="monthly"],
+	.publier-pricing-toggle > input[value="yearly"]:checked
+		~ .publier-pricing-panel[data-period="yearly"] {
+		display: block;
+	}
+
+	/* Active-tab styling — tie `.tab-active` to the matching radio. */
+	.publier-pricing-toggle > input[value="monthly"]:checked ~ * .tab-monthly,
+	.publier-pricing-toggle > input[value="yearly"]:checked ~ * .tab-yearly {
+		/* Applies daisyUI's active-tab treatment in v5 (bg-base-100). */
+		background-color: var(--color-base-100);
+		color: var(--color-base-content);
+		font-weight: 600;
+	}
+
+	/* Keyboard focus ring for the label (covers no-pointer focus). */
+	.publier-pricing-toggle > input:focus-visible ~ * .tab {
+		outline-offset: 2px;
+	}
+	/* biome-ignore-end lint */
+</style>

package/src/components/ui/pricing-table.astro

@@ -0,0 +1,54 @@
+---
+import type { PricingTableProps } from './types.ts';
+
+const { tiers } = Astro.props as PricingTableProps;
+---
+
+<ul class="list-none grid gap-6 md:grid-cols-2 lg:grid-cols-3">
+	{tiers.map((tier) => {
+		const cardCls = tier.featured
+			? 'card bg-base-100 border-2 border-primary shadow-lg relative'
+			: 'card bg-base-100 border border-base-300';
+		const ctaCls = tier.featured ? 'btn btn-primary btn-block' : 'btn btn-outline btn-block';
+		return (
+			<li class={cardCls}>
+				{tier.featured && (
+					<span class="badge badge-success absolute -top-3 left-1/2 -translate-x-1/2">
+						Most popular
+					</span>
+				)}
+				<div class="card-body">
+					<h3 class="text-sm uppercase tracking-wider font-medium text-base-content/70">{tier.name}</h3>
+					<div class="text-3xl font-bold text-base-content">{tier.price}</div>
+					{tier.tagline && <p class="text-sm text-base-content/60">{tier.tagline}</p>}
+					<ul class="list-none space-y-2 mt-3 mb-6">
+						{tier.features.map((feat) => (
+							<li class="flex items-start gap-2 text-sm text-base-content">
+								<svg
+									class="text-primary shrink-0 mt-1"
+									width="16"
+									height="16"
+									viewBox="0 0 16 16"
+									fill="none"
+									stroke="currentColor"
+									stroke-width="2"
+									aria-hidden="true"
+								>
+									<path d="M3 8.5l3 3 7-7" />
+								</svg>
+								<span>{feat}</span>
+							</li>
+						))}
+					</ul>
+					<a
+						class={ctaCls}
+						href={tier.cta.href}
+						aria-label={tier.featured ? `${tier.cta.label} — ${tier.name} (recommended)` : tier.cta.label}
+					>
+						{tier.cta.label}
+					</a>
+				</div>
+			</li>
+		);
+	})}
+</ul>

package/src/components/ui/status-indicator.astro

@@ -0,0 +1,38 @@
+---
+type StatusLevel = 'operational' | 'degraded' | 'outage' | 'maintenance';
+
+interface Props {
+	status: StatusLevel;
+	label?: string;
+	service?: string;
+}
+
+const DEFAULT_LABELS: Record<StatusLevel, string> = {
+	operational: 'Operational',
+	degraded: 'Degraded performance',
+	outage: 'Major outage',
+	maintenance: 'Under maintenance',
+};
+
+const STATUS_COLOR: Record<StatusLevel, string> = {
+	operational: 'bg-success',
+	degraded: 'bg-warning',
+	outage: 'bg-error',
+	maintenance: 'bg-info',
+};
+
+const { status, label, service } = Astro.props;
+
+const text = label ?? DEFAULT_LABELS[status];
+const ariaLabel = service ? `${service} ${text.toLowerCase()}` : text;
+---
+
+<span
+	class="inline-flex items-center gap-2 text-sm text-base-content"
+	role="status"
+	aria-label={ariaLabel}
+>
+	<span class={`inline-block w-2 h-2 rounded-full ${STATUS_COLOR[status]}`} aria-hidden="true"></span>
+	{service && <span class="font-semibold">{service}</span>}
+	<span>{text}</span>
+</span>