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

app/page.tsx

@@ -3,6 +3,8 @@ import { isConfigured } from '@/app/actions/setup';
 import { redirect } from 'next/navigation';
 import { MenuButton } from '@/components/MenuButton';
 import { ThemeToggle } from '@/components/ThemeToggle';
+import { Settings } from 'lucide-react';
+import Link from 'next/link';
 
 export const dynamic = 'force-dynamic';
 
@@ -18,33 +20,103 @@ export default async function Home() {
   });
 
   return (
-    <main className="container">
-      <header style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '4rem' }}>
-        <h1 style={{ marginBottom: 0 }}>Application Menu</h1>
-        <ThemeToggle />
+    <div className="page-container">
+      {/* Header */}
+      <header style={{
+        display: 'flex',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+        marginBottom: '3.5rem',
+        paddingTop: '0.5rem',
+      }}>
+        <div>
+          <h1 style={{
+            fontSize: 'clamp(1.6rem, 3vw, 2.4rem)',
+            fontWeight: 700,
+            letterSpacing: '-0.035em',
+            lineHeight: 1.1,
+          }}>
+            Applications
+          </h1>
+          {buttons.length > 0 && (
+            <p style={{ color: 'var(--fg-secondary)', fontSize: '0.9rem', marginTop: '0.3rem', fontWeight: 400 }}>
+              {buttons.length} {buttons.length > 1 ? 'liens configurés' : 'lien configuré'}
+            </p>
+          )}
+        </div>
+
+        <div style={{ display: 'flex', alignItems: 'center', gap: '0.75rem' }}>
+          <Link href="/admin" aria-label="Administration" 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',
+          }}>
+            <Settings size={18} color="var(--fg-secondary)" />
+          </Link>
+          <ThemeToggle />
+        </div>
       </header>
 
+      {/* Button grid */}
       {buttons.length === 0 ? (
-        <div style={{ textAlign: 'center', marginTop: '4rem' }}>
-          <p style={{ opacity: 0.6 }}>Aucune application configurée. Rendez-vous dans le panel admin.</p>
-          <a href="/admin" style={{ color: 'var(--accent)', marginTop: '1rem', display: 'inline-block' }}>Accéder à l'administration</a>
+        <div style={{
+          textAlign: 'center',
+          padding: '8rem 2rem',
+          display: 'flex',
+          flexDirection: 'column',
+          alignItems: 'center',
+          gap: '1.5rem',
+        }}>
+          <div style={{
+            width: '72px',
+            height: '72px',
+            borderRadius: '20px',
+            background: 'var(--glass-bg)',
+            backdropFilter: 'blur(20px)',
+            border: '1px solid var(--glass-border)',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            fontSize: '2rem',
+          }}>
+            🔗
+          </div>
+          <div>
+            <p style={{ fontWeight: 600, marginBottom: '0.4rem' }}>Aucune application</p>
+            <p style={{ color: 'var(--fg-secondary)', fontSize: '0.9rem' }}>
+              Ajoutez vos premiers liens depuis le panel d'administration.
+            </p>
+          </div>
+          <Link href="/admin" style={{
+            padding: '0.7rem 1.4rem',
+            background: 'var(--accent)',
+            color: 'white',
+            borderRadius: '50px',
+            fontSize: '0.9rem',
+            fontWeight: 600,
+          }}>
+            Configurer →
+          </Link>
         </div>
       ) : (
-        <div style={{ 
-          display: 'grid', 
-          gridTemplateColumns: 'repeat(auto-fill, minmax(240px, 1fr))', 
-          gap: '2.5rem' 
+        <div style={{
+          display: 'grid',
+          gridTemplateColumns: 'repeat(auto-fill, minmax(160px, 1fr))',
+          gap: '1.25rem',
         }}>
           {buttons.map((btn: any) => (
-            <MenuButton 
-              key={btn.id} 
-              name={btn.name} 
-              url={btn.url} 
-              iconName="ExternalLink" 
-            />
+            <MenuButton key={btn.id} name={btn.name} url={btn.url} />
           ))}
         </div>
       )}
-    </main>
+    </div>
   );
 }