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

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

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

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

		<div class="hosting-banner">
			<h3>{t.hosting.banner_title}</h3>
			<p>{t.hosting.banner_text}</p>

			<div class="hosting-features">
				{#each t.hosting.features as feature (feature)}
					<div class="hosting-feature">
						<span aria-hidden="true">✓</span>
						{feature}
					</div>
				{/each}
			</div>
		</div>

		<div class="services-offerings">
			<h3>{t.hosting.offerings_title}</h3>

			<div class="offer-cards">
				{#each t.hosting.offer_cards as card (card.title)}
					<div class="offer-card{card.modifier ? ` offer-card--${card.modifier}` : ''}">
						<h4>{card.title}</h4>
						{#if card.intro}
							<p class="offer-intro">{card.intro}</p>
						{/if}
						<ul class="offer-list">
							{#each card.items as item (item)}
								<li>{item}</li>
							{/each}
						</ul>
						<p class="offer-tagline">{card.tagline}</p>
					</div>
				{/each}
			</div>
		</div>

		<div class="hosting-note">
			<h4>{t.hosting.note_title}</h4>
			<p>{t.hosting.note_intro}</p>
			<ul>
				{#each t.hosting.note_items as item (item)}
					<li>{item}</li>
				{/each}
			</ul>
		</div>

		<div class="hosting-why">
			<h4>{t.hosting.why_title}</h4>
			<p>{t.hosting.why_text}</p>
			<a href="#contact" class="btn btn-solid">{t.hosting.why_cta} →</a>
		</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;
	}

	.hosting-banner {
		background: var(--card-bg);
		border: var(--border-card);
		border-top: 4px solid var(--or-oki);
		border-radius: var(--radius-md);
		padding: 2.5rem;
		max-width: 900px;
		margin: 0 auto 3rem;
		text-align: center;
	}

	.services-offerings h3 {
		text-align: center;
		color: var(--or-oki);
		margin: 3rem 0 2rem;
		font-size: 1.5rem;
	}

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

	.offer-card {
		background: var(--card-bg);
		border: var(--border-card);
		border-left: 4px solid var(--vert-oki);
		border-radius: var(--radius-md);
		padding: 2rem;
	}

	.offer-card--hosting {
		border-left-color: var(--rouge-oki);
	}

	.offer-card--fediverse {
		border-left-color: var(--or-oki);
	}

	.offer-card h4 {
		color: var(--vert-oki);
		margin-bottom: 1rem;
		font-size: 1.15rem;
	}

	.offer-card--hosting h4 {
		color: var(--rouge-oki);
	}

	.offer-card--fediverse h4 {
		color: var(--or-oki);
	}

	.offer-intro {
		margin-bottom: 1rem;
		font-size: 0.95rem;
		color: var(--muted);
	}

	.offer-list {
		list-style: none;
		margin-bottom: 1.5rem;
	}

	.offer-list li {
		margin-bottom: 0.5rem;
		padding-left: 1rem;
		position: relative;
	}

	.offer-list li::before {
		content: '';
		position: absolute;
		left: 0;
		top: 0.55em;
		width: 6px;
		height: 6px;
		background: var(--vert-oki);
		border-radius: 1px;
	}

	.offer-card--hosting .offer-list li::before {
		background: var(--rouge-oki);
	}

	.offer-card--fediverse .offer-list li::before {
		background: var(--or-oki);
	}

	.offer-tagline {
		font-size: 0.9rem;
		color: var(--muted);
		font-style: italic;
	}

	.hosting-banner h3 {
		color: var(--or-oki);
		font-size: 1.6rem;
		margin-bottom: 1rem;
	}

	.hosting-features {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
		gap: 1.25rem;
		margin: 2rem 0;
		text-align: left;
	}

	.hosting-feature {
		display: flex;
		align-items: center;
		gap: 0.5rem;
	}

	.hosting-feature span {
		color: var(--vert-oki);
		font-size: 1.1rem;
	}

	.hosting-note {
		background: var(--card-bg);
		border: var(--border-card);
		border-left: 4px solid var(--or-oki);
		border-radius: var(--radius-md);
		padding: 2rem;
		margin-top: 3rem;
		margin-bottom: 2rem;
	}

	.hosting-note h4 {
		color: var(--or-oki);
		margin-bottom: 1rem;
		font-size: 1.15rem;
	}

	.hosting-note ul {
		list-style: none;
	}

	.hosting-note li {
		margin-bottom: 0.5rem;
		padding-left: 1rem;
		position: relative;
	}

	.hosting-note li::before {
		content: '';
		position: absolute;
		left: 0;
		top: 0.55em;
		width: 6px;
		height: 6px;
		background: var(--or-oki);
		border-radius: 1px;
	}

	.hosting-why {
		text-align: center;
		margin-top: 3rem;
	}

	.hosting-why h4 {
		color: var(--or-oki);
		margin-bottom: 1rem;
		font-size: 1.15rem;
	}

	.hosting-why p {
		max-width: 800px;
		margin: 0 auto 2rem;
		line-height: 1.6;
	}
</style>