 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/ |
import { useState } from 'react';
import { useRouter } from 'next/router';
import { motion } from 'framer-motion';
import { Scale, Shield, Users, Award, CheckCircle, ArrowRight, User, Briefcase, BookOpen } from 'lucide-react';
import { toast } from 'react-hot-toast';
import LayoutWithSidebar from '../components/LayoutWithSidebar';
import { useTheme } from '../context/ThemeContext';
export default function LawyerSignup() {
const router = useRouter();
const { theme } = useTheme();
const [formData, setFormData] = useState({
name: '',
email: '',
phone: '',
barNumber: '',
specialization: '',
yearsOfExperience: '',
education: '',
officeLocation: '',
linkedinUrl: '',
websiteUrl: '',
bio: '',
motivation: ''
});
const [isSubmitting, setIsSubmitting] = useState(false);
const [step, setStep] = useState(1);
const handleInputChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>) => {
setFormData({
...formData,
[e.target.name]: e.target.value
});
};
const handleSubmit = async (e: React.FormEvent) => {
e.preventDefault();
setIsSubmitting(true);
try {
const response = await fetch('/api/lawyer-signup', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(formData),
});
if (response.ok) {
toast.success('Application submitted successfully! We will review your application and contact you soon.');
router.push('/');
} else {
const error = await response.json();
toast.error(error.message || 'Failed to submit application');
}
} catch (error) {
toast.error('An error occurred. Please try again.');
} finally {
setIsSubmitting(false);
}
};
const nextStep = () => {
if (step < 3) setStep(step + 1);
};
const prevStep = () => {
if (step > 1) setStep(step - 1);
};
const specializations = [
'Actions collectives',
'Violences sexuelles',
'Abus policiers et étatiques',
'Litige civil',
'Droit criminel',
'Droit de la famille',
'Droit du travail',
'Droit des affaires',
'Droit immobilier',
'Autre'
];
return (
<LayoutWithSidebar>
<div
className="min-h-screen"
style={{
background: `linear-gradient(135deg, ${theme.gradientStart}, ${theme.gradientEnd})`,
}}
>
{/* Background Pattern */}
<div className="absolute inset-0 opacity-20 pointer-events-none" style={{
backgroundImage: `url('data:image/svg+xml,%3Csvg width="60" height="60" viewBox="0 0 60 60" xmlns="http://www.w3.org/2000/svg"%3E%3Cg fill="none" fill-rule="evenodd"%3E%3Cg fill="%23ffffff" fill-opacity="0.05"%3E%3Ccircle cx="7" cy="7" r="1"/%3E%3C/g%3E%3C/g%3E%3C/svg%3E')`
}}></div>
<div className="relative z-10 container mx-auto px-4 py-8">
{/* Header */}
<motion.div
initial={{ opacity: 0, y: -20 }}
animate={{ opacity: 1, y: 0 }}
className="text-center mb-12"
>
<div className="flex justify-center mb-6">
<div
className="p-4 rounded-full"
style={{
background: `linear-gradient(135deg, ${theme.primary}, ${theme.secondary})`,
}}
>
<Scale className="w-12 h-12 text-white" />
</div>
</div>
<h1 className="text-4xl md:text-5xl font-bold text-white mb-4">
Rejoignez Notre Équipe
</h1>
<p className="text-xl text-white/80 max-w-3xl mx-auto">
Devenez membre de notre cabinet d'avocats spécialisé dans la défense des droits et la justice sociale
</p>
</motion.div>
{/* Benefits Section */}
<motion.div
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ delay: 0.2 }}
className="grid md:grid-cols-3 gap-6 mb-12"
>
<div className="bg-white/10 backdrop-blur-lg rounded-xl p-6 text-center border border-white/20">
<Shield
className="w-12 h-12 mx-auto mb-4"
style={{ color: theme.accent }}
/>
<h3 className="text-xl font-semibold text-white mb-2">Défense des Droits</h3>
<p className="text-white/70">Participez à des causes importantes et défendez la justice sociale</p>
</div>
<div className="bg-white/10 backdrop-blur-lg rounded-xl p-6 text-center border border-white/20">
<Users
className="w-12 h-12 mx-auto mb-4"
style={{ color: theme.secondary }}
/>
<h3 className="text-xl font-semibold text-white mb-2">Équipe Experte</h3>
<p className="text-white/70">Collaborez avec des avocats expérimentés et passionnés</p>
</div>
<div className="bg-white/10 backdrop-blur-lg rounded-xl p-6 text-center border border-white/20">
<Award
className="w-12 h-12 mx-auto mb-4"
style={{ color: theme.primary }}
/>
<h3 className="text-xl font-semibold text-white mb-2">Développement</h3>
<p className="text-white/70">Développez votre carrière dans un environnement stimulant</p>
</div>
</motion.div>
{/* Progress Bar */}
<div className="mb-8">
<div className="flex items-center justify-center space-x-2 md:space-x-4 overflow-x-auto px-4">
{[1, 2, 3].map((i) => (
<div key={i} className="flex items-center flex-shrink-0">
<div
className={`w-8 h-8 md:w-10 md:h-10 rounded-full flex items-center justify-center font-semibold text-sm md:text-base ${
step >= i ? 'text-white' : 'bg-white/20 text-white/60'
}`}
style={step >= i ? { backgroundColor: theme.primary } : {}}
>
{step > i ? <CheckCircle className="w-4 h-4 md:w-6 md:h-6" /> : i}
</div>
{i < 3 && (
<div
className={`w-12 md:w-16 h-1 mx-1 md:mx-2 ${
step > i ? '' : 'bg-white/20'
}`}
style={step > i ? { backgroundColor: theme.primary } : {}}
/>
)}
</div>
))}
</div>
<div className="flex justify-center mt-4 space-x-4 md:space-x-8 text-xs md:text-sm text-white/70 px-4">
<span className={`text-center ${step >= 1 ? 'text-white font-medium' : ''}`}>
Informations<br className="md:hidden" /> personnelles
</span>
<span className={`text-center ${step >= 2 ? 'text-white font-medium' : ''}`}>
Expérience<br className="md:hidden" /> professionnelle
</span>
<span className={`text-center ${step >= 3 ? 'text-white font-medium' : ''}`}>
Motivation
</span>
</div>
</div>
{/* Form */}
<motion.div
initial={{ opacity: 0, scale: 0.95 }}
animate={{ opacity: 1, scale: 1 }}
transition={{ delay: 0.3 }}
className="max-w-4xl mx-auto px-4"
>
<div className="bg-white/10 backdrop-blur-lg rounded-2xl p-4 md:p-8 shadow-2xl border border-white/20">
<form onSubmit={handleSubmit}>
{/* Step 1: Personal Information */}
{step === 1 && (
<motion.div
initial={{ opacity: 0, x: 20 }}
animate={{ opacity: 1, x: 0 }}
className="space-y-6"
>
<h2 className="text-2xl font-bold text-white mb-6 flex items-center">
<User className="w-6 h-6 mr-3" style={{ color: theme.accent }} />
Informations Personnelles
</h2>
<div className="grid md:grid-cols-2 gap-6">
<div>
<label className="block text-white font-medium mb-2">Nom complet *</label>
<input
type="text"
name="name"
value={formData.name}
onChange={handleInputChange}
required
className="w-full px-4 py-3 rounded-lg bg-white/20 border border-white/30 text-white placeholder-white/60 focus:outline-none focus:ring-2 focus:border-transparent"
style={{
'--tw-ring-color': theme.accent,
} as any}
placeholder="Votre nom complet"
/>
</div>
<div>
<label className="block text-white font-medium mb-2">Email professionnel *</label>
<input
type="email"
name="email"
value={formData.email}
onChange={handleInputChange}
required
className="w-full px-4 py-3 rounded-lg bg-white/20 border border-white/30 text-white placeholder-white/60 focus:outline-none focus:ring-2 focus:border-transparent"
style={{
'--tw-ring-color': theme.accent,
} as any}
placeholder="votre.email@exemple.com"
/>
</div>
<div>
<label className="block text-white font-medium mb-2">Téléphone *</label>
<input
type="tel"
name="phone"
value={formData.phone}
onChange={handleInputChange}
required
className="w-full px-4 py-3 rounded-lg bg-white/20 border border-white/30 text-white placeholder-white/60 focus:outline-none focus:ring-2 focus:border-transparent"
style={{
'--tw-ring-color': theme.accent,
} as any}
placeholder="(555) 123-4567"
/>
</div>
<div>
<label className="block text-white font-medium mb-2">Numéro du Barreau *</label>
<input
type="text"
name="barNumber"
value={formData.barNumber}
onChange={handleInputChange}
required
className="w-full px-4 py-3 rounded-lg bg-white/20 border border-white/30 text-white placeholder-white/60 focus:outline-none focus:ring-2 focus:border-transparent"
style={{
'--tw-ring-color': theme.accent,
} as any}
placeholder="Votre numéro du Barreau"
/>
</div>
<div>
<label className="block text-white font-medium mb-2">Lieu de pratique *</label>
<input
type="text"
name="officeLocation"
value={formData.officeLocation}
onChange={handleInputChange}
required
className="w-full px-4 py-3 rounded-lg bg-white/20 border border-white/30 text-white placeholder-white/60 focus:outline-none focus:ring-2 focus:border-transparent"
style={{
'--tw-ring-color': theme.accent,
} as any}
placeholder="Ville, Province"
/>
</div>
<div>
<label className="block text-white font-medium mb-2">Spécialisation *</label>
<select
name="specialization"
value={formData.specialization}
onChange={handleInputChange}
required
className="w-full px-4 py-3 rounded-lg bg-white/20 border border-white/30 text-white focus:outline-none focus:ring-2 focus:border-transparent"
style={{
'--tw-ring-color': theme.accent,
} as any}
>
<option value="" className="text-gray-900">Sélectionnez votre spécialisation</option>
{specializations.map((spec) => (
<option key={spec} value={spec} className="text-gray-900">{spec}</option>
))}
</select>
</div>
</div>
</motion.div>
)}
{/* Step 2: Professional Experience */}
{step === 2 && (
<motion.div
initial={{ opacity: 0, x: 20 }}
animate={{ opacity: 1, x: 0 }}
className="space-y-6"
>
<h2 className="text-2xl font-bold text-white mb-6 flex items-center">
<Briefcase className="w-6 h-6 mr-3" style={{ color: theme.secondary }} />
Expérience Professionnelle
</h2>
<div className="grid md:grid-cols-2 gap-6">
<div>
<label className="block text-white font-medium mb-2">Années d'expérience *</label>
<select
name="yearsOfExperience"
value={formData.yearsOfExperience}
onChange={handleInputChange}
required
className="w-full px-4 py-3 rounded-lg bg-white/20 border border-white/30 text-white focus:outline-none focus:ring-2 focus:border-transparent"
style={{
'--tw-ring-color': theme.accent,
} as any}
>
<option value="" className="text-gray-900">Sélectionnez</option>
<option value="0-2" className="text-gray-900">0-2 ans</option>
<option value="3-5" className="text-gray-900">3-5 ans</option>
<option value="6-10" className="text-gray-900">6-10 ans</option>
<option value="11-15" className="text-gray-900">11-15 ans</option>
<option value="16+" className="text-gray-900">16+ ans</option>
</select>
</div>
</div>
<div>
<label className="block text-white font-medium mb-2">Formation *</label>
<textarea
name="education"
value={formData.education}
onChange={handleInputChange}
required
rows={3}
className="w-full px-4 py-3 rounded-lg bg-white/20 border border-white/30 text-white placeholder-white/60 focus:outline-none focus:ring-2 focus:border-transparent"
style={{
'--tw-ring-color': theme.accent,
} as any}
placeholder="Décrivez votre formation académique et professionnelle..."
/>
</div>
<div className="grid md:grid-cols-2 gap-6">
<div>
<label className="block text-white font-medium mb-2">LinkedIn</label>
<input
type="url"
name="linkedinUrl"
value={formData.linkedinUrl}
onChange={handleInputChange}
className="w-full px-4 py-3 rounded-lg bg-white/20 border border-white/30 text-white placeholder-white/60 focus:outline-none focus:ring-2 focus:border-transparent"
style={{
'--tw-ring-color': theme.accent,
} as any}
placeholder="https://linkedin.com/in/votre-profil"
/>
</div>
<div>
<label className="block text-white font-medium mb-2">Site web</label>
<input
type="url"
name="websiteUrl"
value={formData.websiteUrl}
onChange={handleInputChange}
className="w-full px-4 py-3 rounded-lg bg-white/20 border border-white/30 text-white placeholder-white/60 focus:outline-none focus:ring-2 focus:border-transparent"
style={{
'--tw-ring-color': theme.accent,
} as any}
placeholder="https://votre-site.com"
/>
</div>
</div>
<div>
<label className="block text-white font-medium mb-2">Biographie professionnelle</label>
<textarea
name="bio"
value={formData.bio}
onChange={handleInputChange}
rows={4}
className="w-full px-4 py-3 rounded-lg bg-white/20 border border-white/30 text-white placeholder-white/60 focus:outline-none focus:ring-2 focus:border-transparent"
style={{
'--tw-ring-color': theme.accent,
} as any}
placeholder="Décrivez votre parcours professionnel et vos réalisations..."
/>
</div>
</motion.div>
)}
{/* Step 3: Motivation */}
{step === 3 && (
<motion.div
initial={{ opacity: 0, x: 20 }}
animate={{ opacity: 1, x: 0 }}
className="space-y-6"
>
<h2 className="text-2xl font-bold text-white mb-6 flex items-center">
<BookOpen className="w-6 h-6 mr-3" style={{ color: theme.primary }} />
Motivation et Engagement
</h2>
<div>
<label className="block text-white font-medium mb-2">Motivation *</label>
<textarea
name="motivation"
value={formData.motivation}
onChange={handleInputChange}
required
rows={5}
className="w-full px-4 py-3 rounded-lg bg-white/20 border border-white/30 text-white placeholder-white/60 focus:outline-none focus:ring-2 focus:border-transparent"
style={{
'--tw-ring-color': theme.accent,
} as any}
placeholder="Pourquoi souhaitez-vous rejoindre notre cabinet ? Quelles sont vos motivations pour défendre la justice sociale ?"
/>
</div>
</motion.div>
)}
{/* Navigation Buttons */}
<div className="flex flex-col md:flex-row justify-between items-center gap-4 mt-8">
{step > 1 ? (
<button
type="button"
onClick={prevStep}
className="w-full md:w-auto px-6 py-3 bg-white/20 text-white rounded-lg hover:bg-white/30 transition-colors order-2 md:order-1"
>
Précédent
</button>
) : (
<div className="hidden md:block"></div>
)}
{step < 3 ? (
<button
type="button"
onClick={nextStep}
className="w-full md:w-auto px-6 py-3 text-white rounded-lg transition-all flex items-center justify-center space-x-2 order-1 md:order-2"
style={{
background: `linear-gradient(135deg, ${theme.primary}, ${theme.secondary})`,
}}
>
<span>Suivant</span>
<ArrowRight className="w-4 h-4" />
</button>
) : (
<button
type="submit"
disabled={isSubmitting}
className="w-full md:w-auto px-8 py-3 text-white rounded-lg transition-all disabled:opacity-50 flex items-center justify-center space-x-2 order-1 md:order-2"
style={{
background: `linear-gradient(135deg, ${theme.secondary}, ${theme.accent})`,
}}
>
{isSubmitting ? (
<>
<div className="w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin" />
<span>Envoi en cours...</span>
</>
) : (
<>
<CheckCircle className="w-4 h-4" />
<span>Soumettre ma candidature</span>
</>
)}
</button>
)}
</div>
</form>
</div>
</motion.div>
</div>
</div>
</LayoutWithSidebar>
);
}