99 lines
2.1 KiB
Svelte
99 lines
2.1 KiB
Svelte
|
<script lang="ts">
|
||
|
|
import KineticText from '$lib/components/motion/KineticText.svelte';
|
||
|
|
import type { Bundle, Locale } from '$lib/i18n';
|
||
|
|
import { pictoFor } from './pictos';
|
||
|
|
|
||
|
|
let { t }: { t: Bundle; locale?: Locale } = $props();
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<section id="mission" class="section">
|
||
|
|
<div class="container">
|
||
|
|
<h2 class="section-title">
|
||
|
|
<KineticText as="span" text={t.mission.section_title} />{' '}
|
||
|
|
<span class="accent-text"
|
||
|
|
><KineticText as="span" text={t.mission.section_title_accent} /></span
|
||
|
|
>
|
||
|
|
</h2>
|
||
|
|
<p class="mission-text">{t.mission.paragraph_main}</p>
|
||
|
|
<p class="mission-text mission-text--secondary">{t.mission.paragraph_secondary}</p>
|
||
|
|
|
||
|
|
<div class="values-grid">
|
||
|
|
{#each t.values as value (value.title)}
|
||
|
|
<div class="value-card">
|
||
|
|
<div class="value-icon">
|
||
|
|
<svg class="icon" aria-hidden="true"
|
||
|
|
><use href="/icons.svg#{pictoFor(value.icon)}" /></svg
|
||
|
|
>
|
||
|
|
</div>
|
||
|
|
<h3>{value.title}</h3>
|
||
|
|
<p>{value.description}</p>
|
||
|
|
</div>
|
||
|
|
{/each}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<style>
|
||
|
|
section {
|
||
|
|
background: var(--noir-profond);
|
||
|
|
text-align: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
.accent-text {
|
||
|
|
color: var(--or-oki);
|
||
|
|
}
|
||
|
|
|
||
|
|
.mission-text {
|
||
|
|
font-size: 1.2rem;
|
||
|
|
max-width: 800px;
|
||
|
|
margin: 0 auto 3rem;
|
||
|
|
line-height: 1.8;
|
||
|
|
}
|
||
|
|
|
||
|
|
.mission-text--secondary {
|
||
|
|
font-size: 1.1rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.values-grid {
|
||
|
|
display: grid;
|
||
|
|
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||
|
|
gap: 1.5rem;
|
||
|
|
margin-top: 3rem;
|
||
|
|
max-width: 1000px;
|
||
|
|
margin-left: auto;
|
||
|
|
margin-right: auto;
|
||
|
|
}
|
||
|
|
|
||
|
|
.value-card {
|
||
|
|
background: var(--card-bg);
|
||
|
|
border: var(--border-card);
|
||
|
|
border-top: 3px solid var(--or-oki);
|
||
|
|
border-radius: var(--radius-md);
|
||
|
|
padding: 2rem;
|
||
|
|
transition:
|
||
|
|
transform var(--dur-tanbou) var(--ease-ka),
|
||
|
|
border-color var(--dur-tanbou) var(--ease-ka);
|
||
|
|
}
|
||
|
|
|
||
|
|
.value-card:hover {
|
||
|
|
transform: translateY(-4px);
|
||
|
|
border-top-color: var(--vert-oki);
|
||
|
|
}
|
||
|
|
|
||
|
|
.value-icon {
|
||
|
|
color: var(--or-oki);
|
||
|
|
margin-bottom: 1rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.value-icon .icon {
|
||
|
|
width: 2rem;
|
||
|
|
height: 2rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.value-card h3 {
|
||
|
|
color: var(--or-oki);
|
||
|
|
margin-bottom: 0.5rem;
|
||
|
|
font-size: 1.2rem;
|
||
|
|
}
|
||
|
|
</style>
|