 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/public_html/src/pages/ |
'use client';
import React 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
} from 'lucide-react';
const HomePage: React.FC = () => {
return (
<>
<Head>
<title>avocat.quebec - Le réseau juridique du Québec</title>
<meta name="description" content="La plateforme officielle pour les avocats vérifiés du Barreau du Québec. Connectez-vous avec des professionnels juridiques de confiance." />
<meta name="keywords" content="avocat, québec, barreau, droit, juridique, avocats vérifiés" />
</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">
Cabinets d'avocats
</Link>
<Link href="/judicial-directory" className="text-gray-600 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition-colors">
Répertoire judiciaire
</Link>
<Link href="/live-cases" className="text-gray-600 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition-colors">
Dossiers en direct
</Link>
<Link href="/about" className="text-gray-600 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition-colors">
À propos
</Link>
</nav>
<div className="flex items-center space-x-4">
<Link href="/auth/login" className="text-gray-600 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition-colors">
Connexion
</Link>
<Link href="/lawyer/register-verified" className="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md font-medium transition-colors">
Rejoindre
</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">
avocat.quebec
</h1>
</div>
<h2 className="text-2xl md:text-3xl font-semibold text-gray-800 dark:text-gray-200 mb-6">
Le réseau juridique officiel du Québec
</h2>
<p className="text-xl text-gray-600 dark:text-gray-400 mb-8 max-w-3xl mx-auto">
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.
</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">
Trouver un avocat
<ArrowRight className="ml-2 h-5 w-5" />
</Link>
<Link href="/lawyer/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" />
Avocat vérifié
</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">
Pourquoi choisir avocat.quebec ?
</h2>
<p className="text-xl text-gray-600 dark:text-gray-400">
La plateforme de confiance pour la communauté juridique québécoise
</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>
{/* Footer */}
<footer className="bg-gray-900 text-white py-12">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<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, connectant avocats vérifiés et clients.
</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">Cabinets d'avocats</Link></li>
<li><Link href="/judicial-directory" className="hover:text-white transition-colors">Répertoire judiciaire</Link></li>
<li><Link href="/live-cases" className="hover:text-white transition-colors">Dossiers en direct</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="/about" className="hover:text-white transition-colors">À propos</Link></li>
<li><Link href="/contact" className="hover:text-white transition-colors">Contact</Link></li>
<li><Link href="/help" className="hover:text-white transition-colors">Aide</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" />
<span>contact@avocat.quebec</span>
</div>
<div className="flex items-center">
<Phone className="h-4 w-4 mr-2" />
<span>+1 (514) 555-0123</span>
</div>
<div className="flex items-center">
<MapPin className="h-4 w-4 mr-2" />
<span>Montréal, Québec</span>
</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;