Nocron Landing Page

Next.jstypescriptweb-developmentTailwindCSSPostCSS


🔗 Ver en GitHub 🚀 Ver Demo Live

Résumé du Projet Nocron - One Page Launch

🎯 Produit

Nocron Landing Page est une page d’atterrissage pour un moteur d’automatisation et de planification léger conçu pour les flux de travail basés sur Notion.

Caractéristiques principales:

  • Formulaire de liste d’attente avec envoi par email
  • Support multilingue (Anglais, Espagnol, Français)
  • Mode sombre/clair avec persistance
  • Design responsive mobile-first
  • FAQ interactif avec accordéon
  • Section “Comment ça marche” avec processus en 3 étapes
  • SEO optimisé avec balises meta Open Graph et Twitter Card
  • Notifications Telegram via GitHub Actions

🛠️ Stack Technologique

Frontend

  • Next.js 15.5.4 - Framework React avec SSR
  • React 19.1.0 - Bibliothèque UI
  • TypeScript 5+ - Typage statique avec mode strict

Styles

  • TailwindCSS v4 - Framework CSS utility-first
  • PostCSS v4 - Processeur CSS

Outils de Développement

  • npm - Gestionnaire de paquets
  • Git - Contrôle de version
  • GitHub Actions - CI/CD et notifications

Intégrations Préparées

  • Google Analytics - Points de suivi implémentés
  • API Backend - Code commenté prêt à activer
  • Telegram Bot API - Notifications de déploiement et d’issues

🏗️ Architecture

Structure des Dossiers

onePageLauch/
├── app/                          # Next.js App Router
│   ├── components/               # Composants React
│   │   ├── NocronLaunchPage.tsx # Composant principal (849 lignes)
│   │   ├── LaunchingBadgeOption1.tsx # Badge animé
│   │   └── ErrorMessageBox.tsx  # Écran d'erreur/404
│   ├── layout.tsx               # Layout racine + métadonnées SEO
│   ├── page.tsx                 # Page d'accueil
│   ├── not-found.tsx            # Page 404
│   └── globals.css              # Styles globaux TailwindCSS v4
├── public/                      # Assets statiques (SVGs)
├── .github/workflows/           # GitHub Actions
│   ├── deploy-notification.yml
│   └── issue-notification.yml
└── [fichiers de configuration]

Composant Principal (NocronLaunchPage.tsx)

État géré avec React Hooks:

  • theme - Thème clair/sombre avec localStorage
  • lang - Langue (en/es/fr) avec détection automatique du navigateur
  • email - Entrée du formulaire
  • isSubmitting - État de chargement
  • submitStatus - Résultat de la soumission (idle/success/error)
  • openFaq - FAQ actuellement ouverte

Contenu multilingue (lignes 26-318):

  • 3 objets complets (en, es, fr) avec toutes les traductions
  • Inclut les textes UI, descriptions de fonctionnalités, FAQs et balises meta SEO

Sections rendues:

  1. Header - Logo + sélecteur de langue + toggle thème
  2. Hero - Badge animé + slogan + formulaire liste d’attente
  3. How It Works - Processus en 3 étapes
  4. Propositions de Valeur - 4 cartes de fonctionnalités
  5. Social Proof - Logos d’entreprises (placeholder)
  6. FAQ - Questions extensibles
  7. About - Description brève
  8. Footer - Liens + réseaux sociaux

Flux de Soumission du Formulaire

L'utilisateur entre l'email
    ↓
Validation frontend
    ↓
Suivre l'événement Analytics (préparé)
    ↓
[API backend - commenté] → Fallback vers mailto:
    ↓
Message succès/erreur
    ↓
Réinitialiser le formulaire (5s)

Implémentation actuelle: Ouvre le client email avec message pré-rempli Prêt pour: Décommenter les lignes 421-426 pour l’envoi au backend

Système de Thèmes

// Persistance dans localStorage
localStorage.getItem('nocron_theme')

// Détection de la préférence système
window.matchMedia('(prefers-color-scheme: dark)')

// Application via classe CSS
document.documentElement.classList.add('dark')

Fichier: app/components/NocronLaunchPage.tsx:321-347

Système Multilingue

Détection automatique:

navigator.language.startsWith('es') → 'es'
navigator.language.startsWith('fr') → 'fr'
default → 'en'

Persistance: localStorage.getItem('nocron_lang') Fichier: app/components/NocronLaunchPage.tsx:330-352

SEO Dynamique

Balises meta mises à jour dynamiquement selon la langue sélectionnée:

  • Title
  • Description
  • Balises Open Graph (og:title, og:description, og:image)
  • Balises Twitter Card

Fichier: app/components/NocronLaunchPage.tsx:354-388

Réseaux Sociaux

Contact

GitHub Actions - Notifications Telegram

Deploy Notification (.github/workflows/deploy-notification.yml):

  • Déclencheur: push vers main/production, statut de déploiement, manuel
  • Envoie: message de commit, auteur, branche, lien vers workflow
  • Emojis: 🔔 (update), ✅ (success), ❌ (failure)

Issue Notification (.github/workflows/issue-notification.yml):

  • Déclencheur: opened, edited, closed, reopened, assigned, labeled
  • Envoie: titre, description, labels, assigné, auteur
  • Différents emojis selon le type d’action

Patterns de Conception Implémentés

  1. Composition de Composants - Composants réutilisables (Card, Logo, Badge)
  2. Gestion d’État Côté Client - React Hooks sans bibliothèques externes
  3. Progressive Enhancement - Fonctionne sans JavaScript pour le contenu de base
  4. Mobile-First Responsive - Design optimisé mobile d’abord
  5. Error Boundary - Gestion des erreurs runtime (lignes 792-838)

Optimisations de Performance

  • Images SVG inline - Pas de requêtes HTTP supplémentaires
  • Lazy loading - Chargement différé du contenu
  • CSS-in-JS - Animations Tailwind sans JavaScript
  • Pas de bibliothèques externes - Bundle minimal (React + Next.js uniquement)
  • Mémoïsation - Calcul d’année mémoïsé (useMemo)

Sécurité

Implémenté:

  • ✅ Mode strict TypeScript
  • ✅ Error boundary pour les erreurs runtime
  • ✅ Protection XSS via échappement React
  • ✅ Secrets dans GitHub Actions (non codés en dur)
  • ✅ Accès en lecture seule mentionné pour les intégrations Notion

Dernière mise à jour: 2025-10-17 Version du document: 1.0