 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, { useState, useEffect, useRef } from 'react';
import Head from 'next/head';
import Link from 'next/link';
import { motion, AnimatePresence, useScroll, useTransform, useSpring } from 'framer-motion';
import {
Shield, Users, Building2, Award, CheckCircle,
MapPin, Phone, Mail, ArrowRight, Star, Search,
Scale, Gavel, Briefcase, Globe, MessageSquare, FileText, Calendar, Video, Bell,
CreditCard, BarChart3, Network, Handshake, Zap, Target, TrendingUp, Lock,
Eye, Heart, Clock, CheckCircle2, XCircle, AlertCircle, Info
} from 'lucide-react';
const IndexNew: React.FC = () => {
const [isLoaded, setIsLoaded] = useState(false);
const [activeSection, setActiveSection] = useState(0);
const [mousePosition, setMousePosition] = useState({ x: 0, y: 0 });
const [isHovering, setIsHovering] = useState(false);
const containerRef = useRef<HTMLDivElement>(null);
const { scrollYProgress } = useScroll();
const scaleX = useSpring(scrollYProgress, { stiffness: 100, damping: 30 });
useEffect(() => {
setIsLoaded(true);
const handleMouseMove = (e: MouseEvent) => {
setMousePosition({ x: e.clientX, y: e.clientY });
};
window.addEventListener('mousemove', handleMouseMove);
return () => window.removeEventListener('mousemove', handleMouseMove);
}, []);
const features = [
{
icon: Shield,
title: "Vérification Barreau",
description: "Tous nos avocats sont vérifiés par le Barreau du Québec",
color: "from-blue-500 to-cyan-500"
},
{
icon: Users,
title: "Communauté Active",
description: "Plus de 250 avocats vérifiés et 25+ cabinets",
color: "from-purple-500 to-pink-500"
},
{
icon: Award,
title: "Excellence Reconnue",
description: "Note moyenne de 4.9/5 sur plus de 100 dossiers",
color: "from-yellow-500 to-orange-500"
},
{
icon: MessageSquare,
title: "Dossiers en Direct",
description: "Suivez vos dossiers en temps réel",
color: "from-green-500 to-emerald-500"
}
];
const stats = [
{ number: "250+", label: "Avocats Vérifiés", icon: Shield },
{ number: "25+", label: "Cabinets d'Avocats", icon: Building2 },
{ number: "100+", label: "Dossiers Traités", icon: FileText },
{ number: "4.9", label: "Note Moyenne", icon: Star }
];
return (
<>
<Head>
<title>avocat.quebec - Le réseau juridique officiel 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>
{/* Progress Bar */}
<motion.div
className="fixed top-0 left-0 right-0 h-1 bg-gradient-to-r from-blue-600 to-purple-600 origin-left z-50"
style={{ scaleX }}
/>
{/* Floating Cursor Effect */}
<motion.div
className="fixed w-4 h-4 bg-gradient-to-r from-blue-500 to-purple-500 rounded-full pointer-events-none z-50 mix-blend-difference"
animate={{
x: mousePosition.x - 8,
y: mousePosition.y - 8,
scale: isHovering ? 2 : 1,
}}
transition={{ type: "spring", stiffness: 500, damping: 28 }}
/>
<div
ref={containerRef}
className="min-h-screen bg-gradient-to-br from-slate-50 via-blue-50 to-indigo-100 dark:from-gray-900 dark:via-blue-900 dark:to-indigo-900 overflow-hidden"
onMouseEnter={() => setIsHovering(true)}
onMouseLeave={() => setIsHovering(false)}
>
{/* Animated Background */}
<div className="fixed inset-0 overflow-hidden">
<motion.div
className="absolute inset-0 opacity-30"
animate={{
background: [
"radial-gradient(circle at 20% 80%, rgba(120, 119, 198, 0.3) 0%, transparent 50%)",
"radial-gradient(circle at 80% 20%, rgba(255, 119, 198, 0.3) 0%, transparent 50%)",
"radial-gradient(circle at 40% 40%, rgba(120, 219, 255, 0.3) 0%, transparent 50%)",
"radial-gradient(circle at 20% 80%, rgba(120, 119, 198, 0.3) 0%, transparent 50%)",
],
}}
transition={{ duration: 20, repeat: Infinity, ease: "linear" }}
/>
</div>
{/* Header */}
<motion.header
className="relative bg-white/80 dark:bg-gray-800/80 backdrop-blur-xl border-b border-gray-200/50 dark:border-gray-700/50 sticky top-0 z-40"
initial={{ y: -100, opacity: 0 }}
animate={{ y: 0, opacity: 1 }}
transition={{ duration: 0.8, ease: "easeOut" }}
>
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div className="flex justify-between items-center py-4">
<motion.div
className="flex items-center"
whileHover={{ scale: 1.05 }}
transition={{ type: "spring", stiffness: 400 }}
>
<div className="relative">
<Shield className="h-10 w-10 text-blue-600 mr-3" />
<motion.div
className="absolute inset-0 bg-blue-600 rounded-full opacity-20"
animate={{ scale: [1, 1.2, 1] }}
transition={{ duration: 2, repeat: Infinity }}
/>
</div>
<span className="text-3xl font-bold bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent">
avocat.quebec
</span>
</motion.div>
<nav className="hidden md:flex space-x-8">
{[
{ href: "/business-profiles", label: "Cabinets d'avocats" },
{ href: "/judicial-directory", label: "Répertoire judiciaire" },
{ href: "/live-cases", label: "Dossiers en direct" },
{ href: "/about", label: "À propos" }
].map((item, index) => (
<motion.div
key={item.href}
initial={{ opacity: 0, y: -20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ delay: index * 0.1 }}
>
<Link
href={item.href}
className="text-gray-600 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition-all duration-300 relative group"
>
{item.label}
<motion.div
className="absolute -bottom-1 left-0 right-0 h-0.5 bg-gradient-to-r from-blue-600 to-purple-600 scale-x-0 group-hover:scale-x-100 transition-transform duration-300"
initial={false}
/>
</Link>
</motion.div>
))}
</nav>
<div className="flex items-center space-x-4">
<motion.div
initial={{ opacity: 0, x: 20 }}
animate={{ opacity: 1, x: 0 }}
transition={{ delay: 0.5 }}
>
<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>
</motion.div>
<motion.div
initial={{ opacity: 0, x: 20 }}
animate={{ opacity: 1, x: 0 }}
transition={{ delay: 0.6 }}
>
<Link
href="/lawyer/register-verified"
className="bg-gradient-to-r from-blue-600 to-purple-600 hover:from-blue-700 hover:to-purple-700 text-white px-6 py-3 rounded-xl font-medium transition-all duration-300 shadow-lg hover:shadow-xl transform hover:-translate-y-1"
>
Rejoindre
</Link>
</motion.div>
</div>
</div>
</div>
</motion.header>
{/* Hero Section */}
<section className="relative py-20 px-4 sm:px-6 lg:px-8 min-h-screen flex items-center">
<div className="max-w-7xl mx-auto w-full">
<motion.div
initial={{ opacity: 0, y: 50 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 1, delay: 0.2 }}
className="text-center"
>
{/* Main Title */}
<motion.div
className="flex items-center justify-center mb-8"
initial={{ scale: 0.8 }}
animate={{ scale: 1 }}
transition={{ duration: 0.8, delay: 0.4 }}
>
<div className="relative">
<Shield className="h-20 w-20 text-blue-600 mr-6" />
<motion.div
className="absolute inset-0 bg-blue-600 rounded-full opacity-20"
animate={{ scale: [1, 1.5, 1] }}
transition={{ duration: 3, repeat: Infinity }}
/>
</div>
<h1 className="text-6xl md:text-8xl font-bold">
<span className="bg-gradient-to-r from-blue-600 via-purple-600 to-indigo-600 bg-clip-text text-transparent">
avocat.quebec
</span>
</h1>
</motion.div>
<motion.h2
className="text-3xl md:text-4xl font-semibold text-gray-800 dark:text-gray-200 mb-8"
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.8, delay: 0.6 }}
>
Le réseau juridique officiel du Québec
</motion.h2>
<motion.p
className="text-xl text-gray-600 dark:text-gray-400 mb-12 max-w-4xl mx-auto leading-relaxed"
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.8, delay: 0.8 }}
>
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.
</motion.p>
<motion.div
className="flex flex-col sm:flex-row gap-6 justify-center mb-16"
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.8, delay: 1 }}
>
<motion.div
whileHover={{ scale: 1.05, y: -5 }}
whileTap={{ scale: 0.95 }}
>
<Link
href="/business-profiles"
className="bg-gradient-to-r from-blue-600 to-purple-600 hover:from-blue-700 hover:to-purple-700 text-white px-10 py-4 rounded-2xl font-semibold text-xl transition-all duration-300 shadow-2xl hover:shadow-3xl flex items-center justify-center group"
>
<Search className="mr-3 h-6 w-6 group-hover:rotate-12 transition-transform" />
Trouver un avocat
<ArrowRight className="ml-3 h-6 w-6 group-hover:translate-x-1 transition-transform" />
</Link>
</motion.div>
<motion.div
whileHover={{ scale: 1.05, y: -5 }}
whileTap={{ scale: 0.95 }}
>
<Link
href="/lawyer/register-verified"
className="bg-white/90 hover:bg-white dark:bg-gray-800/90 dark:hover:bg-gray-800 text-blue-600 dark:text-blue-400 border-2 border-blue-600 dark:border-blue-400 px-10 py-4 rounded-2xl font-semibold text-xl transition-all duration-300 shadow-2xl hover:shadow-3xl flex items-center justify-center group backdrop-blur-sm"
>
<Shield className="mr-3 h-6 w-6 group-hover:scale-110 transition-transform" />
Devenir avocat vérifié
<ArrowRight className="ml-3 h-6 w-6 group-hover:translate-x-1 transition-transform" />
</Link>
</motion.div>
</motion.div>
{/* Stats */}
<motion.div
className="grid grid-cols-2 md:grid-cols-4 gap-8 max-w-4xl mx-auto"
initial={{ opacity: 0, y: 30 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.8, delay: 1.2 }}
>
{stats.map((stat, index) => (
<motion.div
key={stat.label}
className="text-center"
initial={{ opacity: 0, scale: 0.8 }}
animate={{ opacity: 1, scale: 1 }}
transition={{ delay: 1.4 + index * 0.1 }}
whileHover={{ scale: 1.05 }}
>
<div className="bg-white/80 dark:bg-gray-800/80 backdrop-blur-sm rounded-2xl p-6 shadow-lg border border-gray-200/50 dark:border-gray-700/50">
<stat.icon className="h-8 w-8 text-blue-600 mx-auto mb-3" />
<div className="text-3xl font-bold text-gray-900 dark:text-white mb-2">
{stat.number}
</div>
<div className="text-sm text-gray-600 dark:text-gray-400">
{stat.label}
</div>
</div>
</motion.div>
))}
</motion.div>
</motion.div>
</div>
</section>
{/* Features Section */}
<section className="py-20 px-4 sm:px-6 lg:px-8 bg-white/50 dark:bg-gray-800/50 backdrop-blur-sm">
<div className="max-w-7xl mx-auto">
<motion.div
initial={{ opacity: 0, y: 50 }}
whileInView={{ opacity: 1, y: 0 }}
transition={{ duration: 0.8 }}
viewport={{ once: true }}
className="text-center mb-16"
>
<h2 className="text-4xl md:text-5xl font-bold text-gray-900 dark:text-white mb-6">
Pourquoi choisir avocat.quebec ?
</h2>
<p className="text-xl text-gray-600 dark:text-gray-400 max-w-3xl mx-auto">
La plateforme de confiance pour la communauté juridique québécoise
</p>
</motion.div>
<div className="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
{features.map((feature, index) => (
<motion.div
key={feature.title}
initial={{ opacity: 0, y: 50 }}
whileInView={{ opacity: 1, y: 0 }}
transition={{ duration: 0.8, delay: index * 0.1 }}
viewport={{ once: true }}
whileHover={{ y: -10, scale: 1.02 }}
className="group"
>
<div className="bg-white/80 dark:bg-gray-800/80 backdrop-blur-sm rounded-3xl p-8 shadow-xl border border-gray-200/50 dark:border-gray-700/50 transition-all duration-300 hover:shadow-2xl">
<div className={`w-16 h-16 bg-gradient-to-r ${feature.color} rounded-2xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform duration-300`}>
<feature.icon className="h-8 w-8 text-white" />
</div>
<h3 className="text-xl font-semibold text-gray-900 dark:text-white mb-4">
{feature.title}
</h3>
<p className="text-gray-600 dark:text-gray-400 leading-relaxed">
{feature.description}
</p>
</div>
</motion.div>
))}
</div>
</div>
</section>
{/* CTA Section */}
<section className="py-20 px-4 sm:px-6 lg:px-8">
<motion.div
initial={{ opacity: 0, y: 50 }}
whileInView={{ opacity: 1, y: 0 }}
transition={{ duration: 0.8 }}
viewport={{ once: true }}
className="max-w-4xl mx-auto text-center"
>
<div className="bg-gradient-to-r from-blue-600 to-purple-600 rounded-3xl p-12 shadow-2xl">
<h2 className="text-4xl md:text-5xl font-bold text-white mb-6">
Prêt à rejoindre avocat.quebec ?
</h2>
<p className="text-xl text-blue-100 mb-8">
Rejoignez la plateforme officielle avec vérification Barreau, communauté active et opportunités illimitées.
</p>
<motion.div
whileHover={{ scale: 1.05 }}
whileTap={{ scale: 0.95 }}
>
<Link
href="/lawyer/register-verified"
className="bg-white text-blue-600 px-10 py-4 rounded-2xl font-semibold text-xl transition-all duration-300 shadow-xl hover:shadow-2xl inline-flex items-center"
>
<Shield className="mr-3 h-6 w-6" />
S'inscrire maintenant
<ArrowRight className="ml-3 h-6 w-6" />
</Link>
</motion.div>
</div>
</motion.div>
</section>
{/* Footer */}
<footer className="bg-gray-900 text-white py-16 px-4 sm:px-6 lg:px-8">
<div className="max-w-7xl mx-auto">
<div className="grid 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-2xl font-bold">avocat.quebec</span>
</div>
<p className="text-gray-400">
Le réseau juridique officiel du Québec. Connexion, 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">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="/contact" className="hover:text-white transition-colors">Contact</Link></li>
<li><Link href="/faq" className="hover:text-white transition-colors">FAQ</Link></li>
<li><Link href="/about" className="hover:text-white transition-colors">À propos</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) 905-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-12 pt-8 text-center text-gray-400">
<p>© 2024 avocat.quebec. Tous droits réservés.</p>
</div>
</div>
</footer>
</div>
</>
);
};
export default IndexNew;