feat: handling SSR on home page

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>
+  );
+}