 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/ |
'use client';
import LayoutWithSidebar from '../components/LayoutWithSidebar';
import SEO from '@/components/SEO';
import Link from 'next/link';
import { useState, useEffect } from 'react';
import { useSession } from 'next-auth/react';
import { motion } from 'framer-motion';
import { usePublicNotifications } from '@/context/PublicNotificationContext';
import PublicCaseFeed from '../components/PublicCaseFeed';
import toast from 'react-hot-toast';
// Newsletter Signup Component
function NewsletterSignupForm({ isMobile }: { isMobile: boolean }) {
const [email, setEmail] = useState('');
const [isSubmitting, setIsSubmitting] = useState(false);
const [language, setLanguage] = useState('en');
const handleSubmit = async (e: React.FormEvent) => {
e.preventDefault();
if (!email || !email.includes('@')) {
toast.error('Please enter a valid email address');
return;
}
setIsSubmitting(true);
try {
const response = await fetch('/api/public/newsletter/subscribe', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({
email,
language,
source: 'homepage'
}),
});
const data = await response.json();
if (response.ok) {
toast.success('🎉 Successfully subscribed to case updates!', {
duration: 5000,
position: 'top-right',
});
setEmail('');
} else {
if (response.status === 409) {
toast.success('✅ You\'re already subscribed to updates!', {
duration: 4000,
position: 'top-right',
});
} else {
toast.error(data.message || 'Failed to subscribe. Please try again.');
}
}
} catch (error) {
toast.error('Network error. Please try again.');
} finally {
setIsSubmitting(false);
}
};
return (
<form onSubmit={handleSubmit} className={`max-w-lg mx-auto ${isMobile ? 'space-y-3' : 'space-y-4'}`}>
<div className={`flex ${isMobile ? 'flex-col space-y-3' : 'flex-col sm:flex-row'} gap-3`}>
<div className="flex-1">
<input
type="email"
value={email}
onChange={(e) => setEmail(e.target.value)}
placeholder="Enter your email address"
className={`w-full rounded-lg border-0 text-gray-900 placeholder-gray-500 focus:ring-2 focus:ring-white ${isMobile ? 'px-4 py-3 text-base' : 'px-5 py-4 text-lg'}`}
disabled={isSubmitting}
required
/>
</div>
<div>
<select
value={language}
onChange={(e) => setLanguage(e.target.value)}
className={`rounded-lg border-0 text-gray-900 focus:ring-2 focus:ring-white ${isMobile ? 'w-full px-4 py-3 text-base' : 'px-4 py-4 text-lg'}`}
disabled={isSubmitting}
>
<option value="en">🇺🇸 English</option>
<option value="fr">🇫🇷 Français</option>
</select>
</div>
<button
type="submit"
disabled={isSubmitting || !email}
className={`bg-white text-blue-600 rounded-lg font-bold shadow-lg hover:bg-gray-100 disabled:opacity-50 disabled:cursor-not-allowed transition-all duration-200 ${isMobile ? 'w-full px-6 py-3 text-base' : 'px-8 py-4 text-lg'}`}
>
{isSubmitting ? '⏳ Subscribing...' : '📧 Subscribe'}
</button>
</div>
</form>
);
}
export default function Home() {
const { data: session } = useSession();
const { updateVisitorBehavior } = usePublicNotifications();
const [showNewAppModal, setShowNewAppModal] = useState(false);
const [isMobile, setIsMobile] = useState(false);
const [liveStats, setLiveStats] = useState({
activeAuctions: 0,
totalBidders: 0,
totalValue: 0,
successRate: 95
});
// Mobile detection
useEffect(() => {
const checkMobile = () => {
setIsMobile(window.innerWidth < 768);
};
checkMobile();
window.addEventListener('resize', checkMobile);
return () => window.removeEventListener('resize', checkMobile);
}, []);
// Track user behavior for personalized notifications
useEffect(() => {
// Mark that user has visited the home page
updateVisitorBehavior({
hasApplied: !!session
});
}, [session, updateVisitorBehavior]);
// Fetch live stats
useEffect(() => {
const fetchLiveStats = async () => {
try {
const response = await fetch('/api/public/cases');
if (response.ok) {
const cases = await response.json();
const activeCases = cases.filter((c: any) => c.competitionType && new Date(c.competitionDeadline) > new Date());
const totalBidders = cases.reduce((sum: number, c: any) => sum + (c.totalBidders || 0), 0);
const totalValue = cases.reduce((sum: number, c: any) => sum + (c.currentHighestBid || 0), 0);
setLiveStats({
activeAuctions: activeCases.length,
totalBidders,
totalValue,
successRate: 95
});
}
} catch (error) {
// console.log('Error fetching live stats:', error);
}
};
fetchLiveStats();
// Refresh stats every 30 seconds
const interval = setInterval(fetchLiveStats, 30000);
return () => clearInterval(interval);
}, []);
// Remove persistent auction banner and show as toast + notification
useEffect(() => {
// Only show once per session
if (typeof window !== 'undefined' && !sessionStorage.getItem('auction_notification_shown')) {
sessionStorage.setItem('auction_notification_shown', 'true');
// Toast popup
toast((t) => (
<div className="flex items-center space-x-3 max-w-md">
<div className="flex-1">
<p className="font-bold text-orange-600">🔥 Live Legal Auctions Active Now!</p>
<p className="text-sm text-gray-700">View and participate in real-time legal case auctions.</p>
</div>
<button
onClick={() => {
toast.dismiss(t.id);
document.getElementById('live-cases')?.scrollIntoView({ behavior: 'smooth' });
}}
className="bg-orange-500 text-white px-3 py-1 rounded text-sm hover:bg-orange-600"
>
View Cases →
</button>
</div>
), {
duration: 7000,
position: 'top-right',
});
// Notification bell entry
if (typeof updateVisitorBehavior === 'function') {
// Add to notificationsShown for this session (simulate persistent notification)
// If you have a notification system, you may want to use a context method instead
// Here, we use a custom notification campaign object
const campaign = {
id: 'live-legal-auctions',
type: 'toast',
title: '🔥 Live Legal Auctions Active Now!',
message: 'View and participate in real-time legal case auctions.',
actionText: 'View Cases →',
actionUrl: '#live-cases',
priority: 'high',
placement: 'top',
language: 'en',
isActive: true,
createdAt: new Date().toISOString(),
};
// Use notification context to show persistent notification
if (typeof window !== 'undefined' && window.usePublicNotifications) {
window.usePublicNotifications.showNotification?.(campaign);
}
}
}
}, [updateVisitorBehavior]);
// Hardcoded content to replace translations
const eligibilityPoints = [
'You were detained at Bordeaux Prison from January 1, 2022 until the final judgment',
'You experienced inhumane conditions or rights violations',
'You wish to join the class action for justice and compensation',
];
const aboutGoals = [
'Expose systemic issues at Bordeaux Prison',
'Seek justice and compensation for victims',
'Promote reform in the prison system',
];
const legalBasis = [
'Violation of Charter rights',
'Negligence and inhumane treatment',
'Failure to provide adequate healthcare',
];
const legalDemands = [
'Compensation for victims',
'Systemic reforms',
'Public acknowledgment of wrongdoing',
];
const joinBenefits = [
'Access to legal support',
'Potential compensation',
'Contribute to justice reform',
];
return (
<LayoutWithSidebar>
<SEO
title="Liberté Même en Cellule – Class Action Lawsuit for Dignity and Justice"
description="Historic class action against Quebec for systemic rights violations at Bordeaux Prison. Learn about the case, your rights, and how to join."
keywords={["class action", "prison rights", "Bordeaux Prison", "human rights", "Quebec justice", "prison reform", "Danny William Perez"]}
/>
<div className={`mx-auto space-y-12 ${isMobile ? 'max-w-full px-2 py-8' : 'max-w-4xl px-4 py-12'}`}>
{/* 🏛️ LIVE CASES SEEKING JUSTICE - MAIN FEATURE */}
<motion.section
className={`${isMobile ? 'px-2' : 'px-0'} bg-gradient-to-br from-gray-50 to-blue-50 py-12`}
initial={{ opacity: 0, y: 40 }}
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true }}
transition={{ duration: 0.8, delay: 0.2 }}
>
<div className="max-w-7xl mx-auto">
<div className="text-center mb-12">
<div className="inline-flex items-center gap-3 bg-white/80 backdrop-blur-sm rounded-full px-6 py-3 mb-6 shadow-lg">
<span className="text-2xl">⚖️</span>
<span className="font-bold text-gray-800">Liberté Même en Cellule</span>
</div>
<h2 className={`font-bold text-gray-900 mb-6 ${isMobile ? 'text-3xl' : 'text-5xl'}`}>Justice for Bordeaux Prison</h2>
<p className={`text-gray-600 mb-8 max-w-3xl mx-auto ${isMobile ? 'text-lg' : 'text-xl'}`}>Historic class action seeking justice for systemic rights violations. <span className="font-semibold text-blue-600">Your rights matter.</span></p>
{/* Competition Stats */}
<div className="grid grid-cols-2 md:grid-cols-4 gap-6 mb-8 max-w-4xl mx-auto">
<motion.div
className="bg-white rounded-lg p-4 shadow-md hover:shadow-lg transition-shadow"
whileHover={{ scale: 1.05 }}
>
<div className="text-2xl font-bold text-blue-600 mb-1">📅</div>
<div className="text-sm font-semibold text-gray-800">Case Filed</div>
<div className="text-xs text-gray-600">2024 QCCS 4539</div>
</motion.div>
<motion.div
className="bg-white rounded-lg p-4 shadow-md hover:shadow-lg transition-shadow"
whileHover={{ scale: 1.05 }}
>
<div className="text-2xl font-bold text-green-600 mb-1">👥</div>
<div className="text-sm font-semibold text-gray-800">Eligible</div>
<div className="text-xs text-gray-600">1000s Affected</div>
</motion.div>
<motion.div
className="bg-white rounded-lg p-4 shadow-md hover:shadow-lg transition-shadow"
whileHover={{ scale: 1.05 }}
>
<div className="text-2xl font-bold text-purple-600 mb-1">⚖️</div>
<div className="text-sm font-semibold text-gray-800">Legal Team</div>
<div className="text-xs text-gray-600">Expert Lawyers</div>
</motion.div>
<motion.div
className="bg-white rounded-lg p-4 shadow-md hover:shadow-lg transition-shadow"
whileHover={{ scale: 1.05 }}
>
<div className="text-2xl font-bold text-orange-600 mb-1">🎯</div>
<div className="text-sm font-semibold text-gray-800">Justice</div>
<div className="text-xs text-gray-600">Compensation</div>
</motion.div>
</div>
{/* Call to Action */}
<div className="flex flex-col sm:flex-row gap-4 justify-center items-center">
<button
onClick={() => document.getElementById('about')?.scrollIntoView({ behavior: 'smooth' })}
className="bg-gradient-to-r from-blue-600 to-purple-600 text-white px-8 py-4 rounded-lg font-bold shadow-lg hover:scale-105 transition-all duration-200 flex items-center gap-2"
>
<span>Learn About the Case</span>
<span>↓</span>
</button>
<Link
href="/auth/signup"
className="bg-white border-2 border-blue-600 text-blue-600 px-8 py-4 rounded-lg font-bold hover:bg-blue-600 hover:text-white transition-all duration-200"
>
Join the Class Action
</Link>
</div>
</div>
</div>
</motion.section>
{/* Public Case Arena - Main Feature */}
<motion.section
id="live-cases"
className={`${isMobile ? 'px-2' : 'px-0'} py-12 bg-white`}
initial={{ opacity: 0, y: 40 }}
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true }}
transition={{ duration: 0.8, delay: 0.3 }}
>
<div className="max-w-7xl mx-auto">
<div className="text-center mb-8">
<h3 className={`font-bold text-gray-900 mb-4 ${isMobile ? 'text-2xl' : 'text-3xl'}`}>
📋 Case Information & Updates
</h3>
<p className={`text-gray-600 ${isMobile ? 'text-sm' : 'text-lg'}`}>
Stay informed about the Liberté Même en Cellule class action and related legal developments.
</p>
</div>
<PublicCaseFeed />
</div>
</motion.section>
{/* What We Do Section */}
<motion.section
className={`bg-gradient-to-br from-blue-50 to-indigo-100 rounded-2xl 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.1 }}
>
<div className="text-center mb-8">
<h3 className={`font-bold text-gray-900 mb-4 ${isMobile ? 'text-2xl' : 'text-3xl'}`}>About Liberté Même en Cellule</h3>
<p className={`text-gray-600 mb-6 ${isMobile ? 'text-base' : 'text-lg'}`}>Fighting for justice and dignity for all affected by Bordeaux Prison violations</p>
<p className={`text-gray-600 max-w-3xl mx-auto ${isMobile ? 'text-sm' : 'text-base'}`}>
We are dedicated to seeking justice for those who suffered inhumane conditions at Bordeaux Prison.
Our mission is to hold the system accountable and secure compensation for victims while driving meaningful reform.
</p>
</div>
<div className={`grid md:grid-cols-2 lg:grid-cols-4 gap-6 ${isMobile ? 'space-y-4' : ''}`}>
<motion.div
className="bg-white rounded-xl p-6 shadow-lg hover:shadow-xl transition-shadow"
initial={{ opacity: 0, y: 20 }}
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true }}
transition={{ delay: 0.2 }}
>
<div className="text-3xl mb-4">⚖️</div>
<h4 className={`font-bold text-gray-900 mb-2 ${isMobile ? 'text-lg' : 'text-xl'}`}>Legal Representation</h4>
<p className={`text-gray-600 ${isMobile ? 'text-sm' : 'text-base'}`}>
Expert legal team fighting for your rights and seeking maximum compensation
</p>
</motion.div>
<motion.div
className="bg-white rounded-xl p-6 shadow-lg hover:shadow-xl transition-shadow"
initial={{ opacity: 0, y: 20 }}
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true }}
transition={{ delay: 0.3 }}
>
<div className="text-3xl mb-4">👥</div>
<h4 className={`font-bold text-gray-900 mb-2 ${isMobile ? 'text-lg' : 'text-xl'}`}>Community Support</h4>
<p className={`text-gray-600 ${isMobile ? 'text-sm' : 'text-base'}`}>
Connect with others affected and share experiences in a supportive environment
</p>
</motion.div>
<motion.div
className="bg-white rounded-xl p-6 shadow-lg hover:shadow-xl transition-shadow"
initial={{ opacity: 0, y: 20 }}
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true }}
transition={{ delay: 0.4 }}
>
<div className="text-3xl mb-4">🔒</div>
<h4 className={`font-bold text-gray-900 mb-2 ${isMobile ? 'text-lg' : 'text-xl'}`}>Privacy Protection</h4>
<p className={`text-gray-600 ${isMobile ? 'text-sm' : 'text-base'}`}>
Your personal information and case details are protected with utmost confidentiality
</p>
</motion.div>
<motion.div
className="bg-white rounded-xl p-6 shadow-lg hover:shadow-xl transition-shadow"
initial={{ opacity: 0, y: 20 }}
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true }}
transition={{ delay: 0.5 }}
>
<div className="text-3xl mb-4">🚀</div>
<h4 className={`font-bold text-gray-900 mb-2 ${isMobile ? 'text-lg' : 'text-xl'}`}>Systemic Change</h4>
<p className={`text-gray-600 ${isMobile ? 'text-sm' : 'text-base'}`}>
Working to prevent future violations and create lasting prison reform
</p>
</motion.div>
</div>
<div className="text-center mt-8">
<Link
href="/auth/signup"
className={`bg-gradient-to-r from-green-600 to-emerald-600 text-white rounded-lg font-bold shadow-lg hover:scale-105 hover:from-green-700 hover:to-emerald-700 transition-all duration-200 ${isMobile ? 'px-6 py-3 text-base' : 'px-8 py-4 text-lg'}`}
>
Join the Class Action
</Link>
</div>
</motion.section>
{/* Public Notice / Press Release */}
<motion.section
className={`bg-red-50 border-l-8 border-red-400 rounded-xl shadow-xl ${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 }}
id="notice"
>
<h3 className={`font-bold text-red-700 mb-2 ${isMobile ? 'text-xl' : 'text-2xl'}`}>Public Notice</h3>
<p className={`mb-2 font-semibold ${isMobile ? 'text-sm' : ''}`}>Perez c. Procureur général du Québec – 2024 QCCS 4539</p>
<p className={`mb-2 ${isMobile ? 'text-sm' : ''}`}>A class action has been authorized for systemic rights violations at Bordeaux Prison. If you were detained from January 1, 2022 until the final judgment, you may be eligible to join.</p>
<ul className={`list-disc list-inside mb-2 ${isMobile ? 'text-sm space-y-1' : ''}`}>
{eligibilityPoints.map((point, index) => (
<motion.li key={index} initial={{ opacity: 0, x: -20 }} whileInView={{ opacity: 1, x: 0 }} viewport={{ once: true }} transition={{ delay: 0.2 + index * 0.1 }}>{point}</motion.li>
))}
</ul>
<p className={`mb-2 ${isMobile ? 'text-sm' : ''}`}>Contact: <a href="mailto:adw@adwavocats.com" className="text-blue-600 underline">adw@adwavocats.com</a> | (514) 527-8903</p>
</motion.section>
{/* About the Case */}
<motion.section
className={`bg-white rounded-xl shadow-xl border border-primary ${isMobile ? 'p-6' : 'p-8'}`}
initial={{ opacity: 0, x: 40 }}
whileInView={{ opacity: 1, x: 0 }}
viewport={{ once: true }}
transition={{ duration: 0.7, delay: 0.15 }}
id="about"
>
<h3 className={`font-bold text-primary mb-4 ${isMobile ? 'text-2xl' : 'text-3xl'}`}>About the Case</h3>
<p className={`mb-4 ${isMobile ? 'text-sm' : ''}`}>This class action seeks justice for those who suffered inhumane conditions at Bordeaux Prison and aims to drive meaningful reform.</p>
<ul className={`list-disc list-inside mb-4 ${isMobile ? 'text-sm space-y-1' : ''}`}>
{aboutGoals.map((point, index) => (
<motion.li key={index} initial={{ opacity: 0, x: 20 }} whileInView={{ opacity: 1, x: 0 }} viewport={{ once: true }} transition={{ delay: 0.2 + index * 0.1 }}><b>{point}</b></motion.li>
))}
</ul>
<blockquote className={`italic text-primary border-l-4 border-primary pl-4 mb-4 ${isMobile ? 'text-base' : 'text-lg'}`}>
"Justice is not a privilege, it is a right."<br/>
<span className="block mt-2 font-semibold">Danny William Perez</span>
</blockquote>
</motion.section>
{/* Founder's Story */}
<motion.section
className={`bg-gray-50 rounded-xl shadow-xl border border-gray-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.2 }}
>
<h3 className={`font-bold text-primary mb-2 ${isMobile ? 'text-xl' : 'text-2xl'}`}>Founder's Story</h3>
<p className={`mb-2 font-semibold ${isMobile ? 'text-sm' : ''}`}>Danny William Perez</p>
<p className={`mb-4 ${isMobile ? 'text-sm' : ''}`}>After experiencing the harsh realities of Bordeaux Prison, Danny William Perez became a voice for justice and reform.<br/><span className="block mt-2 font-semibold">Danny William Perez</span></p>
</motion.section>
{/* Statistics & Impact */}
<motion.section
className={`bg-gradient-to-r from-red-600 to-orange-600 text-white rounded-xl shadow-xl ${isMobile ? 'p-6' : 'p-8'}`}
initial={{ opacity: 0, scale: 0.95 }}
whileInView={{ opacity: 1, scale: 1 }}
viewport={{ once: true }}
transition={{ duration: 0.7, delay: 0.25 }}
>
<h3 className={`font-bold mb-6 text-center ${isMobile ? 'text-2xl' : 'text-3xl'}`}>The Impact of Systemic Violations</h3>
<div className={`gap-8 text-center ${isMobile ? 'grid grid-cols-1 space-y-4' : 'grid md:grid-cols-3'}`}>
<motion.div
className={`bg-white/10 rounded-lg backdrop-blur-sm ${isMobile ? 'p-4' : 'p-6'}`}
initial={{ opacity: 0, y: 20 }}
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true }}
transition={{ delay: 0.3 }}
>
<div className={`font-bold mb-2 ${isMobile ? 'text-3xl' : 'text-4xl'}`}>3+</div>
<div className={`${isMobile ? 'text-base' : 'text-lg'}`}>Years of Documented Violations</div>
<div className={`opacity-80 mt-2 ${isMobile ? 'text-xs' : 'text-sm'}`}>January 1, 2022 - Final Judgment</div>
</motion.div>
<motion.div
className={`bg-white/10 rounded-lg backdrop-blur-sm ${isMobile ? 'p-4' : 'p-6'}`}
initial={{ opacity: 0, y: 20 }}
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true }}
transition={{ delay: 0.4 }}
>
<div className={`font-bold mb-2 ${isMobile ? 'text-3xl' : 'text-4xl'}`}>1000s</div>
<div className={`${isMobile ? 'text-base' : 'text-lg'}`}>Potentially Affected Individuals</div>
<div className={`opacity-80 mt-2 ${isMobile ? 'text-xs' : 'text-sm'}`}>Detainees & Families</div>
</motion.div>
<motion.div
className={`bg-white/10 rounded-lg backdrop-blur-sm ${isMobile ? 'p-4' : 'p-6'}`}
initial={{ opacity: 0, y: 20 }}
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true }}
transition={{ delay: 0.5 }}
>
<div className={`font-bold mb-2 ${isMobile ? 'text-3xl' : 'text-4xl'}`}>24/7</div>
<div className={`${isMobile ? 'text-base' : 'text-lg'}`}>Rights Violations</div>
<div className="opacity-80 mt-2 text-xs">Continuous Impact</div>
</motion.div>
</div>
</motion.section>
{/* Timeline of Events */}
<motion.section
className={`bg-white rounded-xl shadow-xl border border-primary ${isMobile ? 'p-6' : 'p-8'}`}
initial={{ opacity: 0, x: -40 }}
whileInView={{ opacity: 1, x: 0 }}
viewport={{ once: true }}
transition={{ duration: 0.7, delay: 0.3 }}
>
<h3 className={`font-bold text-primary mb-6 text-center ${isMobile ? 'text-2xl' : 'text-3xl'}`}>Case Timeline</h3>
<div className="space-y-6">
<motion.div
className={`flex items-start space-x-4 border-l-4 border-primary ${isMobile ? 'pl-4' : 'pl-6'}`}
initial={{ opacity: 0, x: -20 }}
whileInView={{ opacity: 1, x: 0 }}
viewport={{ once: true }}
transition={{ delay: 0.35 }}
>
<div className="bg-primary text-white rounded-full w-8 h-8 flex items-center justify-center font-bold text-sm">1</div>
<div>
<div className="font-bold text-lg">January 1, 2022 - Final Judgment</div>
<div className="text-gray-600">Systemic rights violations documented at Bordeaux Prison</div>
</div>
</motion.div>
<motion.div
className={`flex items-start space-x-4 border-l-4 border-primary ${isMobile ? 'pl-4' : 'pl-6'}`}
initial={{ opacity: 0, x: -20 }}
whileInView={{ opacity: 1, x: 0 }}
viewport={{ once: true }}
transition={{ delay: 0.4 }}
>
<div className="bg-primary text-white rounded-full w-8 h-8 flex items-center justify-center font-bold text-sm">2</div>
<div>
<div className="font-bold text-lg">December 12, 2024</div>
<div className="text-gray-600">Class action authorized by Superior Court of Quebec (Case: 2024 QCCS 4539)</div>
</div>
</motion.div>
<motion.div
className={`flex items-start space-x-4 border-l-4 border-primary ${isMobile ? 'pl-4' : 'pl-6'}`}
initial={{ opacity: 0, x: -20 }}
whileInView={{ opacity: 1, x: 0 }}
viewport={{ once: true }}
transition={{ delay: 0.45 }}
>
<div className="bg-primary text-white rounded-full w-8 h-8 flex items-center justify-center font-bold text-sm">3</div>
<div>
<div className="font-bold text-lg">March 12, 2025</div>
<div className="text-gray-600">Introductory application filed with the Court</div>
</div>
</motion.div>
<motion.div
className={`flex items-start space-x-4 border-l-4 border-green-500 ${isMobile ? 'pl-4' : 'pl-6'}`}
initial={{ opacity: 0, x: -20 }}
whileInView={{ opacity: 1, x: 0 }}
viewport={{ once: true }}
transition={{ delay: 0.5 }}
>
<div className="bg-green-500 text-white rounded-full w-8 h-8 flex items-center justify-center font-bold text-sm">4</div>
<div>
<div className="font-bold text-lg">May 20, 2025</div>
<div className="text-gray-600">Court authorized publication of notice to members</div>
</div>
</motion.div>
<motion.div
className={`flex items-start space-x-4 border-l-4 border-blue-500 ${isMobile ? 'pl-4' : 'pl-6'}`}
initial={{ opacity: 0, x: -20 }}
whileInView={{ opacity: 1, x: 0 }}
viewport={{ once: true }}
transition={{ delay: 0.55 }}
>
<div className="bg-blue-500 text-white rounded-full w-8 h-8 flex items-center justify-center font-bold text-sm">5</div>
<div>
<div className="font-bold text-lg text-blue-600">NOW</div>
<div className="text-gray-600 font-semibold">Registration open for eligible participants</div>
</div>
</motion.div>
</div>
</motion.section>
{/* Rights Violations Details */}
<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.35 }}
>
<h3 className={`font-bold text-red-700 mb-6 text-center ${isMobile ? 'text-xl' : 'text-2xl'}`}>Documented Rights Violations</h3>
<div className={`grid md:grid-cols-2 gap-6 ${isMobile ? 'space-y-4' : ''}`}>
<motion.div
className={`bg-white rounded-lg p-6 shadow-md ${isMobile ? 'p-4' : ''}`}
initial={{ opacity: 0, x: -20 }}
whileInView={{ opacity: 1, x: 0 }}
viewport={{ once: true }}
transition={{ delay: 0.4 }}
>
<h4 className={`text-xl font-bold text-red-600 mb-3 ${isMobile ? 'text-base' : ''}`}>🏥 Healthcare Violations</h4>
<ul className={`space-y-2 text-gray-700 ${isMobile ? 'text-sm' : ''}`}>
<li>• Inadequate medical care</li>
<li>• Delayed emergency responses</li>
<li>• Lack of mental health support</li>
<li>• Substandard medical facilities</li>
</ul>
</motion.div>
<motion.div
className={`bg-white rounded-lg p-6 shadow-md ${isMobile ? 'p-4' : ''}`}
initial={{ opacity: 0, x: 20 }}
whileInView={{ opacity: 1, x: 0 }}
viewport={{ once: true }}
transition={{ delay: 0.45 }}
>
<h4 className={`text-xl font-bold text-red-600 mb-3 ${isMobile ? 'text-base' : ''}`}>🏢 Living Conditions</h4>
<ul className={`space-y-2 text-gray-700 ${isMobile ? 'text-sm' : ''}`}>
<li>• Overcrowded cells</li>
<li>• Unsanitary conditions</li>
<li>• Inadequate food quality</li>
<li>• Poor ventilation and lighting</li>
</ul>
</motion.div>
<motion.div
className={`bg-white rounded-lg p-6 shadow-md ${isMobile ? 'p-4' : ''}`}
initial={{ opacity: 0, x: -20 }}
whileInView={{ opacity: 1, x: 0 }}
viewport={{ once: true }}
transition={{ delay: 0.5 }}
>
<h4 className={`text-xl font-bold text-red-600 mb-3 ${isMobile ? 'text-base' : ''}`}>👥 Human Dignity</h4>
<ul className={`space-y-2 text-gray-700 ${isMobile ? 'text-sm' : ''}`}>
<li>• Excessive use of force</li>
<li>• Degrading treatment</li>
<li>• Violation of privacy rights</li>
<li>• Discriminatory practices</li>
</ul>
</motion.div>
<motion.div
className={`bg-white rounded-lg p-6 shadow-md ${isMobile ? 'p-4' : ''}`}
initial={{ opacity: 0, x: 20 }}
whileInView={{ opacity: 1, x: 0 }}
viewport={{ once: true }}
transition={{ delay: 0.55 }}
>
<h4 className={`text-xl font-bold text-red-600 mb-3 ${isMobile ? 'text-base' : ''}`}>📞 Family Connections</h4>
<ul className={`space-y-2 text-gray-700 ${isMobile ? 'text-sm' : ''}`}>
<li>• Limited visitation rights</li>
<li>• Restricted phone access</li>
<li>• Barriers to family communication</li>
<li>• Inadequate visiting facilities</li>
</ul>
</motion.div>
</div>
</motion.section>
{/* Call to Action - Urgency */}
<motion.section
className={`bg-gradient-to-r from-orange-500 to-red-600 text-white rounded-xl shadow-xl ${isMobile ? 'p-6' : 'p-8'}`}
initial={{ opacity: 0, scale: 0.95 }}
whileInView={{ opacity: 1, scale: 1 }}
viewport={{ once: true }}
transition={{ duration: 0.7, delay: 0.4 }}
>
<h3 className={`font-bold mb-4 ${isMobile ? 'text-2xl' : 'text-3xl'}`}>Time is Critical</h3>
<p className={`text-xl mb-6 ${isMobile ? 'text-base' : ''}`}>Don't let your rights be forgotten. Join the fight for justice and dignity.</p>
<div className={`bg-white/10 rounded-lg p-6 mb-6 ${isMobile ? 'space-y-2' : ''}`}>
<p className={`text-lg font-semibold ${isMobile ? 'text-base' : ''}`}>⚠️ Important Deadlines Apply</p>
<p className={`mt-2 ${isMobile ? 'text-sm' : ''}`}>Register now to ensure your voice is heard in this historic case</p>
</div>
<div className={`flex flex-col md:flex-row justify-center gap-4 ${isMobile ? 'space-y-4' : ''}`}>
{session ? (
<Link
href="/user/dashboard"
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 w-full' : 'px-8 py-4 text-lg'}`}
>
Register Now - It's Free
</Link>
) : (
<Link
href="/auth/login?callbackUrl=/user/dashboard"
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 w-full' : 'px-8 py-4 text-lg'}`}
>
Register Now - It's Free
</Link>
)}
<a
href="mailto:adw@adwavocats.com"
className={`bg-transparent border-2 border-white rounded-lg font-bold hover:bg-white hover:text-red-600 transition-all duration-200 ${isMobile ? 'px-6 py-3 text-base w-full' : 'px-8 py-4 text-lg'}`}
>
Get Legal Advice
</a>
</div>
</motion.section>
{/* Testimonials & Stories */}
<motion.section
className={`bg-gradient-to-br from-blue-50 to-indigo-100 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.45 }}
>
<h3 className={`font-bold text-center text-blue-800 mb-8 ${isMobile ? 'text-xl' : 'text-2xl'}`}>Voices for Justice</h3>
<div className={`grid md:grid-cols-2 gap-8 ${isMobile ? 'space-y-4' : ''}`}>
<motion.div
className={`bg-white rounded-lg p-6 shadow-lg border-l-4 border-blue-500 ${isMobile ? 'p-4' : ''}`}
initial={{ opacity: 0, x: -20 }}
whileInView={{ opacity: 1, x: 0 }}
viewport={{ once: true }}
transition={{ delay: 0.5 }}
>
<blockquote className={`text-lg italic text-gray-700 mb-4 ${isMobile ? 'text-base' : ''}`}>
"No one should have to endure what we experienced. This class action gives us hope that change is possible and that our suffering was not in vain."
</blockquote>
<div className={`text-sm text-gray-500 ${isMobile ? 'text-xs' : ''}`}>— Former Bordeaux detainee</div>
</motion.div>
<motion.div
className={`bg-white rounded-lg p-6 shadow-lg border-l-4 border-green-500 ${isMobile ? 'p-4' : ''}`}
initial={{ opacity: 0, x: 20 }}
whileInView={{ opacity: 1, x: 0 }}
viewport={{ once: true }}
transition={{ delay: 0.55 }}
>
<blockquote className={`text-lg italic text-gray-700 mb-4 ${isMobile ? 'text-base' : ''}`}>
"My son's rights were violated daily. This lawsuit represents hope for all families who watched their loved ones suffer in silence."
</blockquote>
<div className={`text-sm text-gray-500 ${isMobile ? 'text-xs' : ''}`}>— Family member of detainee</div>
</motion.div>
</div>
<motion.div
className={`text-center mt-8 bg-white rounded-lg p-6 shadow-md ${isMobile ? 'p-4' : ''}`}
initial={{ opacity: 0, y: 20 }}
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true }}
transition={{ delay: 0.6 }}
>
<p className={`text-lg font-semibold text-gray-800 mb-2 ${isMobile ? 'text-base' : ''}`}>Your Story Matters</p>
<p className={`text-gray-600 ${isMobile ? 'text-sm' : ''}`}>Every voice strengthens our case for justice and reform. Join us in creating lasting change.</p>
</motion.div>
</motion.section>
{/* Legal Basis & Demands - Enhanced */}
<motion.section
className={`bg-white rounded-xl shadow-xl border border-primary ${isMobile ? 'p-6' : 'p-8'}`}
initial={{ opacity: 0, y: 40 }}
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true }}
transition={{ duration: 0.7, delay: 0.5 }}
>
<h3 className={`font-bold text-primary mb-6 text-center ${isMobile ? 'text-2xl' : 'text-3xl'}`}>Legal Foundation</h3>
<div className={`grid md:grid-cols-2 gap-8 ${isMobile ? 'space-y-4' : ''}`}>
<div>
<h4 className={`text-xl font-bold text-gray-800 mb-4 ${isMobile ? 'text-base' : ''}`}>⚖️ Legal Basis</h4>
<ul className={`space-y-2 text-gray-700 ${isMobile ? 'text-sm' : ''}`}>
{legalBasis.map((point, index) => (
<motion.li
key={index}
className={`flex items-start space-x-2 ${isMobile ? 'text-sm' : ''}`}
initial={{ opacity: 0, x: -20 }}
whileInView={{ opacity: 1, x: 0 }}
viewport={{ once: true }}
transition={{ delay: 0.55 + index * 0.1 }}
>
<span className="text-primary">•</span>
<span className="font-medium">{point}</span>
</motion.li>
))}
</ul>
</div>
<div>
<h4 className={`text-xl font-bold text-gray-800 mb-4 ${isMobile ? 'text-base' : ''}`}>🎯 Our Demands</h4>
<ul className={`space-y-2 text-gray-700 ${isMobile ? 'text-sm' : ''}`}>
{legalDemands.map((point, index) => (
<motion.li
key={index}
className={`flex items-start space-x-2 ${isMobile ? 'text-sm' : ''}`}
initial={{ opacity: 0, x: 20 }}
whileInView={{ opacity: 1, x: 0 }}
viewport={{ once: true }}
transition={{ delay: 0.55 + index * 0.1 }}
>
<span className="text-primary">•</span>
<span className="font-medium">{point}</span>
</motion.li>
))}
</ul>
</div>
</div>
</motion.section>
{/* How to Join - Enhanced */}
<motion.section
className={`bg-gradient-to-br from-green-50 to-emerald-100 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.55 }}
>
<h3 className={`font-bold text-green-800 mb-6 text-center ${isMobile ? 'text-2xl' : 'text-3xl'}`}>How to Join the Class Action</h3>
<div className={`bg-white rounded-lg p-6 mb-6 shadow-md ${isMobile ? 'p-4' : ''}`}>
<p className={`text-lg text-gray-700 mb-4 ${isMobile ? 'text-base' : ''}`}>
<strong>Eligibility:</strong> If you or someone you know was detained at Bordeaux Prison from January 1, 2022 until the final judgment, you may be eligible to join this historic class action.
</p>
<div className={`grid md:grid-cols-3 gap-4 text-center ${isMobile ? 'space-y-4' : ''}`}>
<div className={`bg-green-50 rounded-lg p-4 ${isMobile ? 'p-2' : ''}`}>
<div className={`text-2xl font-bold text-green-600 mb-2 ${isMobile ? 'text-base' : ''}`}>Step 1</div>
<div className={`text-sm text-gray-700 ${isMobile ? 'text-xs' : ''}`}>Register on our platform</div>
</div>
<div className={`bg-green-50 rounded-lg p-4 ${isMobile ? 'p-2' : ''}`}>
<div className={`text-2xl font-bold text-green-600 mb-2 ${isMobile ? 'text-base' : ''}`}>Step 2</div>
<div className={`text-sm text-gray-700 ${isMobile ? 'text-xs' : ''}`}>Complete your application</div>
</div>
<div className={`bg-green-50 rounded-lg p-4 ${isMobile ? 'p-2' : ''}`}>
<div className={`text-2xl font-bold text-green-600 mb-2 ${isMobile ? 'text-base' : ''}`}>Step 3</div>
<div className={`text-sm text-gray-700 ${isMobile ? 'text-xs' : ''}`}>Our legal team reviews your case</div>
</div>
</div>
</div>
<div className={`flex flex-col md:flex-row justify-center gap-4 mb-6 ${isMobile ? 'space-y-4' : ''}`}>
{session ? (
<Link
href="/user/dashboard"
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 w-full' : 'px-8 py-4 text-lg'}`}
>
Join the Class Action
</Link>
) : (
<Link
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 w-full' : 'px-8 py-4 text-lg'}`}
>
Join the Class Action
</Link>
)}
<a
href="mailto:adw@adwavocats.com"
className={`bg-white border-2 border-green-600 rounded-lg font-bold hover:bg-green-600 hover:text-white transition-all duration-200 ${isMobile ? 'px-6 py-3 text-base w-full' : 'px-8 py-4 text-lg'}`}
>
Contact Legal Team
</a>
</div>
<div className={`bg-white rounded-lg p-6 shadow-md ${isMobile ? 'p-4' : ''}`}>
<h4 className={`text-xl font-bold text-green-800 mb-3 ${isMobile ? 'text-base' : ''}`}>Benefits of Joining</h4>
<ul className={`grid md:grid-cols-3 gap-4 text-gray-700 ${isMobile ? 'text-sm space-y-1' : ''}`}>
{joinBenefits.map((point, index) => (
<motion.li
key={index}
className={`flex items-start space-x-2 ${isMobile ? 'text-sm' : ''}`}
initial={{ opacity: 0, y: 20 }}
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true }}
transition={{ delay: 0.6 + index * 0.1 }}
>
<span className="text-green-600 text-xl">✓</span>
<span>{point}</span>
</motion.li>
))}
</ul>
</div>
</motion.section>
{/* Newsletter Signup Section */}
<motion.section
className={`bg-gradient-to-r from-blue-600 to-purple-600 text-white 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.6 }}
>
<div className="text-center mb-6">
<h3 className={`font-bold mb-3 ${isMobile ? 'text-xl' : 'text-2xl'}`}>
📧 Stay Informed About the Case
</h3>
<p className={`text-blue-100 mb-6 ${isMobile ? 'text-sm' : 'text-lg'}`}>
Get important updates, legal developments, and case progress delivered to your inbox
</p>
</div>
<NewsletterSignupForm isMobile={isMobile} />
<div className={`grid md:grid-cols-3 gap-4 mt-6 text-center ${isMobile ? 'space-y-2' : ''}`}>
<div className={`bg-white/10 rounded-lg backdrop-blur-sm ${isMobile ? 'p-3' : 'p-4'}`}>
<div className={`font-bold mb-1 ${isMobile ? 'text-base' : 'text-lg'}`}>🔔 Legal Updates</div>
<div className={`text-blue-100 ${isMobile ? 'text-xs' : 'text-sm'}`}>Important case developments</div>
</div>
<div className={`bg-white/10 rounded-lg backdrop-blur-sm ${isMobile ? 'p-3' : 'p-4'}`}>
<div className={`font-bold mb-1 ${isMobile ? 'text-base' : 'text-lg'}`}>📰 News & Press</div>
<div className={`text-blue-100 ${isMobile ? 'text-xs' : 'text-sm'}`}>Media coverage and announcements</div>
</div>
<div className={`bg-white/10 rounded-lg backdrop-blur-sm ${isMobile ? 'p-3' : 'p-4'}`}>
<div className={`font-bold mb-1 ${isMobile ? 'text-base' : 'text-lg'}`}>⚖️ Court Proceedings</div>
<div className={`text-blue-100 ${isMobile ? 'text-xs' : 'text-sm'}`}>Hearing dates and outcomes</div>
</div>
</div>
<div className={`text-center mt-4 ${isMobile ? 'text-xs' : 'text-sm'} text-blue-100`}>
✓ No spam • ✓ Unsubscribe anytime • ✓ Privacy protected
</div>
</motion.section>
{/* Hashtags / Social Awareness */}
<motion.section
className={`text-center pt-8 ${isMobile ? 'space-y-2' : ''}`}
initial={{ opacity: 0, scale: 0.95 }}
whileInView={{ opacity: 1, scale: 1 }}
viewport={{ once: true }}
transition={{ duration: 0.7, delay: 0.35 }}
>
<div className={`text-lg font-semibold text-gray-600 mb-2 ${isMobile ? 'text-base' : ''}`}>#prisonreform #justice #humanrights</div>
<div className={`text-sm text-gray-400 ${isMobile ? 'text-xs' : ''}`}>Share this page to help raise awareness for justice and dignity.</div>
</motion.section>
</div>
</LayoutWithSidebar>
);
}