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>

View File

@@ -5,14 +5,11 @@ const configs = [
name: 'Sentinelle', name: 'Sentinelle',
accent: 'emerald', accent: 'emerald',
tagline: "L'entrée de gamme pour petit port.", tagline: "L'entrée de gamme pour petit port.",
price: '< 3 000 €',
priceSub: 'déployé',
cible: 'Petit port de plaisance, preuve de concept, sensibilisation', cible: 'Petit port de plaisance, preuve de concept, sensibilisation',
features: [ features: [
{ label: 'Hydrophone', value: 'Basse conso — tendances &amp; alertes' }, 'Hydrophone',
{ label: 'Température eau', value: 'Sonde étanche intégrée' }, 'Autonome en énergie',
{ label: 'Énergie', value: '30 W solaire · batterie 20 Ah' }, 'Transmission sans fil',
{ label: 'Transmission', value: '4G direct — sobre, ~1 Ko/min' },
], ],
highlight: 'Détection de tendances et alertes bruit, sans complexité.', highlight: 'Détection de tendances et alertes bruit, sans complexité.',
}, },
@@ -21,16 +18,14 @@ const configs = [
name: 'Gardien', name: 'Gardien',
accent: 'tide', accent: 'tide',
tagline: 'Configuration recommandée pour un déploiement opérationnel.', tagline: 'Configuration recommandée pour un déploiement opérationnel.',
price: '< 8 000 €',
priceSub: 'déployé',
cible: 'Port moyen — conformité réglementaire et monitoring courant', cible: 'Port moyen — conformité réglementaire et monitoring courant',
features: [ features: [
{ label: 'Hydrophone', value: 'HTI-96-MIN — précision réglementaire' }, 'Hydrophone',
{ label: 'Physico-chimie', value: 'T°, conductivité, O₂, pH, météo' }, 'Capteurs physico-chimiques',
{ label: 'Compute', value: 'Raspberry Pi CM4 — FFT embarquée' }, 'Autonome en énergie',
{ label: 'Énergie', value: '50 W solaire · batterie 50 Ah · 3 jours d\'autonomie' }, 'Transmission sans fil',
], ],
highlight: 'Le bon compromis : précision, modularité, prix maîtrisé.', highlight: 'Le bon compromis entre précision, modularité et simplicité de déploiement.',
featured: true, featured: true,
}, },
{ {
@@ -38,30 +33,28 @@ const configs = [
name: 'Observatoire', name: 'Observatoire',
accent: 'violet', accent: 'violet',
tagline: 'Station de référence pour AMP et zones à fort enjeu.', tagline: 'Station de référence pour AMP et zones à fort enjeu.',
price: '< 18 000 €',
priceSub: 'déployé',
cible: 'Aire Marine Protégée, port majeur, recherche, Natura 2000', cible: 'Aire Marine Protégée, port majeur, recherche, Natura 2000',
features: [ features: [
{ label: 'Acoustique', value: 'Hydrophone LF + HF faible bruit' }, 'Hydrophone',
{ label: 'Physico-chimie', value: 'CTD pro, O₂ optode, pH, turbidité, chloro-a, nitrates' }, 'Capteurs physico-chimiques étendus',
{ label: 'Optique', value: 'Caméra sous-marine + éclairage LED' }, 'Capteur optique',
{ label: 'Compute', value: 'RPi CM4 4Go + SSD 256 Go · IA embarquée possible' }, 'Autonome en énergie',
'Transmission sans fil',
], ],
highlight: 'Proche research-grade, inter-calibrable avec les réseaux nationaux.', highlight: 'Proche research-grade, pensé pour s\'inter-calibrer avec les réseaux de référence.',
}, },
{ {
code: 'EOLIEN', code: 'EOLIEN',
name: 'Vigie Offshore', name: 'Vigie Offshore',
accent: 'amber', accent: 'amber',
tagline: 'Monitoring acoustique et biodiversité autour des parcs éoliens.', tagline: 'Monitoring acoustique et biodiversité autour des parcs éoliens.',
price: '< 15 000 €',
priceSub: 'déployé',
cible: 'Périphérie parc éolien offshore — construction &amp; exploitation', cible: 'Périphérie parc éolien offshore — construction &amp; exploitation',
features: [ features: [
{ label: 'Acoustique', value: 'LF + HF pour bruit de battage &amp; opérations' }, 'Hydrophone',
{ label: 'Mesures', value: 'Physico-chimie, turbidité, courantométrie' }, 'Capteurs physico-chimiques',
{ label: 'Comms', value: '4G double antenne + LoRa + GPS PPS' }, 'Autonome en énergie',
{ label: 'Ancrage', value: 'Renforcé pour courants forts — variante V2 possible' }, 'Transmission sans fil',
'Ancrage renforcé pour courants forts',
], ],
highlight: 'Conçue pour des contrats long-terme, alignée sur la durée d\'exploitation des parcs.', highlight: 'Conçue pour des contrats long-terme, alignée sur la durée d\'exploitation des parcs.',
}, },
@@ -81,9 +74,9 @@ const accents = {
<span class="eyebrow">Configurations</span> <span class="eyebrow">Configurations</span>
<h2 class="h-section mt-4">Quatre configurations pour quatre contextes terrain.</h2> <h2 class="h-section mt-4">Quatre configurations pour quatre contextes terrain.</h2>
<p class="lead mt-6"> <p class="lead mt-6">
Une seule plateforme, déclinée selon le besoin opérationnel, le niveau d'exigence et Une seule plateforme, déclinée selon le besoin opérationnel et le niveau d'exigence.
l'enveloppe du client. Les prix sont indicatifs et exprimés en euros HT, main-d'œuvre Toutes les configurations partagent le même socle : mesure acoustique, autonomie
d'assemblage et pose incluses. énergétique et transmission sans fil. Les capteurs additionnels s'adaptent au contexte.
</p> </p>
</div> </div>
@@ -112,11 +105,6 @@ const accents = {
<p class="mt-3 text-sm text-foam-100/75">{cfg.tagline}</p> <p class="mt-3 text-sm text-foam-100/75">{cfg.tagline}</p>
<div class="mt-5 flex items-baseline gap-2">
<span class="font-display text-3xl font-semibold text-foam-50">{cfg.price}</span>
<span class="text-xs uppercase tracking-wider text-foam-100/55">{cfg.priceSub}</span>
</div>
<div class="mt-5 rounded-lg bg-abyss-900/50 px-4 py-3 text-xs leading-relaxed text-foam-100/70 ring-1 ring-white/5"> <div class="mt-5 rounded-lg bg-abyss-900/50 px-4 py-3 text-xs leading-relaxed text-foam-100/70 ring-1 ring-white/5">
<span class="block text-[10px] font-medium uppercase tracking-widest text-foam-100/50">Cible</span> <span class="block text-[10px] font-medium uppercase tracking-widest text-foam-100/50">Cible</span>
<span set:html={cfg.cible}></span> <span set:html={cfg.cible}></span>
@@ -128,10 +116,7 @@ const accents = {
<svg viewBox="0 0 24 24" class={`mt-0.5 h-4 w-4 shrink-0 ${a.chip}`} fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"> <svg viewBox="0 0 24 24" class={`mt-0.5 h-4 w-4 shrink-0 ${a.chip}`} fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
<path d="M20 6L9 17l-5-5"/> <path d="M20 6L9 17l-5-5"/>
</svg> </svg>
<div> <div class="text-foam-50">{f}</div>
<div class="text-foam-100/60 text-[11px] uppercase tracking-wider">{f.label}</div>
<div class="text-foam-50" set:html={f.value}></div>
</div>
</li> </li>
))} ))}
</ul> </ul>
@@ -145,7 +130,7 @@ const accents = {
</div> </div>
<p class="mt-8 text-center text-xs text-foam-100/50"> <p class="mt-8 text-center text-xs text-foam-100/50">
Prix de revient indicatifs · à affiner selon volumes et fournisseurs · marge commerciale et subventions non incluses. Configurations indicatives · capteurs et options affinés au cas par cas selon le contexte de déploiement.
</p> </p>
</div> </div>
</section> </section>

View File

@@ -2,6 +2,7 @@
const base = import.meta.env.BASE_URL; const base = import.meta.env.BASE_URL;
const items = [ const items = [
{ href: '#concept', label: 'Concept' }, { href: '#concept', label: 'Concept' },
{ href: '#ambition', label: 'Ambition' },
{ href: '#pourquoi', label: 'Pourquoi' }, { href: '#pourquoi', label: 'Pourquoi' },
{ href: '#configurations', label: 'Configurations' }, { href: '#configurations', label: 'Configurations' },
{ href: '#architecture', label: 'Architecture' }, { href: '#architecture', label: 'Architecture' },
@@ -13,8 +14,8 @@ const items = [
--- ---
<header class="sticky top-0 z-40 border-b border-white/5 bg-abyss-950/75 backdrop-blur"> <header class="sticky top-0 z-40 border-b border-white/5 bg-abyss-950/75 backdrop-blur">
<div class="container-narrow flex h-16 items-center justify-between"> <div class="container-narrow flex h-16 items-center gap-6">
<a href={base} class="flex items-center gap-2.5" aria-label="NowYouSea — retour à l'accueil"> <a href={base} class="flex shrink-0 items-center gap-2.5" aria-label="NowYouSea — retour à l'accueil">
<span class="relative inline-flex h-8 w-8 items-center justify-center rounded-md bg-gradient-to-br from-tide-500 to-lagoon-500 shadow-glow"> <span class="relative inline-flex h-8 w-8 items-center justify-center rounded-md bg-gradient-to-br from-tide-500 to-lagoon-500 shadow-glow">
<svg viewBox="0 0 24 24" class="h-5 w-5 text-abyss-950" fill="currentColor" aria-hidden="true"> <svg viewBox="0 0 24 24" class="h-5 w-5 text-abyss-950" fill="currentColor" aria-hidden="true">
<path d="M2 16c2 0 2-2 4-2s2 2 4 2 2-2 4-2 2 2 4 2 2-2 4-2v4H2z"/> <path d="M2 16c2 0 2-2 4-2s2 2 4 2 2-2 4-2 2 2 4 2 2-2 4-2v4H2z"/>
@@ -22,24 +23,26 @@ const items = [
<path d="M7 9a5 5 0 0 1 10 0" stroke="currentColor" stroke-width="1.5" fill="none" opacity=".65"/> <path d="M7 9a5 5 0 0 1 10 0" stroke="currentColor" stroke-width="1.5" fill="none" opacity=".65"/>
</svg> </svg>
</span> </span>
<span class="font-display text-base font-semibold tracking-tight">NowYouSea</span> <span class="font-display text-base font-semibold tracking-tight whitespace-nowrap">NowYouSea</span>
</a> </a>
<nav aria-label="Navigation principale" class="hidden lg:block"> <nav aria-label="Navigation principale" class="hidden flex-1 justify-center xl:flex">
<ul class="flex items-center gap-7 text-sm text-foam-100/75"> <ul class="flex items-center gap-5 text-sm text-foam-100/75">
{items.map((item) => ( {items.map((item) => (
<li> <li>
<a href={item.href} class="hover:text-tide-400">{item.label}</a> <a href={item.href} class="whitespace-nowrap hover:text-tide-400">{item.label}</a>
</li> </li>
))} ))}
</ul> </ul>
</nav> </nav>
<a href="#contact" class="btn btn-primary hidden md:inline-flex"> <div class="ml-auto shrink-0 xl:ml-0">
<a href="#contact" class="btn btn-primary hidden whitespace-nowrap md:inline-flex">
Demander une démo Demander une démo
<svg viewBox="0 0 24 24" class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"> <svg viewBox="0 0 24 24" class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
<path d="M5 12h14M13 5l7 7-7 7"/> <path d="M5 12h14M13 5l7 7-7 7"/>
</svg> </svg>
</a> </a>
</div> </div>
</div>
</header> </header>

View File

@@ -3,6 +3,7 @@ import Layout from '../layouts/Layout.astro';
import Nav from '../components/Nav.astro'; import Nav from '../components/Nav.astro';
import Hero from '../components/Hero.astro'; import Hero from '../components/Hero.astro';
import Concept from '../components/Concept.astro'; import Concept from '../components/Concept.astro';
import Ambition from '../components/Ambition.astro';
import Pourquoi from '../components/Pourquoi.astro'; import Pourquoi from '../components/Pourquoi.astro';
import Configurations from '../components/Configurations.astro'; import Configurations from '../components/Configurations.astro';
import Architecture from '../components/Architecture.astro'; import Architecture from '../components/Architecture.astro';
@@ -18,6 +19,7 @@ import Footer from '../components/Footer.astro';
<main id="main"> <main id="main">
<Hero /> <Hero />
<Concept /> <Concept />
<Ambition />
<Pourquoi /> <Pourquoi />
<Configurations /> <Configurations />
<Architecture /> <Architecture />