Présentation
Communication System (COMSYS) est un intégrateur marocain de solutions de gestion des temps, de contrôle d’accès et de sécurité électronique, qui accompagne plus de 3 000 entreprises depuis 1992. J’ai conçu et développé leur plateforme institutionnelle bilingue : un site qui présente l’ensemble de leurs logiciels et de leur offre sécurité, transforme les visiteurs en prospects B2B qualifiés et met à disposition de l’équipe commerciale un outil de présentation digital pour les rendez-vous clients.
Le défi
- Un catalogue large — six logiciels de gestion et une gamme complète de services de sécurité — à expliquer clairement à des publics très différents (RH, services généraux, DSI, industrie).
- Une forte concurrence sur les recherches marocaines comme « logiciel de pointage », « contrôle d’accès » ou « vidéosurveillance IP », nécessitant une vraie stratégie SEO locale.
- Une équipe commerciale qui avait besoin de présentations professionnelles et toujours à jour, plutôt que de fichiers statiques.
- Un marché francophone avec des clients internationaux : toute l’expérience devait fonctionner en français et en anglais.
Ce que j’ai réalisé
Site institutionnel bilingue
Un site entièrement localisé (français par défaut, anglais en seconde langue) avec routes, contenus et métadonnées traduits, des transitions de pages et animations au défilement réalisées avec Framer Motion, et une mise en page responsive pensée pour les décideurs sur ordinateur comme sur mobile.
Pages logiciels & solutions
Une page dédiée à chaque produit — Optitime (gestion des temps), Opticantine (restauration d’entreprise), Optiproject (gestion de projets), Gestpark (gestion de parking), Opticlub (gestion de clubs sportifs) et Axium (opérations terrain) — ainsi que des pages sécurité : vidéosurveillance IP, systèmes de sécurité électronique, sécurité industrielle, pointage biométrique et contrôle d’accès à Casablanca.
Présentations commerciales interactives
Un espace de présentation protégé par connexion, où l’équipe commerciale déroule des présentations de l’entreprise et des produits directement dans le navigateur, avec des transitions animées et des graphiques réalisés avec Chart.js — toujours alignées sur la dernière offre, sans fichier à envoyer.
Tableau de bord d’administration
Un back-office privé pour gérer les utilisateurs commerciaux et consulter les traces d’accès : chaque session de présentation est enregistrée avec sa date et une géolocalisation basée sur l’adresse IP, pour savoir quelles présentations ont été ouvertes, quand et depuis où.
Blog & génération de leads
- Un blog alimenté par une API de contenu centrale multi-tenant, appelée via un proxy côté serveur afin que les identifiants de l’API ne soient jamais exposés au navigateur.
- Un formulaire de contact protégé par Google reCAPTCHA et envoyé par e-mail, avec des appels à l’action clairs sur chaque page (étude gratuite, réponse sous 24 heures).
SEO & performance
- Une structure d’URL orientée mots-clés et des pages piliers ciblant les recherches au Maroc (logiciel de pointage au Maroc, contrôle d’accès à Casablanca…).
- Des données structurées JSON-LD (organisation, FAQ, produits et services) pour des résultats enrichis.
- Des balises meta localisées et un sitemap généré automatiquement.
- Inlining du CSS critique, mise en cache longue durée des ressources statiques et images optimisées pour un chargement rapide.
Stack technique & déploiement
Développé avec Next.js 14 (App Router), React, next-intl, SCSS, Framer Motion et Chart.js. L’application est compilée en build autonome (standalone) et livrée dans une image Docker multi-étapes (Node 20 Alpine, exécutée avec un utilisateur non-root) pour des déploiements légers, sécurisés et reproductibles.
Résultats
- Une plateforme unique présentant toute l’offre logicielle et sécurité de COMSYS en deux langues.
- Une équipe commerciale qui présente en digital et peut suivre l’utilisation de ses présentations.
- Un flux de publication où les nouveaux articles sont mis en ligne sans intervention d’un développeur.