{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "footer-bento",
  "dependencies": [
    "motion"
  ],
  "devDependencies": [],
  "registryDependencies": [],
  "files": [
    {
      "path": "../../packages/blocks/src/footer-section/footer-bento.tsx",
      "content": "import { Rainbow } from 'lucide-react'\r\nimport { Button } from '@repo/shadcn'\r\n\r\nexport const BentoFooter = () => {\r\n  return (\r\n    <footer className=\"w-full py-12\">\r\n      <div className=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8\">\r\n        <div className=\"grid grid-cols-1 md:grid-cols-4 gap-4\">\r\n          {/* Main Info Card */}\r\n          <div className=\"md:col-span-2 row-span-2 bg-white dark:bg-neutral-900 rounded-2xl border border-neutral-200 dark:border-neutral-800 p-8 flex flex-col justify-between\">\r\n            <div>\r\n              <div className=\"size-10 rounded-xl bg-neutral-900 dark:bg-neutral-100 mb-6 flex items-center justify-center\">\r\n                <Rainbow />\r\n              </div>\r\n              <h3 className=\"text-2xl font-bold tracking-tight text-neutral-950 dark:text-neutral-50 mb-4\">\r\n                Start your journey today.\r\n              </h3>\r\n              <p className=\"text-neutral-500 dark:text-neutral-400 text-pretty leading-relaxed\">\r\n                Empowering founders and teams with the fastest development\r\n                cycles in the industry.\r\n              </p>\r\n            </div>\r\n            <div className=\"mt-12 flex gap-4\">\r\n              <Button className=\"px-6 py-2.5 bg-neutral-900 dark:bg-neutral-100 text-white dark:text-neutral-900 rounded-lg text-sm font-semibold hover:bg-neutral-800 dark:hover:bg-neutral-200 transition-colors\">\r\n                Get Started\r\n              </Button>\r\n              <Button className=\"px-6 py-2.5 bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 text-neutral-900 dark:text-neutral-50 rounded-lg text-sm font-semibold hover:bg-neutral-50 dark:hover:bg-neutral-800 transition-colors\">\r\n                Book Demo\r\n              </Button>\r\n            </div>\r\n          </div>\r\n\r\n          {/* Social Card */}\r\n          <div className=\"bg-white dark:bg-neutral-900 rounded-2xl border border-neutral-200 dark:border-neutral-800 p-6 flex flex-col justify-between\">\r\n            <span className=\"text-xs font-bold uppercase tracking-widest text-neutral-400 dark:text-neutral-600\">\r\n              Connect\r\n            </span>\r\n            <div className=\"flex flex-wrap gap-2 mt-4\">\r\n              {['Twitter', 'GitHub', 'LinkedIn', 'Discord'].map((item) => (\r\n                <a\r\n                  key={item}\r\n                  href=\"#\"\r\n                  className=\"px-3 py-1 bg-neutral-100 dark:bg-neutral-800 rounded-full text-xs font-medium hover:bg-neutral-200 dark:hover:bg-neutral-700 transition-colors\"\r\n                >\r\n                  {item}\r\n                </a>\r\n              ))}\r\n            </div>\r\n          </div>\r\n\r\n          {/* Newsletter Card */}\r\n          <div className=\"bg-neutral-900 dark:bg-neutral-100 rounded-2xl p-6 flex flex-col justify-between\">\r\n            <span className=\"text-xs font-bold uppercase tracking-widest text-neutral-400 dark:text-neutral-600\">\r\n              Join the Circle\r\n            </span>\r\n            <div className=\"mt-4\">\r\n              <p className=\"text-sm text-neutral-400 dark:text-neutral-600 mb-4\">\r\n                Weekly insights delivered.\r\n              </p>\r\n              <div className=\"relative\">\r\n                <input\r\n                  type=\"email\"\r\n                  placeholder=\"Email address\"\r\n                  className=\"w-full bg-neutral-800 dark:bg-neutral-200 border-none rounded-lg px-3 py-2 pr-10 text-sm text-white dark:text-neutral-900 focus:ring-1 focus:ring-neutral-600 dark:focus:ring-neutral-400 mb-2\"\r\n                />\r\n                <Button className=\"absolute right-2 top-1.5 size-6 bg-neutral-600 dark:bg-neutral-700 rounded flex items-center justify-center hover:bg-neutral-500 dark:hover:bg-neutral-600 transition-colors\">\r\n                  <svg\r\n                    className=\"size-3 text-white\"\r\n                    fill=\"none\"\r\n                    viewBox=\"0 0 24 24\"\r\n                    stroke=\"currentColor\"\r\n                  >\r\n                    <path\r\n                      strokeLinecap=\"round\"\r\n                      strokeLinejoin=\"round\"\r\n                      strokeWidth={2}\r\n                      d=\"M13 7l5 5m0 0l-5 5m5-5H6\"\r\n                    />\r\n                  </svg>\r\n                </Button>\r\n              </div>\r\n            </div>\r\n          </div>\r\n\r\n          {/* Location Card */}\r\n          <div className=\"bg-white dark:bg-neutral-900 rounded-2xl border border-neutral-200 dark:border-neutral-800 p-6 flex items-center gap-4\">\r\n            <div className=\"size-10 rounded-lg bg-neutral-100 dark:bg-neutral-800 flex items-center justify-center shrink-0\">\r\n              <svg\r\n                className=\"size-5 text-neutral-500 dark:text-neutral-400\"\r\n                fill=\"none\"\r\n                viewBox=\"0 0 24 24\"\r\n                stroke=\"currentColor\"\r\n              >\r\n                <path\r\n                  strokeLinecap=\"round\"\r\n                  strokeLinejoin=\"round\"\r\n                  strokeWidth={2}\r\n                  d=\"M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z\"\r\n                />\r\n                <path\r\n                  strokeLinecap=\"round\"\r\n                  strokeLinejoin=\"round\"\r\n                  strokeWidth={2}\r\n                  d=\"M15 11a3 3 0 11-6 0 3 3 0 016 0z\"\r\n                />\r\n              </svg>\r\n            </div>\r\n            <div>\r\n              <p className=\"text-sm font-bold text-neutral-950 dark:text-neutral-50\">\r\n                San Francisco, CA\r\n              </p>\r\n              <p className=\"text-xs text-neutral-500 dark:text-neutral-400\">\r\n                Global HQ\r\n              </p>\r\n            </div>\r\n          </div>\r\n\r\n          {/* Legal Card */}\r\n          <div className=\"bg-white dark:bg-neutral-900 rounded-2xl border border-neutral-200 dark:border-neutral-800 p-6 flex items-center justify-between\">\r\n            <div className=\"flex gap-4\">\r\n              <a\r\n                href=\"#\"\r\n                className=\"text-xs font-medium hover:underline text-neutral-950 dark:text-neutral-50\"\r\n              >\r\n                Privacy\r\n              </a>\r\n              <a\r\n                href=\"#\"\r\n                className=\"text-xs font-medium hover:underline text-neutral-950 dark:text-neutral-50\"\r\n              >\r\n                Terms\r\n              </a>\r\n            </div>\r\n            <span className=\"text-xs text-neutral-400 dark:text-neutral-600\">\r\n              © 2024\r\n            </span>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </footer>\r\n  )\r\n}\r\n",
      "type": "registry:block"
    },
    {
      "path": "./components/ui/timeline-animation.tsx",
      "content": "import type { Variants } from 'motion/react';\nimport { type HTMLMotionProps, motion, useInView } from 'motion/react';\nimport type React from 'react';\n\ntype TimelineContentProps<T extends keyof HTMLElementTagNameMap> = {\n  children?: React.ReactNode;\n  animationNum: number;\n  className?: string;\n  timelineRef: React.RefObject<HTMLElement | null>;\n  as?: T;\n  customVariants?: Variants;\n  once?: boolean;\n} & HTMLMotionProps<T>;\n\nexport const TimelineAnimation = <T extends keyof HTMLElementTagNameMap = 'div'>({\n  children,\n  animationNum,\n  timelineRef,\n  className,\n  as,\n  customVariants,\n  once = true,\n  ...props\n}: TimelineContentProps<T>) => {\n  const defaultSequenceVariants = {\n    visible: (i: number) => ({\n      filter: 'blur(0px)',\n      y: 0,\n      opacity: 1,\n      transition: {\n        delay: i * 0.5,\n        duration: 0.5,\n      },\n    }),\n    hidden: {\n      filter: 'blur(20px)',\n      y: 0,\n      opacity: 0,\n    },\n  };\n\n  const sequenceVariants = customVariants || defaultSequenceVariants;\n\n  const isInView = useInView(timelineRef, {\n    once,\n  });\n\n  const MotionComponent = motion[as || 'div'] as React.ElementType;\n\n  return (\n    <MotionComponent\n      initial='hidden'\n      animate={isInView ? 'visible' : 'hidden'}\n      custom={animationNum}\n      variants={sequenceVariants}\n      className={className}\n      {...props}\n    >\n      {children}\n    </MotionComponent>\n  );\n};\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:block"
}