Ce qu'est le template
Un site d'une seule page pour un produit logiciel, avec des tarifs. C'est une seule application Next.js : pas de base de données, pas de back end, et rien à configurer avant le premier lancement.
La page est composée de ces sections, de haut en bas :
| Section | Ce qu'elle affiche |
|---|---|
| En-tête | Le logo, deux menus avec sous-menus (Products et Resources), des liens vers les tarifs et les témoignages, le sélecteur de langue et un menu mobile |
| Hero | Un titre, deux boutons et une image du produit |
| Preuve sociale | Des logos d'entreprises et quatre chiffres |
| Fonctionnalités | Six cartes de fonctionnalités |
| Comment ça marche | Quatre étapes, chacune avec une image |
| Témoignages | Trois citations de clients avec photos |
| Tarifs | Trois formules mensuelles, celle du milieu marquée Most Popular |
| Tableau comparatif | Les trois formules côte à côte, fonctionnalité par fonctionnalité |
| Intégrations | Dix logos d'outils |
| FAQ | Six questions qui s'ouvrent et se ferment |
| Aperçu du blog | Trois cartes d'articles |
| Appel à l'action | Un bouton final avec trois garanties |
| Pied de page | Des colonnes de liens, des liens vers les réseaux sociaux et la ligne de copyright |
Une section newsletter avec un formulaire d'inscription est aussi livrée dans src/features/home/Newsletter/. Elle n'apparaît pas sur la page tant que vous ne l'ajoutez pas.
Aperçu de la page
Technologies utilisées
| Technologie | Son rôle ici |
|---|---|
| Next.js 15 (App Router) | Le framework, le routage et le serveur de production |
| TypeScript | Tous les fichiers source |
| Tailwind CSS | Tout le style |
| next-intl | Les textes en anglais et en arabe, et la langue dans l'adresse |
| Framer Motion | Les animations |
| Radix UI | L'accordéon de la FAQ et le slot du bouton |
| Lucide React | Les icônes |
| React Hook Form, Zod et TanStack Query | Le formulaire de newsletter, ses vérifications et sa requête |
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é landing-page-template-2 :
| Chemin | Description |
|---|---|
src/ | L'application : la page, ses sections, l'en-tête et le pied de page, la configuration des langues |
messages/ | Tous les textes visibles, dans en.json et ar.json |
public/ | Images, logos et favicons |
Dockerfile | Construit le site dans une image qui le sert sur le port 3030 |
.env.example | Les deux paramètres optionnels, avec leurs valeurs par défaut |
README.md | Le guide d'installation et de personnalisation |
package.json, yarn.lock, .yarnrc.yml | Les dépendances et la configuration de Yarn 4 |
LICENSE | La licence MIT |
La page est livrée en anglais et en arabe. Chaque adresse commence par sa langue, /en ou /ar, et la page arabe est disposée de droite à gauche. La page est toujours sombre.
Sous Windows, utilisez PowerShell ou Git Bash pour les commandes de ces guides.