Meilleur design via Shadcn/ui
This commit is contained in:
Yannick Le Duc
147
src/app/page.tsx
147
src/app/page.tsx
@@ -1,63 +1,108 @@
|
||||
import Link from 'next/link';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
|
||||
export default function HomePage() {
|
||||
return (
|
||||
<div className="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100 flex items-center justify-center">
|
||||
<div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
|
||||
<div className="bg-white rounded-2xl shadow-xl p-8 md:p-12">
|
||||
<h1 className="text-4xl md:text-6xl font-bold text-gray-900 mb-6">
|
||||
<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 md:text-2xl text-gray-600 mb-8 leading-relaxed">
|
||||
Participez aux décisions budgétaires de vos collectifs
|
||||
<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 className="space-y-4">
|
||||
<Link
|
||||
href="/admin"
|
||||
className="inline-flex items-center px-8 py-4 bg-indigo-600 text-white font-semibold rounded-lg hover:bg-indigo-700 transition-colors duration-200 shadow-lg hover:shadow-xl"
|
||||
>
|
||||
<svg className="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
|
||||
</svg>
|
||||
Accès Admin
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
<div className="mt-12 grid grid-cols-1 md:grid-cols-3 gap-6 text-left">
|
||||
<div className="bg-blue-50 p-6 rounded-xl">
|
||||
<div className="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center mb-4">
|
||||
<svg className="w-6 h-6 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
|
||||
</svg>
|
||||
</div>
|
||||
<h3 className="font-semibold text-gray-900 mb-2">Déposez vos propositions</h3>
|
||||
<p className="text-gray-600">Soumettez vos idées pour améliorer votre collectif</p>
|
||||
</div>
|
||||
|
||||
<div className="bg-green-50 p-6 rounded-xl">
|
||||
<div className="w-12 h-12 bg-green-100 rounded-lg flex items-center justify-center mb-4">
|
||||
<svg className="w-6 h-6 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
</div>
|
||||
<h3 className="font-semibold text-gray-900 mb-2">Votez collectivement</h3>
|
||||
<p className="text-gray-600">Participez aux décisions avec votre budget alloué</p>
|
||||
</div>
|
||||
|
||||
<div className="bg-purple-50 p-6 rounded-xl">
|
||||
<div className="w-12 h-12 bg-purple-100 rounded-lg flex items-center justify-center mb-4">
|
||||
<svg className="w-6 h-6 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6" />
|
||||
</svg>
|
||||
</div>
|
||||
<h3 className="font-semibold text-gray-900 mb-2">Suivez les résultats</h3>
|
||||
<p className="text-gray-600">Découvrez quelles propositions ont été sélectionnées</p>
|
||||
</div>
|
||||
<div className="flex flex-col sm:flex-row gap-4 justify-center">
|
||||
<Button asChild size="lg" className="text-lg px-8 py-6">
|
||||
<Link href="/admin">
|
||||
🛠️ Espace Administration
|
||||
</Link>
|
||||
</Button>
|
||||
<Button asChild variant="outline" size="lg" className="text-lg px-8 py-6">
|
||||
<Link href="#features">
|
||||
📋 Découvrir les fonctionnalités
|
||||
</Link>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Features Section */}
|
||||
<div id="features" className="grid md: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</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</CardTitle>
|
||||
<CardDescription>
|
||||
Suivez en temps réel l'évolution des votes
|
||||
</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>
|
||||
</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">
|
||||
Prêt à participer ?
|
||||
</h2>
|
||||
<p className="text-xl mb-6 opacity-90">
|
||||
Rejoignez votre collectif et prenez part aux décisions qui vous concernent
|
||||
</p>
|
||||
<Button asChild size="lg" variant="secondary" className="text-lg px-8 py-6">
|
||||
<Link href="/admin">
|
||||
Commencer maintenant
|
||||
</Link>
|
||||
</Button>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user