{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "faq-founder",
  "dependencies": [
    "motion"
  ],
  "devDependencies": [],
  "registryDependencies": [],
  "files": [
    {
      "path": "../../packages/blocks/src/faq-section/faq-founder.tsx",
      "content": "'use client'\r\n\r\nimport { useId, useRef, useState } from 'react'\r\nimport { motion, AnimatePresence } from 'motion/react'\r\nimport { Minus, Plus } from 'lucide-react'\r\nimport { TimelineAnimation } from '@/components/ui/timeline-animation'\r\n\r\ntype FAQ = {\r\n  question: string\r\n  answer: string\r\n}\r\ntype FAQCardProps = {\r\n  question: string\r\n  answer: string\r\n  animationNum: number\r\n  timelineRef: React.RefObject<HTMLDivElement>\r\n}\r\n\r\nexport const FaqCard = ({\r\n  question,\r\n  answer,\r\n  animationNum,\r\n  timelineRef,\r\n}: FAQCardProps) => {\r\n  const [isOpen, setIsOpen] = useState(false)\r\n  const contentId = useId()\r\n\r\n  return (\r\n    <TimelineAnimation\r\n      animationNum={animationNum}\r\n      timelineRef={timelineRef}\r\n      className=\"rounded-2xl bg-neutral-100 border dark:border-neutral-700 border-neutral-200 dark:bg-neutral-900\"\r\n    >\r\n      <button\r\n        type=\"button\"\r\n        onClick={() => setIsOpen((v) => !v)}\r\n        aria-expanded={isOpen}\r\n        aria-controls={contentId}\r\n        className=\"w-full text-left p-2 sm:p-4 flex justify-between items-center gap-4 cursor-pointer\"\r\n      >\r\n        <span className=\"text-lg sm:text-xl text-primary font-spaceGrotesk font-medium\">\r\n          {question}\r\n        </span>\r\n\r\n        <span className=\"relative w-10 h-10 dark:bg-neutral-700 bg-white grid place-items-center rounded-lg shadow-sm\">\r\n          {!isOpen && <Plus size={20} />}\r\n          {isOpen && <Minus size={20} />}\r\n        </span>\r\n      </button>\r\n\r\n      <motion.div\r\n        id={contentId}\r\n        role=\"region\"\r\n        initial={false}\r\n        animate={{ gridTemplateRows: isOpen ? '1fr' : '0fr' }}\r\n        transition={{ duration: 0.2, ease: 'easeOut' }}\r\n        className=\"grid overflow-hidden px-2 sm:px-4\"\r\n      >\r\n        <div className=\"overflow-hidden\">\r\n          <p className=\"pb-6 text-sm sm:text-base text-neutral-600 dark:text-neutral-300 leading-relaxed\">\r\n            {answer}\r\n          </p>\r\n        </div>\r\n      </motion.div>\r\n    </TimelineAnimation>\r\n  )\r\n}\r\nexport const FaqFounder = () => {\r\n  const timelineRef = useRef<HTMLDivElement>(null)\r\n  const faqs: FAQ[] = [\r\n    {\r\n      question: 'What problem does this product solve?',\r\n      answer:\r\n        'This product removes repetitive manual work from modern web projects. Instead of rebuilding common UI patterns or logic from scratch, you get production-ready components and systems that save hours on every build.',\r\n    },\r\n    {\r\n      question: 'Who is this product best suited for?',\r\n      answer:\r\n        'It is designed for developers, founders, and small teams who care about speed, consistency, and maintainability. If you are shipping real products—not demos—this is built for you.',\r\n    },\r\n    {\r\n      question: 'Can I customize the components for my own design system?',\r\n      answer:\r\n        'Yes. All components are fully customizable. You can change layout, spacing, colors, typography, and behavior without fighting the underlying structure.',\r\n    },\r\n    {\r\n      question: 'Does this work well with modern frameworks like Next.js?',\r\n      answer:\r\n        'Absolutely. The components are built with modern Next.js patterns in mind, including the App Router, server components compatibility, and Tailwind CSS best practices.',\r\n    },\r\n    {\r\n      question: 'Is this suitable for production use?',\r\n      answer:\r\n        'Yes. The focus is on performance, accessibility, and clean architecture. These components are meant to be shipped to real users, not just used as visual placeholders.',\r\n    },\r\n    {\r\n      question: 'How do updates and improvements work?',\r\n      answer:\r\n        'New components, improvements, and fixes are added continuously. You can pull updates as needed and adopt only what makes sense for your product.',\r\n    },\r\n  ]\r\n\r\n  return (\r\n    <section\r\n      className=\"py-16 px-4 md:px-8 lg:px-16 dark:bg-neutral-800 bg-neutral-50 min-h-screen\"\r\n      ref={timelineRef}\r\n    >\r\n      <div className=\"max-w-5xl mx-auto\">\r\n        <TimelineAnimation\r\n          timelineRef={timelineRef}\r\n          animationNum={0}\r\n          as=\"h1\"\r\n          className=\"text-2xl sm:text-3xl font-medium text-neutral-900 dark:text-white mb-10 text-center\"\r\n        >\r\n          Frequently Asked Questions\r\n        </TimelineAnimation>\r\n\r\n        <div className=\"md:grid grid-cols-12  gap-8 md:gap-10\">\r\n          {/* Profile card */}\r\n          <TimelineAnimation\r\n            timelineRef={timelineRef}\r\n            animationNum={1}\r\n            className=\"col-span-5 h-fit p-3 sm:p-4 lg:p-5 rounded-2xl border border-neutral-200 dark:border-neutral-700 bg-white dark:bg-neutral-900\"\r\n          >\r\n            <div className=\"flex gap-3 items-center\">\r\n              <div className=\"size-10 sm:size-16 rounded-xl overflow-hidden bg-neutral-300 dark:bg-neutral-700\">\r\n                <img\r\n                  src=\"/naymur.png\"\r\n                  alt=\"profile\"\r\n                  className=\"w-full h-full object-cover\"\r\n                />\r\n              </div>\r\n\r\n              <div>\r\n                <h6 className=\"text-lg sm:text-xl font-semibold text-neutral-800 dark:text-white\">\r\n                  Naymur Rahman\r\n                </h6>\r\n                <p className=\"text-neutral-500 font-medium dark:text-neutral-400\">\r\n                  Founder & CEO\r\n                </p>\r\n              </div>\r\n            </div>\r\n\r\n            <p className=\"my-4 sm:my-5 text-base sm:text-lg text-neutral-700 dark:text-neutral-300\">\r\n              “Something that represents visiting your profile to discuss about\r\n              you.”\r\n            </p>\r\n\r\n            <button\r\n              onClick={() =>\r\n                window.open(\r\n                  'https://www.linkedin.com/in/naymur-rahman/',\r\n                  '_blank'\r\n                )\r\n              }\r\n              className=\"inline-flex cursor-pointer items-center gap-2 p-3 bg-blue-600 hover:bg-blue-700 text-white font-semibold rounded-xl transition\"\r\n            >\r\n              <svg\r\n                preserveAspectRatio=\"xMidYMid\"\r\n                viewBox=\"0 0 256 256\"\r\n                className=\"w-6\"\r\n              >\r\n                <path\r\n                  d=\"M218.123 218.127h-37.931v-59.403c0-14.165-.253-32.4-19.728-32.4-19.756 0-22.779 15.434-22.779 31.369v60.43h-37.93V95.967h36.413v16.694h.51a39.907 39.907 0 0 1 35.928-19.733c38.445 0 45.533 25.288 45.533 58.186l-.016 67.013ZM56.955 79.27c-12.157.002-22.014-9.852-22.016-22.009-.002-12.157 9.851-22.014 22.008-22.016 12.157-.003 22.014 9.851 22.016 22.008A22.013 22.013 0 0 1 56.955 79.27m18.966 138.858H37.95V95.967h37.97v122.16ZM237.033.018H18.89C8.58-.098.125 8.161-.001 18.471v219.053c.122 10.315 8.576 18.582 18.89 18.474h218.144c10.336.128 18.823-8.139 18.966-18.474V18.454c-.147-10.33-8.635-18.588-18.966-18.453\"\r\n                  fill=\"#ffffff\"\r\n                />\r\n              </svg>\r\n              Connect on LinkedIn\r\n            </button>\r\n          </TimelineAnimation>\r\n\r\n          {/* FAQs */}\r\n          <div className=\"col-span-7 space-y-4\">\r\n            {faqs.map((faq, i) => (\r\n              <FaqCard\r\n                key={i}\r\n                {...faq}\r\n                animationNum={i + 2}\r\n                //@ts-ignore\r\n                timelineRef={timelineRef}\r\n              />\r\n            ))}\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"
}