feat(home): inline items grid, drop share button, add planet/newborn theme, rename to Chá do Martin

app/[slug]/page.tsx

@@ -127,7 +127,7 @@ export default function PublicWishlistPage() {
 
   return (
     <PasswordLockGuard>
-      <div className="min-h-screen bg-gray-50 dark:bg-gray-900">
+      <div className="min-h-screen bg-cosmic">
         <Header
           title={wishlist.name}
           subtitle={wishlist.description || undefined}

app/globals.css

@@ -3,15 +3,45 @@
 @variant dark (.dark &);
 
 :root {
-  --background: #ffffff;
-  --foreground: #171717;
+  --background: #fbf7ff;
+  --foreground: #2c2740;
+  --ink: #2c2740;
+  --ink-soft: #5a527a;
+  --muted: #8a83a8;
+  --card: #ffffff;
+  --card-soft: #f6f1ff;
+  --border: #ece5fa;
+  --accent: #8a7be3;
+  --accent-soft: #efeafd;
+  --success: #7fb89c;
+  --success-soft: #eaf6ef;
+  --success-border: #c9e3d4;
+  --success-ink: #305a45;
+  --halo-1: rgba(255, 213, 232, 0.55); /* soft pink */
+  --halo-2: rgba(204, 224, 255, 0.55); /* baby blue */
+  --halo-3: rgba(232, 218, 255, 0.55); /* lavender */
   color-scheme: light;
 }
 
 :root[data-theme="dark"],
 .dark {
-  --background: #0a0a0a;
-  --foreground: #ededed;
+  --background: #0f0c1f;
+  --foreground: #e9e4f6;
+  --ink: #ece8fa;
+  --ink-soft: #b9b1d6;
+  --muted: #8a83a8;
+  --card: #1a1530;
+  --card-soft: #221c3d;
+  --border: #2c2548;
+  --accent: #b1a3ff;
+  --accent-soft: #2a2350;
+  --success: #7fb89c;
+  --success-soft: #1d2e26;
+  --success-border: #2f4d3d;
+  --success-ink: #b9e0c9;
+  --halo-1: rgba(120, 70, 130, 0.35);
+  --halo-2: rgba(60, 90, 160, 0.35);
+  --halo-3: rgba(80, 60, 150, 0.35);
   color-scheme: dark;
 }
 
@@ -25,38 +55,81 @@
 body {
   background: var(--background);
   color: var(--foreground);
-  font-family: Arial, Helvetica, sans-serif;
+  font-family: 'Quicksand', 'Nunito', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
   transition: background-color 0.3s ease, color 0.3s ease;
 }
 
-/* Light mode form elements */
+/* Cosmic-newborn background: soft radial halos + pinpoint stars */
+.bg-cosmic {
+  background-color: var(--background);
+  background-image:
+    radial-gradient(circle at 12% 18%, var(--halo-1) 0%, transparent 38%),
+    radial-gradient(circle at 88% 12%, var(--halo-2) 0%, transparent 42%),
+    radial-gradient(circle at 50% 90%, var(--halo-3) 0%, transparent 48%),
+    radial-gradient(1px 1px at 22% 30%, rgba(255,255,255,0.7) 50%, transparent 51%),
+    radial-gradient(1px 1px at 70% 22%, rgba(255,255,255,0.6) 50%, transparent 51%),
+    radial-gradient(1px 1px at 40% 70%, rgba(255,255,255,0.6) 50%, transparent 51%),
+    radial-gradient(1px 1px at 82% 60%, rgba(255,255,255,0.7) 50%, transparent 51%),
+    radial-gradient(1px 1px at 18% 82%, rgba(255,255,255,0.6) 50%, transparent 51%);
+  background-attachment: fixed;
+}
+
+.dark .bg-cosmic {
+  background-image:
+    radial-gradient(circle at 12% 18%, var(--halo-1) 0%, transparent 38%),
+    radial-gradient(circle at 88% 12%, var(--halo-2) 0%, transparent 42%),
+    radial-gradient(circle at 50% 90%, var(--halo-3) 0%, transparent 48%),
+    radial-gradient(1px 1px at 22% 30%, rgba(255,255,255,0.85) 50%, transparent 51%),
+    radial-gradient(1px 1px at 70% 22%, rgba(255,255,255,0.75) 50%, transparent 51%),
+    radial-gradient(1px 1px at 40% 70%, rgba(255,255,255,0.7) 50%, transparent 51%),
+    radial-gradient(1px 1px at 82% 60%, rgba(255,255,255,0.8) 50%, transparent 51%),
+    radial-gradient(1px 1px at 18% 82%, rgba(255,255,255,0.7) 50%, transparent 51%);
+}
+
+.bg-card {
+  background-color: var(--card);
+}
+
+.bg-card-soft {
+  background-color: var(--card-soft);
+}
+
+.shadow-soft {
+  box-shadow: 0 6px 20px -10px rgba(138, 123, 227, 0.25), 0 2px 6px -2px rgba(44, 39, 64, 0.06);
+}
+
+.shadow-lifted {
+  box-shadow: 0 18px 40px -18px rgba(138, 123, 227, 0.35), 0 6px 14px -6px rgba(44, 39, 64, 0.08);
+}
+
+/* Form elements */
 :root input,
 :root textarea,
 :root select {
-  color: #171717;
-  background-color: #ffffff;
+  color: var(--ink);
+  background-color: var(--card);
+  border-color: var(--border);
 }
 
 :root input::placeholder,
 :root textarea::placeholder {
-  color: #9ca3af;
+  color: var(--muted);
 }
 
-/* Dark mode form elements */
 :root[data-theme="dark"] input,
 :root[data-theme="dark"] textarea,
 :root[data-theme="dark"] select,
 .dark input,
 .dark textarea,
 .dark select {
-  color: #ededed;
-  background-color: #1f2937;
-  border-color: #374151;
+  color: var(--ink);
+  background-color: var(--card-soft);
+  border-color: var(--border);
 }
 
 :root[data-theme="dark"] input::placeholder,
 :root[data-theme="dark"] textarea::placeholder,
 .dark input::placeholder,
 .dark textarea::placeholder {
-  color: #6b7280;
+  color: var(--muted);
 }

app/layout.tsx

@@ -14,12 +14,12 @@ async function getSettings() {
     }, {} as Record<string, string>);
 
     return {
-      siteTitle: settingsObj.siteTitle || 'Chá de Bebê',
+      siteTitle: settingsObj.siteTitle || 'Chá do Martin',
       homepageSubtext: settingsObj.homepageSubtext || 'Escolha um presente da lista!',
     };
   } catch (error) {
     return {
-      siteTitle: 'Chá de Bebê',
+      siteTitle: 'Chá do Martin',
       homepageSubtext: 'Escolha um presente da lista!',
     };
   }
