{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "simple-hero-with-content-bottom",
  "type": "registry:block",
  "title": "Simple Hero with Content Bottom",
  "description": "A simple hero section with content at the bottom",
  "dependencies": [
    "motion"
  ],
  "registryDependencies": [
    "utils",
    "button"
  ],
  "files": [
    {
      "path": "registry/default/blocks/hero-sections/simple-hero-with-content-bottom.tsx",
      "content": "import { Button } from '@/registry/default/ui/button'\r\nimport { motion as m } from 'motion/react'\r\n\r\nexport default function Hero() {\r\n    return (\r\n        <section className=\"relative isolate flex min-h-[100svh] w-full flex-col items-center justify-end overflow-hidden\">\r\n            <div className=\"z-20 flex w-full max-w-4xl flex-col items-center justify-center gap-8 px-4 py-16 text-center\">\r\n                <m.div\r\n                    animate={{\r\n                        transform: 'translateY(0)',\r\n                        opacity: 1,\r\n                        filter: 'blur(0)',\r\n                    }}\r\n                    initial={{\r\n                        transform: 'translateY(-20px)',\r\n                        opacity: 0,\r\n                        filter: 'blur(10px)',\r\n                    }}\r\n                    transition={{\r\n                        duration: 0.5,\r\n                        delay: 0,\r\n                        ease: 'easeOut',\r\n                    }}\r\n                    className=\"h-1.5 w-1.5 animate-ping rounded-full bg-white\"\r\n                />\r\n\r\n                <m.div\r\n                    animate={{\r\n                        transform: 'translateY(0)',\r\n                        opacity: 1,\r\n                        filter: 'blur(0)',\r\n                    }}\r\n                    initial={{\r\n                        transform: 'translateY(15px)',\r\n                        opacity: 0,\r\n                        filter: 'blur(10px)',\r\n                    }}\r\n                    transition={{\r\n                        duration: 0.5,\r\n                        delay: 0.3,\r\n                        ease: 'easeOut',\r\n                    }}\r\n                    className=\"flex items-center rounded-md border border-white/20 bg-white/10 px-3 py-1.5 text-sm font-medium text-white backdrop-blur-md\"\r\n                >\r\n                    Beta has Launched\r\n                </m.div>\r\n\r\n                <m.h1\r\n                    animate={{\r\n                        transform: 'translateY(0)',\r\n                        opacity: 1,\r\n                        filter: 'blur(0)',\r\n                    }}\r\n                    initial={{\r\n                        transform: 'translateY(15px)',\r\n                        opacity: 0,\r\n                        filter: 'blur(10px)',\r\n                    }}\r\n                    transition={{\r\n                        duration: 0.5,\r\n                        delay: 0.6,\r\n                        ease: 'easeOut',\r\n                    }}\r\n                    className=\"text-3xl text-white md:text-4xl lg:text-5xl\"\r\n                >\r\n                    Simplicity is very{' '}\r\n                    <span className=\"font-bold italic\">Effective</span>\r\n                </m.h1>\r\n                <m.p\r\n                    animate={{\r\n                        transform: 'translateY(0)',\r\n                        opacity: 1,\r\n                        filter: 'blur(0)',\r\n                    }}\r\n                    initial={{\r\n                        transform: 'translateY(15px)',\r\n                        opacity: 0,\r\n                        filter: 'blur(10px)',\r\n                    }}\r\n                    transition={{\r\n                        duration: 0.5,\r\n                        delay: 0.9,\r\n                        ease: 'easeOut',\r\n                    }}\r\n                    className=\"max-w-8xl text-sm font-light text-balance text-white/80 md:text-lg\"\r\n                >\r\n                    Simplicity is living a life that is less hectic and shallow.\r\n                    When you understand simplicity, you begin to have an\r\n                    appreciation for things\r\n                </m.p>\r\n                <m.div\r\n                    animate={{\r\n                        transform: 'translateY(0)',\r\n                        opacity: 1,\r\n                        filter: 'blur(0)',\r\n                    }}\r\n                    initial={{\r\n                        transform: 'translateY(15px)',\r\n                        opacity: 0,\r\n                        filter: 'blur(10px)',\r\n                    }}\r\n                    transition={{\r\n                        duration: 0.5,\r\n                        delay: 1.2,\r\n                        ease: 'easeOut',\r\n                    }}\r\n                >\r\n                    <Button className=\"cursor-pointer bg-white text-black hover:scale-105 hover:bg-white\">\r\n                        Get Started\r\n                    </Button>\r\n                </m.div>\r\n            </div>\r\n\r\n            {/* Pattern overlay */}\r\n            <div className=\"absolute top-1/5 left-1/2 aspect-square w-[200%] -translate-x-1/2 rounded-full bg-orange-950 blur-[200px] md:top-1/3\" />\r\n\r\n            <div className=\"absolute top-1/5 left-1/2 aspect-square w-[200%] -translate-x-1/2 overflow-hidden rounded-full mask-[radial-gradient(circle,_white_10%,_transparent_73%)] md:top-1/3\">\r\n                <svg\r\n                    aria-hidden=\"true\"\r\n                    className=\"inset-0 z-10 size-full stroke-white/20 stroke-2\"\r\n                >\r\n                    <defs>\r\n                        <pattern\r\n                            x=\"50%\"\r\n                            y={-1}\r\n                            id=\"grid-pattern\"\r\n                            width={15}\r\n                            height={200}\r\n                            patternUnits=\"userSpaceOnUse\"\r\n                        >\r\n                            <path d=\"M.5 200V.5\" fill=\"none\" />\r\n                        </pattern>\r\n                    </defs>\r\n                    <rect\r\n                        fill=\"url(#grid-pattern)\"\r\n                        width=\"100%\"\r\n                        height=\"100%\"\r\n                        strokeWidth={0}\r\n                    />\r\n                </svg>\r\n            </div>\r\n        </section>\r\n    )\r\n}\r\n",
      "type": "registry:component",
      "target": "components/hero.tsx"
    }
  ]
}