DevisForAll - Générateur de devis professionnels

Site web moderne pour DevisForAll, une plateforme SaaS de génération de devis professionnels.

🚀 Technologies utilisées

• Framework: Next.js 14 avec React et TypeScript
• Animations: GSAP, ScrollTrigger, Framer Motion
• 3D & WebGL: Three.js, @react-three/fiber, @react-three/drei, @react-three/postprocessing
• Scroll fluide: Lenis (Smooth Scroll)
• UI & Design: Tailwind CSS
• Polices: SF Pro, Inter, Neue Montreal
• Icônes: Lucide Icons
• Base de données: Supabase
• Authentification: Supabase Auth

📦 Installation

1. Installez les dépendances :

npm install

2. (Optionnel pour développement local) Configurez Supabase en créant un fichier .env.local :

NEXT_PUBLIC_SUPABASE_URL=https://xzaanrhgdhusatdxscul.supabase.co
NEXT_PUBLIC_SUPABASE_ANON_KEY=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6Inh6YWFucmhnZGh1c2F0ZHhzY3VsIiwicm9sZSI6ImFub24iLCJpYXQiOjE3NjU2MjIzMzQsImV4cCI6MjA4MTE5ODMzNH0.fMfMSYXhm67o-_PORorZ8S3u_Rm_rhHWIPzq8UAZhic

3. IMPORTANT : Créez les tables dans Supabase en exécutant le script SQL fourni dans supabase-schema.sql via l'éditeur SQL de Supabase.

🛠️ Développement

Lancez le serveur de développement :

npm run dev

Ouvrez http://localhost:3000 dans votre navigateur.

🚀 Déploiement sur Vercel

Méthode rapide (CLI)

1. Installer Vercel CLI :

npm i -g vercel

2. Se connecter :

vercel login

3. Déployer :

# Déploiement en production
vercel --prod

4. Configurer les variables d'environnement dans le dashboard Vercel ou via CLI :

vercel env add NEXT_PUBLIC_SUPABASE_URL production
vercel env add NEXT_PUBLIC_SUPABASE_ANON_KEY production

Méthode via interface web

1. Allez sur vercel.com
2. Importez votre repository GitHub/GitLab
3. Ajoutez les variables d'environnement dans les paramètres du projet
4. Cliquez sur "Deploy"

Variables d'environnement requises :

• NEXT_PUBLIC_SUPABASE_URL
• NEXT_PUBLIC_SUPABASE_ANON_KEY

Voir DEPLOY.md pour plus de détails.

🏗️ Structure du projet

├── app/                    # Pages Next.js (App Router)
│   ├── layout.tsx         # Layout principal
│   ├── page.tsx           # Page d'accueil
│   ├── auth/              # Page d'authentification
│   │   └── page.tsx       # Connexion/Inscription
│   ├── generer/           # Page de génération de devis
│   │   └── page.tsx       # Formulaire de création de devis
│   ├── templates/         # Page des modèles de devis
│   │   └── page.tsx       # Liste des modèles disponibles
│   ├── mes-devis/         # Page de gestion des devis
│   │   └── page.tsx       # Liste des devis sauvegardés
│   └── globals.css        # Styles globaux
├── components/            # Composants React
│   ├── Header.tsx         # En-tête avec navigation responsive
│   ├── Hero.tsx           # Section héro avec 3D
│   ├── Hero3DScene.tsx    # Scène 3D (Three.js)
│   ├── Features.tsx       # Section fonctionnalités
│   ├── Solutions.tsx      # Section solutions par secteur
│   └── SmoothScroll.tsx   # Wrapper Lenis
├── contexts/              # Contextes React
│   └── AuthContext.tsx    # Contexte d'authentification
├── lib/                   # Utilitaires
│   ├── supabase.ts        # Client Supabase
│   └── supabase-client.ts # Client Supabase (browser)
└── supabase-schema.sql    # Schéma de base de données

✨ Fonctionnalités

• ✅ Design moderne avec glassmorphism
• ✅ Animations fluides avec GSAP et Framer Motion
• ✅ Scène 3D interactive avec Three.js (vagues fluides)
• ✅ Scroll fluide avec Lenis
• ✅ Design responsive (mobile, tablette, PC)
• ✅ Authentification avec email et mot de passe (Supabase Auth)
• ✅ 8 modèles de devis adaptés à différents secteurs
• ✅ Formulaire de génération de devis complet
• ✅ Calcul automatique des totaux (HT, TVA, TTC)
• ✅ Gestion des lignes de prestations
• ✅ Sauvegarde des devis dans Supabase
• ✅ Gestion des devis (liste, suppression)
• ✅ Optimisé pour les performances

🎨 Personnalisation

Les couleurs, polices et styles peuvent être modifiés dans :

• tailwind.config.js pour les couleurs et thème
• app/globals.css pour les styles globaux
• components/*.tsx pour les styles spécifiques

🗄️ Configuration Supabase

1. Connectez-vous à votre projet Supabase
2. Allez dans l'éditeur SQL
3. Exécutez le script supabase-schema.sql pour créer les tables et les politiques de sécurité

📱 Responsive Design

Le site est entièrement responsive avec :

• Mobile : Navigation hamburger, grilles en une colonne
• Tablette : Grilles en 2 colonnes, navigation adaptée
• Desktop : Grilles en 3-4 colonnes, navigation complète

🔐 Authentification

• Inscription avec email et mot de passe
• Connexion sécurisée
• Gestion de session automatique
• Protection des routes nécessitant une authentification

📝 Notes

• Les devis sont sauvegardés dans Supabase avec Row Level Security (RLS)
• Chaque utilisateur ne peut voir que ses propres devis
• Les modèles de devis sont disponibles dans la section "Modèles"