 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 } 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, Eye, Lock, Zap, Target,
TrendingUp, Users2, FileCheck, Clock, MessageCircle, CheckCircle2, Star as StarIcon
} from 'lucide-react';
import { useLanguage } from '@/context/LanguageContext';
const HomePage: React.FC = () => {
const { language, toggleLanguage } = useLanguage();
// Comprehensive bilingual content based on the image
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",
// Hero Section
hero: {
title: "avocat.quebec",
subtitle: "Une communauté dynamique d'avocats, juristes et professionnels du droit",
description: "Connectez-vous avec des avocats vérifiés du Barreau du Québec pour une expertise juridique de confiance.",
cta: "Trouver un avocat",
ctaSecondary: "Devenir avocat vérifié"
},
// Why Choose Section
whyChoose: {
title: "Pourquoi choisir avocat.quebec ?",
subtitle: "La plateforme de confiance pour la communauté juridique québécoise",
features: [
{
icon: Award,
title: "Excellence reconnue",
description: "Avocats évalués et reconnus pour leur expertise avec un système transparent d'évaluation et de recommandation."
},
{
icon: Eye,
title: "Dossiers en direct",
description: "Suivez les dossiers juridiques en cours et participez aux discussions."
},
{
icon: Zap,
title: "Plateforme moderne",
description: "Interface intuitive conçue pour faciliter les transactions entre professionnels juridiques et clients."
}
]
},
// What We Do
whatWeDo: {
title: "Ce que nous faisons",
description: "Une plateforme complète qui révolutionne l'accès à la justice au Québec.",
sections: [
{
title: "Pour les clients",
description: "Trouvez l'avocat parfait et suivez vos dossiers en temps réel.",
features: [
"Recherche intelligente par spécialité, localisation, expérience et disponibilité",
"Avocats vérifiés par le Barreau du Québec",
"Suivi de dossier avec accès aux documents, calendrier et communications",
"Communication sécurisée avec messagerie intégrée et partage de documents chiffrés",
"Paiements transparents avec facturation claire et paiements sécurisés en ligne"
]
},
{
title: "Pour les avocats",
description: "Gestion efficace des dossiers, développement professionnel et outils d'optimisation.",
features: [
"Gestion de cabinet avec profils d'entreprise, équipes et spécialisations",
"Gestion documentaire avec stockage sécurisé, partage et collaboration",
"Calendrier intégré pour planification, rappels et gestion des échéances",
"Analytics et rapports pour suivi des performances et insights",
"Réseau professionnel pour collaboration avec autres avocats et spécialistes"
]
}
]
},
// Stats
stats: {
title: "avocat.quebec en chiffres",
items: [
{ number: "250+", label: "Avocats vérifiés" },
{ number: "1800+", label: "Cabinets d'avocats" },
{ number: "4.8", label: "Note moyenne" },
{ number: "∞", label: "Communauté en croissance" }
]
},
// Contact
contact: {
email: "contact@avocat.quebec",
phone: "(514) 905-8123",
location: "Montréal, Québec"
}
},
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",
// Hero Section
hero: {
title: "avocat.quebec",
subtitle: "A dynamic community of lawyers, jurists and legal professionals",
description: "Connect with verified lawyers from the Quebec Bar for trusted legal expertise.",
cta: "Find a Lawyer",
ctaSecondary: "Become a Verified Lawyer"
},
// Why Choose Section
whyChoose: {
title: "Why choose avocat.quebec?",
subtitle: "The trusted platform for Quebec's legal community",
features: [
{
icon: Award,
title: "Recognized Excellence",
description: "Lawyers evaluated and recognized for their expertise with a transparent rating and recommendation system."
},
{
icon: Eye,
title: "Live Cases",
description: "Follow ongoing legal cases and participate in discussions."
},
{
icon: Zap,
title: "Modern Platform",
description: "Intuitive interface designed to facilitate transactions between legal professionals and clients."
}
]
},
// What We Do
whatWeDo: {
title: "What we do",
description: "A comprehensive platform that revolutionizes access to justice in Quebec.",
sections: [
{
title: "For Clients",
description: "Find the perfect lawyer and track your cases in real-time.",
features: [
"Smart search by specialty, location, experience and availability",
"Lawyers verified by the Quebec Bar",
"Case tracking with access to documents, calendar and communications",
"Secure communication with integrated messaging and encrypted document sharing",
"Transparent payments with clear invoicing and secure online payments"
]
},
{
title: "For Lawyers",
description: "Efficient case management, professional development and optimization tools.",
features: [
"Firm management with business profiles, teams and specializations",
"Document management with secure storage, sharing and collaboration",
"Integrated calendar for planning, reminders and deadline management",
"Analytics and reports for performance tracking and insights",
"Professional network for collaboration with other lawyers and specialists"
]
}
]
},
// Stats
stats: {
title: "avocat.quebec in numbers",
items: [
{ number: "250+", label: "Verified lawyers" },
{ number: "1800+", label: "Law firms" },
{ number: "4.8", label: "Average rating" },
{ number: "∞", label: "Growing community" }
]
},
// Contact
contact: {
email: "contact@avocat.quebec",
phone: "(514) 905-8123",
location: "Montreal, Quebec"
}
}
};
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-slate-50 via-white to-blue-50">
{/* Header */}
<header className="bg-white/90 backdrop-blur-md border-b border-slate-200 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-slate-900">
avocat.quebec
</span>
</div>
<nav className="hidden md:flex space-x-8">
<Link href="/business-profiles" className="text-slate-600 hover:text-blue-600 transition-colors">
Cabinets d'avocats
</Link>
<Link href="/judicial-directory" className="text-slate-600 hover:text-blue-600 transition-colors">
Répertoire judiciaire
</Link>
<Link href="/live-cases" className="text-slate-600 hover:text-blue-600 transition-colors">
Dossiers en direct
</Link>
<Link href="/about" className="text-slate-600 hover:text-blue-600 transition-colors">
À propos
</Link>
</nav>
<div className="flex items-center space-x-4">
<button
onClick={toggleLanguage}
className="text-sm text-slate-600 hover:text-blue-600 transition-colors"
>
{language === 'fr' ? 'EN' : 'FR'}
</button>
<Link href="/auth/signin" className="text-slate-600 hover:text-blue-600 transition-colors">
Connexion
</Link>
<Link href="/join" className="bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 transition-colors">
Rejoindre
</Link>
</div>
</div>
</div>
</header>
{/* Hero Section */}
<section className="relative overflow-hidden">
<div className="absolute inset-0 bg-gradient-to-r from-blue-600/10 to-purple-600/10"></div>
<div className="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20 lg:py-32">
<motion.div
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.8 }}
className="text-center"
>
<h1 className="text-5xl lg:text-7xl font-bold text-slate-900 mb-6">
{t.hero.title}
</h1>
<p className="text-xl lg:text-2xl text-slate-600 mb-8 max-w-3xl mx-auto">
{t.hero.subtitle}
</p>
<p className="text-lg text-slate-500 mb-12 max-w-2xl mx-auto">
{t.hero.description}
</p>
<div className="flex flex-col sm:flex-row gap-4 justify-center">
<Link href="/search" className="bg-blue-600 text-white px-8 py-4 rounded-xl hover:bg-blue-700 transition-all transform hover:scale-105">
{t.hero.cta}
</Link>
<Link href="/lawyer-signup" className="border-2 border-blue-600 text-blue-600 px-8 py-4 rounded-xl hover:bg-blue-50 transition-all">
{t.hero.ctaSecondary}
</Link>
</div>
</motion.div>
</div>
</section>
{/* Why Choose Section */}
<section className="py-20 bg-white">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<motion.div
initial={{ opacity: 0, y: 20 }}
whileInView={{ opacity: 1, y: 0 }}
transition={{ duration: 0.8 }}
className="text-center mb-16"
>
<h2 className="text-4xl font-bold text-slate-900 mb-4">
{t.whyChoose.title}
</h2>
<p className="text-xl text-slate-600 max-w-3xl mx-auto">
{t.whyChoose.subtitle}
</p>
</motion.div>
<div className="grid md:grid-cols-3 gap-8">
{t.whyChoose.features.map((feature, index) => (
<motion.div
key={index}
initial={{ opacity: 0, y: 20 }}
whileInView={{ opacity: 1, y: 0 }}
transition={{ duration: 0.8, delay: index * 0.2 }}
className="bg-gradient-to-br from-blue-50 to-purple-50 p-8 rounded-2xl border border-blue-100"
>
<feature.icon className="h-12 w-12 text-blue-600 mb-6" />
<h3 className="text-xl font-semibold text-slate-900 mb-4">
{feature.title}
</h3>
<p className="text-slate-600">
{feature.description}
</p>
</motion.div>
))}
</div>
</div>
</section>
{/* What We Do Section */}
<section className="py-20 bg-slate-50">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<motion.div
initial={{ opacity: 0, y: 20 }}
whileInView={{ opacity: 1, y: 0 }}
transition={{ duration: 0.8 }}
className="text-center mb-16"
>
<h2 className="text-4xl font-bold text-slate-900 mb-4">
{t.whatWeDo.title}
</h2>
<p className="text-xl text-slate-600 max-w-3xl mx-auto">
{t.whatWeDo.description}
</p>
</motion.div>
<div className="grid lg:grid-cols-2 gap-12">
{t.whatWeDo.sections.map((section, index) => (
<motion.div
key={index}
initial={{ opacity: 0, x: index === 0 ? -20 : 20 }}
whileInView={{ opacity: 1, x: 0 }}
transition={{ duration: 0.8 }}
className="bg-white p-8 rounded-2xl shadow-lg"
>
<h3 className="text-2xl font-bold text-slate-900 mb-4">
{section.title}
</h3>
<p className="text-slate-600 mb-6">
{section.description}
</p>
<ul className="space-y-3">
{section.features.map((feature, featureIndex) => (
<li key={featureIndex} className="flex items-start">
<CheckCircle className="h-5 w-5 text-green-500 mt-0.5 mr-3 flex-shrink-0" />
<span className="text-slate-600">{feature}</span>
</li>
))}
</ul>
</motion.div>
))}
</div>
</div>
</section>
{/* Workflow Section */}
<section className="py-20 bg-white">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<motion.div
initial={{ opacity: 0, y: 20 }}
whileInView={{ opacity: 1, y: 0 }}
transition={{ duration: 0.8 }}
className="text-center mb-16"
>
<h2 className="text-4xl font-bold text-slate-900 mb-4">
Créer votre dossier en quelques clics
</h2>
</motion.div>
<div className="grid md:grid-cols-4 gap-8 mb-12">
{[
{ number: "1", title: "Décrivez votre situation", description: "Expliquez votre besoin juridique en détail" },
{ number: "2", title: "Ajoutez vos documents", description: "Téléchargez les documents pertinents" },
{ number: "3", title: "Choisissez vos cabinets", description: "Sélectionnez les cabinets d'intérêt" },
{ number: "4", title: "Recevez des propositions", description: "Comparez et choisissez la meilleure offre" }
].map((step, index) => (
<motion.div
key={index}
initial={{ opacity: 0, y: 20 }}
whileInView={{ opacity: 1, y: 0 }}
transition={{ duration: 0.8, delay: index * 0.2 }}
className="text-center"
>
<div className="bg-blue-600 text-white w-16 h-16 rounded-full flex items-center justify-center text-2xl font-bold mx-auto mb-4">
{step.number}
</div>
<h3 className="text-xl font-semibold text-slate-900 mb-2">
{step.title}
</h3>
<p className="text-slate-600">
{step.description}
</p>
</motion.div>
))}
</div>
<motion.div
initial={{ opacity: 0, y: 20 }}
whileInView={{ opacity: 1, y: 0 }}
transition={{ duration: 0.8 }}
className="bg-gradient-to-r from-blue-50 to-purple-50 p-8 rounded-2xl"
>
<h3 className="text-2xl font-bold text-slate-900 mb-6 text-center">
Avantages pour les clients
</h3>
<div className="grid md:grid-cols-3 gap-6">
{[
"Comparer plusieurs cabinets en une seule demande",
"Gagner du temps et des efforts de recherche",
"Transparence totale sur les honoraires"
].map((benefit, index) => (
<div key={index} className="flex items-center">
<CheckCircle className="h-5 w-5 text-green-500 mr-3" />
<span className="text-slate-700">{benefit}</span>
</div>
))}
</div>
</motion.div>
</div>
</section>
{/* Advanced Features */}
<section className="py-20 bg-slate-50">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<motion.div
initial={{ opacity: 0, y: 20 }}
whileInView={{ opacity: 1, y: 0 }}
transition={{ duration: 0.8 }}
className="text-center mb-16"
>
<h2 className="text-4xl font-bold text-slate-900 mb-4">
Fonctionnalités avancées
</h2>
</motion.div>
<div className="grid md:grid-cols-4 gap-6">
{[
{ icon: MessageCircle, text: "Suivi centralisé de toutes les communications" },
{ icon: Clock, text: "Disponibilité 24/7" },
{ icon: Zap, text: "Temps de réponse moyen" },
{ icon: Lock, text: "100% sécurisé" },
{ icon: CheckCircle2, text: "Fiable" },
{ icon: Shield, text: "VPN" },
{ icon: Globe, text: "Support bilingue" }
].map((feature, index) => (
<motion.div
key={index}
initial={{ opacity: 0, y: 20 }}
whileInView={{ opacity: 1, y: 0 }}
transition={{ duration: 0.8, delay: index * 0.1 }}
className="bg-white p-6 rounded-xl shadow-sm border border-slate-200 text-center"
>
<feature.icon className="h-8 w-8 text-blue-600 mx-auto mb-3" />
<p className="text-slate-700 font-medium">{feature.text}</p>
</motion.div>
))}
</div>
</div>
</section>
{/* Journeys Section */}
<section className="py-20 bg-white">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div className="grid lg:grid-cols-2 gap-12">
{/* Client Journey */}
<motion.div
initial={{ opacity: 0, x: -20 }}
whileInView={{ opacity: 1, x: 0 }}
transition={{ duration: 0.8 }}
>
<h3 className="text-3xl font-bold text-slate-900 mb-8">
Parcours client
</h3>
<div className="space-y-6">
{[
{ title: "Recherche et sélection", description: "Trouvez l'avocat idéal" },
{ title: "Premier contact", description: "Échangez en toute sécurité" },
{ title: "Suivi de dossier", description: "Restez informé en temps réel" },
{ title: "Résolution", description: "Obtenez les résultats souhaités" }
].map((step, index) => (
<div key={index} className="flex items-start">
<div className="bg-blue-600 text-white w-8 h-8 rounded-full flex items-center justify-center text-sm font-bold mr-4 mt-1">
{index + 1}
</div>
<div>
<h4 className="text-lg font-semibold text-slate-900 mb-1">
{step.title}
</h4>
<p className="text-slate-600">{step.description}</p>
</div>
</div>
))}
</div>
</motion.div>
{/* Lawyer Journey */}
<motion.div
initial={{ opacity: 0, x: 20 }}
whileInView={{ opacity: 1, x: 0 }}
transition={{ duration: 0.8 }}
>
<h3 className="text-3xl font-bold text-slate-900 mb-8">
Parcours avocat
</h3>
<div className="space-y-6">
{[
{ title: "Vérification et inscription", description: "Rejoignez la communauté" },
{ title: "Création de profil", description: "Présentez votre expertise" },
{ title: "Gestion de dossiers", description: "Optimisez votre pratique" },
{ title: "Croissance", description: "Développez votre réseau" }
].map((step, index) => (
<div key={index} className="flex items-start">
<div className="bg-purple-600 text-white w-8 h-8 rounded-full flex items-center justify-center text-sm font-bold mr-4 mt-1">
{index + 1}
</div>
<div>
<h4 className="text-lg font-semibold text-slate-900 mb-1">
{step.title}
</h4>
<p className="text-slate-600">{step.description}</p>
</div>
</div>
))}
</div>
</motion.div>
</div>
</div>
</section>
{/* Security & Trust Section */}
<section className="py-20 bg-slate-50">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<motion.div
initial={{ opacity: 0, y: 20 }}
whileInView={{ opacity: 1, y: 0 }}
transition={{ duration: 0.8 }}
className="text-center mb-16"
>
<h2 className="text-4xl font-bold text-slate-900 mb-4">
Transparence et confiance
</h2>
<p className="text-xl text-slate-600 max-w-3xl mx-auto">
Notre engagement envers la sécurité, la transparence et l'excellence
</p>
</motion.div>
<div className="grid md:grid-cols-3 gap-8">
{[
{
title: "Sécurité de niveau bancaire",
items: [
"Chiffrement AES-256",
"Conformité GDPR et loi québécoise",
"Sauvegardes automatiques et redondantes",
"Authentification à deux facteurs"
]
},
{
title: "Vérification Barreau",
items: [
"Tous les avocats directement vérifiés avec le Barreau du Québec"
]
},
{
title: "Transparence totale",
items: [
"Honoraires clairs et sans surprise",
"Historique complet des communications",
"Suivi de dossier en temps réel",
"Évaluations et commentaires authentiques"
]
}
].map((feature, index) => (
<motion.div
key={index}
initial={{ opacity: 0, y: 20 }}
whileInView={{ opacity: 1, y: 0 }}
transition={{ duration: 0.8, delay: index * 0.2 }}
className="bg-white p-8 rounded-2xl shadow-lg"
>
<h3 className="text-xl font-semibold text-slate-900 mb-6">
{feature.title}
</h3>
<ul className="space-y-3">
{feature.items.map((item, itemIndex) => (
<li key={itemIndex} className="flex items-start">
<CheckCircle className="h-5 w-5 text-green-500 mt-0.5 mr-3 flex-shrink-0" />
<span className="text-slate-600">{item}</span>
</li>
))}
</ul>
</motion.div>
))}
</div>
</div>
</section>
{/* How It Works Section */}
<section className="py-20 bg-white">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<motion.div
initial={{ opacity: 0, y: 20 }}
whileInView={{ opacity: 1, y: 0 }}
transition={{ duration: 0.8 }}
className="text-center mb-16"
>
<h2 className="text-4xl font-bold text-slate-900 mb-4">
Comment ça marche ?
</h2>
</motion.div>
<div className="grid md:grid-cols-5 gap-8">
{[
{ title: "Créer", description: "Décrivez votre besoin" },
{ title: "Assigner", description: "Trouvez l'expert" },
{ title: "Comparer", description: "Évaluez les options" },
{ title: "Collaborer", description: "Travaillez ensemble" },
{ title: "Résoudre", description: "Obtenez des résultats" }
].map((step, index) => (
<motion.div
key={index}
initial={{ opacity: 0, y: 20 }}
whileInView={{ opacity: 1, y: 0 }}
transition={{ duration: 0.8, delay: index * 0.2 }}
className="text-center"
>
<div className="bg-gradient-to-br from-blue-600 to-purple-600 text-white w-16 h-16 rounded-full flex items-center justify-center text-xl font-bold mx-auto mb-4">
{index + 1}
</div>
<h3 className="text-lg font-semibold text-slate-900 mb-2">
{step.title}
</h3>
<p className="text-slate-600 text-sm">
{step.description}
</p>
</motion.div>
))}
</div>
</div>
</section>
{/* Testimonials Section */}
<section className="py-20 bg-slate-50">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<motion.div
initial={{ opacity: 0, y: 20 }}
whileInView={{ opacity: 1, y: 0 }}
transition={{ duration: 0.8 }}
className="text-center mb-16"
>
<h2 className="text-4xl font-bold text-slate-900 mb-4">
Ce que disent nos utilisateurs
</h2>
</motion.div>
<div className="grid md:grid-cols-3 gap-8">
{[
{
text: "Plateforme exceptionnelle qui m'a permis de trouver l'avocat parfait pour mon dossier.",
author: "Marie L.",
rating: 5,
role: "Cliente"
},
{
text: "Outils modernes qui optimisent ma pratique et me permettent de mieux servir mes clients.",
author: "Me. Jean Tremblay",
rating: 5,
role: "Avocat"
},
{
text: "Transparence totale et communication fluide. Je recommande vivement.",
author: "Sophie M.",
rating: 5,
role: "Cliente"
}
].map((testimonial, index) => (
<motion.div
key={index}
initial={{ opacity: 0, y: 20 }}
whileInView={{ opacity: 1, y: 0 }}
transition={{ duration: 0.8, delay: index * 0.2 }}
className="bg-white p-8 rounded-2xl shadow-lg"
>
<div className="flex mb-4">
{[...Array(testimonial.rating)].map((_, i) => (
<StarIcon key={i} className="h-5 w-5 text-yellow-400 fill-current" />
))}
</div>
<p className="text-slate-600 mb-6 italic">
"{testimonial.text}"
</p>
<div>
<p className="font-semibold text-slate-900">{testimonial.author}</p>
<p className="text-sm text-slate-500">{testimonial.role}</p>
</div>
</motion.div>
))}
</div>
</div>
</section>
{/* Stats Section */}
<section className="py-20 bg-gradient-to-r from-blue-600 to-purple-600">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<motion.div
initial={{ opacity: 0, y: 20 }}
whileInView={{ opacity: 1, y: 0 }}
transition={{ duration: 0.8 }}
className="text-center mb-16"
>
<h2 className="text-4xl font-bold text-white mb-4">
{t.stats.title}
</h2>
</motion.div>
<div className="grid md:grid-cols-4 gap-8">
{t.stats.items.map((stat, index) => (
<motion.div
key={index}
initial={{ opacity: 0, y: 20 }}
whileInView={{ opacity: 1, y: 0 }}
transition={{ duration: 0.8, delay: index * 0.2 }}
className="text-center"
>
<div className="text-4xl font-bold text-white mb-2">
{stat.number}
</div>
<div className="text-blue-100">
{stat.label}
</div>
</motion.div>
))}
</div>
</div>
</section>
{/* CTA Section */}
<section className="py-20 bg-white">
<div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
<motion.div
initial={{ opacity: 0, y: 20 }}
whileInView={{ opacity: 1, y: 0 }}
transition={{ duration: 0.8 }}
>
<h2 className="text-4xl font-bold text-slate-900 mb-6">
Prêt à rejoindre la communauté ?
</h2>
<p className="text-xl text-slate-600 mb-8">
Rejoignez avocat.quebec et transformez votre pratique juridique
</p>
<div className="flex flex-col sm:flex-row gap-4 justify-center">
<Link href="/lawyer-signup" className="bg-blue-600 text-white px-8 py-4 rounded-xl hover:bg-blue-700 transition-all transform hover:scale-105">
Devenir avocat vérifié
</Link>
<Link href="/join" className="border-2 border-blue-600 text-blue-600 px-8 py-4 rounded-xl hover:bg-blue-50 transition-all">
S'inscrire maintenant
</Link>
</div>
</motion.div>
</div>
</section>
{/* Footer */}
<footer className="bg-slate-900 text-white py-16">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<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-slate-300 mb-4">
La plateforme de confiance pour la communauté juridique québécoise
</p>
</div>
<div>
<h3 className="text-lg font-semibold mb-4">Services</h3>
<ul className="space-y-2 text-slate-300">
<li><Link href="/search" className="hover:text-white transition-colors">Recherche d'avocats</Link></li>
<li><Link href="/live-cases" className="hover:text-white transition-colors">Dossiers en direct</Link></li>
<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>
</ul>
</div>
<div>
<h3 className="text-lg font-semibold mb-4">Support</h3>
<ul className="space-y-2 text-slate-300">
<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="/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-slate-300">
<p>{t.contact.email}</p>
<p>{t.contact.phone}</p>
<p>{t.contact.location}</p>
</div>
</div>
</div>
<div className="border-t border-slate-700 mt-12 pt-8 text-center text-slate-400">
<p>© 2024 avocat.quebec. Tous droits réservés.</p>
</div>
</div>
</footer>
</div>
</>
);
};
export default HomePage;