@hyvor/design 2.1.8 → 2.1.10

package/dist/marketing/SpotlightSplit/SpotlightSplit.svelte

@@ -0,0 +1,256 @@
+<script lang="ts">
+	import Button from '../../components/Button/Button.svelte';
+	import IconBoxArrowUpRight from '@hyvor/icons/IconBoxArrowUpRight';
+	import type { Snippet } from 'svelte';
+
+	type ButtonConfig = { href: string; label: string; external?: boolean };
+
+	interface Props {
+		title: string | Snippet;
+		description?: string;
+		stats?: string[];
+		button?: ButtonConfig | ButtonConfig[] | null;
+		content: Snippet;
+		reverse?: boolean;
+		background?: string;
+		highlightColor?: string;
+	}
+
+	let {
+		title,
+		description = '',
+		stats = [],
+		button = null,
+		content,
+		reverse = false,
+		background = 'var(--accent)',
+		highlightColor = 'rgba(255, 238, 217, 0.9)'
+	}: Props = $props();
+
+	const buttons = $derived(button ? (Array.isArray(button) ? button : [button]) : []);
+
+	let mouseX = $state(0);
+	let mouseY = $state(0);
+	let hovering = $state(false);
+
+	function handlePointerMove(event: PointerEvent) {
+		const bounds = (event.currentTarget as HTMLElement).getBoundingClientRect();
+		mouseX = event.clientX - bounds.left;
+		mouseY = event.clientY - bounds.top;
+	}
+</script>
+
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+<section
+	class="hds-spotlight-split"
+	onpointermove={handlePointerMove}
+	onpointerenter={() => (hovering = true)}
+	onpointerleave={() => (hovering = false)}
+	style:--mx="{mouseX}px"
+	style:--my="{mouseY}px"
+	style:--sps-bg={background}
+	style:--sps-highlight={highlightColor}
+>
+	<svg class="bg-pattern" width="100%" height="100%" aria-hidden="true">
+		<defs>
+			<pattern id="spotlight-split-grid" width="56" height="56" patternUnits="userSpaceOnUse">
+				<path d="M 56 0 L 0 0 0 56" fill="none" stroke="white" stroke-width="1" />
+			</pattern>
+			<radialGradient id="spotlight-split-fade" cx="50%" cy="40%" r="75%">
+				<stop offset="0%" stop-color="white" stop-opacity="1" />
+				<stop offset="100%" stop-color="white" stop-opacity="0" />
+			</radialGradient>
+			<mask id="spotlight-split-mask">
+				<rect width="100%" height="100%" fill="url(#spotlight-split-fade)" />
+			</mask>
+		</defs>
+		<rect
+			width="100%"
+			height="100%"
+			fill="url(#spotlight-split-grid)"
+			mask="url(#spotlight-split-mask)"
+		/>
+	</svg>
+
+	<div class="grid-highlight" class:visible={hovering} aria-hidden="true"></div>
+
+	<div class="hds-container inner" class:reverse>
+		<div class="text-side">
+			<h2>
+				{#if typeof title === 'string'}
+					{@html title}
+				{:else}
+					{@render title()}
+				{/if}
+			</h2>
+
+			{#if description}
+				<p class="description">{description}</p>
+			{/if}
+
+			{#if stats.length}
+				<div class="stat-row">
+					{#each stats as stat}
+						<span class="stat">{stat}</span>
+					{/each}
+				</div>
+			{/if}
+
+			{#if buttons.length}
+				<div class="buttons">
+					{#each buttons as b}
+						<Button
+							as="a"
+							href={b.href}
+							target={b.external ? '_blank' : undefined}
+							rel={b.external ? 'noopener' : undefined}
+							variant="outline"
+							color="input"
+						>
+							{b.label}
+							{#if b.external}
+								{#snippet end()}<IconBoxArrowUpRight size={11} />{/snippet}
+							{/if}
+						</Button>
+					{/each}
+				</div>
+			{/if}
+		</div>
+
+		<div class="content-side">
+			{@render content()}
+		</div>
+	</div>
+</section>
+
+<style>
+	.hds-spotlight-split {
+		position: relative;
+		background: var(--sps-bg);
+		padding: 96px 0;
+		overflow: hidden;
+	}
+
+	.bg-pattern {
+		position: absolute;
+		inset: 0;
+		opacity: 0.08;
+		pointer-events: none;
+	}
+
+	.grid-highlight {
+		position: absolute;
+		inset: 0;
+		pointer-events: none;
+		background-image:
+			linear-gradient(to right, var(--sps-highlight) 1px, transparent 1px),
+			linear-gradient(to bottom, var(--sps-highlight) 1px, transparent 1px);
+		background-size: 56px 56px;
+		-webkit-mask-image: radial-gradient(
+			180px circle at var(--mx, 50%) var(--my, 50%),
+			black 0%,
+			black 35%,
+			transparent 75%
+		);
+		mask-image: radial-gradient(
+			180px circle at var(--mx, 50%) var(--my, 50%),
+			black 0%,
+			black 35%,
+			transparent 75%
+		);
+		opacity: 0;
+		transition: opacity 0.35s ease;
+	}
+
+	.grid-highlight.visible {
+		opacity: 0.2;
+	}
+
+	.inner {
+		position: relative;
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		gap: 48px;
+	}
+
+	.inner.reverse {
+		flex-direction: row-reverse;
+	}
+
+	.text-side {
+		flex: 1;
+		min-width: 0;
+	}
+
+	h2 {
+		font-size: clamp(35px, 4vw, 50px);
+		font-weight: 800;
+		letter-spacing: -0.02em;
+		line-height: 1.1;
+		color: #fff;
+		margin: 0 0 18px;
+		font-family: var(--font-serif);
+	}
+
+	.description {
+		font-size: 16px;
+		line-height: 1.7;
+		color: rgba(255, 255, 255, 0.7);
+		max-width: 460px;
+		margin: 0 0 28px;
+	}
+
+	.stat-row {
+		display: flex;
+		flex-wrap: wrap;
+		gap: 10px 20px;
+		margin-bottom: 28px;
+	}
+
+	.stat {
+		font-size: 14px;
+		font-weight: 600;
+		color: rgba(255, 255, 255, 0.85);
+	}
+
+	.buttons {
+		display: flex;
+		flex-wrap: wrap;
+		gap: 12px;
+	}
+
+	.buttons :global(.button) {
+		border-color: rgba(255, 255, 255, 0.3) !important;
+		color: rgba(255, 255, 255, 0.85) !important;
+		background: transparent !important;
+		text-decoration: none !important;
+	}
+
+	.buttons :global(.button):hover {
+		border-color: rgba(255, 255, 255, 0.55) !important;
+		color: #fff !important;
+	}
+
+	.content-side {
+		flex-shrink: 0;
+	}
+
+	@media (max-width: 768px) {
+		.inner,
+		.inner.reverse {
+			flex-direction: column;
+			text-align: center;
+			gap: 36px;
+		}
+
+		.description {
+			max-width: 100%;
+		}
+
+		.stat-row,
+		.buttons {
+			justify-content: center;
+		}
+	}
+</style>

package/dist/marketing/SpotlightSplit/SpotlightSplit.svelte.d.ts

@@ -0,0 +1,19 @@
+import type { Snippet } from 'svelte';
+type ButtonConfig = {
+    href: string;
+    label: string;
+    external?: boolean;
+};
+interface Props {
+    title: string | Snippet;
+    description?: string;
+    stats?: string[];
+    button?: ButtonConfig | ButtonConfig[] | null;
+    content: Snippet;
+    reverse?: boolean;
+    background?: string;
+    highlightColor?: string;
+}
+declare const SpotlightSplit: import("svelte").Component<Props, {}, "">;
+type SpotlightSplit = ReturnType<typeof SpotlightSplit>;
+export default SpotlightSplit;

package/dist/marketing/Testimonials/Testimonials.svelte

@@ -0,0 +1,441 @@
+<script lang="ts">
+	interface TextReview {
+		type: 'text';
+		name: string;
+		role: string;
+		quote: string;
+	}
+
+	interface VideoReview {
+		type: 'video';
+		name: string;
+		role: string;
+		videoUrl?: string;
+		posterUrl?: string;
+		summary?: string;
+	}
+
+	type Review = TextReview | VideoReview;
+
+	interface Props {
+		label?: string;
+		title?: string;
+		reviews: Review[];
+		handwrittenNames?: boolean;
+	}
+
+	let {
+		label = 'Testimonials',
+		title = 'Loved by our customers.',
+		reviews,
+		handwrittenNames = true
+	}: Props = $props();
+
+	function identicon(seed: string) {
+		let hash = 0;
+		for (let i = 0; i < seed.length; i++) {
+			hash = (hash * 31 + seed.charCodeAt(i)) | 0;
+		}
+		const hue = Math.abs(hash) % 360;
+		const cells: { x: number; y: number }[] = [];
+		for (let col = 0; col < 3; col++) {
+			for (let row = 0; row < 5; row++) {
+				const bit = (hash >> (col * 5 + row)) & 1;
+				if (!bit) continue;
+				cells.push({ x: col, y: row });
+				if (col < 2) cells.push({ x: 4 - col, y: row });
+			}
+		}
+		return {
+			bg: `hsl(${hue} 45% 92%)`,
+			fg: `hsl(${hue} 50% 40%)`,
+			cells
+		};
+	}
+
+	let scrollEl: HTMLDivElement | undefined = $state();
+	let dragging = $state(false);
+	let dragStartX = 0;
+	let dragStartScroll = 0;
+
+	let started: boolean[] = $state(reviews.map(() => false));
+	let playing: boolean[] = $state(reviews.map(() => false));
+	let videoEls: (HTMLVideoElement | undefined)[] = $state([]);
+
+	function play(i: number) {
+		started[i] = true;
+		videoEls[i]?.play().catch(() => {});
+	}
+
+	function autoplayVideo(node: HTMLVideoElement) {
+		node.play().catch(() => {});
+	}
+
+	function onVideoPause(e: Event, i: number) {
+		if ((e.currentTarget as HTMLVideoElement).seeking) return;
+		playing[i] = false;
+	}
+
+	function onPointerDown(e: PointerEvent) {
+		if (!scrollEl) return;
+		// let clicks and native <video> controls work
+		if ((e.target as HTMLElement).closest('button, video, a')) return;
+		dragging = true;
+		dragStartX = e.clientX;
+		dragStartScroll = scrollEl.scrollLeft;
+		scrollEl.setPointerCapture(e.pointerId);
+	}
+
+	function onPointerMove(e: PointerEvent) {
+		if (!dragging || !scrollEl) return;
+		scrollEl.scrollLeft = dragStartScroll - (e.clientX - dragStartX);
+	}
+
+	function onPointerUp() {
+		dragging = false;
+	}
+</script>
+
+<svelte:head>
+	{#if handwrittenNames}
+		<link href="https://fonts.bunny.net/css?family=caveat:600,700" rel="stylesheet" />
+	{/if}
+</svelte:head>
+
+<section class="hds-testimonials" class:handwritten={handwrittenNames}>
+	<div class="hds-container head">
+		<p class="label">{label}</p>
+		<h2>{@html title}</h2>
+	</div>
+
+	<!-- svelte-ignore a11y_no_static_element_interactions -->
+	<div
+		class="scroll-row"
+		class:dragging
+		bind:this={scrollEl}
+		onpointerdown={onPointerDown}
+		onpointermove={onPointerMove}
+		onpointerup={onPointerUp}
+		onpointerleave={onPointerUp}
+		role="region"
+		aria-label={label}
+	>
+		{#each reviews as review, i}
+			{#if review.type === 'text'}
+				{@const av = identicon(review.name)}
+				<figure class="card text-card hds-box">
+					<svg class="avatar" viewBox="0 0 5 5" style="background: {av.bg}" aria-hidden="true">
+						{#each av.cells as cell}
+							<rect x={cell.x} y={cell.y} width="1" height="1" fill={av.fg} />
+						{/each}
+					</svg>
+					<blockquote>&ldquo;{review.quote}&rdquo;</blockquote>
+					<figcaption>
+						<span class="name">{review.name}</span>
+						<span class="role">{review.role}</span>
+					</figcaption>
+				</figure>
+			{:else}
+				<figure class="card video-card hds-box" class:playing={playing[i]}>
+					{#if started[i]}
+						<!-- svelte-ignore a11y_media_has_caption -->
+						<video
+							class="video"
+							src={review.videoUrl}
+							poster={review.posterUrl}
+							controls={playing[i]}
+							playsinline
+							bind:this={videoEls[i]}
+							use:autoplayVideo
+							onplay={() => (playing[i] = true)}
+							onpause={(e) => onVideoPause(e, i)}
+							onended={() => (playing[i] = false)}
+						></video>
+					{:else}
+						<div class="poster">
+							<img src={review.posterUrl} alt="" />
+						</div>
+					{/if}
+
+					{#if !playing[i]}
+						<div class="poster-scrim"></div>
+
+						{#if !started[i] && review.summary}
+							<p class="video-summary">"{review.summary}"</p>
+						{/if}
+
+						<button
+							class="play-btn"
+							aria-label={started[i] ? 'Resume video testimonial' : 'Play video testimonial'}
+							onclick={() => play(i)}
+						>
+							<svg
+								width="20"
+								height="20"
+								viewBox="0 0 16 16"
+								fill="currentColor"
+								aria-hidden="true"
+							>
+								<path d="M5 3.5v9l8-4.5-8-4.5z" />
+							</svg>
+						</button>
+
+						<figcaption>
+							<span class="name">{review.name}</span>
+							<span class="role">{review.role}</span>
+						</figcaption>
+					{/if}
+				</figure>
+			{/if}
+		{/each}
+	</div>
+</section>
+
+<style>
+	.hds-testimonials {
+		background: var(--accent-lightest);
+		padding: 100px 0 96px;
+		overflow: hidden;
+	}
+
+	.head {
+		margin-bottom: 44px;
+	}
+
+	.label {
+		font-size: 14px;
+		font-weight: 600;
+		letter-spacing: 0.09em;
+		text-transform: uppercase;
+		color: var(--accent);
+		margin: 0 0 16px;
+	}
+
+	h2 {
+		font-size: clamp(30px, 4vw, 44px);
+		font-weight: 800;
+		letter-spacing: -0.02em;
+		line-height: 1.15;
+		color: var(--text);
+		margin: 0;
+		font-family: var(--font-serif);
+	}
+
+	.scroll-row {
+		--side-padding: max(15px, calc((100vw - 1000px) / 2));
+
+		display: flex;
+		align-items: stretch;
+		gap: 20px;
+		overflow-x: auto;
+		overflow-y: visible;
+		scroll-behavior: smooth;
+		cursor: grab;
+		padding: 32px var(--side-padding) 36px;
+		scrollbar-width: none;
+		-webkit-overflow-scrolling: touch;
+		touch-action: pan-y;
+		user-select: none;
+		-webkit-user-select: none;
+	}
+
+	.scroll-row.dragging {
+		cursor: grabbing;
+		scroll-behavior: auto;
+	}
+
+	.scroll-row::-webkit-scrollbar {
+		display: none;
+	}
+
+	.card {
+		position: relative;
+		flex: 0 0 auto;
+		width: 320px;
+		height: 440px;
+		margin: 0;
+		box-sizing: border-box;
+		transition:
+			width 0.35s cubic-bezier(0.16, 1, 0.3, 1),
+			height 0.35s cubic-bezier(0.16, 1, 0.3, 1);
+	}
+
+	.text-card {
+		padding: 28px;
+		display: flex;
+		flex-direction: column;
+	}
+
+	.avatar {
+		width: 46px;
+		height: 46px;
+		border-radius: 50%;
+		flex-shrink: 0;
+		display: block;
+		shape-rendering: crispEdges;
+	}
+
+	blockquote {
+		font-size: 16px;
+		line-height: 1.7;
+		color: var(--text);
+		margin: 20px 0 0;
+		flex: 1;
+	}
+
+	.text-card figcaption {
+		display: flex;
+		flex-direction: column;
+		gap: 0;
+	}
+
+	.name {
+		font-size: 16px;
+		font-weight: 600;
+		color: var(--text);
+		line-height: 1.2;
+	}
+
+	.handwritten .name {
+		font-family: 'Caveat', cursive;
+		font-size: 28px;
+		font-weight: 600;
+	}
+
+	.role {
+		font-size: 13px;
+		color: var(--text-light);
+	}
+
+	.video-card {
+		width: 280px;
+		overflow: hidden;
+		padding: 0;
+	}
+
+	.video-card.playing {
+		width: 340px;
+		height: 520px;
+		z-index: 1;
+	}
+
+	.poster {
+		position: absolute;
+		inset: 0;
+	}
+
+	.poster img {
+		width: 100%;
+		height: 100%;
+		object-fit: cover;
+		display: block;
+	}
+
+	.poster-scrim {
+		position: absolute;
+		inset: 0;
+		background: linear-gradient(160deg, rgba(20, 14, 12, 0.45), rgba(20, 14, 12, 0.65));
+	}
+
+	.video-summary {
+		position: absolute;
+		top: 24px;
+		left: 20px;
+		right: 20px;
+		margin: 0;
+		font-family: var(--font-serif);
+		font-size: 18px;
+		font-weight: 800;
+		line-height: 1.25;
+		letter-spacing: -0.01em;
+		color: #fff;
+		text-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
+		font-style: italic;
+	}
+
+	.play-btn {
+		position: absolute;
+		top: 50%;
+		left: 50%;
+		transform: translate(-50%, -50%);
+		width: 56px;
+		height: 56px;
+		border-radius: 50%;
+		background: rgba(255, 255, 255, 0.18);
+		backdrop-filter: blur(6px);
+		-webkit-backdrop-filter: blur(6px);
+		border: 1px solid rgba(255, 255, 255, 0.4);
+		color: #fff;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		cursor: pointer;
+		transition:
+			transform 0.2s,
+			background 0.2s;
+	}
+
+	.play-btn:hover {
+		transform: translate(-50%, -50%) scale(1.08);
+		background: rgba(255, 255, 255, 0.28);
+	}
+
+	.play-btn svg {
+		margin-left: 3px;
+	}
+
+	.video {
+		display: block;
+		width: 100%;
+		height: 100%;
+		object-fit: cover;
+		background: #000;
+	}
+
+	.video-card figcaption {
+		position: absolute;
+		left: 0;
+		right: 0;
+		bottom: 0;
+		padding: 40px 20px 20px;
+		background: linear-gradient(to top, rgba(0, 0, 0, 0.75), transparent);
+		display: flex;
+		flex-direction: column;
+	}
+
+	.video-card .name {
+		color: #fff;
+	}
+
+	.video-card .role {
+		color: rgba(255, 255, 255, 0.75);
+	}
+
+	@media (max-width: 600px) {
+		.scroll-row {
+			--side-padding: max(20px, calc((100vw - 1000px) / 2));
+			padding: 32px var(--side-padding) 36px;
+		}
+	}
+
+	@media (max-width: 768px) {
+		.head {
+			text-align: center;
+			margin-bottom: 32px;
+		}
+
+		.card {
+			width: 280px;
+			height: 400px;
+		}
+
+		.video-card {
+			width: 240px;
+		}
+
+		.video-card.playing {
+			width: 280px;
+			height: 460px;
+		}
+	}
+</style>