{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "feature26",
  "title": "Feature Card Grid with Hover Effects",
  "description": "Six-card grid with icons in rounded containers that animate on hover, plus titles and descriptions. Perfect for wellness platforms, health apps, or service benefit showcases.",
  "dependencies": [
    "clsx",
    "tailwind-merge",
    "lucide-react"
  ],
  "registryDependencies": [
    "badge"
  ],
  "files": [
    {
      "path": "registry/feature26/feature26.tsx",
      "content": "\"use client\";\n\nimport { Activity, Check, Heart, Leaf, Shield, Star } from \"lucide-react\";\nimport { Badge } from \"@/components/ui/badge\";\nimport { cn } from \"@/lib/utils\";\n\ninterface Feature {\n  id: string;\n  icon?: React.ReactNode;\n  title: string;\n  description: string;\n}\n\ninterface Feature26Props {\n  badge?: {\n    label: string;\n    variant?: \"default\" | \"secondary\" | \"outline\";\n  };\n  heading?: string;\n  description?: string;\n  features?: Feature[];\n  className?: string;\n}\n\nexport const feature26Demo: Feature26Props = {\n  badge: { label: \"Features\", variant: \"default\" },\n  heading: \"Why Wellory?\",\n  description:\n    \"We simplify complex health data. A lifestyle plan that is actionable, sustainable, and unique to you.\",\n  features: [\n    {\n      id: \"feature-1\",\n      icon: <Leaf className=\"size-6\" />,\n      title: \"Holistic Nutrition\",\n      description:\n        \"Beyond counting calories. Smart meal plans that optimize your hormone balance and energy levels.\",\n    },\n    {\n      id: \"feature-2\",\n      icon: <Activity className=\"size-6\" />,\n      title: \"Smart Activity\",\n      description:\n        \"Adaptive workouts that push limits when you're energetic and respect your rest when you're tired.\",\n    },\n    {\n      id: \"feature-3\",\n      icon: <Shield className=\"size-6\" />,\n      title: \"Data Privacy\",\n      description:\n        \"Your health data is personal. End-to-end encryption ensures your data stays in your control.\",\n    },\n    {\n      id: \"feature-4\",\n      icon: <Heart className=\"size-6\" />,\n      title: \"Cardio Analysis\",\n      description:\n        \"Measure and manage stress levels with Heart Rate Variability (HRV) analysis.\",\n    },\n    {\n      id: \"feature-5\",\n      icon: <Star className=\"size-6\" />,\n      title: \"Sleep Coaching\",\n      description:\n        \"Sleep windows aligned with your circadian rhythm to increase deep sleep duration.\",\n    },\n    {\n      id: \"feature-6\",\n      icon: <Check className=\"size-6\" />,\n      title: \"Habit Tracking\",\n      description:\n        \"Small steps, big changes. Build new habits without breaking the chain.\",\n    },\n  ],\n};\n\nexport function Feature26({\n  badge,\n  heading,\n  description,\n  features = [],\n  className,\n}: Feature26Props) {\n  return (\n    <section className={cn(\"py-16 md:py-24 overflow-hidden w-full\", className)}>\n      <div className=\"mx-auto max-w-6xl px-4 md:px-6\">\n        {/* Header */}\n        <div className=\"text-center max-w-3xl mx-auto mb-12 sm:mb-16\">\n          {badge && (\n            <div className=\"mb-4\">\n              <Badge variant={badge.variant ?? \"default\"}>{badge.label}</Badge>\n            </div>\n          )}\n          {heading && (\n            <h2 className=\"text-3xl md:text-4xl font-bold tracking-tight mb-4\">\n              {heading}\n            </h2>\n          )}\n          {description && (\n            <p className=\"text-lg text-balance text-muted-foreground\">\n              {description}\n            </p>\n          )}\n        </div>\n\n        {/* Features Grid */}\n        {features.length > 0 && (\n          <div className=\"grid md:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-8\">\n            {features.map((feature) => (\n              <div\n                key={feature.id}\n                className=\"rounded-lg border shadow-sm p-8 bg-card hover:shadow-xl transition-all duration-300 hover:-translate-y-1 group/feature26\"\n              >\n                {/* Icon */}\n                <div className=\"w-14 h-14 rounded-lg flex items-center justify-center mb-6 bg-primary/10 text-primary group-hover/feature26:bg-primary group-hover/feature26:text-background transition-colors\">\n                  {feature.icon || <Check className=\"size-6\" />}\n                </div>\n\n                {/* Title */}\n                <h3 className=\"text-xl font-bold mb-3\">{feature.title}</h3>\n\n                {/* Description */}\n                <p className=\"leading-relaxed text-sm text-muted-foreground\">\n                  {feature.description}\n                </p>\n              </div>\n            ))}\n          </div>\n        )}\n      </div>\n    </section>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/beste/block/feature26.tsx"
    }
  ],
  "type": "registry:block"
}