@hyvor/design 2.1.8-beta.1 → 2.1.8-beta.3

package/dist/marketing/Header/HeaderLanguageToggle.svelte

@@ -0,0 +1,121 @@
+<script lang="ts">
+	import Dropdown from '../../components/Dropdown/Dropdown.svelte';
+	import HeaderNavLink from './HeaderNavLink.svelte';
+	import type {
+		DropdownAlign,
+		DropdownPosition
+	} from '../../components/Dropdown/dropdown.types.js';
+	import type { LanguageOption } from './language.js';
+
+	interface Props {
+		languages: LanguageOption[];
+		current: string;
+		href: (code: string) => string;
+		showName?: boolean;
+		align?: DropdownAlign;
+		position?: DropdownPosition;
+		label?: string;
+	}
+
+	let {
+		languages,
+		current,
+		href,
+		showName = false,
+		align = 'center',
+		position = 'bottom',
+		label = 'Change language'
+	}: Props = $props();
+
+	const currentLanguage = $derived(languages.find((l) => l.code === current) ?? languages[0]);
+
+	let show = $state(false);
+
+	// close the dropdown once a language link inside it is clicked
+	function closeOnLinkClick(e: MouseEvent) {
+		const target = e.target as HTMLElement;
+		if (target.tagName === 'A' || target.closest('a')) {
+			show = false;
+		}
+	}
+</script>
+
+{#if currentLanguage}
+	<div class="header-language-toggle">
+		<Dropdown bind:show {align} {position} contentPadding={8}>
+			{#snippet trigger()}
+				<HeaderNavLink aria-label={label} aria-expanded={show}>
+					<span class="flag">{currentLanguage.flag}</span>
+					{#if showName}{currentLanguage.name}{/if}
+				</HeaderNavLink>
+			{/snippet}
+			{#snippet content()}
+				<!-- svelte-ignore a11y_click_events_have_key_events, a11y_no_static_element_interactions -->
+				<div class="menu" onclick={closeOnLinkClick}>
+					{#each languages as language (language.code)}
+						<HeaderNavLink
+							href={href(language.code)}
+							active={language.code === current}
+							data-lang={language.code}
+							menu
+						>
+							<span class="lang-row">
+								<span class="flag">{language.flag}</span>
+								<span class="name">{language.name}</span>
+								<span class="code">{language.code.toUpperCase()}</span>
+							</span>
+						</HeaderNavLink>
+					{/each}
+				</div>
+			{/snippet}
+		</Dropdown>
+	</div>
+{/if}
+
+<style>
+	.header-language-toggle {
+		position: relative;
+		display: inline-flex;
+		margin-left: 12px;
+		padding-left: 12px;
+	}
+
+	/* a short divider, centered on the toggle, separating it from nav links,
+	   rather than a full-height border-left */
+	.header-language-toggle::before {
+		content: '';
+		position: absolute;
+		left: 0;
+		top: 50%;
+		transform: translateY(-50%);
+		width: 1px;
+		height: 16px;
+		background: var(--border);
+	}
+
+	.flag {
+		font-size: 15px;
+		line-height: 1;
+	}
+
+	.menu {
+		display: flex;
+		flex-direction: column;
+		gap: 2px;
+	}
+
+	.lang-row {
+		display: flex;
+		align-items: center;
+		gap: 8px;
+		width: 100%;
+	}
+
+	.code {
+		margin-left: auto;
+		padding-left: 8px;
+		font-size: 11px;
+		font-weight: 600;
+		color: var(--text-light);
+	}
+</style>

package/dist/marketing/Header/HeaderLanguageToggle.svelte.d.ts

@@ -0,0 +1,14 @@
+import type { DropdownAlign, DropdownPosition } from '../../components/Dropdown/dropdown.types.js';
+import type { LanguageOption } from './language.js';
+interface Props {
+    languages: LanguageOption[];
+    current: string;
+    href: (code: string) => string;
+    showName?: boolean;
+    align?: DropdownAlign;
+    position?: DropdownPosition;
+    label?: string;
+}
+declare const HeaderLanguageToggle: import("svelte").Component<Props, {}, "">;
+type HeaderLanguageToggle = ReturnType<typeof HeaderLanguageToggle>;
+export default HeaderLanguageToggle;

package/dist/marketing/Header/language.d.ts

@@ -0,0 +1,18 @@
+export interface LanguageOption {
+    /** language/locale code, e.g. "en", "fr" */
+    code: string;
+    /** an emoji flag shown next to the name */
+    flag: string;
+    name: string;
+}
+/**
+ * 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 declare function buildLocalizedUrl(path: string, currentLang: string, targetLang: string, defaultLang: string): string;

package/dist/marketing/Header/language.js

@@ -0,0 +1,35 @@
+// Shared helpers for marketing sites that serve translated pages on their own
+// URLs (e.g. a SvelteKit `[[lang]]` route param) rather than switching
+// language client-side on one page. This is a different case from
+// `InternationalizationService`/`LanguageToggle` in
+// `$lib/components/Internationalization`, which swap translated strings in
+// place on a single page; use that instead if you don't have per-language
+// routes.
+/**
+ * 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,353 @@
+<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);
+	}
+
+	/* smaller second line inside the title, e.g. a parenthetical sub-line */
+	.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;
+	}
+
+	/* Entrance animation */
+	.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 */
+	.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;
+		}
+	}
+
+	/* Responsive */
+	@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;