{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "hero-block-baseui",
  "type": "registry:block",
  "title": "Hero Block",
  "description": "Personal portfolio hero section with animated avatar, staggered text, social links, and scroll indicator (Base UI)",
  "registryDependencies": [
    "button"
  ],
  "dependencies": [
    "framer-motion",
    "react"
  ],
  "files": [
    {
      "path": "@uitripled/react-baseui/src/components/sections/hero-block-baseui.tsx",
      "content": "\"use client\";\n\nimport { Button } from \"@base-ui/react/button\";\nimport { motion } from \"framer-motion\";\nimport { ArrowDown, Github, Linkedin, Mail } from \"lucide-react\";\n\nexport function HeroBlockBaseui() {\n  return (\n    <section className=\"relative flex items-center justify-center overflow-hidden bg-background min-h-screen w-full\">\n      {/* Animated background grid */}\n      <div className=\"absolute inset-0 bg-[linear-gradient(to_right,#80808012_1px,transparent_1px),linear-gradient(to_bottom,#80808012_1px,transparent_1px)] bg-[size:24px_24px]\" />\n\n      <div className=\"relative z-10 mx-auto max-w-5xl text-center\">\n        <motion.div\n          initial={{ opacity: 0, y: 20 }}\n          animate={{ opacity: 1, y: 0 }}\n          transition={{ duration: 0.6 }}\n        >\n          <motion.div\n            initial={{ scale: 0 }}\n            animate={{ scale: 1 }}\n            transition={{ delay: 0.2, type: \"spring\", stiffness: 200 }}\n            className=\"mb-6 inline-block\"\n          >\n            <div className=\"mx-auto h-24 w-24 rounded-full border-4 border-background bg-gradient-to-br from-primary to-muted shadow-lg\" />\n          </motion.div>\n\n          <motion.h1\n            initial={{ opacity: 0, y: 20 }}\n            animate={{ opacity: 1, y: 0 }}\n            transition={{ delay: 0.3, duration: 0.6 }}\n            className=\"mb-6 text-5xl font-bold text-foreground md:text-7xl\"\n          >\n            Full Stack Developer\n          </motion.h1>\n\n          <motion.p\n            initial={{ opacity: 0, y: 20 }}\n            animate={{ opacity: 1, y: 0 }}\n            transition={{ delay: 0.4, duration: 0.6 }}\n            className=\"mx-auto mb-8 max-w-3xl text-xl text-muted-foreground md:text-2xl\"\n          >\n            Crafting beautiful, performant web applications with modern\n            technologies. Passionate about clean code and exceptional user\n            experiences.\n          </motion.p>\n\n          <motion.div\n            initial={{ opacity: 0, y: 20 }}\n            animate={{ opacity: 1, y: 0 }}\n            transition={{ delay: 0.5, duration: 0.6 }}\n            className=\"mb-12 flex flex-wrap justify-center gap-4\"\n          >\n            <Button className=\"inline-flex h-11 items-center justify-center gap-2 rounded-md bg-primary px-8 text-sm font-medium text-primary-foreground ring-offset-background transition-colors hover:bg-primary/90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50\">\n              <Mail className=\"h-4 w-4\" />\n              Get in Touch\n            </Button>\n            <Button className=\"inline-flex h-11 items-center justify-center gap-2 rounded-md border border-input bg-background px-8 text-sm font-medium ring-offset-background transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50\">\n              View Projects\n              <ArrowDown className=\"h-4 w-4\" />\n            </Button>\n          </motion.div>\n\n          <motion.div\n            initial={{ opacity: 0 }}\n            animate={{ opacity: 1 }}\n            transition={{ delay: 0.6, duration: 0.6 }}\n            className=\"flex justify-center gap-4\"\n          >\n            {[\n              { icon: Github, href: \"#\" },\n              { icon: Linkedin, href: \"#\" },\n              { icon: Mail, href: \"#\" },\n            ].map((social, index) => (\n              <motion.a\n                key={index}\n                href={social.href}\n                whileHover={{ scale: 1.1, y: -2 }}\n                whileTap={{ scale: 0.95 }}\n                className=\"flex h-12 w-12 items-center justify-center rounded-full bg-secondary text-foreground transition-colors hover:bg-primary hover:text-primary-foreground\"\n              >\n                <social.icon className=\"h-5 w-5\" />\n              </motion.a>\n            ))}\n          </motion.div>\n        </motion.div>\n      </div>\n\n      {/* Scroll indicator */}\n      <motion.div\n        initial={{ opacity: 0 }}\n        animate={{ opacity: 1, y: [0, 10, 0] }}\n        transition={{\n          opacity: { delay: 1, duration: 0.6 },\n          y: { delay: 1.5, duration: 1.5, repeat: Infinity },\n        }}\n        className=\"absolute bottom-8 left-1/2 -translate-x-1/2 transform\"\n      >\n        <ArrowDown className=\"h-6 w-6 text-muted-foreground\" />\n      </motion.div>\n    </section>\n  );\n}\n",
      "type": "registry:block",
      "target": "components/uitripled/hero-block-baseui.tsx"
    }
  ]
}