 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, useEffect } from 'react';
import LayoutWithSidebar from '../components/LayoutWithSidebar';
import { motion } from 'framer-motion';
export default function ResourcesPage() {
const [isMobile, setIsMobile] = useState(false);
// Mobile detection
useEffect(() => {
const checkMobile = () => {
setIsMobile(window.innerWidth < 768);
};
checkMobile();
window.addEventListener('resize', checkMobile);
return () => window.removeEventListener('resize', checkMobile);
}, []);
const resources = [
{
category: "Legal Resources",
items: [
{
title: "Quebec Charter of Human Rights and Freedoms",
description: "Learn about your fundamental rights under Quebec law",
link: "https://www.legisquebec.gouv.qc.ca/en/document/cs/C-12",
icon: "βοΈ"
},
{
title: "Canadian Charter of Rights and Freedoms",
description: "Understand your constitutional rights in Canada",
link: "https://laws-lois.justice.gc.ca/eng/const/page-12.html",
icon: "π¨π¦"
},
{
title: "Class Action Registry",
description: "Official Quebec registry for class action lawsuits",
link: "https://www.registredesactionscollectives.quebec/en",
icon: "π"
}
]
},
{
category: "Court Documents",
items: [
{
title: "Court Decision (CanLII)",
description: "Read the full court decision authorizing this class action",
link: "https://www.canlii.org/fr/qc/qccs/doc/2024/2024qccs4539/2024qccs4539.html",
icon: "π"
},
{
title: "Legal Notice",
description: "Official legal notice published in Journal de MontrΓ©al",
link: "https://www.journaldemontreal.com/2025/05/31/avis-legaux---31-mai-2025-1",
icon: "π°"
}
]
},
{
category: "Support Services",
items: [
{
title: "Crisis Intervention",
description: "24/7 crisis support and suicide prevention",
link: "tel:1-866-277-3553",
icon: "π"
},
{
title: "Legal Aid Quebec",
description: "Free legal assistance for low-income individuals",
link: "https://www.aidejuridiqueduquebec.ca/en/",
icon: "π€"
},
{
title: "Mental Health Support",
description: "Mental health resources and counseling services",
link: "https://www.quebec.ca/en/health/finding-a-resource/services-and-resources-directory/mental-health-services",
icon: "π§ "
}
]
},
{
category: "Prison Rights Information",
items: [
{
title: "Correctional Service Canada",
description: "Information about federal correctional services",
link: "https://www.csc-scc.gc.ca/",
icon: "ποΈ"
},
{
title: "Office of the Correctional Investigator",
description: "Independent oversight of federal corrections",
link: "https://www.oci-bec.gc.ca/",
icon: "π"
},
{
title: "Quebec Ombudsman",
description: "Provincial ombudsman for government services",
link: "https://protecteurducitoyen.qc.ca/en",
icon: "π₯"
}
]
}
];
return (
<LayoutWithSidebar>
<div className={`mx-auto space-y-8 ${isMobile ? 'px-2 py-4 max-w-full' : 'max-w-6xl px-4 py-8'}`}>
{/* Header */}
<motion.div
className={`text-center bg-gradient-to-br from-blue-600 to-purple-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 }}
>
<h1 className={`font-extrabold mb-4 drop-shadow-lg ${isMobile ? 'text-2xl' : 'text-4xl'}`}>Resources & Support</h1>
<p className={`leading-relaxed ${isMobile ? 'text-sm' : 'text-lg'}`}>
Find helpful resources, legal information, and support services related to prisoner rights and our class action lawsuit.
</p>
</motion.div>
{/* Resources Grid */}
<div className="space-y-8">
{resources.map((category, categoryIndex) => (
<motion.section
key={category.category}
className={`bg-white 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: categoryIndex * 0.1 }}
>
<h2 className={`font-bold text-gray-800 mb-6 ${isMobile ? 'text-xl' : 'text-2xl'}`}>{category.category}</h2>
<div className={`grid gap-6 ${isMobile ? 'grid-cols-1' : 'md:grid-cols-2 lg:grid-cols-3'}`}>
{category.items.map((item, itemIndex) => (
<motion.div
key={item.title}
className={`bg-gradient-to-br from-gray-50 to-gray-100 rounded-lg shadow-md hover:shadow-lg transition-all duration-200 hover:scale-105 border border-gray-200 ${isMobile ? 'p-4' : 'p-6'}`}
initial={{ opacity: 0, y: 20 }}
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true }}
transition={{ delay: (categoryIndex * 0.1) + (itemIndex * 0.05) }}
>
<div className={`text-center mb-4 ${isMobile ? 'text-2xl' : 'text-4xl'}`}>{item.icon}</div>
<h3 className={`font-bold text-gray-800 mb-3 text-center ${isMobile ? 'text-sm' : 'text-lg'}`}>{item.title}</h3>
<p className={`text-gray-600 mb-4 text-center leading-relaxed ${isMobile ? 'text-xs' : 'text-sm'}`}>{item.description}</p>
<div className="text-center">
<a
href={item.link}
target={item.link.startsWith('http') ? '_blank' : undefined}
rel={item.link.startsWith('http') ? 'noopener noreferrer' : undefined}
className={`inline-block bg-blue-600 text-white rounded-lg font-semibold shadow hover:bg-blue-700 hover:scale-105 transition-all duration-200 ${isMobile ? 'px-4 py-2 text-xs' : 'px-6 py-3 text-sm'}`}
>
{item.link.startsWith('tel:') ? 'Call Now' : 'Learn More'}
</a>
</div>
</motion.div>
))}
</div>
</motion.section>
))}
</div>
{/* Emergency Contact */}
<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.5 }}
>
<h3 className={`font-bold text-red-700 mb-4 ${isMobile ? 'text-xl' : 'text-2xl'}`}>Emergency Contacts</h3>
<div className={`grid gap-4 ${isMobile ? 'grid-cols-1' : 'md:grid-cols-3'}`}>
<div className={`text-center ${isMobile ? 'p-3' : 'p-4'}`}>
<div className={`text-red-600 mb-2 ${isMobile ? 'text-2xl' : 'text-3xl'}`}>π¨</div>
<div className={`font-semibold text-gray-800 ${isMobile ? 'text-sm' : ''}`}>Emergency</div>
<div className={`text-gray-600 ${isMobile ? 'text-xs' : 'text-sm'}`}>
<a href="tel:911" className="text-red-600 underline">911</a>
</div>
</div>
<div className={`text-center ${isMobile ? 'p-3' : 'p-4'}`}>
<div className={`text-red-600 mb-2 ${isMobile ? 'text-2xl' : 'text-3xl'}`}>βοΈ</div>
<div className={`font-semibold text-gray-800 ${isMobile ? 'text-sm' : ''}`}>Crisis Line</div>
<div className={`text-gray-600 ${isMobile ? 'text-xs' : 'text-sm'}`}>
<a href="tel:1-866-277-3553" className="text-red-600 underline">1-866-277-3553</a>
</div>
</div>
<div className={`text-center ${isMobile ? 'p-3' : 'p-4'}`}>
<div className={`text-red-600 mb-2 ${isMobile ? 'text-2xl' : 'text-3xl'}`}>π¬</div>
<div className={`font-semibold text-gray-800 ${isMobile ? 'text-sm' : ''}`}>Text Support</div>
<div className={`text-gray-600 ${isMobile ? 'text-xs' : 'text-sm'}`}>
Text <strong>TALK</strong> to <a href="sms:686868" className="text-red-600 underline">686868</a>
</div>
</div>
</div>
</motion.section>
{/* Call to Action */}
<motion.section
className={`text-center 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.6 }}
>
<h3 className={`font-bold text-green-800 mb-4 ${isMobile ? 'text-xl' : 'text-2xl'}`}>Need More Help?</h3>
<p className={`text-gray-700 mb-6 ${isMobile ? 'text-sm' : ''}`}>
If you can't find the information you're looking for, or need additional support, don't hesitate to contact us.
</p>
<div className={`${isMobile ? 'flex flex-col space-y-3' : 'flex flex-col md:flex-row justify-center gap-4'}`}>
<a href="/contact" 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'}`}>Contact Our Team</a>
<a href="/faq" 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'}`}>View FAQ</a>
</div>
</motion.section>
</div>
</LayoutWithSidebar>
);
}