init

app/evaluation/page.tsx

@@ -0,0 +1,102 @@
+"use client";
+
+import { useEffect } from "react";
+import { useEvaluation } from "@/hooks/use-evaluation";
+import { ProfileForm } from "@/components/profile-form";
+import { SkillEvaluation } from "@/components/skill-evaluation";
+import { useUser } from "@/hooks/use-user-context";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+
+export default function EvaluationPage() {
+  const {
+    userEvaluation,
+    skillCategories,
+    teams,
+    loading,
+    updateProfile,
+    updateSkillLevel,
+    addSkillToEvaluation,
+    removeSkillFromEvaluation,
+    initializeEmptyEvaluation,
+  } = useEvaluation();
+
+  const { setUserInfo } = useUser();
+
+  // Update user info in navigation when user evaluation is loaded
+  useEffect(() => {
+    if (userEvaluation) {
+      const teamName =
+        teams.find((t) => t.id === userEvaluation.profile.teamId)?.name || "";
+      setUserInfo({
+        firstName: userEvaluation.profile.firstName,
+        lastName: userEvaluation.profile.lastName,
+        teamName,
+      });
+    } else {
+      setUserInfo(null);
+    }
+  }, [userEvaluation, teams, setUserInfo]);
+
+  if (loading) {
+    return (
+      <div className="container mx-auto py-8">
+        <div className="flex items-center justify-center min-h-[400px]">
+          <div className="text-center">
+            <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary mx-auto mb-4"></div>
+            <p>Chargement...</p>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  // If no user evaluation exists, show profile form
+  if (!userEvaluation) {
+    const handleProfileSubmit = (profile: any) => {
+      initializeEmptyEvaluation(profile);
+    };
+
+    return (
+      <div className="min-h-screen bg-gradient-to-br from-slate-950 via-slate-900 to-slate-950 relative overflow-hidden">
+        <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="relative z-10 container mx-auto py-16 px-6">
+          <div className="text-center mb-12">
+            <h1 className="text-4xl font-bold mb-4 text-white">
+              Commencer l'évaluation
+            </h1>
+            <p className="text-lg text-slate-400 mb-8">
+              Renseignez vos informations pour débuter votre auto-évaluation
+            </p>
+          </div>
+
+          <div className="max-w-2xl mx-auto">
+            <ProfileForm teams={teams} onSubmit={handleProfileSubmit} />
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div>
+      {/* Skill Evaluation */}
+      {skillCategories.length > 0 && userEvaluation.evaluations.length > 0 && (
+        <SkillEvaluation
+          categories={skillCategories}
+          evaluations={userEvaluation.evaluations}
+          onUpdateSkill={updateSkillLevel}
+          onAddSkill={addSkillToEvaluation}
+          onRemoveSkill={removeSkillFromEvaluation}
+        />
+      )}
+    </div>
+  );
+}

app/globals.css

@@ -0,0 +1,466 @@
+@import "tailwindcss";
+
+/* Modern grid background effect */
+.bg-grid-slate-700\/25 {
+  background-image: radial-gradient(
+    circle,
+    rgb(51 65 85 / 0.25) 1px,
+    transparent 1px
+  );
+}
+
+/* Cyberpunk glow effects */
+.glow-violet {
+  box-shadow: 0 0 20px rgb(139 92 246 / 0.3);
+}
+
+.glow-cyan {
+  box-shadow: 0 0 20px rgb(34 211 238 / 0.3);
+}
+
+/* Animated gradient text */
+.gradient-text {
+  background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
+  background-size: 400% 400%;
+  animation: gradient 15s ease infinite;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+
+@keyframes gradient {
+  0% {
+    background-position: 0% 50%;
+  }
+  50% {
+    background-position: 100% 50%;
+  }
+  100% {
+    background-position: 0% 50%;
+  }
+}
+
+/* Floating animation for tech elements */
+.float {
+  animation: float 6s ease-in-out infinite;
+}
+
+@keyframes float {
+  0% {
+    transform: translateY(0px);
+  }
+  50% {
+    transform: translateY(-10px);
+  }
+  100% {
+    transform: translateY(0px);
+  }
+}
+
+/* Pulse effect for active elements */
+.pulse-slow {
+  animation: pulse-slow 3s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+}
+
+@keyframes pulse-slow {
+  0%,
+  100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.8;
+  }
+}
+
+/* Tech border animations */
+.tech-border {
+  position: relative;
+  overflow: hidden;
+}
+
+.tech-border::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: -100%;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(
+    90deg,
+    transparent,
+    rgba(139, 92, 246, 0.4),
+    transparent
+  );
+  transition: left 0.5s;
+}
+
+.tech-border:hover::before {
+  left: 100%;
+}
+@import "tw-animate-css";
+
+@custom-variant dark (&:is(.dark *));
+
+:root {
+  --background: oklch(0.98 0.005 240);
+  --foreground: oklch(0.145 0 0);
+  --card: oklch(0.995 0.003 240);
+  --card-foreground: oklch(0.145 0 0);
+  --popover: oklch(0.995 0.003 240);
+  --popover-foreground: oklch(0.145 0 0);
+  --primary: oklch(0.205 0 0);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.955 0.01 240);
+  --secondary-foreground: oklch(0.205 0 0);
+  --muted: oklch(0.955 0.01 240);
+  --muted-foreground: oklch(0.556 0 0);
+  --accent: oklch(0.955 0.01 240);
+  --accent-foreground: oklch(0.205 0 0);
+  --destructive: oklch(0.577 0.245 27.325);
+  --destructive-foreground: oklch(0.577 0.245 27.325);
+  --border: oklch(0.895 0.015 240);
+  --input: oklch(0.895 0.015 240);
+  --ring: oklch(0.708 0 0);
+  --chart-1: oklch(0.646 0.222 41.116);
+  --chart-2: oklch(0.6 0.118 184.704);
+  --chart-3: oklch(0.398 0.07 227.392);
+  --chart-4: oklch(0.828 0.189 84.429);
+  --chart-5: oklch(0.769 0.188 70.08);
+  --radius: 0.625rem;
+  --sidebar: oklch(0.98 0.005 240);
+  --sidebar-foreground: oklch(0.145 0 0);
+  --sidebar-primary: oklch(0.205 0 0);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.955 0.01 240);
+  --sidebar-accent-foreground: oklch(0.205 0 0);
+  --sidebar-border: oklch(0.895 0.015 240);
+  --sidebar-ring: oklch(0.708 0 0);
+}
+
+.dark {
+  --background: oklch(0.11 0.015 245);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.18 0.02 245);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.18 0.02 245);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.985 0 0);
+  --primary-foreground: oklch(0.205 0 0);
+  --secondary: oklch(0.25 0.025 245);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.25 0.025 245);
+  --muted-foreground: oklch(0.708 0 0);
+  --accent: oklch(0.25 0.025 245);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.396 0.141 25.723);
+  --destructive-foreground: oklch(0.637 0.237 25.331);
+  --border: oklch(0.32 0.03 245);
+  --input: oklch(0.32 0.03 245);
+  --ring: oklch(0.439 0 0);
+  --chart-1: oklch(0.488 0.243 264.376);
+  --chart-2: oklch(0.696 0.17 162.48);
+  --chart-3: oklch(0.769 0.188 70.08);
+  --chart-4: oklch(0.627 0.265 303.9);
+  --chart-5: oklch(0.645 0.246 16.439);
+  --sidebar: oklch(0.16 0.02 245);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.488 0.243 264.376);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.25 0.025 245);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(0.32 0.03 245);
+  --sidebar-ring: oklch(0.439 0 0);
+}
+
+@theme inline {
+  --font-sans: var(--font-inter);
+  --font-mono: var(--font-jetbrains-mono);
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}
+
+/* Custom scrollbar */
+::-webkit-scrollbar {
+  width: 6px;
+}
+
+::-webkit-scrollbar-track {
+  background: #f1f5f9;
+}
+
+::-webkit-scrollbar-thumb {
+  background: #cbd5e1;
+  border-radius: 3px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: #94a3b8;
+}
+
+/* Dark mode scrollbar */
+.dark ::-webkit-scrollbar-track {
+  background: #1e293b;
+}
+
+.dark ::-webkit-scrollbar-thumb {
+  background: #475569;
+}
+
+.dark ::-webkit-scrollbar-thumb:hover {
+  background: #64748b;
+}
+
+/* Code syntax highlighting */
+pre code {
+  font-family: var(--font-mono);
+}
+
+/* Adding tech-style custom animations and effects */
+@keyframes matrix-rain {
+  0% {
+    transform: translateY(-100vh);
+    opacity: 0;
+  }
+  10% {
+    opacity: 1;
+  }
+  90% {
+    opacity: 1;
+  }
+  100% {
+    transform: translateY(100vh);
+    opacity: 0;
+  }
+}
+
+@keyframes glow-pulse {
+  0%,
+  100% {
+    box-shadow: 0 0 5px currentColor;
+  }
+  50% {
+    box-shadow: 0 0 20px currentColor, 0 0 30px currentColor;
+  }
+}
+
+.matrix-rain {
+  animation: matrix-rain 3s linear infinite;
+}
+
+.glow-pulse {
+  animation: glow-pulse 2s ease-in-out infinite;
+}
+
+/* Tech grid background */
+.tech-grid {
+  background-image: linear-gradient(
+      rgba(59, 130, 246, 0.1) 1px,
+      transparent 1px
+    ),
+    linear-gradient(90deg, rgba(59, 130, 246, 0.1) 1px, transparent 1px);
+  background-size: 50px 50px;
+}
+
+/* Glitch effect for headers */
+.glitch {
+  position: relative;
+}
+
+.glitch::before,
+.glitch::after {
+  content: attr(data-text);
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+
+.glitch::before {
+  animation: glitch-1 0.5s infinite;
+  color: #ff0000;
+  z-index: -1;
+}
+
+.glitch::after {
+  animation: glitch-2 0.5s infinite;
+  color: #00ff00;
+  z-index: -2;
+}
+
+@keyframes glitch-1 {
+  0%,
+  14%,
+  15%,
+  49%,
+  50%,
+  99%,
+  100% {
+    transform: translate(0);
+  }
+  15%,
+  49% {
+    transform: translate(-2px, -1px);
+  }
+}
+
+@keyframes glitch-2 {
+  0%,
+  20%,
+  21%,
+  62%,
+  63%,
+  99%,
+  100% {
+    transform: translate(0);
+  }
+  21%,
+  62% {
+    transform: translate(2px, 1px);
+  }
+}
+
+/* Terminal cursor */
+.terminal-cursor::after {
+  content: "▋";
+  animation: blink 1s infinite;
+  color: #00ff00;
+}
+
+@keyframes blink {
+  0%,
+  50% {
+    opacity: 1;
+  }
+  51%,
+  100% {
+    opacity: 0;
+  }
+}
+
+/* Holographic animations */
+@keyframes holo-shift {
+  0% {
+    filter: hue-rotate(0deg);
+  }
+  25% {
+    filter: hue-rotate(90deg);
+  }
+  50% {
+    filter: hue-rotate(180deg);
+  }
+  75% {
+    filter: hue-rotate(270deg);
+  }
+  100% {
+    filter: hue-rotate(360deg);
+  }
+}
+
+@keyframes holo-scan {
+  0% {
+    transform: translateX(-100%) skewX(-12deg);
+  }
+  100% {
+    transform: translateX(300%) skewX(-12deg);
+  }
+}
+
+@keyframes holo-line-1 {
+  0%,
+  100% {
+    opacity: 0;
+    transform: scaleX(0);
+  }
+  50% {
+    opacity: 1;
+    transform: scaleX(1);
+  }
+}
+
+@keyframes holo-line-2 {
+  0%,
+  100% {
+    opacity: 0;
+    transform: scaleX(0);
+  }
+  60% {
+    opacity: 1;
+    transform: scaleX(1);
+  }
+}
+
+@keyframes holo-line-3 {
+  0%,
+  100% {
+    opacity: 0;
+    transform: scaleX(0);
+  }
+  70% {
+    opacity: 1;
+    transform: scaleX(1);
+  }
+}
+
+.animate-holo-shift {
+  animation: holo-shift 3s ease-in-out infinite;
+}
+
+.animate-holo-scan {
+  animation: holo-scan 2s ease-out infinite;
+}
+
+.animate-holo-line-1 {
+  animation: holo-line-1 2s ease-in-out infinite;
+}
+
+.animate-holo-line-2 {
+  animation: holo-line-2 2.2s ease-in-out infinite;
+}
+
+.animate-holo-line-3 {
+  animation: holo-line-3 2.4s ease-in-out infinite;
+}

app/layout.tsx

@@ -0,0 +1,41 @@
+import type { Metadata } from "next";
+import { GeistSans } from "geist/font/sans";
+import { GeistMono } from "geist/font/mono";
+import "./globals.css";
+import { ThemeProvider } from "@/components/layout/theme-provider";
+import { Toaster } from "@/components/ui/sonner";
+import { UserProvider } from "@/hooks/use-user-context";
+import { NavigationWrapper } from "@/components/layout/navigation-wrapper";
+
+export const metadata: Metadata = {
+  title: "PeakSkills - Auto-évaluation de compétences",
+  description:
+    "Plateforme d'auto-évaluation de compétences techniques pour les équipes",
+};
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <html lang="en" suppressHydrationWarning>
+      <body
+        className={`${GeistSans.variable} ${GeistMono.variable} antialiased`}
+      >
+        <ThemeProvider
+          attribute="class"
+          defaultTheme="system"
+          enableSystem
+          disableTransitionOnChange
+        >
+          <UserProvider>
+            <NavigationWrapper />
+            <main className="min-h-screen">{children}</main>
+            <Toaster />
+          </UserProvider>
+        </ThemeProvider>
+      </body>
+    </html>
+  );
+}

