Enhance UI consistency in House components: Replace SectionTitle with styled headings in HouseCard, HouseManagement, and HousesSection for improved visual hierarchy and readability. Update styles for better alignment and user experience.

app/style-guide/page.tsx

@@ -31,7 +31,7 @@ export default function StyleGuidePage() {
       <Navigation />
       <BackgroundSection backgroundImage="/got-2.jpg" className="pt-24 pb-16">
         <div className="w-full max-w-6xl mx-auto px-8">
-          <SectionTitle variant="gradient" size="xl" className="mb-12">
+          <SectionTitle variant="gradient" size="xl" className="mb-16">
             STYLE GUIDE
           </SectionTitle>
           <p className="text-gray-400 text-center mb-12 max-w-3xl mx-auto">

components/admin/AdminPanel.tsx

@@ -38,7 +38,7 @@ export default function AdminPanel({ initialPreferences }: AdminPanelProps) {
   return (
     <section className="relative w-full min-h-screen flex flex-col items-center overflow-hidden pt-24 pb-16">
       <div className="relative z-10 w-full max-w-6xl mx-auto px-8 py-16">
-        <SectionTitle variant="gradient" size="md" className="mb-8 text-center">
+        <SectionTitle variant="gradient" size="md" className="mb-16 text-center">
           ADMIN
         </SectionTitle>
 

components/challenges/ChallengesSection.tsx

@@ -159,9 +159,18 @@ export default function ChallengesSection({
       </div>
 
       <div className="relative z-10 w-full max-w-6xl mx-auto px-4 sm:px-8 py-16">
-        <SectionTitle variant="gradient" size="md" className="mb-8 text-center">
+        <SectionTitle
+          variant="gradient"
+          size="xl"
+          subtitle="Défiez vos collègues et gagnez des points"
+          className="mb-16"
+        >
           DÉFIS ENTRE JOUEURS
         </SectionTitle>
+        <p className="text-gray-400 text-sm max-w-2xl mx-auto text-center mb-16">
+          Créez des défis personnalisés, acceptez ceux de vos collègues et
+          remportez des récompenses en points pour monter dans le classement
+        </p>
 
         {successMessage && (
           <Alert variant="success" className="mb-4">

components/houses/HouseCard.tsx

@@ -72,7 +72,7 @@ export default function HouseCard({ house, onRequestSent }: HouseCardProps) {
     <Card className="p-4 sm:p-6">
       <div className="flex flex-col sm:flex-row sm:justify-between sm:items-start gap-4 mb-4">
         <div className="flex-1 min-w-0">
-          <h3 className="text-xl font-bold mb-2 break-words" style={{ color: "var(--foreground)" }}>
+          <h3 className="text-lg sm:text-xl font-bold mb-2 break-words" style={{ color: "var(--foreground)" }}>
             {house.name}
           </h3>
           {house.description && (

components/houses/HouseManagement.tsx

@@ -4,7 +4,6 @@ import { useState, useEffect, useTransition } from "react";
 import { useSession } from "next-auth/react";
 import Card from "@/components/ui/Card";
 import Button from "@/components/ui/Button";
-import SectionTitle from "@/components/ui/SectionTitle";
 import HouseForm from "./HouseForm";
 import RequestList from "./RequestList";
 import Alert from "@/components/ui/Alert";
@@ -164,7 +163,9 @@ export default function HouseManagement({
   if (!house) {
     return (
       <Card className="p-6">
-        <SectionTitle>Ma Maison</SectionTitle>
+        <h2 className="text-lg sm:text-xl font-bold mb-4" style={{ color: "var(--foreground)" }}>
+          Ma Maison
+        </h2>
         <p className="text-sm mb-4" style={{ color: "var(--muted-foreground)" }}>
           Vous n'êtes membre d'aucune maison pour le moment.
         </p>
@@ -174,10 +175,25 @@ export default function HouseManagement({
 
   return (
     <div className="space-y-6">
-      <Card className="p-4 sm:p-6">
+      <Card 
+        className="p-4 sm:p-6"
+        style={{
+          borderColor: `color-mix(in srgb, var(--accent) 40%, var(--border))`,
+          borderWidth: "2px",
+          boxShadow: `0 0 20px color-mix(in srgb, var(--accent) 10%, transparent)`
+        }}
+      >
         <div className="flex flex-col sm:flex-row sm:justify-between sm:items-start gap-4 mb-4">
           <div className="flex-1 min-w-0">
-            <SectionTitle>{house.name}</SectionTitle>
+            <h3 
+              className="text-xl sm:text-2xl font-bold mb-2 break-words"
+              style={{ 
+                color: "var(--accent)",
+                textShadow: `0 0 10px color-mix(in srgb, var(--accent) 30%, transparent)`
+              }}
+            >
+              {house.name}
+            </h3>
             {house.description && (
               <p className="text-sm mt-2 break-words" style={{ color: "var(--muted-foreground)" }}>
                 {house.description}
@@ -224,38 +240,83 @@ export default function HouseManagement({
           />
         ) : (
           <div>
-            <h3 className="font-bold mb-3" style={{ color: "var(--foreground)" }}>
+            <h4 
+              className="text-sm font-semibold uppercase tracking-wider mb-3"
+              style={{ 
+                color: "var(--primary)",
+                borderBottom: `2px solid color-mix(in srgb, var(--primary) 30%, transparent)`,
+                paddingBottom: "0.5rem"
+              }}
+            >
               Membres ({house.memberships?.length ?? 0})
-            </h3>
+            </h4>
             <div className="space-y-2">
-              {(house.memberships || []).map((membership) => (
+              {(house.memberships || []).map((membership) => {
-                <div
+                const isCurrentUser = membership.user.id === session?.user?.id;
-                  key={membership.id}
+                const roleColor = 
-                  className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-2 p-2 rounded"
+                  membership.role === "OWNER" ? "var(--accent)" :
-                  style={{ backgroundColor: "var(--card-hover)" }}
+                  membership.role === "ADMIN" ? "var(--primary)" :
-                >
+                  "var(--muted-foreground)";
-                  <div className="flex items-center gap-2 min-w-0 flex-1">
+                
-                    {membership.user.avatar && (
+                return (
-                      <img
+                  <div
-                        src={membership.user.avatar}
+                    key={membership.id}
-                        alt={membership.user.username}
+                    className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-2 p-3 rounded"
-                        className="w-8 h-8 rounded-full flex-shrink-0"
+                    style={{ 
-                      />
+                      backgroundColor: isCurrentUser 
-                    )}
+                        ? "color-mix(in srgb, var(--primary) 10%, var(--card-hover))"
-                    <div className="min-w-0">
+                        : "var(--card-hover)",
-                      <span className="font-semibold block sm:inline" style={{ color: "var(--foreground)" }}>
+                      borderLeft: `3px solid ${roleColor}`,
-                        {membership.user.username}
+                      borderColor: isCurrentUser ? "var(--primary)" : "transparent"
-                      </span>
+                    }}
-                      <span className="text-xs block sm:inline sm:ml-2" style={{ color: "var(--muted-foreground)" }}>
+                  >
-                        ({membership.user.score} pts - Niveau {membership.user.level})
+                    <div className="flex items-center gap-2 min-w-0 flex-1">
-                      </span>
+                      {membership.user.avatar && (
+                        <img
+                          src={membership.user.avatar}
+                          alt={membership.user.username}
+                          className="w-8 h-8 rounded-full flex-shrink-0 border-2"
+                          style={{ borderColor: roleColor }}
+                        />
+                      )}
+                      <div className="min-w-0">
+                        <span 
+                          className="font-semibold block sm:inline"
+                          style={{ 
+                            color: isCurrentUser ? "var(--primary)" : "var(--foreground)"
+                          }}
+                        >
+                          {membership.user.username}
+                          {isCurrentUser && " (Vous)"}
+                        </span>
+                        <span 
+                          className="text-xs block sm:inline sm:ml-2"
+                          style={{ color: "var(--muted-foreground)" }}
+                        >
+                          <span style={{ color: "var(--success)" }}>
+                            {membership.user.score} pts
+                          </span>
+                          {" • "}
+                          <span style={{ color: "var(--blue)" }}>
+                            Niveau {membership.user.level}
+                          </span>
+                        </span>
+                      </div>
                     </div>
+                    <span 
+                      className="text-xs uppercase flex-shrink-0 px-2 py-1 rounded font-bold"
+                      style={{ 
+                        color: roleColor,
+                        backgroundColor: `color-mix(in srgb, ${roleColor} 15%, transparent)`,
+                        border: `1px solid color-mix(in srgb, ${roleColor} 30%, transparent)`
+                      }}
+                    >
+                      {membership.role === "OWNER" && "👑 "}
+                      {membership.role}
+                    </span>
                   </div>
-                  <span className="text-xs uppercase flex-shrink-0" style={{ color: "var(--accent)" }}>
+                );
-                    {membership.role}
+              })}
-                  </span>
-                </div>
-              ))}
             </div>
 
             {isAdmin && (
@@ -317,7 +378,16 @@ export default function HouseManagement({
 
       {isAdmin && pendingRequests.length > 0 && (
         <Card className="p-4 sm:p-6">
-          <SectionTitle>Demandes d'adhésion</SectionTitle>
+          <h2 
+            className="text-lg sm:text-xl font-bold mb-4"
+            style={{ 
+              color: "var(--purple)",
+              borderBottom: `2px solid color-mix(in srgb, var(--purple) 30%, transparent)`,
+              paddingBottom: "0.5rem"
+            }}
+          >
+            Demandes d'adhésion
+          </h2>
           <RequestList requests={pendingRequests} onUpdate={onUpdate} />
         </Card>
       )}

components/houses/HousesSection.tsx

@@ -149,25 +149,33 @@ export default function HousesSection({
       {/* Title Section */}
       <SectionTitle
         variant="gradient"
-        size="lg"
+        size="xl"
         subtitle="Rejoignez une maison ou créez la vôtre"
-        className="mb-12 overflow-hidden"
+        className="mb-16"
       >
         MAISONS
       </SectionTitle>
+      <p className="text-gray-400 text-sm max-w-2xl mx-auto text-center mb-16">
+        Formez des équipes, créez votre propre maison et rivalisez avec les
+        autres maisons pour dominer le classement collectif
+      </p>
 
       <div className="space-y-4 sm:space-y-6">
         {session?.user && (
           <>
             {invitations.length > 0 && (
               <Card className="p-4 sm:p-6">
-                <SectionTitle>Mes Invitations</SectionTitle>
+                <h2 className="text-lg sm:text-xl font-bold mb-4" style={{ color: "var(--foreground)" }}>
+                  Mes Invitations
+                </h2>
                 <InvitationList invitations={invitations} onUpdate={handleUpdate} />
               </Card>
             )}
 
             <Card className="p-4 sm:p-6">
-              <SectionTitle>Ma Maison</SectionTitle>
+              <h2 className="text-lg sm:text-xl font-bold mb-4" style={{ color: "var(--foreground)" }}>
+                Ma Maison
+              </h2>
               {myHouse ? (
                 <HouseManagement
                   house={myHouse}
@@ -205,7 +213,9 @@ export default function HousesSection({
         )}
 
         <Card className="p-4 sm:p-6">
-          <SectionTitle>Toutes les Maisons</SectionTitle>
+          <h2 className="text-lg sm:text-xl font-bold mb-4" style={{ color: "var(--foreground)" }}>
+            Toutes les Maisons
+          </h2>
           <div className="mb-4">
             <Input
               placeholder="Rechercher une maison..."

components/leaderboard/LeaderboardSection.tsx

@@ -74,12 +74,17 @@ export default function LeaderboardSection({
       {/* Title Section */}
       <SectionTitle
         variant="gradient"
-        size="lg"
+        size="xl"
         subtitle="Top Players"
-        className="mb-12 overflow-hidden"
+        className="mb-16"
       >
         LEADERBOARD
       </SectionTitle>
+      <p className="text-gray-400 text-sm max-w-2xl mx-auto text-center mb-16">
+        Consultez le classement des meilleurs joueurs et des maisons les plus
+        performantes. Montez dans les rangs en participant aux événements et en
+        relevant des défis
+      </p>
 
       {/* Players Leaderboard Table */}
       <div className="bg-black/60 border border-pixel-gold/30 rounded-lg backdrop-blur-sm overflow-x-auto">

components/profile/ProfileForm.tsx

@@ -171,12 +171,17 @@ export default function ProfileForm({
         {/* Title Section */}
         <SectionTitle
           variant="gradient"
-          size="lg"
+          size="xl"
           subtitle="Gérez votre profil"
-          className="mb-12"
+          className="mb-16"
         >
           PROFIL
         </SectionTitle>
+        <p className="text-gray-400 text-sm max-w-2xl mx-auto text-center mb-16">
+          Personnalisez votre avatar, votre bio, votre classe de personnage et
+          consultez vos statistiques. Gérez vos préférences et votre mot de
+          passe
+        </p>
 
         {/* Profile Card */}
         <Card variant="default" className="overflow-hidden">