oki-foundation/src/lib/components/sections/Clients.svelte

<script lang="ts">
	import KineticText from '$lib/components/motion/KineticText.svelte';
	import ResponsiveImage from '$lib/components/ResponsiveImage.svelte';
	import type { Bundle, Locale } from '$lib/i18n';

	import kaubuntuCom from '$lib/assets/images/clients/kaubuntu-com.png?format=avif;webp;png&w=320;640&as=picture';
	import kaubuntuRe from '$lib/assets/images/clients/kaubuntu-re.png?format=avif;webp;png&w=320;640&as=picture';
	import kbm from '$lib/assets/images/clients/kbm.gp.webp?format=avif;webp&w=320;640&as=picture';

	let { t }: { t: Bundle; locale?: Locale } = $props();

	const LOGOS: Record<string, typeof kaubuntuCom> = {
		'/assets/images/clients/kaubuntu-com.png': kaubuntuCom,
		'/assets/images/clients/kaubuntu-re.png': kaubuntuRe,
		'/assets/images/clients/kbm.gp.webp': kbm
	};
</script>

<section id="clients" class="section">
	<div class="container">
		<h2 class="section-title">
			<KineticText as="span" text={t.clients.section_title} />{' '}
			<span class="accent-text"
				><KineticText as="span" text={t.clients.section_title_accent} /></span
			>
		</h2>
		<p class="section-subtitle">{t.clients.section_subtitle}</p>

		<div class="clients-grid">
			{#each t.clients.items as client (client.domain)}
				<a href={client.url} target="_blank" rel="noopener noreferrer" class="client-card">
					<div class="client-logo-container">
						<ResponsiveImage
							picture={LOGOS[client.logo]}
							alt="Logo {client.name}"
							sizes="130px"
							class="client-logo"
						/>
					</div>
					<h3>{client.name}</h3>
					<p class="client-domain">{client.domain}</p>
					<p class="client-description">{client.description}</p>
					<span class="client-link">{t.clients.link_text} →</span>
				</a>
			{/each}
		</div>
	</div>
</section>

<style>
	section {
		background: var(--noir-profond);
	}

	.section-title {
		text-align: center;
	}

	.accent-text {
		color: var(--or-oki);
	}

	.section-subtitle {
		text-align: center;
		margin-left: auto;
		margin-right: auto;
	}

	.clients-grid {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
		gap: 1.5rem;
		margin-top: 3rem;
		max-width: 900px;
		margin-left: auto;
		margin-right: auto;
	}

	.client-card {
		background: var(--card-bg);
		border: var(--border-card);
		border-top: 4px solid var(--turquoise-caraibes);
		border-radius: var(--radius-md);
		padding: 2.5rem;
		text-align: center;
		display: flex;
		flex-direction: column;
		align-items: center;
		color: inherit;
		transition:
			transform var(--dur-tanbou) var(--ease-ka),
			border-color var(--dur-tanbou) var(--ease-ka);
	}

	.client-card:hover {
		transform: translateY(-4px);
		border-top-color: var(--or-oki);
	}

	.client-logo-container {
		width: 130px;
		height: 130px;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-bottom: 1.5rem;
		background: color-mix(in srgb, var(--blanc-creme) 4%, transparent);
		border-radius: var(--radius-md);
		padding: 1rem;
	}

	.client-logo-container :global(picture) {
		display: contents;
	}

	.client-logo-container :global(.client-logo) {
		max-width: 100%;
		max-height: 100%;
		object-fit: contain;
	}

	.client-card h3 {
		color: var(--or-oki);
		margin-bottom: 0.5rem;
		font-size: 1.3rem;
	}

	.client-domain {
		color: var(--rouge-oki);
		font-size: 0.9rem;
		margin-bottom: 1rem;
		font-family: monospace;
		text-transform: none;
	}

	.client-description {
		line-height: 1.6;
		margin-bottom: 1.5rem;
		flex-grow: 1;
	}

	.client-link {
		color: var(--or-oki);
		font-weight: 600;
		display: inline-flex;
		align-items: center;
		gap: 0.4rem;
		transition: gap var(--dur-tanbou) var(--ease-ka);
	}

	.client-card:hover .client-link {
		gap: 0.6rem;
	}
</style>