 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/.cursor-server/data/User/History/-5e132e90/ |
'use client';
import React, { useState, useEffect } from 'react';
import Head from 'next/head';
import Link from 'next/link';
import { motion } from 'framer-motion';
import {
Shield, Users, Building2, Award, CheckCircle,
MapPin, Phone, Mail, ArrowRight, Star,
Scale, Gavel, Briefcase, Globe, MessageSquare, FileText, Calendar, Video, Bell,
CreditCard, BarChart3, Network, Search, Handshake
} from 'lucide-react';
import VerifiedLawyerCTA from '@/components/VerifiedLawyerCTA';
import { useLanguage } from '@/context/LanguageContext';
const HomePage: React.FC = () => {
const { language, toggleLanguage } = useLanguage();
// Debug logging
useEffect(() => {
console.log('🏠 HomePage component mounted');
console.log('🌍 Current language:', language);
console.log('🔍 Content object:', content);
}, [language]);
// Bilingual content
const content = {
fr: {
title: "avocat.quebec - Le réseau juridique du Québec",
description: "La plateforme officielle pour les avocats vérifiés du Barreau du Québec. Connectez-vous avec des professionnels juridiques de confiance.",
keywords: "avocat, québec, barreau, droit, juridique, avocats vérifiés",
nav: {
businessProfiles: "Cabinets d'avocats",
judicialDirectory: "Répertoire judiciaire",
liveCases: "Dossiers en direct",
about: "À propos",
login: "Connexion",
join: "Rejoindre"
},
hero: {
title: "avocat.quebec",
subtitle: "Le réseau juridique officiel du Québec",
description: "Connectez-vous avec des avocats vérifiés par le Barreau du Québec. Trouvez l'expertise juridique dont vous avez besoin, en toute confiance.",
findLawyer: "Trouver un avocat",
becomeLawyer: "Devenir avocat vérifié"
},
features: {
title: "Pourquoi choisir avocat.quebec ?",
subtitle: "La plateforme de confiance pour la communauté juridique québécoise"
}
},
en: {
title: "avocat.quebec - Quebec's Legal Network",
description: "The official platform for verified lawyers from the Quebec Bar. Connect with trusted legal professionals.",
keywords: "lawyer, quebec, bar, legal, law, verified lawyers",
nav: {
businessProfiles: "Law Firms",
judicialDirectory: "Judicial Directory",
liveCases: "Live Cases",
about: "About",
login: "Login",
join: "Join"
},
hero: {
title: "avocat.quebec",
subtitle: "The Official Legal Network of Quebec",
description: "Connect with lawyers verified by the Quebec Bar. Find the legal expertise you need, with confidence.",
findLawyer: "Find a Lawyer",
becomeLawyer: "Become a Verified Lawyer"
},
features: {
title: "Why choose avocat.quebec?",
subtitle: "The trusted platform for Quebec's legal community"
}
}
};
const t = content[language];
console.log('🎯 Rendering with language:', language);
console.log('📝 Hero title:', t.hero.title);
return (
<>
<Head>
<title>{t.title}</title>
<meta name="description" content={t.description} />
<meta name="keywords" content={t.keywords} />
</Head>
<div className="min-h-screen bg-gradient-to-br from-blue-50 via-white to-purple-50 dark:from-gray-900 dark:via-gray-800 dark:to-gray-900">
{/* Header */}
<header className="bg-white/80 dark:bg-gray-800/80 backdrop-blur-sm border-b border-gray-200 dark:border-gray-700 sticky top-0 z-50">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div className="flex justify-between items-center py-4">
<div className="flex items-center">
<Shield className="h-8 w-8 text-blue-600 mr-3" />
<span className="text-2xl font-bold text-gray-900 dark:text-white">
avocat.quebec
</span>
</div>
<nav className="hidden md:flex space-x-8">
<Link href="/business-profiles" className="text-gray-600 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition-colors">
{t.nav.businessProfiles}
</Link>
<Link href="/judicial-directory" className="text-gray-600 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition-colors">
{t.nav.judicialDirectory}
</Link>
<Link href="/live-cases" className="text-gray-600 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition-colors">
{t.nav.liveCases}
</Link>
<Link href="/about" className="text-gray-600 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition-colors">
{t.nav.about}
</Link>
</nav>
<div className="flex items-center space-x-4">
{/* Language Switcher */}
<button
onClick={toggleLanguage}
className="text-blue-600 border border-blue-600 rounded px-2 py-1 font-semibold hover:bg-blue-50 transition-colors"
>
{language === 'fr' ? 'EN' : 'FR'}
</button>
<Link href="/auth/login" className="text-gray-600 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition-colors">
{t.nav.login}
</Link>
<Link href="/register-verified" className="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md font-medium transition-colors">
{t.nav.join}
</Link>
</div>
</div>
</div>
</header>
{/* Debug Section - Always visible */}
<div className="bg-red-100 border-2 border-red-500 p-4 m-4 rounded">
<h2 className="text-xl font-bold text-red-800">🔍 DEBUG INFO</h2>
<p className="text-red-700">Language: {language}</p>
<p className="text-red-700">Hero Title: {t.hero.title}</p>
<p className="text-red-700">Hero Subtitle: {t.hero.subtitle}</p>
<p className="text-red-700">Hero Description: {t.hero.description}</p>
</div>
{/* Hero Section */}
<section className="relative py-20 px-4 sm:px-6 lg:px-8">
<div className="max-w-7xl mx-auto">
<motion.div
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
className="text-center"
>
<div className="flex items-center justify-center mb-6">
<Shield className="h-16 w-16 text-blue-600 mr-4" />
<h1 className="text-5xl md:text-6xl font-bold text-gray-900 dark:text-white">
{t.hero.title}
</h1>
</div>
<h2 className="text-2xl md:text-3xl font-semibold text-gray-800 dark:text-gray-200 mb-6">
{t.hero.subtitle}
</h2>
<p className="text-xl text-gray-600 dark:text-gray-400 mb-8 max-w-3xl mx-auto">
{t.hero.description}
</p>
<div className="flex flex-col sm:flex-row gap-4 justify-center">
<Link href="/business-profiles" className="bg-blue-600 hover:bg-blue-700 text-white px-8 py-3 rounded-lg font-semibold text-lg transition-colors flex items-center justify-center">
{t.hero.findLawyer}
<ArrowRight className="ml-2 h-5 w-5" />
</Link>
<Link href="/register-verified" className="bg-white hover:bg-gray-50 dark:bg-gray-800 dark:hover:bg-gray-700 text-blue-600 dark:text-blue-400 border-2 border-blue-600 dark:border-blue-400 px-8 py-3 rounded-lg font-semibold text-lg transition-colors flex items-center justify-center">
<Shield className="mr-2 h-5 w-5" />
{t.hero.becomeLawyer}
</Link>
</div>
</motion.div>
</div>
</section>
{/* Features Section */}
<section className="py-20 px-4 sm:px-6 lg:px-8 bg-white dark:bg-gray-800">
<div className="max-w-7xl mx-auto">
<motion.div
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ delay: 0.2 }}
className="text-center mb-16"
>
<h2 className="text-3xl md:text-4xl font-bold text-gray-900 dark:text-white mb-4">
{t.features.title}
</h2>
<p className="text-xl text-gray-600 dark:text-gray-400">
{t.features.subtitle}
</p>
</motion.div>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
<motion.div
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ delay: 0.3 }}
className="bg-gradient-to-br from-blue-50 to-blue-100 dark:from-blue-900/20 dark:to-blue-800/20 rounded-xl p-6 border border-blue-200 dark:border-blue-800"
>
<Shield className="h-12 w-12 text-blue-600 mb-4" />
<h3 className="text-xl font-semibold text-gray-900 dark:text-white mb-2">
Vérification Barreau
</h3>
<p className="text-gray-600 dark:text-gray-400">
Tous nos avocats sont vérifiés par le Barreau du Québec.
Vous avez la garantie de travailler avec des professionnels authentiques.
</p>
</motion.div>
<motion.div
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ delay: 0.4 }}
className="bg-gradient-to-br from-purple-50 to-purple-100 dark:from-purple-900/20 dark:to-purple-800/20 rounded-xl p-6 border border-purple-200 dark:border-blue-800"
>
<Building2 className="h-12 w-12 text-purple-600 mb-4" />
<h3 className="text-xl font-semibold text-gray-900 dark:text-white mb-2">
Cabinets d'avocats
</h3>
<p className="text-gray-600 dark:text-gray-400">
Découvrez les cabinets d'avocats québécois avec leurs équipes et leurs spécialisations.
Trouvez l'expertise qui correspond à vos besoins.
</p>
</motion.div>
<motion.div
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ delay: 0.5 }}
className="bg-gradient-to-br from-green-50 to-green-100 dark:from-green-900/20 dark:to-green-800/20 rounded-xl p-6 border border-green-200 dark:border-green-800"
>
<Users className="h-12 w-12 text-green-600 mb-4" />
<h3 className="text-xl font-semibold text-gray-900 dark:text-white mb-2">
Communauté active
</h3>
<p className="text-gray-600 dark:text-gray-400">
Rejoignez une communauté dynamique d'avocats, de juristes et de professionnels du droit.
Partagez, collaborez, grandissez.
</p>
</motion.div>
</div>
</div>
</section>
{/* Simple Test Section */}
<section className="py-20 px-4 sm:px-6 lg:px-8 bg-gray-100">
<div className="max-w-7xl mx-auto text-center">
<h2 className="text-3xl font-bold text-gray-900 mb-4">🧪 Test Section</h2>
<p className="text-xl text-gray-600 mb-8">This section should always be visible to test if content is loading</p>
<div className="bg-white p-8 rounded-lg shadow-lg">
<h3 className="text-2xl font-semibold text-blue-600 mb-4">Content Test</h3>
<p className="text-gray-700">If you can see this, the React components are working!</p>
<p className="text-gray-700 mt-2">Current language: <strong>{language}</strong></p>
<p className="text-gray-700 mt-2">Hero title: <strong>{t.hero.title}</strong></p>
</div>
</div>
</section>
</div>
</>
);
};
export default HomePage;