@hyvor/design 2.1.8-beta.2 → 2.1.8-beta.4

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;

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;

package/dist/marketing/Seal/IsoSeal.svelte

@@ -0,0 +1,44 @@
+<script lang="ts">
+	import IconAwardFill from '@hyvor/icons/IconAwardFill';
+	import Seal from './Seal.svelte';
+
+	interface Props {
+		size?: number;
+	}
+
+	let { size = 100 }: Props = $props();
+</script>
+
+<Seal {size} pending>
+	<span class="icon">
+		<IconAwardFill size={20} />
+	</span>
+	<span class="label">ISO 27001</span>
+	<span class="note">Soon</span>
+</Seal>
+
+<style>
+	.icon {
+		display: flex;
+		color: rgba(255, 255, 255, 0.45);
+	}
+
+	.label {
+		font-size: 11px;
+		font-weight: 700;
+		letter-spacing: 0.02em;
+		color: rgba(255, 255, 255, 0.55);
+	}
+
+	.note {
+		position: absolute;
+		bottom: -10px;
+		font-size: 10px;
+		font-weight: 600;
+		padding: 2px 8px;
+		border-radius: 100px;
+		color: rgba(255, 255, 255, 0.6);
+		background: rgba(255, 255, 255, 0.1);
+		white-space: nowrap;
+	}
+</style>

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

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

package/dist/marketing/Seal/Seal.svelte

@@ -0,0 +1,62 @@
+<script lang="ts">
+	interface Props {
+		pending?: boolean;
+		size?: number;
+		children: import('svelte').Snippet;
+	}
+
+	let { pending = false, size = 100, children }: Props = $props();
+
+	const scale = $derived(size / 100);
+</script>
+
+<div class="seal" class:pending style="--scale: {scale};">
+	<div class="seal-inner">
+		{@render children()}
+	</div>
+</div>
+
+<style>
+	.seal {
+		position: relative;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		width: calc(var(--scale) * 100px);
+		height: calc(var(--scale) * 100px);
+		border-radius: calc(var(--scale) * 100px);
+		background: radial-gradient(
+			circle at 50% 42%,
+			rgba(255, 255, 255, 0.09),
+			rgba(255, 255, 255, 0.015) 72%
+		);
+	}
+
+	.seal.pending {
+		background: none;
+		border: 1.5px dashed rgba(255, 255, 255, 0.16);
+	}
+
+	.seal-inner {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+		gap: 5px;
+		width: 100px;
+		height: 100px;
+		transform: scale(var(--scale));
+	}
+
+	@media (max-width: 768px) {
+		.seal {
+			width: calc(var(--scale) * 76px);
+			height: calc(var(--scale) * 76px);
+			border-radius: calc(var(--scale) * 76px);
+		}
+
+		.seal-inner {
+			transform: scale(calc(var(--scale) * 0.76));
+		}
+	}
+</style>

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

@@ -0,0 +1,8 @@
+interface Props {
+    pending?: boolean;
+    size?: number;
+    children: import('svelte').Snippet;
+}
+declare const Seal: import("svelte").Component<Props, {}, "">;
+type Seal = ReturnType<typeof Seal>;
+export default Seal;

package/dist/marketing/Seal/SsoSeal.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+	import IconShieldLockFill from '@hyvor/icons/IconShieldLockFill';
+	import Seal from './Seal.svelte';
+
+	interface Props {
+		size?: number;
+	}
+
+	let { size = 100 }: Props = $props();
+</script>
+
+<Seal {size}>
+	<span class="icon">
+		<IconShieldLockFill size={22} />
+	</span>
+	<span class="label">SSO</span>
+</Seal>
+
+<style>
+	.icon {
+		display: flex;
+		color: #e3b34a;
+	}
+
+	.label {
+		font-size: 13px;
+		font-weight: 700;
+		letter-spacing: 0.03em;
+		color: #fff;
+	}
+</style>

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

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