Ce qu'est le template
Une landing page pour un produit ou une entreprise, écrite pour Publino, une plateforme fictive qui vend des composants UI et des templates et déploie des sites web, comme exemple. C'est une seule application Next.js, sans base de données ni back end, et rien n'est à configurer avant le premier lancement.
Elle compte trois pages : une page d'accueil avec une maquette de tableau de bord animée sous le titre, une page de tarifs et une page de contact. Elle est livrée avec un thème sombre et un thème clair, en anglais et en arabe.
Aperçu du site
Technologies utilisées
| Technologie | Son rôle ici |
|---|---|
| Next.js 16 (App Router) | Le framework, les pages, les métadonnées et le serveur de production |
| React 19 et TypeScript | Tous les composants et fichiers source |
| Tailwind CSS 4 | Tout le style, avec les jetons de couleur clairs et sombres |
| next-intl | Les textes anglais et arabes et la langue dans l'adresse |
| React Hook Form et Zod | Les deux formulaires et leurs vérifications |
| Animation | Les animations |
| Recharts, dnd-kit et cobe | Le graphique d'une carte de fonctionnalité, les cartes déplaçables de la maquette de tableau de bord et le globe 3D |
| Radix UI et Tabler Icons | Les onglets, les infobulles et les libellés, ainsi que les icônes |
Chaque dépendance est fixée à une version exacte dans package.json, et yarn.lock est inclus : votre installation obtient donc les mêmes versions que celles avec lesquelles le template a été testé.
Contenu du téléchargement
Le ZIP s'extrait dans un dossier nommé Publino-template :
| Chemin | Description |
|---|---|
src/ | L'application : les pages, leurs sections, l'en-tête, la maquette de tableau de bord, les cartes de fonctionnalités et la configuration des langues |
messages/ | Tous les textes visibles, en anglais et en arabe |
public/ | Les images, les favicons, les icônes d'application et l'image de partage sur les réseaux sociaux |
Dockerfile, .dockerignore | Construit le site dans une image qui le sert sur le port 3030 |
.env.example | Les paramètres optionnels, avec leurs valeurs par défaut |
README.md | Le guide d'installation et de personnalisation |
LICENSE.md | Votre licence commerciale |
package.json, yarn.lock, .yarnrc.yml | Les dépendances et la configuration de Yarn 4 |
À savoir avant de construire dessus
- Les deux formulaires vérifient ce que saisissent les visiteurs, mais n'envoient rien tant que vous ne les reliez pas à votre propre service.
- Rien n'encaisse de paiement. Les boutons des formules mènent à la page de contact ou au formulaire de la page d'accueil.
- Certains boutons sont des espaces réservés à diriger vers vos propres pages, comme Login, Book a call et les deux boutons du hero.
- Les textes, chiffres, personnes, prix et cartes de templates sont du contenu d'exemple à remplacer.
Le site est livré en anglais et en arabe. Les adresses anglaises n'ont pas de préfixe, comme /pricing, celles en arabe commencent par /ar, comme /ar/pricing, et les pages arabes s'affichent de droite à gauche.
Sous Windows, utilisez PowerShell ou Git Bash pour les commandes de ces guides.