A retro-futuristic sunlit pixel-art hero block featuring frosted glass navigation, dynamic vector button microinteractions, and orchestrated line-reveal motion.

Build the next generationof autonomous AI software

Next-generation foundation models and collaborative reasoning agents engineered for full-stack automation, complex workflows, and enterprise scale.

import HeroPixelWorkspace from "@/components/jackui/blocks/hero-pixel-workspace/hero-pixel-workspace";

export default function HeroPage() {
  return (
    <HeroPixelWorkspace
      brandName="Novacraft"
      headline={"Build the next generation\nof autonomous AI software"}
      subtitle="Next-generation foundation models and collaborative reasoning agents engineered for full-stack automation, complex workflows, and enterprise scale."
      primaryCta={{
        label: "Deploy agents",
        onClick: () => console.log("Deploy agents clicked"),
      }}
      secondaryCta={{
        label: "Explore research",
        onClick: () => console.log("Explore research clicked"),
      }}
    />
  );
}

Installation

bunx shadcn@latest add https://jackui.com/r/hero-pixel-workspace.json

npx shadcn@latest add https://jackui.com/r/hero-pixel-workspace.json

pnpm dlx shadcn@latest add https://jackui.com/r/hero-pixel-workspace.json

Props

`HeroPixelWorkspace`

Prop	Type	Description
`brandName`	`string`	Optional. Text label for the brand logo. Default: `"Novacraft"`.
`brandHref`	`string`	Optional. Navigation link URL for the brand logo. Default: `"#"`
`headline`	`string`	Optional. Main headline text supporting `\n` line breaks for animated line reveals. Default: `"Build the next generation\nof autonomous AI software"`.
`subtitle`	`string`	Optional. Descriptive paragraph text rendered inside a frosted glass capsule.
`primaryCta`	`HeroAction`	Optional. Primary call-to-action button configuration. Default: `{ label: "Deploy agents" }`.
`secondaryCta`	`HeroAction`	Optional. Secondary frosted glass button configuration. Default: `{ label: "Explore research" }`.
`backgroundImageUrl`	`string`	Optional. Background image URL. Default: Sunlit pixel-art workspace artwork with ImageKit auto-format transformations.
`imageLoading`	`"lazy" \| "eager"`	Optional. Image loading priority behavior passed to `next/image`. Default: `"lazy"`.
`navGroup`	`NavItem[]`	Optional. Array of navigation items for the centered frosted glass pill segment.
`extraNavLinks`	`NavItem[]`	Optional. Array of standalone secondary pill links on the navbar.
`className`	`string`	Optional. Additional CSS classes applied to the outer wrapper container. Default: `""`.

`HeroAction`

Prop	Type	Description
`label`	`string`	Required. Button display text.
`href`	`string`	Optional. Destination URL for link buttons.
`onClick`	`() => void`	Optional. Click event callback handler.

`NavItem`

Prop	Type	Description
`label`	`string`	Required. Navigation link display text.
`href`	`string`	Required. Target URL or section anchor (e.g. `"#models"`).

Hero Pixel Workspace