@hyvor/design 2.1.8-beta.1 → 2.1.8

package/dist/marketing/Footer/Footer.svelte

@@ -1,18 +1,17 @@
 <script lang="ts">
-	import type { Snippet } from 'svelte';
 	import Container from '../Container/Container.svelte';
-	import IconEnvelope from '@hyvor/icons/IconEnvelope';
 	import IconCopy from '@hyvor/icons/IconCopy';
 	import IconDiscord from '@hyvor/icons/IconDiscord';
+	import IconEnvelope from '@hyvor/icons/IconEnvelope';
 	import IconGithub from '@hyvor/icons/IconGithub';
 	import IconLinkedin from '@hyvor/icons/IconLinkedin';
 	import IconTwitterX from '@hyvor/icons/IconTwitterX';
 	import IconYoutube from '@hyvor/icons/IconYoutube';
-	import IconBluesky from '@hyvor/icons/IconBluesky';
-	import IconLockFill from '@hyvor/icons/IconLockFill';
+	import Link from '../../components/Link/Link.svelte';
 	import IconButton from '../../components/IconButton/IconButton.svelte';
 	import Tooltip from '../../components/Tooltip/Tooltip.svelte';
 	import LanguageToggle from '../../components/Internationalization/LanguageToggle.svelte';
+	import IconBluesky from '@hyvor/icons/IconBluesky';
 	import { SOCIAL_LINKS, type Socials } from '../social.js';
 	import Affiliate from '../Affiliate/Affiliate.svelte';
 	import RecordVisit from './RecordVisit.svelte';
@@ -20,207 +19,104 @@
 	const year = new Date().getFullYear();
 
 	interface Props {
-		name?: string;
-		subname?: string;
-		product?: string;
-		instance?: string;
-		logo?: string;
-		background?: string;
-		backgroundDark?: string;
-		card?: boolean;
 		email?: string | null;
 		social?: Partial<Socials>;
-		languageToggle?: boolean;
-		gdpr?: boolean;
+		center?: import('svelte').Snippet;
 		affiliate?: boolean;
 		recordVisit?: boolean;
-		center?: Snippet;
 		max?: boolean;
 	}
 
 	let {
-		name = 'HYVOR',
-		subname,
-		product,
-		instance = 'https://hyvor.com',
-		logo,
-		background,
-		backgroundDark,
-		card = false,
 		email = null,
-		social = {},
-		languageToggle = true,
-		gdpr = true,
+		social = $bindable({} as Record<string, string | null>),
+		center,
 		affiliate = true,
 		recordVisit = true,
-		center,
 		max = false
 	}: 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)
-	);
-
-	const socialLinks = $derived({ ...SOCIAL_LINKS, ...social });
-
-	const SOCIAL_PLATFORMS = [
-		{ key: 'x', icon: IconTwitterX, label: 'X (Twitter)' },
-		{ key: 'github', icon: IconGithub, label: 'GitHub' },
-		{ key: 'discord', icon: IconDiscord, label: 'Discord' },
-		{ key: 'linkedin', icon: IconLinkedin, label: 'LinkedIn' },
-		{ key: 'youtube', icon: IconYoutube, label: 'YouTube' },
-		{ key: 'bluesky', icon: IconBluesky, label: 'Bluesky' }
-	] as const satisfies { key: keyof Socials; icon: unknown; label: string }[];
+	social = {
+		...SOCIAL_LINKS,
+		...social
+	};
 
 	let emailCopied = $state(false);
-	function handleCopyEmail() {
-		if (!email) return;
-		navigator.clipboard.writeText(email);
-		emailCopied = true;
-		setTimeout(() => (emailCopied = false), 1000);
-	}
 
