mstfyldzandClaude Sonnet 4.6
bc8bd747ff
- Body: radial gradient orbs (teal + green) + dot grid overlay + grain - Header: dark mesh gradient, shimmer logo animation, animated gradient tagline, frosted glass lang-switcher pill - CategorySection: glow-ring emoji badge, gradient top line, frosted glass card container, teal/gold decorative divider - MenuItemRow: gradient emoji circle, magic-card CSS hover spotlight, price pill with green gradient border - BottomTabBar: blur/glass tabbar, active emoji glow + scale + pill bg - Page: welcome strip with teal gradient border, hero fade from header Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
90 lines
3.2 KiB
TypeScript
90 lines
3.2 KiB
TypeScript
import Link from 'next/link'
|
|
|
|
type Dict = {
|
|
header: { tagline: string }
|
|
langSwitch: { current: string; other: string; otherHref: string }
|
|
}
|
|
|
|
export default function Header({ dict }: { dict: Dict }) {
|
|
return (
|
|
<header
|
|
className="fixed top-0 left-0 right-0 z-40"
|
|
style={{ height: 'var(--header-h)' }}
|
|
>
|
|
{/* Background with mesh gradient */}
|
|
<div
|
|
className="absolute inset-0"
|
|
style={{
|
|
background:
|
|
'linear-gradient(160deg, #1F140A 0%, #2E1C10 50%, #3D2B1F 100%)',
|
|
}}
|
|
/>
|
|
|
|
{/* Subtle noise texture on header */}
|
|
<div
|
|
className="absolute inset-0 opacity-[0.04]"
|
|
style={{
|
|
backgroundImage:
|
|
"url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E\")",
|
|
}}
|
|
/>
|
|
|
|
{/* Animated gradient accent line at bottom */}
|
|
<div className="header-line absolute bottom-0 left-0 right-0 h-[1.5px]" />
|
|
|
|
<div className="relative flex items-center justify-between h-full px-5">
|
|
{/* Logo block */}
|
|
<div className="flex flex-col leading-none gap-0.5">
|
|
{/* KOZMOS with shimmer */}
|
|
<span
|
|
className="logo-shimmer font-display font-semibold tracking-[0.2em] uppercase"
|
|
style={{ fontSize: '1.25rem' }}
|
|
>
|
|
KOZMOS
|
|
</span>
|
|
|
|
{/* Tagline with gradient */}
|
|
<div className="flex items-center gap-1.5">
|
|
<span
|
|
className="font-body font-medium tracking-[0.28em] uppercase"
|
|
style={{
|
|
fontSize: '0.55rem',
|
|
background: 'linear-gradient(90deg, #4AAFA8, #C8A850, #5C8A5C)',
|
|
backgroundClip: 'text',
|
|
WebkitBackgroundClip: 'text',
|
|
WebkitTextFillColor: 'transparent',
|
|
}}
|
|
>
|
|
✦ {dict.header.tagline} ✦
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Language switcher pill */}
|
|
<Link
|
|
href={dict.langSwitch.otherHref}
|
|
className="group relative flex items-center gap-1 px-3 py-1.5 rounded-full overflow-hidden"
|
|
style={{
|
|
background: 'rgba(74,175,168,0.10)',
|
|
border: '1px solid rgba(74,175,168,0.22)',
|
|
}}
|
|
aria-label={`Switch to ${dict.langSwitch.other}`}
|
|
>
|
|
{/* Hover glow */}
|
|
<span
|
|
className="absolute inset-0 opacity-0 group-hover:opacity-100 transition-opacity duration-300"
|
|
style={{ background: 'rgba(74,175,168,0.15)' }}
|
|
/>
|
|
<span className="relative font-body text-[0.65rem] font-semibold tracking-widest text-white/35">
|
|
{dict.langSwitch.current}
|
|
</span>
|
|
<span className="relative font-body text-[0.55rem] text-white/20">·</span>
|
|
<span className="relative font-body text-[0.65rem] font-semibold tracking-widest text-teal group-hover:text-white transition-colors duration-200">
|
|
{dict.langSwitch.other}
|
|
</span>
|
|
</Link>
|
|
</div>
|
|
</header>
|
|
)
|
|
}
|