# Brief — Site vitrine NowYouSea

## Objectif
Site web **vitrine** présentant le projet **NowYouSea** ("Rocher Connecté") : réseau de stations côtières acoustiques low-cost pour la surveillance du milieu marin.

**Public cible** : partenaires institutionnels (ports, autorités maritimes, AMP, IFREMER, SHOM, OFB), opérateurs éoliens offshore, collectivités.

## ⚠️ Contraintes fermes

- **NE JAMAIS mentionner le concours Octo'pousse** ni IFREMER comme "jury/concours". Le site doit être une vitrine produit/projet autonome, pas un dossier de candidature.
- Langue : **français** uniquement.
- Ton : **moderne, maritime, sérieux mais élégant**. Pas de jargon commercial lourd. Crédible pour un interlocuteur institutionnel mais pas ennuyeux.
- Accessibilité AA minimum.
- Responsive mobile → desktop.

## Stack imposé

- **Astro** (SSG, v5+) + **TailwindCSS v4** (ou v3, selon stabilité)
- Configuration `base: '/nowyousea/'` (le site sera servi en sous-chemin)
- Sortie statique dans `dist/`
- Aucun backend, aucune API, tout statique
- Aucune dépendance runtime JS lourde — animations CSS/SVG privilégiées
- Images optimisées (Astro Image ou équivalent)

## Structure attendue

Site **single-scroll long** ou **multi-pages légères**, au choix selon rendu.

### Sections (ordre suggéré)

1. **Hero** — Accroche forte : "Le rocher connecté qui écoute l'océan." Visuel maritime (SVG/CSS/ambiance océan). CTA doux : "Découvrir le projet".
2. **Concept** — Qu'est-ce que NowYouSea ? Station côtière autonome, hydrophone + CTD + calcul embarqué, data pipeline vers dashboard, comparaison implicite "MAREL démocratisé". Schéma visuel bout-en-bout (terrain → rocher → cloud → dashboard).
3. **Pourquoi** — Enjeux : bruit sous-marin, biodiversité, conformité environnementale (parler de **DCSMM** sans la marketer, juste comme contexte réglementaire), absence d'outils abordables en zone littorale.
4. **4 configurations** — Cartes produits :
   - **MINI Sentinelle** : petit port, < 3 000 €
   - **STD Gardien** : port moyen, conformité DCSMM, < 8 000 €
   - **PRO Observatoire** : AMP, port majeur, recherche, < 18 000 €
   - **EOLIEN Vigie Offshore** : périphérie parc éolien, < 15 000 €
   - Chaque carte : cible, features clés, prix indicatif. Lisible, comparable.
5. **Architecture** — Schéma visuel de l'architecture système (voir `ARCHITECTURE-SYSTEME.md` pour les blocs : rocher → gateway → backend → dashboard). Garder technique mais lisible.
6. **Cas d'usage** — Scénario **Port-Navalo / Golfe du Morbihan** (voir `SCENARIO-DCSMM-V2.md`). Illustrer avec carte simple (SVG statique suffit).
7. **Équipe** — 3 co-fondateurs :
   - **Baptiste Moulin** — CTO, systèmes embarqués/IoT
   - **Quentin** — Ingénieur Produit & Industrialisation
   - **Radu Mihail** — Business & Réglementaire EU
   (Voir `equipe/EQUIPE-NOWYOUSEA.md` et `BUSINESS-CASE-DCSMM.md` pour les bios.)
8. **Feuille de route** — Phases 1/2/3 synthétiques. Pas de dates précises si tu ne les trouves pas dans les docs — reste prudent.
9. **Contact** — Bloc simple : email `contact@nowyousea.fr` (placeholder, mettre ce que tu trouves dans les docs sinon), GitHub/Gitea si dispo, lien "demander une démo".

**Exclure explicitement** : toute mention Octo'pousse, "candidature", "concours", "deadline 13 février", scores d'évaluation, "IFREMER jury".

## Design / Direction artistique

- **Palette océan profond** : bleus nuit (#0a1a2f, #0ea5e9), vert d'eau accent (#06b6d4), gris galet, blanc écume. Contraste AA strict.
- **Typographie** : sans-serif moderne (Inter / Geist / Sora), headings en display soigné.
- **Texture** : subtile, pas criarde. Accepter un peu de glassmorphism léger sur cartes (pas tout le site). Ombres douces.
- **Animations** : légères, utiles. Préférer CSS / `prefers-reduced-motion` respecté.
- **Schémas** : SVG inline pour l'architecture et la carte. Pas de placeholder Unsplash en prod — si pas d'asset, dessine un SVG propre.
- **Dark-first** (le site principal est sombre). Pas besoin de mode clair.
- **Icônes** : Lucide ou heroicons, cohérentes partout.

## Déploiement

Le site sera déployé à `https://laboratoire.freeboxos.fr/nowyousea/` via Caddy reverse proxy en `file_server` statique vers `/srv/www/nowyousea/` sur la VM `.82`.

Donc :
- `astro.config.mjs` doit avoir `base: '/nowyousea/'` et `output: 'static'`
- Tous les liens internes doivent utiliser `import.meta.env.BASE_URL` ou helpers Astro pour respecter le base path
- Les assets (images, fonts) doivent être accessibles sous le base path

## Livrables

1. Un projet Astro complet dans le répertoire courant
2. Build propre : `npm run build` génère `dist/` sans erreur
3. Preview testable : `npm run preview` doit servir le site correctement en local
4. Fichier `DEPLOY.md` à la racine avec les commandes exactes pour :
   - rsync du `dist/` vers `floppyrj45@192.168.0.82:/srv/www/nowyousea/`
   - snippet Caddy à ajouter (voir section Déploiement ci-dessous)
5. Commits git propres au fil de l'avancement (pas un seul commit géant)

### Snippet Caddy attendu (à inclure dans DEPLOY.md)

```caddyfile
# NowYouSea - Site vitrine
handle /nowyousea {
    redir /nowyousea/ 307
}
handle_path /nowyousea/* {
    root * /srv/www/nowyousea
    file_server {
        index index.html
    }
}
```

## Source du contenu

Tout le contenu factuel se trouve dans `content/` :
- `ARCHITECTURE-SYSTEME.md` (archi système complète)
- `BOM-CONFIGURATIONS.md` (4 configurations chiffrées)
- `BUSINESS-CASE-DCSMM.md`
- `BUSINESS-MODEL-V3.md`
- `SCENARIO-DCSMM-V2.md`
- `equipe/EQUIPE-NOWYOUSEA.md`
- `docs-mvp/` (docs techniques additionnelles : BOM.md, HARDWARE.md, USER_STORIES.md, MARKET_STUDY.md, VALIDATION_IDEA.md, DATA.md, DIAGRAMS.md)
- `README-mvp.md`

Pioche, synthétise, reformule en ton marketing crédible. **Ne copie pas bêtement**. Si un passage est trop technique pour une vitrine, vulgarise. Si un passage est trop commercial, atténue.

## Quand tu as fini

Lance :
```bash
openclaw system event --text "Done: site vitrine NowYouSea buildé dans ~/Projects/site-nowyousea — dist/ prêt, DEPLOY.md fait" --mode now
```