feat: homepage and skills : sorting and coloring

components/home/mentor-section.tsx

@@ -13,6 +13,22 @@ export function MentorSection({
   userEvaluation,
   skillCategories,
 }: MentorSectionProps) {
+  // Fonction de tri par importance
+  const sortByImportance = (
+    a: { importance: string },
+    b: { importance: string }
+  ) => {
+    const importanceOrder = {
+      incontournable: 2,
+      majeure: 1,
+      standard: 0,
+    };
+    return (
+      importanceOrder[b.importance as keyof typeof importanceOrder] -
+      importanceOrder[a.importance as keyof typeof importanceOrder]
+    );
+  };
+
   // Récupérer les compétences maîtrisées (expert uniquement)
   const masteredSkills = userEvaluation.evaluations.flatMap((cat) => {
     const skillCategory = skillCategories.find(
@@ -81,6 +97,40 @@ export function MentorSection({
       className={`bg-white/5 border border-white/10 rounded-xl p-6 backdrop-blur-sm ${className}`}
     >
       <div className="space-y-6">
+        {/* Peut mentorer */}
+        <div>
+          <h3 className="text-lg font-semibold text-white mb-3 flex items-center gap-2">
+            <span className="w-2 h-2 bg-blue-400 rounded-full"></span>
+            Peut mentorer
+          </h3>
+          <div className="flex flex-wrap gap-3">
+            {mentorSkills.length > 0 ? (
+              mentorSkills.sort(sortByImportance).map((tech) => {
+                const colors = getImportanceColors(tech.importance);
+                return (
+                  <div
+                    key={tech.id}
+                    className={`flex items-center gap-2 px-3 py-2 rounded-lg ${colors.bg} ${colors.border} border transition-all hover:scale-105`}
+                  >
+                    <TechIcon
+                      iconName={tech.icon}
+                      className="w-4 h-4"
+                      fallbackText={tech.name}
+                    />
+                    <span className={`text-sm font-medium ${colors.text}`}>
+                      {tech.name}
+                    </span>
+                  </div>
+                );
+              })
+            ) : (
+              <p className="text-slate-400 text-sm">
+                Aucune compétence mentor configurée
+              </p>
+            )}
+          </div>
+        </div>
+
         {/* Technologies maîtrisées */}
         <div>
           <h3 className="text-lg font-semibold text-white mb-3 flex items-center gap-2">
@@ -89,7 +139,7 @@ export function MentorSection({
           </h3>
           <div className="flex flex-wrap gap-3">
             {masteredSkills.length > 0 ? (
-              masteredSkills.map((tech) => {
+              masteredSkills.sort(sortByImportance).map((tech) => {
                 const colors = getImportanceColors(tech.importance);
                 return (
                   <div
@@ -116,40 +166,6 @@ export function MentorSection({
           </div>
         </div>
 
-        {/* Peut mentorer */}
-        <div>
-          <h3 className="text-lg font-semibold text-white mb-3 flex items-center gap-2">
-            <span className="w-2 h-2 bg-blue-400 rounded-full"></span>
-            Peut mentorer
-          </h3>
-          <div className="flex flex-wrap gap-3">
-            {mentorSkills.length > 0 ? (
-              mentorSkills.map((tech) => {
-                const colors = getImportanceColors(tech.importance);
-                return (
-                  <div
-                    key={tech.id}
-                    className={`flex items-center gap-2 px-3 py-2 rounded-lg ${colors.bg} ${colors.border} border transition-all hover:scale-105`}
-                  >
-                    <TechIcon
-                      iconName={tech.icon}
-                      className="w-4 h-4"
-                      fallbackText={tech.name}
-                    />
-                    <span className={`text-sm font-medium ${colors.text}`}>
-                      {tech.name}
-                    </span>
-                  </div>
-                );
-              })
-            ) : (
-              <p className="text-slate-400 text-sm">
-                Aucune compétence mentor configurée
-              </p>
-            )}
-          </div>
-        </div>
-
         {/* Technologies à apprendre */}
         <div>
           <h3 className="text-lg font-semibold text-white mb-3 flex items-center gap-2">
@@ -158,7 +174,7 @@ export function MentorSection({
           </h3>
           <div className="flex flex-wrap gap-3">
             {learningSkills.length > 0 ? (
-              learningSkills.map((tech) => {
+              learningSkills.sort(sortByImportance).map((tech) => {
                 const colors = getImportanceColors(tech.importance);
                 return (
                   <div