feat(v2): retours cand0o — nav, configs génériques, bloc Ambition

- Nav: fix layout (logo shrink-0, menu xl: only, whitespace-nowrap partout).
- Configurations: retire prix et specs techniques, ne garde que les features
  génériques par cible (hydrophone, capteurs physico-chimiques, autonomie
  énergie, transmission sans fil, ancrage renforcé pour EOLIEN).
- Ambition: nouveau composant 'Du ponctuel au grand réseau côtier' + entrée
  dans la nav, entre Concept et Pourquoi.
This commit is contained in:
2026-04-21 08:22:32 +00:00
parent 3e74478f7b
commit 9eecf989e1
4 changed files with 125 additions and 51 deletions

View File

@@ -0,0 +1,84 @@
---
---
<section id="ambition" 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">Ambition</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 <strong class="text-foam-50">zones entières</strong> 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 <strong class="text-foam-50">couverture
continue</strong> 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 <strong class="text-foam-50">déployer
rapidement</strong> sur n'importe quelle zone, et de maintenir un coût
unitaire suffisamment bas pour rendre la couverture à grande échelle
<strong class="text-foam-50">réaliste</strong>.
</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>