-	// the floating mascot (only shown when a `logo` is given) tilts/fades in
-	// once it's scrolled into view, instead of just appearing on page load
-	let mascotInView = $state(false);
-	function onView(node: HTMLElement, callback: () => void) {
-		const observer = new IntersectionObserver(
-			(entries) => {
-				if (entries[0]?.isIntersecting) {
-					setTimeout(callback, 400);
-					observer.disconnect();
-				}
-			},
-			{ threshold: 0.3 }
-		);
-		observer.observe(node);
-		return {
-			destroy() {
-				observer.disconnect();
-			}
-		};
-	}
-
-	// a single 5-pointed star (outer/inner vertices alternating), centered on
-	// its own origin — reused via `transform="translate(...)"` per position
-	// below, rather than a plain dot, for the EU ring on the GDPR badge
-	function starPath(outerR: number, innerR: number) {
-		const points: string[] = [];
-		for (let i = 0; i < 10; i++) {
-			const angle = -Math.PI / 2 + (i * Math.PI) / 5;
-			const r = i % 2 === 0 ? outerR : innerR;
-			points.push(`${(r * Math.cos(angle)).toFixed(2)},${(r * Math.sin(angle)).toFixed(2)}`);
-		}
-		return `M${points.join('L')}Z`;
+	function handleCopy() {
+		navigator.clipboard.writeText(email!);
+		emailCopied = true;
+		setTimeout(() => {
+			emailCopied = false;
+		}, 1000);
 	}
-	const gdprStarPath = starPath(1.7, 0.68);
-
-	// positions for the 12-star EU ring on the small GDPR badge
-	const gdprStars = Array.from({ length: 12 }, (_, i) => {
-		const angle = (i * 30 * Math.PI) / 180;
-		return {
-			x: 16 + 12 * Math.cos(angle),
-			y: 16 + 12 * Math.sin(angle)
-		};
-	});
 </script>
 
-<div class="footer-outer">
-	{#if mascotLogo}
-		<div class="mascot-wrap" use:onView={() => (mascotInView = true)}>
-			<img
-				src={mascotLogo}
-				alt="{name} Logo"
-				width="100"
-				height="100"
-				class:in-view={mascotInView}
-			/>
-		</div>
-	{/if}
+<footer>
+	<Container {max}>
+		<div class="footer-top">
+			<div class="footer-top-left">
+				{#if email}
+					<div class="email-wrap">
+						<Link href="mailto:{email}" underline={false} color="text" rel="nofollow">
+							{#snippet start()}
+								<IconEnvelope />
+							{/snippet}
+							{email}
+						</Link>
+						<Tooltip text={emailCopied ? 'Copied!' : 'Copy email'} position="top">
+							<IconButton
+								size="small"
+								variant="invisible"
+								on:click={handleCopy}
+								on:mouseleave={() => (emailCopied = false)}
+							>
+								<IconCopy size={12} />
+							</IconButton>
+						</Tooltip>
+					</div>
+				{/if}
 
-	<footer class:card style:--footer-bg={background} style:--footer-bg-dark={backgroundDark}>
-		<Container {max}>
-			<div class="top-row">
-				<div class="brand">
-					<span>{name}</span>
-					{#if subname}
-						<div class="subname">{subname}</div>
+				<div class="social-media">
+					{#if social.github}
+						<a href={social.github} target="_blank" rel="nofollow"><IconGithub /></a>
 					{/if}
-				</div>
-
-				<div class="top-row-right">
-					{#if email}
-						<div class="email-wrap">
-							<a class="email" href="mailto:{email}">
-								<IconEnvelope size={14} />
-								{email}
-							</a>
-							<Tooltip text={emailCopied ? 'Copied!' : 'Copy email'} position="top">
-								<IconButton
-									size="small"
-									variant="invisible"
-									onclick={handleCopyEmail}
-									onmouseleave={() => (emailCopied = false)}
-								>
-									<IconCopy size={12} />
-								</IconButton>
-							</Tooltip>
-						</div>
+					{#if social.discord}
+						<a href={social.discord} target="_blank" rel="nofollow"><IconDiscord /></a>
 					{/if}
-
-					<div class="socials">
-						{#each SOCIAL_PLATFORMS as platform (platform.key)}
-							{@const href = socialLinks[platform.key]}
-							{#if href}
-								<a {href} target="_blank" rel="nofollow" aria-label={platform.label}>
-									<platform.icon size={16} />
-								</a>
-							{/if}
-						{/each}
-					</div>
-
-					{#if languageToggle}
-						<span class="language-toggle-wrap">
-							<LanguageToggle align="end" position="top" staticPage />
-						</span>
+					{#if social.blueksy}
+						<a href={social.blueksy} target="_blank" rel="nofollow"><IconBluesky /></a>
+					{/if}
+					{#if social.x}
+						<a href={social.x} target="_blank" rel="nofollow"><IconTwitterX /></a>
+					{/if}
+					{#if social.youtube}
+						<a href={social.youtube} target="_blank" rel="nofollow"><IconYoutube /></a>
+					{/if}
+					{#if social.linkedin}
+						<a href={social.linkedin} target="_blank" rel="nofollow"><IconLinkedin /></a>
 					{/if}
 				</div>
 			</div>
 
-			<div class="footer-center">
-				{@render center?.()}
+			<div class="footer-top-right">
+				<span class="language-toggle-wrap">
+					<LanguageToggle align="end" position="top" staticPage />
+				</span>
 			</div>
+		</div>
 
-			<div class="bottom-bar">
-				<div>HYVOR &copy; {year}</div>
-
-				{#if gdpr}
-					<div class="bottom-center">
-						<a class="gdpr-chip" href="https://hyvor.com/compliance" target="_blank">
-							<span class="gdpr-chip-icon">
-								<svg class="ring" viewBox="0 0 32 32" aria-hidden="true">
-									<circle cx="16" cy="16" r="16" fill="#173a8a" />
-									{#each gdprStars as s}
-										<path d={gdprStarPath} fill="#ffcd3c" transform="translate({s.x}, {s.y})" />
-									{/each}
-								</svg>
-								<span class="lock"><IconLockFill size={10} /></span>
-							</span>
-							<span class="gdpr-chip-text">GDPR Compliant</span>
-						</a>
-					</div>
-				{/if}
+		<div class="footer-center">
+			{@render center?.()}
+		</div>
 
-				<div class="bottom-right">
-					<div class="france">From France <span class="flag">🇫🇷</span></div>
-				</div>
+		<div class="footer-bottom">
+			<div class="footer-bottom-left">
+				HYVOR © {year}
 			</div>
-		</Container>
-	</footer>
+			<div class="footer-bottom-right">From France 🇫🇷</div>
+		</div>
+	</Container>
 
 	{#if affiliate}
 		<Affiliate />
@@ -229,252 +125,57 @@
 	{#if recordVisit}
 		<RecordVisit />
 	{/if}
-</div>
+</footer>
 
 <style>
-	.footer-outer {
-		position: relative;
-		margin-top: 100px;
-	}
-
-	.mascot-wrap {
-		position: absolute;
-		z-index: 10;
-		display: flex;
-		justify-content: center;
-		pointer-events: none;
-		left: 0;
-		bottom: 100%;
-		transform: translate(-35%, 45%) rotate(20deg);
-	}
-
-	.mascot-wrap img {
-		opacity: 0;
-	}
-
-	.mascot-wrap img.in-view {
-		animation: mascot-tilt-in 0.8s ease forwards;
-	}
-
-	@keyframes mascot-tilt-in {
-		0% {
-			opacity: 0;
-			transform: rotate(-14deg) scale(0.9) translateY(16px);
-		}
-		55% {
-			opacity: 1;
-			transform: rotate(10deg) scale(1.06) translateY(-4px);
-		}
-		100% {
-			opacity: 1;
-			transform: rotate(0deg) scale(1) translateY(0);
-		}
-	}
-
-	@media (prefers-reduced-motion: reduce) {
-		.mascot-wrap img {
-			opacity: 1;
-		}
-		.mascot-wrap img.in-view {
-			animation: none;
-		}
-	}
-
 	footer {
-		--footer-text: var(--text);
-		--footer-text-strong: var(--text);
-		--footer-muted: var(--text-light);
-		--footer-border: var(--border);
-		--footer-hover: var(--accent);
-
-		position: relative;
-		z-index: 1;
-		background: var(--footer-bg, transparent);
-		color: var(--footer-text);
-		padding-top: 50px;
-	}
-
-	/*
-		`backgroundDark` only when needed for dark mode - not complusory
-	*/
-	:global(:root.dark) footer {
-		background: var(--footer-bg-dark, var(--footer-bg, transparent));
+		border-top: 1px solid var(--border);
 	}
 
-	footer.card {
-		--footer-text: rgba(255, 255, 255, 0.75);
-		--footer-text-strong: #fff;
-		--footer-muted: rgba(255, 255, 255, 0.45);
-		--footer-border: rgba(255, 255, 255, 0.08);
-		--footer-hover: #fff;
-	}
-
-	.top-row {
+	.footer-top {
+		padding-top: 60px;
 		display: flex;
-		align-items: center;
-		justify-content: space-between;
-		flex-wrap: wrap;
-		gap: 20px;
-		padding-bottom: 40px;
-		border-bottom: 1px solid var(--footer-border);
+		align-items: flex-start;
 	}
-
-	.brand {
-		font-size: 16px;
-		font-weight: 700;
-		color: var(--footer-text-strong);
+	.footer-center {
+		padding-top: 50px;
 	}
-
-	.subname {
-		font-size: 13px;
-		font-weight: 400;
-		color: var(--footer-muted);
+	.footer-top-left {
+		flex: 1;
 	}
-
-	.top-row-right {
+	.footer-top-right {
 		display: flex;
-		align-items: center;
-		gap: 24px;
-		flex-wrap: wrap;
 	}
-
 	.email-wrap {
 		display: inline-flex;
 		align-items: center;
-		gap: 2px;
+		gap: 4px;
+		margin-bottom: 15px;
 	}
-
-	.email {
-		display: inline-flex;
-		align-items: center;
-		gap: 6px;
-		font-size: 13px;
-		color: var(--footer-text);
+	.social-media a {
+		display: inline-block;
+		padding: 3px;
+		margin-right: 8px;
+		color: var(--text-light);
 	}
-
-	.email:hover {
-		color: var(--footer-hover);
+	.social-media a:first-child {
+		padding-left: 0;
 	}
-
-	.socials {
-		display: flex;
-		align-items: center;
-		gap: 14px;
+	.social-media a:hover {
+		color: var(--accent);
 	}
 
-	.socials a {
-		color: var(--footer-text);
+	.footer-bottom {
+		padding-top: 50px;
+		padding-bottom: 30px;
 		display: flex;
 	}
-
-	.socials a:hover {
-		color: var(--footer-hover);
+	.footer-bottom-left {
+		flex: 1;
 	}
 
 	.language-toggle-wrap {
+		margin-left: 8px;
 		font-size: 18px;
 	}
-
-	.footer-center:not(:empty) {
-		padding: 48px 0;
-	}
-
-	/* only if there is no center element - to prevent double border apperance */
-	.footer-center:not(:empty) + .bottom-bar {
-		border-top: 1px solid var(--footer-border);
-	}
-
-	.bottom-bar {
-		display: flex;
-		align-items: center;
-		justify-content: space-between;
-		flex-wrap: wrap;
-		gap: 10px;
-		padding: 24px 0 32px;
-		font-size: 13px;
-		color: var(--footer-muted);
-	}
-
-	.bottom-right {
-		display: flex;
-		align-items: center;
-		gap: 16px;
-		flex-wrap: wrap;
-	}
-
-	.france {
-		display: inline-flex;
-		align-items: center;
-		gap: 6px;
-	}
-
-	.gdpr-chip {
-		display: inline-flex;
-		align-items: center;
-		gap: 8px;
-		padding: 5px 12px 5px 5px;
-		border-radius: 100px;
-		background: #1f2f57;
-		color: #fff;
-		opacity: 0.9;
-		transition: opacity 0.15s ease;
-	}
-
-	.gdpr-chip:hover {
-		opacity: 1;
-	}
-
-	.gdpr-chip-icon {
-		position: relative;
-		width: 22px;
-		height: 22px;
-		flex-shrink: 0;
-	}
-
-	.gdpr-chip-icon .ring {
-		position: absolute;
-		inset: 0;
-		width: 100%;
-		height: 100%;
-		display: block;
-	}
-
-	.gdpr-chip-icon .lock {
-		position: absolute;
-		inset: 0;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		color: #fff;
-	}
-
-	.gdpr-chip-text {
-		font-size: 11px;
-		font-weight: 800;
-		letter-spacing: 0.02em;
-		color: #fff;
-	}
-
-	/* emoji glyphs are pre-colored — never let the surrounding muted text
-	   color dim or filter them */
-	.flag {
-		color: initial;
-		filter: none;
-	}
-
-	@media (max-width: 560px) {
-		.mascot-wrap {
-			/* keep it clear of the brand wordmark that sits right below it */
-			margin-bottom: -40px;
-		}
-
-		footer {
-			padding-top: 130px;
-		}
-
-		.top-row {
-			flex-direction: column;
-			align-items: flex-start;
-		}
-	}
 </style>

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

@@ -1,23 +1,12 @@
-import type { Snippet } from 'svelte';
 import { type Socials } from '../social.js';
 interface Props {
-    name?: string;
-    subname?: string;
-    product?: string;
-    instance?: string;
-    logo?: string;
-    background?: string;
-    backgroundDark?: string;
-    card?: boolean;
     email?: string | null;
     social?: Partial<Socials>;
-    languageToggle?: boolean;
-    gdpr?: boolean;
+    center?: import('svelte').Snippet;
     affiliate?: boolean;
     recordVisit?: boolean;
-    center?: Snippet;
     max?: boolean;
 }
-declare const Footer: import("svelte").Component<Props, {}, "">;
+declare const Footer: import("svelte").Component<Props, {}, "social">;
 type Footer = ReturnType<typeof Footer>;
 export default Footer;

package/dist/marketing/Footer/FooterLinkList.svelte

@@ -17,16 +17,12 @@
 <style>
 	.link-list {
 		flex: 1;
-		min-width: 150px;
 	}
 
 	.title {
-		font-size: 12px;
-		font-weight: 700;
+		font-weight: 600;
 		text-transform: uppercase;
-		letter-spacing: 0.05em;
-		color: var(--footer-muted, var(--text-light));
-		margin-bottom: 14px;
+		margin-bottom: 10px;
 	}
 
 	.links {
@@ -36,12 +32,9 @@
 	}
 
 	.links :global(a) {
-		font-size: 14px;
-		color: var(--footer-text, var(--text-light));
-		margin-top: 10px;
+		margin-top: 12px;
 	}
 	.links :global(a:hover) {
-		color: var(--footer-text-strong, var(--text));
 		text-decoration: underline;
 	}
 </style>