 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/en/ |
'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 === 'en' ? 'FR' : 'EN'}
</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">
Bar Verification
</h3>
<p className="text-gray-600 dark:text-gray-400">
All our lawyers are verified by the Quebec Bar. You are guaranteed to work with authentic professionals.
</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">
Law Firms
</h3>
<p className="text-gray-600 dark:text-gray-400">
Discover Quebec law firms, their teams, and specializations. Find the expertise that matches your needs.
</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">
Active Community
</h3>
<p className="text-gray-600 dark:text-gray-400">
Join a dynamic community of lawyers, jurists, and legal professionals. Share, collaborate, grow.
</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">
Recognized Excellence
</h3>
<p className="text-gray-600 dark:text-gray-400">
Our lawyers are rated and recognized for their expertise. Transparent rating and recommendation system.
</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">
Live Cases
</h3>
<p className="text-gray-600 dark:text-gray-400">
Follow ongoing legal cases, join discussions, and stay informed about important developments.
</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">
Modern Platform
</h3>
<p className="text-gray-600 dark:text-gray-400">
A modern, intuitive platform designed to facilitate interactions between legal professionals and clients.
</p>
</motion.div>
</div>
</div>
</section>
{/* What We Do - 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">
What We Do
</h2>
<p className="text-xl text-gray-600 dark:text-gray-400 max-w-3xl mx-auto">
A comprehensive platform that revolutionizes access to justice in Quebec.
From lawyer search to case management, we simplify the entire legal process.
</p>
</motion.div>
<div className="grid grid-cols-1 lg:grid-cols-2 gap-12">
{/* For 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">
For Clients
</h3>
<p className="text-gray-600 dark:text-gray-400 mb-8">
Find the perfect lawyer for your situation, track your case in real-time,
and maintain complete control over your legal matter.
</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">Smart Search</h4>
<p className="text-gray-600 dark:text-gray-400">Filter by specialty, location, experience, and availability</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">Verified Profiles</h4>
<p className="text-gray-600 dark:text-gray-400">All lawyers are verified by the Quebec Bar</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">Case Tracking</h4>
<p className="text-gray-600 dark:text-gray-400">Access your documents, calendar, and 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">Secure Communication</h4>
<p className="text-gray-600 dark:text-gray-400">Integrated messaging and encrypted document sharing</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">Transparent Payments</h4>
<p className="text-gray-600 dark:text-gray-400">Clear billing and secure online payments</p>
</div>
</div>
</div>
</motion.div>
{/* For Lawyers */}
<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">
For Lawyers
</h3>
<p className="text-gray-600 dark:text-gray-400 mb-8">
Manage your cases efficiently, develop your professional network,
and access modern tools to optimize your practice.
</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">Firm Management</h4>
<p className="text-gray-600 dark:text-gray-400">Firm profiles, teams, and specializations</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">Document Management</h4>
<p className="text-gray-600 dark:text-gray-400">Secure storage, sharing, and document collaboration</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">Integrated Calendar</h4>
<p className="text-gray-600 dark:text-gray-400">Scheduling, reminders, and deadline management</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 & Reports</h4>
<p className="text-gray-600 dark:text-gray-400">Performance tracking and practice insights</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">Professional Network</h4>
<p className="text-gray-600 dark:text-gray-400">Collaboration with other lawyers and specialists</p>
</div>
</div>
</div>
</motion.div>
</div>
</div>
</section>
{/* Case Creation & Management */}
<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">
Case Creation & Management
</h2>
<p className="text-xl text-gray-600 dark:text-gray-400">
Create your legal case and receive proposals from multiple law firms
</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">Create your case in a few clicks</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">Describe your situation</h4>
<p className="text-blue-100 text-sm">Tell your legal story with our guided forms</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">Add your documents</h4>
<p className="text-blue-100 text-sm">Upload relevant documents (contracts, correspondence, 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">Choose your firms</h4>
<p className="text-blue-100 text-sm">Select multiple qualified law firms</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">Receive proposals</h4>
<p className="text-blue-100 text-sm">Compare offers and choose the best lawyer</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">Benefits for 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>Compare multiple firms with a single request</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>Save time and research effort</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>Complete transparency on rates and approaches</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>Centralized tracking of all 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">Advanced features</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">Assigned firms</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">Average response</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">Secure</div>
</div>
<div className="text-center">
<div className="text-2xl font-bold text-yellow-600">EN/FR</div>
<div className="text-sm text-gray-600 dark:text-gray-400">Bilingual</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="/en/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">
Create my first case
<ArrowRight className="ml-2 h-5 w-5" />
</Link>
</motion.div>
</div>
</section>
{/* Your Journey on 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">
Your Journey on avocat.quebec
</h2>
<p className="text-xl text-gray-600 dark:text-gray-400">
Discover how our platform simplifies your legal experience
</p>
</motion.div>
<div className="grid grid-cols-1 lg:grid-cols-2 gap-12">
{/* Client Journey */}
<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">Client Journey</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">Search & Selection</h4>
<p className="text-gray-600 dark:text-gray-400">Use our advanced filters to find the ideal lawyer for your needs</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">First Contact</h4>
<p className="text-gray-600 dark:text-gray-400">Schedule an appointment or contact the lawyer directly through our platform</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">Case Tracking</h4>
<p className="text-gray-600 dark:text-gray-400">Access all your documents and communications in real-time</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">Resolution</h4>
<p className="text-gray-600 dark:text-gray-400">Track progress until your case is resolved</p>
</div>
</div>
</div>
</motion.div>
{/* Lawyer Journey */}
<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">Lawyer Journey</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">Verification & Registration</h4>
<p className="text-gray-600 dark:text-gray-400">Quick verification process with the Quebec Bar</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">Profile Creation</h4>
<p className="text-gray-600 dark:text-gray-400">Customize your profile and showcase your 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">Case Management</h4>
<p className="text-gray-600 dark:text-gray-400">Use our tools to efficiently manage your clients and cases</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">Growth</h4>
<p className="text-gray-600 dark:text-gray-400">Develop your network and practice through our community</p>
</div>
</div>
</div>
</motion.div>
</div>
</div>
</section>
{/* Collaboration Tools */}
<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">
Collaboration Tools
</h2>
<p className="text-xl text-gray-600 dark:text-gray-400">
A complete suite of tools to facilitate collaboration between lawyers and 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">
Secure Messaging
</h3>
<p className="text-gray-600 dark:text-gray-400">
Encrypted real-time communication between lawyers and clients.
Complete history and instant notifications.
</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">
Document Management
</h3>
<p className="text-gray-600 dark:text-gray-400">
Secure storage, controlled sharing, and document collaboration.
Automatic versioning and electronic signatures.
</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">
Shared Calendar
</h3>
<p className="text-gray-600 dark:text-gray-400">
Court scheduling, appointments, and deadlines.
Automatic synchronization and smart reminders.
</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">
Virtual Consultations
</h3>
<p className="text-gray-600 dark:text-gray-400">
Secure video conferencing integrated into the platform.
Automatic recording and transcription.
</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">
Dashboards
</h3>
<p className="text-gray-600 dark:text-gray-400">
Real-time tracking of case progress.
Customized analytics and reports.
</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">
Smart Notifications
</h3>
<p className="text-gray-600 dark:text-gray-400">
Personalized alerts for important deadlines.
Email, SMS, and push notifications.
</p>
</motion.div>
</div>
</div>
</section>
{/* Transparency & Trust */}
<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">
Transparency & Trust
</h2>
<p className="text-xl text-gray-600 dark:text-gray-400">
Our commitment to security, transparency, and 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">Bank-Level Security</h3>
<ul className="space-y-3">
<li className="flex items-center">
<CheckCircle className="h-5 w-5 mr-3" />
AES-256 encryption for all data
</li>
<li className="flex items-center">
<CheckCircle className="h-5 w-5 mr-3" />
GDPR compliance and Quebec laws
</li>
<li className="flex items-center">
<CheckCircle className="h-5 w-5 mr-3" />
Automatic and redundant backup
</li>
<li className="flex items-center">
<CheckCircle className="h-5 w-5 mr-3" />
Two-factor authentication
</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">Bar Verification</h3>
<p className="text-gray-600 dark:text-gray-400 mb-4">
All lawyers are verified directly with the Quebec Bar.
We maintain high standards of excellence.
</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">Verified</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">Verification</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">Complete Transparency</h3>
<ul className="space-y-2 text-gray-600 dark:text-gray-400">
<li>• Clear pricing with no surprises</li>
<li>• Complete communication history</li>
<li>• Real-time case tracking</li>
<li>• Authentic reviews and ratings</li>
</ul>
</div>
</motion.div>
</div>
</div>
</section>
{/* How It Works */}
<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">
How It Works
</h2>
<p className="text-xl text-blue-100">
In 5 simple steps, create your case and find the best lawyer
</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. Create</h3>
<p className="text-blue-100 text-sm">
Describe your situation and add your 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. Assign</h3>
<p className="text-blue-100 text-sm">
Select multiple qualified law firms
</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. Compare</h3>
<p className="text-blue-100 text-sm">
Receive and evaluate lawyer proposals
</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. Collaborate</h3>
<p className="text-blue-100 text-sm">
Choose the best lawyer and start working
</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. Resolve</h3>
<p className="text-blue-100 text-sm">
Track progress until complete resolution
</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="/en/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">
Get Started Now
<ArrowRight className="ml-2 h-5 w-5" />
</Link>
</motion.div>
</div>
</section>
{/* Testimonials */}
<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">
What Our Users Say
</h2>
<p className="text-xl text-gray-600 dark:text-gray-400">
Discover the experiences of our clients and lawyers
</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 helped me find the perfect lawyer for my divorce.
The case tracking was transparent and I always knew where my case stood."
</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">
"The platform has revolutionized my practice. The case management tools
save me precious time and my clients appreciate the transparency."
</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">Civil Law Lawyer</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">
"Excellent experience for our firm. The visibility and new clients
we've gained through avocat.quebec are remarkable."
</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">Bouchard Law Firm</div>
<div className="text-sm text-gray-600 dark:text-gray-400">Law Firm</div>
</div>
</div>
</motion.div>
</div>
</div>
</section>
{/* Stay Informed - 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">
Stay Informed
</h2>
<p className="text-xl text-gray-600 dark:text-gray-400 mb-8">
Receive the latest legal news, expert advice, and platform updates
</p>
<div className="flex flex-col sm:flex-row gap-4 max-w-md mx-auto">
<input
type="email"
placeholder="Your email address"
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">
Subscribe
</button>
</div>
<p className="text-sm text-gray-500 dark:text-gray-400 mt-4">
We respect your privacy. Unsubscribe with one click.
</p>
</motion.div>
</div>
</section>
{/* Stats Section */}
<section className="py-20 bg-gradient-to-r from-blue-600 to-purple-600 text-white">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
<h2 className="text-3xl md:text-4xl font-bold mb-4">avocat.quebec in numbers</h2>
<p className="text-xl mb-12">A growing community</p>
<div className="grid grid-cols-2 md:grid-cols-4 gap-8">
<div>
<div className="text-4xl font-bold">500+</div>
<div className="text-lg">Verified Lawyers</div>
</div>
<div>
<div className="text-4xl font-bold">50+</div>
<div className="text-lg">Law Firms</div>
</div>
<div>
<div className="text-4xl font-bold">1000+</div>
<div className="text-lg">Cases Handled</div>
</div>
<div>
<div className="text-4xl font-bold">4.9</div>
<div className="text-lg">Average Rating</div>
</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">
<VerifiedLawyerCTA
language="en"
variant="primary"
className="mb-8"
/>
</div>
</section>
{/* Join Section */}
<section className="py-20 px-4 sm:px-6 lg:px-8">
<div className="max-w-7xl mx-auto text-center">
<h2 className="text-3xl md:text-4xl font-bold mb-4">Ready to join avocat.quebec?</h2>
<p className="text-xl mb-8">Join the official platform for Quebec lawyers. Bar verification included, active community, unlimited opportunities.</p>
<div className="flex flex-col sm:flex-row gap-4 justify-center">
<Link href="/en/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">
Become a Verified Lawyer
</Link>
<Link href="/en/business-profiles" 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">
Explore Law Firms
</Link>
</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">
The official legal network of Quebec. Connect, collaborate, excel.
</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="/en/help" className="hover:text-white transition-colors">Help Center</Link></li>
<li><Link href="/en/contact" className="hover:text-white transition-colors">Contact</Link></li>
<li><Link href="/en/privacy" className="hover:text-white transition-colors">Privacy</Link></li>
<li><Link href="/en/terms" className="hover:text-white transition-colors">Terms of Use</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" />
Montreal, Quebec
</div>
</div>
</div>
</div>
<div className="border-t border-gray-800 mt-8 pt-8 text-center text-gray-400">
<p>© 2024 avocat.quebec. All rights reserved.</p>
</div>
</div>
</footer>
</div>
</>
);
};
export default HomePage;