{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "hero-ai-value-proposition",
  "dependencies": [
    "motion"
  ],
  "devDependencies": [],
  "registryDependencies": [],
  "files": [
    {
      "path": "../../packages/blocks/src/hero-section/hero-ai-value-proposition.tsx",
      "content": "'use client'\r\nimport React, { useRef } from 'react'\r\nimport {\r\n  Layout,\r\n  Monitor,\r\n  Smartphone,\r\n  PenTool,\r\n  MousePointer2,\r\n} from 'lucide-react'\r\nimport { TimelineAnimation } from '@/components/ui/timeline-animation'\r\n\r\nexport const HeroAiValueProposition = () => {\r\n  const timelineRef = useRef<HTMLDivElement>(null)\r\n\r\n  return (\r\n    <section\r\n      className=\"relative min-h-screen bg-[#f9f9f9] text-[#111] overflow-hidden flex flex-col\"\r\n      ref={timelineRef}\r\n    >\r\n      {/* Header */}\r\n      <TimelineAnimation\r\n        once={true}\r\n        as=\"header\"\r\n        animationNum={1}\r\n        timelineRef={timelineRef}\r\n        className=\"relative z-10 w-full max-w-7xl mx-auto p-6 flex items-center justify-between border-x border-zinc-200\"\r\n      >\r\n        <div className=\"flex items-center gap-2\">\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 className=\"text-xl font-bold tracking-tight text-slate-900\">\r\n            UI-Layout\r\n          </span>\r\n        </div>\r\n\r\n        <button className=\"bg-white border border-neutral-100 text-neutral-500 px-4 py-2.5 rounded-full font-bold text-sm shadow-sm hover:text-black hover:border-neutral-300 transition-all cursor-pointer\">\r\n          Sign in\r\n        </button>\r\n      </TimelineAnimation>\r\n\r\n      {/* Main Hero Content */}\r\n      <div className=\"relative z-10 px-6\">\r\n        <article className=\"border-y w-full border-zinc-200\">\r\n          <div className=\"flex flex-col items-center text-center space-y-4 max-w-7xl mx-auto border-x border-zinc-200 p-8\">\r\n            <TimelineAnimation\r\n              once={true}\r\n              as=\"h1\"\r\n              animationNum={2}\r\n              timelineRef={timelineRef}\r\n              className=\"text-5xl md:text-7xl font-semibold tracking-tight leading-[1.05] text-slate-900 \"\r\n            >\r\n              AI-generated project briefs <br className=\"hidden md:block\" />{' '}\r\n              built for designers\r\n            </TimelineAnimation>\r\n            <TimelineAnimation\r\n              once={true}\r\n              as=\"p\"\r\n              animationNum={3}\r\n              timelineRef={timelineRef}\r\n              className=\"text-neutral-400 text-lg md:text-xl max-w-4xl font-medium leading-relaxed\"\r\n            >\r\n              Turn rough ideas into clear, structured project briefs in seconds.\r\n              Let AI handle the planning so you can focus on design, creativity,\r\n              and execution.\r\n            </TimelineAnimation>\r\n          </div>\r\n        </article>\r\n        <div className=\"border-b border-zinc-200\">\r\n          <div className=\"max-w-7xl mx-auto border-x border-zinc-200 flex flex-col justify-center gap-5 p-10\">\r\n            <TimelineAnimation\r\n              once={true}\r\n              as=\"button\"\r\n              animationNum={4}\r\n              timelineRef={timelineRef}\r\n              className=\"bg-neutral-900 cursor-pointer text-white px-10 py-4 rounded-full font-bold text-base shadow-2xl hover:bg-black transition-all w-fit mx-auto border-4 border-white/80\"\r\n            >\r\n              Get started for free\r\n            </TimelineAnimation>\r\n            {/* Designer Proof */}\r\n            <div className=\"relative z-10 flex flex-col items-center gap-1\">\r\n              <TimelineAnimation\r\n                once={true}\r\n                as=\"p\"\r\n                animationNum={5}\r\n                timelineRef={timelineRef}\r\n                className=\"text-[10px] font-bold text-neutral-400 uppercase tracking-[0.2em]\"\r\n              >\r\n                Join 80,000+ designers\r\n              </TimelineAnimation>\r\n              <div className=\"flex items-center gap-1\">\r\n                <div className=\"flex -space-x-3\">\r\n                  {[1, 2, 3, 4, 5].map((i) => (\r\n                    <TimelineAnimation\r\n                      once={true}\r\n                      key={i}\r\n                      animationNum={6}\r\n                      timelineRef={timelineRef}\r\n                    >\r\n                      <img\r\n                        src={`https://picsum.photos/seed/bb-designer-${i}/100`}\r\n                        className=\"w-10 h-10 rounded-full border-2 border-[#f9f9f9] object-cover shadow-sm\"\r\n                        alt=\"\"\r\n                      />\r\n                    </TimelineAnimation>\r\n                  ))}\r\n                </div>\r\n                <TimelineAnimation\r\n                  once={true}\r\n                  as=\"div\"\r\n                  animationNum={7}\r\n                  timelineRef={timelineRef}\r\n                  className=\"bg-blue-600 text-white text-xs font-semibold px-3 py-1.5 rounded-full shadow-lg\"\r\n                >\r\n                  1,234+\r\n                </TimelineAnimation>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n      {/* Mockup Preview Area */}\r\n      <div className=\"relative z-10 w-full border-b border-zinc-200 mb-10\">\r\n        <div className=\"max-w-7xl mx-auto border-x border-zinc-200\">\r\n          <TimelineAnimation\r\n            once={true}\r\n            animationNum={8}\r\n            timelineRef={timelineRef}\r\n            className=\"relative bg-white backdrop-blur-xl rounded-4xl shadow-[0_40px_100px_-20px_rgba(0,0,0,0.08)] border border-zinc-200 p-2\"\r\n          >\r\n            <div className=\"bg-linear-to-b from-neutral-200 from-50% to-blue-400/80 rounded-4xl pt-32\">\r\n              {/* Background decorative glows inside the frame */}\r\n              <div className=\"absolute top-0 right-0 w-[300px] h-[300px] bg-pink-100 rounded-full blur-[100px] opacity-40\"></div>\r\n              <div className=\"absolute bottom-0 left-0 w-[300px] h-[300px] bg-orange-100 rounded-full blur-[100px] opacity-40\"></div>\r\n\r\n              {/* Internal Mockup Shell */}\r\n              <TimelineAnimation\r\n                once={true}\r\n                animationNum={9}\r\n                timelineRef={timelineRef}\r\n                className=\"relative z-10 min-h-[500px] max-w-5xl mx-auto\"\r\n              >\r\n                <TimelineAnimation\r\n                  once={true}\r\n                  animationNum={11}\r\n                  timelineRef={timelineRef}\r\n                  className=\"absolute -top-8 left-16 -z-2 bg-neutral-100 border border-neutral-100/50 w-[85%] h-full rounded-t-4xl\"\r\n                />\r\n                <TimelineAnimation\r\n                  once={true}\r\n                  animationNum={12}\r\n                  timelineRef={timelineRef}\r\n                  className=\"absolute -top-4 left-5 -z-2 bg-neutral-50 border border-neutral-100/50 w-[95%] h-full rounded-t-4xl\"\r\n                />\r\n                {/* Internal Layout */}\r\n                <TimelineAnimation\r\n                  once={true}\r\n                  animationNum={10}\r\n                  timelineRef={timelineRef}\r\n                  className=\"flex flex-col gap-12 bg-white backdrop-blur-md border border-neutral-100/50 rounded-t-4xl p-12\"\r\n                >\r\n                  {/* Breadcrumbs & Profile */}\r\n                  <div className=\"flex items-center justify-between\">\r\n                    <div className=\"flex items-center gap-4\">\r\n                      <div className=\"w-3 h-3 bg-emerald-500 rounded-full\"></div>\r\n                      <div className=\"flex items-center gap-2 text-sm\">\r\n                        <span className=\"text-neutral-400 font-medium\">\r\n                          My briefs /\r\n                        </span>\r\n                        <span className=\"font-bold text-slate-800\">\r\n                          UI-Layout Studio 2026\r\n                        </span>\r\n                      </div>\r\n                    </div>\r\n                    <div className=\"flex items-center gap-4\">\r\n                      <div className=\"w-16 h-4 bg-neutral-50 rounded-full\"></div>\r\n                      <img\r\n                        src=\"https://picsum.photos/seed/bb-avatar/100\"\r\n                        className=\"w-10 h-10 rounded-full border-2 border-white shadow-sm\"\r\n                        alt=\"User\"\r\n                      />\r\n                    </div>\r\n                  </div>\r\n\r\n                  <div className=\"grid grid-cols-1 lg:grid-cols-12 gap-12\">\r\n                    {/* Left: Content Section */}\r\n                    <div className=\"lg:col-span-7 space-y-12\">\r\n                      <div className=\"space-y-4\">\r\n                        <p className=\"text-xs font-bold text-slate-400 uppercase tracking-widest\">\r\n                          Introduction\r\n                        </p>\r\n                        <div className=\"space-y-3\">\r\n                          <div className=\"w-full h-2.5 bg-neutral-50 rounded-full\"></div>\r\n                          <div className=\"w-[95%] h-2.5 bg-neutral-50 rounded-full\"></div>\r\n                          <div className=\"w-[90%] h-2.5 bg-neutral-50 rounded-full\"></div>\r\n                        </div>\r\n                      </div>\r\n\r\n                      <TimelineAnimation\r\n                        once={true}\r\n                        animationNum={17}\r\n                        timelineRef={timelineRef}\r\n                        className=\"space-y-4 pt-4 bg-neutral-100 p-4 border\"\r\n                      >\r\n                        <p className=\"text-xs font-bold text-slate-400 uppercase tracking-widest\">\r\n                          Goal\r\n                        </p>\r\n                        <div className=\"relative h-1 bg-neutral-300 rounded-full mt-6\">\r\n                          <div className=\"absolute top-0 left-0 h-full w-[45%] bg-blue-500 rounded-full\"></div>\r\n                        </div>\r\n                        <div className=\"space-y-3 pt-4\">\r\n                          <div className=\"w-[85%] h-2.5 bg-neutral-200 rounded-full\"></div>\r\n                          <div className=\"w-[80%] h-2.5 bg-neutral-200 rounded-full\"></div>\r\n                        </div>\r\n                      </TimelineAnimation>\r\n                    </div>\r\n\r\n                    {/* Right: Choice Panel */}\r\n                    <div className=\"lg:col-span-5\">\r\n                      <TimelineAnimation\r\n                        once={true}\r\n                        animationNum={13}\r\n                        timelineRef={timelineRef}\r\n                        className=\"bg-[#fcfcfc] p-8 rounded-4xl border border-neutral-100 shadow-sm\"\r\n                      >\r\n                        <p className=\"text-[11px] font-bold text-slate-900 mb-8 uppercase tracking-widest\">\r\n                          What type of project?\r\n                        </p>\r\n\r\n                        <div className=\"grid grid-cols-2 gap-2\">\r\n                          <TimelineAnimation\r\n                            once={true}\r\n                            animationNum={14}\r\n                            timelineRef={timelineRef}\r\n                            className=\"bg-white p-5 rounded-2xl border-2 border-blue-500 flex flex-col gap-4 relative group cursor-pointer transition-all shadow-2xl\"\r\n                          >\r\n                            <div className=\"w-10 h-10 bg-blue-50 text-blue-500 rounded-xl flex items-center justify-center\">\r\n                              <Monitor size={20} />\r\n                            </div>\r\n                            <p className=\"text-[11px] font-bold text-slate-900\">\r\n                              Web app\r\n                            </p>\r\n                            <div className=\"absolute top-3 right-3 opacity-100 scale-100 transition-all\">\r\n                              <MousePointer2\r\n                                className=\"text-slate-900 fill-slate-900\"\r\n                                size={20}\r\n                              />\r\n                            </div>\r\n                          </TimelineAnimation>\r\n                          <TimelineAnimation\r\n                            once={true}\r\n                            animationNum={15}\r\n                            timelineRef={timelineRef}\r\n                            className=\"bg-white/80 p-5 rounded-2xl border border-neutral-100 flex flex-col gap-4 opacity-80 grayscale hover:grayscale-0 hover:opacity-100 transition-all cursor-pointer\"\r\n                          >\r\n                            <div className=\"w-10 h-10 bg-neutral-100 text-neutral-400 rounded-xl flex items-center justify-center\">\r\n                              <PenTool size={20} />\r\n                            </div>\r\n                            <p className=\"text-[11px] font-bold text-slate-900\">\r\n                              UX/UI Design\r\n                            </p>\r\n                          </TimelineAnimation>\r\n                          <TimelineAnimation\r\n                            once={true}\r\n                            animationNum={16}\r\n                            timelineRef={timelineRef}\r\n                            className=\"bg-white/80 p-5 rounded-2xl border border-neutral-100 flex flex-col gap-4 opacity-80 grayscale hover:grayscale-0 hover:opacity-100 transition-all cursor-pointer\"\r\n                          >\r\n                            <div className=\"w-10 h-10 bg-neutral-100 text-neutral-400 rounded-xl flex items-center justify-center\">\r\n                              <Smartphone size={20} />\r\n                            </div>\r\n                            <p className=\"text-[11px] font-bold text-slate-900\">\r\n                              Mobile App\r\n                            </p>\r\n                          </TimelineAnimation>\r\n                          <TimelineAnimation\r\n                            once={true}\r\n                            animationNum={17}\r\n                            timelineRef={timelineRef}\r\n                            className=\"bg-white/80 p-5 rounded-2xl border border-neutral-100 flex flex-col gap-4 opacity-80 grayscale hover:grayscale-0 hover:opacity-100 transition-all cursor-pointer\"\r\n                          >\r\n                            <div className=\"w-10 h-10 bg-neutral-100 text-neutral-400 rounded-xl flex items-center justify-center\">\r\n                              <Layout size={20} />\r\n                            </div>\r\n                            <p className=\"text-[11px] font-bold text-slate-900\">\r\n                              Branding & logo\r\n                            </p>\r\n                          </TimelineAnimation>\r\n                        </div>\r\n                      </TimelineAnimation>\r\n                    </div>\r\n                  </div>\r\n                </TimelineAnimation>\r\n              </TimelineAnimation>\r\n            </div>\r\n          </TimelineAnimation>\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"
}