 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/brickabois.com/public_html/ |
<?php
/**
* Free Village Network - Homepage
* A Social Ecosystem for Living Sovereignty
*/
require_once dirname(__DIR__) . '/private_html/config.php';
require_once __DIR__ . '/includes/auth.php';
// Get language preference
$lang = $_GET['lang'] ?? (isset($_COOKIE['lang']) ? $_COOKIE['lang'] : 'en');
if (!in_array($lang, ['en', 'fr'])) $lang = 'en';
setcookie('lang', $lang, time() + (86400 * 365), '/');
// Translations
$translations = [
'en' => [
'title' => 'The Free Village Network',
'subtitle' => 'A Social Ecosystem for Living Sovereignty',
'tagline' => 'Where freedom is grounded in place, culture, and stewardship',
'explore' => 'Explore',
'join' => 'Join the Network',
'learn_more' => 'Learn More',
'recent_posts' => 'Recent Posts',
'upcoming_events' => 'Upcoming Events',
'active_villages' => 'Active Villages',
'view_all' => 'View All',
'no_posts' => 'No posts yet. Be the first to share!',
'no_events' => 'No upcoming events.',
'manifesto' => 'This is not another platform. It is a living social organism — a decentralized constellation of villages, citizens, and creators using technology to sustain real community, regenerative land practices, and spiritual coherence.',
'network_stats' => 'Network Statistics',
'active_citizens' => 'Active Citizens',
'total_posts' => 'Posts Shared',
'active_villages' => 'Active Villages',
'upcoming_events' => 'Upcoming Events',
'governance_proposals' => 'Active Proposals',
'how_it_works' => 'How It Works',
'step1_title' => 'Connect',
'step1_desc' => 'Join the network and connect with like-minded citizens building regenerative communities',
'step2_title' => 'Participate',
'step2_desc' => 'Engage in The Commons, contribute to governance in The Ledger, and steward The Land',
'step3_title' => 'Thrive',
'step3_desc' => 'Build real community, practice regenerative living, and create lasting change',
'vision_title' => 'Our Vision',
'vision_desc' => 'A world where communities are self-governing, land is regeneratively stewarded, and technology serves human flourishing rather than extraction.',
'values_title' => 'Our Values',
'value1_title' => 'Sovereignty',
'value1_desc' => 'Self-determination and autonomy for individuals and communities',
'value2_title' => 'Regenerative',
'value2_desc' => 'Practices that restore and enhance rather than deplete',
'value3_title' => 'Transparency',
'value3_desc' => 'Open governance and clear decision-making processes',
'value4_title' => 'Community',
'value4_desc' => 'Deep connection and mutual support among members',
'testimonials_title' => 'From Our Community',
'testimonial1' => 'The Free Village Network has transformed how we organize and govern our community. It\'s more than a platform—it\'s a movement.',
'testimonial1_author' => 'Village Steward',
'testimonial2' => 'Finally, technology that serves community rather than extracting from it. This is the future of social organization.',
'testimonial2_author' => 'Network Member',
'testimonial3' => 'This is how technology should serve humanity - enabling connection, governance, and regeneration.',
'testimonial3_author' => 'Community Creator',
'ready_title' => 'Ready to Begin?',
'ready_desc' => 'Join a growing network of citizens building the future of community.',
'commons_title' => 'The Commons',
'commons_desc' => 'Social connection & dialogue. A bilingual network of feeds, events, and stories.',
'ledger_title' => 'The Ledger',
'ledger_desc' => 'Governance & transparency. Blockchain-backed cooperative treasury & voting system.',
'land_title' => 'The Land',
'land_desc' => 'Physical embodiment. Real-world village nodes stewarding ecology, art, and learning.',
'dimensions_title' => 'Three Dimensions',
'dimensions_subtitle' => 'An interconnected ecosystem for living sovereignty',
],
'fr' => [
'title' => 'Le Réseau des Villages Libres',
'subtitle' => 'Un Écosystème Social pour la Souveraineté Vivante',
'tagline' => 'Où la liberté est ancrée dans le lieu, la culture et la gérance',
'explore' => 'Explorer',
'join' => 'Rejoindre le Réseau',
'learn_more' => 'En Savoir Plus',
'recent_posts' => 'Publications Récentes',
'upcoming_events' => 'Événements à Venir',
'active_villages' => 'Villages Actifs',
'view_all' => 'Voir Tout',
'no_posts' => 'Aucune publication pour le moment. Soyez le premier à partager !',
'no_events' => 'Aucun événement à venir.',
'manifesto' => 'Ce n\'est pas une autre plateforme. C\'est un organisme social vivant — une constellation décentralisée de villages, de citoyens et de créateurs utilisant la technologie pour maintenir une vraie communauté, des pratiques de régénération des terres et une cohérence spirituelle.',
'network_stats' => 'Statistiques du Réseau',
'active_citizens' => 'Citoyens Actifs',
'total_posts' => 'Publications Partagées',
'active_villages' => 'Villages Actifs',
'upcoming_events' => 'Événements à Venir',
'governance_proposals' => 'Propositions Actives',
'how_it_works' => 'Comment Ça Marche',
'step1_title' => 'Se Connecter',
'step1_desc' => 'Rejoignez le réseau et connectez-vous avec des citoyens partageant les mêmes idées qui construisent des communautés régénératrices',
'step2_title' => 'Participer',
'step2_desc' => 'Participez aux Communs, contribuez à la gouvernance dans le Registre et gérez la Terre',
'step3_title' => 'S\'épanouir',
'step3_desc' => 'Construisez une vraie communauté, pratiquez une vie régénérative et créez un changement durable',
'vision_title' => 'Notre Vision',
'vision_desc' => 'Un monde où les communautés sont autonomes, la terre est gérée de manière régénérative et la technologie sert l\'épanouissement humain plutôt que l\'extraction.',
'values_title' => 'Nos Valeurs',
'value1_title' => 'Souveraineté',
'value1_desc' => 'Autodétermination et autonomie pour les individus et les communautés',
'value2_title' => 'Régénératif',
'value2_desc' => 'Pratiques qui restaurent et améliorent plutôt que d\'épuiser',
'value3_title' => 'Transparence',
'value3_desc' => 'Gouvernance ouverte et processus de prise de décision clairs',
'value4_title' => 'Communauté',
'value4_desc' => 'Connexion profonde et soutien mutuel entre les membres',
'testimonials_title' => 'De Notre Communauté',
'testimonial1' => 'Le Réseau des Villages Libres a transformé la façon dont nous organisons et gouvernons notre communauté. C\'est plus qu\'une plateforme—c\'est un mouvement.',
'testimonial1_author' => 'Gérant de Village',
'testimonial2' => 'Enfin, une technologie qui sert la communauté plutôt que d\'en extraire. C\'est l\'avenir de l\'organisation sociale.',
'testimonial2_author' => 'Membre du Réseau',
'testimonial3' => 'C\'est ainsi que la technologie devrait servir l\'humanité - permettre la connexion, la gouvernance et la régénération.',
'testimonial3_author' => 'Créateur de Communauté',
'ready_title' => 'Prêt à Commencer?',
'ready_desc' => 'Rejoignez un réseau croissant de citoyens construisant l\'avenir de la communauté.',
'commons_title' => 'Les Communs',
'commons_desc' => 'Connexion sociale & dialogue. Un réseau bilingue de fils d\'actualité, d\'événements et d\'histoires.',
'ledger_title' => 'Le Registre',
'ledger_desc' => 'Gouvernance & transparence. Système de trésorerie coopérative et de vote soutenu par la blockchain.',
'land_title' => 'La Terre',
'land_desc' => 'Incarnation physique. Nœuds de villages réels gérant l\'écologie, l\'art et l\'apprentissage.',
'dimensions_title' => 'Trois Dimensions',
'dimensions_subtitle' => 'Un écosystème interconnecté pour la souveraineté vivante',
]
];
$t = $translations[$lang];
// Get database connection
$db = getDBConnection();
// Get recent posts
$postsStmt = $db->prepare("
SELECT p.*, u.username, u.display_name, u.avatar_url, v.name as village_name
FROM posts p
JOIN users u ON p.user_id = u.id
LEFT JOIN villages v ON p.village_id = v.id
WHERE p.deleted_at IS NULL AND p.visibility = 'public'
ORDER BY p.created_at DESC
LIMIT 6
");
$postsStmt->execute();
$recent_posts = $postsStmt->fetchAll();
// Get upcoming events
$eventsStmt = $db->prepare("
SELECT e.*, u.username, u.display_name, v.name as village_name
FROM events e
JOIN users u ON e.user_id = u.id
LEFT JOIN villages v ON e.village_id = v.id
WHERE e.is_public = 1 AND e.start_date >= NOW()
ORDER BY e.start_date ASC
LIMIT 6
");
$eventsStmt->execute();
$upcoming_events = $eventsStmt->fetchAll();
// Get active villages
$villagesStmt = $db->prepare("
SELECT v.*, COUNT(DISTINCT vm.user_id) as member_count
FROM villages v
LEFT JOIN village_members vm ON v.id = vm.village_id
WHERE v.status = 'active'
GROUP BY v.id
ORDER BY v.created_at DESC
LIMIT 3
");
$villagesStmt->execute();
$active_villages = $villagesStmt->fetchAll();
// Get network statistics
$statsStmt = $db->prepare("
SELECT
(SELECT COUNT(*) FROM users WHERE status = 'active') as total_users,
(SELECT COUNT(*) FROM posts WHERE deleted_at IS NULL AND visibility = 'public') as total_posts,
(SELECT COUNT(*) FROM villages WHERE status = 'active') as total_villages,
(SELECT COUNT(*) FROM events WHERE is_public = 1 AND start_date >= NOW()) as upcoming_events,
(SELECT COUNT(*) FROM proposals WHERE status = 'active') as active_proposals,
(SELECT COUNT(*) FROM village_members) as total_memberships
");
$statsStmt->execute();
$network_stats = $statsStmt->fetch();
?>
<!DOCTYPE html>
<html lang="<?= $lang ?>">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title><?= htmlspecialchars($t['title']) ?> - <?= htmlspecialchars($t['subtitle']) ?></title>
<meta name="description" content="<?= htmlspecialchars($t['manifesto']) ?>">
<link rel="stylesheet" href="/assets/css/main.css">
<link rel="stylesheet" href="/assets/css/navbar-modern.css">
<link rel="stylesheet" href="/assets/css/themes.css">
<link rel="stylesheet" href="/assets/css/homepage-new.css">
<link rel="stylesheet" href="/assets/css/homepage-advanced.css">
<link rel="stylesheet" href="/assets/css/homepage-fixes.css">
<link rel="stylesheet" href="/assets/css/homepage-interactive.css">
<link rel="stylesheet" href="/assets/css/interactive-map-ultimate.css">
<link rel="stylesheet" href="/assets/css/homepage-map.css">
<!-- Remove old problematic styles -->
<style>
/* Override any conflicting styles */
body {
overflow-x: hidden;
width: 100%;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 2rem;
width: 100%;
box-sizing: border-box;
}
</style>
<script>
// Initialize theme immediately
(function() {
const theme = localStorage.getItem('theme') || 'dark';
document.documentElement.setAttribute('data-theme', theme);
const colorTheme = localStorage.getItem('colorTheme') || 'forest';
document.documentElement.setAttribute('data-color-theme', colorTheme);
})();
</script>
</head>
<body>
<?php include __DIR__ . '/includes/navbar.php'; ?>
<!-- Hero Section - Advanced Graphics -->
<section class="hero-section-advanced">
<div class="morph-shapes"></div>
<div class="scene-3d"></div>
<div class="floating-icons"></div>
<div id="world3D" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; opacity: 0.3;"></div>
<canvas class="hero-background-canvas" id="heroCanvas"></canvas>
<div class="container">
<div class="hero-content-advanced glow-effect">
<h1 class="hero-title-advanced reveal-on-scroll"><?= htmlspecialchars($t['title']) ?></h1>
<p class="hero-subtitle-advanced reveal-on-scroll"><?= htmlspecialchars($t['subtitle']) ?></p>
<p class="hero-tagline-advanced reveal-on-scroll"><?= htmlspecialchars($t['tagline']) ?></p>
<div class="hero-actions reveal-on-scroll" style="display: flex; gap: 1.5rem; justify-content: center; margin-top: 3rem; flex-wrap: wrap;">
<a href="#explore" class="btn btn-primary btn-interactive" style="padding: 1rem 2.5rem; font-size: 1.1rem; font-weight: 600; border-radius: 50px; box-shadow: 0 10px 30px rgba(212, 165, 116, 0.3); position: relative; overflow: hidden;"><?= htmlspecialchars($t['explore']) ?></a>
<a href="/register" class="btn btn-secondary btn-interactive" style="padding: 1rem 2.5rem; font-size: 1.1rem; font-weight: 600; border-radius: 50px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3); position: relative; overflow: hidden;"><?= htmlspecialchars($t['join']) ?></a>
</div>
</div>
</div>
</section>
<!-- Interactive Village Map -->
<section class="interactive-map-section scroll-effect-section" style="padding: 6rem 0; background: linear-gradient(135deg, rgba(15, 15, 30, 1) 0%, rgba(26, 26, 46, 1) 100%); position: relative;">
<div class="container">
<h2 class="section-title" style="text-align: center; font-size: clamp(2rem, 5vw, 3.5rem); margin-bottom: 1rem; color: var(--color-accent);"><?= $lang === 'fr' ? 'Carte Interactive du Réseau' : 'Interactive Network Map' ?></h2>
<p style="text-align: center; color: var(--color-text-secondary); margin-bottom: 3rem; font-size: 1.2rem;"><?= $lang === 'fr' ? 'Explorez les villes et villages connectés dans notre réseau' : 'Explore cities and connected villages in our network' ?></p>
<div class="map-controls-bar" style="display: flex; gap: 1rem; margin-bottom: 2rem; flex-wrap: wrap; justify-content: center;">
<input type="text" id="mapSearch" placeholder="<?= $lang === 'fr' ? 'Rechercher une ville...' : 'Search for a city...' ?>" style="flex: 1; min-width: 250px; padding: 0.75rem 1rem; border: 2px solid var(--color-border); border-radius: 25px; background: var(--color-bg-card); color: var(--color-text);">
<select id="mapRegionFilter" style="padding: 0.75rem 1.5rem; border: 2px solid var(--color-border); border-radius: 25px; background: var(--color-bg-card); color: var(--color-text); min-width: 200px;">
<option value="all"><?= $lang === 'fr' ? 'Toutes les Régions' : 'All Regions' ?></option>
</select>
<select id="mapStatusFilter" style="padding: 0.75rem 1.5rem; border: 2px solid var(--color-border); border-radius: 25px; background: var(--color-bg-card); color: var(--color-text); min-width: 180px;">
<option value="all"><?= $lang === 'fr' ? 'Tous les Statuts' : 'All Status' ?></option>
<option value="active"><?= $lang === 'fr' ? 'Actif' : 'Active' ?></option>
<option value="forming"><?= $lang === 'fr' ? 'En Formation' : 'Forming' ?></option>
</select>
<button id="resetMapView" style="padding: 0.75rem 1.5rem; background: transparent; border: 2px solid var(--color-border); border-radius: 25px; color: var(--color-text); cursor: pointer; white-space: nowrap;"><?= $lang === 'fr' ? 'Réinitialiser' : 'Reset' ?></button>
</div>
<div id="homepageInteractiveMap" class="homepage-interactive-map" style="width: 100%; height: 700px; position: relative; border-radius: 20px; overflow: hidden; border: 2px solid var(--color-border); background: var(--color-bg-card); touch-action: none;">
<canvas id="homepageMapCanvas" style="width: 100%; height: 100%; display: block; cursor: grab; touch-action: none;"></canvas>
<div class="map-zoom-controls" style="position: absolute; top: 1rem; right: 1rem; display: flex; flex-direction: column; gap: 0.5rem; z-index: 10;">
<button id="mapZoomIn" class="map-control-btn" style="width: 45px; height: 45px; background: var(--color-bg-card); border: 2px solid var(--color-border); border-radius: 12px; color: var(--color-text); font-size: 1.5rem; font-weight: 700; cursor: pointer; touch-action: manipulation;">+</button>
<button id="mapZoomOut" class="map-control-btn" style="width: 45px; height: 45px; background: var(--color-bg-card); border: 2px solid var(--color-border); border-radius: 12px; color: var(--color-text); font-size: 1.5rem; font-weight: 700; cursor: pointer; touch-action: manipulation;">−</button>
<button id="mapLocateBtn" class="map-control-btn" style="width: 45px; height: 45px; background: var(--color-bg-card); border: 2px solid var(--color-border); border-radius: 12px; color: var(--color-text); font-size: 1.2rem; cursor: pointer; touch-action: manipulation; padding: 0;">📍</button>
</div>
</div>
<div id="villageDetailsPanel" class="village-details-panel">
<button id="closeVillagePanel" class="close-panel">×</button>
<div id="villageDetailsContent"></div>
</div>
</div>
</section>
<!-- Live Stats Dashboard -->
<section class="live-stats-section scroll-effect-section" style="padding: 6rem 0; background: var(--color-bg); position: relative;">
<div class="container">
<h2 class="section-title" style="text-align: center; font-size: clamp(2rem, 5vw, 3.5rem); margin-bottom: 1rem; color: var(--color-accent);"><?= $lang === 'fr' ? 'Tableau de Bord en Direct' : 'Live Dashboard' ?></h2>
<p style="text-align: center; color: var(--color-text-secondary); margin-bottom: 3rem;"><?= $lang === 'fr' ? 'Statistiques en temps réel du réseau' : 'Real-time network statistics' ?></p>
<div id="liveStatsDashboard" style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 2rem;">
<div class="stat-card-advanced card-3d-interactive" style="text-align: center; padding: 2rem;">
<div style="font-size: 2.5rem; margin-bottom: 1rem;">👥</div>
<div data-stat="citizens" class="stat-number-advanced live-update" style="font-size: 3rem; font-weight: 900; margin-bottom: 0.5rem;">0</div>
<div style="color: var(--color-text-secondary);"><?= htmlspecialchars($t['active_citizens']) ?></div>
</div>
<div class="stat-card-advanced card-3d-interactive" style="text-align: center; padding: 2rem;">
<div style="font-size: 2.5rem; margin-bottom: 1rem;">💬</div>
<div data-stat="posts" class="stat-number-advanced live-update" style="font-size: 3rem; font-weight: 900; margin-bottom: 0.5rem;">0</div>
<div style="color: var(--color-text-secondary);"><?= htmlspecialchars($t['total_posts']) ?></div>
</div>
<div class="stat-card-advanced card-3d-interactive" style="text-align: center; padding: 2rem;">
<div style="font-size: 2.5rem; margin-bottom: 1rem;">🌍</div>
<div data-stat="villages" class="stat-number-advanced live-update" style="font-size: 3rem; font-weight: 900; margin-bottom: 0.5rem;">0</div>
<div style="color: var(--color-text-secondary);"><?= htmlspecialchars($t['active_villages']) ?></div>
</div>
<div class="stat-card-advanced card-3d-interactive" style="text-align: center; padding: 2rem;">
<div style="font-size: 2.5rem; margin-bottom: 1rem;">📅</div>
<div data-stat="events" class="stat-number-advanced live-update" style="font-size: 3rem; font-weight: 900; margin-bottom: 0.5rem;">0</div>
<div style="color: var(--color-text-secondary);"><?= htmlspecialchars($t['upcoming_events']) ?></div>
</div>
</div>
</div>
</section>
<!-- Manifesto -->
<section class="manifesto-section">
<div class="container">
<p class="manifesto-text"><?= htmlspecialchars($t['manifesto']) ?></p>
</div>
</section>
<!-- How It Works -->
<section class="how-it-works-section">
<div class="container">
<h2 class="section-title"><?= htmlspecialchars($t['how_it_works']) ?></h2>
<div class="steps-grid">
<div class="step-card">
<div class="step-number">01</div>
<div class="step-icon">🌱</div>
<h3 class="step-title"><?= htmlspecialchars($t['step1_title']) ?></h3>
<p class="step-desc"><?= htmlspecialchars($t['step1_desc']) ?></p>
</div>
<div class="step-card">
<div class="step-number">02</div>
<div class="step-icon">🌐</div>
<h3 class="step-title"><?= htmlspecialchars($t['step2_title']) ?></h3>
<p class="step-desc"><?= htmlspecialchars($t['step2_desc']) ?></p>
</div>
<div class="step-card">
<div class="step-number">03</div>
<div class="step-icon">⭐</div>
<h3 class="step-title"><?= htmlspecialchars($t['step3_title']) ?></h3>
<p class="step-desc"><?= htmlspecialchars($t['step3_desc']) ?></p>
</div>
</div>
</div>
</section>
<!-- Three Dimensions - Advanced Interactive Explorer -->
<section class="dimensions-section-advanced scroll-effect-section" id="explore">
<div class="container">
<h2 class="section-title reveal-on-scroll" style="text-align: center; font-size: clamp(2rem, 5vw, 3.5rem); margin-bottom: 1rem; color: var(--color-accent);"><?= htmlspecialchars($t['dimensions_title']) ?></h2>
<p class="section-subtitle reveal-on-scroll" style="text-align: center; font-size: 1.25rem; color: var(--color-text-secondary); margin-bottom: 4rem;"><?= htmlspecialchars($t['dimensions_subtitle']) ?></p>
<!-- Interactive Filters -->
<div id="interactiveFilters" style="display: flex; justify-content: center; gap: 1rem; margin-bottom: 3rem; flex-wrap: wrap;">
<button class="filter-btn btn-interactive active" data-filter="all" style="padding: 0.75rem 1.5rem; background: var(--color-primary); border: none; border-radius: 25px; color: white; cursor: pointer; font-weight: 600; transition: all 0.3s; box-shadow: 0 4px 15px rgba(45, 80, 22, 0.4);"><?= $lang === 'fr' ? 'Tout' : 'All' ?></button>
<button class="filter-btn btn-interactive" data-filter="commons" style="padding: 0.75rem 1.5rem; background: transparent; border: 2px solid var(--color-border); border-radius: 25px; color: var(--color-text); cursor: pointer; font-weight: 600; transition: all 0.3s;"><?= htmlspecialchars($t['commons_title']) ?></button>
<button class="filter-btn btn-interactive" data-filter="ledger" style="padding: 0.75rem 1.5rem; background: transparent; border: 2px solid var(--color-border); border-radius: 25px; color: var(--color-text); cursor: pointer; font-weight: 600; transition: all 0.3s;"><?= htmlspecialchars($t['ledger_title']) ?></button>
<button class="filter-btn btn-interactive" data-filter="land" style="padding: 0.75rem 1.5rem; background: transparent; border: 2px solid var(--color-border); border-radius: 25px; color: var(--color-text); cursor: pointer; font-weight: 600; transition: all 0.3s;"><?= htmlspecialchars($t['land_title']) ?></button>
</div>
<div class="dimensions-grid" style="display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 3rem;">
<div class="dimension-card-advanced dimension-explorer-card card-3d-interactive filterable-item" data-dimension="commons" data-category="commons" style="position: relative; opacity: 1; transform: scale(1); transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1); cursor: pointer;">
<div class="particle-container" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0;"></div>
<div style="position: relative; z-index: 1;">
<div class="dimension-icon-advanced">💬</div>
<h3 class="dimension-title" style="font-size: 2rem; margin-bottom: 1rem; color: var(--color-accent);"><?= htmlspecialchars($t['commons_title']) ?></h3>
<p class="dimension-desc" style="color: var(--color-text-secondary); line-height: 1.8; font-size: 1.1rem;"><?= htmlspecialchars($t['commons_desc']) ?></p>
<div class="dimension-links" style="margin-top: 2rem;">
<a href="/commons" class="dimension-link btn-interactive" style="color: var(--color-accent); text-decoration: none; font-weight: 600; font-size: 1.1rem; display: inline-block; padding: 0.5rem 1.5rem; border: 2px solid var(--color-accent); border-radius: 25px; transition: all 0.3s;"><?= htmlspecialchars($t['learn_more']) ?> →</a>
</div>
</div>
<div id="commonsDetails" style="display: none; margin-top: 2rem; padding-top: 2rem; border-top: 1px solid var(--color-border);">
<h4 style="color: var(--color-accent); margin-bottom: 1rem;"><?= $lang === 'fr' ? 'Fonctionnalités' : 'Features' ?></h4>
<ul style="color: var(--color-text-secondary); line-height: 2;">
<li>✓ <?= $lang === 'fr' ? 'Flux social bilingue' : 'Bilingual social feeds' ?></li>
<li>✓ <?= $lang === 'fr' ? 'Événements communautaires' : 'Community events' ?></li>
<li>✓ <?= $lang === 'fr' ? 'Partage de récits' : 'Story sharing' ?></li>
</ul>
</div>
</div>
<div class="dimension-card-advanced dimension-explorer-card card-3d-interactive filterable-item" data-dimension="ledger" data-category="ledger" style="position: relative; opacity: 1; transform: scale(1); transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1); cursor: pointer;">
<div class="particle-container" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0;"></div>
<div style="position: relative; z-index: 1;">
<div class="dimension-icon-advanced">📜</div>
<h3 class="dimension-title" style="font-size: 2rem; margin-bottom: 1rem; color: var(--color-accent);"><?= htmlspecialchars($t['ledger_title']) ?></h3>
<p class="dimension-desc" style="color: var(--color-text-secondary); line-height: 1.8; font-size: 1.1rem;"><?= htmlspecialchars($t['ledger_desc']) ?></p>
<div class="dimension-links" style="margin-top: 2rem;">
<a href="/ledger" class="dimension-link btn-interactive" style="color: var(--color-accent); text-decoration: none; font-weight: 600; font-size: 1.1rem; display: inline-block; padding: 0.5rem 1.5rem; border: 2px solid var(--color-accent); border-radius: 25px; transition: all 0.3s;"><?= htmlspecialchars($t['learn_more']) ?> →</a>
</div>
</div>
<div id="ledgerDetails" style="display: none; margin-top: 2rem; padding-top: 2rem; border-top: 1px solid var(--color-border);">
<h4 style="color: var(--color-accent); margin-bottom: 1rem;"><?= $lang === 'fr' ? 'Fonctionnalités' : 'Features' ?></h4>
<ul style="color: var(--color-text-secondary); line-height: 2;">
<li>✓ <?= $lang === 'fr' ? 'Gouvernance blockchain' : 'Blockchain governance' ?></li>
<li>✓ <?= $lang === 'fr' ? 'Trésorerie coopérative' : 'Cooperative treasury' ?></li>
<li>✓ <?= $lang === 'fr' ? 'Système de vote' : 'Voting system' ?></li>
</ul>
</div>
</div>
<div class="dimension-card-advanced dimension-explorer-card card-3d-interactive filterable-item" data-dimension="land" data-category="land" style="position: relative; opacity: 1; transform: scale(1); transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1); cursor: pointer;">
<div class="particle-container" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0;"></div>
<div style="position: relative; z-index: 1;">
<div class="dimension-icon-advanced">🌿</div>
<h3 class="dimension-title" style="font-size: 2rem; margin-bottom: 1rem; color: var(--color-accent);"><?= htmlspecialchars($t['land_title']) ?></h3>
<p class="dimension-desc" style="color: var(--color-text-secondary); line-height: 1.8; font-size: 1.1rem;"><?= htmlspecialchars($t['land_desc']) ?></p>
<div class="dimension-links" style="margin-top: 2rem;">
<a href="/land" class="dimension-link btn-interactive" style="color: var(--color-accent); text-decoration: none; font-weight: 600; font-size: 1.1rem; display: inline-block; padding: 0.5rem 1.5rem; border: 2px solid var(--color-accent); border-radius: 25px; transition: all 0.3s;"><?= htmlspecialchars($t['learn_more']) ?> →</a>
</div>
</div>
<div id="landDetails" style="display: none; margin-top: 2rem; padding-top: 2rem; border-top: 1px solid var(--color-border);">
<h4 style="color: var(--color-accent); margin-bottom: 1rem;"><?= $lang === 'fr' ? 'Fonctionnalités' : 'Features' ?></h4>
<ul style="color: var(--color-text-secondary); line-height: 2;">
<li>✓ <?= $lang === 'fr' ? 'Nœuds de villages physiques' : 'Physical village nodes' ?></li>
<li>✓ <?= $lang === 'fr' ? 'Gestion écologique' : 'Ecological stewardship' ?></li>
<li>✓ <?= $lang === 'fr' ? 'Projets d\'apprentissage' : 'Learning projects' ?></li>
</ul>
</div>
</div>
</div>
</div>
</section>
<!-- Interactive Timeline -->
<section class="timeline-section scroll-effect-section" style="padding: 6rem 0; background: linear-gradient(135deg, rgba(26, 26, 46, 0.8) 0%, rgba(15, 15, 30, 0.9) 100%); position: relative;">
<div class="container">
<h2 class="section-title" style="text-align: center; font-size: clamp(2rem, 5vw, 3.5rem); margin-bottom: 3rem; color: var(--color-accent);"><?= $lang === 'fr' ? 'Notre Histoire' : 'Our Journey' ?></h2>
<div id="interactiveTimeline" style="position: relative; height: 300px; margin: 4rem 0;">
<div style="position: absolute; top: 50%; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--color-accent), transparent);"></div>
</div>
</div>
</section>
<!-- Vision -->
<section class="vision-section">
<div class="container">
<h2 class="section-title"><?= htmlspecialchars($t['vision_title']) ?></h2>
<p class="vision-text"><?= htmlspecialchars($t['vision_desc']) ?></p>
</div>
</section>
<!-- Values -->
<section class="values-section">
<div class="container">
<h2 class="section-title"><?= htmlspecialchars($t['values_title']) ?></h2>
<div class="values-grid">
<div class="value-card">
<div class="value-icon">⚖️</div>
<h3 class="value-title"><?= htmlspecialchars($t['value1_title']) ?></h3>
<p class="value-desc"><?= htmlspecialchars($t['value1_desc']) ?></p>
</div>
<div class="value-card">
<div class="value-icon">🌱</div>
<h3 class="value-title"><?= htmlspecialchars($t['value2_title']) ?></h3>
<p class="value-desc"><?= htmlspecialchars($t['value2_desc']) ?></p>
</div>
<div class="value-card">
<div class="value-icon">🔍</div>
<h3 class="value-title"><?= htmlspecialchars($t['value3_title']) ?></h3>
<p class="value-desc"><?= htmlspecialchars($t['value3_desc']) ?></p>
</div>
<div class="value-card">
<div class="value-icon">🤝</div>
<h3 class="value-title"><?= htmlspecialchars($t['value4_title']) ?></h3>
<p class="value-desc"><?= htmlspecialchars($t['value4_desc']) ?></p>
</div>
</div>
</div>
</section>
<!-- Activity Feed -->
<section class="activity-section">
<div class="container">
<div class="activity-grid">
<div class="activity-column">
<h2 class="activity-title"><?= htmlspecialchars($t['recent_posts']) ?></h2>
<div class="posts-list">
<?php if (empty($recent_posts)): ?>
<p class="empty-state"><?= htmlspecialchars($t['no_posts']) ?></p>
<?php else: ?>
<?php foreach ($recent_posts as $post): ?>
<div class="post-item">
<div class="post-header">
<span class="post-author"><?= htmlspecialchars($post['display_name'] ?? $post['username']) ?></span>
<?php if ($post['village_name']): ?>
<span class="post-village">@<?= htmlspecialchars($post['village_name']) ?></span>
<?php endif; ?>
</div>
<p class="post-content"><?= htmlspecialchars(substr($post['content'], 0, 150)) ?><?= strlen($post['content']) > 150 ? '...' : '' ?></p>
<div class="post-meta">
<span class="post-date"><?= date('M j, Y', strtotime($post['created_at'])) ?></span>
</div>
</div>
<?php endforeach; ?>
<?php endif; ?>
</div>
<a href="/commons" class="view-all-link"><?= htmlspecialchars($t['view_all']) ?> →</a>
</div>
<div class="activity-column">
<h2 class="activity-title"><?= htmlspecialchars($t['upcoming_events']) ?></h2>
<div class="events-list">
<?php if (empty($upcoming_events)): ?>
<p class="empty-state"><?= htmlspecialchars($t['no_events']) ?></p>
<?php else: ?>
<?php foreach ($upcoming_events as $event): ?>
<div class="event-item">
<div class="event-date">
<span class="event-day"><?= date('j', strtotime($event['start_date'])) ?></span>
<span class="event-month"><?= date('M', strtotime($event['start_date'])) ?></span>
</div>
<div class="event-details">
<h4 class="event-title"><?= htmlspecialchars($event['title']) ?></h4>
<p class="event-location"><?= htmlspecialchars($event['location'] ?? 'Online') ?></p>
</div>
</div>
<?php endforeach; ?>
<?php endif; ?>
</div>
<a href="/commons" class="view-all-link"><?= htmlspecialchars($t['view_all']) ?> →</a>
</div>
</div>
</div>
</section>
<!-- Active Villages -->
<?php if (!empty($active_villages)): ?>
<section class="villages-section">
<div class="container">
<h2 class="section-title"><?= htmlspecialchars($t['active_villages']) ?></h2>
<div class="villages-grid">
<?php foreach ($active_villages as $village): ?>
<div class="village-card">
<h3 class="village-name"><?= htmlspecialchars($village['name']) ?></h3>
<p class="village-location">📍 <?= htmlspecialchars($village['region'] ?? '') ?>, <?= htmlspecialchars($village['country'] ?? 'Canada') ?></p>
<p class="village-desc"><?= htmlspecialchars(substr($village['description'] ?? '', 0, 120)) ?><?= strlen($village['description'] ?? '') > 120 ? '...' : '' ?></p>
<div class="village-meta">
<span class="village-members"><?= $village['member_count'] ?> <?= $lang === 'fr' ? 'membres' : 'members' ?></span>
<span class="village-status active"><?= $lang === 'fr' ? 'Actif' : 'Active' ?></span>
</div>
<a href="/land/village/<?= htmlspecialchars($village['slug']) ?>" class="village-link"><?= $lang === 'fr' ? 'Voir le profil' : 'View Profile' ?> →</a>
</div>
<?php endforeach; ?>
</div>
</div>
</section>
<?php endif; ?>
<!-- Testimonials -->
<section class="testimonials-section">
<div class="container">
<h2 class="section-title"><?= htmlspecialchars($t['testimonials_title']) ?></h2>
<div class="testimonials-grid">
<div class="testimonial-card">
<p class="testimonial-text">"<?= htmlspecialchars($t['testimonial1']) ?>"</p>
<p class="testimonial-author">— <?= htmlspecialchars($t['testimonial1_author']) ?></p>
</div>
<div class="testimonial-card">
<p class="testimonial-text">"<?= htmlspecialchars($t['testimonial2']) ?>"</p>
<p class="testimonial-author">— <?= htmlspecialchars($t['testimonial2_author']) ?></p>
</div>
<div class="testimonial-card">
<p class="testimonial-text">"<?= htmlspecialchars($t['testimonial3']) ?>"</p>
<p class="testimonial-author">— <?= htmlspecialchars($t['testimonial3_author']) ?></p>
</div>
</div>
</div>
</section>
<!-- Join CTA -->
<section class="join-cta-section" id="join">
<div class="container">
<h2 class="cta-title"><?= htmlspecialchars($t['ready_title']) ?></h2>
<p class="cta-desc"><?= htmlspecialchars($t['ready_desc']) ?></p>
<div class="cta-actions">
<a href="/register" class="btn btn-primary btn-large"><?= htmlspecialchars($t['join']) ?></a>
<a href="#explore" class="btn btn-secondary btn-large"><?= htmlspecialchars($t['explore']) ?></a>
</div>
</div>
</section>
<!-- Footer -->
<footer class="main-footer">
<div class="container">
<div class="footer-grid">
<div class="footer-column">
<h3 class="footer-title"><?= htmlspecialchars($t['title']) ?></h3>
<p class="footer-desc"><?= htmlspecialchars($t['subtitle']) ?></p>
</div>
<div class="footer-column">
<h4 class="footer-heading"><?= $lang === 'fr' ? 'Dimensions' : 'Dimensions' ?></h4>
<ul class="footer-links">
<li><a href="/commons"><?= htmlspecialchars($t['commons_title']) ?></a></li>
<li><a href="/ledger"><?= htmlspecialchars($t['ledger_title']) ?></a></li>
<li><a href="/land"><?= htmlspecialchars($t['land_title']) ?></a></li>
</ul>
</div>
<div class="footer-column">
<h4 class="footer-heading"><?= $lang === 'fr' ? 'Réseau' : 'Network' ?></h4>
<ul class="footer-links">
<li><a href="/register"><?= htmlspecialchars($t['join']) ?></a></li>
<li><a href="/login"><?= $lang === 'fr' ? 'Connexion' : 'Login' ?></a></li>
</ul>
</div>
</div>
<div class="footer-bottom">
<p>© <?= date('Y') ?> <?= htmlspecialchars($t['title']) ?>. <?= $lang === 'fr' ? 'Tous droits réservés.' : 'All rights reserved.' ?></p>
</div>
</div>
</footer>
<script src="/assets/data/quebec-municipalities.js"></script>
<script src="/assets/data/quebec-regional-maps.js"></script>
<script src="/assets/js/theme.js"></script>
<script src="/assets/js/theme-randomizer.js"></script>
<script src="/assets/js/homepage-new.js"></script>
<script src="/assets/js/homepage-advanced.js"></script>
<script src="/assets/js/homepage-interactive.js"></script>
<script src="/assets/js/homepage-map-new.js"></script>
</body>
</html>