@hyvor/design 2.1.9 → 2.1.11

package/dist/marketing/Header/language.js

@@ -0,0 +1,28 @@
+/**
+ * Rewrites `path` (the current pathname) from `currentLang` to `targetLang`,
+ * for the common convention where the default language is served without a
+ * prefix and every other language is served under `/{code}`.
+ *
+ * @example
+ * buildLocalizedUrl('/pricing', 'en', 'fr', 'en') // '/fr/pricing'
+ * buildLocalizedUrl('/fr/pricing', 'fr', 'en', 'en') // '/pricing'
+ * buildLocalizedUrl('/fr', 'fr', 'en', 'en') // '/'
+ */
+export function buildLocalizedUrl(path, currentLang, targetLang, defaultLang) {
+    let basePath = path;
+    // strip the current language prefix, if any, to get the language-agnostic path
+    if (currentLang !== defaultLang) {
+        const prefix = `/${currentLang}`;
+        if (basePath === prefix) {
+            basePath = '/';
+        }
+        else if (basePath.startsWith(`${prefix}/`)) {
+            basePath = basePath.slice(prefix.length);
+        }
+    }
+    // the default language is served without a prefix
+    if (targetLang === defaultLang) {
+        return basePath;
+    }
+    return basePath === '/' ? `/${targetLang}` : `/${targetLang}${basePath}`;
+}

package/dist/marketing/Hero/Hero.svelte

