85 lines
4.3 KiB
Plaintext
85 lines
4.3 KiB
Plaintext
---
|
|
---
|
|
|
|
<section id="mission" class="section relative overflow-hidden">
|
|
<!-- Halo background -->
|
|
<div
|
|
aria-hidden="true"
|
|
class="pointer-events-none absolute inset-0 -z-10 opacity-60"
|
|
style="background: radial-gradient(ellipse at 20% 30%, rgba(56,189,248,0.15), transparent 55%), radial-gradient(ellipse at 85% 70%, rgba(6,182,212,0.12), transparent 55%);"
|
|
></div>
|
|
|
|
<div class="container-narrow">
|
|
<div class="section-title-block">
|
|
<span class="eyebrow">Mission</span>
|
|
<h2 class="h-section mt-4">
|
|
D'une station côtière à un grand réseau de mesure.
|
|
</h2>
|
|
<p class="lead mt-6">
|
|
Rendre accessibles des données multi-paramètres, géolocalisées et horodatées,
|
|
sur des zones entières plutôt que des points
|
|
isolés. À terme, sur l'ensemble des zones côtières et fluviales de France, voire
|
|
d'Europe.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="mt-12 grid gap-6 md:grid-cols-2">
|
|
<div class="card h-full">
|
|
<div class="flex items-center gap-3">
|
|
<span class="inline-flex h-10 w-10 items-center justify-center rounded-lg bg-tide-500/15 text-tide-400 ring-1 ring-tide-400/30">
|
|
<svg viewBox="0 0 24 24" class="h-5 w-5" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
|
|
<circle cx="12" cy="12" r="9"/>
|
|
<circle cx="12" cy="12" r="4"/>
|
|
<path d="M3 12h2M19 12h2M12 3v2M12 19v2"/>
|
|
</svg>
|
|
</span>
|
|
<h3 class="font-display text-xl font-semibold text-foam-50">Couvrir, pas juste surveiller</h3>
|
|
</div>
|
|
<p class="mt-4 text-sm leading-relaxed text-foam-100/80">
|
|
Les politiques publiques de préservation, la conformité réglementaire et la
|
|
recherche ont toutes le même angle mort : la plupart des données disponibles
|
|
sont <em>ponctuelles</em> : quelques stations de référence, des campagnes
|
|
dispersées. NowYouSea vise la couverture
|
|
continue de zones entières, pas seulement la mesure ponctuelle.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="card h-full">
|
|
<div class="flex items-center gap-3">
|
|
<span class="inline-flex h-10 w-10 items-center justify-center rounded-lg bg-lagoon-500/15 text-lagoon-400 ring-1 ring-lagoon-400/30">
|
|
<svg viewBox="0 0 24 24" class="h-5 w-5" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
|
|
<path d="M12 3v4M12 17v4M5 12H3M21 12h-2M6 6l-1.5-1.5M19.5 19.5L18 18M6 18l-1.5 1.5M19.5 4.5L18 6"/>
|
|
<circle cx="12" cy="12" r="4"/>
|
|
</svg>
|
|
</span>
|
|
<h3 class="font-display text-xl font-semibold text-foam-50">Un socle pensé pour le passage à l'échelle</h3>
|
|
</div>
|
|
<p class="mt-4 text-sm leading-relaxed text-foam-100/80">
|
|
La solution s'appuie sur des systèmes embarqués légers, à très faible
|
|
consommation et autonomes en énergie. Cela permet de s'affranchir de toute
|
|
contrainte de raccordement, de déployer
|
|
rapidement sur n'importe quelle zone, et de maintenir un coût
|
|
unitaire suffisamment bas pour rendre la couverture à grande échelle
|
|
réaliste.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Key figures / qualitative markers -->
|
|
<div class="mt-10 grid gap-4 sm:grid-cols-3">
|
|
<div class="rounded-xl border border-white/5 bg-white/[0.02] px-5 py-4 text-center">
|
|
<div class="font-display text-2xl font-semibold text-tide-300">Zones entières</div>
|
|
<div class="mt-1 text-xs uppercase tracking-wider text-foam-100/55">vs. points isolés</div>
|
|
</div>
|
|
<div class="rounded-xl border border-white/5 bg-white/[0.02] px-5 py-4 text-center">
|
|
<div class="font-display text-2xl font-semibold text-lagoon-300">Déploiement rapide</div>
|
|
<div class="mt-1 text-xs uppercase tracking-wider text-foam-100/55">aucun raccordement</div>
|
|
</div>
|
|
<div class="rounded-xl border border-white/5 bg-white/[0.02] px-5 py-4 text-center">
|
|
<div class="font-display text-2xl font-semibold text-foam-100">Coût maîtrisé</div>
|
|
<div class="mt-1 text-xs uppercase tracking-wider text-foam-100/55">passage à l'échelle réaliste</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|