refactor: update UI components and page layouts

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

app/[slug]/page.tsx

@@ -70,14 +70,14 @@ export default function PublicWishlistPage() {
       setClaimNote('');
       fetchWishlist();
     } catch (err: any) {
-      setClaimError(err.message || 'Failed to claim item');
+      setClaimError(err.message || 'Erro ao reservar item');
     } finally {
       setIsClaiming(false);
     }
   };
 
   const handleUnclaim = async (itemId: string) => {
-    if (!confirm('Are you sure you want to unclaim this item?')) {
+    if (!confirm('Tem certeza que deseja cancelar a reserva deste item?')) {
       return;
     }
 
@@ -88,7 +88,7 @@ export default function PublicWishlistPage() {
       await claimingApi.unclaim(itemId);
       fetchWishlist();
     } catch (err: any) {
-      setUnclaimError(err.message || 'Failed to unclaim item');
+      setUnclaimError(err.message || 'Erro ao cancelar reserva');
     } finally {
       setIsUnclaiming(false);
     }
@@ -100,16 +100,16 @@ export default function PublicWishlistPage() {
 
   const formatPrice = (price: number | null, currency: string) => {
     if (!price) return null;
-    return new Intl.NumberFormat('en-US', {
+    return new Intl.NumberFormat('pt-BR', {
       style: 'currency',
-      currency: currency || 'USD',
+      currency: currency || 'BRL',
     }).format(price);
   };
 
   if (isLoading) {
     return (
       <div className="min-h-screen bg-gray-50 dark:bg-gray-900 flex items-center justify-center">
-        <p className="text-gray-600 dark:text-gray-400">Loading...</p>
+        <p className="text-gray-600 dark:text-gray-400">Carregando...</p>
       </div>
     );
   }
@@ -118,8 +118,8 @@ export default function PublicWishlistPage() {
     return (
       <div className="min-h-screen bg-gray-50 dark:bg-gray-900 flex items-center justify-center">
         <div className="text-center">
-          <h1 className="text-2xl font-bold text-gray-900 dark:text-white mb-2">Wishlist Not Found</h1>
-          <p className="text-gray-600 dark:text-gray-400">{error || 'This wishlist does not exist or is not public.'}</p>
+          <h1 className="text-2xl font-bold text-gray-900 dark:text-white mb-2">Lista não encontrada</h1>
+          <p className="text-gray-600 dark:text-gray-400">{error || 'Esta lista não existe ou não é pública.'}</p>
         </div>
       </div>
     );
@@ -155,14 +155,14 @@ export default function PublicWishlistPage() {
                 d="M10 19l-7-7m0 0l7-7m-7 7h18"
               />
             </svg>
-            Back to Home
+            Voltar ao início
           </a>
 
           {/* Preferences Section */}
           {wishlist.preferences && (
             <div className="mb-8 bg-white dark:bg-gray-800 rounded-lg shadow p-6">
               <h2 className="text-xl font-bold text-gray-900 dark:text-white mb-3">
-                General Interests & Preferences
+                Interesses e Preferências
               </h2>
               <div
                 className="prose prose-indigo dark:prose-invert max-w-none text-gray-700 dark:text-gray-300 [&_a]:text-indigo-600 [&_a]:dark:text-indigo-400 [&_a]:hover:underline"
@@ -189,11 +189,11 @@ export default function PublicWishlistPage() {
                   onChange={(e) => setShowClaimed(e.target.checked)}
                   className="h-4 w-4 text-blue-600 border-gray-300 rounded"
                 />
-                <span className="ml-2 text-sm text-gray-700 dark:text-gray-300">Show claimed items</span>
+                <span className="ml-2 text-sm text-gray-700 dark:text-gray-300">Mostrar itens reservados</span>
               </label>
             </div>
             <div className="text-sm text-gray-600 dark:text-gray-400">
-              {filteredItems.length} of {items.length} items
+              {filteredItems.length} de {items.length} itens
             </div>
           </div>
 
@@ -201,7 +201,7 @@ export default function PublicWishlistPage() {
           {filteredItems.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">
-                {showClaimed ? 'No items in this wishlist yet' : 'All items have been claimed!'}
+                {showClaimed ? 'Nenhum item nesta lista ainda' : 'Todos os itens já foram reservados!'}
               </p>
             </div>
           ) : (
@@ -272,30 +272,30 @@ export default function PublicWishlistPage() {
                             </div>
                           </div>
                           <p className="text-center text-lg font-semibold text-gray-900 dark:text-white mb-1">
-                            Item Claimed!
+                            Item reservado!
                           </p>
                           <p className="text-center text-sm text-gray-600 dark:text-gray-400 mb-2">
-                            The status is now locked.
+                            O status está confirmado.
                           </p>
                           {justClaimedNote && (
                             <p className="text-center text-xs text-gray-600 dark:text-gray-400 italic">
-                              Your Note: &quot;{justClaimedNote}&quot;
+                              Sua nota: &quot;{justClaimedNote}&quot;
                             </p>
                           )}
                         </div>
                       ) : item.claimedAt ? (
                         <div className="bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-800 rounded p-3">
                           <p className="text-sm font-medium text-green-800 dark:text-green-200">
-                            Claimed by {item.claimedByName}
+                            Reservado por {item.claimedByName}
                           </p>
                           {item.claimedByNote && (
                             <p className="text-xs text-green-700 dark:text-green-300 mt-1">
-                              Note: {item.claimedByNote}
+                              Nota: {item.claimedByNote}
                             </p>
                           )}
                           {item.isPurchased && (
                             <p className="text-xs text-green-700 dark:text-green-300 mt-1 font-medium">
-                              ✓ Purchased
+                              ✓ Comprado
                             </p>
                           )}
                           {showClaimed && (
@@ -304,7 +304,7 @@ export default function PublicWishlistPage() {
                               disabled={isUnclaiming}
                               className="mt-3 w-full px-4 py-2 bg-red-500 text-white rounded-md hover:bg-red-600 font-medium disabled:opacity-50 transition-colors cursor-pointer text-sm"
                             >
-                              {isUnclaiming ? 'Unclaiming...' : 'Unclaim Item'}
+                              {isUnclaiming ? 'Cancelando...' : 'Cancelar reserva'}
                             </button>
                           )}
                         </div>
@@ -319,12 +319,12 @@ export default function PublicWishlistPage() {
 
                             <div>
                               <label htmlFor={`claim-note-${item.id}`} className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
-                                Add a Note (Optional):
+                                Deixe uma nota (opcional):
                               </label>
                               <textarea
                                 id={`claim-note-${item.id}`}
                                 rows={3}
-                                placeholder="Let them know your plans! e.g., 'Buying this next week' or 'Found a great deal online' or 'Need to check the size first'"
+                                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-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-green-500 dark:bg-gray-700 dark:text-white resize-none"
                                 value={claimNote}
                                 onChange={(e) => setClaimNote(e.target.value)}
@@ -336,7 +336,7 @@ export default function PublicWishlistPage() {
                               disabled={isClaiming}
                               className="w-full px-4 py-2 bg-green-500 text-white rounded-md hover:bg-green-600 font-medium disabled:opacity-50 transition-colors cursor-pointer"
                             >
-                              {isClaiming ? 'Claiming...' : 'Confirm Claim'}
+                              {isClaiming ? 'Reservando...' : 'Confirmar reserva'}
                             </button>
                           </form>
                         </div>
@@ -345,7 +345,7 @@ export default function PublicWishlistPage() {
                           onClick={() => handleClaimItem(item.id)}
                           className="w-full px-4 py-2 bg-indigo-600 text-white rounded-md hover:bg-indigo-700 font-medium transition-colors cursor-pointer"
                         >
-                          Claim This Item
+                          Vou dar este presente
                         </button>
                       )}
                       </div>

app/layout.tsx

@@ -14,13 +14,13 @@ async function getSettings() {
     }, {} as Record<string, string>);
 
     return {
-      siteTitle: settingsObj.siteTitle || 'Wishlist',
-      homepageSubtext: settingsObj.homepageSubtext || 'Browse and explore available wishlists',
+      siteTitle: settingsObj.siteTitle || 'Chá de Bebê',
+      homepageSubtext: settingsObj.homepageSubtext || 'Escolha um presente da lista!',
     };
   } catch (error) {
     return {
-      siteTitle: 'Wishlist',
-      homepageSubtext: 'Browse and explore available wishlists',
+      siteTitle: 'Chá de Bebê',
+      homepageSubtext: 'Escolha um presente da lista!',
     };
   }
 }
@@ -29,7 +29,7 @@ export async function generateMetadata(): Promise<Metadata> {
   const settings = await getSettings();
   return {
     title: settings.siteTitle,
-    description: "Self-hosted wishlist application for families",
+    description: "Lista de presentes para o chá de bebê",
     icons: {
       icon: '/icon.svg',
     },
@@ -42,7 +42,7 @@ export default function RootLayout({
   children: React.ReactNode;
 }>) {
   return (
-    <html lang="en">
+    <html lang="pt-BR">
       <body className="font-sans antialiased bg-gray-50 dark:bg-gray-900">
         <AuthProvider>
           <ThemeProvider>{children}</ThemeProvider>

app/lock/page.tsx

@@ -32,11 +32,11 @@ export default function LockPage() {
         router.push('/');
         router.refresh();
       } else {
-        setError(data.error || 'Incorrect password');
+        setError(data.error || 'Senha incorreta');
         setPassword('');
       }
     } catch (err) {
-      setError('Failed to verify password. Please try again.');
+      setError('Erro ao verificar senha. Tente novamente.');
       console.error('Lock verification error:', err);
     } finally {
       setIsSubmitting(false);
@@ -46,8 +46,8 @@ export default function LockPage() {
   return (
     <div className="min-h-screen bg-gray-50 dark:bg-gray-900">
       <Header
-        title="Password Required"
-        subtitle="Please enter the password to access this site"
+        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">
@@ -62,7 +62,7 @@ export default function LockPage() {
 
               <div>
                 <label htmlFor="password" className="block text-base font-medium text-gray-700 dark:text-gray-300 mb-2">
-                  Password
+                  Senha
                 </label>
                 <input
                   type="password"
@@ -72,7 +72,7 @@ export default function LockPage() {
                   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"
                   value={password}
                   onChange={(e) => setPassword(e.target.value)}
-                  placeholder="Enter password"
+                  placeholder="Digite a senha"
                   disabled={isSubmitting}
                 />
               </div>
@@ -82,7 +82,7 @@ export default function LockPage() {
                 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"
               >
-                {isSubmitting ? 'Verifying...' : 'Submit'}
+                {isSubmitting ? 'Verificando...' : 'Entrar'}
               </button>
             </form>
           </div>

app/not-found.tsx

@@ -1,7 +1,6 @@
-// Root-level not-found page
 export default function RootNotFound() {
   return (
-    <html lang="en">
+    <html lang="pt-BR">
       <body>
         <div style={{
           minHeight: '100vh',
@@ -22,10 +21,10 @@ export default function RootNotFound() {
           }}>
             <div style={{ fontSize: '3.75rem', fontWeight: 'bold', color: '#1f2937' }}>404</div>
             <h1 style={{ fontSize: '1.5rem', fontWeight: '600', color: '#111827', marginTop: '1rem' }}>
-              Page Not Found
+              Página não encontrada
             </h1>
             <p style={{ color: '#4b5563', marginTop: '1rem' }}>
-              The page you are looking for doesn't exist.
+              A página que você procura não existe.
             </p>
             <a
               href="/"
@@ -40,7 +39,7 @@ export default function RootNotFound() {
                 textDecoration: 'none'
               }}
             >
-              Go Home
+              Voltar ao início
             </a>
           </div>
         </div>

app/page.tsx

@@ -11,7 +11,7 @@ import ShareButton from '@/components/share-button';
 export default function Home() {
   const [wishlists, setWishlists] = useState<Wishlist[]>([]);
   const [isLoading, setIsLoading] = useState(true);
-  const [settings, setSettings] = useState<Settings>({ siteTitle: 'Wishlist', homepageSubtext: 'Browse and explore available wishlists' });
+  const [settings, setSettings] = useState<Settings>({ siteTitle: 'Chá de Bebê', homepageSubtext: 'Escolha um presente da lista!' });
 
   useEffect(() => {
     fetchWishlists();
@@ -47,8 +47,8 @@ export default function Home() {
           subtitle={settings.homepageSubtext}
           actions={
             <ShareButton
-              title="Check out this wishlist!"
-              text="I thought you might be interested in this wishlist."
+              title="Veja a lista do chá de bebê!"
+              text="Dê uma olhada na lista de presentes do chá de bebê."
             />
           }
         />
@@ -58,11 +58,11 @@ export default function Home() {
           <div className="px-4 sm:px-0">
             {isLoading ? (
               <div className="text-center py-12">
-                <p className="text-gray-600 dark:text-gray-400">Loading...</p>
+                <p className="text-gray-600 dark:text-gray-400">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">No public wishlists available yet</p>
+                <p className="text-gray-500 dark:text-gray-400">Nenhuma lista disponível ainda</p>
               </div>
             ) : (
               <div className="grid grid-cols-1 gap-6">