mirror of
https://github.com/zoo-apps/industries.git
synced 2026-10-30 14:57:03 +00:00
aandHanzo Dev
16b601298d
- New TopBanner component above the navbar (announcement strip). - Removed the in-Hero eyebrow badge (replaced by the banner). - Navbar shifted down 40px to make room. - Background gradient retuned to soft pink/green/indigo pools matching the three CTA colors so the wash reads as the same palette family. - --primary, --brand-pink, --brand-green, --brand-blue all synced to the exact button hexes (#d90b7e / #1faa59 / #2d3de0). Co-authored-by: Hanzo Dev <[email protected]>
94 lines
3.9 KiB
TypeScript
94 lines
3.9 KiB
TypeScript
'use client'
|
|
|
|
import { Button } from '@hanzo/ui'
|
|
import { motion } from 'framer-motion'
|
|
import Link from 'next/link'
|
|
import { ArrowRight, Sparkles, Bot } from 'lucide-react'
|
|
import site from '@/site.config'
|
|
|
|
export default function Hero() {
|
|
return (
|
|
<div className="relative min-h-[90vh] flex items-center justify-center overflow-hidden pt-16 bg-background">
|
|
{/* Grid pattern background */}
|
|
<div className="absolute inset-0">
|
|
<div className="absolute inset-0 opacity-[0.03]"
|
|
style={{
|
|
backgroundImage: `linear-gradient(rgba(255,255,255,0.1) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.1) 1px, transparent 1px)`,
|
|
backgroundSize: '64px 64px'
|
|
}}
|
|
/>
|
|
<div className="absolute top-1/4 left-1/4 w-[600px] h-[600px] rounded-full blur-[120px] bg-foreground/5" />
|
|
<div className="absolute bottom-1/4 right-1/4 w-[400px] h-[400px] rounded-full blur-[100px] bg-foreground/[0.03]" />
|
|
<div className="absolute top-0 left-0 right-0 h-px bg-gradient-to-r from-transparent via-white/10 to-transparent" />
|
|
</div>
|
|
|
|
<div className="relative z-10 max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 py-24">
|
|
<div className="text-center">
|
|
<motion.h1
|
|
initial={{ opacity: 0, y: 20 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.5, delay: 0.1 }}
|
|
className="text-4xl sm:text-5xl md:text-6xl lg:text-7xl font-bold tracking-tight leading-[1.1] text-foreground"
|
|
>
|
|
AI research and infrastructure
|
|
<br />
|
|
<span className="text-muted-foreground">as open, public goods.</span>
|
|
</motion.h1>
|
|
|
|
<motion.p
|
|
initial={{ opacity: 0, y: 20 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.5, delay: 0.2 }}
|
|
className="mt-8 text-lg sm:text-xl max-w-2xl mx-auto leading-relaxed text-muted-foreground"
|
|
>
|
|
Zoo builds open-weight models, cloud infrastructure, and agent frameworks
|
|
— freely available to researchers, developers, and the broader AI ecosystem.
|
|
727+ open source repos. MIT and Apache licensed.
|
|
25% of compute revenue goes back to OSS contributors.
|
|
</motion.p>
|
|
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 20 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.5, delay: 0.3 }}
|
|
className="mt-10 flex flex-col sm:flex-row gap-4 justify-center"
|
|
>
|
|
<Link href="/research">
|
|
<button className="btn-brutalist pill-pink w-full sm:w-auto">
|
|
Explore Our Research
|
|
<ArrowRight className="w-4 h-4" />
|
|
</button>
|
|
</Link>
|
|
<a href={site.links.platform} target="_blank" rel="noopener noreferrer">
|
|
<button className="btn-brutalist pill-green w-full sm:w-auto">
|
|
<Sparkles className="w-4 h-4" />
|
|
Try Zen AI
|
|
</button>
|
|
</a>
|
|
<a href={site.links.bot} target="_blank" rel="noopener noreferrer">
|
|
<button className="btn-brutalist pill-blue w-full sm:w-auto">
|
|
<Bot className="w-4 h-4" />
|
|
Deploy AI Team
|
|
</button>
|
|
</a>
|
|
</motion.div>
|
|
</div>
|
|
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 20 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.5, delay: 0.4 }}
|
|
className="mt-24 grid grid-cols-2 md:grid-cols-4 gap-8 border-t border-border pt-12"
|
|
>
|
|
{site.stats.map((stat) => (
|
|
<div key={stat.label} className="text-center">
|
|
<div className="text-2xl sm:text-3xl font-bold text-foreground">{stat.value}</div>
|
|
<div className="text-sm mt-1 text-muted-foreground">{stat.label}</div>
|
|
</div>
|
|
))}
|
|
</motion.div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|