Aller au contenu principal
  • 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

  1. 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

  2. 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

  3. 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

  4. 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

  1. 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.

  2. Composants de section

    Chaque section lit la couche de contenu et des primitives d’interface partagées : boutons magnétiques, apparitions et compteurs.

  3. Export statique

    La compilation pré-rend tout en fichiers statiques, sans serveur nécessaire en production.

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

Votre projet pourrait être le prochain système que nous construisons.