{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "about-whyus",
  "dependencies": [
    "motion"
  ],
  "devDependencies": [],
  "registryDependencies": [],
  "files": [
    {
      "path": "../../packages/blocks/src/about-section/about-whyus.tsx",
      "content": "'use client'\r\nimport React from 'react'\r\nimport { Star, Award, Target, Zap, Shield } from 'lucide-react'\r\n\r\nexport const AboutWhyUs = () => {\r\n  return (\r\n    <section className=\"py-32 px-6 bg-slate-50 relative font-manrope min-h-screen\">\r\n      <div className=\"absolute bottom-0 left-0 right-0 top-0 bg-[repeating-linear-gradient(45deg,#efefef_0px_1px,transparent_1px_8px)] mask-[radial-gradient(ellipse_80%_50%_at_50%_0%,#000_70%,transparent_110%)]\"></div>\r\n\r\n      <div className=\"max-w-7xl mx-auto grid grid-cols-1 lg:grid-cols-12 gap-20 relative z-10\">\r\n        <div className=\"lg:col-span-4 space-y-6\">\r\n          <div className=\"space-y-6\">\r\n            <h2 className=\"text-7xl font-bold text-slate-900 tracking-tighter\">\r\n              Why us\r\n            </h2>\r\n            <ul className=\"space-y-4 grid grid-cols-2 gap-2 items-center\">\r\n              <li className=\"flex items-center gap-3 text-slate-500 font-medium\">\r\n                <Award className=\"size-4 text-slate-900\" /> Experience\r\n              </li>\r\n              <li className=\"flex items-center gap-3 text-slate-500 font-medium\">\r\n                <Target className=\"size-4 text-slate-900\" /> Consistency\r\n              </li>\r\n              <li className=\"flex items-center gap-3 text-slate-500 font-medium\">\r\n                <Zap className=\"size-4 text-slate-900\" /> Quality\r\n              </li>\r\n              <li className=\"flex items-center gap-3 text-slate-500 font-medium\">\r\n                <Shield className=\"size-4 text-slate-900\" /> Dedication\r\n              </li>\r\n            </ul>\r\n          </div>\r\n\r\n          <div className=\"space-y-6\">\r\n            <div className=\"flex gap-1 text-orange-500\">\r\n              {Array.from({ length: 5 }).map((_, i) => (\r\n                <Star key={i} className=\"size-4 fill-current\" />\r\n              ))}\r\n              <span className=\"text-xs font-bold text-slate-900 ml-2\">\r\n                5.0 / 5\r\n              </span>\r\n            </div>\r\n            <p className=\"text-slate-600 text-pretty italic text-lg leading-relaxed\">\r\n              \"We asked Naymur to redesign our brand and website from scratch,\r\n              and they absolutely nailed it.\"\r\n            </p>\r\n            <div>\r\n              <p className=\"font-bold text-slate-900\">Sarah Mitchell</p>\r\n              <p className=\"text-sm text-slate-400\">\r\n                Marketing Director, Lunoa\r\n              </p>\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n        <div className=\"lg:col-span-8 flex flex-col gap-12\">\r\n          <div className=\"max-w-2xl ml-auto text-right md:text-left\">\r\n            <h3 className=\"text-3xl font-medium text-slate-900 leading-tight text-pretty\">\r\n              We design and build tailored digital experiences that not only\r\n              elevate your brand visually but also deliver measurable results\r\n              that support long-term business growth.\r\n            </h3>\r\n          </div>\r\n\r\n          <div className=\"grid grid-cols-1 md:grid-cols-3 gap-6 h-full items-end\">\r\n            <StatColumn\r\n              number=\"105+\"\r\n              label=\"Completed projects\"\r\n              sub=\"for growing brands\"\r\n            />\r\n            <StatColumn\r\n              number=\"92%\"\r\n              label=\"Client retention rate\"\r\n              sub=\"over the past 3 years\"\r\n            />\r\n            <StatColumn\r\n              number=\"1M+\"\r\n              label=\"Users reached through\"\r\n              sub=\"websites we've designed\"\r\n            />\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </section>\r\n  )\r\n}\r\n\r\nconst StatColumn = ({ number, label, sub }: any) => (\r\n  <div className=\"bg-white p-6 rounded-3xl group relative border border-slate-100 flex flex-col justify-end gap-16 min-h-72 hover:shadow-2xl transition-all duration-500 hover:-translate-y-2\">\r\n    <span className=\"text-6xl font-bold text-slate-900  tracking-tighter\">\r\n      {number}\r\n    </span>\r\n    <div className=\"space-y-1\">\r\n      <p className=\"font-medium text-slate-900\">{label}</p>\r\n      <p className=\"text-sm text-slate-400\">{sub}</p>\r\n    </div>\r\n  </div>\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"
}