{
    "name": "about",
    "type": "registry:block",
    "title": "Stats Pillars",
    "description": "Full-viewport about section with stats row, feature pillars, and Shadway border-grid aesthetic.",
    "category": "about",
    "files": [
        {
            "path": "registry/about/about.tsx",
            "content": "\"use client\";\r\n\r\nimport React from \"react\";\r\nimport { Button } from \"@/components/ui/button\";\r\nimport { motion } from \"framer-motion\";\r\nimport { CheckCircle2, Trophy, Users, Rocket } from \"lucide-react\";\r\n\r\nexport function About() {\r\n  const stats = [\r\n    { label: \"Founded\", value: \"2024\", icon: Rocket },\r\n    { label: \"Clients\", value: \"500+\", icon: Users },\r\n    { label: \"Awards\", value: \"12\", icon: Trophy },\r\n  ];\r\n\r\n  const features = [\r\n    \"Pixel perfect design implementation\",\r\n    \"Highly optimized for performance\",\r\n    \"Accessibility first approach (a11y)\",\r\n    \"Fully customizable via Tailwind CSS\",\r\n  ];\r\n\r\n  return (\r\n    <section className=\"w-full py-16 md:py-24 bg-background overflow-hidden text-left\">\r\n      <div className=\"container px-4 sm:px-6 mx-auto\">\r\n        <div className=\"flex flex-col lg:flex-row items-center gap-10 lg:gap-16\">\r\n          <div className=\"w-full lg:w-1/2 space-y-8\">\r\n            <div className=\"space-y-4\">\r\n              <h2 className=\"text-3xl sm:text-4xl md:text-5xl font-bold tracking-tight leading-[1.2]\">\r\n                Crafting interfaces that <span className=\"text-primary italic\">matter.</span>\r\n              </h2>\r\n              <p className=\"text-base sm:text-lg text-muted-foreground font-light leading-relaxed\">\r\n                At Shadway, we believe that every pixel has a purpose.\r\n                Our team of designers and engineers work tirelessly to bring\r\n                you the highest quality React components for your next big idea.\r\n              </p>\r\n            </div>\r\n\r\n            <div className=\"grid grid-cols-1 sm:grid-cols-2 gap-4\">\r\n              {features.map((feature, i) => (\r\n                <div key={i} className=\"flex items-center gap-2\">\r\n                  <CheckCircle2 className=\"w-5 h-5 text-primary shrink-0\" />\r\n                  <span className=\"text-sm font-medium\">{feature}</span>\r\n                </div>\r\n              ))}\r\n            </div>\r\n\r\n            <div className=\"flex flex-col sm:flex-row items-center gap-4 pt-4\">\r\n              <Button size=\"lg\" className=\"w-full sm:w-auto px-8\">Learn More</Button>\r\n              <Button size=\"lg\" variant=\"ghost\" className=\"w-full sm:w-auto\">Meet the team</Button>\r\n            </div>\r\n          </div>\r\n\r\n          <div className=\"w-full lg:w-1/2 relative mt-12 lg:mt-0\">\r\n            <motion.div\r\n              initial={{ opacity: 0, scale: 0.95 }}\r\n              animate={{ opacity: 1, scale: 1 }}\r\n              className=\"relative aspect-square sm:aspect-[4/3] lg:aspect-square rounded-3xl bg-muted border overflow-hidden shadow-2xl\"\r\n            >\r\n              <div className=\"absolute inset-0 bg-gradient-to-br from-primary/10 to-transparent\" />\r\n              <div className=\"absolute inset-0 flex items-center justify-center\">\r\n                <span className=\"text-muted-foreground font-mono text-[10px] sm:text-sm opacity-20 italic p-6 text-center\">\r\n                  Company Image Placeholder\r\n                </span>\r\n              </div>\r\n            </motion.div>\r\n\r\n            {/* Stats Overlay - Fluid version */}\r\n            <div className=\"absolute -bottom-6 -left-4 sm:-bottom-10 sm:-left-10 flex flex-col gap-3 sm:gap-4 p-4 sm:p-6 rounded-2xl border bg-card shadow-xl z-10 scale-90 sm:scale-100 origin-bottom-left max-w-[160px] sm:max-w-none\">\r\n              {stats.map((stat, i) => (\r\n                <div key={i} className=\"flex items-center gap-3\">\r\n                  <div className=\"w-7 h-7 sm:w-8 sm:h-8 rounded-lg bg-primary/10 flex items-center justify-center shrink-0\">\r\n                    <stat.icon className=\"w-3.5 h-3.5 sm:w-4 sm:h-4 text-primary\" />\r\n                  </div>\r\n                  <div className=\"min-w-0\">\r\n                    <p className=\"text-[9px] sm:text-xs text-muted-foreground uppercase tracking-wider font-bold truncate\">{stat.label}</p>\r\n                    <p className=\"text-xs sm:text-sm font-bold\">{stat.value}</p>\r\n                  </div>\r\n                </div>\r\n              ))}\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </section>\r\n  );\r\n}\r\n\r\nexport default About;\r\n",
            "type": "registry:block"
        }
    ],
    "dependencies": [
        "framer-motion",
        "lucide-react"
    ],
    "registryDependencies": [
        "button"
    ]
}