Ce qu'est le template
Une landing page d'une seule page pour un produit d'IA, construite avec Next.js, TypeScript et Tailwind CSS. La marque d'exemple s'appelle Nova. Dix sections vont de la section d'accueil jusqu'à l'appel à l'action final, entre un en-tête et un pied de page.
| Section | Ce qu'elle affiche | Dossier |
|---|---|---|
| Section d'accueil | Le titre, deux boutons, une ligne de confiance avec une note et l'image du produit | src/features/home/Hero |
| Preuve sociale | Six logos d'entreprises et quatre chiffres clés | src/features/home/SocialProof |
| Fonctionnement | Quatre étapes numérotées avec images, en carrousel à faire défiler sur mobile | src/features/home/HowItWorks |
| Fonctionnalités | Quatre onglets, chacun avec une image et ses principaux avantages | src/features/home/Features |
| Intégrations | Douze logos d'outils avec leur catégorie | src/features/home/Integrations |
| Témoignages | Trois citations de clients dans un carrousel qui défile tout seul | src/features/home/Testimonials |
| Aperçu du blog | Trois cartes d'articles avec catégorie, date et temps de lecture | src/features/home/BlogPreview |
| Tarifs | Trois offres avec un sélecteur mensuel et annuel | src/features/home/Pricing |
| FAQ | Six questions qui s'ouvrent et se ferment | src/features/home/Faq |
| Appel à l'action | Un message de conclusion avec deux boutons, où mènent les liens de contact | src/features/home/Cta |
L'en-tête comporte deux menus déroulants, le sélecteur de langue et un menu pour mobile. Le pied de page comporte trois groupes de liens, les icônes des réseaux sociaux et les liens légaux.
C'est une seule page : les cartes du blog, les liens des menus et les boutons sont des emplacements pour vos propres pages et actions.
Les technologies
| Technologie | Rôle |
|---|---|
| Next.js 15 (App Router) et React 19 | Le site, généré en pages statiques |
| TypeScript | Le code |
| Tailwind CSS 3 | Les styles |
| next-intl | L'anglais et l'arabe, avec la langue en tête de l'adresse |
| Framer Motion | Les animations d'apparition |
| Radix UI | L'accordéon de la FAQ et les onglets des fonctionnalités |
| Embla Carousel | Les carrousels sur mobile |
| Lucide React | Les icônes |
Chaque dépendance est fixée à une version exacte dans package.json, et yarn.lock est fourni : votre installation correspond donc à celle avec laquelle le template a été testé.
Contenu du téléchargement
Le ZIP s'extrait dans un seul dossier, landing-page-template-3 :
| Chemin | Description |
|---|---|
src/ | Le code du site, avec un dossier par section |
messages/ | Tous les textes de la page, dans en.json et ar.json |
public/ | Images, logos, icônes et image de partage sur les réseaux sociaux |
Dockerfile | Construit et sert le site dans une seule image |
package.json, yarn.lock, .yarnrc.yml | Les dépendances fixées et Yarn 4 |
.env.example | Le seul réglage facultatif, l'adresse du site |
README.md | Le guide d'installation |
LICENSE | La licence MIT |
Il n'y a ni back-end, ni base de données, ni compte à configurer. Le template est gratuit et open source sous licence MIT.
Le site fonctionne en anglais sur /en et en arabe sur /ar, avec la page arabe affichée de droite à gauche.
Sous Windows, utilisez PowerShell ou Git Bash pour les commandes de ces guides.