feat: add team, roadmap and contact sections, wire up index page
Co-founders (Baptiste Moulin / Quentin / Radu Mihail) with a complementarity matrix, a three-phase timeline (pilot → mesh → network) and a contact block with mailto CTAs. Index page composes the full scroll narrative. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
89
src/components/Contact.astro
Normal file
89
src/components/Contact.astro
Normal file
@@ -0,0 +1,89 @@
|
|||||||
|
---
|
||||||
|
const email = 'contact@nowyousea.fr';
|
||||||
|
---
|
||||||
|
|
||||||
|
<section id="contact" class="section">
|
||||||
|
<div class="container-narrow">
|
||||||
|
<div class="relative overflow-hidden rounded-3xl border border-tide-400/20 bg-gradient-to-br from-abyss-800/70 via-abyss-900/70 to-abyss-950 p-8 md:p-14">
|
||||||
|
<!-- Ambient -->
|
||||||
|
<div class="pointer-events-none absolute inset-0 opacity-80">
|
||||||
|
<div class="absolute -top-24 -right-24 h-96 w-96 rounded-full bg-tide-500/20 blur-3xl"></div>
|
||||||
|
<div class="absolute -bottom-24 -left-24 h-96 w-96 rounded-full bg-lagoon-500/15 blur-3xl"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="relative grid gap-10 lg:grid-cols-[1.1fr_1fr] lg:items-center">
|
||||||
|
<div>
|
||||||
|
<span class="eyebrow">Contact</span>
|
||||||
|
<h2 class="h-section mt-4">Parlons de votre port, de votre façade, de votre parc.</h2>
|
||||||
|
<p class="lead mt-6">
|
||||||
|
Vous gérez un port, une aire marine protégée, ou un projet éolien ? Vous cherchez un
|
||||||
|
outil de terrain pour produire des données environnementales sans y consacrer un
|
||||||
|
budget de recherche ? Écrivez-nous — on revient vite.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div class="mt-8 flex flex-wrap gap-3">
|
||||||
|
<a href={`mailto:${email}?subject=Demande%20de%20d%C3%A9mo%20NowYouSea`} class="btn btn-primary">
|
||||||
|
<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">
|
||||||
|
<rect x="3" y="5" width="18" height="14" rx="2"/>
|
||||||
|
<path d="M3 7l9 6 9-6"/>
|
||||||
|
</svg>
|
||||||
|
Demander une démo
|
||||||
|
</a>
|
||||||
|
<a href={`mailto:${email}`} class="btn btn-ghost">
|
||||||
|
{email}
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="grid gap-4">
|
||||||
|
<div class="rounded-xl border border-white/10 bg-white/[0.03] p-5">
|
||||||
|
<div class="flex items-start gap-4">
|
||||||
|
<span class="inline-flex h-10 w-10 shrink-0 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">
|
||||||
|
<rect x="3" y="5" width="18" height="14" rx="2"/>
|
||||||
|
<path d="M3 7l9 6 9-6"/>
|
||||||
|
</svg>
|
||||||
|
</span>
|
||||||
|
<div>
|
||||||
|
<div class="text-[11px] font-medium uppercase tracking-widest text-foam-100/55">Email</div>
|
||||||
|
<a href={`mailto:${email}`} class="mt-1 block font-display text-foam-50 hover:text-tide-400">{email}</a>
|
||||||
|
<p class="mt-1 text-xs text-foam-100/55">Réponse sous 48h ouvrées.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="rounded-xl border border-white/10 bg-white/[0.03] p-5">
|
||||||
|
<div class="flex items-start gap-4">
|
||||||
|
<span class="inline-flex h-10 w-10 shrink-0 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 2a10 10 0 1 0 10 10"/>
|
||||||
|
<path d="M12 2v10l7 4"/>
|
||||||
|
</svg>
|
||||||
|
</span>
|
||||||
|
<div>
|
||||||
|
<div class="text-[11px] font-medium uppercase tracking-widest text-foam-100/55">Démo terrain</div>
|
||||||
|
<p class="mt-1 text-sm text-foam-50">Sur sollicitation — présentation de l'architecture & de prototypes.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="rounded-xl border border-white/10 bg-white/[0.03] p-5">
|
||||||
|
<div class="flex items-start gap-4">
|
||||||
|
<span class="inline-flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-violet-500/15 text-violet-300 ring-1 ring-violet-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="M4 6h16v12H4z"/>
|
||||||
|
<path d="M4 10h16"/>
|
||||||
|
<circle cx="8" cy="14" r="1" fill="currentColor"/>
|
||||||
|
</svg>
|
||||||
|
</span>
|
||||||
|
<div>
|
||||||
|
<div class="text-[11px] font-medium uppercase tracking-widest text-foam-100/55">Partenariats</div>
|
||||||
|
<p class="mt-1 text-sm text-foam-50">Ports, collectivités, AMP, opérateurs éoliens, bureaux d'études.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
108
src/components/Equipe.astro
Normal file
108
src/components/Equipe.astro
Normal file
@@ -0,0 +1,108 @@
|
|||||||
|
---
|
||||||
|
const team = [
|
||||||
|
{
|
||||||
|
name: 'Baptiste Moulin',
|
||||||
|
role: 'Co-fondateur · CTO',
|
||||||
|
focus: 'Systèmes embarqués & IoT',
|
||||||
|
bio: "Architecture edge-to-cloud, firmware embarqué, acquisition capteurs et traitement du signal (FFT, SPL). Pilote l'intégration technique du rocher et l'infrastructure temps réel (MQTT, TimescaleDB, API).",
|
||||||
|
initials: 'BM',
|
||||||
|
gradient: 'from-tide-500 to-lagoon-500',
|
||||||
|
skills: ['Edge compute', 'Firmware', 'Traitement signal', 'Cloud temps réel'],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'Quentin',
|
||||||
|
role: 'Co-fondateur · Ingénieur Produit',
|
||||||
|
focus: 'Conception & industrialisation',
|
||||||
|
bio: "Conception mécanique du rocher (coque, châssis, étanchéité), gamme d'assemblage, BOM et contrôle qualité. Pilote la production et le déploiement terrain.",
|
||||||
|
initials: 'Q',
|
||||||
|
gradient: 'from-emerald-500 to-tide-500',
|
||||||
|
skills: ['Design mécanique', 'BOM', 'Industrialisation', 'Déploiement'],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'Radu Mihail',
|
||||||
|
role: 'Co-fondateur · Business & Réglementaire EU',
|
||||||
|
focus: 'Développement international',
|
||||||
|
bio: "Expert en développement commercial, cadre réglementaire européen (DCSMM/MSFD) et mécanismes de financement (FEAMPA, Horizon Europe). Responsable business model, partenariats et déploiement multi-pays.",
|
||||||
|
initials: 'RM',
|
||||||
|
gradient: 'from-violet-500 to-lagoon-500',
|
||||||
|
skills: ['Stratégie EU', 'Réglementaire', 'Financement public', 'Partenariats'],
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
const complementarity = [
|
||||||
|
{ domain: 'Mécanique & industrialisation', owner: 'Quentin' },
|
||||||
|
{ domain: 'Électronique embarquée', owner: 'Baptiste' },
|
||||||
|
{ domain: 'Software & cloud', owner: 'Baptiste' },
|
||||||
|
{ domain: 'Traitement du signal', owner: 'Baptiste' },
|
||||||
|
{ domain: 'Réglementation DCSMM / EU', owner: 'Radu' },
|
||||||
|
{ domain: 'Business model & financement', owner: 'Radu' },
|
||||||
|
{ domain: 'Déploiement terrain', owner: 'Quentin' },
|
||||||
|
{ domain: 'Partenariats institutionnels', owner: 'Radu' },
|
||||||
|
];
|
||||||
|
---
|
||||||
|
|
||||||
|
<section id="equipe" class="section">
|
||||||
|
<div class="container-narrow">
|
||||||
|
<div class="section-title-block">
|
||||||
|
<span class="eyebrow">Équipe</span>
|
||||||
|
<h2 class="h-section mt-4">Trois co-fondateurs, trois expertises qui s'emboîtent.</h2>
|
||||||
|
<p class="lead mt-6">
|
||||||
|
Le rocher connecté ne tient pas sur une seule compétence : il faut du hardware robuste,
|
||||||
|
des données exploitables, et un modèle économique qui tient la route face aux instances
|
||||||
|
européennes. Chacun porte sa verticale.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="grid gap-6 md:grid-cols-3">
|
||||||
|
{team.map((m) => (
|
||||||
|
<article class="card group relative flex h-full flex-col">
|
||||||
|
<div class="flex items-start gap-4">
|
||||||
|
<div class={`relative inline-flex h-14 w-14 shrink-0 items-center justify-center rounded-xl bg-gradient-to-br ${m.gradient} font-display text-lg font-semibold text-abyss-950 shadow-glow`}>
|
||||||
|
{m.initials}
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h3 class="font-display text-lg font-semibold text-foam-50">{m.name}</h3>
|
||||||
|
<p class="text-sm text-tide-300" set:html={m.role}></p>
|
||||||
|
<p class="text-xs text-foam-100/55 mt-0.5" set:html={m.focus}></p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p class="mt-5 text-sm leading-relaxed text-foam-100/75" set:html={m.bio}></p>
|
||||||
|
|
||||||
|
<ul class="mt-5 flex flex-wrap gap-1.5">
|
||||||
|
{m.skills.map((s) => (
|
||||||
|
<li class="rounded-full border border-white/10 bg-white/5 px-2.5 py-1 text-[11px] text-foam-100/70">{s}</li>
|
||||||
|
))}
|
||||||
|
</ul>
|
||||||
|
</article>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Complementarity strip -->
|
||||||
|
<div class="mt-12 overflow-hidden rounded-2xl border border-white/10 bg-gradient-to-br from-abyss-900/60 via-abyss-900/40 to-abyss-800/30">
|
||||||
|
<div class="grid gap-0 md:grid-cols-2">
|
||||||
|
<div class="p-6 md:p-8">
|
||||||
|
<p class="text-xs font-medium uppercase tracking-[0.2em] text-tide-400">Complémentarité</p>
|
||||||
|
<h3 class="mt-3 font-display text-2xl font-semibold text-foam-50">
|
||||||
|
Une équipe full-stack du prototype au terrain.
|
||||||
|
</h3>
|
||||||
|
<p class="mt-3 text-sm text-foam-100/70">
|
||||||
|
Chaque verticale a un responsable clairement identifié. Les zones d'ombre entre
|
||||||
|
hardware, software et réglementaire — c'est souvent là que les projets échouent —
|
||||||
|
sont couvertes.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="border-t border-white/5 p-6 md:border-l md:border-t-0 md:p-8">
|
||||||
|
<ul class="grid grid-cols-1 gap-3 sm:grid-cols-2">
|
||||||
|
{complementarity.map((c) => (
|
||||||
|
<li class="flex items-center justify-between gap-2 rounded-lg bg-white/[0.03] px-3 py-2">
|
||||||
|
<span class="text-sm text-foam-100/80">{c.domain}</span>
|
||||||
|
<span class="text-xs font-medium text-tide-300">{c.owner}</span>
|
||||||
|
</li>
|
||||||
|
))}
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
130
src/components/Roadmap.astro
Normal file
130
src/components/Roadmap.astro
Normal file
@@ -0,0 +1,130 @@
|
|||||||
|
---
|
||||||
|
const phases = [
|
||||||
|
{
|
||||||
|
id: 'Phase 1',
|
||||||
|
label: 'Pilote',
|
||||||
|
status: 'En cours',
|
||||||
|
pill: 'bg-tide-500/20 text-tide-300 ring-tide-400/40',
|
||||||
|
title: 'Validation terrain · Port-Navalo',
|
||||||
|
points: [
|
||||||
|
'Finalisation du design V1 du rocher',
|
||||||
|
'Partenariats techniques & scientifiques',
|
||||||
|
'Dossier de financement et premiers déploiements pilotes',
|
||||||
|
'Première boucle de données opérationnelles',
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'Phase 2',
|
||||||
|
label: 'Maillage',
|
||||||
|
status: 'À venir',
|
||||||
|
pill: 'bg-white/5 text-foam-100/70 ring-white/10',
|
||||||
|
title: 'Golfe du Morbihan & façade NAMO',
|
||||||
|
points: [
|
||||||
|
'Extension aux 15+ ports du Golfe',
|
||||||
|
'Intégration aux référentiels de données publics',
|
||||||
|
'Premiers rapports réglementaires auto-générés',
|
||||||
|
'Déploiement sur d\'autres ports bretons et ligériens',
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'Phase 3',
|
||||||
|
label: 'Réseau',
|
||||||
|
status: 'Horizon',
|
||||||
|
pill: 'bg-white/5 text-foam-100/70 ring-white/10',
|
||||||
|
title: 'National & offshore éolien',
|
||||||
|
points: [
|
||||||
|
'Extension Méditerranée, Manche Est, Sud Atlantique',
|
||||||
|
'Premiers contrats long-terme avec opérateurs éoliens',
|
||||||
|
'IA embarquée pour détection d\'espèces en temps réel',
|
||||||
|
'Ouverture européenne (Espagne, Portugal, Italie)',
|
||||||
|
],
|
||||||
|
},
|
||||||
|
];
|
||||||
|
---
|
||||||
|
|
||||||
|
<section id="roadmap" class="section">
|
||||||
|
<div class="container-narrow">
|
||||||
|
<div class="section-title-block">
|
||||||
|
<span class="eyebrow">Feuille de route</span>
|
||||||
|
<h2 class="h-section mt-4">Trois phases, un même cap : densifier le littoral.</h2>
|
||||||
|
<p class="lead mt-6">
|
||||||
|
Pas de grand soir : on valide sur un site pilote, on maille une façade, puis on étend.
|
||||||
|
La valeur du réseau croît avec chaque nouvelle station déployée.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Desktop: horizontal timeline -->
|
||||||
|
<div class="hidden md:block">
|
||||||
|
<div class="relative">
|
||||||
|
<div class="absolute left-0 right-0 top-[22px] h-px" style="background: linear-gradient(90deg, rgba(56,189,248,0.6), rgba(6,182,212,0.4), rgba(56,189,248,0.1));"></div>
|
||||||
|
<ol class="grid grid-cols-3 gap-6">
|
||||||
|
{phases.map((p, i) => (
|
||||||
|
<li>
|
||||||
|
<div class="mb-6 flex items-center gap-3">
|
||||||
|
<span class={`relative inline-flex h-11 w-11 items-center justify-center rounded-full border-2 border-abyss-950 ${i === 0 ? 'bg-tide-500 text-abyss-950' : 'bg-abyss-800 text-foam-100/70'} font-display font-semibold`}>
|
||||||
|
{i + 1}
|
||||||
|
{i === 0 && (
|
||||||
|
<span class="absolute -inset-2 rounded-full border border-tide-400/40 animate-pulse"></span>
|
||||||
|
)}
|
||||||
|
</span>
|
||||||
|
<div>
|
||||||
|
<div class="font-display text-sm font-semibold text-foam-50">{p.id}</div>
|
||||||
|
<div class="text-xs text-foam-100/55">{p.label}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="card h-full">
|
||||||
|
<div class="flex items-center justify-between">
|
||||||
|
<h3 class="font-display text-lg font-semibold text-foam-50" set:html={p.title}></h3>
|
||||||
|
<span class={`rounded-full px-2.5 py-0.5 text-[11px] font-medium ring-1 ${p.pill}`}>{p.status}</span>
|
||||||
|
</div>
|
||||||
|
<ul class="mt-4 space-y-2 text-sm text-foam-100/75">
|
||||||
|
{p.points.map((pt) => (
|
||||||
|
<li class="flex items-start gap-2">
|
||||||
|
<span class="mt-1.5 h-1 w-1 shrink-0 rounded-full bg-lagoon-400"></span>
|
||||||
|
<span set:html={pt}></span>
|
||||||
|
</li>
|
||||||
|
))}
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
))}
|
||||||
|
</ol>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Mobile: vertical -->
|
||||||
|
<div class="md:hidden">
|
||||||
|
<ol class="relative space-y-6 pl-8">
|
||||||
|
<div class="absolute left-3 top-2 bottom-2 w-px bg-gradient-to-b from-tide-500/60 via-tide-400/30 to-transparent"></div>
|
||||||
|
{phases.map((p, i) => (
|
||||||
|
<li class="relative">
|
||||||
|
<span class={`absolute -left-8 top-1 inline-flex h-6 w-6 items-center justify-center rounded-full border-2 border-abyss-950 ${i === 0 ? 'bg-tide-500 text-abyss-950' : 'bg-abyss-800 text-foam-100/70'} text-xs font-semibold`}>
|
||||||
|
{i + 1}
|
||||||
|
</span>
|
||||||
|
<div class="card">
|
||||||
|
<div class="flex flex-wrap items-center justify-between gap-2">
|
||||||
|
<h3 class="font-display text-base font-semibold text-foam-50">
|
||||||
|
{p.id} — <span set:html={p.title}></span>
|
||||||
|
</h3>
|
||||||
|
<span class={`rounded-full px-2.5 py-0.5 text-[11px] font-medium ring-1 ${p.pill}`}>{p.status}</span>
|
||||||
|
</div>
|
||||||
|
<ul class="mt-3 space-y-1.5 text-sm text-foam-100/75">
|
||||||
|
{p.points.map((pt) => (
|
||||||
|
<li class="flex items-start gap-2">
|
||||||
|
<span class="mt-1.5 h-1 w-1 shrink-0 rounded-full bg-lagoon-400"></span>
|
||||||
|
<span set:html={pt}></span>
|
||||||
|
</li>
|
||||||
|
))}
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
))}
|
||||||
|
</ol>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p class="mt-8 text-xs text-foam-100/50">
|
||||||
|
Les jalons sont indicatifs et s'ajustent au rythme des partenariats et des financements.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
30
src/pages/index.astro
Normal file
30
src/pages/index.astro
Normal file
@@ -0,0 +1,30 @@
|
|||||||
|
---
|
||||||
|
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 Pourquoi from '../components/Pourquoi.astro';
|
||||||
|
import Configurations from '../components/Configurations.astro';
|
||||||
|
import Architecture from '../components/Architecture.astro';
|
||||||
|
import CasUsage from '../components/CasUsage.astro';
|
||||||
|
import Equipe from '../components/Equipe.astro';
|
||||||
|
import Roadmap from '../components/Roadmap.astro';
|
||||||
|
import Contact from '../components/Contact.astro';
|
||||||
|
import Footer from '../components/Footer.astro';
|
||||||
|
---
|
||||||
|
|
||||||
|
<Layout>
|
||||||
|
<Nav />
|
||||||
|
<main id="main">
|
||||||
|
<Hero />
|
||||||
|
<Concept />
|
||||||
|
<Pourquoi />
|
||||||
|
<Configurations />
|
||||||
|
<Architecture />
|
||||||
|
<CasUsage />
|
||||||
|
<Equipe />
|
||||||
|
<Roadmap />
|
||||||
|
<Contact />
|
||||||
|
</main>
|
||||||
|
<Footer />
|
||||||
|
</Layout>
|
||||||
Reference in New Issue
Block a user