Ce qu'est le template
MONO est un site d'une seule page pour une agence de design ou de développement web, dans un style brutaliste en noir et blanc. C'est une seule application Next.js : pas de base de données, pas d'administration et pas de serveur à vous à faire tourner.
La page se compose de ces sections, de haut en bas :
| Section | Ce qu'elle affiche | Dossier |
|---|---|---|
| Barre de navigation | Le logo, des liens vers quatre sections, le sélecteur de langue et un bouton Contact | src/layouts/Navbar/ |
| Hero | Un titre sur trois lignes, une courte introduction, deux boutons et une forme animée | src/features/home/Hero/ |
| Atouts | Quatre cartes sur l'approche de l'agence | src/features/home/Features/ |
| Réalisations | Quatre projets, chacun avec une image, un titre et une année | src/features/home/Work/ |
| Méthode | Cinq étapes numérotées | src/features/home/Process/ |
| Témoignages | Trois citations de clients avec des boutons précédent et suivant | src/features/home/Testimonials/ |
| Tarifs | Trois formules avec un choix mensuel ou annuel | src/features/home/Pricing/ |
| Contact | Un formulaire de contact vérifié, l'e-mail, le téléphone, l'adresse et les liens sociaux | src/features/home/Contact/ |
| Pied de page | Les liens des sections, les liens légaux, les icônes sociales et la ligne de copyright | src/layouts/Footer/ |
Avec quoi il est construit
| Technologie | Rôle |
|---|---|
| Next.js 15 et React 19 | L'application, avec l'App Router |
| TypeScript | Sûreté du typage |
| Tailwind CSS 3 | Styles |
| next-intl 4 | Les adresses et les textes en anglais et en arabe |
| Motion | Animations |
| React Hook Form et Zod | Le formulaire de contact et ses vérifications |
| TanStack Query | L'envoi du formulaire de contact |
| Lucide React | Icônes |
Chaque dépendance est fixée à une version exacte et yarn.lock est inclus : votre installation obtient les mêmes versions que celles avec lesquelles le template a été testé.
Ce que contient le téléchargement
Le ZIP contient un seul dossier, landing-page-template-1 :
| Chemin | Description |
|---|---|
README.md | L'installation, les scripts, les réglages et où modifier chaque chose |
LICENSE | La licence MIT |
Dockerfile, .dockerignore | L'image Docker |
.env.example | Les deux réglages facultatifs |
messages/ | Tous les textes visibles, dans en.json et ar.json |
public/ | Les images des projets, les icônes et l'image d'aperçu pour les réseaux sociaux |
src/ | Le code |
package.json, yarn.lock, .yarnrc.yml | Les dépendances et les réglages de Yarn |
Le site est livré en anglais et en arabe : l'anglais sur /en, et l'arabe sur /ar, affiché de droite à gauche avec sa propre police.
Licence
MONO est gratuit sous licence MIT. Vous pouvez l'utiliser pour vos sites et ceux de vos clients, le modifier et le publier. Conservez la mention de copyright dans LICENSE.
Sous Windows, utilisez PowerShell ou Git Bash pour les commandes de ces guides.