{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "site-features",
  "type": "registry:ui",
  "description": "Features showcase component with multiple layouts",
  "files": [
    {
      "path": "packages/site/features.tsx",
      "content": "\"use client\";\n\nimport React from \"react\";\nimport { motion } from \"framer-motion\";\nimport { LucideIcon, ArrowRight } from \"lucide-react\";\nimport { cn } from \"@repo/shadcn-ui/lib/utils\";\n\nexport interface Feature {\n  id: string;\n  title: string;\n  description: string;\n  icon?: LucideIcon;\n  iconColor?: string;\n  href?: string;\n  image?: string;\n}\n\nexport interface FeaturesProps {\n  features: Feature[];\n  title?: string;\n  subtitle?: string;\n  layout?: \"grid\" | \"list\" | \"alternating\";\n  columns?: 2 | 3 | 4;\n  showImages?: boolean;\n  className?: string;\n}\n\nconst fadeInUp = {\n  hidden: { opacity: 0, y: 20 },\n  visible: {\n    opacity: 1,\n    y: 0,\n    transition: {\n      duration: 0.6,\n      ease: \"easeOut\",\n    },\n  },\n};\n\nconst staggerContainer = {\n  hidden: { opacity: 0 },\n  visible: {\n    opacity: 1,\n    transition: {\n      staggerChildren: 0.1,\n      delayChildren: 0.2,\n    },\n  },\n};\n\nconst FeatureCard = ({ feature, showImage = false }: { feature: Feature; showImage?: boolean }) => {\n  const IconComponent = feature.icon;\n\n  const content = (\n    <div\n      className={cn(\n        \"group relative h-full w-full p-6 rounded-xl border border-neutral-200 dark:border-neutral-800\",\n        \"bg-background mx-auto justify-center items-center flex flex-col\",\n        \"hover:border-neutral-300 dark:hover:border-neutral-700\",\n        \"hover:shadow-lg hover:shadow-neutral-200/50 dark:hover:shadow-neutral-900/50\",\n        \"transition-all duration-300 ease-out\",\n        feature.href && \"cursor-pointer\"\n      )}\n    >\n\n      <div className=\"flex flex-col h-full w-full justify-start items-start space-y-4\">\n        {/* Icon or Image */}\n        <div className=\"flex items-center justify-between\">\n          <div className=\"flex items-center gap-3\">\n            {showImage && feature.image ? (\n              <div className=\"w-12 h-12 rounded-lg overflow-hidden bg-background\">\n                <img\n                  src={feature.image}\n                  alt={feature.title}\n                  className=\"w-full h-full object-cover\"\n                />\n              </div>\n            ) : IconComponent ? (\n              <div\n                className={cn(\n                  \"w-12 h-12 rounded-lg flex items-center justify-center\",\n                  \"bg-background\",\n                  feature.iconColor || \"text-text\"\n                )}\n              >\n                <IconComponent className=\"w-6 h-6\" />\n              </div>\n            ) : (\n              <div className=\"w-12 h-12 rounded-lg bg-background\" />\n            )}\n          </div>\n\n          {feature.href && (\n            <ArrowRight className=\"w-5 h-5 text-text group-hover:text-text transition-colors opacity-0 group-hover:opacity-100\" />\n          )}\n        </div>\n\n        {/* Content */}\n        <div className=\"flex-1\">\n          <h3 className=\"text-lg font-semibold text-text mb-2 group-hover:text-text transition-colors\">\n            {feature.title}\n          </h3>\n          <p className=\"text-text leading-relaxed\">\n            {feature.description}\n          </p>\n        </div>\n      </div>\n    </div>\n  );\n\n  if (feature.href) {\n    return (\n      <a href={feature.href} className=\"block h-full\">\n        {content}\n      </a>\n    );\n  }\n\n  return content;\n};\n\nconst AlternatingFeature = ({ feature, index, showImage = false }: { feature: Feature; index: number; showImage?: boolean }) => {\n  const IconComponent = feature.icon;\n  const isEven = index % 2 === 0;\n\n  return (\n    <div className={cn(\n      \"grid lg:grid-cols-2 gap-8 lg:gap-12 items-center\",\n      !isEven && \"lg:grid-flow-col-dense\"\n    )}>\n      {/* Content */}\n      <div className={cn(\"space-y-6\", !isEven && \"lg:col-start-2\")}>\n        <div className=\"space-y-4\">\n          <div className=\"flex items-center gap-3\">\n            {showImage && feature.image ? (\n              <div className=\"w-12 h-12 rounded-lg overflow-hidden bg-background\">\n                <img\n                  src={feature.image}\n                  alt={feature.title}\n                  className=\"w-full h-full object-cover\"\n                />\n              </div>\n            ) : IconComponent ? (\n              <div\n                className={cn(\n                  \"w-12 h-12 rounded-lg flex items-center justify-center\",\n                  \"bg-background\",\n                  feature.iconColor || \"text-text\"\n                )}\n              >\n                <IconComponent className=\"w-6 h-6\" />\n              </div>\n            ) : (\n              <div className=\"w-12 h-12 rounded-lg bg-background\" />\n            )}\n          </div>\n\n          <h3 className=\"text-2xl font-bold text-text\">\n            {feature.title}\n          </h3>\n          \n          <p className=\"text-lg text-text leading-relaxed\">\n            {feature.description}\n          </p>\n\n          {feature.href && (\n            <a\n              href={feature.href}\n              className=\"inline-flex items-center gap-2 text-text hover:text-text font-medium transition-colors\"\n            >\n              Learn more\n              <ArrowRight className=\"w-4 h-4\" />\n            </a>\n          )}\n        </div>\n      </div>\n\n      {/* Visual */}\n      <div className={cn(\n        \"relative\",\n        !isEven && \"lg:col-start-1 lg:row-start-1\"\n      )}>\n        <div className=\"aspect-video rounded-xl bg-background border border-neutral-200 overflow-hidden\">\n          {feature.image ? (\n            <img\n              src={feature.image}\n              alt={feature.title}\n              className=\"w-full h-full object-cover\"\n            />\n          ) : (\n            <div className=\"w-full h-full flex items-center justify-center\">\n              {IconComponent ? (\n                <IconComponent className=\"w-16 h-16 text-text\" />\n              ) : (\n                <div className=\"w-16 h-16 rounded-lg bg-background\" />\n              )}\n            </div>\n          )}\n        </div>\n      </div>\n    </div>\n  );\n};\n\nexport function Features({\n  features,\n  title = \"Features\",\n  subtitle,\n  layout = \"grid\",\n  columns = 3,\n  showImages = false,\n  className,\n}: FeaturesProps) {\n  const getGridCols = () => {\n    switch (columns) {\n      case 2:\n        return \"md:grid-cols-2\";\n      case 3:\n        return \"md:grid-cols-2 lg:grid-cols-3\";\n      case 4:\n        return \"md:grid-cols-2 lg:grid-cols-4\";\n      default:\n        return \"md:grid-cols-2 lg:grid-cols-3\";\n    }\n  };\n\n  return (\n    <section className={cn(\"py-24 sm:py-32 bg-background w-full justify-center items-center flex flex-col\", className)}>\n      <div className=\"max-w-7xl mx-auto w-full\">\n        {/* Header */}\n        <motion.div\n          initial=\"hidden\"\n          whileInView=\"visible\"\n          viewport={{ once: true }}\n          variants={fadeInUp}\n          className=\"text-center mb-16\"\n        >\n          <h2 className=\"text-3xl font-bold tracking-tight text-text sm:text-4xl\">\n            {title}\n          </h2>\n          {subtitle && (\n            <p className=\"mt-4 text-lg text-text\">\n              {subtitle}\n            </p>\n          )}\n        </motion.div>\n\n        {/* Features */}\n        {layout === \"alternating\" ? (\n          <div className=\"space-y-24 w-full flex flex-col justify-center items-center mx-auto bg-background\">\n            {features.map((feature, index) => (\n              <motion.div\n                key={feature.id}\n                className=\"w-full flex flex-col justify-center items-center mx-auto bg-background\"\n                initial=\"hidden\"\n                whileInView=\"visible\"\n                viewport={{ once: true }}\n                variants={fadeInUp}\n              >\n                <AlternatingFeature\n                  feature={feature}\n                  index={index}\n                  showImage={showImages}\n                />\n              </motion.div>\n            ))}\n          </div>\n        ) : layout === \"list\" ? (\n          <motion.div\n            initial=\"hidden\"\n            whileInView=\"visible\"\n            viewport={{ once: true }}\n            variants={staggerContainer}\n            className=\"space-y-6 w-full flex flex-col justify-center items-center mx-auto bg-background\"\n          >\n            {features.map((feature) => (\n              <motion.div key={feature.id} className=\"w-full flex flex-col justify-center items-center mx-auto bg-background\" variants={fadeInUp}>\n                <FeatureCard feature={feature} showImage={showImages} />\n              </motion.div>\n            ))}\n          </motion.div>\n        ) : (\n          <motion.div\n            initial=\"hidden\"\n            whileInView=\"visible\"\n            viewport={{ once: true }}\n            variants={staggerContainer}\n            className={cn(\"grid gap-6 w-full flex flex-col justify-center items-center mx-auto bg-background\", getGridCols())}\n          >\n            {features.map((feature) => (\n              <motion.div key={feature.id} className=\"w-full flex flex-col justify-center items-center mx-auto bg-background\" variants={fadeInUp}>\n                <FeatureCard feature={feature} showImage={showImages} />\n              </motion.div>\n            ))}\n          </motion.div>\n        )}\n      </div>\n    </section>\n  );\n}\n",
      "type": "registry:component"
    }
  ]
}