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

package/dist/marketing/FeatureSplit/FeatureSplit.svelte

@@ -0,0 +1,325 @@
+<script lang="ts">
+	import Button from '../../components/Button/Button.svelte';
+	import IconBoxArrowUpRight from '@hyvor/icons/IconBoxArrowUpRight';
+	import IconCheckCircleFill from '@hyvor/icons/IconCheckCircleFill';
+	import type { Snippet } from 'svelte';
+
+	type ButtonConfig = { href: string; label: string; external?: boolean };
+
+	interface Props {
+		eyebrow: string;
+		title: string | Snippet;
+		description: string;
+		bullets?: string[] | Snippet;
+		button?: ButtonConfig | ButtonConfig[] | null;
+		flip?: boolean;
+		altBg?: boolean;
+		overlap?: boolean;
+		interactiveBullets?: boolean;
+		visual: Snippet<[activeBullet: number]>;
+		after?: Snippet;
+		left?: Snippet;
+		max?: boolean;
+	}
+
+	let {
+		eyebrow,
+		title,
+		description,
+		bullets = [],
+		button = null,
+		flip = false,
+		altBg = false,
+		overlap = false,
+		interactiveBullets = false,
+		visual,
+		after,
+		left,
+		max = false
+	}: Props = $props();
+
+	let inView = $state(false);
+	let activeBullet = $state(0);
+
+	// how long the active bullet's progress bar takes to fill before auto-advancing
+	const AUTO_ADVANCE_MS = 5000;
+
+	$effect(() => {
+		if (!interactiveBullets || !inView) return;
+		if (!Array.isArray(bullets) || bullets.length <= 1) return;
+		activeBullet;
+		const count = bullets.length;
+		const timer = setTimeout(() => {
+			activeBullet = (activeBullet + 1) % count;
+		}, AUTO_ADVANCE_MS);
+		return () => clearTimeout(timer);
+	});
+
+	function onView(node: HTMLElement, callback: () => void) {
+		const observer = new IntersectionObserver(
+			(entries) => {
+				if (entries[0]?.isIntersecting) {
+					callback();
+					observer.disconnect();
+				}
+			},
+			{ threshold: 0.25 }
+		);
+		observer.observe(node);
+		return {
+			destroy() {
+				observer.disconnect();
+			}
+		};
+	}
+</script>
+
+<section class="hds-feature-split" class:alt-bg={altBg}>
+	<div class={max ? 'hds-container-max split' : 'hds-container split'} class:flip class:overlap>
+		<div class="text-col" class:in-view={inView} use:onView={() => (inView = true)}>
+			{#if left}
+				{@render left()}
+			{:else}
+				<span class="eyebrow">{eyebrow}</span>
+				<h2>
+					{#if typeof title === 'string'}
+						{@html title}
+					{:else}
+						{@render title()}
+					{/if}
+				</h2>
+				<p>{description}</p>
+
+				{#if Array.isArray(bullets)}
+					{#if bullets.length}
+						<ul class="bullets" class:interactive={interactiveBullets}>
+							{#each bullets as b, i}
+								<li>
+									{#if interactiveBullets}
+										<button
+											type="button"
+											class="bullet-btn"
+											class:active={activeBullet === i}
+											style="animation-duration: {AUTO_ADVANCE_MS}ms"
+											onclick={() => (activeBullet = i)}
+										>
+											<IconCheckCircleFill size={14} />{b}
+										</button>
+									{:else}
+										<IconCheckCircleFill size={14} />{b}
+									{/if}
+								</li>
+							{/each}
+						</ul>
+					{/if}
+				{:else if bullets}
+					{@render bullets()}
+				{/if}
+
+				{#if button}
+					{@const buttons = Array.isArray(button) ? button : [button]}
+					<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"
+								size="small"
+							>
+								{b.label}
+								{#snippet end()}<IconBoxArrowUpRight size={11} />{/snippet}
+							</Button>
+						{/each}
+					</div>
+				{/if}
+			{/if}
+		</div>
+
+		<div class="visual-col">
+			{@render visual(activeBullet)}
+		</div>
+	</div>
+
+	{#if after}
+		<div class="hds-container-max">
+			{@render after()}
+		</div>
+	{/if}
+</section>
+
+<style>
+	.hds-feature-split {
+		padding: 100px 0;
+		overflow-x: hidden;
+	}
+
+	.alt-bg {
+		background: color-mix(in srgb, var(--accent) 10%, var(--background));
+	}
+
+	.split {
+		display: flex;
+		align-items: center;
+		gap: 72px;
+	}
+
+	.split.flip {
+		flex-direction: row-reverse;
+	}
+
+	.text-col,
+	.visual-col {
+		flex: 1;
+		min-width: 0;
+	}
+
+	.text-col {
+		opacity: 0;
+		transform: translateY(18px);
+		transition:
+			opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
+			transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
+	}
+
+	.text-col.in-view {
+		opacity: 1;
+		transform: none;
+	}
+	.split.overlap .text-col {
+		z-index: 2;
+	}
+
+	.eyebrow {
+		display: inline-block;
+		font-size: 12px;
+		font-weight: 700;
+		letter-spacing: 0.1em;
+		text-transform: uppercase;
+		color: var(--accent);
+		margin-bottom: 16px;
+	}
+
+	h2 {
+		font-size: clamp(26px, 3.5vw, 38px);
+		font-weight: 800;
+		letter-spacing: -0.02em;
+		line-height: 1.15;
+		margin: 0 0 16px;
+	}
+
+	p {
+		font-size: 16px;
+		line-height: 1.7;
+		color: var(--text-light);
+		margin: 0 0 28px;
+		max-width: 440px;
+	}
+
+	.bullets {
+		list-style: none;
+		margin: 0 0 32px;
+		padding: 0;
+		display: flex;
+		flex-direction: column;
+		gap: 10px;
+	}
+
+	.bullets li {
+		display: flex;
+		align-items: flex-start;
+		gap: 10px;
+		font-size: 1rem;
+		text-align: left;
+	}
+
+	.bullets li :global(svg) {
+		color: var(--accent);
+		flex-shrink: 0;
+		margin-top: 0.3em;
+	}
+
+	.bullet-btn {
+		position: relative;
+		display: flex;
+		align-items: flex-start;
+		gap: 10px;
+		width: 100%;
+		padding: 8px 10px;
+		border: none;
+		border-radius: 20px;
+		background-color: transparent;
+		background-image: linear-gradient(
+			color-mix(in srgb, var(--accent) 14%, transparent),
+			color-mix(in srgb, var(--accent) 14%, transparent)
+		);
+		background-repeat: no-repeat;
+		background-position: left center;
+		background-size: 0% 100%;
+		color: var(--text-light);
+		font: inherit;
+		font-size: 1rem;
+		text-align: left;
+		cursor: pointer;
+		transition:
+			background-color 0.2s,
+			color 0.2s;
+	}
+
+	.bullet-btn:hover {
+		background-color: color-mix(in srgb, var(--text) 4%, transparent);
+	}
+
+	.bullet-btn.active {
+		color: var(--text);
+		animation-name: bullet-fill;
+		animation-timing-function: linear;
+		animation-fill-mode: forwards;
+	}
+
+	@keyframes bullet-fill {
+		from {
+			background-size: 0% 100%;
+		}
+		to {
+			background-size: 100% 100%;
+		}
+	}
+
+	.bullets.interactive li :global(svg) {
+		color: var(--text-light);
+	}
+
+	.bullets.interactive li:has(.bullet-btn.active) :global(svg) {
+		color: var(--accent);
+	}
+
+	.buttons {
+		display: flex;
+		flex-wrap: wrap;
+		gap: 12px;
+	}
+
+	@media (max-width: 900px) {
+		.split,
+		.split.flip {
+			flex-direction: column;
+			align-items: stretch;
+			gap: 48px;
+		}
+
+		.text-col {
+			width: 100%;
+			text-align: left;
+		}
+
+		.visual-col {
+			width: 100%;
+		}
+
+		p {
+			max-width: 100%;
+		}
+	}
+</style>

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

@@ -0,0 +1,24 @@
+import type { Snippet } from 'svelte';
+type ButtonConfig = {
+    href: string;
+    label: string;
+    external?: boolean;
+};
+interface Props {
+    eyebrow: string;
+    title: string | Snippet;
+    description: string;
+    bullets?: string[] | Snippet;
+    button?: ButtonConfig | ButtonConfig[] | null;
+    flip?: boolean;
+    altBg?: boolean;
+    overlap?: boolean;
+    interactiveBullets?: boolean;
+    visual: Snippet<[activeBullet: number]>;
+    after?: Snippet;
+    left?: Snippet;
+    max?: boolean;
+}
+declare const FeatureSplit: import("svelte").Component<Props, {}, "">;
+type FeatureSplit = ReturnType<typeof FeatureSplit>;
+export default FeatureSplit;

package/dist/marketing/Footer/Footer.svelte

@@ -36,6 +36,11 @@
 		recordVisit?: boolean;
 		center?: Snippet;
 		max?: boolean;
+		logoAltText?: string;
+		copyEmailLabel?: string;
+		copiedLabel?: string;
+		gdprText?: string;
+		fromFranceText?: string;
 	}
 
 	let {
@@ -54,13 +59,13 @@
 		affiliate = true,
 		recordVisit = true,
 		center,
-		max = false
+		max = false,
+		logoAltText = 'Logo',
+		copyEmailLabel = 'Copy email',
+		copiedLabel = 'Copied!',
+		gdprText = 'GDPR Compliant',
+		fromFranceText = 'From France'
 	}: Props = $props();
-
-	// same "explicit logo, else derive from product" pattern as Header — pass
-	// `product` (e.g. "blogs") for the mascot to follow that product's logo
-	// automatically, or `logo` to override it directly. Neither given means
-	// no mascot.
 	const mascotLogo = $derived(
 		logo || (product ? `${instance}/api/public/logo/${product}.svg` : undefined)
 	);
@@ -134,7 +139,7 @@
 		<div class="mascot-wrap" use:onView={() => (mascotInView = true)}>
 			<img
 				src={mascotLogo}
-				alt="{name} Logo"
+				alt="{name} {logoAltText}"
 				width="100"
 				height="100"
 				class:in-view={mascotInView}
@@ -159,7 +164,7 @@
 								<IconEnvelope size={14} />
 								{email}
 							</a>
-							<Tooltip text={emailCopied ? 'Copied!' : 'Copy email'} position="top">
+							<Tooltip text={emailCopied ? copiedLabel : copyEmailLabel} position="top">
 								<IconButton
 									size="small"
 									variant="invisible"
@@ -210,13 +215,13 @@
 								</svg>
 								<span class="lock"><IconLockFill size={10} /></span>
 							</span>
-							<span class="gdpr-chip-text">GDPR Compliant</span>
+							<span class="gdpr-chip-text">{gdprText}</span>
 						</a>
 					</div>
 				{/if}
 
 				<div class="bottom-right">
-					<div class="france">From France <span class="flag">🇫🇷</span></div>
+					<div class="france">{fromFranceText} <span class="flag">🇫🇷</span></div>
 				</div>
 			</div>
 		</Container>

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

@@ -17,6 +17,11 @@ interface Props {
     recordVisit?: boolean;
     center?: Snippet;
     max?: boolean;
+    logoAltText?: string;
+    copyEmailLabel?: string;
+    copiedLabel?: string;
+    gdprText?: string;
+    fromFranceText?: string;
 }
 declare const Footer: import("svelte").Component<Props, {}, "">;
 type Footer = ReturnType<typeof Footer>;

package/dist/marketing/FullTrialSignup/FullTrialSignup.svelte

@@ -0,0 +1,164 @@
+<script lang="ts">
+	import Button from '../../components/Button/Button.svelte';
+	import IconCheckCircleFill from '@hyvor/icons/IconCheckCircleFill';
+
+	type ButtonConfig = { href: string; label: string; external?: boolean };
+
+	interface Props {
+		badge?: string | null;
+		title?: string;
+		description?: string;
+		button?: ButtonConfig | ButtonConfig[] | null;
+		checks?: string[];
+		accentColor?: string;
+		accentColorDark?: string;
+		[key: string]: any;
+	}
+
+	let {
+		badge = null,
+		title = 'Start your trial today',
+		description = '',
+		button = null,
+		checks = ['14-day free trial', 'No credit card required', 'Cancel anytime'],
+		accentColor,
+		accentColorDark,
+		...rest
+	}: Props = $props();
+
+	const buttons = $derived(button ? (Array.isArray(button) ? button : [button]) : []);
+</script>
+
+<section
+	class="hds-full-trial-signup"
+	style:--fts-accent={accentColor}
+	style:--fts-accent-dark={accentColorDark}
+	{...rest}
+>
+	<div class="hds-container inner">
+		{#if badge}
+			<div class="badge">{badge}</div>
+		{/if}
+
+		<h2>{title}</h2>
+
+		{#if description}
+			<p>{description}</p>
+		{/if}
+
+		{#if buttons.length}
+			<div class="cta-actions">
+				{#each buttons as b}
+					<Button
+						as="a"
+						size="large"
+						href={b.href}
+						target={b.external ? '_blank' : undefined}
+						rel={b.external ? 'noopener' : undefined}
+					>
+						{b.label}
+					</Button>
+				{/each}
+			</div>
+		{/if}
+
+		{#if checks.length}
+			<div class="checks">
+				{#each checks as check}
+					<div class="check">
+						<IconCheckCircleFill size={15} />
+						{check}
+					</div>
+				{/each}
+			</div>
+		{/if}
+	</div>
+</section>
+
+<style>
+	.hds-full-trial-signup {
+		--fts-accent-resolved: var(--fts-accent, var(--accent));
+		padding: 96px 0 138px;
+		background: linear-gradient(
+			to bottom,
+			var(--background, var(--box-background)),
+			color-mix(in srgb, var(--fts-accent-resolved) 40%, var(--background, var(--box-background)))
+		);
+		text-align: center;
+	}
+
+	:global(:root.dark) .hds-full-trial-signup {
+		--fts-accent-resolved: var(--fts-accent-dark, var(--fts-accent, var(--accent)));
+	}
+
+	.inner {
+		width: 600px;
+		max-width: 100%;
+	}
+
+	.badge {
+		display: inline-flex;
+		padding: 4px 14px;
+		border-radius: 100px;
+		font-size: 13px;
+		font-weight: 600;
+		background: color-mix(in srgb, var(--fts-accent-resolved) 12%, transparent);
+		color: var(--fts-accent-resolved);
+		border: 1px solid color-mix(in srgb, var(--fts-accent-resolved) 25%, transparent);
+		margin-bottom: 24px;
+	}
+
+	h2 {
+		font-size: clamp(28px, 4vw, 40px);
+		font-weight: 800;
+		margin: 0 0 12px;
+		letter-spacing: -0.02em;
+		font-family: var(--font-serif);
+	}
+
+	p {
+		font-size: 1rem;
+		color: var(--text-light);
+		margin: 0 0 32px;
+	}
+
+	.cta-actions {
+		display: flex;
+		justify-content: center;
+		flex-wrap: wrap;
+		gap: 12px;
+		margin: 0 0 24px;
+	}
+
+	.checks {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		gap: 20px;
+		flex-wrap: wrap;
+		margin-top: 24px;
+	}
+
+	.check {
+		display: flex;
+		align-items: center;
+		gap: 6px;
+		font-size: 14px;
+		color: var(--text-light);
+	}
+
+	.check :global(svg) {
+		color: var(--fts-accent-resolved);
+	}
+
+	@media (max-width: 600px) {
+		.checks {
+			flex-direction: column;
+			align-items: flex-start;
+			width: fit-content;
+			max-width: 100%;
+			margin: 24px auto 0;
+			gap: 10px;
+		}
+	}
+</style>

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

@@ -0,0 +1,18 @@
+type ButtonConfig = {
+    href: string;
+    label: string;
+    external?: boolean;
+};
+interface Props {
+    badge?: string | null;
+    title?: string;
+    description?: string;
+    button?: ButtonConfig | ButtonConfig[] | null;
+    checks?: string[];
+    accentColor?: string;
+    accentColorDark?: string;
+    [key: string]: any;
+}
+declare const FullTrialSignup: import("svelte").Component<Props, {}, "">;
+type FullTrialSignup = ReturnType<typeof FullTrialSignup>;
+export default FullTrialSignup;

package/dist/marketing/Header/Header.svelte

@@ -20,6 +20,8 @@
 		center?: Snippet;
 		end?: Snippet;
 		max?: boolean;
+		logoAltText?: string;
+		menuLabel?: string;
 	}
 
 	let {
@@ -32,7 +34,9 @@
 		darkToggle = true,
 		center,
 		end,
-		max = false
+		max = false,
+		logoAltText = 'Logo',
+		menuLabel = 'Menu'
 	}: Props = $props();
 
 	let scrolled = $state(false);
@@ -61,7 +65,7 @@
 			<a class="nav-brand" {href}>
 				<img
 					src={logo || `${instance}/api/public/logo/${product}.svg`}
-					alt="{name + (subName ? ' ' + subName : '')} Logo"
+					alt="{name + (subName ? ' ' + subName : '')} {logoAltText}"
 					width="26"
 					height="26"
 				/>
@@ -93,7 +97,7 @@
 		<span class="mobile-nav-wrap">
 			<Dropdown bind:show={mobileOpen} align="end" width={300} contentPadding={8}>
 				{#snippet trigger()}
-					<IconButton variant="invisible" aria-label="Menu">
+					<IconButton variant="invisible" aria-label={menuLabel} aria-expanded={mobileOpen}>
 						{#if mobileOpen}
 							<IconX size={18} />
 						{:else}

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

@@ -10,6 +10,8 @@ interface Props {
     center?: Snippet;
     end?: Snippet;
     max?: boolean;
+    logoAltText?: string;
+    menuLabel?: string;
 }
 declare const Header: import("svelte").Component<Props, {}, "">;
 type Header = ReturnType<typeof Header>;