Enhance UI consistency across multiple components: Update SectionTitle sizes and margins in StyleGuidePage, AdminPanel, ChallengesSection, HousesSection, LeaderboardSection, and ProfileForm. Add descriptive subtitles and additional text for improved user guidance.

This commit is contained in:
Julien Froidefond
2025-12-18 08:13:55 +01:00
parent a62e61a314
commit 4a415f79e0
6 changed files with 32 additions and 9 deletions

View File

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

View File

@@ -38,7 +38,7 @@ export default function AdminPanel({ initialPreferences }: AdminPanelProps) {
return ( return (
<section className="relative w-full min-h-screen flex flex-col items-center overflow-hidden pt-24 pb-16"> <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"> <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 ADMIN
</SectionTitle> </SectionTitle>

View File

@@ -159,9 +159,18 @@ export default function ChallengesSection({
</div> </div>
<div className="relative z-10 w-full max-w-6xl mx-auto px-4 sm:px-8 py-16"> <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 DÉFIS ENTRE JOUEURS
</SectionTitle> </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 && ( {successMessage && (
<Alert variant="success" className="mb-4"> <Alert variant="success" className="mb-4">

View File

@@ -149,12 +149,16 @@ export default function HousesSection({
{/* Title Section */} {/* Title Section */}
<SectionTitle <SectionTitle
variant="gradient" variant="gradient"
size="lg" size="xl"
subtitle="Rejoignez une maison ou créez la vôtre" subtitle="Rejoignez une maison ou créez la vôtre"
className="mb-12 overflow-hidden" className="mb-16"
> >
MAISONS MAISONS
</SectionTitle> </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"> <div className="space-y-4 sm:space-y-6">
{session?.user && ( {session?.user && (

View File

@@ -74,12 +74,17 @@ export default function LeaderboardSection({
{/* Title Section */} {/* Title Section */}
<SectionTitle <SectionTitle
variant="gradient" variant="gradient"
size="lg" size="xl"
subtitle="Top Players" subtitle="Top Players"
className="mb-12 overflow-hidden" className="mb-16"
> >
LEADERBOARD LEADERBOARD
</SectionTitle> </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 */} {/* Players Leaderboard Table */}
<div className="bg-black/60 border border-pixel-gold/30 rounded-lg backdrop-blur-sm overflow-x-auto"> <div className="bg-black/60 border border-pixel-gold/30 rounded-lg backdrop-blur-sm overflow-x-auto">

View File

@@ -171,12 +171,17 @@ export default function ProfileForm({
{/* Title Section */} {/* Title Section */}
<SectionTitle <SectionTitle
variant="gradient" variant="gradient"
size="lg" size="xl"
subtitle="Gérez votre profil" subtitle="Gérez votre profil"
className="mb-12" className="mb-16"
> >
PROFIL PROFIL
</SectionTitle> </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 */} {/* Profile Card */}
<Card variant="default" className="overflow-hidden"> <Card variant="default" className="overflow-hidden">