 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 Head from 'next/head';
import LayoutWithSidebar from '@/components/LayoutWithSidebar';
import { motion } from 'framer-motion';
const ContactPage = () => {
const [form, setForm] = useState({ name: '', email: '', subject: '', message: '' });
const [loading, setLoading] = useState(false);
const [success, setSuccess] = useState(false);
const [error, setError] = useState('');
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 handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
setForm({ ...form, [e.target.name]: e.target.value });
};
const handleSubmit = async (e: React.FormEvent) => {
e.preventDefault();
setLoading(true);
setError('');
setSuccess(false);
// Simulate API call
setTimeout(() => {
setLoading(false);
setSuccess(true);
setForm({ name: '', email: '', subject: '', message: '' });
}, 1200);
};
return (
<LayoutWithSidebar>
<Head>
<title>Contact Us | Liberté Même en Cellule</title>
<meta name="description" content="Contact Liberté Même en Cellule for support, questions, or partnership opportunities." />
</Head>
<motion.div
className={`mx-auto bg-white shadow-xl rounded-2xl border border-primary ${isMobile ? 'max-w-full mx-2 p-6 mt-4 mb-8' : 'max-w-2xl p-8 mt-8 mb-12'}`}
initial={{ opacity: 0, y: 40 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.7 }}
>
<h1 className={`font-bold text-indigo-700 mb-2 text-center ${isMobile ? 'text-2xl' : 'text-3xl'}`}>Contact Us</h1>
<p className={`text-gray-600 mb-8 text-center ${isMobile ? 'text-sm' : ''}`}>We'd love to hear from you. Please fill out the form below and we'll get back to you as soon as possible.</p>
<form onSubmit={handleSubmit} className="space-y-6">
<div>
<label className="block text-sm font-medium text-gray-700 mb-1">Name <span className="text-red-500">*</span></label>
<input
type="text"
name="name"
value={form.name}
onChange={handleChange}
required
className={`mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:ring-indigo-500 focus:border-indigo-500 ${isMobile ? 'px-3 py-3 text-base' : 'px-3 py-2'}`}
/>
</div>
<div>
<label className="block text-sm font-medium text-gray-700 mb-1">Email <span className="text-red-500">*</span></label>
<input
type="email"
name="email"
value={form.email}
onChange={handleChange}
required
className={`mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:ring-indigo-500 focus:border-indigo-500 ${isMobile ? 'px-3 py-3 text-base' : 'px-3 py-2'}`}
/>
</div>
<div>
<label className="block text-sm font-medium text-gray-700 mb-1">Subject <span className="text-red-500">*</span></label>
<input
type="text"
name="subject"
value={form.subject}
onChange={handleChange}
required
className={`mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:ring-indigo-500 focus:border-indigo-500 ${isMobile ? 'px-3 py-3 text-base' : 'px-3 py-2'}`}
/>
</div>
<div>
<label className="block text-sm font-medium text-gray-700 mb-1">Message <span className="text-red-500">*</span></label>
<textarea
name="message"
value={form.message}
onChange={handleChange}
required
rows={isMobile ? 4 : 5}
className={`mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:ring-indigo-500 focus:border-indigo-500 ${isMobile ? 'px-3 py-3 text-base' : 'px-3 py-2'}`}
/>
</div>
{error && <div className={`text-red-600 ${isMobile ? 'text-sm' : 'text-sm'}`}>{error}</div>}
{success && <div className={`text-green-600 ${isMobile ? 'text-sm' : 'text-sm'}`}>Thank you! Your message has been sent.</div>}
<button
type="submit"
disabled={loading}
className={`w-full border border-transparent rounded-md text-white bg-indigo-600 font-semibold shadow-lg hover:scale-105 hover:bg-indigo-700 transition-all duration-200 disabled:opacity-50 ${isMobile ? 'py-3 px-4 text-base' : 'py-3 px-4 text-lg'}`}
>
{loading ? 'Sending...' : 'Send Message'}
</button>
</form>
<div className={`border-t pt-6 text-center ${isMobile ? 'mt-8' : 'mt-10'}`}>
<h2 className={`font-semibold text-indigo-700 mb-2 ${isMobile ? 'text-base' : 'text-lg'}`}>Our Contact Information</h2>
<p className={`text-gray-700 ${isMobile ? 'text-sm' : ''}`}>Email: <a href="mailto:support@gositeme.com" className="text-indigo-600 underline">support@gositeme.com</a></p>
<p className={`text-gray-700 ${isMobile ? 'text-sm' : ''}`}>Phone: <a href="tel:8334674836" className="text-indigo-600 underline">833-467-4836</a></p>
<p className={`text-gray-700 ${isMobile ? 'text-sm' : ''}`}>Liberté Même en Cellule, Montreal, QC, Canada</p>
</div>
</motion.div>
</LayoutWithSidebar>
);
};
export default ContactPage;