root/chadebebe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
belisards
2026-05-03 15:47:56 -03:00
parent 4864bf6304
commit e38473e88d
8 changed files with 454 additions and 141 deletions
Download Patch File Download Diff File Expand all files Collapse all files

86
components/footer.tsx
View File

@@ -6,51 +6,49 @@ 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"
aria-label="Alternar tema"
>
{theme === 'light' ? (
<>
<svg
className="w-5 h-5"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"
/>
</svg>
<span>Modo escuro</span>
</>
) : (
<>
<svg
className="w-5 h-5"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"
/>
</svg>
<span>Modo claro</span>
</>
)}
</button>
</div>
<button
onClick={toggleTheme}
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' ? (
<>
<svg
className="w-5 h-5"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"
/>
</svg>
<span>Modo escuro</span>
</>
) : (
<>
<svg
className="w-5 h-5"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"
/>
</svg>
<span>Modo claro</span>
</>
)}
</button>
</div>
</div>
);

35
components/header.tsx
View File

@@ -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>
)}