{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "hero4",
  "title": "Hero Exemple 4",
  "description": "Hero section with navbar and animated event dashboard preview.",
  "dependencies": [
    "motion/react",
    "lucide-react"
  ],
  "files": [
    {
      "path": "registry/default/blocks/hero/hero04.tsx",
      "content": "\"use client\";\n\nimport { useRef, useState, useEffect } from \"react\";\nimport Link from \"next/link\";\nimport {\n  motion,\n  useInView,\n  useScroll,\n  useTransform,\n  AnimatePresence,\n} from \"motion/react\";\nimport { ArrowRight, Calendar, Moon, Sun, Menu, X } from \"lucide-react\";\n\nexport default function Hero1() {\n  const [menuOpen, setMenuOpen] = useState(false);\n  const [scrolled, setScrolled] = useState(false);\n  const [dark, setDark] = useState(false);\n  const heroRef = useRef<HTMLDivElement>(null);\n  const heroInView = useInView(heroRef, { once: true, margin: \"-80px 0px\" });\n\n  const { scrollY } = useScroll();\n  const y1 = useTransform(scrollY, [0, 500], [0, 120]);\n  const y2 = useTransform(scrollY, [0, 500], [0, -100]);\n\n  const bars = [40, 65, 45, 80, 75, 90];\n  const months = [\"Jan\", \"Feb\", \"Mar\", \"Apr\", \"May\", \"Jun\"];\n\n  useEffect(() => {\n    const onScroll = () => setScrolled(window.scrollY > 10);\n    window.addEventListener(\"scroll\", onScroll);\n    return () => window.removeEventListener(\"scroll\", onScroll);\n  }, []);\n\n  useEffect(() => {\n    document.documentElement.classList.toggle(\"dark\", dark);\n  }, [dark]);\n\n  const navLinks = [\n    { href: \"/features\", label: \"Features\" },\n    { href: \"/pricing\", label: \"Pricing\" },\n    { href: \"/about\", label: \"About\" },\n    { href: \"/contact\", label: \"Contact\" },\n  ];\n\n  return (\n    <div\n      className=\"min-h-screen bg-white dark:bg-zinc-950 overflow-hidden\"\n      style={{\n        fontFamily: \"var(--font-geist-sans, 'Geist', system-ui, sans-serif)\",\n      }}\n      ref={heroRef}\n    >\n      <motion.header\n        className={[\n          \"relative z-50 transition-all duration-300\",\n          scrolled\n            ? \"bg-white/95 dark:bg-zinc-950/95 backdrop-blur-md shadow-[0_1px_0_0_rgba(0,0,0,0.06)] dark:shadow-[0_1px_0_0_rgba(255,255,255,0.06)]\"\n            : \"bg-transparent\",\n        ].join(\" \")}\n        initial={{ y: -80, opacity: 0 }}\n        animate={{ y: 0, opacity: 1 }}\n        transition={{ duration: 0.55, ease: [0.16, 1, 0.3, 1] }}\n      >\n        <div className=\"max-w-7xl mx-auto px-5 sm:px-8\">\n          <div className=\"flex items-center justify-between h-16\">\n            <motion.div\n              className=\"flex items-center gap-8\"\n              initial={{ opacity: 0, x: -16 }}\n              animate={{ opacity: 1, x: 0 }}\n              transition={{ delay: 0.15, duration: 0.5 }}\n            >\n              <Link href=\"/\" className=\"flex items-center gap-3 group\">\n                <img\n                  src=\"https://bagui.vercel.app/logoR.png\"\n                  alt=\"BagUi logo\"\n                  className=\"w-8 h-8 object-contain rounded-lg\"\n                />\n                <span className=\"font-semibold text-[15px] text-zinc-950 dark:text-white tracking-[-0.01em]\">\n                  Bag\\Ui\n                </span>\n              </Link>\n\n              <nav className=\"hidden md:flex items-center gap-0.5\">\n                {navLinks.map((l) => (\n                  <Link\n                    key={l.href}\n                    href={l.href}\n                    className=\"px-3 py-1.5 rounded-md text-sm text-zinc-500 dark:text-zinc-400 hover:text-zinc-950 dark:hover:text-white hover:bg-zinc-100/70 dark:hover:bg-zinc-800/50 transition-all duration-150 font-medium\"\n                  >\n                    {l.label}\n                  </Link>\n                ))}\n              </nav>\n            </motion.div>\n\n            <motion.div\n              className=\"hidden md:flex items-center gap-2\"\n              initial={{ opacity: 0, x: 16 }}\n              animate={{ opacity: 1, x: 0 }}\n              transition={{ delay: 0.15, duration: 0.5 }}\n            >\n              <button\n                onClick={() => setDark(!dark)}\n                className=\"p-2 rounded-md text-zinc-500 dark:text-zinc-400 hover:bg-zinc-100 dark:hover:bg-zinc-800 transition-colors\"\n                aria-label=\"Toggle theme\"\n              >\n                {dark ? (\n                  <Sun className=\"w-4 h-4\" />\n                ) : (\n                  <Moon className=\"w-4 h-4\" />\n                )}\n              </button>\n              <Link\n                href=\"/login\"\n                className=\"px-3.5 py-1.5 text-sm font-medium text-zinc-600 dark:text-zinc-300 hover:text-zinc-950 dark:hover:text-white transition-colors\"\n              >\n                Sign in\n              </Link>\n              <motion.div\n                whileHover={{ scale: 1.02 }}\n                whileTap={{ scale: 0.97 }}\n              >\n                <Link\n                  href=\"/register\"\n                  className=\"inline-flex items-center gap-1.5 px-4 py-1.5 rounded-lg bg-zinc-950 dark:bg-white text-white dark:text-zinc-950 text-sm font-medium hover:bg-zinc-800 dark:hover:bg-zinc-100 transition-colors\"\n                >\n                  Sign up\n                </Link>\n              </motion.div>\n            </motion.div>\n\n            <div className=\"flex items-center gap-1 md:hidden\">\n              <button\n                onClick={() => setDark(!dark)}\n                className=\"p-2 rounded-md text-zinc-500 hover:bg-zinc-100 dark:hover:bg-zinc-800 transition-colors\"\n              >\n                {dark ? (\n                  <Sun className=\"w-4 h-4\" />\n                ) : (\n                  <Moon className=\"w-4 h-4\" />\n                )}\n              </button>\n              <button\n                onClick={() => setMenuOpen(!menuOpen)}\n                className=\"p-2 rounded-md text-zinc-500 hover:bg-zinc-100 dark:hover:bg-zinc-800 transition-colors\"\n              >\n                {menuOpen ? (\n                  <X className=\"w-5 h-5\" />\n                ) : (\n                  <Menu className=\"w-5 h-5\" />\n                )}\n              </button>\n            </div>\n          </div>\n        </div>\n\n        <AnimatePresence>\n          {menuOpen && (\n            <motion.div\n              className=\"md:hidden bg-white dark:bg-zinc-950 border-t border-zinc-100 dark:border-zinc-800/60\"\n              initial={{ opacity: 0, height: 0 }}\n              animate={{ opacity: 1, height: \"auto\" }}\n              exit={{ opacity: 0, height: 0 }}\n              transition={{ duration: 0.25 }}\n            >\n              <div className=\"px-4 py-3 space-y-0.5\">\n                {navLinks.map((l) => (\n                  <Link\n                    key={l.href}\n                    href={l.href}\n                    className=\"block px-3 py-2.5 rounded-md text-sm font-medium text-zinc-600 dark:text-zinc-300 hover:bg-zinc-50 dark:hover:bg-zinc-800 transition-colors\"\n                    onClick={() => setMenuOpen(false)}\n                  >\n                    {l.label}\n                  </Link>\n                ))}\n              </div>\n              <div className=\"px-4 py-3 border-t border-zinc-100 dark:border-zinc-800/60 space-y-2\">\n                <Link\n                  href=\"/login\"\n                  className=\"block px-3 py-2.5 rounded-md text-sm font-medium text-zinc-600 dark:text-zinc-300 hover:bg-zinc-50 dark:hover:bg-zinc-800\"\n                  onClick={() => setMenuOpen(false)}\n                >\n                  Sign in\n                </Link>\n                <Link\n                  href=\"/register\"\n                  className=\"block px-3 py-2.5 rounded-md text-sm font-medium bg-zinc-950 dark:bg-white text-white dark:text-zinc-950 text-center\"\n                  onClick={() => setMenuOpen(false)}\n                >\n                  Sign up\n                </Link>\n              </div>\n            </motion.div>\n          )}\n        </AnimatePresence>\n      </motion.header>\n\n      <section className=\"relative pt-12 pb-24 md:pt-16 md:pb-32 overflow-hidden\">\n        <motion.div\n          className=\"pointer-events-none absolute -top-32 -right-32 w-[500px] h-[500px] rounded-full bg-zinc-100 dark:bg-zinc-900\"\n          style={{ y: y1 }}\n          initial={{ opacity: 0 }}\n          animate={{ opacity: 0.6 }}\n          transition={{ duration: 1 }}\n        />\n        <motion.div\n          className=\"pointer-events-none absolute -bottom-48 -left-48 w-[600px] h-[600px] rounded-full bg-zinc-100 dark:bg-zinc-900\"\n          style={{ y: y2 }}\n          initial={{ opacity: 0 }}\n          animate={{ opacity: 0.5 }}\n          transition={{ duration: 1, delay: 0.2 }}\n        />\n\n        <div\n          className=\"pointer-events-none absolute inset-0 opacity-[0.03] dark:opacity-[0.04]\"\n          style={{\n            backgroundImage:\n              \"linear-gradient(to right, #000 1px, transparent 1px), linear-gradient(to bottom, #000 1px, transparent 1px)\",\n            backgroundSize: \"40px 40px\",\n          }}\n        />\n\n        <div className=\"relative max-w-7xl mx-auto px-5 sm:px-8\">\n          <div className=\"flex flex-col lg:flex-row lg:items-center lg:gap-16\">\n            <div className=\"lg:w-1/2 mb-14 lg:mb-0\">\n              <motion.div\n                initial={{ opacity: 0, y: 10 }}\n                animate={heroInView ? { opacity: 1, y: 0 } : {}}\n                transition={{ duration: 0.4, delay: 0.1 }}\n                className=\"inline-flex items-center gap-2 mb-8\"\n              >\n                <span className=\"inline-flex items-center gap-2 px-3 py-1 rounded-full border border-zinc-200 dark:border-zinc-800 bg-zinc-50 dark:bg-zinc-900 text-zinc-600 dark:text-zinc-400 text-xs font-medium tracking-tight\">\n                  <span className=\"w-1.5 h-1.5 rounded-full bg-emerald-500 animate-pulse\" />\n                  New — Beta v1.0 available\n                </span>\n              </motion.div>\n\n              <motion.h1\n                className=\"text-[2.6rem] sm:text-5xl lg:text-[3.4rem] font-semibold leading-[1.1] tracking-[-0.03em] text-zinc-950 dark:text-white mb-6\"\n                initial={{ opacity: 0, y: 20 }}\n                animate={heroInView ? { opacity: 1, y: 0 } : {}}\n                transition={{\n                  duration: 0.6,\n                  delay: 0.2,\n                  ease: [0.16, 1, 0.3, 1],\n                }}\n              >\n                Organize events\n                <br />\n                to{\" \"}\n                <span className=\"relative\">\n                  <span className=\"relative z-10\">maximum impact</span>\n                  <motion.span\n                    className=\"absolute bottom-1 left-0 right-0 h-[5px] bg-zinc-200 dark:bg-zinc-700 rounded-full -z-0\"\n                    initial={{ scaleX: 0, originX: 0 }}\n                    animate={heroInView ? { scaleX: 1 } : {}}\n                    transition={{ duration: 0.6, delay: 0.75 }}\n                  />\n                </span>\n              </motion.h1>\n\n              <motion.p\n                className=\"text-base md:text-lg text-zinc-500 dark:text-zinc-400 leading-relaxed mb-9 max-w-md\"\n                initial={{ opacity: 0 }}\n                animate={heroInView ? { opacity: 1 } : {}}\n                transition={{ duration: 0.5, delay: 0.4 }}\n              >\n                Bag\\Ui simplifies event management for teams. Plan, organize,\n                and track your seminars and conferences with ease.\n              </motion.p>\n\n              <motion.div\n                className=\"flex flex-col sm:flex-row gap-3\"\n                initial={{ opacity: 0, y: 12 }}\n                animate={heroInView ? { opacity: 1, y: 0 } : {}}\n                transition={{ duration: 0.5, delay: 0.55 }}\n              >\n                <motion.div\n                  whileHover={{ scale: 1.02 }}\n                  whileTap={{ scale: 0.97 }}\n                >\n                  <Link\n                    href=\"/login\"\n                    className=\"inline-flex items-center justify-center gap-2 px-5 py-2.5 rounded-xl bg-zinc-950 dark:bg-white text-white dark:text-zinc-950 text-sm font-medium hover:bg-zinc-800 dark:hover:bg-zinc-100 transition-colors\"\n                  >\n                    Sign in\n                    <ArrowRight className=\"w-4 h-4\" />\n                  </Link>\n                </motion.div>\n                <motion.div\n                  whileHover={{ scale: 1.02 }}\n                  whileTap={{ scale: 0.97 }}\n                >\n                  <Link\n                    href=\"/register\"\n                    className=\"inline-flex items-center justify-center px-5 py-2.5 rounded-xl border border-zinc-200 dark:border-zinc-800 text-zinc-700 dark:text-zinc-300 text-sm font-medium hover:bg-zinc-50 dark:hover:bg-zinc-900 transition-colors\"\n                  >\n                    Create account\n                  </Link>\n                </motion.div>\n              </motion.div>\n\n              <motion.div\n                className=\"flex items-center gap-3 mt-8\"\n                initial={{ opacity: 0 }}\n                animate={heroInView ? { opacity: 1 } : {}}\n                transition={{ delay: 0.7, duration: 0.5 }}\n              >\n                <div className=\"flex -space-x-2\">\n                  {[\"#f97316\", \"#8b5cf6\", \"#06b6d4\", \"#10b981\"].map(\n                    (color, i) => (\n                      <div\n                        key={i}\n                        className=\"w-7 h-7 rounded-full border-2 border-white dark:border-zinc-950\"\n                        style={{ background: color }}\n                      />\n                    ),\n                  )}\n                </div>\n                <p className=\"text-sm text-zinc-500 dark:text-zinc-400\">\n                  <span className=\"font-medium text-zinc-900 dark:text-white\">\n                    +2 400\n                  </span>{\" \"}\n                  events organized this month\n                </p>\n              </motion.div>\n            </div>\n\n            <motion.div\n              className=\"lg:w-1/2 relative\"\n              initial={{ opacity: 0, y: 32, scale: 0.96 }}\n              animate={heroInView ? { opacity: 1, y: 0, scale: 1 } : {}}\n              transition={{\n                duration: 0.75,\n                delay: 0.35,\n                ease: [0.16, 1, 0.3, 1],\n              }}\n            >\n              <motion.div\n                className=\"absolute -right-4 -bottom-4 w-32 h-32 bg-zinc-100 dark:bg-zinc-900 rounded-2xl\"\n                initial={{ rotate: 0 }}\n                animate={{ rotate: 8 }}\n                transition={{ type: \"spring\", stiffness: 60, delay: 1 }}\n              />\n\n              <div className=\"relative z-10 rounded-2xl border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-900 shadow-[0_8px_40px_-8px_rgba(0,0,0,0.12)] dark:shadow-[0_8px_40px_-8px_rgba(0,0,0,0.6)] overflow-hidden\">\n                <div className=\"flex items-center justify-between px-5 py-3.5 bg-zinc-50 dark:bg-zinc-950 border-b border-zinc-100 dark:border-zinc-800\">\n                  <div className=\"flex items-center gap-1.5\">\n                    <div className=\"w-3 h-3 rounded-full bg-red-400\" />\n                    <div className=\"w-3 h-3 rounded-full bg-amber-400\" />\n                    <div className=\"w-3 h-3 rounded-full bg-emerald-400\" />\n                  </div>\n                  <span className=\"text-xs font-medium text-zinc-500 dark:text-zinc-400 tracking-tight\">\n                    Bag\\Ui — Dashboard\n                  </span>\n                  <div className=\"w-12\" />\n                </div>\n\n                <div className=\"p-5 space-y-5\">\n                  <div className=\"grid grid-cols-3 gap-3\">\n                    {[\n                      { label: \"Events\", value: \"24\", delta: \"+3\" },\n                      { label: \"Participants\", value: \"1 840\", delta: \"+12%\" },\n                      { label: \"Satisfaction\", value: \"96%\", delta: \"↑\" },\n                    ].map((s, i) => (\n                      <motion.div\n                        key={i}\n                        className=\"bg-zinc-50 dark:bg-zinc-950 rounded-xl p-3 border border-zinc-100 dark:border-zinc-800\"\n                        initial={{ opacity: 0, y: 8 }}\n                        animate={heroInView ? { opacity: 1, y: 0 } : {}}\n                        transition={{ delay: 0.6 + i * 0.08, duration: 0.4 }}\n                      >\n                        <p className=\"text-[10px] font-medium text-zinc-400 dark:text-zinc-500 mb-1 tracking-wide uppercase\">\n                          {s.label}\n                        </p>\n                        <p className=\"text-xl font-semibold text-zinc-950 dark:text-white tracking-tight\">\n                          {s.value}\n                        </p>\n                        <p className=\"text-[11px] text-emerald-600 dark:text-emerald-400 font-medium mt-0.5\">\n                          {s.delta}\n                        </p>\n                      </motion.div>\n                    ))}\n                  </div>\n\n                  <div>\n                    <p className=\"text-xs font-semibold text-zinc-900 dark:text-white mb-3 tracking-tight\">\n                      Upcoming events\n                    </p>\n                    <div className=\"space-y-2\">\n                      {[\n                        {\n                          name: \"Weka Launch\",\n                          date: \"Dec 15, 2025\",\n                          count: \"248\",\n                        },\n                        {\n                          name: \"Web Seminar\",\n                          date: \"Dec 20, 2025\",\n                          count: \"124\",\n                        },\n                      ].map((ev, i) => (\n                        <motion.div\n                          key={i}\n                          className=\"flex items-center justify-between p-3 rounded-xl bg-zinc-50 dark:bg-zinc-950 border border-zinc-100 dark:border-zinc-800\"\n                          initial={{ opacity: 0, x: -8 }}\n                          animate={heroInView ? { opacity: 1, x: 0 } : {}}\n                          transition={{ delay: 0.7 + i * 0.1, duration: 0.4 }}\n                        >\n                          <div className=\"flex items-center gap-3\">\n                            <div className=\"w-7 h-7 rounded-lg bg-zinc-200 dark:bg-zinc-800 flex items-center justify-center\">\n                              <Calendar className=\"w-3.5 h-3.5 text-zinc-600 dark:text-zinc-400\" />\n                            </div>\n                            <div>\n                              <p className=\"text-[13px] font-medium text-zinc-900 dark:text-white leading-none\">\n                                {ev.name}\n                              </p>\n                              <p className=\"text-[11px] text-zinc-400 dark:text-zinc-500 mt-0.5\">\n                                {ev.date}\n                              </p>\n                            </div>\n                          </div>\n                          <span className=\"text-[11px] font-medium text-zinc-500 dark:text-zinc-400 bg-zinc-100 dark:bg-zinc-800 px-2 py-0.5 rounded-full\">\n                            {ev.count} participants\n                          </span>\n                        </motion.div>\n                      ))}\n                    </div>\n                  </div>\n\n                  <div>\n                    <p className=\"text-xs font-semibold text-zinc-900 dark:text-white mb-3 tracking-tight\">\n                      Monthly stats\n                    </p>\n                    <div className=\"flex items-end gap-2 h-20 px-1\">\n                      {bars.map((h, i) => (\n                        <div\n                          key={i}\n                          className=\"flex-1 flex flex-col items-center gap-1\"\n                        >\n                          <motion.div\n                            className=\"w-full bg-zinc-200 dark:bg-zinc-700 rounded-t-md\"\n                            style={{ height: `${h}%` }}\n                            initial={{ scaleY: 0, originY: 1 }}\n                            animate={heroInView ? { scaleY: 1 } : {}}\n                            transition={{\n                              delay: 0.8 + i * 0.06,\n                              duration: 0.5,\n                              ease: \"easeOut\",\n                            }}\n                          >\n                            {h === 90 && (\n                              <div className=\"w-full h-full bg-zinc-900 dark:bg-white rounded-t-md\" />\n                            )}\n                          </motion.div>\n                          <span className=\"text-[9px] text-zinc-400 dark:text-zinc-600\">\n                            {months[i]}\n                          </span>\n                        </div>\n                      ))}\n                    </div>\n                  </div>\n                </div>\n              </div>\n            </motion.div>\n          </div>\n\n          <motion.div\n            className=\"mt-20\"\n            initial={{ opacity: 0, y: 16 }}\n            animate={heroInView ? { opacity: 1, y: 0 } : {}}\n            transition={{ delay: 1.0, duration: 0.5 }}\n          >\n            <p className=\"text-center text-xs font-medium text-zinc-400 dark:text-zinc-600 uppercase tracking-widest mb-6\">\n              Trusted by\n            </p>\n            <div className=\"flex flex-wrap items-center justify-center gap-8\">\n              {[\n                \"https://www.google.com/favicon.ico\",\n                \"https://www.microsoft.com/favicon.ico\",\n                \"https://www.amazon.com/favicon.ico\",\n                \"https://www.apple.com/favicon.ico\",\n              ].map((logo, i) => (\n                <img\n                  key={i}\n                  src={logo}\n                  alt={`Partner logo ${i + 1}`}\n                  className=\"h-8 w-auto object-contain opacity-60 hover:opacity-100 transition-opacity\"\n                />\n              ))}\n            </div>\n          </motion.div>\n        </div>\n      </section>\n    </div>\n  );\n}\n",
      "type": "registry:block",
      "target": "components/blocks/hero-ex-4.tsx"
    }
  ],
  "type": "registry:block"
}