{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "hero-4",
  "description": "Boxed structural hero with dashed borders, interactive feature grid, and 3D parallax cards.",
  "dependencies": [
    "motion",
    "lucide-react"
  ],
  "registryDependencies": [
    "button"
  ],
  "files": [
    {
      "path": "registry/blocks/hero/4/page.tsx",
      "content": "\"use client\";\n\nimport React from \"react\";\nimport { Hero4 } from \"./hero\";\n\n/**\n * HERO 4 BLOCK (Page Entry)\n * Boxed structural hero for component libraries and tech-focused SaaS.\n */\nexport default function Hero4Page() {\n  return (\n    <div className=\"w-full bg-background font-sans text-foreground selection:bg-foreground selection:text-background\">\n      <Hero4 />\n    </div>\n  );\n}\n",
      "type": "registry:component"
    },
    {
      "path": "registry/blocks/hero/4/hero.tsx",
      "content": "\"use client\";\n\nimport { motion } from \"motion/react\";\nimport { Button } from \"@/components/ui/button\";\nimport { ArrowRight, Plus } from \"lucide-react\";\nimport { GridPattern } from \"@/components/shared\";\nimport { Hero4Cards } from \"./cards\";\n\n/**\n * HERO 4: BOXED STRUCTURAL\n * Layout-heavy hero with structural borders and interactive feature grid.\n */\nexport function Hero4() {\n  return (\n    <section className=\"relative mx-auto w-full max-w-7xl border-x bg-background px-4 pt-24 pb-20 md:px-10 md:pt-32 lg:px-20\">\n      \n      {/* 1. Corner Markers & Structural Elements */}\n      <div className=\"absolute -top-3 -left-3 size-6 text-muted-foreground/40\">\n        <Plus className=\"size-full\" strokeWidth={1} />\n      </div>\n      <div className=\"absolute -top-3 -right-3 size-6 text-muted-foreground/40\">\n        <Plus className=\"size-full\" strokeWidth={1} />\n      </div>\n      <div className=\"absolute -bottom-3 -left-3 size-6 text-muted-foreground/40\">\n        <Plus className=\"size-full\" strokeWidth={1} />\n      </div>\n      <div className=\"absolute -bottom-3 -right-3 size-6 text-muted-foreground/40\">\n        <Plus className=\"size-full\" strokeWidth={1} />\n      </div>\n\n      {/* 2. Background Pattern */}\n      <div className=\"absolute inset-0 z-0 overflow-hidden opacity-20\">\n        <GridPattern height={40} width={40} className=\"mask-[radial-gradient(100%_100%_at_top_right,white,transparent)]\" />\n      </div>\n\n      <div className=\"relative z-10 flex flex-col items-center\">\n        \n        {/* 3. Badge with Structural Feel */}\n        <motion.div\n          initial={{ opacity: 0, y: -10 }}\n          animate={{ opacity: 1, y: 0 }}\n          className=\"mb-8 flex items-center gap-3 rounded-md border bg-muted/40 px-3 py-1 text-[11px] font-black uppercase tracking-widest text-foreground ring-1 ring-inset ring-foreground/10\"\n        >\n          <div className=\"size-1.5 rounded-full bg-primary\" />\n          Ship faster with Freddy\n        </motion.div>\n\n        {/* 4. Headline / Copy */}\n        <div className=\"mb-12 text-center\">\n          <motion.h1\n            initial={{ opacity: 0, scale: 0.98 }}\n            animate={{ opacity: 1, scale: 1 }}\n            transition={{ duration: 0.6 }}\n            className=\"mb-6 font-heading text-[clamp(2rem,6vw,4rem)] font-bold leading-none tracking-tight\"\n          >\n            A New Standard for <br />\n            Component Libraries.\n          </motion.h1>\n          <motion.p\n            initial={{ opacity: 0, y: 10 }}\n            animate={{ opacity: 1, y: 0 }}\n            transition={{ delay: 0.2 }}\n            className=\"mx-auto max-w-2xl text-balance text-muted-foreground/80 md:text-lg\"\n          >\n            Pre-built blocks for every SaaS category. Expertly crafted with <br className=\"hidden md:block\" /> \n            Shadcn UI, Tailwind CSS, and precise Framer Motion physics.\n          </motion.p>\n        </div>\n\n        {/* 5. CTAs */}\n        <motion.div\n           initial={{ opacity: 0, y: 10 }}\n           animate={{ opacity: 1, y: 0 }}\n           transition={{ delay: 0.3 }}\n           className=\"mb-20 flex flex-wrap items-center gap-4\"\n        >\n          <Button\n            size=\"lg\"\n            className=\"h-11 rounded-none px-8 font-bold tracking-tight shadow-md transition-all active:scale-95\"\n          >\n            View Documentation\n            <ArrowRight className=\"ml-2 size-4\" />\n          </Button>\n          <Button\n            variant=\"outline\"\n            size=\"lg\"\n            className=\"h-11 rounded-none px-8 font-bold transition-all hover:bg-muted active:scale-95\"\n          >\n            Browse Categories\n          </Button>\n        </motion.div>\n\n        {/* 6. Featured Cards Grid */}\n        <div className=\"w-full\">\n          <Hero4Cards />\n        </div>\n      </div>\n\n      {/* Bottom Horizontal Border */}\n      <div className=\"absolute inset-x-0 bottom-0 h-px bg-border\" />\n    </section>\n  );\n}\n",
      "type": "registry:component"
    },
    {
      "path": "registry/blocks/hero/4/cards.tsx",
      "content": "\"use client\";\n\nimport { motion, useMotionValue, useSpring, useTransform } from \"motion/react\";\nimport React from \"react\";\nimport { Zap, Code2, Globe } from \"lucide-react\";\nimport { cn } from \"@/lib/utils\";\n\ninterface FeatureCardProps {\n  icon: React.ElementType;\n  title: string;\n  description: string;\n  className?: string;\n}\n\nconst FeatureCard = ({ icon: Icon, title, description, className }: FeatureCardProps) => {\n  const x = useMotionValue(0);\n  const y = useMotionValue(0);\n\n  const mouseXSpring = useSpring(x);\n  const mouseYSpring = useSpring(y);\n\n  const rotateX = useTransform(mouseYSpring, [-0.5, 0.5], [\"10deg\", \"-10deg\"]);\n  const rotateY = useTransform(mouseXSpring, [-0.5, 0.5], [\"-10deg\", \"10deg\"]);\n\n  const handleMouseMove = (e: React.MouseEvent<HTMLDivElement>) => {\n    const rect = e.currentTarget.getBoundingClientRect();\n    const width = rect.width;\n    const height = rect.height;\n    const mouseX = e.clientX - rect.left;\n    const mouseY = e.clientY - rect.top;\n    const xPct = mouseX / width - 0.5;\n    const yPct = mouseY / height - 0.5;\n    x.set(xPct);\n    y.set(yPct);\n  };\n\n  const handleMouseLeave = () => {\n    x.set(0);\n    y.set(0);\n  };\n\n  return (\n    <motion.div\n      style={{ rotateX, rotateY, transformStyle: \"preserve-3d\" }}\n      onMouseMove={handleMouseMove}\n      onMouseLeave={handleMouseLeave}\n      className={cn(\n        \"group relative flex w-full flex-col gap-4 rounded-xl border border-border/50 bg-card/50 p-6 shadow-sm transition-shadow hover:shadow-xl dark:bg-card/20\",\n        className\n      )}\n    >\n      <div \n        style={{ transform: \"translateZ(50px)\" }}\n        className=\"flex size-10 items-center justify-center rounded-lg bg-foreground text-background shadow-lg transition-transform group-hover:scale-110\"\n      >\n        <Icon className=\"size-5\" />\n      </div>\n      \n      <div style={{ transform: \"translateZ(25px)\" }} className=\"space-y-2\">\n        <h3 className=\"font-heading text-lg font-bold leading-tight\">{title}</h3>\n        <p className=\"text-pretty text-sm leading-relaxed text-muted-foreground/80\">\n          {description}\n        </p>\n      </div>\n\n      {/* Decorative Gradient Overlay */}\n      <div className=\"pointer-events-none absolute inset-0 rounded-xl bg-linear-to-tr from-foreground/5 to-transparent opacity-0 transition-opacity group-hover:opacity-100\" />\n    </motion.div>\n  );\n};\n\nexport function Hero4Cards() {\n  const features = [\n    {\n      icon: Zap,\n      title: \"Ultra Speed\",\n      description: \"Optimized for sub-second performance in Next.js applications.\",\n    },\n    {\n      icon: Code2,\n      title: \"Clean API\",\n      description: \"Intuitive component patterns with full TypeScript support.\",\n    },\n    {\n      icon: Globe,\n      title: \"Production Ready\",\n      description: \"Tested and refined for real-world enterprise deployment.\",\n    },\n  ];\n\n  return (\n    <div className=\"grid w-full grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3\">\n      {features.map((feature, i) => (\n        <motion.div\n          key={i}\n          initial={{ opacity: 0, y: 20 }}\n          animate={{ opacity: 1, y: 0 }}\n          transition={{ duration: 0.5, delay: 0.5 + i * 0.1 }}\n        >\n          <FeatureCard {...feature} />\n        </motion.div>\n      ))}\n    </div>\n  );\n}\n",
      "type": "registry:component"
    }
  ],
  "meta": {
    "height": "100vh",
    "isPinned": true,
    "createdAt": "2026-04-02"
  },
  "categories": [
    "hero"
  ],
  "type": "registry:block"
}