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

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

	let { t }: { t: Bundle; locale?: Locale } = $props();
</script>

<section id="engagement" class="section">
	<div class="container">
		<FlagChip />
		<h2 class="section-title">
			<KineticText as="span" text={t.engagement.section_title} />&#32;
			<span class="accent-text"
				><KineticText as="span" text={t.engagement.section_title_accent} /></span
			>
		</h2>
		<p class="section-subtitle">{t.engagement.section_subtitle}</p>

		<div class="engagement-options">
			{#each t.engagement.cards as card, i (card.title)}
				<div class="engagement-card" use:reveal={i}>
					<div class="engagement-icon reveal-pop" use:reveal={i + 1}>
						<svg class="icon" aria-hidden="true"
							><use href="/icons.svg#{pictoFor(card.icon)}" /></svg
						>
					</div>
					<h3>{card.title}</h3>
					<p>{card.text}</p>
					<a href="#contact" class="btn btn-solid">{card.cta}</a>
				</div>
			{/each}
		</div>
	</div>
</section>

<style>
	.section-title {
		text-align: center;
	}

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

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

	.engagement-options {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
		gap: 1.5rem;
		margin: 3rem 0;
	}

	.engagement-card {
		background: var(--card-bg);
		border: var(--border-card);
		border-top: 4px solid var(--or-oki);
		border-radius: var(--radius-md);
		padding: 2.5rem;
		text-align: center;
		transition: transform var(--dur-tanbou) var(--ease-ka);
	}

	.engagement-card:hover {
		transform: translateY(-4px);
	}

	.engagement-icon {
		color: var(--or-oki);
		margin-bottom: 1rem;
	}

	.engagement-icon .icon {
		width: 2.25rem;
		height: 2.25rem;
	}

	.engagement-card h3 {
		color: var(--or-oki);
		margin-bottom: 1rem;
		font-size: 1.35rem;
	}

	.engagement-card p {
		margin-bottom: 1.5rem;
		line-height: 1.6;
	}

	@media (max-width: 768px) {
		.engagement-options {
			grid-template-columns: 1fr;
		}
	}
</style>