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