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:
84
src/components/Ambition.astro
Normal file
84
src/components/Ambition.astro
Normal 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>
|
||||
@@ -5,14 +5,11 @@ const configs = [
|
||||
name: 'Sentinelle',
|
||||
accent: 'emerald',
|
||||
tagline: "L'entrée de gamme pour petit port.",
|
||||
price: '< 3 000 €',
|
||||
priceSub: 'déployé',
|
||||
cible: 'Petit port de plaisance, preuve de concept, sensibilisation',
|
||||
features: [
|
||||
{ label: 'Hydrophone', value: 'Basse conso — tendances & alertes' },
|
||||
{ label: 'Température eau', value: 'Sonde étanche intégrée' },
|
||||
{ label: 'Énergie', value: '30 W solaire · batterie 20 Ah' },
|
||||
{ label: 'Transmission', value: '4G direct — sobre, ~1 Ko/min' },
|
||||
'Hydrophone',
|
||||
'Autonome en énergie',
|
||||
'Transmission sans fil',
|
||||
],
|
||||
highlight: 'Détection de tendances et alertes bruit, sans complexité.',
|
||||
},
|
||||
@@ -21,16 +18,14 @@ const configs = [
|
||||
name: 'Gardien',
|
||||
accent: 'tide',
|
||||
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',
|
||||
features: [
|
||||
{ label: 'Hydrophone', value: 'HTI-96-MIN — précision réglementaire' },
|
||||
{ label: 'Physico-chimie', value: 'T°, conductivité, O₂, pH, météo' },
|
||||
{ label: 'Compute', value: 'Raspberry Pi CM4 — FFT embarquée' },
|
||||
{ label: 'Énergie', value: '50 W solaire · batterie 50 Ah · 3 jours d\'autonomie' },
|
||||
'Hydrophone',
|
||||
'Capteurs physico-chimiques',
|
||||
'Autonome en énergie',
|
||||
'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,
|
||||
},
|
||||
{
|
||||
@@ -38,30 +33,28 @@ const configs = [
|
||||
name: 'Observatoire',
|
||||
accent: 'violet',
|
||||
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',
|
||||
features: [
|
||||
{ label: 'Acoustique', value: 'Hydrophone LF + HF faible bruit' },
|
||||
{ label: 'Physico-chimie', value: 'CTD pro, O₂ optode, pH, turbidité, chloro-a, nitrates' },
|
||||
{ label: 'Optique', value: 'Caméra sous-marine + éclairage LED' },
|
||||
{ label: 'Compute', value: 'RPi CM4 4Go + SSD 256 Go · IA embarquée possible' },
|
||||
'Hydrophone',
|
||||
'Capteurs physico-chimiques étendus',
|
||||
'Capteur optique',
|
||||
'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',
|
||||
name: 'Vigie Offshore',
|
||||
accent: 'amber',
|
||||
tagline: 'Monitoring acoustique et biodiversité autour des parcs éoliens.',
|
||||
price: '< 15 000 €',
|
||||
priceSub: 'déployé',
|
||||
cible: 'Périphérie parc éolien offshore — construction & exploitation',
|
||||
features: [
|
||||
{ label: 'Acoustique', value: 'LF + HF pour bruit de battage & opérations' },
|
||||
{ label: 'Mesures', value: 'Physico-chimie, turbidité, courantométrie' },
|
||||
{ label: 'Comms', value: '4G double antenne + LoRa + GPS PPS' },
|
||||
{ label: 'Ancrage', value: 'Renforcé pour courants forts — variante V2 possible' },
|
||||
'Hydrophone',
|
||||
'Capteurs physico-chimiques',
|
||||
'Autonome en énergie',
|
||||
'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.',
|
||||
},
|
||||
@@ -81,9 +74,9 @@ const accents = {
|
||||
<span class="eyebrow">Configurations</span>
|
||||
<h2 class="h-section mt-4">Quatre configurations pour quatre contextes terrain.</h2>
|
||||
<p class="lead mt-6">
|
||||
Une seule plateforme, déclinée selon le besoin opérationnel, le niveau d'exigence et
|
||||
l'enveloppe du client. Les prix sont indicatifs et exprimés en euros HT, main-d'œuvre
|
||||
d'assemblage et pose incluses.
|
||||
Une seule plateforme, déclinée selon le besoin opérationnel et le niveau d'exigence.
|
||||
Toutes les configurations partagent le même socle : mesure acoustique, autonomie
|
||||
énergétique et transmission sans fil. Les capteurs additionnels s'adaptent au contexte.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
@@ -112,11 +105,6 @@ const accents = {
|
||||
|
||||
<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">
|
||||
<span class="block text-[10px] font-medium uppercase tracking-widest text-foam-100/50">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">
|
||||
<path d="M20 6L9 17l-5-5"/>
|
||||
</svg>
|
||||
<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>
|
||||
<div class="text-foam-50">{f}</div>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
@@ -145,7 +130,7 @@ const accents = {
|
||||
</div>
|
||||
|
||||
<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>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@@ -2,6 +2,7 @@
|
||||
const base = import.meta.env.BASE_URL;
|
||||
const items = [
|
||||
{ href: '#concept', label: 'Concept' },
|
||||
{ href: '#ambition', label: 'Ambition' },
|
||||
{ href: '#pourquoi', label: 'Pourquoi' },
|
||||
{ href: '#configurations', label: 'Configurations' },
|
||||
{ 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">
|
||||
<div class="container-narrow flex h-16 items-center justify-between">
|
||||
<a href={base} class="flex items-center gap-2.5" aria-label="NowYouSea — retour à l'accueil">
|
||||
<div class="container-narrow flex h-16 items-center gap-6">
|
||||
<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">
|
||||
<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"/>
|
||||
@@ -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"/>
|
||||
</svg>
|
||||
</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>
|
||||
|
||||
<nav aria-label="Navigation principale" class="hidden lg:block">
|
||||
<ul class="flex items-center gap-7 text-sm text-foam-100/75">
|
||||
<nav aria-label="Navigation principale" class="hidden flex-1 justify-center xl:flex">
|
||||
<ul class="flex items-center gap-5 text-sm text-foam-100/75">
|
||||
{items.map((item) => (
|
||||
<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>
|
||||
))}
|
||||
</ul>
|
||||
</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
|
||||
<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"/>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
@@ -3,6 +3,7 @@ import Layout from '../layouts/Layout.astro';
|
||||
import Nav from '../components/Nav.astro';
|
||||
import Hero from '../components/Hero.astro';
|
||||
import Concept from '../components/Concept.astro';
|
||||
import Ambition from '../components/Ambition.astro';
|
||||
import Pourquoi from '../components/Pourquoi.astro';
|
||||
import Configurations from '../components/Configurations.astro';
|
||||
import Architecture from '../components/Architecture.astro';
|
||||
@@ -18,6 +19,7 @@ import Footer from '../components/Footer.astro';
|
||||
<main id="main">
|
||||
<Hero />
|
||||
<Concept />
|
||||
<Ambition />
|
||||
<Pourquoi />
|
||||
<Configurations />
|
||||
<Architecture />
|
||||
|
||||
Reference in New Issue
Block a user