n'hésitez pas à consulter ce lien
[https://arcana-architecture.netlify.app/

La plupart des sites de cabinets d'architecture s'ouvrent de la même façon : une photo d'en-tête pleine largeur, un titre en police à empattements, une grille de vignettes de projets. C'est correct. C'est aussi complètement oubliable. ARCANA s'ouvre autrement : avec une fiche technique de projet, des coordonnées et des dimensions qui défilent comme sur une véritable table à dessin, et une séquence de défilement où un plan dessiné à la main se transforme peu à peu en photographie du bâtiment achevé. C'est le genre de première impression qui pousse le visiteur à cesser de faire défiler une seconde et à vraiment regarder. Tout ce qui suit cette ouverture est conçu pour prolonger cette impression au lieu de retomber dans le territoire des modèles génériques.

Le modèle est livré sous la forme d'un site Next.js complet de sept pages. La page d'accueil porte l'interaction de défilement signature Blueprint → Reality, un index éditorial des projets, des études de matériaux, la philosophie du cabinet, une sélection de réalisations et un aperçu du journal. L'index des projets présente le travail du cabinet sous la forme d'une liste éditoriale dense plutôt que d'une grille de cartes générique. Chaque page de détail de projet est une étude de cas complète : données du projet, énoncé du concept et visionneuse interactive de dessins plan / élévation / coupe / détail qui permet aux visiteurs de passer d'un dessin technique à l'autre comme un architecte les épinglerait au mur, ainsi que les matériaux utilisés et la photographie. La page Cabinet présente l'activité et une archive horizontale d'objets du cabinet, la page Approche détaille la méthodologie en cinq étapes (Observer, Définir, Dessiner, Tester, Construire), le Journal rassemble des notes du cabinet sur les matériaux et le processus, et la page Contact est un formulaire de demande entièrement validé avec de véritables états de chargement, de réussite et d'erreur.

Rien ici ne nécessite de toucher à un backend. Chaque élément de contenu (projets, articles du journal, matériaux, textes du cabinet, libellés de navigation) vit dans de simples fichiers TypeScript lisibles sous data/ : renommer un projet, remplacer un matériau ou réécrire la biographie du cabinet revient donc à modifier du texte, pas à reconstruire. Les images passent par un petit utilitaire de construction d'URL, ce qui vous permet de pointer n'importe quelle entrée vers votre propre photographie ou un fichier hébergé dans public/ en quelques secondes. Les couleurs sont centralisées sous forme de propriétés personnalisées CSS, les polices se changent dans un seul fichier et la navigation tient dans un seul tableau : le genre de structure qui rend la personnalisation accessible même si vous ne maîtrisez pas vraiment React.

Sous le capot : Next.js 16 (App Router) + TypeScript, Tailwind CSS 4, Framer Motion pour l'interface et les transitions de page, GSAP + ScrollTrigger pour la séquence de défilement signature, Lenis pour le défilement fluide, et React Hook Form + Zod pour la validation du formulaire de contact. L'ensemble de l'expérience respecte prefers-reduced-motion (GSAP/Lenis sont entièrement ignorés et les transitions Framer sont réduites), est conçu dans le souci de l'accessibilité (vrais textes alternatifs, états :focus-visible, balisage sémantique) et est optimisé pour de bons Core Web Vitals et des métadonnées SEO propres dès l'installation. Ce que vous obtenez : le code source complet, sept pages entièrement développées, tous les composants et animations, des polices auto-hébergées, un guide client rédigé couvrant chaque élément modifiable et une configuration de déploiement Netlify en un clic (qui se déploie aussi sans problème sur Vercel ou tout hébergeur Next.js). Ce sur quoi vous construisez : un modèle statique, sans backend ; consultez les Détails supplémentaires ci-dessous pour savoir exactement ce qui n'est pas inclus.