{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "hero-social-app",
  "dependencies": [
    "motion"
  ],
  "devDependencies": [],
  "registryDependencies": [],
  "files": [
    {
      "path": "../../packages/blocks/src/hero-section/hero-social-app.tsx",
      "content": "'use client'\r\nimport { Apple, PlayCircle, Smartphone, Play, Zap } from 'lucide-react'\r\nimport { PhoneMockup } from '../../assets/index'\r\nimport { useRef } from 'react'\r\nimport { TimelineAnimation } from '@/components/ui/timeline-animation'\r\nimport { useMediaQuery } from '@/hooks/use-media-query'\r\nimport MotionDrawer from '@/components/ui/motion-drawer'\r\n\r\nexport const HeroSocialApp = () => {\r\n  const timelineRef = useRef<HTMLDivElement>(null)\r\n  const isMobile = useMediaQuery('(max-width: 768px)')\r\n  return (\r\n    <section\r\n      className=\"min-h-screen bg-neutral-100 text-neutral-950 overflow-hidden flex flex-col items-center \r\n      font-spaceGrotesk\r\n    \"\r\n      ref={timelineRef}\r\n    >\r\n      {/* Mobile Navigation */}\r\n      {isMobile && (\r\n        <div className=\"flex gap-4 justify-between items-center pt-2 w-full px-1\">\r\n          <MotionDrawer\r\n            direction=\"left\"\r\n            width={300}\r\n            backgroundColor={'#ffffff'}\r\n            clsBtnClassName=\"bg-neutral-800 border-r border-neutral-900 text-white\"\r\n            contentClassName=\"bg-white border-r border-neutral-200 text-black\"\r\n            btnClassName=\"bg-white text-black relative w-fit p-2 left-0 top-0 rounded-full shadow-xs border border-neutral-200\"\r\n          >\r\n            <nav className=\"space-y-4 \">\r\n              <div className=\"flex items-center gap-2 text-black\">\r\n                <svg\r\n                  className=\"fill-black w-8 h-8\"\r\n                  width=\"97\"\r\n                  height=\"108\"\r\n                  viewBox=\"0 0 97 108\"\r\n                  fill=\"none\"\r\n                  xmlns=\"http://www.w3.org/2000/svg\"\r\n                >\r\n                  <path d=\"M55.5 0C61.0005 0.00109895 64.5005 2.50586 64.5 7.5V17C64.5 24.5059 68.5005 27.5 81 27.5H88C94.0005 27.5059 96.5 29.5059 96.5 37.5V98.5C96.5 106.006 95.0005 107.5 88 107.5H41.5C36.5005 107.5 32 104.506 32 98.5V88C32 84.5 28.5 80 20.5 80H8.5C3 80 0 76.5 0 71.5V6.5C0.00048844 1.50586 2.50049 0.00585937 8.5 0H55.5ZM31 20C28.7909 20 27 21.7909 27 24V74C27 76.2091 28.7909 78 31 78H58C60.2091 78 62 76.2091 62 74V24C62 21.7909 60.2091 20 58 20H31Z\" />\r\n                </svg>\r\n                <span>UI-Layouts</span>\r\n              </div>\r\n              <a\r\n                href=\"#\"\r\n                className=\"block p-2 hover:bg-neutral-200 hover:text-black rounded-sm\"\r\n              >\r\n                About Us\r\n              </a>\r\n              <a\r\n                href=\"#\"\r\n                className=\"block p-2 hover:bg-neutral-200 hover:text-black rounded-sm\"\r\n              >\r\n                Press\r\n              </a>\r\n              <a\r\n                href=\"#\"\r\n                className=\"block p-2 hover:bg-neutral-200 hover:text-black rounded-sm\"\r\n              >\r\n                Careers\r\n              </a>\r\n              <a\r\n                href=\"#\"\r\n                className=\"block p-2 hover:bg-neutral-200 hover:text-black rounded-sm\"\r\n              >\r\n                Contact\r\n              </a>\r\n            </nav>\r\n          </MotionDrawer>\r\n\r\n          <TimelineAnimation\r\n            animationNum={2}\r\n            timelineRef={timelineRef}\r\n            className=\"flex gap-4\"\r\n          >\r\n            <button className=\"cursor-pointer px-8 py-3 rounded-xl bg-white border border-neutral-100 shadow-sm font-semibold text-sm\">\r\n              Login\r\n            </button>\r\n            <button className=\"cursor-pointer px-8 py-3 rounded-xl bg-[#2b2b2b] text-white shadow-xl font-semibold text-sm hover:bg-black transition\">\r\n              Signup\r\n            </button>\r\n          </TimelineAnimation>\r\n        </div>\r\n      )}\r\n\r\n      {/* Header */}\r\n      {!isMobile && (\r\n        <header className=\"w-full container sm:px-20 px-10 border-b border-x relative border-neutral-200\">\r\n          <TimelineAnimation\r\n            animationNum={2}\r\n            timelineRef={timelineRef}\r\n            className=\"sm:w-20 w-10 h-full absolute left-0 top-0 bg-[repeating-linear-gradient(135deg,#e0e0e0_0px_1px,transparent_1px_10px)]\"\r\n          />\r\n          <TimelineAnimation\r\n            animationNum={2}\r\n            timelineRef={timelineRef}\r\n            className=\"sm:w-20 w-10 h-full absolute right-0 top-0 bg-[repeating-linear-gradient(135deg,#e0e0e0_0px_1px,transparent_1px_10px)]\"\r\n          />\r\n          <div className=\"flex items-center justify-between border-x px-5 py-4 border-neutral-200\">\r\n            <TimelineAnimation\r\n              animationNum={0}\r\n              timelineRef={timelineRef}\r\n              className=\"flex items-center gap-2\"\r\n            >\r\n              <svg\r\n                className=\"fill-black w-8 h-8\"\r\n                width=\"97\"\r\n                height=\"108\"\r\n                viewBox=\"0 0 97 108\"\r\n                fill=\"none\"\r\n                xmlns=\"http://www.w3.org/2000/svg\"\r\n              >\r\n                <path d=\"M55.5 0C61.0005 0.00109895 64.5005 2.50586 64.5 7.5V17C64.5 24.5059 68.5005 27.5 81 27.5H88C94.0005 27.5059 96.5 29.5059 96.5 37.5V98.5C96.5 106.006 95.0005 107.5 88 107.5H41.5C36.5005 107.5 32 104.506 32 98.5V88C32 84.5 28.5 80 20.5 80H8.5C3 80 0 76.5 0 71.5V6.5C0.00048844 1.50586 2.50049 0.00585937 8.5 0H55.5ZM31 20C28.7909 20 27 21.7909 27 24V74C27 76.2091 28.7909 78 31 78H58C60.2091 78 62 76.2091 62 74V24C62 21.7909 60.2091 20 58 20H31Z\" />\r\n              </svg>\r\n            </TimelineAnimation>\r\n            <TimelineAnimation\r\n              as=\"nav\"\r\n              animationNum={1}\r\n              timelineRef={timelineRef}\r\n              className=\"hidden md:flex items-center gap-10 text-sm font-medium text-neutral-500\"\r\n            >\r\n              <a href=\"#\" className=\"text-neutral-900\">\r\n                Home\r\n              </a>\r\n              <a href=\"#\" className=\"hover:text-neutral-900\">\r\n                About\r\n              </a>\r\n              <a href=\"#\" className=\"hover:text-neutral-900\">\r\n                Reviews\r\n              </a>\r\n              <a href=\"#\" className=\"hover:text-neutral-900\">\r\n                Pricing\r\n              </a>\r\n              <a href=\"#\" className=\"hover:text-neutral-900\">\r\n                Blog\r\n              </a>\r\n            </TimelineAnimation>\r\n            <TimelineAnimation\r\n              animationNum={2}\r\n              timelineRef={timelineRef}\r\n              className=\"flex gap-4\"\r\n            >\r\n              <button className=\"cursor-pointer px-8 py-3 rounded-xl bg-white border border-neutral-100 shadow-sm font-semibold text-sm\">\r\n                Login\r\n              </button>\r\n              <button className=\"cursor-pointer px-8 py-3 rounded-xl bg-[#2b2b2b] text-white shadow-xl font-semibold text-sm hover:bg-black transition\">\r\n                Signup\r\n              </button>\r\n            </TimelineAnimation>\r\n          </div>\r\n        </header>\r\n      )}\r\n\r\n      {/* Hero Layout */}\r\n      <div className=\"w-full container sm:px-20 px-10 border-x border-b relative border-neutral-200\">\r\n        <TimelineAnimation\r\n          animationNum={3}\r\n          timelineRef={timelineRef}\r\n          className=\"sm:w-20 w-10 h-full absolute left-0 top-0 bg-[repeating-linear-gradient(135deg,#e0e0e0_0px_1px,transparent_1px_10px)]\"\r\n        />\r\n        <TimelineAnimation\r\n          animationNum={4}\r\n          timelineRef={timelineRef}\r\n          className=\"sm:w-20 w-10 h-full absolute right-0 top-0 bg-[repeating-linear-gradient(135deg,#e0e0e0_0px_1px,transparent_1px_10px)]\"\r\n        />\r\n        <div className=\"lg:flex items-center justify-between md:p-20 p-5 gap-12 border-x grow border-neutral-200\">\r\n          {/* Left Side: Content */}\r\n          <div className=\"flex-1\">\r\n            <TimelineAnimation\r\n              as=\"h1\"\r\n              animationNum={3}\r\n              timelineRef={timelineRef}\r\n              className=\"xl:text-5xl text-4xl 2xl:text-7xl font-semibold leading-none tracking-tight text-neutral-900 mb-8\"\r\n            >\r\n              Turn Ideas into\r\n              <TimelineAnimation\r\n                as=\"span\"\r\n                animationNum={4}\r\n                timelineRef={timelineRef}\r\n                className=\"inline-block bg-neutral-800 translate-x-3 xl:translate-y-3 translate-y-2 text-white rounded-2xl border-4 border-white shadow-lg p-3 rotate-12 lg:mr-0 mr-4\"\r\n              >\r\n                <svg\r\n                  width=\"36\"\r\n                  height=\"37\"\r\n                  viewBox=\"0 0 36 37\"\r\n                  className=\"2xl:w-10 2xl:h-10 xl:w-6 w-5 xl:h-6 h-5\"\r\n                  fill=\"none\"\r\n                  xmlns=\"http://www.w3.org/2000/svg\"\r\n                >\r\n                  <path\r\n                    d=\"M21.4249 15.6246L34.8267 0L31.6509 0L20.0141 13.5666L10.7198 0L0 0L14.0548 20.5152L0 36.9H3.17598L15.4647 22.5732L25.2802 36.9H36L21.4241 15.6246H21.4249ZM17.075 20.6959L15.6509 18.6531L4.32033 2.3979H9.19845L18.3424 15.5163L19.7664 17.5592L31.6524 34.6111H26.7743L17.075 20.6967V20.6959Z\"\r\n                    fill=\"white\"\r\n                  />\r\n                </svg>\r\n              </TimelineAnimation>\r\n              Posts in Seconds, Not Hours\r\n            </TimelineAnimation>\r\n            <TimelineAnimation\r\n              as=\"p\"\r\n              animationNum={5}\r\n              timelineRef={timelineRef}\r\n              className=\"xl:text-xl text-neutral-500 leading-relaxed mb-12 font-medium\"\r\n            >\r\n              Just drop your idea, we'll turn it into a viral post, complete\r\n              with scroll-stopping copy, clean formatting, and a publish-ready\r\n              finish.\r\n            </TimelineAnimation>\r\n\r\n            <div className=\"flex items-center gap-5 \">\r\n              <TimelineAnimation\r\n                as=\"button\"\r\n                animationNum={6}\r\n                timelineRef={timelineRef}\r\n                className=\"\r\n    flex items-center justify-center gap-2 cursor-pointer\r\n    px-4 py-2.5\r\n    rounded-xl\r\n    bg-neutral-900\r\n    relative\r\n    shadow-[0px_2.27px_1.82px_rgba(0,0,0,0.12),\r\n            0px_2.47px_2.47px_rgba(0,0,0,0.14),\r\n            0px_18.36px_14.69px_rgba(0,0,0,0.14),\r\n            0px_10.29px_8.23px_rgba(0,0,0,0.135),\r\n            0px_5.47px_4.37px_rgba(0,0,0,0.128),\r\n            inset_0px_0.82px_0px_rgba(255,255,255,0.3),\r\n            inset_0px_-2.47px_0px_#080808]\r\n  \"\r\n              >\r\n                {/* Radial highlight */}\r\n                <div\r\n                  className=\"\r\n      pointer-events-none absolute inset-0 rounded-xl\r\n      bg-[radial-gradient(circle_at_top_left,rgba(255,255,255,0.1),transparent_60%)]\r\n    \"\r\n                />\r\n\r\n                {/* Text */}\r\n                <span\r\n                  className=\"\r\n       relative z-10\r\n      text-sm font-medium text-white\r\n      tracking-tight capitalize\r\n      whitespace-nowrap\r\n    \"\r\n                >\r\n                  Apple Store\r\n                </span>\r\n\r\n                {/* Icon wrapper */}\r\n                <div className=\"relative z-10 w-[18.9px] h-[22.2px] flex items-center justify-center\">\r\n                  {/* Apple icon SVG */}\r\n                  <svg\r\n                    width=\"18.72\"\r\n                    height=\"18.72\"\r\n                    viewBox=\"0 0 19 19\"\r\n                    fill=\"none\"\r\n                    xmlns=\"http://www.w3.org/2000/svg\"\r\n                    className=\"text-white\"\r\n                  >\r\n                    <path\r\n                      d=\"M9.35 0C8.58 0.56 8 1.47 8 2.39C8 2.51 8.01 2.64 8.03 2.74C8.86 2.78 9.72 2.2 10.18 1.58C10.61 1.02 10.93 0.12 10.93 0C10.93 0 9.98 0 9.35 0Z\"\r\n                      fill=\"white\"\r\n                    />\r\n                    <path\r\n                      d=\"M15.74 6.46C15.66 6.5 13.77 7.52 13.77 9.67C13.77 12.1 15.95 12.95 15.98 12.96C15.98 13.01 15.64 14.2 14.82 15.44C14.08 16.52 13.3 17.59 12.1 17.59C10.9 17.59 10.61 16.89 9.22 16.89C7.86 16.89 7.42 17.61 6.32 17.61C5.22 17.61 4.47 16.58 3.72 15.51C2.87 14.29 2.18 12.09 2.18 9.99C2.18 6.62 4.36 4.78 6.51 4.78C7.64 4.78 8.58 5.54 9.29 5.54C9.97 5.54 11.03 4.75 12.32 4.75C12.81 4.75 14.58 4.8 15.74 6.46Z\"\r\n                      fill=\"white\"\r\n                    />\r\n                  </svg>\r\n                </div>\r\n              </TimelineAnimation>\r\n\r\n              <TimelineAnimation\r\n                as=\"span\"\r\n                animationNum={7}\r\n                timelineRef={timelineRef}\r\n                className=\"font-bold text-neutral-800\"\r\n              >\r\n                Or\r\n              </TimelineAnimation>\r\n              <TimelineAnimation\r\n                as=\"button\"\r\n                animationNum={7}\r\n                timelineRef={timelineRef}\r\n                className=\"\r\n    flex items-center justify-center gap-2 cursor-pointer\r\n    px-4 py-2.5\r\n    rounded-xl\r\n    bg-neutral-900\r\n    relative\r\n    shadow-[0px_2.27px_1.82px_rgba(0,0,0,0.12),\r\n            0px_2.47px_2.47px_rgba(0,0,0,0.14),\r\n            0px_18.36px_14.69px_rgba(0,0,0,0.14),\r\n            0px_10.29px_8.23px_rgba(0,0,0,0.135),\r\n            0px_5.47px_4.37px_rgba(0,0,0,0.128),\r\n            inset_0px_0.82px_0px_rgba(255,255,255,0.3),\r\n            inset_0px_-2.47px_0px_#080808]\r\n  \"\r\n              >\r\n                {/* Radial highlight */}\r\n                <div\r\n                  className=\"\r\n      pointer-events-none absolute inset-0 rounded-xl\r\n      bg-[radial-gradient(circle_at_top_left,rgba(255,255,255,0.1),transparent_60%)]\r\n    \"\r\n                />\r\n\r\n                {/* Text */}\r\n                <span\r\n                  className=\"\r\n       relative z-10\r\n      text-sm font-medium text-white\r\n      tracking-tight capitalize\r\n      whitespace-nowrap\r\n    \"\r\n                >\r\n                  Play Store\r\n                </span>\r\n\r\n                {/* Icon wrapper */}\r\n                <div className=\"relative z-10 w-[18.9px] h-[22.2px] flex items-center justify-center\">\r\n                  <svg\r\n                    width=\"19\"\r\n                    height=\"19\"\r\n                    viewBox=\"0 0 19 19\"\r\n                    fill=\"none\"\r\n                    xmlns=\"http://www.w3.org/2000/svg\"\r\n                  >\r\n                    <g clip-path=\"url(#clip0_1180_14358)\">\r\n                      <path\r\n                        d=\"M3.67371 0.297647C3.24353 0.0196782 2.72684 -0.0643358 2.24219 0.0500679L10.7591 8.56702L13.5195 5.80665L3.67371 0.297647Z\"\r\n                        fill=\"white\"\r\n                      />\r\n                      <path\r\n                        d=\"M1.18286 0.742188C0.94531 1.058 0.808594 1.44576 0.808594 1.85595V17.0271C0.808594 17.4373 0.945347 17.825 1.18286 18.1408L9.88214 9.44155L1.18286 0.742188Z\"\r\n                        fill=\"white\"\r\n                      />\r\n                      <path\r\n                        d=\"M17.121 7.82216L14.6402 6.43408L11.6328 9.44147L14.6404 12.449L17.1214 11.0608C17.7158 10.7278 18.0707 10.1225 18.0707 9.44147C18.0707 8.76044 17.7158 8.15519 17.121 7.82216Z\"\r\n                        fill=\"white\"\r\n                      />\r\n                      <path\r\n                        d=\"M10.7586 10.3164L2.24219 18.8328C2.38182 18.8657 2.52392 18.8834 2.66602 18.8834C3.0172 18.8834 3.36716 18.7835 3.67323 18.5857L13.5191 13.0768L10.7586 10.3164Z\"\r\n                        fill=\"white\"\r\n                      />\r\n                    </g>\r\n                    <defs>\r\n                      <clipPath id=\"clip0_1180_14358\">\r\n                        <rect width=\"18.8829\" height=\"18.8829\" fill=\"white\" />\r\n                      </clipPath>\r\n                    </defs>\r\n                  </svg>\r\n                </div>\r\n              </TimelineAnimation>\r\n            </div>\r\n\r\n            <div className=\"flex xl:justify-start justify-between pt-10\">\r\n              <TimelineAnimation\r\n                animationNum={8}\r\n                timelineRef={timelineRef}\r\n                className=\"border-r border-neutral-200 xl:pr-8 pr-4\"\r\n              >\r\n                <span className=\"h-10 w-10 bg-neutral-200 grid place-items-center rounded-lg\">\r\n                  <Smartphone className=\"text-neutral-900 size-5\" />\r\n                </span>\r\n                <p className=\"text-2xl font-black mt-4\">45k+</p>\r\n                <p className=\"text-neutral-400 xl:text-md text-sm\">Downloads</p>\r\n              </TimelineAnimation>\r\n              <TimelineAnimation\r\n                animationNum={9}\r\n                timelineRef={timelineRef}\r\n                className=\"border-r border-neutral-200 xl:px-8 px-4\"\r\n              >\r\n                <span className=\"h-10 w-10 bg-neutral-200 grid place-items-center rounded-lg\">\r\n                  <svg\r\n                    width=\"19\"\r\n                    height=\"19\"\r\n                    viewBox=\"0 0 19 19\"\r\n                    className=\"fill-black\"\r\n                    fill=\"none\"\r\n                    xmlns=\"http://www.w3.org/2000/svg\"\r\n                  >\r\n                    <g clip-path=\"url(#clip0_1180_14358)\">\r\n                      <path d=\"M3.67371 0.297647C3.24353 0.0196782 2.72684 -0.0643358 2.24219 0.0500679L10.7591 8.56702L13.5195 5.80665L3.67371 0.297647Z\" />\r\n                      <path d=\"M1.18286 0.742188C0.94531 1.058 0.808594 1.44576 0.808594 1.85595V17.0271C0.808594 17.4373 0.945347 17.825 1.18286 18.1408L9.88214 9.44155L1.18286 0.742188Z\" />\r\n                      <path d=\"M17.121 7.82216L14.6402 6.43408L11.6328 9.44147L14.6404 12.449L17.1214 11.0608C17.7158 10.7278 18.0707 10.1225 18.0707 9.44147C18.0707 8.76044 17.7158 8.15519 17.121 7.82216Z\" />\r\n                      <path d=\"M10.7586 10.3164L2.24219 18.8328C2.38182 18.8657 2.52392 18.8834 2.66602 18.8834C3.0172 18.8834 3.36716 18.7835 3.67323 18.5857L13.5191 13.0768L10.7586 10.3164Z\" />\r\n                    </g>\r\n                    <defs>\r\n                      <clipPath id=\"clip0_1180_14358\">\r\n                        <rect width=\"18.8829\" height=\"18.8829\" fill=\"white\" />\r\n                      </clipPath>\r\n                    </defs>\r\n                  </svg>\r\n                </span>\r\n                <p className=\"text-2xl font-black mt-4\">20k+</p>\r\n                <p className=\"text-neutral-400 xl:text-md text-sm\">\r\n                  Active Users\r\n                </p>\r\n              </TimelineAnimation>\r\n              <TimelineAnimation\r\n                animationNum={10}\r\n                timelineRef={timelineRef}\r\n                className=\"xl:pl-8 pl-4\"\r\n              >\r\n                <span className=\"h-10 w-10 bg-neutral-200 grid place-items-center rounded-lg\">\r\n                  <svg\r\n                    width=\"17\"\r\n                    height=\"15\"\r\n                    viewBox=\"0 0 17 15\"\r\n                    className=\"fill-neutral-900\"\r\n                    fill=\"none\"\r\n                    xmlns=\"http://www.w3.org/2000/svg\"\r\n                  >\r\n                    <path d=\"M8.07078 1.29021L8.52165 0.510952C8.79996 0.0239097 9.42056 -0.140282 9.9076 0.138028C10.3946 0.416339 10.5588 1.03693 10.2805 1.52398L5.93622 9.04374H9.07827C10.0969 9.04374 10.6674 10.2405 10.2249 11.0698H1.01302C0.450871 11.0698 0 10.6189 0 10.0568C0 9.49461 0.450871 9.04374 1.01302 9.04374H3.59569L6.90193 3.31349L5.86941 1.52121C5.5911 1.03417 5.75529 0.419104 6.24233 0.135262C6.72937 -0.143048 7.34444 0.0211446 7.62828 0.508187L8.07078 1.29021ZM4.16344 12.1134L3.18936 13.8027C2.91105 14.2898 2.29046 14.454 1.80341 14.1757C1.31637 13.8974 1.15218 13.2768 1.43049 12.7897L2.15407 11.5373C2.97226 11.2841 3.63739 11.4789 4.16344 12.1134ZM12.5515 9.04934H15.187C15.7491 9.04934 16.2 9.50021 16.2 10.0624C16.2 10.6245 15.7491 11.0754 15.187 11.0754H13.7231L14.7111 12.7897C14.9894 13.2768 14.8252 13.8918 14.3381 14.1757C13.8511 14.454 13.236 14.2898 12.9522 13.8027C11.2879 10.9167 10.0384 8.75706 9.20899 7.31827C8.36015 5.85438 8.96685 4.38495 9.56524 3.88677C10.2304 5.02782 11.224 6.75052 12.5515 9.04934Z\" />\r\n                  </svg>\r\n                </span>\r\n                <p className=\"text-2xl font-black mt-4\">25k+</p>\r\n                <p className=\"text-neutral-400 xl:text-md text-sm\">\r\n                  Active Users\r\n                </p>\r\n              </TimelineAnimation>\r\n            </div>\r\n          </div>\r\n\r\n          {/* Right Side: Content */}\r\n          <TimelineAnimation\r\n            animationNum={4}\r\n            timelineRef={timelineRef}\r\n            className=\"flex-1 relative bg-white 2xl:h-172 xl:h-152 h-128 lg:mt-0 mt-10 flex items-end justify-center overflow-hidden shadow-sm\"\r\n          >\r\n            <TimelineAnimation\r\n              animationNum={5}\r\n              as=\"img\"\r\n              timelineRef={timelineRef}\r\n              // @ts-ignore\r\n              src={PhoneMockup?.src}\r\n              alt=\"phoneMockUP\"\r\n              className=\"2xl:w-120 md:w-105 w-96 relative z-4\"\r\n            />\r\n            <TimelineAnimation\r\n              animationNum={6}\r\n              timelineRef={timelineRef}\r\n              className=\"absolute inset-0 bg-[radial-gradient(#e5e7eb_1px,transparent_1px)] bg-size-[14px_14px] mask-[radial-gradient(ellipse_80%_50%_at_50%_0%,#000_70%,transparent_110%)]\"\r\n            />\r\n          </TimelineAnimation>\r\n        </div>\r\n      </div>\r\n    </section>\r\n  )\r\n}\r\n",
      "type": "registry:block"
    },
    {
      "path": "./components/ui/motion-drawer.tsx",
      "content": "'use client';\nimport { cn } from '@/lib/utils';\nimport { Menu, X } from 'lucide-react';\nimport { AnimatePresence, motion } from 'motion/react';\nimport type React from 'react';\nimport { useState } from 'react';\n\nexport type SideMenuDirection = 'left' | 'right';\nexport type ButtonOpeningVariants = 'push' | 'merge' | 'stay';\n\ninterface SideMenuProps {\n  // Appearance\n  overlayColor?: string;\n  width?: number;\n  direction?: SideMenuDirection;\n  backgroundColor?: string;\n\n  // Content\n  children: React.ReactNode;\n\n  // Behavior\n  isOpen?: boolean;\n  onToggle?: (isOpen: boolean) => void;\n  showToggleButton?: boolean;\n  toggleButtonText?: {\n    open: string;\n    close: string;\n  };\n\n  // Styling\n  btnClassName?: string;\n  className?: string;\n  contentClassName?: string;\n  clsBtnClassName?: string;\n  overlayClassName?: string;\n\n  // Animation\n  animationConfig?: {\n    type?: 'spring' | 'tween';\n    damping?: number;\n    stiffness?: number;\n    duration?: number;\n  };\n\n  // Drag behavior\n  enableDrag?: boolean;\n  dragThreshold?: number;\n\n  // New prop\n  buttonOpeningVariants?: ButtonOpeningVariants;\n}\n\nconst getOpenButtonVariants = (\n  direction: SideMenuDirection,\n  width: number,\n  type: ButtonOpeningVariants\n) => {\n  switch (type) {\n    case 'merge':\n      return direction === 'left'\n        ? {\n            closed: { x: 0, opacity: 1, scale: 1, borderRadius: '0.5rem' },\n            open: {\n              x: width - 68,\n              opacity: 0,\n              scale: 1,\n              borderRadius: '0rem',\n            },\n          }\n        : {\n            closed: { x: 0, opacity: 1, scale: 1, borderRadius: '0.5rem' },\n            open: {\n              x: 68 - width,\n              opacity: 0,\n              scale: 1,\n              borderRadius: '0rem',\n            },\n          };\n\n    case 'push':\n      return direction === 'left'\n        ? { closed: { x: 0, opacity: 1 }, open: { x: width + 20, opacity: 0 } }\n        : {\n            closed: { x: 0, opacity: 1 },\n            open: { x: -(width + 20), opacity: 0 },\n          };\n\n    case 'stay':\n    default:\n      return {\n        closed: { x: 0, opacity: 1 },\n        open: { x: 0, opacity: 0 },\n      };\n  }\n};\n\nconst MotionDrawer: React.FC<SideMenuProps> = ({\n  // Appearance\n  overlayColor = 'rgba(0, 0, 0, 0.3)',\n  width = 250,\n  direction = 'left',\n  backgroundColor = '#ffffff',\n\n  // Content\n  children,\n\n  // Behavior\n  isOpen: controlledIsOpen,\n  onToggle,\n  showToggleButton = true,\n\n  // Styling\n  btnClassName = '',\n  clsBtnClassName = '',\n  className = '',\n  contentClassName = '',\n  overlayClassName = '',\n\n  // Animation\n  animationConfig = {\n    type: 'spring',\n    damping: 25,\n    stiffness: 120,\n  },\n\n  // Drag behavior\n  enableDrag = true,\n  dragThreshold = 0.3,\n\n  buttonOpeningVariants = 'merge',\n}) => {\n  const [internalIsOpen, setInternalIsOpen] = useState<boolean>(false);\n\n  const isOpen = controlledIsOpen !== undefined ? controlledIsOpen : internalIsOpen;\n  const setIsOpen = (value: boolean) => {\n    if (controlledIsOpen === undefined) {\n      setInternalIsOpen(value);\n    }\n    onToggle?.(value);\n  };\n\n  const getDrawerVariants = () => {\n    if (direction === 'left') {\n      return {\n        closed: { x: -width },\n        open: { x: 0 },\n      };\n    } else {\n      return {\n        closed: { x: width },\n        open: { x: 0 },\n      };\n    }\n  };\n\n  const buttonVariants = getOpenButtonVariants(direction, width, buttonOpeningVariants);\n\n  const getDragConstraints = () => {\n    if (direction === 'left') {\n      return { left: -width, right: 0 };\n    } else {\n      return { left: 0, right: width };\n    }\n  };\n\n  const handleDragEnd = (_event: any, info: any) => {\n    if (!enableDrag) return;\n\n    const threshold = width * dragThreshold;\n    const dragDistance = Math.abs(info.offset.x);\n\n    if (direction === 'left') {\n      const isDraggingLeft = info.offset.x < 0;\n      if (isDraggingLeft && dragDistance > threshold && isOpen) {\n        setIsOpen(false);\n      } else if (!isDraggingLeft && dragDistance > threshold && !isOpen) {\n        setIsOpen(true);\n      }\n    } else {\n      const isDraggingRight = info.offset.x > 0;\n      if (isDraggingRight && dragDistance > threshold && isOpen) {\n        setIsOpen(false);\n      } else if (!isDraggingRight && dragDistance > threshold && !isOpen) {\n        setIsOpen(true);\n      }\n    }\n  };\n\n  const drawerPositionClasses = direction === 'left' ? 'left-0' : 'right-0';\n  const openButtonPositionClasses = direction === 'left' ? 'top-4 left-4' : 'top-4 right-4';\n\n  return (\n    <>\n      {showToggleButton && (\n        <motion.button\n          className={cn(\n            `fixed z-99 text-primary cursor-pointer ${openButtonPositionClasses}`,\n            btnClassName\n          )}\n          onClick={() => setIsOpen(true)}\n          variants={buttonVariants}\n          animate={isOpen ? 'open' : 'closed'}\n          transition={animationConfig}\n          whileHover={{ scale: 1.05 }}\n          whileTap={{ scale: 0.95 }}\n        >\n          <Menu />\n          {/* Open */}\n        </motion.button>\n      )}\n\n      <AnimatePresence>\n        {isOpen && (\n          <div className={`fixed w-full h-full top-0 left-0 z-9999 ${className}`}>\n            {/* Overlay */}\n            <motion.div\n              className={`absolute w-full h-full top-0 left-0 ${overlayClassName}`}\n              style={{ backgroundColor: overlayColor }}\n              onClick={() => setIsOpen(false)}\n              initial={{ opacity: 0 }}\n              animate={{ opacity: 1 }}\n              exit={{ opacity: 0 }}\n              transition={{ duration: 0.3 }}\n            />\n\n            {/* Drawer */}\n            <motion.div\n              className={`absolute h-full shadow-[8px_1px_21px_0px_rgba(17,17,26,0.1)] ${drawerPositionClasses} ${contentClassName}`}\n              style={{\n                backgroundColor,\n                width: `${width}px`,\n                padding: '60px 30px 30px 30px',\n                boxSizing: 'border-box',\n              }}\n              drag={enableDrag ? 'x' : false}\n              dragElastic={0.1}\n              dragConstraints={getDragConstraints()}\n              dragMomentum={false}\n              onDragEnd={handleDragEnd}\n              variants={getDrawerVariants()}\n              initial='closed'\n              animate='open'\n              exit='closed'\n              transition={animationConfig}\n            >\n              {/* Close Button */}\n              {showToggleButton && (\n                <motion.button\n                  className={cn(\n                    'absolute top-2 right-8 p-2 text-black cursor-pointer',\n                    clsBtnClassName\n                  )}\n                  onClick={() => setIsOpen(false)}\n                  whileHover={{ scale: 1.1 }}\n                  whileTap={{ scale: 0.9 }}\n                  transition={{ duration: 0.2 }}\n                >\n                  <X size={20} /> {/* Close */}\n                </motion.button>\n              )}\n\n              {/* Content */}\n              <div className='h-full overflow-y-auto'>{children}</div>\n            </motion.div>\n          </div>\n        )}\n      </AnimatePresence>\n    </>\n  );\n};\n\nexport default MotionDrawer;\n",
      "type": "registry:component"
    },
    {
      "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"
    },
    {
      "path": "./hooks/use-media-query.tsx",
      "content": "'use client';\nimport { useEffect, useState } from 'react';\n\nexport function useMediaQuery(query: string) {\n  const [value, setValue] = useState(false);\n\n  useEffect(() => {\n    function onChange(event: MediaQueryListEvent) {\n      setValue(event.matches);\n    }\n\n    const result = matchMedia(query);\n    result.addEventListener('change', onChange);\n    setValue(result.matches);\n\n    return () => result.removeEventListener('change', onChange);\n  }, [query]);\n\n  return value;\n}\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:block"
}