{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "hero2",
  "title": "Hero Exemple 2",
  "description": "Hero section with navbar and animated event dashboard preview.",
  "dependencies": [
    "framer-motion",
    "lucide-react"
  ],
  "files": [
    {
      "path": "registry/default/blocks/hero/hero2.tsx",
      "content": "\"use client\";\r\n\r\nimport { useState } from \"react\";\r\nimport { AnimatePresence, motion, Variants } from \"framer-motion\";\r\nimport Image from \"next/image\";\r\nimport {\r\n  ChevronDown,\r\n  ChevronLeft,\r\n  ChevronRight,\r\n  Clock,\r\n  Video,\r\n  Globe,\r\n  Rocket,\r\n} from \"lucide-react\";\r\n\r\ntype NavItem = { title: string; description: string };\r\ntype NavLink = { label: string; dropdown: boolean; items?: NavItem[] };\r\n\r\nconst NAV_LINKS: NavLink[] = [\r\n  {\r\n    label: \"Solutions\",\r\n    dropdown: true,\r\n    items: [\r\n      { title: \"For Startups\", description: \"Ship scheduling fast\" },\r\n      { title: \"For Enterprise\", description: \"Scale your meeting infra\" },\r\n      { title: \"For Agencies\", description: \"Client booking, streamlined\" },\r\n    ],\r\n  },\r\n  { label: \"Enterprise\", dropdown: false },\r\n  {\r\n    label: \"Developers\",\r\n    dropdown: true,\r\n    items: [\r\n      { title: \"API Reference\", description: \"Build on the platform\" },\r\n      { title: \"Webhooks\", description: \"React to booking events\" },\r\n      { title: \"SDKs\", description: \"Official client libraries\" },\r\n    ],\r\n  },\r\n  {\r\n    label: \"Resources\",\r\n    dropdown: true,\r\n    items: [\r\n      { title: \"Blog\", description: \"Product updates & guides\" },\r\n      { title: \"Help Center\", description: \"Get support fast\" },\r\n      { title: \"Changelog\", description: \"See what shipped\" },\r\n    ],\r\n  },\r\n  { label: \"Pricing\", dropdown: false },\r\n];\r\n\r\nconst WEEKDAYS = [\"SUN\", \"MON\", \"TUE\", \"WED\", \"THU\", \"FRI\", \"SAT\"];\r\nconst MONTH_NAMES = [\r\n  \"January\",\r\n  \"February\",\r\n  \"March\",\r\n  \"April\",\r\n  \"May\",\r\n  \"June\",\r\n  \"July\",\r\n  \"August\",\r\n  \"September\",\r\n  \"October\",\r\n  \"November\",\r\n  \"December\",\r\n];\r\nconst WEEKDAY_NAMES = [\r\n  \"Sunday\",\r\n  \"Monday\",\r\n  \"Tuesday\",\r\n  \"Wednesday\",\r\n  \"Thursday\",\r\n  \"Friday\",\r\n  \"Saturday\",\r\n];\r\n// Reference \"today\" — also the default selected date\r\nconst TODAY = { year: 2026, month: 3, day: 5 }; // April 5, 2026\r\n\r\nfunction daysInMonth(year: number, month: number) {\r\n  return new Date(year, month + 1, 0).getDate();\r\n}\r\nfunction firstWeekday(year: number, month: number) {\r\n  return new Date(year, month, 1).getDay();\r\n}\r\nfunction isPastDate(year: number, month: number, day: number) {\r\n  return (\r\n    new Date(year, month, day) < new Date(TODAY.year, TODAY.month, TODAY.day)\r\n  );\r\n}\r\nfunction isAvailable(year: number, month: number, day: number) {\r\n  const weekday = new Date(year, month, day).getDay();\r\n  const isWeekend = weekday === 0 || weekday === 6;\r\n  return !isWeekend && !isPastDate(year, month, day);\r\n}\r\n\r\nconst fadeUp: Variants = {\r\n  hidden: { opacity: 0, y: 24 },\r\n  visible: (i: number = 0) => ({\r\n    opacity: 1,\r\n    y: 0,\r\n    transition: { duration: 0.6, delay: i * 0.08, ease: [0.22, 1, 0.36, 1] },\r\n  }),\r\n};\r\n\r\nconst monthVariants: Variants = {\r\n  enter: (direction: number) => ({ opacity: 0, x: direction > 0 ? 24 : -24 }),\r\n  center: {\r\n    opacity: 1,\r\n    x: 0,\r\n    transition: { duration: 0.35, ease: [0.22, 1, 0.36, 1] },\r\n  },\r\n  exit: (direction: number) => ({\r\n    opacity: 0,\r\n    x: direction > 0 ? -24 : 24,\r\n    transition: { duration: 0.25, ease: [0.22, 1, 0.36, 1] },\r\n  }),\r\n};\r\n\r\nexport default function Hero2() {\r\n  const [openDropdown, setOpenDropdown] = useState<string | null>(null);\r\n\r\n  const [viewDate, setViewDate] = useState({\r\n    year: TODAY.year,\r\n    month: TODAY.month,\r\n  });\r\n  const [direction, setDirection] = useState(0);\r\n\r\n  const [selectedDate, setSelectedDate] = useState({ ...TODAY });\r\n\r\n  function changeMonth(offset: number) {\r\n    setDirection(offset);\r\n    setViewDate(({ year, month }) => {\r\n      const d = new Date(year, month + offset, 1);\r\n      return { year: d.getFullYear(), month: d.getMonth() };\r\n    });\r\n  }\r\n\r\n  function handleSelectDay(day: number) {\r\n    if (!isAvailable(viewDate.year, viewDate.month, day)) return;\r\n    setSelectedDate({ year: viewDate.year, month: viewDate.month, day });\r\n  }\r\n\r\n  const leadingBlanks = firstWeekday(viewDate.year, viewDate.month);\r\n  const totalDays = daysInMonth(viewDate.year, viewDate.month);\r\n  const cells: (number | null)[] = [\r\n    ...Array.from({ length: leadingBlanks }, () => null),\r\n    ...Array.from({ length: totalDays }, (_, i) => i + 1),\r\n  ];\r\n\r\n  const selectedWeekday =\r\n    WEEKDAY_NAMES[\r\n      new Date(selectedDate.year, selectedDate.month, selectedDate.day).getDay()\r\n    ];\r\n  const selectedMonthShort = MONTH_NAMES[selectedDate.month].slice(0, 3);\r\n\r\n  return (\r\n    <section className=\"relative w-full overflow-hidden bg-white text-neutral-900\">\r\n      {/* click-away layer for dropdowns */}\r\n      {openDropdown && (\r\n        <div\r\n          className=\"fixed inset-0 z-[5]\"\r\n          onClick={() => setOpenDropdown(null)}\r\n        />\r\n      )}\r\n\r\n      {/* Nav */}\r\n      <motion.nav\r\n        initial=\"hidden\"\r\n        animate=\"visible\"\r\n        variants={fadeUp}\r\n        className=\"relative z-10 mx-auto flex max-w-6xl items-center justify-between px-6 py-6\"\r\n      >\r\n        <span className=\"text-[19px] font-semibold tracking-tight\">\r\n          BagUi.pro\r\n        </span>\r\n\r\n        <div className=\"hidden items-center gap-7 md:flex\">\r\n          {NAV_LINKS.map((link) => (\r\n            <div key={link.label} className=\"relative\">\r\n              <button\r\n                onClick={() =>\r\n                  link.dropdown &&\r\n                  setOpenDropdown(\r\n                    openDropdown === link.label ? null : link.label,\r\n                  )\r\n                }\r\n                className=\"flex items-center gap-1 text-[14px] font-medium text-neutral-700 transition-colors hover:text-neutral-950 cursor-pointer\"\r\n              >\r\n                {link.label}\r\n                {link.dropdown && (\r\n                  <motion.span\r\n                    animate={{ rotate: openDropdown === link.label ? 180 : 0 }}\r\n                    transition={{ duration: 0.2 }}\r\n                  >\r\n                    <ChevronDown className=\"h-3.5 w-3.5 text-neutral-400\" />\r\n                  </motion.span>\r\n                )}\r\n              </button>\r\n\r\n              <AnimatePresence>\r\n                {link.dropdown && openDropdown === link.label && (\r\n                  <motion.div\r\n                    initial={{ opacity: 0, y: -8, scale: 0.98 }}\r\n                    animate={{ opacity: 1, y: 0, scale: 1 }}\r\n                    exit={{ opacity: 0, y: -8, scale: 0.98 }}\r\n                    transition={{ duration: 0.18, ease: [0.22, 1, 0.36, 1] }}\r\n                    className=\"absolute left-0 top-full z-20 mt-3 w-64 rounded-xl border border-neutral-200 bg-white p-2 shadow-[0_12px_32px_-8px_rgba(0,0,0,0.12)]\"\r\n                  >\r\n                    {link.items?.map((item) => (\r\n                      <button\r\n                        key={item.title}\r\n                        className=\"flex w-full flex-col items-start gap-0.5 rounded-lg px-3 py-2 text-left transition-colors hover:bg-neutral-50 cursor-pointer\"\r\n                      >\r\n                        <span className=\"text-[13.5px] font-medium text-neutral-900\">\r\n                          {item.title}\r\n                        </span>\r\n                        <span className=\"text-[12px] text-neutral-500\">\r\n                          {item.description}\r\n                        </span>\r\n                      </button>\r\n                    ))}\r\n                  </motion.div>\r\n                )}\r\n              </AnimatePresence>\r\n            </div>\r\n          ))}\r\n        </div>\r\n\r\n        <div className=\"flex items-center gap-5\">\r\n          <button className=\"text-[14px] font-medium text-neutral-400 hover:text-neutral-600 cursor-pointer\">\r\n            Login\r\n          </button>\r\n          <motion.button\r\n            whileHover={{ scale: 1.03 }}\r\n            whileTap={{ scale: 0.97 }}\r\n            className=\"flex items-center gap-2 rounded-full bg-neutral-900 px-4 py-2 text-[14px] font-medium text-white cursor-pointer\"\r\n          >\r\n            <span className=\"grid h-4 w-4 place-items-center text-[10px]\">\r\n              <Rocket size={12} />\r\n            </span>\r\n            Sign up for free\r\n          </motion.button>\r\n        </div>\r\n      </motion.nav>\r\n\r\n      {/* Hero copy */}\r\n      <div className=\"relative mx-auto flex max-w-3xl flex-col items-center px-6 pt-10 text-center\">\r\n        <motion.button\r\n          custom={1}\r\n          initial=\"hidden\"\r\n          animate=\"visible\"\r\n          variants={fadeUp}\r\n          className=\"mb-6 flex items-center gap-1.5 rounded-full border border-neutral-200 bg-white px-4 py-1.5 text-[13px] font-medium text-neutral-600 shadow-sm\"\r\n        >\r\n          BagUI.pro launches v0.8\r\n          <ChevronRight className=\"h-3.5 w-3.5\" />\r\n        </motion.button>\r\n\r\n        <motion.h1\r\n          custom={2}\r\n          initial=\"hidden\"\r\n          animate=\"visible\"\r\n          variants={fadeUp}\r\n          className=\"text-[42px] font-semibold leading-[1.08] tracking-tight sm:text-[56px]\"\r\n        >\r\n          The better way to\r\n          <br />\r\n          schedule your meetings\r\n        </motion.h1>\r\n\r\n        <motion.p\r\n          custom={3}\r\n          initial=\"hidden\"\r\n          animate=\"visible\"\r\n          variants={fadeUp}\r\n          className=\"mx-auto mt-5 max-w-xl text-[15px] leading-relaxed text-neutral-500\"\r\n        >\r\n          A fully customizable scheduling experience for individuals, businesses\r\n          taking calls and developers building scheduling platforms where users\r\n          meet users.\r\n        </motion.p>\r\n\r\n        <motion.div\r\n          custom={4}\r\n          initial=\"hidden\"\r\n          animate=\"visible\"\r\n          variants={fadeUp}\r\n          className=\"mt-7 flex flex-col items-center gap-3 sm:flex-row\"\r\n        >\r\n          <motion.button\r\n            whileHover={{ scale: 1.02 }}\r\n            whileTap={{ scale: 0.98 }}\r\n            className=\"flex items-center gap-2 rounded-full bg-neutral-900 px-5 py-2.5 text-[14px] font-medium text-white cursor-pointer\"\r\n          >\r\n            <GoogleIcon />\r\n            Sign up with google\r\n          </motion.button>\r\n          <motion.button\r\n            whileHover={{ scale: 1.02 }}\r\n            whileTap={{ scale: 0.98 }}\r\n            className=\"rounded-full border border-neutral-200 bg-white px-5 py-2.5 text-[14px] font-medium text-neutral-800 cursor-pointer\"\r\n          >\r\n            Sign up with Email\r\n          </motion.button>\r\n        </motion.div>\r\n\r\n        <motion.p\r\n          custom={5}\r\n          initial=\"hidden\"\r\n          animate=\"visible\"\r\n          variants={fadeUp}\r\n          className=\"mt-4 text-[13px] text-neutral-400\"\r\n        >\r\n          No credit card required\r\n        </motion.p>\r\n      </div>\r\n\r\n      {/* Booking card preview */}\r\n      <motion.div\r\n        initial={{ opacity: 0, y: 60 }}\r\n        animate={{ opacity: 1, y: 0 }}\r\n        transition={{ duration: 0.7, delay: 0.5, ease: [0.22, 1, 0.36, 1] }}\r\n        className=\"relative z-10 mx-auto mt-14 max-w-5xl px-4\"\r\n      >\r\n        <div className=\"relative overflow-hidden rounded-t-2xl border-x-8 border-t-8 border-neutral-200 bg-white shadow-[0_-8px_40px_-12px_rgba(0,0,0,0.08)]\">\r\n          <div className=\"flex flex-col sm:flex-row\">\r\n            {/* Left: event info */}\r\n            <div className=\"shrink-0 border-b border-neutral-100 p-7 sm:w-[280px] sm:border-b-0 sm:border-r\">\r\n              <Image\r\n                src=\"/avatar.png\"\r\n                alt=\"Avatar\"\r\n                width={36}\r\n                height={36}\r\n                className=\"mb-4 rounded-full object-cover\"\r\n              />\r\n              <p className=\"text-[13px] text-neutral-400\">Anelka Bag</p>\r\n              <h3 className=\"mt-1 text-[18px] font-semibold text-neutral-900\">\r\n                Design Workshop\r\n              </h3>\r\n              <p className=\"mt-2 text-[13.5px] leading-relaxed text-neutral-500\">\r\n                A longer chat to run through design.\r\n              </p>\r\n\r\n              <div className=\"mt-6 flex flex-col gap-3 text-[13.5px] text-neutral-600\">\r\n                <div className=\"flex items-center gap-2.5\">\r\n                  <Clock className=\"h-4 w-4 text-neutral-400\" />\r\n                  30 mins\r\n                </div>\r\n                <div className=\"flex items-center gap-2.5\">\r\n                  <Video className=\"h-4 w-4 text-neutral-400\" />\r\n                  Cal video\r\n                </div>\r\n                <button className=\"flex items-center gap-2.5 text-left\">\r\n                  <Globe className=\"h-4 w-4 text-neutral-400\" />\r\n                  DR Congo/Goma\r\n                  <ChevronDown className=\"h-3.5 w-3.5 text-neutral-400\" />\r\n                </button>\r\n              </div>\r\n\r\n              <AnimatePresence mode=\"wait\">\r\n                <motion.div\r\n                  key={`${selectedDate.year}-${selectedDate.month}-${selectedDate.day}`}\r\n                  initial={{ opacity: 0, y: 6 }}\r\n                  animate={{ opacity: 1, y: 0 }}\r\n                  exit={{ opacity: 0, y: -6 }}\r\n                  transition={{ duration: 0.25, ease: [0.22, 1, 0.36, 1] }}\r\n                  className=\"mt-6 rounded-xl bg-neutral-50 px-3.5 py-3\"\r\n                >\r\n                  <p className=\"text-[13px] font-medium text-neutral-900\">\r\n                    {selectedWeekday}, {selectedMonthShort} {selectedDate.day}\r\n                  </p>\r\n                </motion.div>\r\n              </AnimatePresence>\r\n            </div>\r\n\r\n            {/* Calendar */}\r\n            <div className=\"flex-1 p-7\">\r\n              <div className=\"mb-5 flex items-center justify-between\">\r\n                <h4 className=\"text-[16px] font-semibold text-neutral-900\">\r\n                  {MONTH_NAMES[viewDate.month]}{\" \"}\r\n                  <span className=\"font-normal text-neutral-400\">\r\n                    {viewDate.year}\r\n                  </span>\r\n                </h4>\r\n                <div className=\"flex items-center gap-1\">\r\n                  <motion.button\r\n                    whileTap={{ scale: 0.88 }}\r\n                    onClick={() => changeMonth(-1)}\r\n                    className=\"grid h-7 w-7 place-items-center rounded-full text-neutral-400 hover:bg-neutral-100 cursor-pointer\"\r\n                  >\r\n                    <ChevronLeft className=\"h-4 w-4\" />\r\n                  </motion.button>\r\n                  <motion.button\r\n                    whileTap={{ scale: 0.88 }}\r\n                    onClick={() => changeMonth(1)}\r\n                    className=\"grid h-7 w-7 place-items-center rounded-full text-neutral-400 hover:bg-neutral-100 cursor-pointer\"\r\n                  >\r\n                    <ChevronRight className=\"h-4 w-4\" />\r\n                  </motion.button>\r\n                </div>\r\n              </div>\r\n\r\n              <div className=\"grid grid-cols-7 gap-y-3 text-center\">\r\n                {WEEKDAYS.map((day) => (\r\n                  <span\r\n                    key={day}\r\n                    className=\"text-[11px] font-medium text-neutral-400\"\r\n                  >\r\n                    {day}\r\n                  </span>\r\n                ))}\r\n              </div>\r\n\r\n              <div className=\"relative overflow-hidden\">\r\n                <AnimatePresence mode=\"wait\" custom={direction}>\r\n                  <motion.div\r\n                    key={`${viewDate.year}-${viewDate.month}`}\r\n                    custom={direction}\r\n                    variants={monthVariants}\r\n                    initial=\"enter\"\r\n                    animate=\"center\"\r\n                    exit=\"exit\"\r\n                    className=\"grid grid-cols-7 gap-y-3 pt-3 text-center\"\r\n                  >\r\n                    {cells.map((day, i) => {\r\n                      if (day === null) return <span key={`blank-${i}`} />;\r\n\r\n                      const available = isAvailable(\r\n                        viewDate.year,\r\n                        viewDate.month,\r\n                        day,\r\n                      );\r\n                      const selected =\r\n                        selectedDate.year === viewDate.year &&\r\n                        selectedDate.month === viewDate.month &&\r\n                        selectedDate.day === day;\r\n                      const today =\r\n                        TODAY.year === viewDate.year &&\r\n                        TODAY.month === viewDate.month &&\r\n                        TODAY.day === day;\r\n\r\n                      return (\r\n                        <motion.button\r\n                          key={day}\r\n                          whileTap={available ? { scale: 0.9 } : undefined}\r\n                          disabled={!available}\r\n                          onClick={() => handleSelectDay(day)}\r\n                          className={[\r\n                            \"relative mx-auto flex h-9 w-9 items-center justify-center rounded-xl text-[13.5px] transition-colors\",\r\n                            available\r\n                              ? \"cursor-pointer hover:bg-neutral-100\"\r\n                              : \"cursor-not-allowed\",\r\n                          ].join(\" \")}\r\n                        >\r\n                          {selected && (\r\n                            <motion.span\r\n                              layoutId=\"day-highlight\"\r\n                              className=\"absolute inset-0 rounded-xl bg-neutral-900\"\r\n                              transition={{\r\n                                type: \"spring\",\r\n                                stiffness: 380,\r\n                                damping: 30,\r\n                              }}\r\n                            />\r\n                          )}\r\n                          <span\r\n                            className={[\r\n                              \"relative z-10\",\r\n                              selected\r\n                                ? \"text-white\"\r\n                                : available\r\n                                  ? \"text-neutral-900\"\r\n                                  : \"text-neutral-300\",\r\n                            ].join(\" \")}\r\n                          >\r\n                            {day}\r\n                          </span>\r\n                          {today && !selected && (\r\n                            <span className=\"absolute -bottom-1 h-1 w-1 rounded-xl bg-neutral-400\" />\r\n                          )}\r\n                        </motion.button>\r\n                      );\r\n                    })}\r\n                  </motion.div>\r\n                </AnimatePresence>\r\n              </div>\r\n            </div>\r\n          </div>\r\n\r\n          {/* bottom fade, matching the cropped hero look */}\r\n          <div className=\"pointer-events-none absolute inset-x-0 bottom-0 h-24 bg-gradient-to-t from-white to-transparent\" />\r\n        </div>\r\n      </motion.div>\r\n    </section>\r\n  );\r\n}\r\n\r\nfunction GoogleIcon() {\r\n  return (\r\n    <svg viewBox=\"0 0 18 18\" className=\"h-4 w-4\">\r\n      <path\r\n        fill=\"#4285F4\"\r\n        d=\"M17.64 9.2c0-.64-.06-1.25-.16-1.84H9v3.48h4.84c-.21 1.13-.84 2.08-1.8 2.72v2.26h2.92c1.7-1.57 2.68-3.87 2.68-6.62z\"\r\n      />\r\n      <path\r\n        fill=\"#34A853\"\r\n        d=\"M9 18c2.43 0 4.47-.8 5.96-2.18l-2.92-2.26c-.81.54-1.84.86-3.04.86-2.34 0-4.32-1.58-5.03-3.7H.96v2.33C2.44 15.98 5.48 18 9 18z\"\r\n      />\r\n      <path\r\n        fill=\"#FBBC05\"\r\n        d=\"M3.97 10.72A5.4 5.4 0 013.68 9c0-.6.1-1.18.29-1.72V4.95H.96A9 9 0 000 9c0 1.45.35 2.83.96 4.05l3.01-2.33z\"\r\n      />\r\n      <path\r\n        fill=\"#EA4335\"\r\n        d=\"M9 3.58c1.32 0 2.51.45 3.44 1.35l2.58-2.58C13.46.89 11.43 0 9 0 5.48 0 2.44 2.02.96 4.95l3.01 2.33C4.68 5.16 6.66 3.58 9 3.58z\"\r\n      />\r\n    </svg>\r\n  );\r\n}\r\n",
      "type": "registry:block",
      "target": "components/blocks/hero-ex-2.tsx"
    }
  ],
  "type": "registry:block"
}