{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "about-sass",
  "dependencies": [
    "motion"
  ],
  "devDependencies": [],
  "registryDependencies": [],
  "files": [
    {
      "path": "../../packages/blocks/src/about-section/about-sass.tsx",
      "content": "'use client'\r\n\r\nimport React from 'react'\r\nimport { motion } from 'motion/react'\r\nimport { Cog, Globe, Shield } from 'lucide-react'\r\n\r\nconst features = [\r\n  {\r\n    title: 'Global Edge Network',\r\n    description:\r\n      'Deploy your code closer to your users with our distributed edge nodes in 40+ regions.',\r\n    icon: <Globe />,\r\n  },\r\n  {\r\n    title: 'Zero-Config Scaling',\r\n    description:\r\n      'Automatic scaling that handles traffic spikes without manual intervention or pre-provisioning.',\r\n    icon: <Cog />,\r\n  },\r\n  {\r\n    title: 'Military-Grade Security',\r\n    description:\r\n      'SOC2 Type II compliant infrastructure with built-in DDoS protection and encrypted secrets.',\r\n    icon: <Shield />,\r\n  },\r\n]\r\n\r\nconst integrations = [\r\n  'GitHub',\r\n  'Vercel',\r\n  'AWS',\r\n  'Slack',\r\n  'Discord',\r\n  'Stripe',\r\n  'PostHog',\r\n]\r\n\r\nexport const AboutSass = () => {\r\n  return (\r\n    <section className=\"py-24 px-6 bg-zinc-50 text-black overflow-hidden\">\r\n      <div className=\"max-w-7xl mx-auto space-y-24\">\r\n        {/* Main Brand Story */}\r\n        <div className=\"bg-white rounded-2xl p-10 md:p-16 shadow-sm border border-zinc-200/60 overflow-hidden relative\">\r\n          <img\r\n            src=\"https://images.unsplash.com/photo-1759269834694-3daf291dce44?q=80&w=627&auto=format&fit=crop\"\r\n            alt=\"\"\r\n            className=\"absolute top-0 right-0 w-full opacity-[0.03] pointer-events-none hidden lg:block\"\r\n          />\r\n\r\n          <div className=\"max-w-3xl relative z-10\">\r\n            <motion.div\r\n              initial={{ opacity: 0, y: 10 }}\r\n              whileInView={{ opacity: 1, y: 0 }}\r\n              viewport={{ once: true }}\r\n              transition={{ duration: 0.4 }}\r\n              className=\"flex items-center gap-3 mb-8\"\r\n            >\r\n              <div className=\"size-2.5 bg-black rounded-full shadow-[0_0_10px_rgba(0,0,0,0.1)]\" />\r\n              <span className=\"text-[10px] font-black uppercase tracking-[0.25em] text-zinc-900\">\r\n                Company Introduction\r\n              </span>\r\n            </motion.div>\r\n\r\n            <h2 className=\"text-6xl md:text-7xl font-bold tracking-tighter text-balance leading-[0.9] mb-8\">\r\n              Built by developers, <br /> for the future of SaaS.\r\n            </h2>\r\n\r\n            <p className=\"text-xl text-zinc-500 text-pretty leading-relaxed mb-12\">\r\n              We started as a small team of engineers tired of fighting\r\n              infrastructure. Today, we're building the operating system for\r\n              modern software companies—handling the complexity so you can ship\r\n              features faster.\r\n            </p>\r\n\r\n            <div className=\"flex flex-wrap gap-4 pt-4 border-t border-zinc-100\">\r\n              {integrations.map((item) => (\r\n                <span\r\n                  key={item}\r\n                  className=\"text-xs font-dmSans font-semibold text-zinc-500 hover:text-black transition-colors cursor-default\"\r\n                >\r\n                  {item}\r\n                </span>\r\n              ))}\r\n            </div>\r\n          </div>\r\n        </div>\r\n        {/* Dynamic Stats Section */}\r\n        <div className=\"grid lg:grid-cols-2 gap-12 items-center\">\r\n          <div className=\"space-y-8\">\r\n            <h3 className=\"text-4xl font-bold tracking-tight text-balance\">\r\n              Infrastructure that scales with your ambition.\r\n            </h3>\r\n            <p className=\"text-zinc-500 text-pretty leading-relaxed\">\r\n              Whether you're a startup launching your first MVP or an enterprise\r\n              scaling to millions of users, our architecture is designed to grow\r\n              with you. No migration headaches, no performance bottlenecks.\r\n            </p>\r\n            <div className=\"flex gap-12 pt-4\">\r\n              <div className=\"space-y-1\">\r\n                <div className=\"text-3xl font-black font-dmSans\">99.99%</div>\r\n                <div className=\"text-xs font-bold text-zinc-400 uppercase tracking-widest\">\r\n                  Uptime SLA\r\n                </div>\r\n              </div>\r\n              <div className=\"space-y-1\">\r\n                <div className=\"text-3xl font-black font-dmSans \">1.2ms</div>\r\n                <div className=\"text-xs font-bold text-zinc-400 uppercase tracking-widest\">\r\n                  API Latency\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n\r\n          <div className=\"relative aspect-video rounded-3xl bg-zinc-900 p-8 flex flex-col justify-end overflow-hidden group\">\r\n            <img\r\n              src=\"https://images.unsplash.com/photo-1759179355276-cb2278fdc4c1?q=80&w=627&auto=format&fit=crop\"\r\n              alt=\"\"\r\n              className=\"absolute top-0 right-0 w-full opacity-[0.03] pointer-events-none hidden lg:block\"\r\n            />\r\n            <div className=\"space-y-4 relative z-10\">\r\n              <div className=\"h-1 w-full bg-zinc-700 rounded-full overflow-hidden\">\r\n                <motion.div\r\n                  initial={{ x: '-100%' }}\r\n                  whileInView={{ x: '0%' }}\r\n                  transition={{ duration: 1, ease: 'easeOut' }}\r\n                  className=\"size-full bg-white\"\r\n                />\r\n              </div>\r\n              <div className=\"font-mono text-xs mb-16 text-zinc-500 flex justify-between uppercase\">\r\n                <span>System Health</span>\r\n                <span className=\"text-emerald-500 animate-pulse font-bold\">\r\n                  Optimal\r\n                </span>\r\n              </div>\r\n              <div className=\"grid grid-cols-6 gap-2 h-40 items-end\">\r\n                {[125, 70, 120, 90, 99, 80].map((h, i) => (\r\n                  <motion.div\r\n                    key={i}\r\n                    initial={{ height: 0 }}\r\n                    whileInView={{ height: `${h}%` }}\r\n                    transition={{ duration: 0.5, delay: i * 0.05 }}\r\n                    className=\"bg-blue-500 rounded-t-sm group-hover:bg-blue-600 transition-colors\"\r\n                  />\r\n                ))}\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n        {/* Feature Grid to fill space */}\r\n        <div className=\"grid md:grid-cols-3 gap-8\">\r\n          {features.map((feature, i) => (\r\n            <motion.div\r\n              key={feature.title}\r\n              initial={{ opacity: 0, y: 20 }}\r\n              whileInView={{ opacity: 1, y: 0 }}\r\n              viewport={{ once: true }}\r\n              transition={{ duration: 0.4, delay: i * 0.1 }}\r\n              className=\"p-8 bg-white border border-zinc-100 rounded-3xl shadow-sm hover:shadow-md transition-shadow\"\r\n            >\r\n              <div className=\"size-12 rounded-2xl bg-zinc-50 flex items-center border border-zinc-200 justify-center text-zinc-900 mb-6\">\r\n                {feature.icon}\r\n              </div>\r\n              <h3 className=\"text-xl font-bold mb-3 tracking-tight font-dmSans\">\r\n                {feature.title}\r\n              </h3>\r\n              <p className=\"text-sm text-zinc-500 leading-relaxed text-pretty\">\r\n                {feature.description}\r\n              </p>\r\n            </motion.div>\r\n          ))}\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"
}