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.quebec/private_html/src/pages/

Upload File : current_dir [ Writeable ] document_root [ Writeable ]

import LayoutWithSidebar from '../components/LayoutWithSidebar';
import { useState, useEffect } from 'react';

const WhoIsConcerned = () => {
  const [isMobile, setIsMobile] = useState(false);

  useEffect(() => {
    const checkMobile = () => {
      setIsMobile(window.innerWidth < 768);
    };
    
    checkMobile();
    window.addEventListener('resize', checkMobile);
    return () => window.removeEventListener('resize', checkMobile);
  }, []);

  return (
    <LayoutWithSidebar>
      <div className={`max-w-3xl mx-auto ${isMobile ? 'px-3 py-6' : 'px-4 py-12'}
        <h1 className={`font-bold mb-6 text-primary ${isMobile ? 'text-2xl' : 'text-4xl'}
        
        <section className={`mb-8 ${isMobile ? 'mb-6' : ''}
          <h2 className={`font-semibold mb-2 text-text ${isMobile ? 'text-lg' : 'text-2xl'}
          <p className={`mb-4 text-text ${isMobile ? 'text-sm' : ''}
          <p className={`text-text-light ${isMobile ? 'text-xs' : 'text-sm'}
        </section>
        
        <section className={`mb-8 ${isMobile ? 'mb-6' : ''}
          <h2 className={`font-semibold mb-2 text-text ${isMobile ? 'text-lg' : 'text-2xl'}
          <ul className={`mb-4 list-disc list-inside text-text ${isMobile ? 'text-sm space-y-1' : ''}
            <li>Incarcerated at Montréal (Bordeaux) Detention Facility between January 1, 2022 and the final judgment</li>
            <li>Denied the legal right to one hour of outdoor time per day</li>
          </ul>
        </section>
        
        <section className={`mb-8 ${isMobile ? 'mb-6' : ''}
          <h2 className={`font-semibold mb-2 text-text ${isMobile ? 'text-lg' : 'text-2xl'}
          <ul className={`mb-4 list-disc list-inside text-text-light ${isMobile ? 'text-sm space-y-1' : ''}
            <li>Individuals in disciplinary isolation</li>
            <li>Individuals assigned to outdoor labor</li>
          </ul>
        </section>
        
        <section className={`mb-8 ${isMobile ? 'mb-6' : ''}
          <h2 className={`font-semibold mb-2 text-text ${isMobile ? 'text-lg' : 'text-2xl'}
          <div className={`space-y-4 ${isMobile ? 'space-y-3' : ''}
            <div className={`bg-gray-50 rounded ${isMobile ? 'p-3' : 'p-4'}
              <div className={`font-semibold text-text mb-1 ${isMobile ? 'text-sm' : ''}
              <div className={`text-text-light ${isMobile ? 'text-xs' : ''}
            </div>
            <div className={`bg-gray-50 rounded ${isMobile ? 'p-3' : 'p-4'}
              <div className={`font-semibold text-text mb-1 ${isMobile ? 'text-sm' : ''}
              <div className={`text-text-light ${isMobile ? 'text-xs' : ''}
            </div>
            <div className={`bg-gray-50 rounded ${isMobile ? 'p-3' : 'p-4'}
              <div className={`font-semibold text-text mb-1 ${isMobile ? 'text-sm' : ''}
              <div className={`text-text-light ${isMobile ? 'text-xs' : ''}
            </div>
          </div>
        </section>
        
        <section className={`mb-8 ${isMobile ? 'mb-6' : ''}
          <h2 className={`font-semibold mb-2 text-text ${isMobile ? 'text-lg' : 'text-2xl'}
          <div className={`space-y-4 ${isMobile ? 'space-y-3' : ''}
            <div className={`bg-gray-50 rounded ${isMobile ? 'p-3' : 'p-4'}
              <div className={`font-semibold text-text mb-1 ${isMobile ? 'text-sm' : ''}
              <div className={`text-text-light ${isMobile ? 'text-xs' : ''}
            </div>
            <div className={`bg-gray-50 rounded ${isMobile ? 'p-3' : 'p-4'}
              <div className={`font-semibold text-text mb-1 ${isMobile ? 'text-sm' : ''}
              <div className={`text-text-light ${isMobile ? 'text-xs' : ''}
            </div>
            <div className={`bg-gray-50 rounded ${isMobile ? 'p-3' : 'p-4'}
              <div className={`font-semibold text-text mb-1 ${isMobile ? 'text-sm' : ''}
              <div className={`text-text-light ${isMobile ? 'text-xs' : ''}
            </div>
            <div className={`bg-gray-50 rounded ${isMobile ? 'p-3' : 'p-4'}
              <div className={`font-semibold text-text mb-1 ${isMobile ? 'text-sm' : ''}
              <div className={`text-text-light ${isMobile ? 'text-xs' : ''}
            </div>
            <div className={`bg-gray-50 rounded ${isMobile ? 'p-3' : 'p-4'}
              <div className={`font-semibold text-text mb-1 ${isMobile ? 'text-sm' : ''}
              <div className={`text-text-light ${isMobile ? 'text-xs' : ''}
            </div>
            <div className={`bg-gray-50 rounded ${isMobile ? 'p-3' : 'p-4'}
              <div className={`font-semibold text-text mb-1 ${isMobile ? 'text-sm' : ''}
              <div className={`text-text-light ${isMobile ? 'text-xs' : ''}
            </div>
          </div>
        </section>
      </div>
    </LayoutWithSidebar>
  );
};

export default WhoIsConcerned;