gong.gp/src/lib/components/Footer.svelte

<script lang="ts">
	import Icon from './Icon.svelte';
	import { contact } from '$lib/data/gong';

	const sections = [
		{
			titre: 'Le mouvement',
			liens: [
				{ href: '/histoire/', label: 'Histoire' },
				{ href: '/me-67/', label: 'Mé 67 (1967)' },
				{ href: '/proces-1968/', label: 'Procès de 1968' },
				{ href: '/militants/', label: 'Militants & fondateurs' },
				{ href: '/ideologie/', label: 'Idéologie' },
				{ href: '/heritage/', label: 'Héritage' }
			]
		},
		{
			titre: 'Documents',
			liens: [
				{ href: '/archives/', label: 'Archives — Gong-Information' },
				{ href: '/charte/', label: 'Charte de 1963' },
				{ href: '/orientation/', label: 'Orientation & stratégie' },
				{ href: '/publications/', label: 'Publications' },
				{ href: '/sources/', label: 'Sources & bibliographie' },
				{ href: '/faq/', label: "Qu'est-ce que le GONG ?" }
			]
		},
		{
			titre: 'Le site',
			liens: [
				{ href: '/actualites/', label: 'Actualités' },
				{ href: '/contact/', label: 'Contact' },
				{ href: '/mentions-legales/', label: 'Mentions légales' }
			]
		}
	];
	const annee = new Date().getFullYear();
</script>

<footer class="site-footer">
	<div class="flag-bar" aria-hidden="true"></div>
	<div class="container site-footer__inner">
		<blockquote class="site-footer__cite">
			<p lang="fr">
				« Les générations futures se doivent de continuer le combat, avec les moyens qu'elles ont
				maintenant à leur disposition, et le mener à son terme, de telle sorte qu'un jour notre pays
				et les Guadeloupéens soient libérés des ventouses tentaculaires et séculaires qu'est le
				colonialisme français. »
			</p>
			<cite>Serge Glaude — co-fondateur du GONG</cite>
		</blockquote>

		<nav class="site-footer__grid" aria-label="Plan du site">
			{#each sections as s (s.titre)}
				<div>
					<h2 class="site-footer__title">{s.titre}</h2>
					<ul>
						{#each s.liens as l (l.href)}
							<li><a href={l.href} class="no-underline">{l.label}</a></li>
						{/each}
					</ul>
				</div>
			{/each}
			<div>
				<h2 class="site-footer__title">Nous suivre</h2>
				<div class="site-footer__social">
					<a href="mailto:{contact.email}" class="no-underline" aria-label="E-mail (ProtonMail)">
						<Icon name="mail" /> <span>{contact.email}</span>
					</a>
					<a
						href={contact.bokante}
						rel="external noopener noreferrer"
						target="_blank"
						class="no-underline"
						aria-label="Bokante (réseau social)"
					>
						<Icon name="globe" /> <span>Bokante</span>
					</a>
					<a
						href={contact.gade}
						rel="external noopener noreferrer"
						target="_blank"
						class="no-underline"
						aria-label="Gade (vidéos PeerTube)"
					>
						<Icon name="video" /> <span>Gade — vidéos</span>
					</a>
				</div>
			</div>
		</nav>

		<div class="site-footer__federe">
			<p>
				<img src="/img/gong.png" alt="" width="28" height="28" />
				Un site opéré par
				<a href="https://o-k-i.net" rel="external noopener noreferrer" target="_blank">ORGANISATION KA INTERNATIONALE</a>
				· <span lang="gcf">An mémwè a tout sé moun-la ki goumé.</span>
			</p>
			<p class="site-footer__legal">
				© {annee} GONG — Contenu sous licence
				<a href="https://www.gnu.org/licenses/agpl-3.0.html" rel="external noopener noreferrer" target="_blank">AGPL-3.0</a>.
				<a href="/mentions-legales/" class="no-underline">Mentions légales</a>
			</p>
		</div>
	</div>
</footer>

<style>
	.site-footer {
		margin-top: var(--space-6);
		background: var(--noir-profond);
		border-top: 1px solid var(--line);
	}
	.site-footer__inner {
		padding-block: var(--space-4);
		display: grid;
		gap: var(--space-4);
	}
	.site-footer__cite {
		margin: 0;
		max-width: 62ch;
		border-left: 4px solid var(--accent);
		padding-left: var(--space-2);
	}
	.site-footer__cite p {
		font-style: italic;
		color: var(--muted);
	}
	.site-footer__cite cite {
		font-style: normal;
		font-weight: 600;
		color: var(--creme);
		font-size: 0.9rem;
	}
	.site-footer__grid {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
		gap: var(--space-3);
	}
	.site-footer__title {
		font-size: 0.78rem;
		letter-spacing: 0.08em;
		color: var(--muted-fort);
		margin-bottom: 0.6rem;
	}
	.site-footer__grid ul {
		list-style: none;
		margin: 0;
		padding: 0;
		display: grid;
		gap: 0.4rem;
	}
	.site-footer__grid a {
		color: var(--muted);
		font-size: 0.92rem;
	}
	.site-footer__grid a:hover {
		color: var(--accent);
	}
	.site-footer__social {
		display: grid;
		gap: 0.55rem;
	}
	.site-footer__social a {
		display: inline-flex;
		align-items: center;
		gap: 0.5rem;
		color: var(--muted);
		font-size: 0.9rem;
	}
	.site-footer__social a:hover {
		color: var(--accent);
	}
	.site-footer__federe {
		border-top: 1px solid var(--line);
		padding-top: var(--space-3);
		font-size: 0.85rem;
		color: var(--muted);
	}
	.site-footer__federe img {
		display: inline;
		vertical-align: middle;
		margin-right: 0.3rem;
	}
	.site-footer__legal {
		margin: 0.4rem 0 0;
		font-size: 0.8rem;
	}
</style>