mirror of
https://github.com/hanzo-apps/hanzo.ai.git
synced 2026-10-29 03:30:33 +00:00
zeekay
44626a40c3
The bar stood in the page's flow, clear at rest, so a first screen whose ground is a picture or a light started below it, and the bar read as a black band over the html's #000 ground: above the creative models' paintings, the kit pages' glow and the lit product heroes. It is glass now at rest and scrolled ($background/72 under the chrome blur; the scroll listener is gone), and such a first screen spreads `under(pt)` from components/shell/dock.ts: up by the bar's height, the same back on its top padding, so its ground starts at the top of the window behind the glass and no word moves. On Splash (the six creative models and Zen), PageHero, /edge, /identity, /functions, /playground, /operative, /realtime and /enso. On /beta the site's bar at rest keeps the glass and paints the focused pages' fixed glow on it (components/shell/focus.tsx), so the light runs on unbroken. 72% is kept: over Zen's painting the nav's ink holds 5.1:1 at .72 and falls to 3.7:1 at .6. The beta strip is polished curved steel in CSS gradients: a faint top line, a ridge 5px down, the flat dark under the words, a temper line and the bright 1px edge at the bottom; one `/` light at 70 degrees, resting mid-strip, moved by transform, brighter where it crosses the ridge and the edge than under the words. The 1px/3px grain that read as stripes is gone, and so is the root script that set --beta-tilt on <html> every pointer frame on every page, restyling the whole document and ignoring reduced motion. White words hold 5.4:1 against the brightest steel under them, where the live strip measured 4.35:1 at 1440 and 3.45:1 on a phone. Gates: e2e/gates/glass.spec.ts and e2e/gates/steel.spec.ts. The composer gate reads its rest once the theme's colours have eased in: read straight after the input appeared, the pill's border was a value on its way to its token (rgba(137…), rgba(175…) on two CI runs) and failed the check that the border keeps one value through focus. Claude-Session: https://claude.ai/code/session_01BLLMyBFSvAfCt7ZGqYuiEz
128 lines
4.3 KiB
TypeScript
128 lines
4.3 KiB
TypeScript
'use client'
|
|
|
|
import React from "react";
|
|
import { motion } from "@/components/motion";
|
|
import { Terminal, Eye, Cpu, MousePointer, Keyboard } from "lucide-react";
|
|
import { Box, View, YStack, XStack } from '@hanzo/ui'
|
|
import { Grid } from '@hanzo/ui/grid'
|
|
import { Line } from '@/components/type'
|
|
import { Action, Chip, Display, Lede } from '@hanzo/ui/marketing'
|
|
import { under } from '@/components/shell/dock'
|
|
|
|
/**
|
|
* The three washes behind the fold. They are siblings of the measure rather
|
|
* than children of it, because each one is sized against the SECTION — a
|
|
* half-width blur inside a 1280 column is a different picture on a wide screen.
|
|
*/
|
|
const SHEEN = 'linear-gradient(to bottom, color-mix(in oklab, var(--pure-white) 20%, transparent), transparent)'
|
|
|
|
const BLUR = {
|
|
position: 'absolute',
|
|
width: '50%',
|
|
height: '50%',
|
|
rounded: 9999,
|
|
background: 'color-mix(in oklab, var(--primary) 10%, transparent)',
|
|
filter: 'blur(64px)',
|
|
} as const
|
|
|
|
/** The badge's own dials: `Chip` leaves padding and fill to its caller, and
|
|
* `alignSelf` because the block it sits in is a gui stack — an item with no
|
|
* alignment of its own stretches the full measure. */
|
|
const BADGE = { self: "center", mb: 24, px: 16, py: 4, fontWeight: "500", bg: "color-mix(in oklab, var(--primary) 20%, transparent)", borderColor: "color-mix(in oklab, var(--pure-white) 30%, transparent)", color: "color-mix(in oklab, var(--foreground) 70%, transparent)" } as const
|
|
|
|
/** The four things the container can do, as one shape stated once. */
|
|
const HANDS = [
|
|
{ icon: Eye, label: 'Screen Vision' },
|
|
{ icon: Cpu, label: 'Multimodal Models' },
|
|
{ icon: MousePointer, label: 'Cursor Control' },
|
|
{ icon: Keyboard, label: 'Keyboard Actions' },
|
|
] as const
|
|
|
|
const OperativeHero = () => {
|
|
return (
|
|
<YStack
|
|
render="section"
|
|
position="relative"
|
|
overflow="hidden"
|
|
{...under(128)}
|
|
pb={128}
|
|
px={16}
|
|
$sm={{ px: 24 }}
|
|
$lg={{ px: 32 }}
|
|
>
|
|
<Box position="absolute" inset={0} background={SHEEN} />
|
|
<Box {...BLUR} t="33.333333%" l="-25%" />
|
|
<Box {...BLUR} b="25%" r="-25%" />
|
|
|
|
<YStack
|
|
position="relative"
|
|
z="var(--z-raised)"
|
|
width="100%"
|
|
maxW={1280}
|
|
mx="auto"
|
|
$platform-web={{ textAlign: 'center' }}
|
|
>
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 20 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.5 }}
|
|
>
|
|
<Chip {...BADGE}>
|
|
Computer use, in a container
|
|
</Chip>
|
|
|
|
<Display mb={24}>
|
|
Hanzo Operative
|
|
</Display>
|
|
|
|
<Lede mt={24} maxW={768} mx="auto">
|
|
A container with a Linux desktop inside it, and a model driving
|
|
that desktop by screenshot, mouse and keyboard. You watch through
|
|
a browser and send instructions from the same page. Nothing it
|
|
does reaches your machine, because the machine it is using is the
|
|
container.
|
|
</Lede>
|
|
|
|
<XStack flexWrap="wrap" justify="center" gap={16} mt={40}>
|
|
<Action href="#get-started" fill>Get Started</Action>
|
|
<Action href="https://docs.hanzo.ai">
|
|
<Terminal width={20} height={20} />
|
|
View Docs
|
|
</Action>
|
|
</XStack>
|
|
</motion.div>
|
|
|
|
<View
|
|
render={<motion.div initial={{ opacity: 0, y: 40 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.6, delay: 0.3 }} />}
|
|
display="block"
|
|
mt={64}
|
|
width="100%"
|
|
maxW={896}
|
|
mx="auto"
|
|
>
|
|
<Grid columns={{ min: 160, max: 4 }} gap={24}>
|
|
{HANDS.map(({ icon: Icon, label }) => (
|
|
<YStack key={label} items="center">
|
|
<YStack
|
|
width={48}
|
|
height={48}
|
|
items="center"
|
|
justify="center"
|
|
mb={16}
|
|
rounded="var(--radius-lg)"
|
|
bg="$raised"
|
|
>
|
|
<Icon width={24} height={24} color="var(--foreground)" />
|
|
</YStack>
|
|
<Line size="sm" weight="500" tone="soft">{label}</Line>
|
|
</YStack>
|
|
))}
|
|
</Grid>
|
|
</View>
|
|
</YStack>
|
|
</YStack>
|
|
);
|
|
};
|
|
|
|
export default OperativeHero;
|