KG Immobilier — Site vitrine premium

Site brochure premium pour KG Immobilier (conseil et transaction en immobilier en France), construit avec Next.js 15, TypeScript et Tailwind CSS.

Stack

• Next.js 15 (App Router)
• React 19
• TypeScript
• Tailwind CSS

Prérequis

• Node.js 20+
• npm 10+

Installation

npm install

Lancer en développement

npm run dev

Application disponible sur http://localhost:3000.

Vérification qualité

npm run lint
npm run build

Production

npm run build
npm run start

Ce qui a été modernisé

• Hero d’accueil repensé en grand format immersif avec média plein cadre et overlays de lisibilité
• Système typographique unifié (échelle éditoriale unique, rythme de lecture homogène)
• Navigation modernisée (header sticky plus structuré, meilleure hiérarchie desktop/mobile)
• Système de composants harmonisé (cards, CTA, sections, footer, pages internes)
• Motion premium subtile ajoutée (reveals au scroll, hover states maîtrisés, respect du reduced motion)

Composants / pages mis à jour

• app/layout.tsx, app/globals.css, tailwind.config.ts
• components/header.tsx, components/footer.tsx, components/logo.tsx
• components/page-hero.tsx, components/cta-block.tsx
• components/service-card.tsx, components/sector-card.tsx, components/highlight-card.tsx, components/contact-card.tsx, components/contact-form.tsx
• components/reveal.tsx (nouveau composant de reveal au scroll)
• app/page.tsx, app/services/page.tsx, app/secteurs-d-intervention/page.tsx, app/a-propos/page.tsx, app/contact/page.tsx, app/not-found.tsx
• pages légales conservées et harmonisées visuellement: app/mentions-legales/page.tsx, app/politique-de-confidentialite/page.tsx

Choix typographiques

• Une seule famille principale sur toute l’interface (Manrope)
• Échelle unifiée via classes dédiées:
  • type-display (hero principal)
  • type-h1, type-h2, type-h3 (titres)
  • type-body-lg, type-body (texte courant)
  • eyebrow (labels)
• Cohérence sur les interlignes, tracking et densité visuelle

Choix navigation

• Header sticky avec état plus affirmé au scroll (contraste, ombre subtile, lisibilité)
• Relation plus claire entre logo, navigation et CTA
• États actifs/hover/focus raffinés
• Menu mobile simplifié et aligné sur la même logique premium

Choix hero média

• Image (et non vidéo) pour garder la sobriété, la performance et la maîtrise de lisibilité
• Média plein cadre via next/image + overlays calibrés pour conserver un texte très lisible
• Domaine distant autorisé: images.unsplash.com (next.config.ts)

Règles motion / effets

• Effets discrets uniquement: reveals au scroll, micro-lift des cartes et CTA, zoom hero lent
• Aucune animation décorative lourde
• Respect de prefers-reduced-motion (désactivation des mouvements non essentiels)

Structure du projet

• app/ : routes App Router, layout global, styles, pages SEO techniques (sitemap.ts, robots.ts)
• components/ : composants UI réutilisables
• lib/ : contenu métier, configuration site, helpers metadata
• brief.md : cadrage business/design et principes d’implémentation

Pages disponibles

• / — Accueil
• /services — Services
• /secteurs-d-intervention — Secteurs d’intervention
• /a-propos — À propos
• /contact — Contact
• /mentions-legales — Mentions légales
• /politique-de-confidentialite — Politique de confidentialité
• not-found — 404

SEO et technique

• metadata par page (titres et descriptions en français)
• Open Graph de base
• sitemap (/sitemap.xml)
• robots (/robots.txt)
• icône d’application (app/icon.svg)

Informations légales à compléter

Les pages légales contiennent des champs [À compléter] (statut juridique, SIREN/SIRET, hébergeur, durées de conservation exactes, etc.) à finaliser avant publication définitive.