@@ -0,0 +1,349 @@
+<script lang="ts">
+	import Button from '../../components/Button/Button.svelte';
+	import IconChevronDown from '@hyvor/icons/IconChevronDown';
+	import type { ComponentProps, Snippet } from 'svelte';
+
+	type ButtonProps = ComponentProps<typeof Button>;
+
+	interface Props {
+		title: string | Snippet;
+		subtitle?: string | Snippet;
+		badge?: string | Snippet;
+		buttons?: ButtonProps | ButtonProps[] | null;
+		accentColor?: string;
+		accentColorDark?: string;
+		fullHeight?: boolean;
+		after?: Snippet;
+	}
+
+	let {
+		title,
+		subtitle,
+		badge,
+		buttons = null,
+		accentColor,
+		accentColorDark,
+		fullHeight = false,
+		after
+	}: Props = $props();
+
+	const buttonList = $derived(buttons ? (Array.isArray(buttons) ? buttons : [buttons]) : []);
+</script>
+
+<section
+	class="hero"
+	class:full-height={fullHeight}
+	style:--hero-accent={accentColor}
+	style:--hero-accent-dark={accentColorDark}
+>
+	<svg class="hero-pattern" aria-hidden="true" focusable="false">
+		<defs>
+			<pattern id="hero-dot-pattern" width="28" height="28" patternUnits="userSpaceOnUse">
+				<circle cx="2" cy="2" r="1.6" fill="currentColor" />
+			</pattern>
+		</defs>
+		<rect width="100%" height="100%" fill="url(#hero-dot-pattern)" />
+	</svg>
+
+	<div class="hds-container inner">
+		<div class="left">
+			{#if badge}
+				<div class="badge anim anim-0">
+					{#if typeof badge === 'string'}
+						{badge}
+					{:else}
+						{@render badge()}
+					{/if}
+				</div>
+			{/if}
+
+			<h1 class="anim anim-1">
+				{#if typeof title === 'string'}
+					{@html title}
+				{:else}
+					{@render title()}
+				{/if}
+			</h1>
+
+			{#if subtitle}
+				<h2 class="subtitle anim anim-2">
+					{#if typeof subtitle === 'string'}
+						{@html subtitle}
+					{:else}
+						{@render subtitle()}
+					{/if}
+				</h2>
+			{/if}
+
+			{#if buttonList.length}
+				<div class="buttons anim anim-3">
+					{#each buttonList as b}
+						<Button
+							as="a"
+							href={b.href}
+							target={b.external ? '_blank' : undefined}
+							rel={b.external ? 'noopener' : undefined}
+							size={b.size || 'x-large'}
+							variant={b.variant}
+						>
+							{b.label}
+						</Button>
+					{/each}
+				</div>
+			{/if}
+
+			{#if after}
+				<div class="anim anim-3">
+					{@render after()}
+				</div>
+			{/if}
+		</div>
+	</div>
+
+	<div class="scroll-indicator anim anim-4" aria-hidden="true">
+		<div class="scroll-mouse">
+			<div class="scroll-dot"></div>
+		</div>
+		<IconChevronDown size={12} />
+	</div>
+</section>
+
+<style>
+	.hero {
+		--hero-accent-resolved: var(--hero-accent, var(--accent));
+
+		position: relative;
+		display: flex;
+		align-items: center;
+		padding: 60px 0 80px;
+		overflow: hidden;
+	}
+
+	.hero.full-height {
+		min-height: calc(100vh - var(--header-height, 60px));
+	}
+
+	:global(:root.dark) .hero {
+		--hero-accent-resolved: var(--hero-accent-dark, var(--hero-accent, var(--accent)));
+	}
+
+	.hero-pattern {
+		position: absolute;
+		inset: 0;
+		width: 100%;
+		height: 100%;
+		color: var(--border);
+		mask-image: radial-gradient(ellipse 65% 60% at 50% 38%, black 0%, transparent 75%);
+		-webkit-mask-image: radial-gradient(ellipse 65% 60% at 50% 38%, black 0%, transparent 75%);
+		pointer-events: none;
+	}
+
+	.inner {
+		position: relative;
+		z-index: 1;
+		display: flex;
+		align-items: center;
+		gap: 100px;
+		width: 1120px;
+		max-width: 100%;
+	}
+
+	.left {
+		flex: 1;
+		min-width: 0;
+		text-align: center;
+	}
+
+	.badge {
+		display: inline-flex;
+		align-items: center;
+		gap: 6px;
+		padding: 4px 12px;
+		border-radius: 100px;
+		font-size: 13px;
+		font-weight: 600;
+		background: color-mix(in srgb, var(--hero-accent-resolved) 12%, transparent);
+		color: var(--hero-accent-resolved);
+		margin-bottom: 24px;
+		border: 1px solid color-mix(in srgb, var(--hero-accent-resolved) 25%, transparent);
+	}
+
+	h1 {
+		margin: 0;
+		font-size: clamp(36px, 5vw, 56px);
+		line-height: 1.1;
+		letter-spacing: -0.02em;
+		font-weight: 800;
+		font-family: var(--font-serif);
+	}
+
+	.left :global(h1 .heading-small) {
+		font-size: clamp(35px, 5vw, 46px);
+		font-weight: 800;
+	}
+
+	.subtitle {
+		font-weight: 500;
+		letter-spacing: -0.02em;
+		font-family: var(--font-serif);
+
+		margin: auto;
+		margin-top: 30px;
+		font-size: clamp(22px, 3vw, 26px);
+		line-height: 1.6;
+		color: color-mix(in srgb, var(--text) 70%, var(--text-light));
+		max-width: 480px;
+	}
+
+	.left :global(.hds-hl) {
+		color: var(--hero-accent-resolved);
+		font-weight: 700;
+	}
+
+	.left :global(.hds-marker) {
+		position: relative;
+		font-weight: 700;
+		background-image: linear-gradient(
+			100deg,
+			color-mix(in srgb, var(--hero-accent-resolved) 35%, transparent) 0%,
+			color-mix(in srgb, var(--hero-accent-resolved) 45%, transparent) 100%
+		);
+		background-repeat: no-repeat;
+		background-size: 100% 0.5em;
+		background-position: 0 88%;
+		box-decoration-break: clone;
+		-webkit-box-decoration-break: clone;
+	}
+
+	.buttons {
+		display: flex;
+		gap: 12px;
+		margin-top: 36px;
+		flex-wrap: wrap;
+		justify-content: center;
+	}
+
+	.anim {
+		opacity: 0;
+		animation: hero-fade-up 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards;
+	}
+
+	.anim-0 {
+		animation-delay: 0s;
+	}
+
+	.anim-1 {
+		animation-delay: 0.05s;
+	}
+
+	.anim-2 {
+		animation-delay: 0.15s;
+	}
+
+	.anim-3 {
+		animation-delay: 0.25s;
+	}
+
+	.anim-4 {
+		animation-delay: 0.6s;
+	}
+
+	@keyframes hero-fade-up {
+		from {
+			opacity: 0;
+			transform: translateY(18px);
+		}
+		to {
+			opacity: 1;
+			transform: translateY(0);
+		}
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		.anim {
+			animation: none;
+			opacity: 1;
+			transform: none;
+		}
+	}
+
+	.scroll-indicator {
+		position: absolute;
+		left: 50%;
+		bottom: 28px;
+		transform: translateX(-50%);
+		z-index: 1;
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		gap: 8px;
+		color: var(--text-light);
+	}
+
+	.scroll-mouse {
+		width: 24px;
+		height: 38px;
+		border: 2px solid var(--border);
+		border-radius: 100px;
+		display: flex;
+		justify-content: center;
+		padding-top: 6px;
+	}
+
+	.scroll-dot {
+		width: 4px;
+		height: 8px;
+		border-radius: 2px;
+		background: var(--hero-accent-resolved);
+		animation: scroll-wheel 1.8s ease-in-out infinite;
+	}
+
+	@keyframes scroll-wheel {
+		0% {
+			opacity: 1;
+			transform: translateY(0);
+		}
+		60% {
+			opacity: 0;
+			transform: translateY(12px);
+		}
+		100% {
+			opacity: 0;
+			transform: translateY(12px);
+		}
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		.scroll-dot {
+			animation: none;
+		}
+	}
+
+	@media (max-width: 992px) {
+		.hero.full-height {
+			min-height: unset;
+		}
+
+		.hero {
+			padding: 60px 0;
+		}
+
+		.inner {
+			flex-direction: column;
+			gap: 48px;
+			text-align: center;
+		}
+
+		.subtitle {
+			max-width: 100%;
+		}
+
+		.buttons {
+			justify-content: center;
+		}
+
+		.scroll-indicator {
+			display: none;
+		}
+	}
+</style>

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

@@ -0,0 +1,16 @@
+import Button from '../../components/Button/Button.svelte';
+import type { ComponentProps, Snippet } from 'svelte';
+type ButtonProps = ComponentProps<typeof Button>;
+interface Props {
+    title: string | Snippet;
+    subtitle?: string | Snippet;
+    badge?: string | Snippet;
+    buttons?: ButtonProps | ButtonProps[] | null;
+    accentColor?: string;
+    accentColorDark?: string;
+    fullHeight?: boolean;
+    after?: Snippet;
+}
+declare const Hero: import("svelte").Component<Props, {}, "">;
+type Hero = ReturnType<typeof Hero>;
+export default Hero;

package/dist/marketing/LogoStrip/LogoStrip.svelte

@@ -0,0 +1,199 @@
+<script lang="ts">
+	interface Logo {
+		name: string;
+		src: string;
+		href?: string;
+		width?: number;
+		height?: number;
+		color?: boolean;
+	}
+
+	interface Props {
+		logos: Logo[];
+		label?: string;
+		background?: string;
+		invert?: boolean;
+		marquee?: boolean;
+		speed?: number;
+	}
+
+	let {
+		logos,
+		label = '',
+		background = 'var(--accent)',
+		invert = true,
+		marquee = true,
+		speed = 34
+	}: Props = $props();
+
+	// render twice for marquee effect
+	const track = $derived(marquee ? [...logos, ...logos] : logos);
+</script>
+
+{#snippet logoImg(logo: Logo, hidden = false)}
+	<img
+		src={logo.src}
+		alt={logo.name}
+		width={logo.width ?? 120}
+		height={logo.height ?? 28}
+		class="logo"
+		class:invert={invert && !logo.color}
+		class:color={logo.color}
+		aria-hidden={hidden}
+	/>
+{/snippet}
+
+<section class="hds-logo-strip" style:--ls-bg={background} style:--ls-speed="{speed}s">
+	<div class="hds-container">
+		{#if label}
+			<p class="label">{label}</p>
+		{/if}
+
+		{#if !marquee}
+			<div class="logos">
+				{#each logos as logo}
+					{#if logo.href}
+						<a href={logo.href} target="_blank" rel="noopener" class="logo-link">
+							{@render logoImg(logo)}
+						</a>
+					{:else}
+						{@render logoImg(logo)}
+					{/if}
+				{/each}
+			</div>
+		{/if}
+	</div>
+
+	{#if marquee}
+		<div class="marquee hds-container-max">
+			<div class="marquee-track">
+				{#each track as logo, i}
+					{@const hidden = i >= logos.length}
+					{#if logo.href}
+						<a
+							href={logo.href}
+							target="_blank"
+							rel="noopener"
+							class="logo-link"
+							tabindex={hidden ? -1 : undefined}
+						>
+							{@render logoImg(logo, hidden)}
+						</a>
+					{:else}
+						{@render logoImg(logo, hidden)}
+					{/if}
+				{/each}
+			</div>
+		</div>
+	{/if}
+</section>
+
+<style>
+	.hds-logo-strip {
+		background: var(--ls-bg);
+		padding: 52px 0;
+		overflow: hidden;
+	}
+
+	.label {
+		text-align: center;
+		font-size: 16px;
+		font-weight: 600;
+		letter-spacing: 0.07em;
+		text-transform: uppercase;
+		color: var(--accent-light-mid);
+		margin: 0 0 36px;
+	}
+
+	.logos {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		flex-wrap: wrap;
+		gap: 24px 52px;
+	}
+
+	/* marquee layout */
+	.marquee {
+		mask-image: linear-gradient(
+			to right,
+			transparent 0,
+			black 64px,
+			black calc(100% - 64px),
+			transparent 100%
+		);
+		-webkit-mask-image: linear-gradient(
+			to right,
+			transparent 0,
+			black 64px,
+			black calc(100% - 64px),
+			transparent 100%
+		);
+	}
+
+	.marquee-track {
+		display: flex;
+		align-items: center;
+		gap: 52px;
+		width: max-content;
+		animation: marquee-scroll var(--ls-speed) linear infinite;
+	}
+
+	.marquee:hover .marquee-track {
+		animation-play-state: paused;
+	}
+
+	@keyframes marquee-scroll {
+		from {
+			transform: translateX(0);
+		}
+		to {
+			/* one full set-width, since the track is two identical sets back to back */
+			transform: translateX(-50%);
+		}
+	}
+
+	.logo-link {
+		display: block;
+	}
+
+	.logo {
+		display: block;
+		flex-shrink: 0;
+		opacity: 0.8;
+		transition: opacity 0.15s ease;
+	}
+
+	.logo.invert {
+		filter: brightness(0) invert(1);
+	}
+
+	.logo.color {
+		filter: none;
+		opacity: 1;
+		border-radius: 10px;
+	}
+
+	.logo:hover {
+		opacity: 1;
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		.marquee {
+			mask-image: none;
+			-webkit-mask-image: none;
+		}
+
+		.marquee-track {
+			animation: none;
+			flex-wrap: wrap;
+			justify-content: center;
+			width: 100%;
+			padding: 0 15px;
+		}
+
+		.marquee-track :global(.logo[aria-hidden='true']) {
+			display: none;
+		}
+	}
+</style>

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

@@ -0,0 +1,19 @@
+interface Logo {
+    name: string;
+    src: string;
+    href?: string;
+    width?: number;
+    height?: number;
+    color?: boolean;
+}
+interface Props {
+    logos: Logo[];
+    label?: string;
+    background?: string;
+    invert?: boolean;
+    marquee?: boolean;
+    speed?: number;
+}
+declare const LogoStrip: import("svelte").Component<Props, {}, "">;
+type LogoStrip = ReturnType<typeof LogoStrip>;
+export default LogoStrip;

package/dist/marketing/Seal/CcpaSeal.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+	import Seal from './Seal.svelte';
+	import ccpa from './ccpa.svg?url';
+
+	interface Props {
+		size?: number;
+	}
+
+	let { size = 100 }: Props = $props();
+</script>
+
+<Seal {size}>
+	<img src={ccpa} alt="CCPA Seal" class="map" />
+	<span class="label">CCPA</span>
+</Seal>
+
+<style>
+	.map {
+		width: 22px;
+		height: auto;
+	}
+
+	.label {
+		font-size: 13px;
+		font-weight: 700;
+		letter-spacing: 0.03em;
+		color: #fff;
+	}
+</style>

package/dist/marketing/Seal/CcpaSeal.svelte.d.ts

@@ -0,0 +1,6 @@
+interface Props {
+    size?: number;
+}
+declare const CcpaSeal: import("svelte").Component<Props, {}, "">;
+type CcpaSeal = ReturnType<typeof CcpaSeal>;
+export default CcpaSeal;

package/dist/marketing/Seal/GdprSeal.svelte

@@ -0,0 +1,60 @@
+<script lang="ts">
+	import IconStarFill from '@hyvor/icons/IconStarFill';
+	import Seal from './Seal.svelte';
+
+	interface Props {
+		size?: number;
+	}
+
+	let { size = 100 }: Props = $props();
+
+	const starAngles = Array.from({ length: 12 }, (_, i) => i * 30);
+</script>
+
+<Seal {size}>
+	<div class="star-ring">
+		{#each starAngles as angle}
+			<span class="star" style="--angle: {angle}deg">
+				<IconStarFill size={7} />
+			</span>
+		{/each}
+	</div>
+	<span class="label">GDPR</span>
+</Seal>
+
+<style>
+	.star-ring {
+		position: absolute;
+		inset: 0;
+		--star-radius: 34px;
+	}
+
+	.star {
+		position: absolute;
+		top: 50%;
+		left: 50%;
+		width: 10px;
+		height: 10px;
+		margin: -5px 0 0 -5px;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		color: #e3b34a;
+		transform: rotate(var(--angle)) translateY(calc(var(--star-radius) * -1))
+			rotate(calc(var(--angle) * -1));
+	}
+
+	.label {
+		font-size: 13px;
+		font-weight: 700;
+		letter-spacing: 0.03em;
+		color: #fff;
+		z-index: 1;
+	}
+
+	@media (max-width: 768px) {
+		.star-ring {
+			--star-radius: 28px;
+		}
+	}
+</style>

package/dist/marketing/Seal/GdprSeal.svelte.d.ts

@@ -0,0 +1,6 @@
+interface Props {
+    size?: number;
+}
+declare const GdprSeal: import("svelte").Component<Props, {}, "">;
+type GdprSeal = ReturnType<typeof GdprSeal>;
+export default GdprSeal;