207 lines
8.9 KiB
TypeScript
207 lines
8.9 KiB
TypeScript
'use client';
|
||
|
||
import { useEffect, useState } from 'react';
|
||
import Link from 'next/link';
|
||
import { useRouter } from 'next/navigation';
|
||
import { Button } from '@/components/ui/button';
|
||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
|
||
import { Badge } from '@/components/ui/badge';
|
||
import { PROJECT_CONFIG } from '@/lib/project.config';
|
||
import Footer from '@/components/Footer';
|
||
import VersionDisplay from '@/components/VersionDisplay';
|
||
|
||
export default function HomePage() {
|
||
const router = useRouter();
|
||
const [isChecking, setIsChecking] = useState(true);
|
||
|
||
useEffect(() => {
|
||
checkSetupStatus();
|
||
}, []);
|
||
|
||
const checkSetupStatus = async () => {
|
||
try {
|
||
// Vérifier si Supabase est configuré
|
||
const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL;
|
||
const supabaseAnonKey = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY;
|
||
|
||
if (!supabaseUrl || !supabaseAnonKey || supabaseUrl === 'https://placeholder.supabase.co') {
|
||
// Supabase n'est pas configuré, rediriger vers la page de setup
|
||
router.push('/setup');
|
||
return;
|
||
}
|
||
|
||
setIsChecking(false);
|
||
} catch (error) {
|
||
console.error('Erreur lors de la vérification de la configuration:', error);
|
||
setIsChecking(false);
|
||
}
|
||
};
|
||
|
||
if (isChecking) {
|
||
return (
|
||
<div className="min-h-screen bg-gradient-to-br from-slate-50 to-slate-100 dark:from-slate-900 dark:to-slate-800 flex items-center justify-center">
|
||
<div className="text-center">
|
||
<div className="animate-spin rounded-full h-12 w-12 border-b-2 border-slate-900 dark:border-slate-100 mx-auto mb-4"></div>
|
||
<p className="text-slate-600 dark:text-slate-300">Vérification de la configuration...</p>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
return (
|
||
<div className="min-h-screen bg-gradient-to-br from-slate-50 to-slate-100 dark:from-slate-900 dark:to-slate-800">
|
||
<div className="container mx-auto px-4 py-16">
|
||
{/* Hero Section */}
|
||
<div className="text-center mb-16">
|
||
<Badge variant="secondary" className="mb-4 text-sm">
|
||
🗳️ Démocratie Participative
|
||
</Badge>
|
||
<h1 className="text-4xl md:text-6xl font-bold text-slate-900 dark:text-slate-100 mb-6">
|
||
Mes Budgets Participatifs
|
||
</h1>
|
||
<p className="text-xl text-slate-600 dark:text-slate-300 max-w-3xl mx-auto mb-8">
|
||
Participez aux décisions budgétaires de vos collectifs.
|
||
Votez pour les projets qui vous tiennent à cœur et façonnez ensemble l'avenir de votre communauté.
|
||
</p>
|
||
</div>
|
||
|
||
{/* Features Section */}
|
||
<div id="features" className="grid md:grid-cols-2 lg:grid-cols-3 gap-8 mb-16">
|
||
<Card className="border-0 shadow-lg hover:shadow-xl transition-shadow duration-300">
|
||
<CardHeader className="text-center">
|
||
<div className="w-12 h-12 bg-blue-100 dark:bg-blue-900 rounded-lg flex items-center justify-center mx-auto mb-4">
|
||
<span className="text-2xl">📝</span>
|
||
</div>
|
||
<CardTitle className="text-xl">Propositions</CardTitle>
|
||
<CardDescription>
|
||
Soumettez et découvrez des projets innovants pour votre collectif
|
||
</CardDescription>
|
||
</CardHeader>
|
||
<CardContent className="text-center">
|
||
<p className="text-slate-600 dark:text-slate-300">
|
||
Partagez vos idées et consultez les propositions de la communauté
|
||
</p>
|
||
</CardContent>
|
||
</Card>
|
||
|
||
<Card className="border-0 shadow-lg hover:shadow-xl transition-shadow duration-300">
|
||
<CardHeader className="text-center">
|
||
<div className="w-12 h-12 bg-green-100 dark:bg-green-900 rounded-lg flex items-center justify-center mx-auto mb-4">
|
||
<span className="text-2xl">🗳️</span>
|
||
</div>
|
||
<CardTitle className="text-xl">Vote Intelligent</CardTitle>
|
||
<CardDescription>
|
||
Votez pour les projets qui vous semblent prioritaires
|
||
</CardDescription>
|
||
</CardHeader>
|
||
<CardContent className="text-center">
|
||
<p className="text-slate-600 dark:text-slate-300">
|
||
Répartissez votre budget entre les différentes propositions
|
||
</p>
|
||
</CardContent>
|
||
</Card>
|
||
|
||
<Card className="border-0 shadow-lg hover:shadow-xl transition-shadow duration-300">
|
||
<CardHeader className="text-center">
|
||
<div className="w-12 h-12 bg-purple-100 dark:bg-purple-900 rounded-lg flex items-center justify-center mx-auto mb-4">
|
||
<span className="text-2xl">📊</span>
|
||
</div>
|
||
<CardTitle className="text-xl">Résultats en Temps Réel</CardTitle>
|
||
<CardDescription>
|
||
Suivez l'évolution des votes et visualisez les tendances
|
||
</CardDescription>
|
||
</CardHeader>
|
||
<CardContent className="text-center">
|
||
<p className="text-slate-600 dark:text-slate-300">
|
||
Visualisez les projets les plus populaires et les résultats finaux
|
||
</p>
|
||
</CardContent>
|
||
</Card>
|
||
|
||
<Card className="border-0 shadow-lg hover:shadow-xl transition-shadow duration-300">
|
||
<CardHeader className="text-center">
|
||
<div className="w-12 h-12 bg-orange-100 dark:bg-orange-900 rounded-lg flex items-center justify-center mx-auto mb-4">
|
||
<span className="text-2xl">👥</span>
|
||
</div>
|
||
<CardTitle className="text-xl">Gestion des Participants</CardTitle>
|
||
<CardDescription>
|
||
Gérez facilement les membres de votre collectif
|
||
</CardDescription>
|
||
</CardHeader>
|
||
<CardContent className="text-center">
|
||
<p className="text-slate-600 dark:text-slate-300">
|
||
Invitez, gérez et suivez la participation de votre communauté
|
||
</p>
|
||
</CardContent>
|
||
</Card>
|
||
|
||
<Card className="border-0 shadow-lg hover:shadow-xl transition-shadow duration-300">
|
||
<CardHeader className="text-center">
|
||
<div className="w-12 h-12 bg-indigo-100 dark:bg-indigo-900 rounded-lg flex items-center justify-center mx-auto mb-4">
|
||
<span className="text-2xl">⚙️</span>
|
||
</div>
|
||
<CardTitle className="text-xl">Administration Complète</CardTitle>
|
||
<CardDescription>
|
||
Interface d'administration intuitive et puissante
|
||
</CardDescription>
|
||
</CardHeader>
|
||
<CardContent className="text-center">
|
||
<p className="text-slate-600 dark:text-slate-300">
|
||
Créez des campagnes, gérez les emails et analysez les statistiques
|
||
</p>
|
||
</CardContent>
|
||
</Card>
|
||
|
||
<Card className="border-0 shadow-lg hover:shadow-xl transition-shadow duration-300">
|
||
<CardHeader className="text-center">
|
||
<div className="w-12 h-12 bg-emerald-100 dark:bg-emerald-900 rounded-lg flex items-center justify-center mx-auto mb-4">
|
||
<span className="text-2xl">🔓</span>
|
||
</div>
|
||
<CardTitle className="text-xl">Open Source</CardTitle>
|
||
<CardDescription>
|
||
Logiciel libre et transparent pour tous
|
||
</CardDescription>
|
||
</CardHeader>
|
||
<CardContent className="text-center">
|
||
<p className="text-slate-600 dark:text-slate-300">
|
||
Code source ouvert, modifiable et adaptable à vos besoins
|
||
</p>
|
||
</CardContent>
|
||
</Card>
|
||
</div>
|
||
|
||
{/* Administration Button */}
|
||
<div className="text-center mb-16">
|
||
<Button asChild size="lg" className="text-lg px-8 py-6">
|
||
<Link href="/admin">
|
||
🔐 Espace Administration
|
||
</Link>
|
||
</Button>
|
||
</div>
|
||
|
||
{/* CTA Section */}
|
||
<Card className="border-0 shadow-xl bg-gradient-to-r from-blue-600 to-purple-600 text-white">
|
||
<CardContent className="p-8 text-center">
|
||
<h2 className="text-3xl font-bold mb-4">
|
||
Envie de participer ?
|
||
</h2>
|
||
<p className="text-xl mb-6 opacity-90">
|
||
Dotez votre collectif d'outils pour prendre des décisions budgétaires en utilisant l'intelligence collective
|
||
</p>
|
||
<Button asChild size="lg" variant="secondary" className="text-lg px-8 py-6">
|
||
<Link href={PROJECT_CONFIG.repository.url} target="_blank" rel="noopener noreferrer">
|
||
Obtenir l'outil
|
||
</Link>
|
||
</Button>
|
||
</CardContent>
|
||
</Card>
|
||
|
||
{/* Footer */}
|
||
<Footer variant="home" />
|
||
|
||
{/* Version Display */}
|
||
<VersionDisplay />
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|