@hyvor/design 2.1.8-beta.2 → 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/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;