feat: improve theme selector and UI components

- Updated `ThemeSelector` to use a new `ThemePreview` component for better theme visualization.
- Refactored button implementation in `ThemeSelector` to utilize the new `Button` component, enhancing consistency.
- Added a UI showcase section in `GeneralSettingsPageClient` to display available UI components with different themes.
- Enhanced `Badge`, `Button`, and `Input` components with new variants and improved styling for better usability and visual appeal.
- Updated CSS variables in `globals.css` for improved contrast and accessibility across themes.

src/components/settings/GeneralSettingsPageClient.tsx

@@ -53,6 +53,28 @@ export function GeneralSettingsPageClient({ initialTags }: GeneralSettingsPageCl
               <ThemeSelector />
             </div>
 
+            {/* UI Showcase */}
+            <Card>
+              <CardContent className="p-6">
+                <div className="flex items-center justify-between">
+                  <div>
+                    <h3 className="text-lg font-medium text-[var(--foreground)] mb-2">
+                      🎨 UI Components Showcase
+                    </h3>
+                    <p className="text-sm text-[var(--muted-foreground)]">
+                      Visualisez tous les composants UI disponibles avec différents thèmes
+                    </p>
+                  </div>
+                  <Link 
+                    href="/ui-showcase"
+                    className="inline-flex items-center px-4 py-2 bg-[var(--primary)] text-[var(--primary-foreground)] rounded-md hover:bg-[color-mix(in_srgb,var(--primary)_90%,transparent)] transition-colors font-medium"
+                  >
+                    Voir la démo
+                  </Link>
+                </div>
+              </CardContent>
+            </Card>
+
             {/* Gestion des tags */}
             <TagsManagement
               tags={tags}