Overview
Communication System (COMSYS) is a Moroccan integrator of time & attendance, access control and electronic security solutions, trusted by more than 3,000 companies since 1992. I designed and developed their bilingual corporate platform: a website that presents their full software suite and security offering, turns visitors into qualified B2B leads, and gives their sales team a digital presentation tool for client meetings.
The challenge
- A broad catalogue — six management software products plus a complete range of security services — that had to be explained clearly to very different audiences (HR, facility managers, IT, industry).
- Strong competition on Moroccan search queries such as attendance software, access control or IP video surveillance, which required a real local SEO strategy.
- A sales team that needed professional, always up-to-date presentations instead of static slide decks.
- A French-speaking market with international clients, so the whole experience had to work in French and English.
What I built
Bilingual corporate website
A fully localized site (French by default, English as a second language) with translated routes, content and metadata, smooth Framer Motion page transitions and scroll animations, and a responsive layout designed for decision-makers browsing on desktop and mobile.
Software & solution pages
Dedicated pages for each product — Optitime (time & attendance), Opticantine (corporate catering), Optiproject (project management), Gestpark (parking management), Opticlub (sports club management) and Axium (field operations) — plus security pages covering IP video surveillance, electronic security systems, industrial security, biometric attendance and access control in Casablanca.
Interactive sales presentations
A login-protected presentation space where the sales team runs slide-based company and product presentations directly in the browser, with animated transitions and data visualizations built with Chart.js — always consistent with the latest offer, with no files to send around.
Admin dashboard
A private back-office to manage sales users and review access traces: every presentation session is logged with its date and IP-based geolocation, so the team knows which presentations were opened, when and from where.
Blog & lead generation
- A blog powered by a central multi-tenant content API, accessed through a server-side proxy so that API credentials never reach the browser.
- A contact form protected by Google reCAPTCHA and delivered by email, with clear calls to action on every page (free study, response within 24 hours).
SEO & performance
- Keyword-driven URL structure and pillar pages targeting Moroccan searches (e.g. attendance software in Morocco, access control in Casablanca).
- JSON-LD structured data (organization, FAQ, products and services) for rich search results.
- Localized meta tags and an automatically generated sitemap.
- Critical CSS inlining, long-term caching of static assets and optimized images for fast loading.
Tech stack & deployment
Built with Next.js 14 (App Router), React, next-intl, SCSS, Framer Motion and Chart.js. The application is compiled as a standalone build and shipped in a multi-stage Docker image (Node 20 Alpine, running as a non-root user) for lightweight, secure and reproducible deployments.
Outcome
- One platform presenting the entire COMSYS product and security range in two languages.
- A sales team that presents digitally and can see how its presentations are used.
- A content workflow where new articles are published without involving a developer.