floppyrj45/site-nowyousea
1
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases Wiki Activity

site v11 — Hero SVG côtier (poissons, bulles, wifi, algues) + suppression strong/bold

Browse Source
This commit is contained in:
Poulpe (Gouvernance Gitea)
2026-04-21 09:35:52 +00:00
parent fd4e03aa33
commit f4861b47e6
3 changed files with 68 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
src/components/Ambition.astro
View File

@@ -17,7 +17,7 @@
</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
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>
@@ -39,8 +39,8 @@
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.
dispersées. NowYouSea vise la couverture
continue de zones entières, pas seulement la mesure ponctuelle.
</p>
</div>
@@ -57,10 +57,10 @@
<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
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
<strong class="text-foam-50">réaliste</strong>.
réaliste.
</p>
</div>
</div>

2
src/components/Configurateur.astro
View File

@@ -28,7 +28,7 @@ const cats = Array.from(new Set(sensors.map((s) => s.cat)));
Chaque site a ses enjeux. Cochez les grandeurs que vous voulez mesurer, ajustez
l'énergie et l'ancrage, et envoyez-nous votre configuration. Nous revenons vers
vous avec une proposition adaptée. Chaque rocher déployé rejoint automatiquement
le réseau <strong class="text-foam-50">mesher</strong> NowYouSea, qui couvre le
le réseau mesher NowYouSea, qui couvre le
littoral au fur et à mesure.
</p>
</div>

62
src/components/Hero.astro
View File

@@ -148,23 +148,83 @@
<circle cx="250" cy="90" r="3" fill="#38bdf8"/>
</g>
<!-- Wifi / transmission arcs above antenna -->
<g stroke="#38bdf8" fill="none" stroke-linecap="round" opacity="0.7">
<path d="M242 84 q 8 -10 16 0" stroke-width="1.4"/>
<path d="M237 77 q 13 -17 26 0" stroke-width="1.1" opacity="0.55"/>
<path d="M232 70 q 18 -22 36 0" stroke-width="0.9" opacity="0.3"/>
</g>
<!-- Data packet dots traveling up from antenna -->
<circle cx="250" cy="74" r="2" fill="#06b6d4" opacity="0.6" class="nys-data-dot" style="animation: nys-float 2.8s ease-in-out infinite; animation-delay: 0s;"/>
<circle cx="252" cy="62" r="1.5" fill="#38bdf8" opacity="0.45" style="animation: nys-float 2.8s ease-in-out infinite; animation-delay: 0.9s;"/>
<!-- Waterline -->
<path d="M20 160 Q 100 145 200 160 T 380 160" stroke="url(#waterline)" stroke-width="1.3" fill="none" opacity="0.9"/>
<path d="M20 170 Q 110 158 210 172 T 380 170" stroke="#0ea5e9" stroke-width="0.8" fill="none" opacity="0.4"/>
<!-- Sound ripples coming from rock -->
<!-- Sound ripples from hydrophone -->
<g stroke="#38bdf8" fill="none" opacity="0.55">
<circle cx="215" cy="225" r="46" stroke-dasharray="2 3"/>
<circle cx="215" cy="225" r="70" stroke-dasharray="2 5" opacity="0.35"/>
<circle cx="215" cy="225" r="95" stroke-dasharray="1.5 6" opacity="0.18"/>
</g>
<!-- Fish 1 — petit, gauche, profondeur moyenne -->
<g transform="translate(118 268)" fill="#1a3f5c" opacity="0.65" style="animation: nys-swim 6s ease-in-out infinite;">
<ellipse rx="14" ry="5.5"/>
<path d="M-14 0 l-9 -5 l1 10 z"/>
<ellipse cx="7" cy="-1.5" rx="2" ry="1.5" fill="#0a1a2f"/>
<circle cx="8" cy="-1.5" r="0.8" fill="#38bdf8" opacity="0.7"/>
</g>
<!-- Fish 2 — plus petit, droite, plus profond -->
<g transform="translate(308 295) scale(-1 1)" fill="#143558" opacity="0.55" style="animation: nys-swim 8s ease-in-out infinite; animation-delay: 2s;">
<ellipse rx="11" ry="4.5"/>
<path d="M-11 0 l-7 -4 l0.5 8 z"/>
<circle cx="6" cy="-1" r="0.7" fill="#38bdf8" opacity="0.6"/>
</g>
<!-- Fish 3 — minuscule, fond -->
<g transform="translate(175 335)" fill="#0f2742" opacity="0.5" style="animation: nys-swim 7s ease-in-out infinite; animation-delay: 3.5s;">
<ellipse rx="8" ry="3.2"/>
<path d="M-8 0 l-5 -3 l0.5 6 z"/>
</g>
<!-- Bulles de qualité d'eau montant du fond -->
<circle cx="140" cy="310" r="2.5" fill="none" stroke="#0ea5e9" stroke-width="0.8" opacity="0.4" style="animation: nys-bubble 4s ease-in infinite; animation-delay: 0.5s;"/>
<circle cx="280" cy="320" r="2" fill="none" stroke="#38bdf8" stroke-width="0.7" opacity="0.3" style="animation: nys-bubble 5s ease-in infinite; animation-delay: 1.8s;"/>
<circle cx="160" cy="340" r="1.5" fill="none" stroke="#0ea5e9" stroke-width="0.6" opacity="0.25" style="animation: nys-bubble 3.5s ease-in infinite; animation-delay: 3s;"/>
<!-- Seabed hints -->
<g fill="#0a1a2f" opacity="0.9">
<ellipse cx="120" cy="348" rx="30" ry="6"/>
<ellipse cx="220" cy="360" rx="70" ry="7"/>
<ellipse cx="320" cy="352" rx="35" ry="5"/>
</g>
<!-- Algue simple sur le fond -->
<path d="M340 348 q 4 -12 0 -22 q 5 -10 2 -20" stroke="#1a4570" stroke-width="1.5" fill="none" stroke-linecap="round" opacity="0.5"/>
<path d="M95 348 q -3 -10 1 -18 q -4 -8 0 -16" stroke="#143558" stroke-width="1.2" fill="none" stroke-linecap="round" opacity="0.4"/>
</svg>
<style>
@keyframes nys-swim {
0%, 100% { transform: translateX(0) translateY(0); }
40% { transform: translateX(6px) translateY(-3px); }
70% { transform: translateX(-4px) translateY(2px); }
}
@keyframes nys-float {
0% { opacity: 0.6; transform: translateY(0); }
50% { opacity: 0.2; transform: translateY(-12px); }
100% { opacity: 0; transform: translateY(-22px); }
}
@keyframes nys-bubble {
0% { opacity: 0.4; transform: translateY(0) scale(1); }
80% { opacity: 0.1; transform: translateY(-60px) scale(1.4); }
100% { opacity: 0; transform: translateY(-70px) scale(1.5); }
}
</style>
</div>
</div>
</div>