{
  "name": "features-section-demo-3",
  "type": "registry:block",
  "dependencies": [
    "@tabler/icons-react",
    "cobe"
  ],
  "files": [
    {
      "path": "components/features-section-demo-3.tsx",
      "content": "\"use client\";\nimport React from \"react\";\nimport { cn } from \"@/lib/utils\";\nimport createGlobe from \"cobe\";\nimport { useEffect, useRef } from \"react\";\nimport { motion } from \"motion/react\";\nimport { IconBrandYoutubeFilled } from \"@tabler/icons-react\";\n\nexport default function FeaturesSectionDemo() {\n  const features = [\n    {\n      title: \"Track issues effectively\",\n      description:\n        \"Track and manage your project issues with ease using our intuitive interface.\",\n      skeleton: <SkeletonOne />,\n      className:\n        \"col-span-1 lg:col-span-4 border-b lg:border-r dark:border-neutral-800\",\n    },\n    {\n      title: \"Capture pictures with AI\",\n      description:\n        \"Capture stunning photos effortlessly using our advanced AI technology.\",\n      skeleton: <SkeletonTwo />,\n      className: \"border-b col-span-1 lg:col-span-2 dark:border-neutral-800\",\n    },\n    {\n      title: \"Watch our AI on YouTube\",\n      description:\n        \"Whether its you or Tyler Durden, you can get to know about our product on YouTube\",\n      skeleton: <SkeletonThree />,\n      className:\n        \"col-span-1 lg:col-span-3 lg:border-r  dark:border-neutral-800\",\n    },\n    {\n      title: \"Deploy in seconds\",\n      description:\n        \"With our blazing fast, state of the art, cutting edge, we are so back cloud servies (read AWS) - you can deploy your model in seconds.\",\n      skeleton: <SkeletonFour />,\n      className: \"col-span-1 lg:col-span-3 border-b lg:border-none\",\n    },\n  ];\n  return (\n    <div className=\"relative z-20 mx-auto max-w-7xl py-10 lg:py-40\">\n      <div className=\"px-8\">\n        <h4 className=\"mx-auto max-w-5xl text-center text-3xl font-medium tracking-tight text-black lg:text-5xl lg:leading-tight dark:text-white\">\n          Packed with thousands of features\n        </h4>\n\n        <p className=\"mx-auto my-4 max-w-2xl text-center text-sm font-normal text-neutral-500 lg:text-base dark:text-neutral-300\">\n          From Image generation to video generation, Everything AI has APIs for\n          literally everything. It can even create this website copy for you.\n        </p>\n      </div>\n\n      <div className=\"relative\">\n        <div className=\"mt-12 grid grid-cols-1 rounded-md lg:grid-cols-6 xl:border dark:border-neutral-800\">\n          {features.map((feature) => (\n            <FeatureCard key={feature.title} className={feature.className}>\n              <FeatureTitle>{feature.title}</FeatureTitle>\n              <FeatureDescription>{feature.description}</FeatureDescription>\n              <div className=\"h-full w-full\">{feature.skeleton}</div>\n            </FeatureCard>\n          ))}\n        </div>\n      </div>\n    </div>\n  );\n}\n\nconst FeatureCard = ({\n  children,\n  className,\n}: {\n  children?: React.ReactNode;\n  className?: string;\n}) => {\n  return (\n    <div className={cn(`relative overflow-hidden p-4 sm:p-8`, className)}>\n      {children}\n    </div>\n  );\n};\n\nconst FeatureTitle = ({ children }: { children?: React.ReactNode }) => {\n  return (\n    <p className=\"mx-auto max-w-5xl text-left text-xl tracking-tight text-black md:text-2xl md:leading-snug dark:text-white\">\n      {children}\n    </p>\n  );\n};\n\nconst FeatureDescription = ({ children }: { children?: React.ReactNode }) => {\n  return (\n    <p\n      className={cn(\n        \"mx-auto max-w-4xl text-left text-sm md:text-base\",\n        \"text-center font-normal text-neutral-500 dark:text-neutral-300\",\n        \"mx-0 my-2 max-w-sm text-left md:text-sm\",\n      )}\n    >\n      {children}\n    </p>\n  );\n};\n\nexport const SkeletonOne = () => {\n  return (\n    <div className=\"relative flex h-full gap-10 px-2 py-8\">\n      <div className=\"group mx-auto h-full w-full bg-white p-5 shadow-2xl dark:bg-neutral-900\">\n        <div className=\"flex h-full w-full flex-1 flex-col space-y-2\">\n          {/* TODO */}\n          <img\n            src=\"/linear.webp\"\n            alt=\"header\"\n            width={800}\n            height={800}\n            className=\"aspect-square h-full w-full rounded-sm object-cover object-left-top\"\n          />\n        </div>\n      </div>\n\n      <div className=\"pointer-events-none absolute inset-x-0 bottom-0 z-40 h-60 w-full bg-gradient-to-t from-white via-white to-transparent dark:from-black dark:via-black\" />\n      <div className=\"pointer-events-none absolute inset-x-0 top-0 z-40 h-60 w-full bg-gradient-to-b from-white via-transparent to-transparent dark:from-black\" />\n    </div>\n  );\n};\n\nexport const SkeletonThree = () => {\n  return (\n    <a\n      href=\"https://www.youtube.com/watch?v=RPa3_AD1_Vs\"\n      target=\"__blank\"\n      className=\"group/image relative flex h-full gap-10\"\n    >\n      <div className=\"group mx-auto h-full w-full bg-transparent dark:bg-transparent\">\n        <div className=\"relative flex h-full w-full flex-1 flex-col space-y-2\">\n          {/* TODO */}\n          <IconBrandYoutubeFilled className=\"absolute inset-0 z-10 m-auto h-20 w-20 text-red-500\" />\n          <img\n            src=\"https://assets.aceternity.com/fireship.jpg\"\n            alt=\"header\"\n            width={800}\n            height={800}\n            className=\"aspect-square h-full w-full rounded-sm object-cover object-center blur-none transition-all duration-200 group-hover/image:blur-md\"\n          />\n        </div>\n      </div>\n    </a>\n  );\n};\n\nexport const SkeletonTwo = () => {\n  const images = [\n    \"https://images.unsplash.com/photo-1517322048670-4fba75cbbb62?q=80&w=3000&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\",\n    \"https://images.unsplash.com/photo-1573790387438-4da905039392?q=80&w=3425&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\",\n    \"https://images.unsplash.com/photo-1555400038-63f5ba517a47?q=80&w=3540&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\",\n    \"https://images.unsplash.com/photo-1554931670-4ebfabf6e7a9?q=80&w=3387&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\",\n    \"https://images.unsplash.com/photo-1546484475-7f7bd55792da?q=80&w=2581&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\",\n  ];\n\n  const imageVariants = {\n    whileHover: {\n      scale: 1.1,\n      rotate: 0,\n      zIndex: 100,\n    },\n    whileTap: {\n      scale: 1.1,\n      rotate: 0,\n      zIndex: 100,\n    },\n  };\n  return (\n    <div className=\"relative flex h-full flex-col items-start gap-10 overflow-hidden p-8\">\n      {/* TODO */}\n      <div className=\"-ml-20 flex flex-row\">\n        {images.map((image, idx) => (\n          <motion.div\n            variants={imageVariants}\n            key={\"images-first\" + idx}\n            style={{\n              rotate: Math.random() * 20 - 10,\n            }}\n            whileHover=\"whileHover\"\n            whileTap=\"whileTap\"\n            className=\"mt-4 -mr-4 shrink-0 overflow-hidden rounded-xl border border-neutral-100 bg-white p-1 dark:border-neutral-700 dark:bg-neutral-800\"\n          >\n            <img\n              src={image}\n              alt=\"bali images\"\n              width=\"500\"\n              height=\"500\"\n              className=\"h-20 w-20 shrink-0 rounded-lg object-cover md:h-40 md:w-40\"\n            />\n          </motion.div>\n        ))}\n      </div>\n      <div className=\"flex flex-row\">\n        {images.map((image, idx) => (\n          <motion.div\n            key={\"images-second\" + idx}\n            style={{\n              rotate: Math.random() * 20 - 10,\n            }}\n            variants={imageVariants}\n            whileHover=\"whileHover\"\n            whileTap=\"whileTap\"\n            className=\"mt-4 -mr-4 shrink-0 overflow-hidden rounded-xl border border-neutral-100 bg-white p-1 dark:border-neutral-700 dark:bg-neutral-800\"\n          >\n            <img\n              src={image}\n              alt=\"bali images\"\n              width=\"500\"\n              height=\"500\"\n              className=\"h-20 w-20 shrink-0 rounded-lg object-cover md:h-40 md:w-40\"\n            />\n          </motion.div>\n        ))}\n      </div>\n\n      <div className=\"pointer-events-none absolute inset-y-0 left-0 z-[100] h-full w-20 bg-gradient-to-r from-white to-transparent dark:from-black\" />\n      <div className=\"pointer-events-none absolute inset-y-0 right-0 z-[100] h-full w-20 bg-gradient-to-l from-white to-transparent dark:from-black\" />\n    </div>\n  );\n};\n\nexport const SkeletonFour = () => {\n  return (\n    <div className=\"relative mt-10 flex h-60 flex-col items-center bg-transparent md:h-60 dark:bg-transparent\">\n      <Globe className=\"absolute -right-10 -bottom-80 md:-right-10 md:-bottom-72\" />\n    </div>\n  );\n};\n\nexport const Globe = ({ className }: { className?: string }) => {\n  const canvasRef = useRef<HTMLCanvasElement>(null);\n\n  useEffect(() => {\n    let phi = 0;\n\n    if (!canvasRef.current) return;\n\n    const globe = createGlobe(canvasRef.current, {\n      devicePixelRatio: 2,\n      width: 600 * 2,\n      height: 600 * 2,\n      phi: 0,\n      theta: 0,\n      dark: 1,\n      diffuse: 1.2,\n      mapSamples: 4000,\n      mapBrightness: 6,\n      baseColor: [0.3, 0.3, 0.3],\n      markerColor: [0.1, 0.8, 1],\n      glowColor: [1, 1, 1],\n      markers: [\n        // longitude latitude\n        { location: [37.7595, -122.4367], size: 0.03 },\n        { location: [40.7128, -74.006], size: 0.1 },\n      ],\n      onRender: (state) => {\n        // Called on every animation frame.\n        // `state` will be an empty object, return updated params.\n        state.phi = phi;\n        phi += 0.01;\n      },\n    });\n\n    return () => {\n      globe.destroy();\n    };\n  }, []);\n\n  return (\n    <canvas\n      ref={canvasRef}\n      style={{ width: 600, height: 600, maxWidth: \"100%\", aspectRatio: 1 }}\n      className={className}\n    />\n  );\n};\n",
      "type": "registry:block",
      "target": "components/features-section-demo-3.tsx"
    }
  ],
  "author": "Manu Arora <hi@manuarora.in>",
  "title": "Features Section Demo 3"
}