mirror of
https://github.com/hanzo-apps/hanzo.ai.git
synced 2026-10-29 04:20:39 +00:00
zeekay
faeee72a05
The CI/CD test step failed on every main commit at `pnpm lint:design`: 234 findings against an allowance of 58 colours. The university pages drew from emerald, red, amber and white-70 names nothing declares (so the colours never rendered), and carried raw px sizes, z-indexes, all-caps labels and style objects. They now read --state-success, --state-error, --border-selected, --white-60, the type and z scales, and gui props, and the raw box-shadows in nine components read --shadow-*. The colour allowance drops to the 50 that remain. The sitemap gate also failed: the course pages the segment generates were not offered, and /university/portal, a sample student's preview, was offered without a heading. The sitemap now lists COURSE_PAGES, the one list the segment builds from, and the portal is withheld from the index. Claude-Session: https://claude.ai/code/session_01HvACxex9ZZTzJCCHgirsGy
132 lines
4.1 KiB
TypeScript
132 lines
4.1 KiB
TypeScript
'use client'
|
|
|
|
import React, { useState } from "react";
|
|
|
|
import { Button, Box, View, YStack, XStack } from '@hanzo/ui'
|
|
import { Play, Pause, SkipForward, SkipBack } from "lucide-react";
|
|
import { Band, Head } from '@/components/marketing/band'
|
|
import { Line } from '@/components/type'
|
|
import { More } from '@hanzo/ui/marketing'
|
|
|
|
/** Two highlights thrown across the frame, so the empty frame is not a flat rectangle. */
|
|
const LIGHT =
|
|
'radial-gradient(circle at 20% 20%, var(--white-10), transparent 45%), radial-gradient(circle at 80% 30%, var(--white-08), transparent 50%)'
|
|
|
|
const OperativeDemo = () => {
|
|
const [isPlaying, setIsPlaying] = useState(false);
|
|
|
|
return (
|
|
<Band
|
|
id="demo"
|
|
rule={false}
|
|
ground="linear-gradient(to bottom, var(--background), var(--neutral-950))"
|
|
>
|
|
<Head
|
|
measure={768}
|
|
title="See Operative in Action"
|
|
lede={
|
|
<>
|
|
Watch as Hanzo Operative uses multimodal AI to router interfaces,
|
|
complete tasks, and solve problems autonomously.
|
|
</>
|
|
}
|
|
/>
|
|
|
|
{/* The frame the film sits in: a 16:9 window with a hairline round it. */}
|
|
<Box
|
|
position="relative"
|
|
width="100%"
|
|
maxW={1024}
|
|
mx="auto"
|
|
aspectRatio={16 / 9}
|
|
rounded="var(--radius-xl)"
|
|
overflow="hidden"
|
|
borderWidth={1}
|
|
borderColor="var(--neutral-800)"
|
|
boxShadow="var(--shadow-2xl)"
|
|
>
|
|
<YStack
|
|
position="absolute"
|
|
t={0}
|
|
r={0}
|
|
b={0}
|
|
l={0}
|
|
items="center"
|
|
justify="center"
|
|
background="linear-gradient(to top right, var(--neutral-950), var(--neutral-900))"
|
|
>
|
|
<Box position="absolute" inset={0} background={LIGHT} />
|
|
|
|
<YStack
|
|
position="absolute"
|
|
t={0}
|
|
r={0}
|
|
b={0}
|
|
l={0}
|
|
items="center"
|
|
justify="center"
|
|
>
|
|
<Line render="h3" size="x2" weight="700" color="var(--white)" marginBottom={16}>Demo Video</Line>
|
|
{/* The hover is the gui Button's own. It writes `_bg-0hover-*` with
|
|
`!important`, so the `hover:bg-[var(--white)]/30` that used to
|
|
sit here never painted — measured on the export, the hovered
|
|
ground is rgb(23,23,23), gui's, not a white wash. */}
|
|
<Button
|
|
size="lg"
|
|
rounded="var(--radius-full)"
|
|
bg="$raised"
|
|
backdropFilter="blur(4px)"
|
|
onClick={() => setIsPlaying(!isPlaying)}
|
|
>
|
|
{isPlaying ? <Pause width={24} height={24} color="var(--white)" /> : (
|
|
<View ml={4}>
|
|
<Play width={24} height={24} color="var(--white)" />
|
|
</View>
|
|
)}
|
|
</Button>
|
|
|
|
{/* The transport. Each control states its ink, and hovered the ink
|
|
stays rgb(163,163,163); what moves is the ghost Button's own
|
|
ground and edge, which is gui's. */}
|
|
<XStack
|
|
position="absolute"
|
|
b={24}
|
|
width="100%"
|
|
maxW={384}
|
|
items="center"
|
|
justify="center"
|
|
gap={16}
|
|
>
|
|
<Button size="sm" variant="ghost">
|
|
<SkipBack width={20} height={20} color="var(--muted-foreground)" />
|
|
</Button>
|
|
<Box
|
|
width="100%"
|
|
height={4}
|
|
rounded="var(--radius-full)"
|
|
overflow="hidden"
|
|
bg="$hover"
|
|
>
|
|
<Box width="33.333333%" height="100%" rounded="var(--radius-full)" bg="var(--primary)" />
|
|
</Box>
|
|
<Button size="sm" variant="ghost">
|
|
<SkipForward width={20} height={20} color="var(--muted-foreground)" />
|
|
</Button>
|
|
</XStack>
|
|
</YStack>
|
|
</YStack>
|
|
</Box>
|
|
|
|
<YStack mt={48} items="center">
|
|
<More
|
|
href="https://docs.hanzo.ai"
|
|
>
|
|
View more examples →
|
|
</More>
|
|
</YStack>
|
|
</Band>
|
|
);
|
|
};
|
|
|
|
export default OperativeDemo;
|