 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/backups/lavocat.quebec/backup-20250730-021618/src/pages/ |
'use client';
import { useState, useEffect } from 'react';
import { motion } from 'framer-motion';
import Link from 'next/link';
import { useSession } from 'next-auth/react';
import {
Scale,
Shield,
Users,
Award,
CheckCircle,
ArrowRight,
User,
Briefcase,
GraduationCap,
Star,
Heart,
ExternalLink,
Globe,
MapPin,
Building,
FileText,
Gavel,
BookOpen
} from 'lucide-react';
import LawyerRegistrationLayout from '@/components/LawyerRegistrationLayout';
import SEO from '@/components/SEO';
export default function JoinPage() {
const { data: session } = useSession();
const [language, setLanguage] = useState<'en' | 'fr'>('fr');
const [isMobile, setIsMobile] = useState(false);
// Mobile detection
useEffect(() => {
const checkMobile = () => {
setIsMobile(window.innerWidth < 768);
};
checkMobile();
window.addEventListener('resize', checkMobile);
return () => window.removeEventListener('resize', checkMobile);
}, []);
// Bilingual content for avocat.quebec
const content = {
fr: {
hero: {
title: "Rejoignez avocat.quebec",
subtitle: "La plateforme juridique principale du Québec",
description: "Connectez-vous avec des avocats vérifiés, gérez vos dossiers juridiques et accédez à des outils de collaboration avancés.",
cta: "Commencer",
learnMore: "En savoir plus"
},
whatWeDo: {
title: "Notre Mission",
subtitle: "Moderniser les services juridiques au Québec",
description: "Nous construisons l'avenir des services juridiques - une plateforme où transparence, accessibilité et justice rencontrent l'innovation.",
features: [
{
icon: Scale,
title: "Gestion de Dossiers",
description: "Outils complets pour gérer vos dossiers juridiques"
},
{
icon: Users,
title: "Réseau d'Avocats",
description: "Connectez-vous avec des avocats vérifiés du Québec"
},
{
icon: Shield,
title: "Sécurité Avancée",
description: "Protection et confidentialité pour vos informations juridiques"
},
{
icon: Star,
title: "Innovation Juridique",
description: "Technologie de pointe pour les besoins juridiques modernes"
}
]
},
roles: {
title: "Choisissez Votre Rôle",
subtitle: "Trouvez votre place dans notre écosystème juridique",
options: [
{
value: 'CLIENT',
icon: User,
title: "Client",
description: "Trouvez un avocat, suivez vos dossiers et accédez aux ressources juridiques",
benefits: ["Recherche d'avocats", "Suivi de dossiers", "Support communautaire", "Accès aux documents"],
color: "from-blue-500 to-blue-600",
cta: "Rejoindre en tant que Client"
},
{
value: 'LAWYER',
icon: Briefcase,
title: "Avocat Vérifié",
description: "Gérez vos dossiers, collaborez avec les clients et développez votre pratique",
benefits: ["Gestion de dossiers", "Portail client", "Outils documentaires", "Analyses"],
color: "from-green-500 to-green-600",
cta: "Devenir Avocat Vérifié"
},
{
value: 'LAW_FIRM',
icon: Building,
title: "Cabinet d'Avocats",
description: "Gérez votre cabinet, vos équipes et vos clients",
benefits: ["Gestion d'équipe", "Outils collaboratifs", "Analyses avancées", "Support dédié"],
color: "from-purple-500 to-purple-600",
cta: "Créer un Cabinet"
},
{
value: 'PARALEGAL',
icon: FileText,
title: "Parajuriste",
description: "Soutenez les équipes juridiques avec des outils avancés",
benefits: ["Préparation de documents", "Recherche de dossiers", "Collaboration d'équipe", "Outils de flux de travail"],
color: "from-orange-500 to-orange-600",
cta: "Rejoindre en tant que Parajuriste"
},
{
value: 'ASSISTANT',
icon: Users,
title: "Assistant Juridique",
description: "Rationalisez les tâches administratives et soutenez les opérations juridiques",
benefits: ["Gestion des tâches", "Outils de communication", "Intégration calendrier", "Rapports"],
color: "from-teal-500 to-teal-600",
cta: "Rejoindre en tant qu'Assistant"
},
{
value: 'STUDENT',
icon: GraduationCap,
title: "Étudiant en Droit",
description: "Accédez aux ressources éducatives et acquérez une expérience pratique",
benefits: ["Ressources éducatives", "Programmes de mentorat", "Expérience pratique", "Mise en réseau"],
color: "from-indigo-500 to-indigo-600",
cta: "Rejoindre en tant qu'Étudiant"
}
]
},
features: {
title: "Pourquoi Choisir avocat.quebec",
subtitle: "Conçu pour l'avenir des services juridiques au Québec",
items: [
{
icon: CheckCircle,
title: "Avocats Vérifiés",
description: "Tous nos avocats sont vérifiés par le Barreau du Québec"
},
{
icon: Globe,
title: "Bilingue",
description: "Support complet en français et anglais"
},
{
icon: MapPin,
title: "Québec",
description: "Spécialement conçu pour le marché juridique québécois"
},
{
icon: Star,
title: "Innovation",
description: "Technologie de pointe pour les besoins juridiques modernes"
}
]
}
},
en: {
hero: {
title: "Join avocat.quebec",
subtitle: "Québec's Premier Legal Platform",
description: "Connect with verified lawyers, manage your legal cases, and access advanced collaboration tools.",
cta: "Get Started",
learnMore: "Learn More"
},
whatWeDo: {
title: "Our Mission",
subtitle: "Modernizing Legal Services in Québec",
description: "We're building the future of legal services - a platform where transparency, accessibility, and justice meet innovation.",
features: [
{
icon: Scale,
title: "Case Management",
description: "Comprehensive tools for managing your legal cases"
},
{
icon: Users,
title: "Lawyer Network",
description: "Connect with verified Québec lawyers"
},
{
icon: Shield,
title: "Advanced Security",
description: "Protection and confidentiality for your legal information"
},
{
icon: Star,
title: "Legal Innovation",
description: "Cutting-edge technology for modern legal needs"
}
]
},
roles: {
title: "Choose Your Role",
subtitle: "Find your place in our legal ecosystem",
options: [
{
value: 'CLIENT',
icon: User,
title: "Client",
description: "Find a lawyer, track your cases, and access legal resources",
benefits: ["Lawyer search", "Case tracking", "Community support", "Document access"],
color: "from-blue-500 to-blue-600",
cta: "Join as Client"
},
{
value: 'LAWYER',
icon: Briefcase,
title: "Verified Lawyer",
description: "Manage your cases, collaborate with clients, and grow your practice",
benefits: ["Case management", "Client portal", "Document tools", "Analytics"],
color: "from-green-500 to-green-600",
cta: "Become a Verified Lawyer"
},
{
value: 'LAW_FIRM',
icon: Building,
title: "Law Firm",
description: "Manage your firm, teams, and clients",
benefits: ["Team management", "Collaborative tools", "Advanced analytics", "Dedicated support"],
color: "from-purple-500 to-purple-600",
cta: "Create a Law Firm"
},
{
value: 'PARALEGAL',
icon: FileText,
title: "Paralegal",
description: "Support legal teams with advanced tools and collaboration features",
benefits: ["Document preparation", "Case research", "Team collaboration", "Workflow tools"],
color: "from-orange-500 to-orange-600",
cta: "Join as Paralegal"
},
{
value: 'ASSISTANT',
icon: Users,
title: "Legal Assistant",
description: "Streamline administrative tasks and support legal operations",
benefits: ["Task management", "Communication tools", "Calendar integration", "Reporting"],
color: "from-teal-500 to-teal-600",
cta: "Join as Assistant"
},
{
value: 'STUDENT',
icon: GraduationCap,
title: "Law Student",
description: "Access educational resources and gain practical legal experience",
benefits: ["Educational resources", "Mentorship programs", "Practical experience", "Networking"],
color: "from-indigo-500 to-indigo-600",
cta: "Join as Student"
}
]
},
features: {
title: "Why Choose avocat.quebec",
subtitle: "Designed for the future of legal services in Québec",
items: [
{
icon: CheckCircle,
title: "Verified Lawyers",
description: "All our lawyers are verified by the Barreau du Québec"
},
{
icon: Globe,
title: "Bilingual",
description: "Complete support in French and English"
},
{
icon: MapPin,
title: "Québec",
description: "Specially designed for the Québec legal market"
},
{
icon: Star,
title: "Innovation",
description: "Cutting-edge technology for modern legal needs"
}
]
}
}
};
const t = content[language];
return (
<LawyerRegistrationLayout language={language}>
<SEO
title={language === 'en' ? "Join avocat.quebec - Québec's Premier Legal Platform" : "Rejoignez avocat.quebec - La Plateforme Juridique Principale du Québec"}
description={language === 'en' ? "Join Québec's premier legal platform. Connect with verified lawyers, manage cases, and access advanced legal tools." : "Rejoignez la plateforme juridique principale du Québec. Connectez-vous avec des avocats vérifiés, gérez vos dossiers et accédez à des outils juridiques avancés."}
keywords={["avocat.quebec", "lawyer", "legal platform", "Québec", "Barreau", "verified lawyers", "case management", "legal services"]}
/>
<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">
{/* Hero Section */}
<motion.section
className="relative py-20 px-4"
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.8 }}
>
<div className="max-w-6xl mx-auto text-center">
{/* Language Switcher */}
<div className="flex justify-center mb-8">
<div className="bg-white dark:bg-gray-800 rounded-lg p-1 shadow-lg">
<button
onClick={() => setLanguage('fr')}
className={`px-4 py-2 rounded-md font-medium transition-colors ${
language === 'fr'
? 'bg-blue-600 text-white'
: 'text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white'
}`}
>
FR
</button>
<button
onClick={() => setLanguage('en')}
className={`px-4 py-2 rounded-md font-medium transition-colors ${
language === 'en'
? 'bg-blue-600 text-white'
: 'text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white'
}`}
>
EN
</button>
</div>
</div>
<motion.h1
className="text-5xl md:text-6xl font-bold text-gray-900 dark:text-white mb-6"
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ delay: 0.2 }}
>
{t.hero.title}
</motion.h1>
<motion.p
className="text-xl md:text-2xl text-gray-600 dark:text-gray-300 mb-4"
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ delay: 0.3 }}
>
{t.hero.subtitle}
</motion.p>
<motion.p
className="text-lg text-gray-500 dark:text-gray-400 mb-12 max-w-3xl mx-auto"
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ delay: 0.4 }}
>
{t.hero.description}
</motion.p>
<motion.div
className="flex flex-col sm:flex-row gap-4 justify-center"
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ delay: 0.5 }}
>
<Link
href="/register-verified"
className="bg-blue-600 hover:bg-blue-700 text-white px-8 py-4 rounded-lg font-semibold text-lg transition-colors shadow-lg hover:shadow-xl"
>
{t.hero.cta}
</Link>
<Link
href="/about"
className="bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700 text-gray-900 dark:text-white px-8 py-4 rounded-lg font-semibold text-lg transition-colors shadow-lg hover:shadow-xl border border-gray-200 dark:border-gray-600"
>
{t.hero.learnMore}
</Link>
</motion.div>
</div>
</motion.section>
{/* What We Do Section */}
<motion.section
className="py-20 px-4 bg-white dark:bg-gray-800"
initial={{ opacity: 0, y: 40 }}
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true }}
transition={{ duration: 0.8 }}
>
<div className="max-w-6xl mx-auto">
<div className="text-center mb-16">
<h2 className="text-4xl md:text-5xl font-bold text-gray-900 dark:text-white mb-4">
{t.whatWeDo.title}
</h2>
<p className="text-xl text-gray-600 dark:text-gray-300 mb-6">
{t.whatWeDo.subtitle}
</p>
<p className="text-lg text-gray-500 dark:text-gray-400 max-w-3xl mx-auto">
{t.whatWeDo.description}
</p>
</div>
<div className="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
{t.whatWeDo.features.map((feature, index) => (
<motion.div
key={index}
className="text-center p-6 rounded-xl bg-gray-50 dark:bg-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 transition-colors"
initial={{ opacity: 0, y: 20 }}
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true }}
transition={{ delay: index * 0.1 }}
>
<feature.icon className="w-12 h-12 text-blue-600 mx-auto mb-4" />
<h3 className="text-xl font-semibold text-gray-900 dark:text-white mb-2">
{feature.title}
</h3>
<p className="text-gray-600 dark:text-gray-300">
{feature.description}
</p>
</motion.div>
))}
</div>
</div>
</motion.section>
{/* Role Selection Section */}
<motion.section
id="roles"
className="py-20 px-4"
initial={{ opacity: 0, y: 40 }}
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true }}
transition={{ duration: 0.8 }}
>
<div className="max-w-6xl mx-auto">
<div className="text-center mb-16">
<h2 className="text-4xl md:text-5xl font-bold text-gray-900 dark:text-white mb-4">
{t.roles.title}
</h2>
<p className="text-xl text-gray-600 dark:text-gray-300">
{t.roles.subtitle}
</p>
</div>
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
{t.roles.options.map((role, index) => (
<motion.div
key={role.value}
className="bg-white dark:bg-gray-800 rounded-2xl shadow-xl hover:shadow-2xl transition-all duration-300 hover:scale-105 border border-gray-100 dark:border-gray-700"
initial={{ opacity: 0, y: 20 }}
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true }}
transition={{ delay: index * 0.1 }}
>
<div className={`bg-gradient-to-r ${role.color} text-white p-6 rounded-t-2xl`}>
<role.icon className="w-12 h-12 mb-4" />
<h3 className="text-2xl font-bold mb-2">
{role.title}
</h3>
<p className="opacity-90">
{role.description}
</p>
</div>
<div className="p-6">
<h4 className="font-semibold text-gray-900 dark:text-white mb-4">
{language === 'en' ? 'Key Benefits:' : 'Avantages Clés :'}
</h4>
<ul className="space-y-2 mb-6">
{role.benefits.map((benefit, idx) => (
<li key={idx} className="flex items-center text-gray-600 dark:text-gray-300">
<CheckCircle className="w-5 h-5 text-green-500 mr-3 flex-shrink-0" />
{benefit}
</li>
))}
</ul>
<Link
href={role.value === 'LAWYER' ? '/register-verified' : `/auth/signup?role=${role.value}`}
className={`w-full bg-gradient-to-r ${role.color} text-white rounded-lg font-bold py-3 px-6 hover:scale-105 transition-all duration-200 flex items-center justify-center gap-2`}
>
{role.cta}
<ArrowRight className="w-5 h-5" />
</Link>
</div>
</motion.div>
))}
</div>
</div>
</motion.section>
{/* Features Section */}
<motion.section
className="py-20 px-4 bg-white dark:bg-gray-800"
initial={{ opacity: 0, y: 40 }}
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true }}
transition={{ duration: 0.8 }}
>
<div className="max-w-6xl mx-auto">
<div className="text-center mb-16">
<h2 className="text-4xl md:text-5xl font-bold text-gray-900 dark:text-white mb-4">
{t.features.title}
</h2>
<p className="text-xl text-gray-600 dark:text-gray-300">
{t.features.subtitle}
</p>
</div>
<div className="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
{t.features.items.map((feature, index) => (
<motion.div
key={index}
className="text-center p-6 rounded-xl bg-gray-50 dark:bg-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 transition-colors"
initial={{ opacity: 0, y: 20 }}
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true }}
transition={{ delay: index * 0.1 }}
>
<feature.icon className="w-12 h-12 text-blue-600 mx-auto mb-4" />
<h3 className="text-xl font-semibold text-gray-900 dark:text-white mb-2">
{feature.title}
</h3>
<p className="text-gray-600 dark:text-gray-300">
{feature.description}
</p>
</motion.div>
))}
</div>
</div>
</motion.section>
{/* Final CTA */}
<motion.section
className="py-20 px-4 text-center"
initial={{ opacity: 0, y: 40 }}
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true }}
transition={{ duration: 0.8 }}
>
<div className="max-w-4xl mx-auto">
<h2 className="text-4xl md:text-5xl font-bold text-gray-900 dark:text-white mb-6">
{language === 'en' ? 'Ready to Get Started?' : 'Prêt à Commencer ?'}
</h2>
<p className="text-xl text-gray-600 dark:text-gray-300 mb-8 max-w-2xl mx-auto">
{language === 'en'
? "Join thousands of legal professionals already using avocat.quebec. Your journey starts here."
: "Rejoignez des milliers de professionnels juridiques qui utilisent déjà avocat.quebec. Votre parcours commence ici."
}
</p>
<div className="flex flex-col sm:flex-row gap-4 justify-center">
<Link
href="/register-verified"
className="bg-blue-600 hover:bg-blue-700 text-white px-10 py-5 rounded-lg font-bold text-xl shadow-lg hover:shadow-xl transition-all duration-200"
>
{language === 'en' ? 'Join as Verified Lawyer' : 'Devenir Avocat Vérifié'}
</Link>
<Link
href="/auth/signup"
className="bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700 text-gray-900 dark:text-white px-10 py-5 rounded-lg font-bold text-xl shadow-lg hover:shadow-xl transition-all duration-200 border border-gray-200 dark:border-gray-600"
>
{language === 'en' ? 'Create Your Account' : 'Créer Votre Compte'}
</Link>
</div>
</div>
</motion.section>
</div>
</LawyerRegistrationLayout>
);
}