{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "footer-hero",
  "dependencies": [
    "motion"
  ],
  "devDependencies": [],
  "registryDependencies": [],
  "files": [
    {
      "path": "../../packages/blocks/src/footer-section/hero-footer.tsx",
      "content": "import React from 'react'\r\nimport { cn } from '@/lib/utils'\r\nimport {\r\n  Github,\r\n  Twitter,\r\n  Linkedin,\r\n  Dribbble,\r\n  Mail,\r\n  ArrowRight,\r\n  ArrowUp,\r\n} from 'lucide-react'\r\nimport { Button } from '@repo/shadcn'\r\n\r\nexport const HeroFooter = () => {\r\n  return (\r\n    <section className=\"bg-neutral-100 pt-40 font-dmSans\">\r\n      <div className=\"w-[80%] mx-auto px-6\">\r\n        {/* Floating Call to Action */}\r\n        <div className=\"relative z-10 -mb-24\">\r\n          <div className=\"bg-linear-to-r from-gray-200 to-gray-300 rounded-2xl overflow-hidden h-96 relative group shadow-2xl\">\r\n            <img\r\n              src=\"https://images.unsplash.com/photo-1549979047-f06bb9619b61?q=80&w=1374&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\"\r\n              className=\"w-full h-full object-cover opacity-80\"\r\n            />\r\n            <div className=\"absolute inset-0 bg-black/20 flex flex-col justify-center p-12 md:p-24\">\r\n              <h2 className=\"text-white text-5xl md:text-6xl font-bold max-w-2xl mb-8\">\r\n                Let's build something extraordinary together\r\n              </h2>\r\n              <Button className=\"bg-violet-600 text-white px-8 py-4 rounded-full w-fit flex items-center gap-3 font-semibold hover:bg-violet-700 transition-colors group\">\r\n                Start a project\r\n                <div className=\"size-8 bg-white rounded-full flex items-center justify-center text-violet-600\">\r\n                  <ArrowRight className=\"size-5\" />\r\n                </div>\r\n              </Button>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div className=\"w-full mx-auto px-6\">\r\n        {/* Main Black Footer Area */}\r\n        <div className=\"bg-black rounded-t-3xl pt-40 pb-20 px-6 md:px-12 text-white\">\r\n          <div className=\"max-w-7xl mx-auto\">\r\n            <div className=\"grid grid-cols-1 lg:grid-cols-2 gap-4 items-start pb-8\">\r\n              <div className=\"space-y-12\">\r\n                <div className=\"text-4xl font-bold tracking-tighter italic\">\r\n                  <span className=\"text-2xl not-italic ml-1\">Naymur</span>\r\n                  <br />\r\n                  <span className=\"text-5xl ml-2 uppercase\">Rahman</span>\r\n                </div>\r\n\r\n                <div className=\"space-y-4\">\r\n                  <h4 className=\"text-sm font-medium text-gray-400 uppercase tracking-wider\">\r\n                    Connect\r\n                  </h4>\r\n                  <div className=\"flex gap-4\">\r\n                    <a\r\n                      href=\"#\"\r\n                      className=\"size-10 border border-gray-700 rounded-full flex items-center justify-center hover:bg-white hover:text-black transition-colors\"\r\n                    >\r\n                      <Github className=\"size-5\" />\r\n                    </a>\r\n                    <a\r\n                      href=\"#\"\r\n                      className=\"size-10 border border-gray-700 rounded-full flex items-center justify-center hover:bg-white hover:text-black transition-colors\"\r\n                    >\r\n                      <Twitter className=\"size-5\" />\r\n                    </a>\r\n                    <a\r\n                      href=\"#\"\r\n                      className=\"size-10 border border-gray-700 rounded-full flex items-center justify-center hover:bg-white hover:text-black transition-colors\"\r\n                    >\r\n                      <Linkedin className=\"size-5\" />\r\n                    </a>\r\n                    <a\r\n                      href=\"#\"\r\n                      className=\"size-10 border border-gray-700 rounded-full flex items-center justify-center hover:bg-white hover:text-black transition-colors\"\r\n                    >\r\n                      <Dribbble className=\"size-5\" />\r\n                    </a>\r\n                    <a\r\n                      href=\"#\"\r\n                      className=\"size-10 border border-gray-700 rounded-full flex items-center justify-center hover:bg-white hover:text-black transition-colors\"\r\n                    >\r\n                      <Mail className=\"size-5\" />\r\n                    </a>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n\r\n              <div className=\"space-y-6 lg:text-right\">\r\n                <h3 className=\"text-lg font-medium text-gray-400\">\r\n                  Subscribe to my newsletter for design insights & updates\r\n                </h3>\r\n                <p className=\"text-sm text-gray-500 max-w-md lg:ml-auto\">\r\n                  Get weekly design tips, industry trends, and exclusive\r\n                  resources delivered straight to your inbox.\r\n                </p>\r\n                <div className=\"relative max-w-md lg:ml-auto\">\r\n                  <input\r\n                    type=\"email\"\r\n                    placeholder=\"Enter your email\"\r\n                    className=\"w-full bg-transparent border border-gray-700 rounded-full px-6 py-3 pr-12 text-white focus:outline-none focus:border-violet-500 transition-colors\"\r\n                  />\r\n                  <button className=\"absolute right-2 top-1/2 -translate-y-1/2 size-8 bg-violet-600 rounded-full flex items-center justify-center hover:bg-violet-700 transition-colors\">\r\n                    <span className=\"text-xl\">›</span>\r\n                  </button>\r\n                </div>\r\n              </div>\r\n            </div>\r\n\r\n            <nav className=\"border-t border-gray-800 py-8 grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-8 text-sm font-medium text-gray-300\">\r\n              <a href=\"#\" className=\"hover:text-white transition-colors\">\r\n                Portfolio\r\n              </a>\r\n              <a href=\"#\" className=\"hover:text-white transition-colors\">\r\n                About\r\n              </a>\r\n              <a href=\"#\" className=\"hover:text-white transition-colors\">\r\n                Services\r\n              </a>\r\n              <a href=\"#\" className=\"hover:text-white transition-colors\">\r\n                Blog\r\n              </a>\r\n              <a href=\"#\" className=\"hover:text-white transition-colors\">\r\n                Contact\r\n              </a>\r\n              <a href=\"#\" className=\"hover:text-white transition-colors\">\r\n                Resume\r\n              </a>\r\n            </nav>\r\n\r\n            <div className=\"py-8 border-t border-gray-800 flex flex-col md:flex-row justify-between items-center gap-6\">\r\n              <span className=\"font-semibold text-lg\">Naymur Rahman</span>\r\n              <span className=\"text-gray-500 text-sm\">\r\n                2024 Naymur Rahman. All rights reserved.\r\n              </span>\r\n              <Button className=\"flex items-center bg-transparent gap-2 text-sm text-gray-400 hover:text-white transition-colors\">\r\n                Back to top\r\n                <div className=\"size-10 bg-white text-black rounded-full flex items-center justify-center\">\r\n                  <ArrowUp className=\"size-5\" />\r\n                </div>\r\n              </Button>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </section>\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"
}