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

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

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

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

		<!-- Scène « village créole » : remplace la grille de cards du legacy
		     (composant autonome, fallback grille accessible inclus). -->
		<HostingVillage {t} {locale} />
	</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;
	}
</style>