75 lines
3.4 KiB
TypeScript
75 lines
3.4 KiB
TypeScript
import { Code2, ArrowRight, Target } from "lucide-react";
|
|
import Link from "next/link";
|
|
|
|
export function WelcomeScreen() {
|
|
return (
|
|
<div className="min-h-screen bg-gradient-to-br from-slate-950 via-slate-900 to-slate-950 relative overflow-hidden">
|
|
{/* Background Effects */}
|
|
<div className="absolute inset-0 bg-[radial-gradient(ellipse_at_top,_var(--tw-gradient-stops))] from-blue-900/20 via-slate-900 to-slate-950" />
|
|
<div className="absolute inset-0 bg-grid-white/5 bg-[size:50px_50px]" />
|
|
<div className="absolute inset-0 bg-gradient-to-t from-slate-950 via-transparent to-transparent" />
|
|
|
|
<div className="relative z-10 container mx-auto px-6 py-16">
|
|
<div className="text-center mb-12">
|
|
<div className="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-white/5 border border-white/10 backdrop-blur-sm mb-6">
|
|
<Code2 className="h-4 w-4 text-blue-400" />
|
|
<span className="text-sm font-medium text-slate-200">
|
|
PeakSkills
|
|
</span>
|
|
</div>
|
|
|
|
<h1 className="text-4xl font-bold mb-4 text-white">
|
|
Bienvenue ! Commencez votre parcours
|
|
</h1>
|
|
<p className="text-lg text-slate-400 mb-12 max-w-2xl mx-auto">
|
|
Vous êtes connecté avec succès. Il est temps d'évaluer vos
|
|
compétences techniques pour obtenir une vue d'ensemble personnalisée
|
|
de votre expertise.
|
|
</p>
|
|
|
|
<div className="max-w-4xl mx-auto mb-12">
|
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
|
|
<div className="bg-white/5 border border-white/10 rounded-xl p-6 backdrop-blur-sm">
|
|
<Target className="h-8 w-8 text-blue-400 mb-4 mx-auto" />
|
|
<h3 className="text-white font-semibold mb-2">
|
|
Évaluez vos compétences
|
|
</h3>
|
|
<p className="text-slate-400 text-sm">
|
|
Sélectionnez vos domaines d'expertise et évaluez votre niveau
|
|
</p>
|
|
</div>
|
|
<div className="bg-white/5 border border-white/10 rounded-xl p-6 backdrop-blur-sm">
|
|
<div className="h-8 w-8 bg-gradient-to-r from-violet-400 to-blue-400 rounded-full mb-4 mx-auto" />
|
|
<h3 className="text-white font-semibold mb-2">
|
|
Visualisez vos forces
|
|
</h3>
|
|
<p className="text-slate-400 text-sm">
|
|
Obtenez un radar chart personnalisé de vos compétences
|
|
</p>
|
|
</div>
|
|
<div className="bg-white/5 border border-white/10 rounded-xl p-6 backdrop-blur-sm">
|
|
<div className="h-8 w-8 bg-gradient-to-r from-green-400 to-emerald-400 rounded-full mb-4 mx-auto" />
|
|
<h3 className="text-white font-semibold mb-2">
|
|
Suivez votre progression
|
|
</h3>
|
|
<p className="text-slate-400 text-sm">
|
|
Mettez à jour vos évaluations au fil de votre évolution
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<Link
|
|
href="/evaluation"
|
|
className="group bg-blue-500 hover:bg-blue-600 text-white px-8 py-4 rounded-xl font-medium transition-all inline-flex items-center gap-2"
|
|
>
|
|
Commencer l'évaluation
|
|
<ArrowRight className="h-4 w-4 group-hover:translate-x-1 transition-transform" />
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|