 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 React, { useState, useEffect } from 'react';
import RegistrationForm from '@/components/RegistrationForm';
import { useTheme } from '@/context/ThemeContext';
import { useRouter } from 'next/router';
import Image from 'next/image';
import { Lock } from 'lucide-react';
import LayoutWithSidebar from '../components/LayoutWithSidebar';
import StructuredData, { createHowToStructuredData } from '../components/StructuredData';
import OpenGraphMeta from '../components/OpenGraphMeta';
import { motion } from 'framer-motion';
const heroImages = [
'/images/WebAd/1.png',
'/images/WebAd/2.png',
'/images/WebAd/3.png',
'/images/WebAd/4.png',
];
const translations = {
en: {
step: 'STEP 1 OF 2',
title: 'Join the Fight for Justice',
description: 'If you or a loved one has been affected by unjust incarceration, you may be eligible to join a class action lawsuit. Fill out the form below to get started—our team will review your case and contact you for next steps.',
badges: ['100% Confidential', 'No Cost to Join', 'Legal Experts'],
cta: 'Get Started',
testimonial1: '“I never thought I\'d have a voice. The team made me feel heard and supported every step of the way.”',
testimonial1Author: '— Former Participant',
testimonial2: '“The process was simple and I felt supported throughout. I highly recommend joining if you qualify.”',
testimonial2Author: '— J. Tremblay, Montreal',
asSeenOn: 'As seen on:',
security: 'Your information is encrypted and secure.'
},
fr: {
step: 'ÉTAPE 1 SUR 2',
title: 'Rejoignez la lutte pour la justice',
description: 'Si vous ou un proche avez été touché par une incarcération injuste, vous pourriez être admissible à un recours collectif. Remplissez le formulaire ci-dessous pour commencer—notre équipe examinera votre dossier et vous contactera pour la suite.',
badges: ['100% Confidentiel', 'Aucun frais pour participer', 'Experts juridiques'],
cta: 'Commencer',
testimonial1: '« Je n\'aurais jamais cru avoir une voix. L\'équipe m\'a écouté et soutenu à chaque étape. »',
testimonial1Author: '— Ancien participant',
testimonial2: '« Le processus était simple et je me suis senti soutenu tout au long. Je recommande vivement de participer si vous êtes admissible. »',
testimonial2Author: '— J. Tremblay, Montréal',
asSeenOn: 'Vu sur :',
security: 'Vos informations sont chiffrées et sécurisées.'
}
};
const ClassActionPage: React.FC = () => {
const { theme, setTheme } = useTheme();
const router = useRouter();
const { locale } = router;
const randomizeTheme = () => {
const themes = [
{ primary: '#4A90E2', secondary: '#50E3C2' },
{ primary: '#F5A623', secondary: '#D0021B' },
{ primary: '#9013FE', secondary: '#50E3C2' },
{ primary: '#417505', secondary: '#B8E986' },
{ primary: '#BD10E0', secondary: '#9013FE' },
];
const randomTheme = themes[Math.floor(Math.random() * themes.length)];
setTheme(randomTheme);
};
const getGradient = () => {
if (theme?.primary && theme?.secondary) {
return `bg-gradient-to-br`;
}
return 'bg-gradient-to-br from-purple-600 to-pink-400';
};
const getGradientStyle = () => {
if (theme?.primary && theme?.secondary) {
return {
backgroundImage: `linear-gradient(135deg, ${theme.primary}, ${theme.secondary})`
};
}
return {};
};
const toggleLocale = () => {
const newLocale = locale === 'en' ? 'fr' : 'en';
router.push(router.pathname, router.asPath, { locale: newLocale });
};
const [currentImage, setCurrentImage] = useState(0);
const t = translations[locale as 'en' | 'fr'] || translations.en;
useEffect(() => {
const interval = setInterval(() => {
setCurrentImage((prev) => (prev + 1) % heroImages.length);
}, 4000);
return () => clearInterval(interval);
}, []);
const [isMobile, setIsMobile] = useState(false);
// Mobile detection
useEffect(() => {
const checkMobile = () => {
setIsMobile(window.innerWidth < 768);
};
checkMobile();
window.addEventListener('resize', checkMobile);
return () => window.removeEventListener('resize', checkMobile);
}, []);
return (
<>
<OpenGraphMeta
title="Class Action Against Quebec - Join the Fight for Justice - Liberté Même en Prison"
description="Join the class action lawsuit against Quebec for systematic rights violations at Bordeaux Prison. Learn how to participate in Perez c. Procureur général du Québec (500-06-001298-245)."
url="/class-action"
type="website"
tags={[
'class action',
'human rights',
'prison rights',
'legal justice',
'Bordeaux Prison',
'Quebec'
]}
image="/images/WebAd/1.png"
/>
<StructuredData
type="howTo"
data={createHowToStructuredData({
name: "How to Join the Class Action Against Quebec",
description: "Step-by-step guide to join the class action lawsuit for systematic rights violations at Bordeaux Prison",
steps: [
{
name: "Review Eligibility",
text: "Check if you or a loved one was detained at Bordeaux Prison from January 1, 2022, or if you suffered as a result of the inhumane conditions and rights violations."
},
{
name: "Fill Out Registration Form",
text: "Complete the online registration form with your personal information and details about your case. This is the first step in joining the class action."
},
{
name: "Submit Documentation",
text: "Provide any relevant documentation such as medical records, incident reports, or correspondence with prison authorities that may support your case."
},
{
name: "Legal Review",
text: "Our legal team will review your case and contact you to discuss next steps and answer any questions you may have about the process."
},
{
name: "Stay Informed",
text: "Receive regular updates about the case progress through the contact information you provided during registration."
}
],
totalTime: "PT30M",
estimatedCost: {
currency: "CAD",
value: "0"
}
})}
/>
<LayoutWithSidebar>
<div className={`mx-auto space-y-8 ${isMobile ? 'px-2 py-4 max-w-full' : 'max-w-6xl px-4 py-8'}`}>
{/* Hero Section */}
<motion.div
className={`text-center bg-gradient-to-br from-red-600 to-orange-600 text-white rounded-2xl shadow-xl ${isMobile ? 'p-6' : 'p-8'}`}
initial={{ opacity: 0, y: -40 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.7 }}
>
<div className={`mb-4 ${isMobile ? 'text-sm' : 'text-lg'}`}>
<span className="bg-white/20 px-3 py-1 rounded-full font-semibold">🏛️ OFFICIALLY AUTHORIZED</span>
</div>
<h1 className={`font-extrabold mb-4 drop-shadow-lg ${isMobile ? 'text-2xl' : 'text-5xl'}`}>
Justice for Bordeaux Prison
</h1>
<h2 className={`mb-6 font-semibold ${isMobile ? 'text-base' : 'text-2xl md:text-3xl'}`}>
The Class Action That Started From Inside a Cell
</h2>
<p className={`mb-6 leading-relaxed ${isMobile ? 'text-sm' : 'text-lg'}`}>
"I didn't wait for a lawyer. I became the law."<br/>
<span className="font-semibold">— Danny William Perez, Lead Representative</span>
</p>
<div className={`bg-white/10 rounded-lg p-4 mb-6 ${isMobile ? 'text-sm' : 'text-base'}`}>
<p className="mb-2"><strong>Case:</strong> Perez c. Procureur général du Québec</p>
<p className="mb-2"><strong>Court Authorization:</strong> 2024 QCCS 4539</p>
<p><strong>Status:</strong> ✅ Active & Accepting Applications</p>
</div>
<div className={`${isMobile ? 'flex flex-col space-y-3' : 'flex flex-col md:flex-row justify-center gap-4'}`}>
<a href="/auth/signup" className={`bg-white text-red-600 rounded-lg font-bold shadow-lg hover:scale-105 transition-all duration-200 ${isMobile ? 'px-6 py-3 text-base' : 'px-8 py-4 text-lg'}`}>
🚀 Join the Fight for Justice
</a>
<a href="https://www.canlii.org/fr/qc/qccs/doc/2024/2024qccs4539/2024qccs4539.html" className={`bg-transparent border-2 border-white text-white rounded-lg font-bold hover:bg-white hover:text-red-600 transition-all duration-200 ${isMobile ? 'px-6 py-3 text-base' : 'px-8 py-4 text-lg'}`} target="_blank">
📄 Read Court Decision
</a>
</div>
</motion.div>
{/* Case Overview */}
<motion.section
className={`bg-white rounded-xl shadow-xl border border-red-200 ${isMobile ? 'p-6' : 'p-8'}`}
initial={{ opacity: 0, x: -40 }}
whileInView={{ opacity: 1, x: 0 }}
viewport={{ once: true }}
transition={{ duration: 0.7, delay: 0.1 }}
>
<h3 className={`font-bold text-red-700 mb-6 ${isMobile ? 'text-xl' : 'text-3xl'}`}>The Story Behind the Case</h3>
<div className={`grid gap-6 ${isMobile ? 'grid-cols-1' : 'md:grid-cols-2'}`}>
<div>
<h4 className={`font-semibold text-gray-800 mb-3 ${isMobile ? 'text-base' : 'text-xl'}`}>🎯 What We're Fighting For</h4>
<p className={`text-gray-700 mb-4 ${isMobile ? 'text-sm' : ''}`}>
This isn't just another lawsuit. It's a fight for basic human dignity. From March to October 2023,
Danny Perez was systematically denied his legal right to one hour of daily outdoor time at Bordeaux Prison.
His experience wasn't unique—thousands suffered the same fate.
</p>
<div className="bg-red-50 rounded-lg p-4">
<p className={`text-red-700 font-semibold ${isMobile ? 'text-sm' : ''}`}>
💰 <strong>Potential Compensation:</strong> $1,500 per day of rights violations
</p>
<p className={`text-red-700 font-semibold ${isMobile ? 'text-sm' : ''}`}>
🎯 <strong>Class Size:</strong> 200+ potential members across Quebec
</p>
</div>
</div>
<div>
<h4 className={`font-semibold text-gray-800 mb-3 ${isMobile ? 'text-base' : 'text-xl'}`}>👥 Who Can Join</h4>
<p className={`text-gray-700 mb-4 ${isMobile ? 'text-sm' : ''}`}>
<strong>You may be eligible if:</strong>
</p>
<ul className={`text-gray-700 space-y-2 ${isMobile ? 'text-sm' : ''}`}>
<li className="flex items-start">
<span className="text-red-600 mr-2">✓</span>
You were detained at Bordeaux Prison (Jan 2022 - present)
</li>
<li className="flex items-start">
<span className="text-red-600 mr-2">✓</span>
You were denied outdoor time or basic rights
</li>
<li className="flex items-start">
<span className="text-red-600 mr-2">✓</span>
You're a family member affected by these conditions
</li>
<li className="flex items-start">
<span className="text-red-600 mr-2">✓</span>
You suffered physical or mental harm as a result
</li>
</ul>
</div>
</div>
</motion.section>
{/* Rights Violations */}
<motion.section
className={`bg-red-50 border border-red-200 rounded-xl shadow-xl ${isMobile ? 'p-6' : 'p-8'}`}
initial={{ opacity: 0, y: 40 }}
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true }}
transition={{ duration: 0.7, delay: 0.2 }}
>
<h3 className={`font-bold text-red-700 mb-6 text-center ${isMobile ? 'text-xl' : 'text-3xl'}`}>Documented Rights Violations</h3>
<div className={`grid gap-6 ${isMobile ? 'grid-cols-1' : 'md:grid-cols-2 lg:grid-cols-4'}`}>
<motion.div
className={`bg-white rounded-lg shadow-md ${isMobile ? 'p-4' : 'p-6'}`}
initial={{ opacity: 0, y: 20 }}
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true }}
transition={{ delay: 0.3 }}
>
<div className={`text-red-600 mb-3 text-center ${isMobile ? 'text-2xl' : 'text-4xl'}`}>🏥</div>
<h4 className={`font-bold text-red-600 mb-3 text-center ${isMobile ? 'text-sm' : 'text-lg'}`}>Healthcare Violations</h4>
<ul className={`text-gray-700 space-y-1 ${isMobile ? 'text-xs' : 'text-sm'}`}>
<li>• Inadequate medical care</li>
<li>• Delayed emergency responses</li>
<li>• Mental health neglect</li>
<li>• Medication denials</li>
</ul>
</motion.div>
<motion.div
className={`bg-white rounded-lg shadow-md ${isMobile ? 'p-4' : 'p-6'}`}
initial={{ opacity: 0, y: 20 }}
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true }}
transition={{ delay: 0.35 }}
>
<div className={`text-red-600 mb-3 text-center ${isMobile ? 'text-2xl' : 'text-4xl'}`}>🏢</div>
<h4 className={`font-bold text-red-600 mb-3 text-center ${isMobile ? 'text-sm' : 'text-lg'}`}>Living Conditions</h4>
<ul className={`text-gray-700 space-y-1 ${isMobile ? 'text-xs' : 'text-sm'}`}>
<li>• Overcrowded cells</li>
<li>• Unsanitary conditions</li>
<li>• Inadequate food</li>
<li>• Poor ventilation</li>
</ul>
</motion.div>
<motion.div
className={`bg-white rounded-lg shadow-md ${isMobile ? 'p-4' : 'p-6'}`}
initial={{ opacity: 0, y: 20 }}
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true }}
transition={{ delay: 0.4 }}
>
<div className={`text-red-600 mb-3 text-center ${isMobile ? 'text-2xl' : 'text-4xl'}`}>👥</div>
<h4 className={`font-bold text-red-600 mb-3 text-center ${isMobile ? 'text-sm' : 'text-lg'}`}>Human Dignity</h4>
<ul className={`text-gray-700 space-y-1 ${isMobile ? 'text-xs' : 'text-sm'}`}>
<li>• Excessive use of force</li>
<li>• Degrading treatment</li>
<li>• Strip searches abuse</li>
<li>• Isolation misuse</li>
</ul>
</motion.div>
<motion.div
className={`bg-white rounded-lg shadow-md ${isMobile ? 'p-4' : 'p-6'}`}
initial={{ opacity: 0, y: 20 }}
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true }}
transition={{ delay: 0.45 }}
>
<div className={`text-red-600 mb-3 text-center ${isMobile ? 'text-2xl' : 'text-4xl'}`}>📞</div>
<h4 className={`font-bold text-red-600 mb-3 text-center ${isMobile ? 'text-sm' : 'text-lg'}`}>Family Connections</h4>
<ul className={`text-gray-700 space-y-1 ${isMobile ? 'text-xs' : 'text-sm'}`}>
<li>• Limited visitation rights</li>
<li>• Restricted phone access</li>
<li>• Mail interference</li>
<li>• Family separation</li>
</ul>
</motion.div>
</div>
</motion.section>
{/* Personal Testimonial */}
<motion.section
className={`bg-gradient-to-br from-blue-50 to-indigo-100 rounded-xl shadow-xl border border-blue-200 ${isMobile ? 'p-6' : 'p-8'}`}
initial={{ opacity: 0, y: 40 }}
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true }}
transition={{ duration: 0.7, delay: 0.25 }}
>
<div className="text-center mb-6">
<h3 className={`font-bold text-blue-800 mb-2 ${isMobile ? 'text-xl' : 'text-3xl'}`}>The Voice From Inside</h3>
<p className={`text-blue-700 ${isMobile ? 'text-sm' : 'text-lg'}`}>Danny's Story - How This All Started</p>
</div>
<div className={`bg-white rounded-lg shadow-md p-6 ${isMobile ? 'text-sm' : 'text-base'}`}>
<blockquote className="italic text-gray-800 mb-4 leading-relaxed">
"I didn't just join a class action — I triggered it. From a cell at Bordeaux, I hand-wrote my own habeas corpus,
had it sworn, and transmitted it to the registry via a correctional officer. No lawyer. No computer. Just my conviction.
I forced the state to appear before the Superior Court — twice. This cause wasn't given to me. I fought for it.
And I did it for every soul still locked up who was told they didn't have the right to resist."
</blockquote>
<div className="flex items-center justify-between">
<div>
<p className="font-semibold text-blue-800">— Danny William Perez</p>
<p className="text-blue-600 text-sm">Lead Representative, Bordeaux Class Action</p>
</div>
<div className="text-right">
<p className="text-sm text-gray-600">Featured in</p>
<p className="font-semibold text-blue-800">Journal de Montréal</p>
</div>
</div>
</div>
<div className={`mt-6 grid gap-4 ${isMobile ? 'grid-cols-1' : 'md:grid-cols-3'}`}>
<div className="bg-blue-50 rounded-lg p-4 text-center">
<div className="text-2xl font-bold text-blue-600 mb-1">143</div>
<div className="text-sm text-blue-700">Days denied outdoor time</div>
</div>
<div className="bg-blue-50 rounded-lg p-4 text-center">
<div className="text-2xl font-bold text-blue-600 mb-1">2</div>
<div className="text-sm text-blue-700">Successful court appearances</div>
</div>
<div className="bg-blue-50 rounded-lg p-4 text-center">
<div className="text-2xl font-bold text-blue-600 mb-1">200+</div>
<div className="text-sm text-blue-700">Potential class members</div>
</div>
</div>
</motion.section>
{/* Legal Foundation */}
<motion.section
className={`bg-white rounded-xl shadow-xl border border-blue-200 ${isMobile ? 'p-6' : 'p-8'}`}
initial={{ opacity: 0, x: 40 }}
whileInView={{ opacity: 1, x: 0 }}
viewport={{ once: true }}
transition={{ duration: 0.7, delay: 0.25 }}
>
<h3 className={`font-bold text-blue-700 mb-6 text-center ${isMobile ? 'text-xl' : 'text-3xl'}`}>Legal Foundation</h3>
<div className={`grid gap-8 ${isMobile ? 'grid-cols-1' : 'md:grid-cols-2'}`}>
<div>
<h4 className={`font-bold text-gray-800 mb-4 ${isMobile ? 'text-base' : 'text-xl'}`}>⚖️ Legal Basis</h4>
<ul className={`space-y-2 ${isMobile ? 'text-sm' : ''}`}>
<li className="flex items-start space-x-2">
<span className="text-blue-600 font-bold">•</span>
<span className="text-gray-700">Violation of Charter rights</span>
</li>
<li className="flex items-start space-x-2">
<span className="text-blue-600 font-bold">•</span>
<span className="text-gray-700">Negligence and inhumane treatment</span>
</li>
<li className="flex items-start space-x-2">
<span className="text-blue-600 font-bold">•</span>
<span className="text-gray-700">Failure to provide adequate healthcare</span>
</li>
<li className="flex items-start space-x-2">
<span className="text-blue-600 font-bold">•</span>
<span className="text-gray-700">Breach of international human rights</span>
</li>
</ul>
</div>
<div>
<h4 className={`font-bold text-gray-800 mb-4 ${isMobile ? 'text-base' : 'text-xl'}`}>🎯 Our Demands</h4>
<ul className={`space-y-2 ${isMobile ? 'text-sm' : ''}`}>
<li className="flex items-start space-x-2">
<span className="text-blue-600 font-bold">•</span>
<span className="text-gray-700">Compensation for victims</span>
</li>
<li className="flex items-start space-x-2">
<span className="text-blue-600 font-bold">•</span>
<span className="text-gray-700">Systemic reforms</span>
</li>
<li className="flex items-start space-x-2">
<span className="text-blue-600 font-bold">•</span>
<span className="text-gray-700">Public acknowledgment of wrongdoing</span>
</li>
<li className="flex items-start space-x-2">
<span className="text-blue-600 font-bold">•</span>
<span className="text-gray-700">Guarantee of humane treatment</span>
</li>
</ul>
</div>
</div>
</motion.section>
{/* How to Join */}
<motion.section
className={`bg-gradient-to-br from-green-50 to-emerald-100 rounded-xl shadow-xl border border-green-200 ${isMobile ? 'p-6' : 'p-8'}`}
initial={{ opacity: 0, y: 40 }}
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true }}
transition={{ duration: 0.7, delay: 0.3 }}
>
<h3 className={`font-bold text-green-800 mb-6 text-center ${isMobile ? 'text-xl' : 'text-3xl'}`}>🚀 Join the Fight for Justice</h3>
<div className={`bg-white rounded-lg shadow-md mb-6 ${isMobile ? 'p-4' : 'p-6'}`}>
<h4 className={`font-bold text-green-700 mb-3 ${isMobile ? 'text-base' : 'text-xl'}`}>✅ Why Join This Class Action?</h4>
<div className={`grid gap-4 ${isMobile ? 'grid-cols-1' : 'md:grid-cols-2'}`}>
<div>
<h5 className="font-semibold text-gray-800 mb-2">💰 Financial Benefits</h5>
<ul className={`text-gray-700 space-y-1 ${isMobile ? 'text-sm' : ''}`}>
<li>• $1,500 per day of rights violations</li>
<li>• No upfront costs or fees</li>
<li>• We only collect if we win</li>
<li>• Potential punitive damages</li>
</ul>
</div>
<div>
<h5 className="font-semibold text-gray-800 mb-2">🎯 Justice & Reform</h5>
<ul className={`text-gray-700 space-y-1 ${isMobile ? 'text-sm' : ''}`}>
<li>• Hold the system accountable</li>
<li>• Force systemic reforms</li>
<li>• Prevent future violations</li>
<li>• Public acknowledgment</li>
</ul>
</div>
</div>
</div>
<div className={`grid gap-4 text-center mb-6 ${isMobile ? 'grid-cols-1' : 'md:grid-cols-3'}`}>
<div className={`bg-green-50 rounded-lg border-2 border-green-200 ${isMobile ? 'p-3' : 'p-4'}`}>
<div className={`font-bold text-green-600 mb-2 ${isMobile ? 'text-lg' : 'text-2xl'}`}>📝 Step 1</div>
<div className={`text-gray-700 ${isMobile ? 'text-xs' : 'text-sm'}`}>Register online (2 minutes)</div>
</div>
<div className={`bg-green-50 rounded-lg border-2 border-green-200 ${isMobile ? 'p-3' : 'p-4'}`}>
<div className={`font-bold text-green-600 mb-2 ${isMobile ? 'text-lg' : 'text-2xl'}`}>📋 Step 2</div>
<div className={`text-gray-700 ${isMobile ? 'text-xs' : 'text-sm'}`}>Complete your application</div>
</div>
<div className={`bg-green-50 rounded-lg border-2 border-green-200 ${isMobile ? 'p-3' : 'p-4'}`}>
<div className={`font-bold text-green-600 mb-2 ${isMobile ? 'text-lg' : 'text-2xl'}`}>⚖️ Step 3</div>
<div className={`text-gray-700 ${isMobile ? 'text-xs' : 'text-sm'}`}>Legal team reviews & contacts you</div>
</div>
</div>
<div className={`text-center ${isMobile ? 'space-y-3' : ''}`}>
<div className={`${isMobile ? 'flex flex-col space-y-3' : 'flex flex-col md:flex-row justify-center gap-4'}`}>
<a href="/auth/signup" className={`bg-green-600 text-white rounded-lg font-bold shadow-lg hover:scale-105 hover:bg-green-700 transition-all duration-200 ${isMobile ? 'px-6 py-3 text-base' : 'px-8 py-4 text-lg'}`}>
🚀 Start Your Application Now
</a>
<a href="/contact" className={`bg-white border-2 border-green-600 text-green-600 rounded-lg font-bold shadow hover:scale-105 hover:bg-green-600 hover:text-white transition-all duration-200 ${isMobile ? 'px-6 py-3 text-base' : 'px-8 py-4 text-lg'}`}>
💬 Talk to Our Legal Team
</a>
</div>
<div className={`bg-green-100 rounded-lg p-3 mt-4 ${isMobile ? 'text-sm' : ''}`}>
<p className="text-green-800 font-semibold">
🔒 100% Confidential • 💰 No Upfront Costs • ⚖️ Expert Legal Team
</p>
</div>
</div>
</motion.section>
{/* Timeline */}
<motion.section
className={`bg-white rounded-xl shadow-xl border border-gray-200 ${isMobile ? 'p-6' : 'p-8'}`}
initial={{ opacity: 0, x: -40 }}
whileInView={{ opacity: 1, x: 0 }}
viewport={{ once: true }}
transition={{ duration: 0.7, delay: 0.35 }}
>
<h3 className={`font-bold text-gray-800 mb-6 text-center ${isMobile ? 'text-xl' : 'text-3xl'}`}>Case Timeline</h3>
<div className="space-y-6">
<div className={`flex items-start space-x-4 border-l-4 border-blue-500 ${isMobile ? 'pl-4' : 'pl-6'}`}>
<div className={`bg-blue-500 text-white rounded-full flex items-center justify-center ${isMobile ? 'w-8 h-8 text-xs' : 'w-10 h-10 text-sm'}`}>1</div>
<div>
<div className={`font-semibold text-gray-800 ${isMobile ? 'text-sm' : ''}`}>January 1, 2022</div>
<div className={`text-gray-600 ${isMobile ? 'text-xs' : 'text-sm'}`}>Period of alleged violations begins</div>
</div>
</div>
<div className={`flex items-start space-x-4 border-l-4 border-green-500 ${isMobile ? 'pl-4' : 'pl-6'}`}>
<div className={`bg-green-500 text-white rounded-full flex items-center justify-center ${isMobile ? 'w-8 h-8 text-xs' : 'w-10 h-10 text-sm'}`}>2</div>
<div>
<div className={`font-semibold text-gray-800 ${isMobile ? 'text-sm' : ''}`}>December 12, 2024</div>
<div className={`text-gray-600 ${isMobile ? 'text-xs' : 'text-sm'}`}>Class action officially authorized by Quebec Superior Court</div>
</div>
</div>
<div className={`flex items-start space-x-4 border-l-4 border-orange-500 ${isMobile ? 'pl-4' : 'pl-6'}`}>
<div className={`bg-orange-500 text-white rounded-full flex items-center justify-center ${isMobile ? 'w-8 h-8 text-xs' : 'w-10 h-10 text-sm'}`}>3</div>
<div>
<div className={`font-semibold text-gray-800 ${isMobile ? 'text-sm' : ''}`}>Now</div>
<div className={`text-gray-600 ${isMobile ? 'text-xs' : 'text-sm'}`}>Registration period for affected individuals</div>
</div>
</div>
</div>
</motion.section>
{/* Contact Information */}
<motion.section
className={`bg-blue-50 border border-blue-200 rounded-xl shadow-xl text-center ${isMobile ? 'p-6' : 'p-8'}`}
initial={{ opacity: 0, y: 40 }}
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true }}
transition={{ duration: 0.7, delay: 0.4 }}
>
<h3 className={`font-bold text-blue-800 mb-4 ${isMobile ? 'text-xl' : 'text-2xl'}`}>Legal Contact Information</h3>
<div className={`text-gray-700 space-y-2 ${isMobile ? 'text-sm' : ''}`}>
<p><strong>Email:</strong> <a href="mailto:adw@adwavocats.com" className="text-blue-600 underline">adw@adwavocats.com</a></p>
<p><strong>Phone:</strong> <a href="tel:+15145278903" className="text-blue-600 underline">(514) 527-8903</a></p>
<p><strong>Case Number:</strong> 500-06-001298-245</p>
</div>
<div className={`mt-6 ${isMobile ? 'space-y-2' : 'flex justify-center space-x-4'}`}>
<a href="https://www.canlii.org/fr/qc/qccs/doc/2024/2024qccs4539/2024qccs4539.html" className={`text-blue-600 underline ${isMobile ? 'block text-sm' : ''}`} target="_blank">View Court Decision</a>
<a href="https://www.registredesactionscollectives.quebec/en/Consulter/ApercuDemande?NoDossier=500-06-001298-245" className={`text-blue-600 underline ${isMobile ? 'block text-sm' : ''}`} target="_blank">Official Registry</a>
</div>
</motion.section>
</div>
</LayoutWithSidebar>
</>
);
};
export default ClassActionPage;