- Refonte de site
- Motion design
- Export statique
CybrForge
- Secteur
- Cybersécurité
- Livré en
- Site web
- Année
- 2025
- Langues
- FR / EN
“Your Security • Our Priority”
(Le projet)
La refonte complète du site d’un cabinet indépendant de cybersécurité : une page unique sombre, inspirée de la forge, avec défilement fluide, animations pilotées par le scroll et une couche de contenu bilingue reconstruite depuis le site d’origine.
(Contexte)
Un site qui mise d’abord sur la crédibilité.
CybrForge présente un cabinet marocain indépendant de cybersécurité : vision et mission, équipe dirigeante, cinq lignes de services, certifications, références clients et publications, sur une longue page qui se termine par un formulaire de contact.
Nous avons reconstruit le site d’origine de zéro en application Next.js exportée en statique, avec une esthétique sombre de forge, et restructuré son contenu français et anglais dans une couche de contenu typée.
(Chiffres clés)
- sections animées
- 10
- badges de certification
- 13
- contenu bilingue
- FR / EN
- export statique
- 100 %
Les choix qui ont façonné le projet
Exporté en statique
La version de production produit un ensemble entièrement statique, déployable sur n’importe quel hébergeur, avec des chemins portables y compris en sous-dossier.
Hébergement sans serveur
Le contenu comme donnée
Navigation, services, équipe, certifications et publications vivent dans une couche de contenu typée plutôt que dans le balisage : traduire et modifier reste simple.
Source unique
Animations pilotées par section
Une configuration centrale active ou coupe les effets de scroll section par section, ce qui a permis d’isoler et d’éliminer les saccades.
Maîtrise des performances
Un mouvement piloté par le scroll
Défilement fluide Lenis, apparitions GSAP, compteurs animés et boutons magnétiques forment une couche d’interaction cohérente.
Système de mouvement
(Comment ça marche)
La composition de la page
Couche de contenu
Chaque texte est rangé par section et par langue, et un fournisseur de langue sélectionne le français ou l’anglais à l’exécution.
Composants de section
Chaque section lit la couche de contenu et des primitives d’interface partagées : boutons magnétiques, apparitions et compteurs.
Export statique
La compilation pré-rend tout en fichiers statiques, sans serveur nécessaire en production.
Dans le projet
Captures de la version livrée, regroupées par produit. Sélectionnez-en une pour la voir en taille réelle.
Technologies
- Framework
- Next.js 14
- App Router
- Static export
- Interface
- React 18
- TypeScript
- Tailwind CSS 3
- Animation
- GSAP
- Framer Motion
- Lenis
- Contenu
- Typed content layer
- FR / EN provider
(Projet suivant)
LIPACK
Industrie, 2025