app/page.tsx

@@ -0,0 +1,201 @@
+"use client";
+
+import { useEffect } from "react";
+import { useEvaluation } from "@/hooks/use-evaluation";
+import { ProfileForm } from "@/components/profile-form";
+import { SkillsRadarChart } from "@/components/radar-chart";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
+import { generateRadarData } from "@/lib/evaluation-utils";
+import { useUser } from "@/hooks/use-user-context";
+import Link from "next/link";
+import { Code2 } from "lucide-react";
+
+export default function HomePage() {
+  const { userEvaluation, skillCategories, teams, loading, updateProfile } =
+    useEvaluation();
+
+  const { setUserInfo } = useUser();
+
+  // Update user info in navigation when user evaluation is loaded
+  useEffect(() => {
+    if (userEvaluation) {
+      const teamName =
+        teams.find((t) => t.id === userEvaluation.profile.teamId)?.name || "";
+      setUserInfo({
+        firstName: userEvaluation.profile.firstName,
+        lastName: userEvaluation.profile.lastName,
+        teamName,
+      });
+    } else {
+      setUserInfo(null);
+    }
+  }, [userEvaluation, teams, setUserInfo]);
+
+  if (loading) {
+    return (
+      <div className="min-h-screen bg-gradient-to-br from-slate-950 via-slate-900 to-slate-950 relative overflow-hidden">
+        <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="relative z-10 container mx-auto py-16 px-6">
+          <div className="flex items-center justify-center min-h-[400px]">
+            <div className="text-center">
+              <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-400 mx-auto mb-4"></div>
+              <p className="text-white">Chargement...</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  if (!userEvaluation) {
+    return (
+      <div className="min-h-screen bg-gradient-to-br from-slate-950 via-slate-900 to-slate-950 relative overflow-hidden">
+        <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="relative z-10 container mx-auto py-16 px-6">
+          <div className="text-center mb-12">
+            <h1 className="text-4xl font-bold mb-4 text-white">
+              Bienvenue sur PeakSkills
+            </h1>
+            <p className="text-lg text-slate-400 mb-8">
+              Évaluez vos compétences techniques et suivez votre progression
+            </p>
+          </div>
+
+          <div className="max-w-2xl mx-auto">
+            <ProfileForm teams={teams} onSubmit={updateProfile} />
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  const radarData = generateRadarData(
+    userEvaluation.evaluations,
+    skillCategories
+  );
+
+  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-8 max-w-7xl space-y-8">
+        {/* Header */}
+        <div className="text-center space-y-4 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">
+            <Code2 className="h-4 w-4 text-blue-400" />
+            <span className="text-sm font-medium text-slate-200">
+              Tableau de bord
+            </span>
+          </div>
+
+          <h1 className="text-4xl font-bold text-white">
+            Bonjour {userEvaluation.profile.firstName} !
+          </h1>
+
+          <p className="text-slate-400 max-w-2xl mx-auto leading-relaxed">
+            Voici un aperçu de vos compétences techniques
+          </p>
+        </div>
+
+        {/* Main Content Grid */}
+        <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
+          {/* Radar Chart */}
+          <div className="bg-white/5 backdrop-blur-sm border border-white/10 rounded-2xl p-6">
+            <div className="mb-6">
+              <h3 className="text-xl font-bold text-white mb-2">
+                Vue d'ensemble de vos compétences
+              </h3>
+              <p className="text-slate-400 text-sm">
+                Graphique radar représentant votre niveau moyen par catégorie
+              </p>
+            </div>
+            <div className="h-80">
+              <SkillsRadarChart data={radarData} />
+            </div>
+          </div>
+
+          {/* Category Breakdown */}
+          <div className="bg-white/5 backdrop-blur-sm border border-white/10 rounded-2xl p-6">
+            <div className="mb-6">
+              <h3 className="text-xl font-bold text-white mb-2">
+                Détail par catégorie
+              </h3>
+              <p className="text-slate-400 text-sm">
+                Vue détaillée de votre progression dans chaque domaine
+              </p>
+            </div>
+            <div className="space-y-3">
+              {radarData.map((category) => {
+                const categoryEval = userEvaluation.evaluations.find(
+                  (e) => e.category === category.category
+                );
+                const skillsCount = categoryEval?.selectedSkillIds?.length || 0;
+                const evaluatedCount =
+                  categoryEval?.skills.filter((s) => s.level !== null).length ||
+                  0;
+
+                return (
+                  <div
+                    key={category.category}
+                    className="bg-white/5 border border-white/10 rounded-lg p-3 hover:bg-white/10 transition-colors"
+                  >
+                    <div className="flex justify-between items-center mb-2">
+                      <h4 className="font-medium text-white text-sm">
+                        {category.category}
+                      </h4>
+                      <div className="px-2 py-0.5 rounded-full bg-blue-500/20 border border-blue-500/30">
+                        <span className="text-xs font-medium text-blue-400">
+                          {category.score.toFixed(1)}/3
+                        </span>
+                      </div>
+                    </div>
+                    <div className="text-xs text-slate-400 mb-2">
+                      {evaluatedCount}/{skillsCount} compétences sélectionnées
+                      évaluées
+                    </div>
+                    <div className="w-full bg-white/10 rounded-full h-1.5">
+                      <div
+                        className="bg-gradient-to-r from-blue-500 to-blue-400 h-1.5 rounded-full transition-all"
+                        style={{
+                          width: `${
+                            (category.score / category.maxScore) * 100
+                          }%`,
+                        }}
+                      ></div>
+                    </div>
+                  </div>
+                );
+              })}
+            </div>
+          </div>
+        </div>
+
+        {/* Action Button */}
+        <div className="flex justify-center mt-12">
+          <Button
+            asChild
+            size="lg"
+            className="bg-blue-500 hover:bg-blue-600 text-white px-8 py-3 rounded-xl"
+          >
+            <Link href="/evaluation">Continuer l'évaluation</Link>
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}