feat: implement admin dashboard with authentication, menu management, and responsive UI components

components/GlassCard.module.css

@@ -1,16 +1,19 @@
 .card {
   background: var(--glass-bg);
-  backdrop-filter: blur(20px);
-  -webkit-backdrop-filter: blur(20px);
+  backdrop-filter: blur(24px) saturate(1.8);
+  -webkit-backdrop-filter: blur(24px) saturate(1.8);
   border: 1px solid var(--glass-border);
-  box-shadow: var(--card-shadow);
-  border-radius: 24px;
-  padding: 2rem;
-  transition: var(--transition-smooth);
+  box-shadow: var(--glass-shadow);
+  border-radius: 20px;
+  transition: all 280ms cubic-bezier(0.4, 0, 0.2, 1);
 }
 
 .hoverable:hover {
+  box-shadow: var(--glass-hover-shadow);
   transform: translateY(-4px);
-  box-shadow: 0 12px 40px 0 rgba(0, 0, 0, 0.15);
-  border-color: var(--accent);
+}
+
+.hoverable:active {
+  transform: translateY(-2px);
+  transition-duration: 80ms;
 }

components/MenuButton.module.css

@@ -3,35 +3,91 @@
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  padding: 2.5rem;
+  gap: 1rem;
+  padding: 2rem 1.5rem;
   text-decoration: none;
-  text-align: center;
-  color: var(--foreground);
-  gap: 1.5rem;
-  font-size: 1.25rem;
-  font-weight: 600;
+  color: var(--fg);
+  min-height: 180px;
   cursor: pointer;
-  aspect-ratio: 1 / 1;
+  position: relative;
+  overflow: hidden;
 }
 
-.iconWrapper {
-  background: var(--accent);
-  color: white;
-  padding: 1rem;
-  border-radius: 18px;
+/* Glow accent on hover */
+.menuButton::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  background: radial-gradient(ellipse at center, var(--accent-glow) 0%, transparent 70%);
+  opacity: 0;
+  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1);
+  pointer-events: none;
+}
+
+.menuButton:hover::after {
+  opacity: 1;
+}
+
+/* Favicon wrapper */
+.faviconWrapper {
+  width: 64px;
+  height: 64px;
+  border-radius: 16px;
+  background: var(--glass-bg);
+  border: 1px solid var(--glass-border);
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 64px;
-  height: 64px;
-  transition: var(--transition-smooth);
+  overflow: hidden;
+  transition: transform 280ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1);
+  flex-shrink: 0;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
 }
 
-.menuButton:hover .iconWrapper {
-  transform: scale(1.1);
-  box-shadow: 0 0 20px var(--accent);
+.menuButton:hover .faviconWrapper {
+  transform: scale(1.08);
+  box-shadow: 0 8px 24px var(--accent-glow);
 }
 
+.favicon {
+  width: 40px;
+  height: 40px;
+  object-fit: contain;
+}
+
+.faviconFallback {
+  color: var(--accent);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/* Label */
 .label {
-  letter-spacing: -0.01em;
+  font-size: 0.95rem;
+  font-weight: 600;
+  letter-spacing: -0.02em;
+  text-align: center;
+  line-height: 1.3;
+  max-width: 160px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* Arrow indicator */
+.arrowIcon {
+  position: absolute;
+  top: 12px;
+  right: 14px;
+  color: var(--fg-secondary);
+  opacity: 0;
+  transform: translate(-4px, 4px);
+  transition: all 280ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.menuButton:hover .arrowIcon {
+  opacity: 1;
+  transform: translate(0, 0);
 }

components/MenuButton.tsx

@@ -1,26 +1,61 @@
 'use client';
 
-import React from 'react';
+import React, { useState } from 'react';
 import Link from 'next/link';
-import * as Icons from 'lucide-react';
+import Image from 'next/image';
+import { ArrowUpRight, Globe } from 'lucide-react';
 import { GlassCard } from './GlassCard';
 import styles from './MenuButton.module.css';
 
 interface MenuButtonProps {
   name: string;
   url: string;
-  iconName?: keyof typeof Icons;
 }
 
-export const MenuButton: React.FC<MenuButtonProps> = ({ name, url, iconName = 'ExternalLink' }) => {
-  const Icon = (Icons[iconName] as React.ElementType) || Icons.ExternalLink;
+/**
+ * Extract base domain from URL for favicon fetch.
+ */
+function getDomain(url: string): string {
+  try {
+    const { hostname } = new URL(url);
+    return hostname;
+  } catch {
+    return url;
+  }
+}
+
+/**
+ * MenuButton component displaying a favicon and app name.
+ * Favicons are fetched from Google's favicon CDN.
+ */
+export const MenuButton: React.FC<MenuButtonProps> = ({ name, url }) => {
+  const domain = getDomain(url);
+  const faviconUrl = `https://www.google.com/s2/favicons?domain=${domain}&sz=64`;
+  const [faviconError, setFaviconError] = useState(false);
 
   return (
-    <Link href={url} target="_blank" rel="noopener noreferrer" style={{ textDecoration: 'none' }}>
+    <Link href={url} target="_blank" rel="noopener noreferrer" className={styles.menuButton}>
       <GlassCard hoverable className={styles.menuButton}>
-        <div className={styles.iconWrapper}>
-          <Icon size={32} />
+        <ArrowUpRight size={16} className={styles.arrowIcon} />
+
+        <div className={styles.faviconWrapper}>
+          {!faviconError ? (
+            <Image
+              src={faviconUrl}
+              alt={`${name} icon`}
+              width={40}
+              height={40}
+              className={styles.favicon}
+              onError={() => setFaviconError(true)}
+              unoptimized
+            />
+          ) : (
+            <div className={styles.faviconFallback}>
+              <Globe size={28} />
+            </div>
+          )}
         </div>
+
         <span className={styles.label}>{name}</span>
       </GlassCard>
     </Link>

components/ThemeToggle.tsx

@@ -3,33 +3,43 @@
 import * as React from 'react';
 import { Moon, Sun } from 'lucide-react';
 import { useTheme } from 'next-themes';
-import { GlassCard } from './GlassCard';
 
 export function ThemeToggle() {
   const { theme, setTheme } = useTheme();
   const [mounted, setMounted] = React.useState(false);
 
-  // Avoid hydration mismatch
   React.useEffect(() => {
     setMounted(true);
   }, []);
 
   if (!mounted) {
-    return (
-      <GlassCard className="glass" style={{ padding: '0.6rem', border: 'none' }}>
-        <div style={{ width: '24px', height: '24px' }}></div>
-      </GlassCard>
-    );
+    return <div style={{ width: '40px', height: '40px' }} />;
   }
 
   return (
-    <GlassCard 
-      as="button"
-      className="glass" 
-      style={{ padding: '0.6rem', cursor: 'pointer' }}
+    <button
       onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')}
+      aria-label="Basculer le thème"
+      style={{
+        background: 'var(--glass-bg)',
+        backdropFilter: 'blur(20px)',
+        WebkitBackdropFilter: 'blur(20px)',
+        border: '1px solid var(--glass-border)',
+        boxShadow: 'var(--glass-shadow)',
+        borderRadius: '50%',
+        width: '40px',
+        height: '40px',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        cursor: 'pointer',
+        flexShrink: 0,
+      }}
     >
-      {theme === 'dark' ? <Sun size={24} /> : <Moon size={24} />}
-    </GlassCard>
+      {theme === 'dark'
+        ? <Sun size={18} color="var(--fg)" />
+        : <Moon size={18} color="var(--fg)" />
+      }
+    </button>
   );
 }