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

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