 Server : Apache/2 System : Linux server-15-235-50-60 5.15.0-164-generic #174-Ubuntu SMP Fri Nov 14 20:25:16 UTC 2025 x86_64 User : gositeme ( 1004) PHP Version : 8.2.29 Disable Function : exec,system,passthru,shell_exec,proc_close,proc_open,dl,popen,show_source,posix_kill,posix_mkfifo,posix_getpwuid,posix_setpgid,posix_setsid,posix_setuid,posix_setgid,posix_seteuid,posix_setegid,posix_uname Directory : /home/gositeme/domains/lavocat.ca/private_html/src/pages/ |
'use client';
import React, { useState, useEffect } from 'react';
import Head from 'next/head';
import Link from 'next/link';
import { motion } from 'framer-motion';
import {
Shield, Users, Building2, Award, CheckCircle,
MapPin, Phone, Mail, ArrowRight, Star,
Scale, Gavel, Briefcase, Globe, MessageSquare, FileText, Calendar, Video, Bell,
CreditCard, BarChart3, Network, Search, Handshake
} from 'lucide-react';
import VerifiedLawyerCTA from '@/components/VerifiedLawyerCTA';
import { useLanguage } from '@/context/LanguageContext';
const HomePage: React.FC = () => {
const { language, toggleLanguage } = useLanguage();
// Bilingual content
const content = {
fr: {
title: "avocat.quebec - Le réseau juridique du Québec",
description: "La plateforme officielle pour les avocats vérifiés du Barreau du Québec. Connectez-vous avec des professionnels juridiques de confiance.",
keywords: "avocat, québec, barreau, droit, juridique, avocats vérifiés",
nav: {
businessProfiles: "Cabinets d'avocats",
judicialDirectory: "Répertoire judiciaire",
liveCases: "Dossiers en direct",
about: "À propos",
login: "Connexion",
join: "Rejoindre"
},
hero: {
title: "avocat.quebec",
subtitle: "Le réseau juridique officiel du Québec",
description: "Connectez-vous avec des avocats vérifiés par le Barreau du Québec. Trouvez l'expertise juridique dont vous avez besoin, en toute confiance.",
findLawyer: "Trouver un avocat",
becomeLawyer: "Devenir avocat vérifié"
},
features: {
title: "Pourquoi choisir avocat.quebec ?",
subtitle: "La plateforme de confiance pour la communauté juridique québécoise"
}
},
en: {
title: "avocat.quebec - Quebec's Legal Network",
description: "The official platform for verified lawyers from the Quebec Bar. Connect with trusted legal professionals.",
keywords: "lawyer, quebec, bar, legal, law, verified lawyers",
nav: {
businessProfiles: "Law Firms",
judicialDirectory: "Judicial Directory",
liveCases: "Live Cases",
about: "About",
login: "Login",
join: "Join"
},
hero: {
title: "avocat.quebec",
subtitle: "The Official Legal Network of Quebec",
description: "Connect with lawyers verified by the Quebec Bar. Find the legal expertise you need, with confidence.",
findLawyer: "Find a Lawyer",
becomeLawyer: "Become a Verified Lawyer"
},
features: {
title: "Why choose avocat.quebec?",
subtitle: "The trusted platform for Quebec's legal community"
}
}
};
const t = content[language];
return (
<>
<Head>
<title>{t.title}</title>
<meta name="description" content={t.description} />
<meta name="keywords" content={t.keywords} />
</Head>
<div className="min-h-screen bg-gradient-to-br from-blue-50 via-white to-purple-50 dark:from-gray-900 dark:via-gray-800 dark:to-gray-900">
{/* Header */}
<header className="bg-white/80 dark:bg-gray-800/80 backdrop-blur-sm border-b border-gray-200 dark:border-gray-700 sticky top-0 z-50">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div className="flex justify-between items-center py-4">
<div className="flex items-center">
<Shield className="h-8 w-8 text-blue-600 mr-3" />
<span className="text-2xl font-bold text-gray-900 dark:text-white">
avocat.quebec
</span>
</div>
<nav className="hidden md:flex space-x-8">
<Link href="/business-profiles" className="text-gray-600 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition-colors">
{t.nav.businessProfiles}
</Link>
<Link href="/judicial-directory" className="text-gray-600 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition-colors">
{t.nav.judicialDirectory}
</Link>
<Link href="/live-cases" className="text-gray-600 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition-colors">
{t.nav.liveCases}
</Link>
<Link href="/about" className="text-gray-600 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition-colors">
{t.nav.about}
</Link>
</nav>
<div className="flex items-center space-x-4">
{/* Language Switcher */}
<button
onClick={toggleLanguage}
className="text-blue-600 border border-blue-600 rounded px-2 py-1 font-semibold hover:bg-blue-50 transition-colors"
>
{language === 'fr' ? 'EN' : 'FR'}
</button>
<Link href="/auth/login" className="text-gray-600 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition-colors">
{t.nav.login}
</Link>
<Link href="/register-verified" className="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md font-medium transition-colors">
{t.nav.join}
</Link>
</div>
</div>
</div>
</header>
{/* Hero Section */}
<section className="relative py-20 px-4 sm:px-6 lg:px-8">
<div className="max-w-7xl mx-auto">
<motion.div
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
className="text-center"
>
<div className="flex items-center justify-center mb-6">
<Shield className="h-16 w-16 text-blue-600 mr-4" />
<h1 className="text-5xl md:text-6xl font-bold text-gray-900 dark:text-white">
{t.hero.title}
</h1>
</div>
<h2 className="text-2xl md:text-3xl font-semibold text-gray-800 dark:text-gray-200 mb-6">
{t.hero.subtitle}
</h2>
<p className="text-xl text-gray-600 dark:text-gray-400 mb-8 max-w-3xl mx-auto">
{t.hero.description}
</p>
<div className="flex flex-col sm:flex-row gap-4 justify-center">
<Link href="/business-profiles" className="bg-blue-600 hover:bg-blue-700 text-white px-8 py-3 rounded-lg font-semibold text-lg transition-colors flex items-center justify-center">
{t.hero.findLawyer}
<ArrowRight className="ml-2 h-5 w-5" />
</Link>
<Link href="/register-verified" className="bg-white hover:bg-gray-50 dark:bg-gray-800 dark:hover:bg-gray-700 text-blue-600 dark:text-blue-400 border-2 border-blue-600 dark:border-blue-400 px-8 py-3 rounded-lg font-semibold text-lg transition-colors flex items-center justify-center">
<Shield className="mr-2 h-5 w-5" />
{t.hero.becomeLawyer}
</Link>
</div>
</motion.div>
</div>
</section>
{/* Features Section */}
<section className="py-20 px-4 sm:px-6 lg:px-8 bg-white dark:bg-gray-800">
<div className="max-w-7xl mx-auto">
<motion.div
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ delay: 0.2 }}
className="text-center mb-16"
>
<h2 className="text-3xl md:text-4xl font-bold text-gray-900 dark:text-white mb-4">
{t.features.title}
</h2>
<p className="text-xl text-gray-600 dark:text-gray-400">
{t.features.subtitle}
</p>
</motion.div>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
<motion.div
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ delay: 0.3 }}
className="bg-gradient-to-br from-blue-50 to-blue-100 dark:from-blue-900/20 dark:to-blue-800/20 rounded-xl p-6 border border-blue-200 dark:border-blue-800"
>
<Shield className="h-12 w-12 text-blue-600 mb-4" />
<h3 className="text-xl font-semibold text-gray-900 dark:text-white mb-2">
Vérification Barreau
</h3>
<p className="text-gray-600 dark:text-gray-400">
Tous nos avocats sont vérifiés par le Barreau du Québec.
Vous avez la garantie de travailler avec des professionnels authentiques.
</p>
</motion.div>
<motion.div
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ delay: 0.4 }}
className="bg-gradient-to-br from-purple-50 to-purple-100 dark:from-purple-900/20 dark:to-purple-800/20 rounded-xl p-6 border border-purple-200 dark:border-purple-800"
>
<Building2 className="h-12 w-12 text-purple-600 mb-4" />
<h3 className="text-xl font-semibold text-gray-900 dark:text-white mb-2">
Cabinets d'avocats
</h3>
<p className="text-gray-600 dark:text-gray-400">
Découvrez les cabinets d'avocats québécois avec leurs équipes
et leurs spécialisations. Trouvez l'expertise qui correspond à vos besoins.
</p>
</motion.div>
<motion.div
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ delay: 0.5 }}
className="bg-gradient-to-br from-green-50 to-green-100 dark:from-green-900/20 dark:to-green-800/20 rounded-xl p-6 border border-green-200 dark:border-green-800"
>
<Users className="h-12 w-12 text-green-600 mb-4" />
<h3 className="text-xl font-semibold text-gray-900 dark:text-white mb-2">
Communauté active
</h3>
<p className="text-gray-600 dark:text-gray-400">
Rejoignez une communauté dynamique d'avocats, de juristes
et de professionnels du droit. Partagez, collaborez, grandissez.
</p>
</motion.div>
<motion.div
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ delay: 0.6 }}
className="bg-gradient-to-br from-yellow-50 to-yellow-100 dark:from-yellow-900/20 dark:to-yellow-800/20 rounded-xl p-6 border border-yellow-200 dark:border-yellow-800"
>
<Award className="h-12 w-12 text-yellow-600 mb-4" />
<h3 className="text-xl font-semibold text-gray-900 dark:text-white mb-2">
Excellence reconnue
</h3>
<p className="text-gray-600 dark:text-gray-400">
Nos avocats sont évalués et reconnus pour leur expertise.
Système de notation et de recommandations transparent.
</p>
</motion.div>
<motion.div
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ delay: 0.7 }}
className="bg-gradient-to-br from-red-50 to-red-100 dark:from-red-900/20 dark:to-red-800/20 rounded-xl p-6 border border-red-200 dark:border-red-800"
>
<Scale className="h-12 w-12 text-red-600 mb-4" />
<h3 className="text-xl font-semibold text-gray-900 dark:text-white mb-2">
Dossiers en direct
</h3>
<p className="text-gray-600 dark:text-gray-400">
Suivez les dossiers juridiques en cours, participez aux discussions
et restez informé des développements importants.
</p>
</motion.div>
<motion.div
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ delay: 0.8 }}
className="bg-gradient-to-br from-indigo-50 to-indigo-100 dark:from-indigo-900/20 dark:to-indigo-800/20 rounded-xl p-6 border border-indigo-200 dark:border-indigo-800"
>
<Globe className="h-12 w-12 text-indigo-600 mb-4" />
<h3 className="text-xl font-semibold text-gray-900 dark:text-white mb-2">
Plateforme moderne
</h3>
<p className="text-gray-600 dark:text-gray-400">
Une plateforme moderne et intuitive conçue pour faciliter
les interactions entre professionnels du droit et clients.
</p>
</motion.div>
</div>
</div>
</section>
{/* Ce que nous faisons - Comprehensive Features Overview */}
<section className="py-20 px-4 sm:px-6 lg:px-8 bg-gray-50 dark:bg-gray-900">
<div className="max-w-7xl mx-auto">
<motion.div
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ delay: 0.2 }}
className="text-center mb-16"
>
<h2 className="text-3xl md:text-4xl font-bold text-gray-900 dark:text-white mb-4">
Ce que nous faisons
</h2>
<p className="text-xl text-gray-600 dark:text-gray-400 max-w-3xl mx-auto">
Une plateforme complète qui révolutionne l'accès à la justice au Québec.
De la recherche d'avocat à la gestion de dossier, nous simplifions tout le processus juridique.
</p>
</motion.div>
<div className="grid grid-cols-1 lg:grid-cols-2 gap-12">
{/* Pour les clients */}
<motion.div
initial={{ opacity: 0, x: -20 }}
animate={{ opacity: 1, x: 0 }}
transition={{ delay: 0.3 }}
className="space-y-6"
>
<div className="text-center lg:text-left">
<h3 className="text-2xl font-bold text-gray-900 dark:text-white mb-4">
Pour les clients
</h3>
<p className="text-gray-600 dark:text-gray-400 mb-8">
Trouvez l'avocat parfait pour votre situation, suivez votre dossier en temps réel,
et gardez le contrôle total de votre affaire juridique.
</p>
</div>
<div className="space-y-4">
<div className="flex items-start space-x-4">
<div className="flex-shrink-0 w-8 h-8 bg-blue-100 dark:bg-blue-900 rounded-full flex items-center justify-center">
<CheckCircle className="h-5 w-5 text-blue-600 dark:text-blue-400" />
</div>
<div>
<h4 className="font-semibold text-gray-900 dark:text-white">Recherche intelligente</h4>
<p className="text-gray-600 dark:text-gray-400">Filtrez par spécialité, localisation, expérience et disponibilité</p>
</div>
</div>
<div className="flex items-start space-x-4">
<div className="flex-shrink-0 w-8 h-8 bg-green-100 dark:bg-green-900 rounded-full flex items-center justify-center">
<Users className="h-5 w-5 text-green-600 dark:text-green-400" />
</div>
<div>
<h4 className="font-semibold text-gray-900 dark:text-white">Profils vérifiés</h4>
<p className="text-gray-600 dark:text-gray-400">Tous les avocats sont vérifiés par le Barreau du Québec</p>
</div>
</div>
<div className="flex items-start space-x-4">
<div className="flex-shrink-0 w-8 h-8 bg-purple-100 dark:bg-purple-900 rounded-full flex items-center justify-center">
<Scale className="h-5 w-5 text-purple-600 dark:text-purple-400" />
</div>
<div>
<h4 className="font-semibold text-gray-900 dark:text-white">Suivi de dossier</h4>
<p className="text-gray-600 dark:text-gray-400">Accédez à vos documents, calendrier et communications</p>
</div>
</div>
<div className="flex items-start space-x-4">
<div className="flex-shrink-0 w-8 h-8 bg-yellow-100 dark:bg-yellow-900 rounded-full flex items-center justify-center">
<MessageSquare className="h-5 w-5 text-yellow-600 dark:text-yellow-400" />
</div>
<div>
<h4 className="font-semibold text-gray-900 dark:text-white">Communication sécurisée</h4>
<p className="text-gray-600 dark:text-gray-400">Messagerie intégrée et partage de documents chiffré</p>
</div>
</div>
<div className="flex items-start space-x-4">
<div className="flex-shrink-0 w-8 h-8 bg-red-100 dark:bg-red-900 rounded-full flex items-center justify-center">
<CreditCard className="h-5 w-5 text-red-600 dark:text-red-400" />
</div>
<div>
<h4 className="font-semibold text-gray-900 dark:text-white">Paiements transparents</h4>
<p className="text-gray-600 dark:text-gray-400">Facturation claire et paiements sécurisés en ligne</p>
</div>
</div>
</div>
</motion.div>
{/* Pour les avocats */}
<motion.div
initial={{ opacity: 0, x: 20 }}
animate={{ opacity: 1, x: 0 }}
transition={{ delay: 0.4 }}
className="space-y-6"
>
<div className="text-center lg:text-left">
<h3 className="text-2xl font-bold text-gray-900 dark:text-white mb-4">
Pour les avocats
</h3>
<p className="text-gray-600 dark:text-gray-400 mb-8">
Gérez vos dossiers efficacement, développez votre réseau professionnel,
et accédez à des outils modernes pour optimiser votre pratique.
</p>
</div>
<div className="space-y-4">
<div className="flex items-start space-x-4">
<div className="flex-shrink-0 w-8 h-8 bg-blue-100 dark:bg-blue-900 rounded-full flex items-center justify-center">
<Briefcase className="h-5 w-5 text-blue-600 dark:text-blue-400" />
</div>
<div>
<h4 className="font-semibold text-gray-900 dark:text-white">Gestion de cabinet</h4>
<p className="text-gray-600 dark:text-gray-400">Profils de cabinet, équipes et spécialisations</p>
</div>
</div>
<div className="flex items-start space-x-4">
<div className="flex-shrink-0 w-8 h-8 bg-green-100 dark:bg-green-900 rounded-full flex items-center justify-center">
<FileText className="h-5 w-5 text-green-600 dark:text-green-400" />
</div>
<div>
<h4 className="font-semibold text-gray-900 dark:text-white">Gestion documentaire</h4>
<p className="text-gray-600 dark:text-gray-400">Stockage sécurisé, partage et collaboration sur documents</p>
</div>
</div>
<div className="flex items-start space-x-4">
<div className="flex-shrink-0 w-8 h-8 bg-purple-100 dark:bg-purple-900 rounded-full flex items-center justify-center">
<Calendar className="h-5 w-5 text-purple-600 dark:text-purple-400" />
</div>
<div>
<h4 className="font-semibold text-gray-900 dark:text-white">Calendrier intégré</h4>
<p className="text-gray-600 dark:text-gray-400">Planification, rappels et gestion des échéances</p>
</div>
</div>
<div className="flex items-start space-x-4">
<div className="flex-shrink-0 w-8 h-8 bg-yellow-100 dark:bg-yellow-900 rounded-full flex items-center justify-center">
<BarChart3 className="h-5 w-5 text-yellow-600 dark:text-yellow-400" />
</div>
<div>
<h4 className="font-semibold text-gray-900 dark:text-white">Analytics et rapports</h4>
<p className="text-gray-600 dark:text-gray-400">Suivi de performance et insights sur votre pratique</p>
</div>
</div>
<div className="flex items-start space-x-4">
<div className="flex-shrink-0 w-8 h-8 bg-red-100 dark:bg-red-900 rounded-full flex items-center justify-center">
<Network className="h-5 w-5 text-red-600 dark:text-red-400" />
</div>
<div>
<h4 className="font-semibold text-gray-900 dark:text-white">Réseau professionnel</h4>
<p className="text-gray-600 dark:text-gray-400">Collaboration avec d'autres avocats et spécialistes</p>
</div>
</div>
</div>
</motion.div>
</div>
</div>
</section>
{/* Création et gestion de dossiers */}
<section className="py-20 px-4 sm:px-6 lg:px-8 bg-white dark:bg-gray-800">
<div className="max-w-7xl mx-auto">
<motion.div
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ delay: 0.2 }}
className="text-center mb-16"
>
<h2 className="text-3xl md:text-4xl font-bold text-gray-900 dark:text-white mb-4">
Création et gestion de dossiers
</h2>
<p className="text-xl text-gray-600 dark:text-gray-400">
Créez votre dossier juridique et obtenez des propositions de plusieurs cabinets d'avocats
</p>
</motion.div>
<div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
<motion.div
initial={{ opacity: 0, x: -20 }}
animate={{ opacity: 1, x: 0 }}
transition={{ delay: 0.3 }}
className="space-y-6"
>
<div className="bg-gradient-to-br from-blue-600 to-purple-600 rounded-xl p-8 text-white">
<h3 className="text-2xl font-bold mb-6">Créez votre dossier en quelques clics</h3>
<div className="space-y-4">
<div className="flex items-start space-x-3">
<div className="flex-shrink-0 w-6 h-6 bg-white/20 rounded-full flex items-center justify-center font-bold text-sm">1</div>
<div>
<h4 className="font-semibold mb-1">Décrivez votre situation</h4>
<p className="text-blue-100 text-sm">Racontez votre affaire juridique avec nos formulaires guidés</p>
</div>
</div>
<div className="flex items-start space-x-3">
<div className="flex-shrink-0 w-6 h-6 bg-white/20 rounded-full flex items-center justify-center font-bold text-sm">2</div>
<div>
<h4 className="font-semibold mb-1">Ajoutez vos documents</h4>
<p className="text-blue-100 text-sm">Téléchargez les documents pertinents (contrats, correspondance, etc.)</p>
</div>
</div>
<div className="flex items-start space-x-3">
<div className="flex-shrink-0 w-6 h-6 bg-white/20 rounded-full flex items-center justify-center font-bold text-sm">3</div>
<div>
<h4 className="font-semibold mb-1">Choisissez vos cabinets</h4>
<p className="text-blue-100 text-sm">Sélectionnez plusieurs cabinets d'avocats qualifiés</p>
</div>
</div>
<div className="flex items-start space-x-3">
<div className="flex-shrink-0 w-6 h-6 bg-white/20 rounded-full flex items-center justify-center font-bold text-sm">4</div>
<div>
<h4 className="font-semibold mb-1">Recevez des propositions</h4>
<p className="text-blue-100 text-sm">Comparez les offres et choisissez le meilleur avocat</p>
</div>
</div>
</div>
</div>
</motion.div>
<motion.div
initial={{ opacity: 0, x: 20 }}
animate={{ opacity: 1, x: 0 }}
transition={{ delay: 0.4 }}
className="space-y-6"
>
<div className="bg-gray-50 dark:bg-gray-700 rounded-xl p-8">
<h3 className="text-2xl font-bold text-gray-900 dark:text-white mb-4">Avantages pour les clients</h3>
<ul className="space-y-3 text-gray-600 dark:text-gray-400">
<li className="flex items-start">
<CheckCircle className="h-5 w-5 text-green-600 mr-3 mt-0.5 flex-shrink-0" />
<span>Comparaison de plusieurs cabinets en une seule demande</span>
</li>
<li className="flex items-start">
<CheckCircle className="h-5 w-5 text-green-600 mr-3 mt-0.5 flex-shrink-0" />
<span>Économies de temps et d'efforts de recherche</span>
</li>
<li className="flex items-start">
<CheckCircle className="h-5 w-5 text-green-600 mr-3 mt-0.5 flex-shrink-0" />
<span>Transparence totale sur les tarifs et approches</span>
</li>
<li className="flex items-start">
<CheckCircle className="h-5 w-5 text-green-600 mr-3 mt-0.5 flex-shrink-0" />
<span>Suivi centralisé de toutes les communications</span>
</li>
</ul>
</div>
<div className="bg-gray-50 dark:bg-gray-700 rounded-xl p-8">
<h3 className="text-2xl font-bold text-gray-900 dark:text-white mb-4">Fonctionnalités avancées</h3>
<div className="grid grid-cols-2 gap-4">
<div className="text-center">
<div className="text-2xl font-bold text-blue-600">∞</div>
<div className="text-sm text-gray-600 dark:text-gray-400">Cabinets assignés</div>
</div>
<div className="text-center">
<div className="text-2xl font-bold text-green-600">24h</div>
<div className="text-sm text-gray-600 dark:text-gray-400">Réponse moyenne</div>
</div>
<div className="text-center">
<div className="text-2xl font-bold text-purple-600">100%</div>
<div className="text-sm text-gray-600 dark:text-gray-400">Sécurisé</div>
</div>
<div className="text-center">
<div className="text-2xl font-bold text-yellow-600">FR/EN</div>
<div className="text-sm text-gray-600 dark:text-gray-400">Bilingue</div>
</div>
</div>
</div>
</motion.div>
</div>
<motion.div
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ delay: 0.5 }}
className="mt-12 text-center"
>
<Link href="/create-case" className="bg-blue-600 hover:bg-blue-700 text-white px-8 py-3 rounded-lg font-semibold text-lg transition-colors inline-flex items-center">
Créer mon premier dossier
<ArrowRight className="ml-2 h-5 w-5" />
</Link>
</motion.div>
</div>
</section>
{/* Votre parcours sur avocat.quebec - User Journey */}
<section className="py-20 px-4 sm:px-6 lg:px-8 bg-white dark:bg-gray-800">
<div className="max-w-7xl mx-auto">
<motion.div
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ delay: 0.2 }}
className="text-center mb-16"
>
<h2 className="text-3xl md:text-4xl font-bold text-gray-900 dark:text-white mb-4">
Votre parcours sur avocat.quebec
</h2>
<p className="text-xl text-gray-600 dark:text-gray-400">
Découvrez comment notre plateforme simplifie votre expérience juridique
</p>
</motion.div>
<div className="grid grid-cols-1 lg:grid-cols-2 gap-12">
{/* Parcours client */}
<motion.div
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ delay: 0.3 }}
className="bg-gradient-to-br from-blue-50 to-blue-100 dark:from-blue-900/20 dark:to-blue-800/20 rounded-xl p-8"
>
<div className="flex items-center mb-6">
<Users className="h-8 w-8 text-blue-600 mr-3" />
<h3 className="text-2xl font-bold text-gray-900 dark:text-white">Parcours client</h3>
</div>
<div className="space-y-6">
<div className="flex items-start space-x-4">
<div className="flex-shrink-0 w-8 h-8 bg-blue-600 text-white rounded-full flex items-center justify-center font-bold">1</div>
<div>
<h4 className="font-semibold text-gray-900 dark:text-white">Recherche et sélection</h4>
<p className="text-gray-600 dark:text-gray-400">Utilisez nos filtres avancés pour trouver l'avocat idéal selon vos besoins</p>
</div>
</div>
<div className="flex items-start space-x-4">
<div className="flex-shrink-0 w-8 h-8 bg-blue-600 text-white rounded-full flex items-center justify-center font-bold">2</div>
<div>
<h4 className="font-semibold text-gray-900 dark:text-white">Premier contact</h4>
<p className="text-gray-600 dark:text-gray-400">Prenez rendez-vous ou contactez directement l'avocat via notre plateforme</p>
</div>
</div>
<div className="flex items-start space-x-4">
<div className="flex-shrink-0 w-8 h-8 bg-blue-600 text-white rounded-full flex items-center justify-center font-bold">3</div>
<div>
<h4 className="font-semibold text-gray-900 dark:text-white">Suivi de dossier</h4>
<p className="text-gray-600 dark:text-gray-400">Accédez à tous vos documents et communications en temps réel</p>
</div>
</div>
<div className="flex items-start space-x-4">
<div className="flex-shrink-0 w-8 h-8 bg-blue-600 text-white rounded-full flex items-center justify-center font-bold">4</div>
<div>
<h4 className="font-semibold text-gray-900 dark:text-white">Résolution</h4>
<p className="text-gray-600 dark:text-gray-400">Suivez l'avancement jusqu'à la résolution de votre affaire</p>
</div>
</div>
</div>
</motion.div>
{/* Parcours avocat */}
<motion.div
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ delay: 0.4 }}
className="bg-gradient-to-br from-purple-50 to-purple-100 dark:from-purple-900/20 dark:to-purple-800/20 rounded-xl p-8"
>
<div className="flex items-center mb-6">
<Shield className="h-8 w-8 text-purple-600 mr-3" />
<h3 className="text-2xl font-bold text-gray-900 dark:text-white">Parcours avocat</h3>
</div>
<div className="space-y-6">
<div className="flex items-start space-x-4">
<div className="flex-shrink-0 w-8 h-8 bg-purple-600 text-white rounded-full flex items-center justify-center font-bold">1</div>
<div>
<h4 className="font-semibold text-gray-900 dark:text-white">Vérification et inscription</h4>
<p className="text-gray-600 dark:text-gray-400">Processus de vérification rapide avec le Barreau du Québec</p>
</div>
</div>
<div className="flex items-start space-x-4">
<div className="flex-shrink-0 w-8 h-8 bg-purple-600 text-white rounded-full flex items-center justify-center font-bold">2</div>
<div>
<h4 className="font-semibold text-gray-900 dark:text-white">Création de profil</h4>
<p className="text-gray-600 dark:text-gray-400">Personnalisez votre profil et présentez votre expertise</p>
</div>
</div>
<div className="flex items-start space-x-4">
<div className="flex-shrink-0 w-8 h-8 bg-purple-600 text-white rounded-full flex items-center justify-center font-bold">3</div>
<div>
<h4 className="font-semibold text-gray-900 dark:text-white">Gestion de dossiers</h4>
<p className="text-gray-600 dark:text-gray-400">Utilisez nos outils pour gérer efficacement vos clients et dossiers</p>
</div>
</div>
<div className="flex items-start space-x-4">
<div className="flex-shrink-0 w-8 h-8 bg-purple-600 text-white rounded-full flex items-center justify-center font-bold">4</div>
<div>
<h4 className="font-semibold text-gray-900 dark:text-white">Croissance</h4>
<p className="text-gray-600 dark:text-gray-400">Développez votre réseau et votre pratique grâce à notre communauté</p>
</div>
</div>
</div>
</motion.div>
</div>
</div>
</section>
{/* Outils de collaboration */}
<section className="py-20 px-4 sm:px-6 lg:px-8 bg-gray-50 dark:bg-gray-900">
<div className="max-w-7xl mx-auto">
<motion.div
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ delay: 0.2 }}
className="text-center mb-16"
>
<h2 className="text-3xl md:text-4xl font-bold text-gray-900 dark:text-white mb-4">
Outils de collaboration
</h2>
<p className="text-xl text-gray-600 dark:text-gray-400">
Une suite complète d'outils pour faciliter la collaboration entre avocats et clients
</p>
</motion.div>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
<motion.div
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ delay: 0.3 }}
className="bg-white dark:bg-gray-800 rounded-xl p-6 shadow-lg hover:shadow-xl transition-shadow"
>
<MessageSquare className="h-12 w-12 text-blue-600 mb-4" />
<h3 className="text-xl font-semibold text-gray-900 dark:text-white mb-2">
Messagerie sécurisée
</h3>
<p className="text-gray-600 dark:text-gray-400">
Communication chiffrée en temps réel entre avocats et clients.
Historique complet et notifications instantanées.
</p>
</motion.div>
<motion.div
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ delay: 0.4 }}
className="bg-white dark:bg-gray-800 rounded-xl p-6 shadow-lg hover:shadow-xl transition-shadow"
>
<FileText className="h-12 w-12 text-green-600 mb-4" />
<h3 className="text-xl font-semibold text-gray-900 dark:text-white mb-2">
Gestion documentaire
</h3>
<p className="text-gray-600 dark:text-gray-400">
Stockage sécurisé, partage contrôlé et collaboration sur documents.
Versioning automatique et signatures électroniques.
</p>
</motion.div>
<motion.div
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ delay: 0.5 }}
className="bg-white dark:bg-gray-800 rounded-xl p-6 shadow-lg hover:shadow-xl transition-shadow"
>
<Calendar className="h-12 w-12 text-purple-600 mb-4" />
<h3 className="text-xl font-semibold text-gray-900 dark:text-white mb-2">
Calendrier partagé
</h3>
<p className="text-gray-600 dark:text-gray-400">
Planification d'audiences, rendez-vous et échéances.
Synchronisation automatique et rappels intelligents.
</p>
</motion.div>
<motion.div
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ delay: 0.6 }}
className="bg-white dark:bg-gray-800 rounded-xl p-6 shadow-lg hover:shadow-xl transition-shadow"
>
<Video className="h-12 w-12 text-red-600 mb-4" />
<h3 className="text-xl font-semibold text-gray-900 dark:text-white mb-2">
Consultations virtuelles
</h3>
<p className="text-gray-600 dark:text-gray-400">
Visioconférences sécurisées intégrées à la plateforme.
Enregistrement et transcription automatiques.
</p>
</motion.div>
<motion.div
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ delay: 0.7 }}
className="bg-white dark:bg-gray-800 rounded-xl p-6 shadow-lg hover:shadow-xl transition-shadow"
>
<BarChart3 className="h-12 w-12 text-yellow-600 mb-4" />
<h3 className="text-xl font-semibold text-gray-900 dark:text-white mb-2">
Tableaux de bord
</h3>
<p className="text-gray-600 dark:text-gray-400">
Suivi en temps réel de l'avancement des dossiers.
Analytics et rapports personnalisés.
</p>
</motion.div>
<motion.div
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ delay: 0.8 }}
className="bg-white dark:bg-gray-800 rounded-xl p-6 shadow-lg hover:shadow-xl transition-shadow"
>
<Bell className="h-12 w-12 text-indigo-600 mb-4" />
<h3 className="text-xl font-semibold text-gray-900 dark:text-white mb-2">
Notifications intelligentes
</h3>
<p className="text-gray-600 dark:text-gray-400">
Alertes personnalisées pour les échéances importantes.
Notifications par email, SMS et push.
</p>
</motion.div>
</div>
</div>
</section>
{/* Transparence et confiance */}
<section className="py-20 px-4 sm:px-6 lg:px-8 bg-white dark:bg-gray-800">
<div className="max-w-7xl mx-auto">
<motion.div
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ delay: 0.2 }}
className="text-center mb-16"
>
<h2 className="text-3xl md:text-4xl font-bold text-gray-900 dark:text-white mb-4">
Transparence et confiance
</h2>
<p className="text-xl text-gray-600 dark:text-gray-400">
Notre engagement envers la sécurité, la transparence et l'excellence
</p>
</motion.div>
<div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
<motion.div
initial={{ opacity: 0, x: -20 }}
animate={{ opacity: 1, x: 0 }}
transition={{ delay: 0.3 }}
className="space-y-6"
>
<div className="bg-gradient-to-r from-blue-600 to-purple-600 rounded-xl p-8 text-white">
<h3 className="text-2xl font-bold mb-4">Sécurité de niveau bancaire</h3>
<ul className="space-y-3">
<li className="flex items-center">
<CheckCircle className="h-5 w-5 mr-3" />
Chiffrement AES-256 pour tous les données
</li>
<li className="flex items-center">
<CheckCircle className="h-5 w-5 mr-3" />
Conformité RGPD et lois québécoises
</li>
<li className="flex items-center">
<CheckCircle className="h-5 w-5 mr-3" />
Sauvegarde automatique et redondante
</li>
<li className="flex items-center">
<CheckCircle className="h-5 w-5 mr-3" />
Authentification à deux facteurs
</li>
</ul>
</div>
</motion.div>
<motion.div
initial={{ opacity: 0, x: 20 }}
animate={{ opacity: 1, x: 0 }}
transition={{ delay: 0.4 }}
className="space-y-6"
>
<div className="bg-gray-50 dark:bg-gray-700 rounded-xl p-8">
<h3 className="text-2xl font-bold text-gray-900 dark:text-white mb-4">Vérification Barreau</h3>
<p className="text-gray-600 dark:text-gray-400 mb-4">
Tous les avocats sont vérifiés directement avec le Barreau du Québec.
Nous maintenons des standards d'excellence élevés.
</p>
<div className="grid grid-cols-2 gap-4">
<div className="text-center">
<div className="text-2xl font-bold text-blue-600">100%</div>
<div className="text-sm text-gray-600 dark:text-gray-400">Vérifiés</div>
</div>
<div className="text-center">
<div className="text-2xl font-bold text-green-600">24h</div>
<div className="text-sm text-gray-600 dark:text-gray-400">Vérification</div>
</div>
</div>
</div>
<div className="bg-gray-50 dark:bg-gray-700 rounded-xl p-8">
<h3 className="text-2xl font-bold text-gray-900 dark:text-white mb-4">Transparence totale</h3>
<ul className="space-y-2 text-gray-600 dark:text-gray-400">
<li>• Tarifs clairs et sans surprise</li>
<li>• Historique complet des communications</li>
<li>• Suivi en temps réel des dossiers</li>
<li>• Évaluations et commentaires authentiques</li>
</ul>
</div>
</motion.div>
</div>
</div>
</section>
{/* Comment ça marche ? */}
<section className="py-20 px-4 sm:px-6 lg:px-8 bg-gradient-to-r from-blue-600 to-purple-600">
<div className="max-w-7xl mx-auto">
<motion.div
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ delay: 0.2 }}
className="text-center mb-16"
>
<h2 className="text-3xl md:text-4xl font-bold text-white mb-4">
Comment ça marche ?
</h2>
<p className="text-xl text-blue-100">
En 5 étapes simples, créez votre dossier et trouvez le meilleur avocat
</p>
</motion.div>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-6">
<motion.div
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ delay: 0.3 }}
className="text-center"
>
<div className="bg-white/20 backdrop-blur-sm rounded-full w-16 h-16 flex items-center justify-center mx-auto mb-4">
<FileText className="h-8 w-8 text-white" />
</div>
<h3 className="text-lg font-semibold text-white mb-2">1. Créez</h3>
<p className="text-blue-100 text-sm">
Décrivez votre situation et ajoutez vos documents
</p>
</motion.div>
<motion.div
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ delay: 0.4 }}
className="text-center"
>
<div className="bg-white/20 backdrop-blur-sm rounded-full w-16 h-16 flex items-center justify-center mx-auto mb-4">
<Users className="h-8 w-8 text-white" />
</div>
<h3 className="text-lg font-semibold text-white mb-2">2. Assignez</h3>
<p className="text-blue-100 text-sm">
Sélectionnez plusieurs cabinets d'avocats qualifiés
</p>
</motion.div>
<motion.div
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ delay: 0.5 }}
className="text-center"
>
<div className="bg-white/20 backdrop-blur-sm rounded-full w-16 h-16 flex items-center justify-center mx-auto mb-4">
<Scale className="h-8 w-8 text-white" />
</div>
<h3 className="text-lg font-semibold text-white mb-2">3. Comparez</h3>
<p className="text-blue-100 text-sm">
Recevez et évaluez les propositions des avocats
</p>
</motion.div>
<motion.div
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ delay: 0.6 }}
className="text-center"
>
<div className="bg-white/20 backdrop-blur-sm rounded-full w-16 h-16 flex items-center justify-center mx-auto mb-4">
<Handshake className="h-8 w-8 text-white" />
</div>
<h3 className="text-lg font-semibold text-white mb-2">4. Collaborez</h3>
<p className="text-blue-100 text-sm">
Choisissez le meilleur avocat et commencez le travail
</p>
</motion.div>
<motion.div
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ delay: 0.7 }}
className="text-center"
>
<div className="bg-white/20 backdrop-blur-sm rounded-full w-16 h-16 flex items-center justify-center mx-auto mb-4">
<CheckCircle className="h-8 w-8 text-white" />
</div>
<h3 className="text-lg font-semibold text-white mb-2">5. Résolvez</h3>
<p className="text-blue-100 text-sm">
Suivez l'avancement jusqu'à la résolution complète
</p>
</motion.div>
</div>
<motion.div
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ delay: 0.8 }}
className="mt-12 text-center"
>
<Link href="/create-case" className="bg-white hover:bg-gray-100 text-blue-600 px-8 py-3 rounded-lg font-semibold text-lg transition-colors inline-flex items-center">
Commencer maintenant
<ArrowRight className="ml-2 h-5 w-5" />
</Link>
</motion.div>
</div>
</section>
{/* Témoignages */}
<section className="py-20 px-4 sm:px-6 lg:px-8 bg-gray-50 dark:bg-gray-900">
<div className="max-w-7xl mx-auto">
<motion.div
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ delay: 0.2 }}
className="text-center mb-16"
>
<h2 className="text-3xl md:text-4xl font-bold text-gray-900 dark:text-white mb-4">
Ce que disent nos utilisateurs
</h2>
<p className="text-xl text-gray-600 dark:text-gray-400">
Découvrez les expériences de nos clients et avocats
</p>
</motion.div>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
<motion.div
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ delay: 0.3 }}
className="bg-white dark:bg-gray-800 rounded-xl p-6 shadow-lg"
>
<div className="flex items-center mb-4">
<div className="flex text-yellow-400">
{[...Array(5)].map((_, i) => (
<Star key={i} className="h-5 w-5 fill-current" />
))}
</div>
</div>
<p className="text-gray-600 dark:text-gray-400 mb-4">
"avocat.quebec m'a permis de trouver l'avocat parfait pour mon divorce.
Le suivi de dossier était transparent et j'ai toujours su où en était mon affaire."
</p>
<div className="flex items-center">
<div className="w-10 h-10 bg-blue-600 rounded-full flex items-center justify-center text-white font-semibold mr-3">
M.D.
</div>
<div>
<div className="font-semibold text-gray-900 dark:text-white">Marie Dubois</div>
<div className="text-sm text-gray-600 dark:text-gray-400">Client</div>
</div>
</div>
</motion.div>
<motion.div
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ delay: 0.4 }}
className="bg-white dark:bg-gray-800 rounded-xl p-6 shadow-lg"
>
<div className="flex items-center mb-4">
<div className="flex text-yellow-400">
{[...Array(5)].map((_, i) => (
<Star key={i} className="h-5 w-5 fill-current" />
))}
</div>
</div>
<p className="text-gray-600 dark:text-gray-400 mb-4">
"La plateforme a révolutionné ma pratique. Les outils de gestion de dossier
me font gagner un temps précieux et mes clients apprécient la transparence."
</p>
<div className="flex items-center">
<div className="w-10 h-10 bg-purple-600 rounded-full flex items-center justify-center text-white font-semibold mr-3">
M.L.
</div>
<div>
<div className="font-semibold text-gray-900 dark:text-white">Me. Jean Lavoie</div>
<div className="text-sm text-gray-600 dark:text-gray-400">Avocat en droit civil</div>
</div>
</div>
</motion.div>
<motion.div
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ delay: 0.5 }}
className="bg-white dark:bg-gray-800 rounded-xl p-6 shadow-lg"
>
<div className="flex items-center mb-4">
<div className="flex text-yellow-400">
{[...Array(5)].map((_, i) => (
<Star key={i} className="h-5 w-5 fill-current" />
))}
</div>
</div>
<p className="text-gray-600 dark:text-gray-400 mb-4">
"Excellente expérience pour notre cabinet. La visibilité et les nouveaux clients
que nous avons obtenus grâce à avocat.quebec sont remarquables."
</p>
<div className="flex items-center">
<div className="w-10 h-10 bg-green-600 rounded-full flex items-center justify-center text-white font-semibold mr-3">
C.B.
</div>
<div>
<div className="font-semibold text-gray-900 dark:text-white">Cabinet Bouchard</div>
<div className="text-sm text-gray-600 dark:text-gray-400">Cabinet d'avocats</div>
</div>
</div>
</motion.div>
</div>
</div>
</section>
{/* Restez informé - Newsletter */}
<section className="py-20 px-4 sm:px-6 lg:px-8 bg-white dark:bg-gray-800">
<div className="max-w-4xl mx-auto text-center">
<motion.div
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ delay: 0.2 }}
>
<h2 className="text-3xl md:text-4xl font-bold text-gray-900 dark:text-white mb-4">
Restez informé
</h2>
<p className="text-xl text-gray-600 dark:text-gray-400 mb-8">
Recevez les dernières nouvelles juridiques, conseils d'experts et mises à jour de la plateforme
</p>
<div className="flex flex-col sm:flex-row gap-4 max-w-md mx-auto">
<input
type="email"
placeholder="Votre adresse email"
className="flex-1 px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent dark:bg-gray-700 dark:text-white"
/>
<button className="bg-blue-600 hover:bg-blue-700 text-white px-6 py-3 rounded-lg font-semibold transition-colors">
S'abonner
</button>
</div>
<p className="text-sm text-gray-500 dark:text-gray-400 mt-4">
Nous respectons votre vie privée. Désabonnement en un clic.
</p>
</motion.div>
</div>
</section>
{/* Stats Section */}
<section className="py-20 px-4 sm:px-6 lg:px-8 bg-gradient-to-r from-blue-600 to-purple-600">
<div className="max-w-7xl mx-auto">
<motion.div
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ delay: 0.9 }}
className="text-center mb-12"
>
<h2 className="text-3xl md:text-4xl font-bold text-white mb-4">
avocat.quebec en chiffres
</h2>
<p className="text-xl text-blue-100">
Une communauté en pleine croissance
</p>
</motion.div>
<div className="grid grid-cols-1 md:grid-cols-4 gap-8">
<motion.div
initial={{ opacity: 0, scale: 0.8 }}
animate={{ opacity: 1, scale: 1 }}
transition={{ delay: 1.0 }}
className="text-center"
>
<div className="text-4xl font-bold text-white mb-2">500+</div>
<div className="text-blue-100">Avocats vérifiés</div>
</motion.div>
<motion.div
initial={{ opacity: 0, scale: 0.8 }}
animate={{ opacity: 1, scale: 1 }}
transition={{ delay: 1.1 }}
className="text-center"
>
<div className="text-4xl font-bold text-white mb-2">50+</div>
<div className="text-blue-100">Cabinets d'avocats</div>
</motion.div>
<motion.div
initial={{ opacity: 0, scale: 0.8 }}
animate={{ opacity: 1, scale: 1 }}
transition={{ delay: 1.2 }}
className="text-center"
>
<div className="text-4xl font-bold text-white mb-2">1000+</div>
<div className="text-blue-100">Dossiers traités</div>
</motion.div>
<motion.div
initial={{ opacity: 0, scale: 0.8 }}
animate={{ opacity: 1, scale: 1 }}
transition={{ delay: 1.3 }}
className="text-center"
>
<div className="text-4xl font-bold text-white mb-2">4.9</div>
<div className="text-blue-100">Note moyenne</div>
</motion.div>
</div>
</div>
</section>
{/* Verified Lawyer CTA */}
<section className="py-20 px-4 sm:px-6 lg:px-8 bg-gradient-to-br from-blue-50 to-purple-50 dark:from-gray-900 dark:to-gray-800">
<div className="max-w-4xl mx-auto">
<motion.div
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ delay: 1.4 }}
>
<VerifiedLawyerCTA
language="fr"
variant="primary"
className="mb-8"
/>
</motion.div>
</div>
</section>
{/* CTA Section */}
<section className="py-20 px-4 sm:px-6 lg:px-8 bg-white dark:bg-gray-800">
<div className="max-w-4xl mx-auto text-center">
<motion.div
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ delay: 1.5 }}
>
<h2 className="text-3xl md:text-4xl font-bold text-gray-900 dark:text-white mb-6">
Prêt à rejoindre avocat.quebec ?
</h2>
<p className="text-xl text-gray-600 dark:text-gray-400 mb-8">
Rejoignez la plateforme officielle des avocats québécois.
Vérification Barreau incluse, communauté active, opportunités illimitées.
</p>
<div className="flex flex-col sm:flex-row gap-4 justify-center">
<Link href="/register-verified" className="bg-blue-600 hover:bg-blue-700 text-white px-8 py-3 rounded-lg font-semibold text-lg transition-colors flex items-center justify-center">
<Shield className="mr-2 h-5 w-5" />
Devenir avocat vérifié
</Link>
<Link href="/business-profiles" className="bg-gray-100 hover:bg-gray-200 dark:bg-gray-700 dark:hover:bg-gray-600 text-gray-900 dark:text-white px-8 py-3 rounded-lg font-semibold text-lg transition-colors flex items-center justify-center">
Explorer les cabinets
<ArrowRight className="ml-2 h-5 w-5" />
</Link>
</div>
</motion.div>
</div>
</section>
{/* Footer */}
<footer className="bg-gray-900 text-white py-12 px-4 sm:px-6 lg:px-8">
<div className="max-w-7xl mx-auto">
<div className="grid grid-cols-1 md:grid-cols-4 gap-8">
<div>
<div className="flex items-center mb-4">
<Shield className="h-8 w-8 text-blue-400 mr-3" />
<span className="text-xl font-bold">avocat.quebec</span>
</div>
<p className="text-gray-400">
Le réseau juridique officiel du Québec.
Connecter, collaborer, exceller.
</p>
</div>
<div>
<h3 className="text-lg font-semibold mb-4">Services</h3>
<ul className="space-y-2 text-gray-400">
<li><Link href="/business-profiles" className="hover:text-white transition-colors">{t.nav.businessProfiles}</Link></li>
<li><Link href="/judicial-directory" className="hover:text-white transition-colors">{t.nav.judicialDirectory}</Link></li>
<li><Link href="/live-cases" className="hover:text-white transition-colors">{t.nav.liveCases}</Link></li>
<li><Link href="/register-verified" className="hover:text-white transition-colors">{t.nav.join}</Link></li>
</ul>
</div>
<div>
<h3 className="text-lg font-semibold mb-4">Support</h3>
<ul className="space-y-2 text-gray-400">
<li><Link href="/help" className="hover:text-white transition-colors">Centre d'aide</Link></li>
<li><Link href="/contact" className="hover:text-white transition-colors">Contact</Link></li>
<li><Link href="/privacy" className="hover:text-white transition-colors">Confidentialité</Link></li>
<li><Link href="/terms" className="hover:text-white transition-colors">Conditions d'utilisation</Link></li>
</ul>
</div>
<div>
<h3 className="text-lg font-semibold mb-4">Contact</h3>
<div className="space-y-2 text-gray-400">
<div className="flex items-center">
<Mail className="h-4 w-4 mr-2" />
contact@avocat.quebec
</div>
<div className="flex items-center">
<Phone className="h-4 w-4 mr-2" />
(514) 555-0123
</div>
<div className="flex items-center">
<MapPin className="h-4 w-4 mr-2" />
Montréal, Québec
</div>
</div>
</div>
</div>
<div className="border-t border-gray-800 mt-8 pt-8 text-center text-gray-400">
<p>© 2024 avocat.quebec. Tous droits réservés.</p>
</div>
</div>
</footer>
</div>
</>
);
};
export default HomePage;