 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/ |
import { useState, useEffect } from 'react';
import Link from 'next/link';
import LayoutWithSidebar from '../components/LayoutWithSidebar';
import { motion } from 'framer-motion';
export default function Custom404() {
const [isMobile, setIsMobile] = useState(false);
const [language, setLanguage] = useState<'fr' | 'en'>('fr');
const handleLanguageToggle = () => {
const newLang = language === 'fr' ? 'en' : 'fr';
setLanguage(newLang);
};
// Mobile detection
useEffect(() => {
const checkMobile = () => {
setIsMobile(window.innerWidth < 768);
};
checkMobile();
window.addEventListener('resize', checkMobile);
return () => window.removeEventListener('resize', checkMobile);
}, []);
return (
<LayoutWithSidebar>
<div className={`min-h-screen flex items-center justify-center bg-gradient-to-br from-blue-50 to-indigo-50 ${isMobile ? 'py-4 px-4' : 'py-12 px-4'}`}>
<motion.div
className={`text-center max-w-2xl mx-auto ${isMobile ? 'px-4' : 'px-8'}`}
initial={{ opacity: 0, y: 40 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.7 }}
>
{/* 404 Animation */}
<motion.div
className={`mb-8 ${isMobile ? 'text-6xl' : 'text-8xl'}`}
initial={{ scale: 0.5, opacity: 0 }}
animate={{ scale: 1, opacity: 1 }}
transition={{ duration: 0.5, delay: 0.2 }}
>
<span className="text-primary font-bold">4</span>
<motion.span
className="text-orange-500 font-bold inline-block"
animate={{ rotate: [0, 10, -10, 0] }}
transition={{ duration: 2, repeat: Infinity, repeatDelay: 1 }}
>
0
</motion.span>
<span className="text-primary font-bold">4</span>
</motion.div>
{/* Error Message */}
<motion.div
initial={{ opacity: 0, x: -20 }}
animate={{ opacity: 1, x: 0 }}
transition={{ duration: 0.5, delay: 0.4 }}
>
<h1 className={`font-bold text-gray-900 mb-4 ${isMobile ? 'text-2xl' : 'text-4xl'}`}>
Page Not Found
</h1>
<p className={`text-gray-600 mb-8 leading-relaxed ${isMobile ? 'text-sm' : 'text-lg'}`}>
The page you're looking for doesn't exist or has been moved.
<br className={isMobile ? 'hidden' : ''} />
Let's get you back to where you need to be.
</p>
</motion.div>
{/* Action Buttons */}
<motion.div
className={`flex gap-4 justify-center ${isMobile ? 'flex-col' : 'flex-col sm:flex-row'}`}
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.5, delay: 0.6 }}
>
<Link
href="/"
className={`bg-primary text-white rounded-lg font-bold shadow-lg hover:scale-105 hover:bg-primary-dark transition-all duration-200 ${isMobile ? 'px-6 py-3 text-base' : 'px-8 py-4 text-lg'}`}
>
🏠 Go Home
</Link>
<Link
href={language === 'en' ? '/en/about' : '/about'}
className={`bg-white border-2 border-primary text-primary rounded-lg font-bold shadow hover:scale-105 hover:bg-primary hover:text-white transition-all duration-200 ${isMobile ? 'px-6 py-3 text-base' : 'px-8 py-4 text-lg'}`}
>
📖 About the Case
</Link>
<Link
href={language === 'en' ? '/en/contact' : '/contact'}
className={`bg-white border-2 border-orange-500 text-orange-500 rounded-lg font-bold shadow hover:scale-105 hover:bg-orange-500 hover:text-white transition-all duration-200 ${isMobile ? 'px-6 py-3 text-base' : 'px-8 py-4 text-lg'}`}
>
💬 ''Contact'' Us
</Link>
</motion.div>
{/* Helpful Links */}
<motion.div
className={`mt-12 bg-white rounded-xl shadow-xl border border-gray-200 ${isMobile ? 'p-6' : 'p-8'}`}
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.5, delay: 0.8 }}
>
<h2 className={`font-bold text-gray-900 mb-4 ${isMobile ? 'text-lg' : 'text-xl'}`}>
Popular Pages
</h2>
<div className={`grid gap-4 ${isMobile ? 'grid-cols-1' : 'grid-cols-2 lg:grid-cols-3'}`}>
<Link
href={language === 'en' ? '/en/class-action' : '/class-action'}
className={`text-primary hover:text-primary-dark hover:bg-blue-50 rounded-lg transition-all duration-200 ${isMobile ? 'p-3 text-sm' : 'p-4'}`}
>
<div className={`font-semibold mb-1 ${isMobile ? 'text-sm' : ''}`}>⚖️ Class Action Info</div>
<div className={`text-gray-600 ${isMobile ? 'text-xs' : 'text-sm'}`}>Learn about the lawsuit</div>
</Link>
<Link
href={language === 'en' ? '/en/faq' : '/faq'}
className={`text-primary hover:text-primary-dark hover:bg-blue-50 rounded-lg transition-all duration-200 ${isMobile ? 'p-3 text-sm' : 'p-4'}`}
>
<div className={`font-semibold mb-1 ${isMobile ? 'text-sm' : ''}`}>❓ FAQ</div>
<div className={`text-gray-600 ${isMobile ? 'text-xs' : 'text-sm'}`}>Common questions</div>
</Link>
<Link
href={language === 'en' ? '/en/resources' : '/resources'}
className={`text-primary hover:text-primary-dark hover:bg-blue-50 rounded-lg transition-all duration-200 ${isMobile ? 'p-3 text-sm' : 'p-4'}`}
>
<div className={`font-semibold mb-1 ${isMobile ? 'text-sm' : ''}`}>📚 Resources</div>
<div className={`text-gray-600 ${isMobile ? 'text-xs' : 'text-sm'}`}>Legal resources</div>
</Link>
<Link
href={language === 'en' ? '/en/auth/login' : '/auth/login'}
className={`text-primary hover:text-primary-dark hover:bg-blue-50 rounded-lg transition-all duration-200 ${isMobile ? 'p-3 text-sm' : 'p-4'}`}
>
<div className={`font-semibold mb-1 ${isMobile ? 'text-sm' : ''}`}>🔐 Login</div>
<div className={`text-gray-600 ${isMobile ? 'text-xs' : 'text-sm'}`}>Access your account</div>
</Link>
<Link
href={language === 'en' ? '/en/auth/signup' : '/auth/signup'}
className={`text-primary hover:text-primary-dark hover:bg-blue-50 rounded-lg transition-all duration-200 ${isMobile ? 'p-3 text-sm' : 'p-4'}`}
>
<div className={`font-semibold mb-1 ${isMobile ? 'text-sm' : ''}`}>📝 Sign Up</div>
<div className={`text-gray-600 ${isMobile ? 'text-xs' : 'text-sm'}`}>Join the class action</div>
</Link>
<Link
href={language === 'en' ? '/en/privacy-policy' : '/privacy-policy'}
className={`text-primary hover:text-primary-dark hover:bg-blue-50 rounded-lg transition-all duration-200 ${isMobile ? 'p-3 text-sm' : 'p-4'}`}
>
<div className={`font-semibold mb-1 ${isMobile ? 'text-sm' : ''}`}>🔒 Privacy</div>
<div className={`text-gray-600 ${isMobile ? 'text-xs' : 'text-sm'}`}>Privacy policy</div>
</Link>
</div>
</motion.div>
{/* Emergency ''Contact'' */}
<motion.div
className={`mt-8 bg-red-50 border border-red-200 rounded-xl ${isMobile ? 'p-4' : 'p-6'}`}
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.5, delay: 1.0 }}
>
<h3 className={`font-bold text-red-700 mb-2 ${isMobile ? 'text-base' : 'text-lg'}`}>
Need Immediate Help?
</h3>
<p className={`text-red-600 mb-3 ${isMobile ? 'text-sm' : ''}`}>
If you're looking for legal assistance or have urgent questions about the class action:
</p>
<div className={`text-center space-y-2 ${isMobile ? '' : 'space-y-0 space-x-4 flex justify-center'}`}>
<a
href="mailto:adw@adwavocats.com"
className={`bg-red-600 text-white rounded-lg font-semibold shadow hover:bg-red-700 transition-all duration-200 ${isMobile ? 'block px-4 py-2 text-sm' : 'inline-block px-6 py-3'}`}
>
📧 Email Legal Team
</a>
<a
href="tel:+15145278903"
className={`bg-white border-2 border-red-600 text-red-600 rounded-lg font-semibold shadow hover:bg-red-600 hover:text-white transition-all duration-200 ${isMobile ? 'block px-4 py-2 text-sm' : 'inline-block px-6 py-3'}`}
>
📞 Call (514) 527-8903
</a>
</div>
</motion.div>
</motion.div>
</div>
</LayoutWithSidebar>
);
}