mirror of
https://github.com/zoo-apps/industries.git
synced 2026-10-30 14:57:03 +00:00
zooqueenandHanzo Dev
19905ecd56
Adds three home compositions sharing the same investor narrative: - / (canonical) — restored old composition with Hero + zoo composite, Ecosystem, ZooLabsNarrative, ServicesOverview, ResearchHighlights, Leadership, TrustedBy, Contact. Adds polished motion (Reveal, Parallax wrappers, scroll-linked Hero drift), softer brutalist reset (rounded utilities now opt-in), and a Zen5 rainbow-gradient top banner. - /homepage1 — backup of the previous / composition (noindex). - /homepage2 — 10-slide deck with snap-mandatory CSS scroll snap, side-rail slide indicator, alternating brand-color slide washes, CSS-3D AI-coin scene behind the Hero (Zen5 family + Cloud / Network spokes, perspective + per-coin float keyframes, light blur), network-mesh edges, Foundation + Leadership + Traction + Access slides, plus the AI-native market-cap composite with NVIDIA as public-market comparable. - /homepage3 — editorial 'Quarterly' variant with serif display, masthead, drop cap, ornamental dividers, chapter framing, and a colophon footer. Wax-seal red accent on a cream paper surface. Other changes: - Navbar: drop rounded floating pill in favour of sharp transparent bar with a sharp backdrop-blur strip + border-b-2 black on scroll. - TopBanner: animated rainbow gradient background (300% width, background-position keyframe, prefers-reduced-motion aware). - Leadership / TeamMemberCard: rounded-full avatars (override the brutalist global border-radius reset via data-circle). - Ecosystem strip: render JPGs at /public/ecosystem/*.jpg with emoji fallback only when an image is missing (bear, drought, lake, eagle, forest, whale). - TheStack: each layer card is now a click target to its live domain (zenlm.org, zoo.cloud, zoo.network, zoo.fund, zoo.vote). - public/: new /hero/zooimg.png, /ecosystem/*.jpg, /pe/*.png. - Reveal / Parallax / ParallaxDivider / ParallaxBackground / CoinScene / SlideIndicator / SlideParallax / NetworkAnimation primitives under components/. Co-authored-by: Hanzo Dev <[email protected]>
64 lines
2.0 KiB
TypeScript
64 lines
2.0 KiB
TypeScript
'use client'
|
|
|
|
import Link from 'next/link'
|
|
import { ArrowRight, Sparkles } from 'lucide-react'
|
|
|
|
/**
|
|
* Zen5 launch banner. Background is an animated rainbow gradient — the
|
|
* gradient is large (300%) and its position is animated, so the colours
|
|
* appear to drift across the bar. ``background-position`` is one of the
|
|
* few CSS properties that can be hardware-accelerated cleanly on most
|
|
* browsers; the animation uses ``ease-in-out`` so the loop is seamless.
|
|
*
|
|
* The keyframes live inline (no globals edit needed) and respect
|
|
* ``prefers-reduced-motion`` via the media query at the bottom.
|
|
*/
|
|
export default function TopBanner() {
|
|
return (
|
|
<>
|
|
<style
|
|
dangerouslySetInnerHTML={{
|
|
__html: `
|
|
.rainbow-banner {
|
|
background-image: linear-gradient(90deg,
|
|
var(--brand-yellow),
|
|
var(--brand-green),
|
|
var(--brand-cyan),
|
|
var(--brand-blue),
|
|
var(--brand-magenta),
|
|
var(--brand-red),
|
|
var(--brand-yellow));
|
|
background-size: 300% 100%;
|
|
animation: rainbow-shift 14s linear infinite;
|
|
}
|
|
@keyframes rainbow-shift {
|
|
0% { background-position: 0% 50%; }
|
|
100% { background-position: 300% 50%; }
|
|
}
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.rainbow-banner {
|
|
animation: none;
|
|
background-position: 0% 50%;
|
|
}
|
|
}
|
|
`,
|
|
}}
|
|
/>
|
|
<div className="rainbow-banner fixed top-0 left-0 right-0 z-[60] text-black border-b-2 border-black">
|
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-2 flex items-center justify-center gap-3 text-center text-sm font-semibold">
|
|
<Sparkles className="w-4 h-4 shrink-0" aria-hidden />
|
|
<span className="truncate">
|
|
Zen5 is here — the open AI model family, private and local
|
|
</span>
|
|
<Link
|
|
href="/research"
|
|
className="inline-flex items-center gap-1 font-extrabold uppercase tracking-wide underline underline-offset-2 hover:no-underline shrink-0"
|
|
>
|
|
Learn more <ArrowRight className="w-3.5 h-3.5" />
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</>
|
|
)
|
|
}
|