feat: handling SSR on home page

components/home/action-section.tsx

@@ -0,0 +1,16 @@
+import { Button } from "@/components/ui/button";
+import Link from "next/link";
+
+export function ActionSection() {
+  return (
+    <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>
+  );
+}

components/home/category-breakdown.tsx

@@ -0,0 +1,66 @@
+import { CategoryCard } from "./category-card";
+
+interface CategoryBreakdownProps {
+  radarData: Array<{
+    category: string;
+    score: number;
+    maxScore: number;
+  }>;
+  userEvaluation: {
+    evaluations: Array<{
+      category: string;
+      selectedSkillIds: string[];
+      skills: Array<{
+        skillId: string;
+        level: string | null;
+      }>;
+    }>;
+  };
+  skillCategories: Array<{
+    category: string;
+    icon: string;
+    skills: Array<{
+      id: string;
+      name: string;
+      icon?: string;
+    }>;
+  }>;
+}
+
+export function CategoryBreakdown({
+  radarData,
+  userEvaluation,
+  skillCategories,
+}: CategoryBreakdownProps) {
+  return (
+    <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 skillCategory = skillCategories.find(
+            (sc) => sc.category === category.category
+          );
+
+          return (
+            <CategoryCard
+              key={category.category}
+              category={category}
+              categoryEval={categoryEval}
+              skillCategory={skillCategory}
+            />
+          );
+        })}
+      </div>
+    </div>
+  );
+}

components/home/category-card.tsx