@@ -43,7 +43,15 @@ export default function RootLayout({
 }>) {
   return (
     <html lang="pt-BR">
-      <body className="font-sans antialiased bg-gray-50 dark:bg-gray-900">
+      <head>
+        <link rel="preconnect" href="https://fonts.googleapis.com" />
+        <link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="anonymous" />
+        <link
+          href="https://fonts.googleapis.com/css2?family=Quicksand:wght@400;500;600;700&display=swap"
+          rel="stylesheet"
+        />
+      </head>
+      <body className="font-sans antialiased bg-cosmic">
         <AuthProvider>
           <ThemeProvider>{children}</ThemeProvider>
         </AuthProvider>

app/lock/page.tsx

@@ -44,24 +44,24 @@ export default function LockPage() {
   };
 
   return (
-    <div className="min-h-screen bg-gray-50 dark:bg-gray-900">
+    <div className="min-h-screen bg-cosmic">
       <Header
         title="Senha necessária"
         subtitle="Digite a senha para acessar o site"
       />
 
       <div className="max-w-md mx-auto py-12 px-4 sm:px-6 lg:px-8">
-        <div className="bg-white dark:bg-gray-800 rounded-lg shadow-md border border-gray-200 dark:border-gray-700 overflow-hidden">
+        <div className="bg-card rounded-2xl shadow-soft border border-[color:var(--border)] overflow-hidden">
           <div className="p-6">
             <form onSubmit={handleSubmit} className="space-y-4">
               {error && (
-                <div className="p-3 bg-red-50 dark:bg-red-900/20 text-red-800 dark:text-red-400 rounded-lg text-base">
+                <div className="p-3 bg-rose-50 dark:bg-rose-900/20 text-rose-700 dark:text-rose-300 rounded-xl text-base">
                   {error}
                 </div>
               )}
 
               <div>
-                <label htmlFor="password" className="block text-base font-medium text-gray-700 dark:text-gray-300 mb-2">
+                <label htmlFor="password" className="block text-base font-medium text-[color:var(--ink-soft)] mb-2">
                   Senha
                 </label>
                 <input
@@ -69,7 +69,7 @@ export default function LockPage() {
                   id="password"
                   required
                   autoFocus
-                  className="w-full px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:bg-gray-700 dark:text-white text-lg"
+                  className="w-full px-4 py-3 border border-[color:var(--border)] rounded-xl focus:outline-none focus:ring-2 focus:ring-[color:var(--accent)] text-lg"
                   value={password}
                   onChange={(e) => setPassword(e.target.value)}
                   placeholder="Digite a senha"
@@ -80,7 +80,7 @@ export default function LockPage() {
               <button
                 type="submit"
                 disabled={isSubmitting}
-                className="w-full px-6 py-3 text-lg font-semibold text-white bg-indigo-600 hover:bg-indigo-700 rounded-lg transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+                className="w-full px-6 py-3 text-lg font-semibold text-white bg-[color:var(--accent)] hover:brightness-110 rounded-xl transition-all disabled:opacity-50 disabled:cursor-not-allowed shadow-soft"
               >
                 {isSubmitting ? 'Verificando...' : 'Entrar'}
               </button>

app/page.tsx

@@ -1,103 +1,322 @@
 'use client';
 
 import { useEffect, useState } from 'react';
-import Link from 'next/link';
-import { wishlistsApi, settingsApi, type Wishlist, type Settings } from '@/lib/api';
+import DOMPurify from 'dompurify';
+import { wishlistsApi, itemsApi, claimingApi, settingsApi, type Wishlist, type Item, type Settings } from '@/lib/api';
 import Header from '@/components/header';
 import Footer from '@/components/footer';
 import PasswordLockGuard from '@/components/password-lock-guard';
-import ShareButton from '@/components/share-button';
 
 export default function Home() {
-  const [wishlists, setWishlists] = useState<Wishlist[]>([]);
+  const [wishlist, setWishlist] = useState<Wishlist | null>(null);
+  const [items, setItems] = useState<Item[]>([]);
+  const [showClaimed, setShowClaimed] = useState(false);
   const [isLoading, setIsLoading] = useState(true);
-  const [settings, setSettings] = useState<Settings>({ siteTitle: 'Chá de Bebê', homepageSubtext: 'Escolha um presente da lista!' });
+  const [settings, setSettings] = useState<Settings>({ siteTitle: 'Chá do Martin', homepageSubtext: 'Escolha um presente da lista!' });
+
+  const [claimingItemId, setClaimingItemId] = useState<string | null>(null);
+  const [claimNote, setClaimNote] = useState('');
+  const [isClaiming, setIsClaiming] = useState(false);
+  const [claimError, setClaimError] = useState('');
+  const [justClaimedItemId, setJustClaimedItemId] = useState<string | null>(null);
+  const [justClaimedNote, setJustClaimedNote] = useState('');
+
+  const [isUnclaiming, setIsUnclaiming] = useState(false);
+  const [unclaimError, setUnclaimError] = useState('');
 
   useEffect(() => {
-    fetchWishlists();
-    fetchSettings();
+    bootstrap();
   }, []);
 
-  const fetchSettings = async () => {
+  const bootstrap = async () => {
     try {
-      const data = await settingsApi.getSettings();
-      setSettings(data);
-    } catch (error) {
-      console.error('Failed to fetch settings:', error);
-    }
-  };
+      const [settingsData, wishlists] = await Promise.all([
+        settingsApi.getSettings().catch(() => null),
+        wishlistsApi.getAllPublic(),
+      ]);
+      if (settingsData) setSettings(settingsData);
 
-  const fetchWishlists = async () => {
-    try {
-      const data = await wishlistsApi.getAllPublic();
-      setWishlists(data);
-      // Item counts removed - requires authentication
+      if (wishlists.length === 0) {
+        setIsLoading(false);
+        return;
+      }
+
+      const primary = wishlists[0];
+      setWishlist(primary);
+      const itemsData = await itemsApi.getAll(primary.id);
+      setItems(itemsData.sort((a, b) => a.sortOrder - b.sortOrder));
     } catch (error) {
-      console.error('Failed to fetch wishlists:', error);
+      console.error('Failed to load home page:', error);
     } finally {
       setIsLoading(false);
     }
   };
 
+  const refetchItems = async () => {
+    if (!wishlist) return;
+    const itemsData = await itemsApi.getAll(wishlist.id);
+    setItems(itemsData.sort((a, b) => a.sortOrder - b.sortOrder));
+  };
+
+  const handleClaimItem = (itemId: string) => {
+    setClaimingItemId(itemId);
+    setClaimError('');
+    setClaimNote('');
+    setJustClaimedItemId(null);
+  };
+
+  const handleSubmitClaim = async (e: React.FormEvent, itemId: string) => {
+    e.preventDefault();
+    setIsClaiming(true);
+    setClaimError('');
+    try {
+      await claimingApi.claim(itemId, undefined, claimNote);
+      setJustClaimedItemId(itemId);
+      setJustClaimedNote(claimNote);
+      setClaimingItemId(null);
+      setClaimNote('');
+      await refetchItems();
+    } catch (err: any) {
+      setClaimError(err.message || 'Erro ao reservar item');
+    } finally {
+      setIsClaiming(false);
+    }
+  };
+
+  const handleUnclaim = async (itemId: string) => {
+    if (!confirm('Tem certeza que deseja cancelar a reserva deste item?')) return;
+    setIsUnclaiming(true);
+    setUnclaimError('');
+    try {
+      await claimingApi.unclaim(itemId);
+      await refetchItems();
+    } catch (err: any) {
+      setUnclaimError(err.message || 'Erro ao cancelar reserva');
+    } finally {
+      setIsUnclaiming(false);
+    }
+  };
+
+  const filteredItems = showClaimed
+    ? items
+    : items.filter((item) => !item.claimedAt || item.id === justClaimedItemId);
+
+  const formatPrice = (price: number | null, currency: string) => {
+    if (!price) return null;
+    return new Intl.NumberFormat('pt-BR', {
+      style: 'currency',
+      currency: currency || 'BRL',
+    }).format(price);
+  };
+
   return (
     <PasswordLockGuard>
-      <div className="min-h-screen bg-gray-50 dark:bg-gray-900">
+      <div className="min-h-screen bg-cosmic">
         <Header
           title={settings.siteTitle}
-          subtitle={settings.homepageSubtext}
-          actions={
-            <ShareButton
-              title="Veja a lista do chá de bebê!"
-              text="Dê uma olhada na lista de presentes do chá de bebê."
-            />
-          }
+          subtitle={wishlist?.description || settings.homepageSubtext}
+          imageUrl={wishlist?.imageUrl || undefined}
+          maxWidth="max-w-5xl"
         />
 
-        {/* Main Content */}
-        <div className="max-w-4xl mx-auto py-12 sm:px-6 lg:px-8">
+        <div className="max-w-5xl mx-auto py-12 sm:px-6 lg:px-8">
           <div className="px-4 sm:px-0">
             {isLoading ? (
               <div className="text-center py-12">
-                <p className="text-gray-600 dark:text-gray-400">Carregando...</p>
+                <p className="text-[color:var(--muted)]">Carregando...</p>
               </div>
-            ) : wishlists.length === 0 ? (
-              <div className="text-center py-12 bg-white dark:bg-gray-800 rounded-lg shadow">
-                <p className="text-gray-500 dark:text-gray-400">Nenhuma lista disponível ainda</p>
+            ) : !wishlist ? (
+              <div className="text-center py-12 bg-card rounded-2xl shadow-soft">
+                <p className="text-[color:var(--muted)]">Nenhuma lista disponível ainda</p>
               </div>
             ) : (
-              <div className="grid grid-cols-1 gap-6">
-                {wishlists.map((wishlist) => (
-                  <Link
-                    key={wishlist.id}
-                    href={`/${wishlist.slug}`}
-                    className="bg-white dark:bg-gray-800 rounded-xl shadow-md hover:shadow-xl transition-all duration-300 hover:scale-105 border border-gray-100 dark:border-gray-700 overflow-hidden"
+              <>
+                {wishlist.preferences && (
+                  <div className="mb-8 bg-card rounded-2xl shadow-soft p-6">
+                    <h2 className="text-xl font-bold text-[color:var(--ink)] mb-3">
+                      Interesses e Preferências
+                    </h2>
+                    <div
+                      className="prose prose-indigo dark:prose-invert max-w-none text-[color:var(--ink-soft)] [&_a]:text-[color:var(--accent)] [&_a]:hover:underline"
+                      dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(wishlist.preferences) }}
+                      onClick={(e) => {
+                        const target = e.target as HTMLElement;
+                        if (target.tagName === 'A') {
+                          e.preventDefault();
+                          window.open((target as HTMLAnchorElement).href, '_blank', 'noopener,noreferrer');
+                        }
+                      }}
+                    />
+                  </div>
+                )}
+
+                <div className="mb-6 flex items-center justify-between">
+                  <label className="flex items-center">
+                    <input
+                      type="checkbox"
+                      checked={showClaimed}
+                      onChange={(e) => setShowClaimed(e.target.checked)}
+                      className="h-4 w-4 rounded border-[color:var(--border)] accent-[color:var(--accent)]"
+                    />
+                    <span className="ml-2 text-sm text-[color:var(--ink-soft)]">Mostrar itens reservados</span>
+                  </label>
+                  <div className="text-sm text-[color:var(--muted)]">
+                    {filteredItems.length} de {items.length} itens
+                  </div>
+                </div>
+
+                {filteredItems.length === 0 ? (
+                  <div className="text-center py-12 bg-card rounded-2xl shadow-soft">
+                    <p className="text-[color:var(--muted)]">
+                      {showClaimed ? 'Nenhum item nesta lista ainda' : 'Todos os itens já foram reservados!'}
+                    </p>
+                  </div>
+                ) : (
+                  <div className="space-y-6">
+                    {filteredItems.map((item) => (
+                      <div
+                        key={item.id}
+                        className="bg-card rounded-2xl shadow-soft hover:shadow-lifted transition-all duration-300 overflow-hidden"
                       >
                         <div className="flex flex-col md:flex-row">
-                      {wishlist.imageUrl && (
-                        <div className="md:w-64 md:flex-shrink-0">
+                          {item.imageUrl && (
+                            <div className="md:w-48 md:flex-shrink-0">
                               <img
-                            src={wishlist.imageUrl}
-                            alt={wishlist.name}
+                                src={item.imageUrl}
+                                alt={item.name}
                                 className="w-full h-48 md:h-full object-cover"
                               />
                             </div>
                           )}
-                      <div className="p-8 flex-1">
-                        <h3 className="text-2xl font-bold text-gray-900 dark:text-white mb-3">
-                          {wishlist.name}
+
+                          <div className="flex-1 p-6">
+                            <h3 className="text-2xl font-bold text-[color:var(--ink)] mb-3">
+                              {item.name}
                             </h3>
-                        {wishlist.description && (
-                          <p className="text-base text-gray-600 dark:text-gray-300 mb-4 line-clamp-3">
-                            {wishlist.description}
+                            {item.description && (
+                              <p className="text-base text-[color:var(--ink-soft)] mb-4">
+                                {item.description}
                               </p>
                             )}
                           </div>
-                    </div>
-                  </Link>
+
+                          <div className="md:w-80 md:flex-shrink-0 p-6 bg-card-soft border-t md:border-t-0 md:border-l border-[color:var(--border)] flex flex-col">
+                            <div className="mb-4">
+                              {item.purchaseUrls && item.purchaseUrls.length > 0 && (
+                                <div className="space-y-2">
+                                  {item.purchaseUrls.map((url, idx) => (
+                                    <a
+                                      key={idx}
+                                      href={url.url}
+                                      target="_blank"
+                                      rel="noopener noreferrer"
+                                      className="flex items-center justify-between text-base px-4 py-3 rounded-xl hover:bg-[color:var(--accent-soft)] transition-colors cursor-pointer border border-[color:var(--border)]"
+                                    >
+                                      <span className="text-[color:var(--accent)] font-medium">
+                                        {url.label}
+                                      </span>
+                                      <span className="text-[color:var(--ink)] font-bold text-lg">
+                                        {item.price && formatPrice(item.price, item.currency)}
+                                      </span>
+                                    </a>
                                   ))}
                                 </div>
                               )}
                             </div>
+
+                            <div className="mt-auto">
+                              {justClaimedItemId === item.id ? (
+                                <div className="bg-[color:var(--success-soft)] border border-[color:var(--success-border)] rounded-xl p-4">
+                                  <div className="flex items-center justify-center mb-2">
+                                    <div className="w-12 h-12 bg-[color:var(--success)] rounded-full flex items-center justify-center">
+                                      <svg className="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
+                                      </svg>
+                                    </div>
+                                  </div>
+                                  <p className="text-center text-lg font-semibold text-[color:var(--ink)] mb-1">
+                                    Item reservado!
+                                  </p>
+                                  <p className="text-center text-sm text-[color:var(--ink-soft)] mb-2">
+                                    O status está confirmado.
+                                  </p>
+                                  {justClaimedNote && (
+                                    <p className="text-center text-xs text-[color:var(--ink-soft)] italic">
+                                      Sua nota: &quot;{justClaimedNote}&quot;
+                                    </p>
+                                  )}
+                                </div>
+                              ) : item.claimedAt ? (
+                                <div className="bg-[color:var(--success-soft)] border border-[color:var(--success-border)] rounded-xl p-3">
+                                  <p className="text-sm font-medium text-[color:var(--success-ink)]">
+                                    Reservado por {item.claimedByName}
+                                  </p>
+                                  {item.claimedByNote && (
+                                    <p className="text-xs text-[color:var(--success-ink)] mt-1">
+                                      Nota: {item.claimedByNote}
+                                    </p>
+                                  )}
+                                  {item.isPurchased && (
+                                    <p className="text-xs text-[color:var(--success-ink)] mt-1 font-medium">
+                                      ✓ Comprado
+                                    </p>
+                                  )}
+                                  {showClaimed && (
+                                    <button
+                                      onClick={() => handleUnclaim(item.id)}
+                                      disabled={isUnclaiming}
+                                      className="mt-3 w-full px-4 py-2 bg-rose-400 text-white rounded-xl hover:bg-rose-500 font-medium disabled:opacity-50 transition-colors cursor-pointer text-sm"
+                                    >
+                                      {isUnclaiming ? 'Cancelando...' : 'Cancelar reserva'}
+                                    </button>
+                                  )}
+                                </div>
+                              ) : claimingItemId === item.id ? (
+                                <form onSubmit={(e) => handleSubmitClaim(e, item.id)} className="space-y-3">
+                                  {claimError && (
+                                    <div className="p-2 bg-rose-50 dark:bg-rose-900/20 text-rose-700 dark:text-rose-300 rounded text-xs">
+                                      {claimError}
+                                    </div>
+                                  )}
+                                  <div>
+                                    <label htmlFor={`claim-note-${item.id}`} className="block text-sm font-medium text-[color:var(--ink-soft)] mb-1">
+                                      Deixe uma nota (opcional):
+                                    </label>
+                                    <textarea
+                                      id={`claim-note-${item.id}`}
+                                      rows={3}
+                                      placeholder="Ex: 'Vou comprar na semana que vem' ou 'Achei uma boa promoção'"
+                                      className="w-full px-3 py-2 text-sm border border-[color:var(--border)] rounded-xl focus:outline-none focus:ring-2 focus:ring-[color:var(--accent)] resize-none"
+                                      value={claimNote}
+                                      onChange={(e) => setClaimNote(e.target.value)}
+                                    />
+                                  </div>
+                                  <button
+                                    type="submit"
+                                    disabled={isClaiming}
+                                    className="w-full px-4 py-2 bg-[color:var(--success)] text-white rounded-xl hover:brightness-105 font-medium disabled:opacity-50 transition-all cursor-pointer"
+                                  >
+                                    {isClaiming ? 'Reservando...' : 'Confirmar reserva'}
+                                  </button>
+                                </form>
+                              ) : (
+                                <button
+                                  onClick={() => handleClaimItem(item.id)}
+                                  className="w-full px-4 py-2 bg-[color:var(--accent)] text-white rounded-xl hover:brightness-110 font-medium transition-all cursor-pointer shadow-soft"
+                                >
+                                  Vou dar este presente
+                                </button>
+                              )}
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                    ))}
+                  </div>
+                )}
+              </>
+            )}
+          </div>
         </div>
 
         <Footer />

components/footer.tsx

@@ -6,12 +6,11 @@ export default function Footer() {
   const { theme, toggleTheme } = useTheme();
 
   return (
-    <div className="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
+    <div className="max-w-7xl mx-auto py-8 px-4 sm:px-6 lg:px-8">
       <div className="flex flex-col items-center gap-2 text-sm">
-        <div className="flex items-center gap-3">
         <button
           onClick={toggleTheme}
-            className="flex items-center gap-2 px-4 py-2 rounded-lg bg-gray-200 hover:bg-gray-300 dark:bg-gray-700 dark:hover:bg-gray-600 transition-colors text-gray-700 dark:text-gray-300 font-medium"
+          className="flex items-center gap-2 px-4 py-2 rounded-full bg-card-soft hover:bg-[color:var(--accent-soft)] border border-[color:var(--border)] transition-colors text-[color:var(--ink-soft)] font-medium shadow-soft"
           aria-label="Alternar tema"
         >
           {theme === 'light' ? (
@@ -52,6 +51,5 @@ export default function Footer() {
         </button>
       </div>
     </div>
-    </div>
   );
 }

components/header.tsx

@@ -15,36 +15,51 @@ export default function Header({ title, subtitle, imageUrl, actions, maxWidth =
 
   return (
     <>
-      {/* Admin Warning */}
       {isAuthenticated && (
-        <div className="sticky top-0 z-50 bg-yellow-50 dark:bg-yellow-900 border-b border-yellow-200 dark:border-yellow-800">
+        <div className="sticky top-0 z-50 bg-amber-50 dark:bg-amber-900/40 border-b border-amber-200/70 dark:border-amber-800/60 backdrop-blur">
           <div className={`${maxWidth} mx-auto py-3 px-4 sm:px-6 lg:px-8`}>
-            <p className="text-center text-sm text-yellow-800 dark:text-yellow-200">
+            <p className="text-center text-sm text-amber-900 dark:text-amber-100">
               ⚠️ Atenção: visualizar listas públicas pode estragar surpresas
             </p>
           </div>
         </div>
       )}
 
-      {/* Hero Section */}
-      <div className="bg-white dark:bg-gray-800 shadow-sm">
-        <div className={`${maxWidth} mx-auto py-16 px-4 sm:py-24 sm:px-6 lg:px-8`}>
+      <div className="relative overflow-hidden">
+        {/* Subtle floating planet glyph */}
+        <div
+          aria-hidden
+          className="pointer-events-none absolute -top-12 -right-10 w-56 h-56 rounded-full opacity-60 blur-2xl"
+          style={{
+            background:
+              'radial-gradient(circle at 30% 30%, var(--halo-1), transparent 60%), radial-gradient(circle at 70% 70%, var(--halo-2), transparent 60%)',
+          }}
+        />
+        <div
+          aria-hidden
+          className="pointer-events-none absolute -bottom-16 -left-10 w-72 h-72 rounded-full opacity-50 blur-3xl"
+          style={{
+            background: 'radial-gradient(circle, var(--halo-3), transparent 60%)',
+          }}
+        />
+
+        <div className={`${maxWidth} mx-auto relative py-14 px-4 sm:py-20 sm:px-6 lg:px-8`}>
           <div className="flex flex-col md:flex-row items-center md:items-start gap-8">
             {imageUrl && (
-              <div className="md:w-64 flex-shrink-0">
+              <div className="md:w-56 flex-shrink-0">
                 <img
                   src={imageUrl}
                   alt={title}
-                  className="w-64 h-64 object-cover rounded-lg shadow-lg"
+                  className="w-56 h-56 object-cover rounded-3xl shadow-lifted ring-1 ring-[color:var(--border)]"
                 />
               </div>
             )}
             <div className={imageUrl ? 'flex-1 text-left' : 'flex-1 text-center'}>
-              <h1 className="text-5xl sm:text-6xl lg:text-7xl font-bold text-gray-900 dark:text-white mb-4">
+              <h1 className="text-5xl sm:text-6xl lg:text-7xl font-bold text-[color:var(--ink)] mb-4 leading-tight">
                 {title}
               </h1>
               {subtitle && (
-                <p className={`text-xl sm:text-2xl text-gray-600 dark:text-gray-300 mb-6 ${imageUrl ? '' : 'max-w-3xl mx-auto'}`}>
+                <p className={`text-xl sm:text-2xl text-[color:var(--ink-soft)] mb-6 ${imageUrl ? '' : 'max-w-3xl mx-auto'}`}>
                   {subtitle}
                 </p>
               )}