{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "hero-1",
  "description": "Freddy style by Arkcabin.",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "button",
    "badge",
    "card",
    "avatar"
  ],
  "files": [
    {
      "path": "registry/blocks/hero/1/page.tsx",
      "content": "\"use client\";\n\nimport React from \"react\";\nimport { DemoLayout } from \"@/components/demo-layout\";\nimport { AiWorkAnnouncement } from \"./announcement\";\nimport { AiWorkHeader } from \"./header\";\nimport { AiWorkHero } from \"./hero\";\nimport { AiWorkWrapper } from \"./wrapper\";\n\n/**\n * AI-WORK BLOCK (Page Entry)\n * Composed high-fidelity landing experience with cinematic scroll effects.\n */\nexport default function AiWorkPage() {\n  const [isAnnouncementVisible, setIsAnnouncementVisible] =\n    React.useState(true);\n\n  return (\n    <div className=\"w-full bg-accent font-sans text-foreground selection:bg-background selection:text-background\">\n      {/* 1. Announcement Bar */}\n      <AiWorkAnnouncement\n        isVisible={isAnnouncementVisible}\n        onClose={() => setIsAnnouncementVisible(false)}\n      />\n\n      {/* 2. Master Content Wrapper (Handles Cinematic Layering) */}\n      <AiWorkWrapper isAnnouncementVisible={isAnnouncementVisible}>\n        {/* 3. Navigation Header */}\n        <AiWorkHeader isFullWidth={false} isScrolled={false} />\n\n        {/* 4. Hero Landing Section */}\n        <AiWorkHero />\n\n        {/* Additional sections can be modularly added here */}\n\n        <DemoLayout />\n      </AiWorkWrapper>\n    </div>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/freddy/hero-1/page.tsx"
    },
    {
      "path": "registry/blocks/hero/1/bones.json",
      "content": "{\n  \"breakpoints\": {\n    \"640\": {\n      \"name\": \"hero-1\",\n      \"viewportWidth\": 640,\n      \"width\": 640,\n      \"height\": 600,\n      \"bones\": [\n        { \"x\": 10, \"y\": 10, \"w\": 40, \"h\": 5, \"r\": 4 },\n        { \"x\": 10, \"y\": 20, \"w\": 80, \"h\": 15, \"r\": 8 },\n        { \"x\": 10, \"y\": 40, \"w\": 60, \"h\": 10, \"r\": 4 },\n        { \"x\": 10, \"y\": 60, \"w\": 30, \"h\": 8, \"r\": 20 },\n        { \"x\": 45, \"y\": 60, \"w\": 30, \"h\": 8, \"r\": 20 }\n      ]\n    },\n    \"1024\": {\n      \"name\": \"hero-1\",\n      \"viewportWidth\": 1024,\n      \"width\": 1024,\n      \"height\": 700,\n      \"bones\": [\n        { \"x\": 5, \"y\": 10, \"w\": 20, \"h\": 4, \"r\": 4 },\n        { \"x\": 5, \"y\": 18, \"w\": 60, \"h\": 20, \"r\": 12 },\n        { \"x\": 5, \"y\": 42, \"w\": 45, \"h\": 8, \"r\": 4 },\n        { \"x\": 5, \"y\": 55, \"w\": 15, \"h\": 6, \"r\": 30 },\n        { \"x\": 22, \"y\": 55, \"w\": 15, \"h\": 6, \"r\": 30 }\n      ]\n    }\n  }\n}\n",
      "type": "registry:component",
      "target": "components/freddy/hero-1/bones.json"
    },
    {
      "path": "registry/blocks/hero/1/announcement.tsx",
      "content": "\"use client\";\n\nimport { ArrowUpRight, Asterisk } from \"lucide-react\";\nimport { Button } from \"@/components/ui/button\";\n\n/**\n * AI-Work Announcement Bar\n * Precision-engineered thin bar for top-level alerts.\n */\nexport function AiWorkAnnouncement({\n  isVisible,\n  onClose,\n}: {\n  isVisible: boolean;\n  onClose: () => void;\n}) {\n  if (!isVisible) {\n    return null;\n  }\n\n  return (\n    <div className=\"sticky top-0 z-10 flex h-8 items-center justify-between bg-accent px-6 font-bold text-[10px] text-muted-foreground uppercase tracking-[0.15em]\">\n      <div className=\"flex items-center gap-2\">\n        <div className=\"h-1.5 w-1.5 animate-pulse rounded-full bg-emerald-500 shadow-[0_0_8px_rgba(16,185,129,0.8)]\" />\n        <p>\n          Announcing <span className=\"text-foreground\">$10M</span> Seed Funding\n        </p>\n      </div>\n      <div className=\"flex items-center gap-4\">\n        <a\n          className=\"flex items-center gap-1 transition-colors hover:text-foreground\"\n          href=\"#\"\n        >\n          Read More\n          <ArrowUpRight className=\"h-2.5 w-2.5\" />\n        </a>\n        <Button\n          className=\"ml-2 transition-all hover:scale-110\"\n          onClick={onClose}\n          size=\"icon-sm\"\n          variant=\"ghost\"\n        >\n          <Asterisk className=\"h-2.5 w-2.5 rotate-45\" />\n        </Button>\n      </div>\n    </div>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/freddy/hero-1/announcement.tsx"
    },
    {
      "path": "registry/blocks/hero/1/header.tsx",
      "content": "\"use client\";\n\nimport { Asterisk } from \"lucide-react\";\nimport { useTheme } from \"next-themes\";\nimport React from \"react\";\nimport { Logo } from \"@/components/logo\";\nimport { Button } from \"@/components/ui/button\";\nimport { cn } from \"@/lib/utils\";\n\n/**\n * AI-Work Header\n * Sticky, minimalist navigation with glassmorphism and theme toggle.\n */\nexport function AiWorkHeader({\n  isScrolled,\n  isFullWidth,\n}: {\n  isScrolled: boolean;\n  isFullWidth: boolean;\n}) {\n  const { theme, setTheme } = useTheme();\n  const [mounted, setMounted] = React.useState(false);\n\n  React.useEffect(() => {\n    setMounted(true);\n  }, []);\n\n  const navItems = [\"AI Workforce\", \"Platform\", \"Integrations\", \"Company\"];\n\n  // Avoid hydration mismatch by waiting for mount\n  const activeScrolled = mounted ? isScrolled : false;\n  const activeFullWidth = mounted ? isFullWidth : false;\n\n  return (\n    <header\n      className={cn(\n        \"sticky top-0 z-50 flex h-16 items-center justify-between px-4 transition-all duration-300 md:px-6\",\n        activeScrolled\n          ? \"bg-transparent\"\n          : \"bg-[radial-gradient(ellipse_80%_50%_at_50%_-10%,rgba(120,119,198,0.08),transparent)]\",\n        !activeFullWidth && \"rounded-t-2xl\"\n      )}\n    >\n      {/* Logo */}\n      <div className=\"flex flex-1 items-center gap-2\">\n        <Logo className=\"h-6\" />\n        <span className=\"inline-flex h-3.5 items-center justify-center rounded-full bg-accent/10 px-1.5 py-px font-black text-[7px] text-foreground uppercase leading-none tracking-widest ring-1 ring-foreground/20 ring-inset\">\n          Pro\n        </span>\n      </div>\n\n      {/* Navigation */}\n      <div className=\"flex items-center gap-6\">\n        <nav className=\"flex items-center gap-1 rounded-full border border-border/50 bg-secondary/30 p-1 backdrop-blur-md\">\n          {navItems.map((item) => (\n            <Button\n              className=\"h-9 rounded-full px-5 font-medium text-[14px] transition-all hover:bg-white/5\"\n              key={item}\n              size=\"sm\"\n              variant=\"ghost\"\n            >\n              {item}\n            </Button>\n          ))}\n        </nav>\n\n        {/* Actions */}\n        <div className=\"flex items-center gap-4\">\n          <Button\n            className=\"h-10 rounded-full px-6 font-bold text-[14px] transition-all hover:scale-105 active:scale-95\"\n            variant=\"secondary\"\n          >\n            Request a Demo\n          </Button>\n          <Button\n            className=\"group relative rounded-full shadow-[0_0_0_rgba(var(--primary),0)] ring-1 ring-border/50 transition-all hover:bg-primary/5 hover:shadow-[0_0_20px_rgba(var(--primary),0.15)] hover:ring-primary/40 active:scale-95\"\n            onClick={() => setTheme(theme === \"dark\" ? \"light\" : \"dark\")}\n            size=\"icon\"\n            title=\"Toggle Theme\"\n            variant=\"ghost\"\n          >\n            <Asterisk className=\"h-5 w-5 animate-[spin_15s_linear_infinite] text-muted-foreground transition-all duration-500 group-hover:rotate-180 group-hover:text-primary\" />\n            <span className=\"absolute inset-0 rounded-full bg-primary/5 opacity-0 transition-opacity group-hover:opacity-100\" />\n          </Button>\n        </div>\n      </div>\n    </header>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/freddy/hero-1/header.tsx"
    },
    {
      "path": "registry/blocks/hero/1/hero.tsx",
      "content": "\"use client\";\n\nimport { ArrowRight, Asterisk, Check } from \"lucide-react\";\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\";\nimport { Badge } from \"@/components/ui/badge\";\nimport { Button } from \"@/components/ui/button\";\nimport { Card } from \"@/components/ui/card\";\nimport { Bone } from \"@/components/bone\";\nimport heroBones from \"./bones.json\";\n\n/**\n * AI-Work Hero (Freddy Pro)\n * Compact, premium, left-aligned SaaS hero with status cards.\n * 🦴 \"Skeleton-Aware\" implementation for zero-config distribution.\n */\nexport function AiWorkHero({ loading = false }: { loading?: boolean }) {\n  return (\n    <Bone data={heroBones} loading={loading} name=\"hero-1\">\n      <section className=\"relative z-20 flex min-h-[calc(100vh-3rem)] flex-col overflow-hidden bg-background\">\n        {/* Subtle background */}\n        <div className=\"absolute inset-0 z-[-1]\">\n          <div className=\"absolute inset-0 bg-background\" />\n          <div className=\"absolute inset-0 bg-[radial-gradient(circle_at_center,rgba(120,119,198,0.1)_0%,transparent_50%)]\" />\n        </div>\n\n        {/* Main content — left-aligned, max-width container */}\n        <div className=\"relative z-10 mx-auto flex w-full max-w-6xl flex-1 flex-col justify-center px-6 pt-24 pb-20 md:px-10 md:pt-32\">\n          {/* Badge */}\n          <Badge\n            className=\"mb-6 inline-flex w-fit items-center gap-2 rounded-full border-border/60 bg-accent/40 px-3 py-1 font-semibold text-[11px] text-muted-foreground uppercase tracking-widest\"\n            variant=\"outline\"\n          >\n            <span className=\"relative flex h-1.5 w-1.5\">\n              <span className=\"absolute inline-flex h-full w-full animate-ping rounded-full bg-emerald-500 opacity-75\" />\n              <span className=\"relative inline-flex h-1.5 w-1.5 rounded-full bg-emerald-500\" />\n            </span>\n            Now available · Freddy v1.0\n          </Badge>\n\n          {/* Headline */}\n          <h1 className=\"mb-6 max-w-4xl font-bold text-[clamp(3.5rem,6vw,5.5rem)] text-foreground leading-none tracking-tighter\">\n            Introducing Freddy.\n            <br />\n            <span className=\"font-medium text-[clamp(2.5rem,4.5vw,4.5rem)] text-muted-foreground/60 italic tracking-tight\">\n              The first AI Worker for IT\n            </span>\n          </h1>\n\n          {/* Description */}\n          <p className=\"mb-10 max-w-xl text-[16px] text-muted-foreground/90 leading-relaxed\">\n            Freddy handles the repetitive work your team shouldn't — freeing your\n            department to move 5× faster, starting week one.\n          </p>\n\n          {/* CTAs */}\n          <div className=\"flex flex-wrap items-center gap-4\">\n            <Button\n              className=\"rounded-full px-8 font-semibold text-[15px] shadow-sm transition-all hover:shadow-md\"\n              size=\"lg\"\n            >\n              Request a Demo\n              <ArrowRight className=\"ml-2 h-4 w-4\" />\n            </Button>\n            <Button\n              className=\"rounded-full px-8 font-semibold text-[15px] text-muted-foreground transition-all hover:text-foreground\"\n              size=\"lg\"\n              variant=\"ghost\"\n            >\n              See how it works\n            </Button>\n          </div>\n\n          {/* Trust line */}\n          <p className=\"mt-6 text-[12px] text-muted-foreground/60\">\n            Trusted by IT teams at Figma, Linear, and 40+ companies.\n          </p>\n        </div>\n\n        {/* Status Cards — bottom dock, centered */}\n        <div className=\"relative z-10 mx-auto w-full max-w-2xl shrink-0 px-6 pb-16 md:px-10\">\n          <div className=\"flex flex-col gap-4\">\n            {/* Ticket card */}\n            <Card className=\"fade-in slide-in-from-bottom-3 flex w-full animate-in flex-row items-center justify-between gap-0 rounded-2xl border-border/50 p-2 px-4 py-4 shadow-md duration-500\">\n              <div className=\"flex items-center gap-3\">\n                <Avatar className=\"h-8 w-8 rounded-lg\">\n                  <AvatarImage\n                    alt=\"arkdev\"\n                    src=\"https://ui-avatars.com/api/?name=arkdev&background=2563eb&color=fff\"\n                  />\n                  <AvatarFallback className=\"rounded-lg\">AD</AvatarFallback>\n                </Avatar>\n                <div>\n                  <p className=\"font-semibold text-[12.5px] text-foreground\">\n                    Figma dev seat required\n                  </p>\n                  <p className=\"text-[11px] text-muted-foreground\">\n                    arkdev · @it-support\n                  </p>\n                </div>\n              </div>\n              <div className=\"flex h-5 w-5 items-center justify-center rounded-full border border-orange-500/20 bg-orange-500/10\">\n                <div className=\"h-1.5 w-1.5 animate-pulse rounded-full bg-orange-500\" />\n              </div>\n            </Card>\n\n            {/* Policy card */}\n            <Card className=\"fade-in slide-in-from-bottom-4 flex w-full animate-in flex-row items-center gap-4 rounded-2xl border-border/50 p-4 py-4 shadow-md duration-700\">\n              <div className=\"flex h-5 w-5 shrink-0 items-center justify-center rounded-md bg-blue-500/15 text-blue-500\">\n                <Check className=\"h-3 w-3\" strokeWidth={3} />\n              </div>\n              <p className=\"text-[12.5px] text-muted-foreground\">\n                Read the{\" \"}\n                <span className=\"inline-flex items-center gap-1 font-semibold text-foreground\">\n                  <span className=\"h-2.5 w-2.5 rounded-[3px] bg-blue-500\" />\n                  Software access policy\n                </span>{\" \"}\n                to determine which apps require approval...\n              </p>\n            </Card>\n\n            {/* Executing card */}\n            <Card className=\"fade-in slide-in-from-bottom-5 flex w-full animate-in flex-row items-center gap-4 rounded-2xl border-border/50 p-4 py-4 shadow-md duration-900\">\n              <div className=\"flex h-5 w-5 shrink-0 animate-[spin_3s_linear_infinite] items-center justify-center text-blue-500\">\n                <Asterisk className=\"h-4 w-4\" />\n              </div>\n              <p className=\"font-medium text-[12.5px] text-foreground\">\n                Executing tasks\n              </p>\n              <div className=\"ml-auto h-1.5 w-24 overflow-hidden rounded-full bg-border/30\">\n                <div className=\"h-full w-[60%] animate-pulse rounded-full bg-blue-500/40\" />\n              </div>\n            </Card>\n          </div>\n        </div>\n      </section>\n    </Bone>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/freddy/hero-1/hero.tsx"
    },
    {
      "path": "registry/blocks/hero/1/wrapper.tsx",
      "content": "\"use client\";\n\nimport React from \"react\";\nimport { cn } from \"@/lib/utils\";\nimport { AiWorkHeader } from \"./header\";\n\n/**\n * AI-Work Content Wrapper\n * Manages the scroll-sync logic and provides the \"slide-over\" layering context.\n */\nexport function AiWorkWrapper({\n  children,\n  isAnnouncementVisible,\n}: {\n  children: React.ReactNode;\n  isAnnouncementVisible: boolean;\n}) {\n  const [isScrolled, setIsScrolled] = React.useState(false);\n  const [isFullWidth, setIsFullWidth] = React.useState(false);\n  const [mounted, setMounted] = React.useState(false);\n\n  React.useEffect(() => {\n    setMounted(true);\n    const handleScroll = () => {\n      const scrollY = window.scrollY;\n      // Stage 1: Full-width snap once past announcement (32px)\n      setIsFullWidth(scrollY > 32 || !isAnnouncementVisible);\n\n      // Stage 2: Transparency snap once Hero reaches middle of Header (32 + 40 = 72px)\n      setIsScrolled(scrollY > 72);\n    };\n    window.addEventListener(\"scroll\", handleScroll);\n    handleScroll(); // Initial check\n    return () => window.removeEventListener(\"scroll\", handleScroll);\n  }, [isAnnouncementVisible]);\n\n  const activeFullWidth = mounted ? isFullWidth : false;\n\n  return (\n    <div\n      className={cn(\n        \"relative z-20 bg-background shadow-[0_-20px_80px_rgba(0,0,0,0.1)] transition-all duration-300\",\n        activeFullWidth\n          ? \"mx-0 rounded-none border-none\"\n          : \"mx-2 rounded-t-2xl border-border/50 border-t border-r border-l\"\n      )}\n    >\n      {React.Children.map(children, (child) => {\n        if (React.isValidElement(child) && child.type === AiWorkHeader) {\n          // Pass states only after mounting to prevent mismatch\n          return React.cloneElement(\n            child as React.ReactElement<\n              React.ComponentProps<typeof AiWorkHeader>\n            >,\n            {\n              isScrolled: mounted ? isScrolled : false,\n              isFullWidth: activeFullWidth,\n            }\n          );\n        }\n        return child;\n      })}\n    </div>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/freddy/hero-1/wrapper.tsx"
    }
  ],
  "meta": {
    "height": "100vh",
    "isPinned": true,
    "createdAt": "2026-03-28",
    "activeForDays": 120
  },
  "categories": [
    "hero",
    "header"
  ],
  "type": "registry:block"
}