feat: add animated Mars planet decoration to header

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

app/[slug]/page.tsx

@@ -202,7 +202,7 @@ function PublicWishlistContent() {
                 const maxForMe = item.remainingQuantity + (myClaim?.quantity ?? 0);
                 const showQuantitySummary = item.quantity > 1 && siteSettings.showQuantity;
                 const sold = item.remainingQuantity === 0 && !myClaim;
-                const canClaim = siteSettings.claimingEnabled;
+                const canClaim = siteSettings.claimingEnabled && Boolean(currentGuestId);
 
                 return (
                   <div

app/api/[slug]/route.ts

@@ -8,13 +8,9 @@ export async function GET(
   { params }: { params: Promise<{ slug: string }> }
 ) {
   try {
+    const { slug } = await params;
     const isAdmin = verifyAdminToken(request);
     const guest = await getGuestFromRequest(request);
-    if (!isAdmin && !guest) {
-      return NextResponse.json({ error: 'Convite necessário' }, { status: 401 });
-    }
-
-    const { slug } = await params;
 
     const wishlist = await db
       .select()
@@ -29,11 +25,11 @@ export async function GET(
       );
     }
 
-    // Only return public wishlists (admin can see all)
-    if (!wishlist[0].isPublic && !isAdmin) {
+    // Public wishlists can be viewed anonymously; private wishlists require admin or guest access.
+    if (!wishlist[0].isPublic && !isAdmin && !guest) {
       return NextResponse.json(
-        { error: 'Wishlist not found' },
-        { status: 404 }
+        { error: 'Convite necessário' },
+        { status: 401 }
       );
     }
 

app/api/items/[id]/route.ts

@@ -11,12 +11,6 @@ export async function GET(
   try {
     const { id } = await params;
 
-    const isAdmin = verifyAdminToken(request);
-    const guest = await getGuestFromRequest(request);
-    if (!isAdmin && !guest) {
-      return NextResponse.json({ error: 'Convite necessário' }, { status: 401 });
-    }
-
     // Get item
     const item = await db
       .select()
@@ -45,10 +39,13 @@ export async function GET(
       );
     }
 
-    if (!wishlist[0].isPublic && !isAdmin) {
+    const isAdmin = verifyAdminToken(request);
+    const guest = await getGuestFromRequest(request);
+
+    if (!wishlist[0].isPublic && !isAdmin && !guest) {
       return NextResponse.json(
-        { error: 'This item is private' },
-        { status: 403 }
+        { error: 'Convite necessário' },
+        { status: 401 }
       );
     }
 

app/api/public/wishlists/route.ts

@@ -1,16 +1,9 @@
-import { NextRequest, NextResponse } from 'next/server';
+import { NextResponse } from 'next/server';
 import { eq, asc } from 'drizzle-orm';
 import { db, wishlists } from '@/lib/db';
-import { getGuestFromRequest, verifyAdminToken } from '@/lib/auth/tokens';
 
-export async function GET(request: NextRequest) {
+export async function GET() {
   try {
-    const isAdmin = verifyAdminToken(request);
-    const guest = await getGuestFromRequest(request);
-    if (!isAdmin && !guest) {
-      return NextResponse.json({ error: 'Convite necessário' }, { status: 401 });
-    }
-
     // Fetch only public wishlists
     const publicWishlists = await db
       .select()

app/api/wishlists/[id]/items/route.ts

@@ -11,12 +11,6 @@ export async function GET(
   try {
     const { id } = await params;
 
-    const isAdmin = verifyAdminToken(request);
-    const guest = await getGuestFromRequest(request);
-    if (!isAdmin && !guest) {
-      return NextResponse.json({ error: 'Convite necessário' }, { status: 401 });
-    }
-
     // Check if wishlist exists
     const wishlist = await db
       .select()
@@ -31,11 +25,14 @@ export async function GET(
       );
     }
 
-    // Permissions: guest can only see public wishlists; admin sees all
-    if (!wishlist[0].isPublic && !isAdmin) {
+    const isAdmin = verifyAdminToken(request);
+    const guest = await getGuestFromRequest(request);
+
+    // Public wishlists can be viewed anonymously; private wishlists require admin or guest access.
+    if (!wishlist[0].isPublic && !isAdmin && !guest) {
       return NextResponse.json(
-        { error: 'This wishlist is private' },
-        { status: 403 }
+        { error: 'Convite necessário' },
+        { status: 401 }
       );
     }
 

app/globals.css

@@ -75,6 +75,198 @@ body {
   opacity: 0.85;
 }
 
+.mars-planet {
+  --mars-x: 0;
+  --mars-y: 0;
+  position: absolute;
+  z-index: 0;
+  width: clamp(5.5rem, 16vw, 8.5rem);
+  aspect-ratio: 1;
+  display: grid;
+  place-items: center;
+  cursor: pointer;
+  perspective: 600px;
+  filter: drop-shadow(0 24px 34px rgba(138, 47, 21, 0.24));
+  transform:
+    translate3d(calc(var(--mars-x) * 6px), calc(var(--mars-y) * 6px), 0)
+    rotateX(calc(var(--mars-y) * -8deg))
+    rotateY(calc(var(--mars-x) * 10deg));
+  transition: transform 180ms ease, filter 180ms ease;
+}
+
+.mars-planet:hover {
+  filter: drop-shadow(0 28px 38px rgba(138, 47, 21, 0.32));
+}
+
+.mars-planet:active {
+  transform:
+    translate3d(calc(var(--mars-x) * 5px), calc(var(--mars-y) * 5px), 0)
+    rotateX(calc(var(--mars-y) * -8deg))
+    rotateY(calc(var(--mars-x) * 10deg))
+    scale(0.96);
+}
+
+.mars-planet__body,
+.mars-planet__orbit,
+.mars-planet__spark,
+.mars-planet__band,
+.mars-planet__crater {
+  position: absolute;
+  pointer-events: none;
+}
+
+.mars-planet__body {
+  inset: 12%;
+  overflow: hidden;
+  border-radius: 9999px;
+  background:
+    radial-gradient(circle at 32% 28%, #ffc6a1 0 9%, transparent 10%),
+    radial-gradient(circle at 30% 32%, #e97445 0 34%, #c1502c 56%, #7c2814 100%);
+  box-shadow:
+    inset -18px -16px 30px rgba(71, 22, 12, 0.42),
+    inset 10px 9px 18px rgba(255, 219, 184, 0.34),
+    0 0 34px rgba(231, 111, 65, 0.48);
+  animation: mars-float 5.5s ease-in-out infinite;
+}
+
+.mars-planet__body::before {
+  content: "";
+  position: absolute;
+  inset: -18% -24%;
+  background:
+    linear-gradient(16deg, transparent 20%, rgba(255, 196, 142, 0.24) 24% 29%, transparent 34%),
+    linear-gradient(-11deg, transparent 45%, rgba(121, 44, 24, 0.24) 49% 54%, transparent 59%);
+  animation: mars-drift 9s linear infinite;
+}
+
+.mars-planet__orbit {
+  width: 116%;
+  height: 42%;
+  border: 2px solid rgba(255, 205, 165, 0.78);
+  border-left-color: transparent;
+  border-right-color: transparent;
+  border-radius: 9999px;
+  transform: rotate(-18deg);
+  box-shadow: 0 0 18px rgba(255, 188, 138, 0.34);
+  animation: mars-orbit 4.5s ease-in-out infinite;
+}
+
+.mars-planet__band {
+  left: 8%;
+  right: 8%;
+  height: 11%;
+  border-radius: 9999px;
+  background: rgba(255, 178, 124, 0.26);
+  transform: rotate(-14deg);
+}
+
+.mars-planet__band--one {
+  top: 36%;
+}
+
+.mars-planet__band--two {
+  top: 58%;
+  background: rgba(113, 41, 23, 0.22);
+}
+
+.mars-planet__crater {
+  border-radius: 9999px;
+  background:
+    radial-gradient(circle at 38% 35%, rgba(255, 219, 184, 0.24), transparent 36%),
+    rgba(106, 36, 19, 0.38);
+  box-shadow: inset 2px 2px 4px rgba(68, 21, 12, 0.34);
+}
+
+.mars-planet__crater--one {
+  width: 16%;
+  height: 16%;
+  top: 30%;
+  left: 52%;
+}
+
+.mars-planet__crater--two {
+  width: 11%;
+  height: 11%;
+  top: 58%;
+  left: 29%;
+}
+
+.mars-planet__crater--three {
+  width: 9%;
+  height: 9%;
+  top: 64%;
+  left: 64%;
+}
+
+.mars-planet__spark {
+  width: 0.48rem;
+  height: 0.48rem;
+  border-radius: 9999px;
+  background: #fff1df;
+  box-shadow: 0 0 12px rgba(255, 241, 223, 0.9);
+  animation: mars-spark 2.4s ease-in-out infinite;
+}
+
+.mars-planet__spark--one {
+  top: 10%;
+  left: 17%;
+}
+
+.mars-planet__spark--two {
+  right: 10%;
+  bottom: 18%;
+  width: 0.34rem;
+  height: 0.34rem;
+  animation-delay: 0.8s;
+}
+
+@keyframes mars-float {
+  0%, 100% {
+    transform: translateY(0) rotate(-2deg);
+  }
+  50% {
+    transform: translateY(-8px) rotate(2deg);
+  }
+}
+
+@keyframes mars-drift {
+  from {
+    transform: translateX(-10%);
+  }
+  to {
+    transform: translateX(10%);
+  }
+}
+
+@keyframes mars-orbit {
+  0%, 100% {
+    transform: rotate(-18deg) scaleX(1);
+  }
+  50% {
+    transform: rotate(-18deg) scaleX(1.08);
+  }
+}
+
+@keyframes mars-spark {
+  0%, 100% {
+    opacity: 0.35;
+    transform: scale(0.72);
+  }
+  50% {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .mars-planet,
+  .mars-planet *,
+  .mars-planet *::before {
+    animation: none !important;
+    transition: none !important;
+  }
+}
+
 .bg-card {
   background-color: var(--card);
 }

components/guest-guard.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import { useEffect, useState } from 'react';
-import { authApi } from '@/lib/api';
+import { authApi, wishlistsApi } from '@/lib/api';
 
 type Status = 'checking' | { kind: 'ok'; guestName: string } | 'denied';
 
@@ -21,6 +21,15 @@ export default function GuestGuard({ children }: { children: React.ReactNode })
         if (who.role === 'admin' || who.role === 'guest') {
           setStatus({ kind: 'ok', guestName: who.guest?.name ?? 'admin' });
         } else {
+          const slug = window.location.pathname.split('/').filter(Boolean)[0];
+          if (slug) {
+            const wishlist = await wishlistsApi.getBySlug(slug);
+            if (cancelled) return;
+            if (wishlist.isPublic) {
+              setStatus({ kind: 'ok', guestName: 'visitante' });
+              return;
+            }
+          }
           setStatus('denied');
         }
       } catch {

components/header.tsx

@@ -1,5 +1,7 @@
 'use client';
 
+import MarsPlanet from '@/components/mars-planet';
+
 interface HeaderProps {
   title: string;
   subtitle?: string;
@@ -25,6 +27,7 @@ export default function Header({ title, subtitle, imageUrl, actions, maxWidth =
         />
 
         <div className={`${maxWidth} mx-auto relative py-14 px-4 sm:py-20 sm:px-6 lg:px-8`}>
+          <MarsPlanet className="absolute right-4 top-4 sm:right-8 sm:top-7 lg:right-10 lg:top-9" />
           <div className="flex flex-col md:flex-row items-center md:items-start gap-8">
             {imageUrl && (
               <div className="md:w-56 flex-shrink-0">

components/mars-planet.tsx

@@ -0,0 +1,43 @@
+'use client';
+
+import type { PointerEvent } from 'react';
+
+type MarsPlanetProps = {
+  className?: string;
+};
+
+export default function MarsPlanet({ className = '' }: MarsPlanetProps) {
+  const handlePointerMove = (event: PointerEvent<HTMLDivElement>) => {
+    const bounds = event.currentTarget.getBoundingClientRect();
+    const x = ((event.clientX - bounds.left) / bounds.width - 0.5) * 2;
+    const y = ((event.clientY - bounds.top) / bounds.height - 0.5) * 2;
+
+    event.currentTarget.style.setProperty('--mars-x', x.toFixed(3));
+    event.currentTarget.style.setProperty('--mars-y', y.toFixed(3));
+  };
+
+  const resetTilt = (event: PointerEvent<HTMLDivElement>) => {
+    event.currentTarget.style.setProperty('--mars-x', '0');
+    event.currentTarget.style.setProperty('--mars-y', '0');
+  };
+
+  return (
+    <div
+      aria-hidden="true"
+      className={`mars-planet ${className}`}
+      onPointerMove={handlePointerMove}
+      onPointerLeave={resetTilt}
+    >
+      <span className="mars-planet__orbit" />
+      <span className="mars-planet__body">
+        <span className="mars-planet__band mars-planet__band--one" />
+        <span className="mars-planet__band mars-planet__band--two" />
+        <span className="mars-planet__crater mars-planet__crater--one" />
+        <span className="mars-planet__crater mars-planet__crater--two" />
+        <span className="mars-planet__crater mars-planet__crater--three" />
+      </span>
+      <span className="mars-planet__spark mars-planet__spark--one" />
+      <span className="mars-planet__spark mars-planet__spark--two" />
+    </div>
+  );
+}