Files
zeekayandHanzo Dev 0a3ebececd Ship the real Hanzo mark, and stop the chat button sitting on it
The favicon was hand-made. `6c17299` replaced the generated scaffold icon with a
drawn "Hanzo H mark" whose blob is byte-identical to what production still
serves: three layers, fully opaque, polarity inverted, and offset about half a
cell so two of the four corner squares fall off the canvas. At its real 16px
tab size it is a pale smear. Take the mark from `@hanzo/logo` instead — already
a dependency here, already the source of the header logo — and ship the whole
set it publishes: favicon.ico (6 layers, 16→256), favicon.svg, apple-touch-icon.
`<head>` now declares all three; it previously declared one 696px opaque PNG and
nothing else, which also suppressed `app/icon.svg` (deleted — the mark has one
home now).

The header mark was invisible, and the fix on main only moved which theme it was
invisible in. `variant="mono"` does not inherit `currentColor` as Logo.tsx
claimed — it is hardcoded #000000, so main rendered black on the black page.
It is one ink on transparency, exactly like every mark in `partner-logos.ts`, so
it is carried the same way: `hz-ink-black`, none on light and invert(1) on dark.
The inversion lands on #ffffff/#DDDDDD, which is the `white` variant byte for
byte.

The chat launcher was covering the logo. `hz-fixed` sets `position: fixed` and
nothing else, so a fixed element with no offsets stays where it was: top-left,
48px square, directly over the mark, on every page and both themes. Nothing
could catch it — every class on the button had a rule, the missing one was never
written. Added `hz-dock` as that one rule, and sized the panel against the
viewport so it cannot grow past the screen it is docked to. The panel also took
`hz-bg` from `hz-bg-surface`, whose dark value is rgba(38,38,38,.5): right for a
card on the page, wrong for one floating over it.

A fabricated trademark is gone. `lux-network.svg` was hand-coded rects and
polygons spelling "LUX", nothing like the real mark, duplicated under three
filenames. Lux and Zoo Labs are sibling orgs in this estate, not our clients —
their marks and their entries in `clients` are both removed. A Hanzo surface
carries Hanzo branding.

Every share card 404'd: og:image pointed at `/opengraph-image`, a file-convention
route this app does not have, while the real `/og-image.png` sat declared and
unused. og:site_name was carrying the tagline and twitter:title disagreed with
og:title; both now say what they are.

The repo count contradicted itself in one viewport — "727+" in the hero, "2,500+"
in a tile 200px below it, 3.4x apart, and both in `<head>`. Neither survives
measurement: 535 non-archived public repos across the six orgs the site names.
Stated once now, as a floor, with the query that produced it.

"All systems operational" was a hardcoded string on every page with no health
check behind it — it would have said that straight through an outage. It links
to /status as "System status" instead.

Verified in a real browser at 390 and 1280, light and dark: the mark matches an
isolated render of the same SVG (mean abs diff 0.05/255) and dark is its exact
inverse; `elementFromPoint` at the mark's centre returns its own path; the
served .ico is 2b734c3b, six layers. Routes 60/60, no overflow, no console
errors.

Co-authored-by: Hanzo Dev <[email protected]>
2026-08-05 16:27:35 -07:00

107 lines
4.4 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="hz-rel hz-row hz-ai-center hz-jc-center hz-clip hz-bg">
{/* Grid pattern background */}
<div className="hz-abs hz-inset">
<div className="hz-abs hz-inset hz-dim-more"
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="hz-abs hz-r-full hz-blur-bg hz-bg-surface" />
<div className="hz-abs hz-r-full hz-blur-bg hz-bg-surface" />
<div className="hz-abs hz-top-0 hz-left-0 hz-right-0" />
</div>
<div className="hz-container-wide hz-rel hz-z-raised hz-py-7">
<div className="hz-align-center">
<motion.div
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.5 }}
className="hz-btn hz-btn-primary hz-gap-2 hz-mb-6"
>
<Sparkles className="hz-sq-2 hz-fg" />
<span className="hz-t-sm hz-fg">Zen4 MoDE models now available for enterprise deployment</span>
<Link href="/research" className="hz-t-sm hz-w-medium hz-row hz-ai-center hz-gap-1 hz-fg">
Learn more <ArrowRight className="hz-sq-1" />
</Link>
</motion.div>
<motion.h1
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.5, delay: 0.1 }}
className="hz-t-4xl hz-w-bold hz-tracking-tight hz-fg"
>
AI research and infrastructure
<br />
<span className="hz-fg">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="hz-container-narrow hz-mw-md hz-mt-6 hz-t-lg hz-leading-relaxed hz-fg"
>
Hanzo builds open-weight models, cloud infrastructure, and agent frameworks
— freely available to researchers, developers, and the broader AI ecosystem.{' '}
{site.brand.ossRepos} 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="hz-col-row hz-mt-6 hz-gap-4 hz-jc-center"
>
<Link href="/research">
<Button size="lg" className="hz-w-full hz-t-base hz-px-6 hz-bh-7 hz-r-full hz-bg-inverse hz-hoverable">
Explore Our Research
<ArrowRight className="hz-sq-2 hz-ml-2" />
</Button>
</Link>
<a href={site.links.platform} target="_blank" rel="noopener noreferrer">
<Button size="lg" variant="outline" className="hz-w-full hz-t-base hz-px-6 hz-bh-7 hz-r-full hz-fg hz-hoverable">
<Sparkles className="hz-sq-2 hz-mr-2" />
Try Zen AI
</Button>
</a>
<a href={site.links.bot} target="_blank" rel="noopener noreferrer">
<Button size="lg" variant="outline" className="hz-w-full hz-t-base hz-px-6 hz-bh-7 hz-r-full hz-fg hz-hoverable">
<Bot className="hz-sq-2 hz-mr-2" />
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="hz-grid hz-grid-4 hz-mt-7 hz-gap-6 hz-border-t hz-pt-6"
>
{site.stats.map((stat) => (
<div key={stat.label} className="hz-align-center">
<div className="hz-t-2xl hz-w-bold hz-fg">{stat.value}</div>
<div className="hz-t-sm hz-mt-1 hz-fg">{stat.label}</div>
</div>
))}
</motion.div>
</div>
</div>
)
}