{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "feature-nature",
  "dependencies": [
    "motion"
  ],
  "devDependencies": [],
  "registryDependencies": [],
  "files": [
    {
      "path": "../../packages/blocks/src/feature-section/feature-nature.tsx",
      "content": "import React from 'react'\r\nimport { cn } from '@/lib/utils'\r\nimport { Button } from '@repo/shadcn'\r\n\r\ninterface NatureCardProps {\r\n  title: string\r\n  description: string\r\n  icon: React.ReactNode\r\n  active?: boolean\r\n}\r\n\r\nconst NatureCard: React.FC<NatureCardProps> = ({\r\n  title,\r\n  description,\r\n  icon,\r\n  active,\r\n}) => {\r\n  return (\r\n    <div\r\n      className={cn(\r\n        'rounded-2xl p-4 flex flex-col h-full transition-all duration-300 border-2',\r\n        active\r\n          ? 'bg-emerald-950 border-emerald-950 text-white shadow-2xl'\r\n          : 'bg-white border-transparent text-gray-900 shadow-sm hover:border-emerald-100'\r\n      )}\r\n    >\r\n      <div\r\n        className={cn(\r\n          'size-12 mb-4 flex items-center justify-center',\r\n          active ? 'text-emerald-400' : 'text-emerald-900'\r\n        )}\r\n      >\r\n        {icon}\r\n      </div>\r\n      <h3 className=\"text-3xl font-bold mb-2 leading-tight\">{title}</h3>\r\n      <p\r\n        className={cn(\r\n          'text-lg mb-12 text-pretty',\r\n          active ? 'text-emerald-100/70' : 'text-gray-500'\r\n        )}\r\n      >\r\n        {description}\r\n      </p>\r\n      <Button\r\n        className={cn(\r\n          'mt-auto px-6 py-3 rounded-full font-bold w-fit transition-colors',\r\n          active\r\n            ? 'bg-white text-emerald-950 hover:bg-emerald-50'\r\n            : 'bg-emerald-950 text-white hover:bg-emerald-900'\r\n        )}\r\n      >\r\n        Learn More\r\n      </Button>\r\n    </div>\r\n  )\r\n}\r\n\r\nexport const FeatureNature = () => {\r\n  return (\r\n    <section className=\"bg-white py-10 px-4 font-dmSans\">\r\n      <div className=\"max-w-7xl mx-auto bg-gray-50 rounded-3xl p-8\">\r\n        <div className=\"flex flex-col md:flex-row justify-between items-start md:items-center mb-16 gap-8\">\r\n          <div className=\"space-y-4\">\r\n            <h2 className=\"text-5xl md:text-6xl max-w-2xl font-bold text-gray-900\">\r\n              Discover the Wonders of Nature\r\n            </h2>\r\n            <p className=\"text-xl text-gray-600 max-w-2xl text-pretty\">\r\n              Explore breathtaking experiences that bring you closer to the\r\n              natural world, from wild forests to tranquil trails.\r\n            </p>\r\n          </div>\r\n          <Button className=\"bg-emerald-950 text-white px-6 py-4 rounded-2xl font-semibold transition-colors\">\r\n            Start Your Journey\r\n          </Button>\r\n        </div>\r\n\r\n        <div className=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8\">\r\n          <NatureCard\r\n            active\r\n            icon={\r\n              <svg\r\n                xmlns=\"http://www.w3.org/2000/svg\"\r\n                className=\"size-8\"\r\n                viewBox=\"0 0 24 24\"\r\n                fill=\"none\"\r\n                stroke=\"currentColor\"\r\n              >\r\n                <path d=\"M10 10v.2A3 3 0 0 1 8.9 16H5a3 3 0 0 1-1-5.8V10a3 3 0 0 1 6 0Z\" />\r\n                <path d=\"M7 16v6\" />\r\n                <path d=\"M13 19v3\" />\r\n                <path d=\"M12 19h8.3a1 1 0 0 0 .7-1.7L18 14h.3a1 1 0 0 0 .7-1.7L16 9h.2a1 1 0 0 0 .8-1.7L13 3l-1.4 1.5\" />\r\n              </svg>\r\n            }\r\n            title=\"Explore Pristine Forests\"\r\n            description=\"Walk beneath ancient trees and discover untouched ecosystems teeming with life.\"\r\n          />\r\n          <NatureCard\r\n            icon={\r\n              <svg\r\n                xmlns=\"http://www.w3.org/2000/svg\"\r\n                viewBox=\"0 0 24 24\"\r\n                fill=\"none\"\r\n                className=\"size-8\"\r\n                stroke=\"currentColor\"\r\n              >\r\n                <path d=\"M22 17a10 10 0 0 0-20 0\" />\r\n                <path d=\"M6 17a6 6 0 0 1 12 0\" />\r\n                <path d=\"M10 17a2 2 0 0 1 4 0\" />\r\n              </svg>\r\n            }\r\n            title=\"Wildlife Encounters\"\r\n            description=\"Experience rare moments with native species in their natural habitats, guided by ethical eco-tour practices.\"\r\n          />\r\n          <NatureCard\r\n            icon={\r\n              <svg\r\n                className=\"size-8\"\r\n                fill=\"none\"\r\n                stroke=\"currentColor\"\r\n                viewBox=\"0 0 24 24\"\r\n              >\r\n                <path\r\n                  strokeLinecap=\"round\"\r\n                  strokeLinejoin=\"round\"\r\n                  strokeWidth=\"2\"\r\n                  d=\"M9 20l-5.447-2.724A2 2 0 013 15.483V6.517a2 2 0 011.553-1.943L9 2l5.447 2.724A2 2 0 0116 6.517v8.966a2 2 0 01-1.553 1.943L9 20z\"\r\n                />\r\n              </svg>\r\n            }\r\n            title=\"Scenic Trails & Hikes\"\r\n            description=\"Follow scenic trails that reveal stunning views, peaceful landscapes, and hidden gems at every turn.\"\r\n          />\r\n          <NatureCard\r\n            icon={\r\n              <svg\r\n                className=\"size-8\"\r\n                fill=\"none\"\r\n                stroke=\"currentColor\"\r\n                viewBox=\"0 0 24 24\"\r\n              >\r\n                <path\r\n                  strokeLinecap=\"round\"\r\n                  strokeLinejoin=\"round\"\r\n                  strokeWidth=\"2\"\r\n                  d=\"M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z\"\r\n                />\r\n              </svg>\r\n            }\r\n            title=\"Sunset & Stargazing\"\r\n            description=\"Unwind under breathtaking sunsets or gaze at starry skies free from city light pollution.\"\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"
}