{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "hero-6",
  "description": "High-fidelity Slate SaaS Hero with floating dashboard mockups, SVG path tracing, and a premium emerald color palette.",
  "dependencies": [
    "motion",
    "lucide-react"
  ],
  "registryDependencies": [
    "button"
  ],
  "files": [
    {
      "path": "registry/blocks/hero/6/page.tsx",
      "content": "\"use client\";\n\nimport React, { useState } from \"react\";\nimport { Hero6 } from \"./hero\";\nimport { Logo, LogoIcon } from \"@/components/logo\";\nimport { Button } from \"@/components/ui/button\";\nimport { Box, CircleDot, Share2, Sparkles, ChevronDown, Menu, X } from \"lucide-react\";\nimport { cn } from \"@/lib/utils\";\nimport { AnimatePresence, motion } from \"motion/react\";\nimport Link from \"next/link\";\n\n/**\n * TOP BANNER (Slate Infrastructure)\n * Emerald banner at the absolute top of the page.\n */\nfunction TopBanner() {\n  return (\n    <div className=\"flex h-10 w-full items-center justify-between bg-[#03251E] px-6 text-[11px] font-bold text-white uppercase tracking-widest sm:px-10\">\n      <div className=\"flex items-center gap-2\">\n         <CircleDot className=\"size-3 animate-pulse text-[#BFFF70]\" />\n         <span>The banner is to inform the visitors of an important message</span>\n      </div>\n      <div className=\"hidden items-center gap-4 sm:flex\">\n         <Share2 className=\"size-3.5 cursor-pointer hover:text-[#BFFF70] transition-colors\" />\n         <Box className=\"size-3.5 cursor-pointer hover:text-[#BFFF70] transition-colors\" />\n         <Sparkles className=\"size-3.5 cursor-pointer hover:text-[#BFFF70] transition-colors\" />\n      </div>\n    </div>\n  );\n}\n\n/**\n * SLATE HEADER (Internal for Demo)\n * Refined with official Logo and mobile precision.\n */\nfunction SlateHeader() {\n  const [isOpen, setIsOpen] = useState(false);\n\n  return (\n    <header className=\"sticky top-0 z-40 w-full border-b border-zinc-50 bg-white/80 backdrop-blur-md dark:border-zinc-900 dark:bg-zinc-950/80\">\n      <div className=\"mx-auto flex h-12 items-center justify-between px-6 sm:px-10\">\n        \n        {/* Logo */}\n        <Link \n          href=\"/\" \n          aria-label=\"Freddy UI Homepage\"\n          className=\"flex items-center gap-2.5\"\n        >\n          <motion.div\n            whileHover={{ scale: 1.05 }}\n            whileTap={{ scale: 0.95 }}\n            transition={{ type: \"spring\", stiffness: 400, damping: 17 }}\n            className=\"flex items-center\"\n          >\n            <Logo className=\"h-4.5 w-auto\" />\n          </motion.div>\n        </Link>\n\n        {/* Links (Desktop) */}\n        <nav \n          aria-label=\"Main Navigation\"\n          className=\"hidden items-center gap-8 md:flex\"\n        >\n          {[\"Features\", \"Pricing\", \"About\", \"Contact\"].map((link) => (\n            <Link \n              key={link}\n              href=\"#\" \n              aria-label={`Navigate to ${link}`}\n              className=\"text-[13px] font-bold text-zinc-500 hover:text-zinc-900 dark:hover:text-white transition-colors\"\n            >\n              {link}\n            </Link>\n          ))}\n        </nav>\n\n        {/* Mobile Toggle */}\n        <div className=\"flex items-center gap-3\">\n          <button \n            onClick={() => setIsOpen(!isOpen)}\n            aria-label={isOpen ? \"Close Menu\" : \"Open Menu\"}\n            aria-expanded={isOpen}\n            className=\"flex size-8 items-center justify-center rounded-full hover:bg-zinc-100 dark:hover:bg-zinc-900 md:hidden\"\n          >\n            {isOpen ? <X className=\"size-4\" /> : <Menu className=\"size-4\" />}\n          </button>\n\n          {/* Actions (Desktop) */}\n          <div className=\"hidden items-center gap-3 md:flex\">\n            <Button variant=\"ghost\" size=\"sm\" aria-label=\"Log in to account\" className=\"font-bold text-zinc-500\">Log in</Button>\n            <Button size=\"sm\" aria-label=\"Get Started with Freddy UI\" className=\"bg-zinc-900 font-bold text-white dark:bg-white dark:text-black\">Get Started</Button>\n          </div>\n        </div>\n      </div>\n\n      {/* Mobile Menu Dropdown */}\n      <AnimatePresence>\n        {isOpen && (\n          <motion.div\n            initial={{ opacity: 0, height: 0 }}\n            animate={{ opacity: 1, height: \"auto\" }}\n            exit={{ opacity: 0, height: 0 }}\n            role=\"dialog\"\n            aria-modal=\"true\"\n            aria-label=\"Mobile Navigation Menu\"\n            className=\"border-b border-zinc-100 bg-white dark:border-zinc-800 dark:bg-zinc-950 md:hidden overflow-hidden\"\n          >\n            <div className=\"flex flex-col gap-1 p-4\">\n              {[\"Features\", \"Pricing\", \"About\", \"Contact\"].map((link) => (\n                <Link \n                  key={link}\n                  href=\"#\" \n                  aria-label={`Navigate to ${link}`}\n                  className=\"flex h-10 items-center px-4 text-sm font-bold text-zinc-500 hover:bg-zinc-50 dark:hover:bg-zinc-900 rounded-lg\"\n                >\n                  {link}\n                </Link>\n              ))}\n              <div className=\"mt-2 flex flex-col gap-2 pt-2 border-t border-zinc-50 dark:border-zinc-900\">\n                <Button variant=\"outline\" aria-label=\"Log in\" className=\"w-full justify-start font-bold\">Log in</Button>\n                <Button aria-label=\"Get Started\" className=\"w-full justify-start font-bold\">Get Started</Button>\n              </div>\n            </div>\n          </motion.div>\n        )}\n      </AnimatePresence>\n    </header>\n  );\n}\n\n/**\n * HERO 6 PAGE ENTRY\n * Demonstrates the full \"Slate Masterpiece\" experience.\n */\nexport default function Hero6Page() {\n  return (\n    <div className=\"w-full\">\n      <TopBanner />\n      <SlateHeader />\n      <main>\n        <Hero6 />\n      </main>\n    </div>\n  );\n}\n",
      "type": "registry:component"
    },
    {
      "path": "registry/blocks/hero/6/hero.tsx",
      "content": "\"use client\";\n\nimport { motion } from \"motion/react\";\nimport { Button } from \"@/components/ui/button\";\nimport { ArrowRight, Box, CircleDot, Mail, Share2, Sparkles, Zap } from \"lucide-react\";\nimport { cn } from \"@/lib/utils\";\nimport { \n  BalanceProgressBarCard, \n  IncomeChartCard, \n  MemberGrowthCard, \n  RevenueMetricCard \n} from \"./cards\";\n\n/**\n * HERO 6: THE SLATE MASTERPIECE\n * Pixel-perfect SaaS Hero with floating UI mockups, dot grids, and SVG path tracing.\n */\nexport function Hero6() {\n  return (\n    <section className=\"relative min-h-screen w-full overflow-hidden bg-white dark:bg-zinc-950 font-sans selection:bg-[#BFFF70]/30 transition-colors duration-500\">\n      \n      {/* 1. Generative Background Infrastructure (Dot Grid) */}\n      <div className=\"absolute inset-0 z-0 opacity-40\">\n        <div \n          className=\"h-full w-full\"\n          style={{\n            backgroundImage: \"radial-gradient(#03251E 0.5px, transparent 0.5px)\",\n            backgroundSize: \"32px 32px\"\n          }}\n        />\n      </div>\n\n      <div className=\"relative z-10 mx-auto flex min-h-screen max-w-7xl flex-col items-center justify-center px-6 pt-32\">\n        \n        {/* 3. Floating UI Mockups (Neural Positions) */}\n        <div className=\"pointer-events-none absolute inset-0 hidden lg:block\">\n          {/* Left Side Group */}\n          <motion.div \n             initial={{ opacity: 0, x: -100, y: 20 }}\n             animate={{ opacity: 1, x: 0, y: 0 }}\n             transition={{ duration: 1, delay: 0.2, ease: \"circOut\" }}\n             className=\"absolute top-[28%] left-[2%] pointer-events-auto\"\n          >\n            <IncomeChartCard />\n          </motion.div>\n          <motion.div \n             initial={{ opacity: 0, x: -80, y: 40 }}\n             animate={{ opacity: 1, x: 0, y: 0 }}\n             transition={{ duration: 1, delay: 0.4, ease: \"circOut\" }}\n             className=\"absolute top-[52%] left-[4%] pointer-events-auto\"\n          >\n            <MemberGrowthCard />\n          </motion.div>\n\n          {/* Right Side Group */}\n          <motion.div \n             initial={{ opacity: 0, x: 100, y: -20 }}\n             animate={{ opacity: 1, x: 0, y: 0 }}\n             transition={{ duration: 1, delay: 0.3, ease: \"circOut\" }}\n             className=\"absolute top-[26%] right-[3%] pointer-events-auto\"\n          >\n            <RevenueMetricCard />\n          </motion.div>\n          <motion.div \n             initial={{ opacity: 0, x: 80, y: -40 }}\n             animate={{ opacity: 1, x: 0, y: 0 }}\n             transition={{ duration: 1, delay: 0.5, ease: \"circOut\" }}\n             className=\"absolute top-[50%] right-[3%] pointer-events-auto\"\n          >\n            <BalanceProgressBarCard />\n          </motion.div>\n        </div>\n\n        {/* 4. Strategic Content Stack */}\n        <div className=\"text-center\">\n          <motion.span\n            initial={{ opacity: 0, y: 10 }}\n            animate={{ opacity: 1, y: 0 }}\n            className=\"mb-4 inline-block text-[14px] font-bold text-zinc-900 dark:text-emerald-400\"\n          >\n            The AI-First Component Library\n          </motion.span>\n          \n          <h1 className=\"relative max-w-3xl font-heading text-[clamp(2.25rem,6vw,4.25rem)] font-bold leading-[1.05] tracking-tightest text-zinc-900 dark:text-white\">\n            <motion.span\n              initial={{ opacity: 0, y: 20 }}\n              animate={{ opacity: 1, y: 0 }}\n              transition={{ duration: 0.8 }}\n              className=\"inline-block\"\n            >\n              Deliver&nbsp;\n            </motion.span>\n            <motion.span \n              initial={{ scale: 0.95, opacity: 0 }}\n              animate={{ scale: 1, opacity: 1 }}\n              transition={{ duration: 1, delay: 0.5 }}\n              className=\"relative mx-1 inline-block rounded-xl bg-[#BFFF70] px-4 py-1 text-[#03251E] shadow-sm\"\n            >\n              the Perfect\n            </motion.span>\n            <br />\n            <motion.span\n               initial={{ opacity: 0, y: 20 }}\n               animate={{ opacity: 1, y: 0 }}\n               transition={{ duration: 0.8, delay: 0.2 }}\n               className=\"relative inline-block\"\n            >\n              solution\n              {/* 5. SVG Path Tracing (The \"Hand-Drawn\" look) */}\n              <svg \n                className=\"absolute -bottom-2 left-0 h-4 w-full text-zinc-900/10 dark:text-emerald-400/20\"\n                viewBox=\"0 0 200 20\"\n                fill=\"none\"\n              >\n                <motion.path\n                  initial={{ pathLength: 0 }}\n                  animate={{ pathLength: 1 }}\n                  transition={{ duration: 1.5, delay: 1, ease: \"easeInOut\" }}\n                  d=\"M 5 15 Q 100 0, 195 15\"\n                  stroke=\"currentColor\"\n                  strokeWidth=\"3\"\n                  strokeLinecap=\"round\"\n                />\n              </svg>\n            </motion.span>\n            <motion.span\n              initial={{ opacity: 0, y: 20 }}\n              animate={{ opacity: 1, y: 0 }}\n              transition={{ duration: 0.8, delay: 0.3 }}\n              className=\"inline-block\"\n            >\n              &nbsp;for your client now\n            </motion.span>\n          </h1>\n\n          <motion.p\n            initial={{ opacity: 0, y: 20 }}\n            animate={{ opacity: 1, y: 0 }}\n            transition={{ duration: 0.8, delay: 0.4 }}\n            className=\"mx-auto mt-8 max-w-xl text-balance text-lg font-medium text-zinc-500 leading-relaxed dark:text-zinc-400\"\n          >\n            Freddy UI is the world&apos;s most advanced AI-first component library. <br className=\"hidden sm:block\" />\n            Build stunning, high-performance interfaces in seconds.\n          </motion.p>\n\n          {/* 6. Elite SaaS Input CTA */}\n          <motion.div\n             initial={{ opacity: 0, y: 20 }}\n             animate={{ opacity: 1, y: 0 }}\n             transition={{ duration: 0.8, delay: 0.6 }}\n             className=\"mx-auto mt-12 flex max-w-lg items-center justify-between rounded-full border border-zinc-200 bg-white/50 p-1.5 shadow-xl backdrop-blur-md dark:border-zinc-800 dark:bg-zinc-900/50\"\n          >\n            <div className=\"flex flex-1 items-center gap-3 px-4\">\n              <Mail className=\"size-4 text-zinc-400\" />\n              <input \n                type=\"email\" \n                placeholder=\"Enter your mail address\" \n                className=\"w-full bg-transparent text-sm font-medium outline-none placeholder:text-zinc-400\"\n              />\n            </div>\n            <Button size=\"lg\" className=\"h-12 rounded-full bg-[#BFFF70] font-black text-[#03251E] hover:bg-[#AEEB60] transition-all hover:scale-[1.02]\">\n              Get Started\n            </Button>\n          </motion.div>\n\n          <motion.span\n            initial={{ opacity: 0 }}\n            animate={{ opacity: 1 }}\n            transition={{ delay: 1.2 }}\n            className=\"mt-6 inline-block text-[11px] font-bold text-zinc-400 uppercase tracking-widest\"\n          >\n            This template <span className=\"mx-1\">✥</span> Free to get started\n          </motion.span>\n        </div>\n      </div>\n\n      {/* 7. Service Highlight Footer */}\n      <div className=\"border-t border-zinc-100 bg-white px-10 py-12 dark:border-zinc-800 dark:bg-zinc-950\">\n        <div className=\"mx-auto grid max-w-7xl grid-cols-1 gap-12 md:grid-cols-3\">\n          {[\n            { \n              icon: Zap, \n              title: \"Sub-second Performance\",\n              text: \"Optimized for speed with streaming-first architecture.\" \n            },\n            { \n              icon: Sparkles, \n              title: \"Type-safe Registry\",\n              text: \"Zero-config development powered by Biome and v4.\" \n            },\n            { \n              icon: Box, \n              title: \"AI-Centric Design\",\n              text: \"High-fidelity layouts crafted for generative products.\" \n            }\n          ].map((item, i) => (\n            <motion.div \n              key={i} \n              initial={{ opacity: 0, y: 20 }}\n              whileInView={{ opacity: 1, y: 0 }}\n              transition={{ delay: i * 0.1 }}\n              viewport={{ once: true }}\n              className=\"flex items-center gap-6\"\n            >\n              <div className=\"flex size-14 shrink-0 items-center justify-center rounded-full bg-zinc-50 dark:bg-zinc-900 border border-zinc-100 dark:border-zinc-800\">\n                <item.icon className=\"size-6 text-zinc-900 dark:text-[#BFFF70]\" />\n              </div>\n              <div className=\"flex flex-col gap-1\">\n                <h4 className=\"text-sm font-black text-zinc-900 dark:text-white uppercase tracking-wider\">{item.title}</h4>\n                <p className=\"text-[13px] font-medium text-zinc-500 dark:text-zinc-400 leading-relaxed\">\n                  {item.text}\n                </p>\n              </div>\n            </motion.div>\n          ))}\n        </div>\n      </div>\n    </section>\n  );\n}\n",
      "type": "registry:component"
    },
    {
      "path": "registry/blocks/hero/6/cards.tsx",
      "content": "\"use client\";\n\nimport { motion } from \"motion/react\";\nimport { ArrowUpRight, DollarSign, TrendingUp, Users } from \"lucide-react\";\nimport { cn } from \"@/lib/utils\";\n\n/**\n * REVENUE METRIC CARD (Right Top)\n * Features \"Total Revenue\" title, status pill, and high-fidelity currency display.\n */\nexport function RevenueMetricCard({ className }: { className?: string }) {\n  return (\n    <motion.div\n      whileHover={{ y: -5, transition: { duration: 0.2 } }}\n      className={cn(\n        \"flex flex-col gap-3 rounded-2xl border border-zinc-100 bg-white p-4 shadow-xl dark:border-zinc-800 dark:bg-zinc-950\",\n        className\n      )}\n    >\n      <div className=\"flex items-center justify-between\">\n        <span className=\"text-[11px] font-semibold text-zinc-500 uppercase tracking-widest\">Total Revenue</span>\n        <div className=\"flex size-5 items-center justify-center rounded-full bg-[#BFFF70]/10 text-[#54A000]\">\n           <ArrowUpRight className=\"size-3\" />\n        </div>\n      </div>\n      <div className=\"flex items-center gap-2.5\">\n        <div className=\"flex size-10 items-center justify-center rounded-full bg-[#BFFF70] text-[#03251E]\">\n          <DollarSign className=\"size-5\" />\n        </div>\n        <div className=\"flex flex-col\">\n          <span className=\"text-2xl font-bold tracking-tight text-zinc-900 dark:text-white\">4.32k</span>\n          <span className=\"text-[10.5px] font-medium text-emerald-600\">+12% vs last month</span>\n        </div>\n      </div>\n    </motion.div>\n  );\n}\n\n/**\n * INCOME CHART CARD (Left Top)\n * Features \"Income & Expenses\" title and a stylized high-fidelity mockup chart.\n */\nexport function IncomeChartCard({ className }: { className?: string }) {\n  return (\n    <motion.div\n      whileHover={{ y: -5, transition: { duration: 0.2 } }}\n      className={cn(\n        \"flex flex-col gap-5 rounded-2xl border border-zinc-100 bg-white p-5 shadow-xl dark:border-zinc-800 dark:bg-zinc-950\",\n        \"w-[240px]\",\n        className\n      )}\n    >\n      <div className=\"flex items-center justify-between border-b border-zinc-50 pb-3 dark:border-zinc-900\">\n        <span className=\"text-[12px] font-bold text-zinc-900 dark:text-white\">Income & Expenses</span>\n        <button className=\"text-[11px] font-bold text-zinc-400 hover:text-zinc-600 transition-colors\">7 Days</button>\n      </div>\n\n      {/* Stylized Chart Mockup */}\n      <div className=\"relative h-28 w-full pt-3\">\n        {/* Mock Chart SVG */}\n        <svg className=\"h-full w-full\" viewBox=\"0 0 200 80\">\n          <path\n            d=\"M 10 70 Q 30 20, 50 60 T 90 20 T 130 50 T 170 10 T 190 40\"\n            fill=\"none\"\n            stroke=\"#03251E\"\n            strokeWidth=\"3.5\"\n            strokeLinecap=\"round\"\n            className=\"opacity-90 dark:stroke-emerald-400\"\n          />\n          <path\n            d=\"M 10 70 Q 30 20, 50 60 T 90 20 T 130 50 T 170 10 T 190 40 L 190 80 L 10 80 Z\"\n            fill=\"url(#chart-gradient)\"\n            className=\"opacity-10\"\n          />\n          <defs>\n            <linearGradient id=\"chart-gradient\" x1=\"0\" x2=\"0\" y1=\"0\" y2=\"1\">\n              <stop offset=\"0%\" stopColor=\"#BFFF70\" />\n              <stop offset=\"100%\" stopColor=\"transparent\" />\n            </linearGradient>\n          </defs>\n          <circle cx=\"170\" cy=\"10\" r=\"4\" fill=\"#BFFF70\" className=\"animate-pulse shadow-glow\" />\n        </svg>\n        \n        {/* Floating Tooltip */}\n        <div className=\"absolute top-0 right-4 rounded bg-[#BFFF70] px-2 py-1 text-[10px] font-bold text-[#03251E] shadow-sm\">\n          $2,890\n        </div>\n      </div>\n    </motion.div>\n  );\n}\n\n/**\n * BALANCE PROGRESS CARD (Right Bottom)\n * Features \"Balance\" title, numeric amount, and custom progress bar with Pine accent.\n */\nexport function BalanceProgressBarCard({ className }: { className?: string }) {\n  return (\n    <motion.div\n      whileHover={{ y: -5, transition: { duration: 0.2 } }}\n      className={cn(\n        \"flex flex-col gap-4 rounded-2xl border border-zinc-100 bg-white p-5 shadow-xl dark:border-zinc-800 dark:bg-zinc-950\",\n        \"w-[220px]\",\n        className\n      )}\n    >\n      <div className=\"flex items-center justify-between\">\n        <span className=\"text-[12px] font-bold text-zinc-900 dark:text-white\">Balance</span>\n        <span className=\"rounded-full bg-zinc-900 px-2.5 py-0.5 text-[9px] font-bold text-white uppercase tracking-wider\">Reserved</span>\n      </div>\n      <div className=\"flex flex-col gap-1\">\n        <span className=\"text-xl font-black text-zinc-900 dark:text-white\">$60,124.00</span>\n        <div className=\"mt-1 flex items-center justify-between\">\n          <div className=\"flex items-center gap-1.5 text-[9px] font-black text-zinc-400 uppercase tracking-widest\">\n            <div className=\"size-1 rounded-full bg-[#BFFF70]\" />\n            Pine Account\n          </div>\n          <span className=\"text-[9px] font-black text-zinc-900 dark:text-emerald-400\">75%</span>\n        </div>\n        <div className=\"relative mt-1 h-1.5 w-full overflow-hidden rounded-full bg-zinc-50 dark:bg-zinc-900\">\n          <motion.div \n            initial={{ width: 0 }}\n            animate={{ width: \"75%\" }}\n            transition={{ duration: 1, delay: 0.5, ease: \"circOut\" }}\n            className=\"h-full bg-[#BFFF70] shadow-[0_0_10px_rgba(191,255,112,0.4)]\" \n          />\n        </div>\n      </div>\n    </motion.div>\n  );\n}\n\n/**\n * MEMBER GROWTH CARD (Left Bottom)\n * Features numeric metric, progress badge, and descriptive footer.\n */\nexport function MemberGrowthCard({ className }: { className?: string }) {\n  return (\n    <motion.div\n      whileHover={{ y: -5, transition: { duration: 0.2 } }}\n      className={cn(\n        \"flex flex-col gap-3 rounded-2xl border border-zinc-100 bg-white p-5 shadow-xl dark:border-zinc-800 dark:bg-zinc-950\",\n        className\n      )}\n    >\n      <div className=\"flex items-center gap-3\">\n        <div className=\"flex flex-col\">\n          <span className=\"text-2xl font-black text-zinc-900 dark:text-white\">75%</span>\n          <span className=\"text-[11px] font-medium text-zinc-500 uppercase tracking-wide\">Member Growth</span>\n        </div>\n        <div className=\"flex h-10 items-center justify-center rounded-xl bg-zinc-900 px-4 text-white hover:bg-zinc-800 transition-colors cursor-pointer\">\n           <span className=\"text-[11px] font-bold\">Details</span>\n        </div>\n      </div>\n    </motion.div>\n  );\n}\n",
      "type": "registry:component"
    }
  ],
  "meta": {
    "height": "100vh",
    "isPinned": true,
    "createdAt": "2026-04-02"
  },
  "categories": [
    "hero"
  ],
  "type": "registry:block"
}