@@ -0,0 +1,168 @@
+"use client";
+
+import { useState } from "react";
+import { Button } from "@/components/ui/button";
+import { ChevronDown, ChevronRight, ExternalLink } from "lucide-react";
+import { getCategoryIcon } from "@/lib/category-icons";
+import { getScoreColors } from "@/lib/score-utils";
+import { SkillProgress } from "./skill-progress";
+import Link from "next/link";
+
+interface CategoryCardProps {
+  category: {
+    category: string;
+    score: number;
+    maxScore: number;
+  };
+  categoryEval?: {
+    category: string;
+    selectedSkillIds: string[];
+    skills: Array<{
+      skillId: string;
+      level: string | null;
+    }>;
+  };
+  skillCategory?: {
+    category: string;
+    icon: string;
+    skills: Array<{
+      id: string;
+      name: string;
+      icon?: string;
+    }>;
+  };
+}
+
+export function CategoryCard({
+  category,
+  categoryEval,
+  skillCategory,
+}: CategoryCardProps) {
+  const [isExpanded, setIsExpanded] = useState(false);
+
+  const skillsCount = categoryEval?.selectedSkillIds?.length || 0;
+  const evaluatedCount =
+    categoryEval?.skills.filter((s) => s.level !== null).length || 0;
+
+  const CategoryIcon = skillCategory
+    ? getCategoryIcon(skillCategory.icon)
+    : null;
+
+  return (
+    <div className="bg-white/5 border border-white/10 rounded-lg overflow-hidden transition-colors">
+      <div
+        className="p-3 hover:bg-white/10 transition-colors cursor-pointer"
+        onClick={() => setIsExpanded(!isExpanded)}
+      >
+        <div className="flex justify-between items-center mb-2">
+          <div className="flex items-center gap-2">
+            {isExpanded ? (
+              <ChevronDown className="h-4 w-4 text-slate-400" />
+            ) : (
+              <ChevronRight className="h-4 w-4 text-slate-400" />
+            )}
+            {CategoryIcon && <CategoryIcon className="h-4 w-4 text-blue-400" />}
+            <h4 className="font-medium text-white text-sm">
+              {category.category}
+            </h4>
+          </div>
+          {skillsCount > 0 ? (
+            (() => {
+              const colors = getScoreColors(category.score);
+              return (
+                <div
+                  className={`px-2 py-0.5 rounded-full ${colors.bg} border ${colors.border}`}
+                >
+                  <span className={`text-xs font-medium ${colors.text}`}>
+                    {Math.round((category.score / 3) * 100)}%
+                  </span>
+                </div>
+              );
+            })()
+          ) : (
+            <div className="px-2 py-0.5 rounded-full bg-slate-500/20 border border-slate-500/30">
+              <span className="text-xs font-medium text-slate-400">Aucune</span>
+            </div>
+          )}
+        </div>
+        <div className="text-xs text-slate-400 mb-2">
+          {skillsCount > 0
+            ? `${evaluatedCount}/${skillsCount} compétences sélectionnées évaluées`
+            : "Aucune compétence sélectionnée"}
+        </div>
+        {skillsCount > 0 ? (
+          <div className="w-full bg-white/10 rounded-full h-1.5">
+            {(() => {
+              const colors = getScoreColors(category.score);
+              return (
+                <div
+                  className={`bg-gradient-to-r ${colors.gradient} h-1.5 rounded-full transition-all`}
+                  style={{
+                    width: `${(category.score / category.maxScore) * 100}%`,
+                  }}
+                ></div>
+              );
+            })()}
+          </div>
+        ) : (
+          <div className="w-full bg-slate-500/10 rounded-full h-1.5"></div>
+        )}
+      </div>
+
+      {/* Expanded Skills */}
+      {isExpanded && (
+        <div className="px-3 pb-3 border-t border-white/10 bg-white/5">
+          {categoryEval && skillCategory && skillsCount > 0 ? (
+            <div className="pt-3 space-y-2 max-h-60 overflow-y-auto">
+              {categoryEval.selectedSkillIds.map((skillId) => {
+                const skill = skillCategory.skills.find(
+                  (s) => s.id === skillId
+                );
+                if (!skill) return null;
+
+                const skillEval = categoryEval.skills.find(
+                  (s) => s.skillId === skillId
+                );
+                return (
+                  <SkillProgress
+                    key={skillId}
+                    skill={skill}
+                    skillEval={skillEval}
+                  />
+                );
+              })}
+            </div>
+          ) : (
+            <div className="pt-3 pb-3 text-center">
+              <p className="text-slate-400 text-sm mb-3">
+                Aucune compétence sélectionnée dans cette catégorie
+              </p>
+            </div>
+          )}
+
+          <div
+            className={`${
+              skillsCount > 0 ? "mt-3 pt-3 border-t border-white/10" : ""
+            }`}
+          >
+            <Button
+              asChild
+              className="w-full bg-blue-500 hover:bg-blue-600 text-white"
+            >
+              <Link
+                href={`/evaluation?category=${encodeURIComponent(
+                  category.category
+                )}`}
+              >
+                <ExternalLink className="w-4 h-4 mr-2" />
+                {skillsCount > 0
+                  ? `Évaluer ${category.category}`
+                  : `Commencer l'évaluation ${category.category}`}
+              </Link>
+            </Button>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

components/home/client-wrapper.tsx

@@ -0,0 +1,36 @@
+"use client";
+
+import { useEffect } from "react";
+import { useUser } from "@/hooks/use-user-context";
+import { UserEvaluation, Team } from "@/lib/types";
+
+interface ClientWrapperProps {
+  userEvaluation: UserEvaluation | null;
+  teams: Team[];
+  children: React.ReactNode;
+}
+
+export function ClientWrapper({
+  userEvaluation,
+  teams,
+  children,
+}: ClientWrapperProps) {
+  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]);
+
+  return <>{children}</>;
+}

components/home/index.ts

@@ -0,0 +1,9 @@
+export { LoadingPage } from "./loading-page";
+export { WelcomeHeader } from "./welcome-header";
+export { RadarSection } from "./radar-section";
+export { CategoryBreakdown } from "./category-breakdown";
+export { CategoryCard } from "./category-card";
+export { SkillProgress } from "./skill-progress";
+export { ActionSection } from "./action-section";
+export { ClientWrapper } from "./client-wrapper";
+export { WelcomeScreen } from "./welcome-screen";

components/home/loading-page.tsx

@@ -0,0 +1,17 @@
+export function LoadingPage() {
+  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>
+  );
+}

components/home/radar-section.tsx

@@ -0,0 +1,27 @@
+import { SkillsRadarChart } from "@/components/radar-chart";
+
+interface RadarSectionProps {
+  radarData: Array<{
+    category: string;
+    score: number;
+    maxScore: number;
+  }>;
+}
+
+export function RadarSection({ radarData }: RadarSectionProps) {
+  return (
+    <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">
+          Radar chart représentant votre niveau par catégorie
+        </p>
+      </div>
+      <div className="h-80">
+        <SkillsRadarChart data={radarData} />
+      </div>
+    </div>
+  );
+}

components/home/skill-progress.tsx

@@ -0,0 +1,36 @@
+import { TechIcon } from "@/components/icons/tech-icon";
+import { getSkillLevelLabel } from "@/lib/score-utils";
+
+interface SkillProgressProps {
+  skill: {
+    id: string;
+    name: string;
+    icon?: string;
+  };
+  skillEval?: {
+    skillId: string;
+    level: string | null;
+  };
+}
+
+export function SkillProgress({ skill, skillEval }: SkillProgressProps) {
+  return (
+    <div className="flex items-center justify-between p-2 bg-white/5 border border-white/10 rounded-lg">
+      <div className="flex items-center gap-2">
+        <TechIcon
+          iconName={skill.icon || ""}
+          className="w-4 h-4 text-blue-400"
+          fallbackText={skill.name}
+        />
+        <span className="text-sm text-white">{skill.name}</span>
+      </div>
+      <div className="flex items-center gap-2">
+        {skillEval?.level && (
+          <span className="text-xs text-slate-400">
+            {getSkillLevelLabel(skillEval.level)}
+          </span>
+        )}
+      </div>
+    </div>
+  );
+}

components/home/welcome-header.tsx

@@ -0,0 +1,24 @@
+import { Code2 } from "lucide-react";
+
+interface WelcomeHeaderProps {
+  firstName: string;
+}
+
+export function WelcomeHeader({ firstName }: WelcomeHeaderProps) {
+  return (
+    <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 {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>
+  );
+}

components/home/welcome-screen.tsx

@@ -0,0 +1,74 @@
+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>
+  );
+}
+