{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "bento",
  "type": "registry:block",
  "title": "Bento Grid",
  "author": "codefellas <codefellasdd@gmail.com>",
  "description": "A bento grid block.",
  "dependencies": [
    "lucide-react",
    "framer-motion"
  ],
  "registryDependencies": [
    "button",
    "@fellasUI/blur-in",
    "@fellasUI/fade-in",
    "@fellasUI/marquee",
    "@fellasUI/bento-grid",
    "@fellasUI/utils"
  ],
  "files": [
    {
      "path": "registry/@fellas/block/bento/bento.tsx",
      "content": "\"use client\";\nimport Image from \"next/image\";\nimport {\n  BentoCard,\n  BentoGrid,\n} from \"@/registry/@fellas/ui/bento-grid/bento-grid\";\nimport BlurIn from \"@/registry/@fellas/ui/blur-in/blur-in\";\nimport FadeIn from \"@/registry/@fellas/ui/fade-in/fade-in\";\nimport Marquee from \"@/registry/@fellas/ui/marquee/marquee\";\nimport { cn } from \"@/lib/utils\";\nimport { motion } from \"framer-motion\";\nimport { Github, Mail, Sun } from \"lucide-react\";\nimport { Button } from \"@/registry/@fellas/ui/button\";\n\ntype defaultBgImages = {\n  image: string;\n}[];\n\nconst defaultDomains = [\n  {\n    name: \"Crypto\",\n    body: \"Interface with blockchains, create smart contracts, track market data, manage digital assets.\",\n    slug: \"crypto\",\n    image: \"crypto\",\n  },\n  {\n    name: \"Commerce\",\n    body: \"Sell your product or service online.\",\n    slug: \"commerce\",\n    image: \"crypto\",\n  },\n  {\n    name: \"Web\",\n    body: \"Create beautiful, responsive, and performant websites.\",\n    slug: \"web\",\n    image: \"crypto\",\n  },\n  {\n    name: \"IOT\",\n    body: \"Interface with things around you.\",\n    slug: \"iot\",\n    image: \"crypto\",\n  },\n  {\n    name: \"AI\",\n    body: \"Create intelligent, context-aware applications that understand your unique data.\",\n    slug: \"ai\",\n    image: \"crypto\",\n  },\n  {\n    name: \"API\",\n    body: \"Create APIs that power your applications.\",\n    slug: \"api\",\n    image: \"crypto\",\n  },\n];\n\nconst defaultBgImages = [\n  {\n    image: \"https://www.ddpix.de/wp-content/gallery/dresden/01541.jpg\",\n  },\n  {\n    image: \"https://www.ddpix.de/wp-content/gallery/dresden/01551.jpg\",\n  },\n  {\n    image: \"https://www.ddpix.de/wp-content/gallery/dresden/01539.jpg\",\n  },\n  {\n    image: \"https://www.ddpix.de/wp-content/gallery/dresden/01530.jpg\",\n  },\n  {\n    image: \"https://www.ddpix.de/wp-content/gallery/dresden/01500.jpg\",\n  },\n  {\n    image: \"https://www.ddpix.de/wp-content/gallery/dresden/01455.jpg\",\n  },\n  {\n    image: \"https://www.ddpix.de/wp-content/gallery/dresden/01459.jpg\",\n  },\n  {\n    image: \"https://www.ddpix.de/wp-content/gallery/dresden/01436.jpg\",\n  },\n  {\n    image: \"https://www.ddpix.de/wp-content/gallery/dresden/01435.jpg\",\n  },\n];\nconst features = [\n  {\n    Icon: \"\",\n    name: \"\",\n    description: \"\",\n    href: \"\",\n    cta: \"\",\n    className: \"col-span-3 md:col-span-2\",\n    background: (\n      <>\n        <div\n          id=\"hero\"\n          className=\"absolute right-0 top-0 h-full w-full border-none transition-all duration-300 ease-out\"\n        >\n          <div className=\"relative flex h-full w-full mx-auto items-center justify-center overflow-hidden rounded-lg border bg-background md:shadow-xl\">\n            <div className=\"flex flex-col items-start justify-center h-full overflow-hidden p-6 z-50\">\n              <p className=\"font-display text-center text-6xl md:text-7xl lg:text-8xl font-bold leading-[5rem] tracking-tighter drop-shadow-sm\">\n                FellasUI\n              </p>\n              <div className=\"text-lg text-neutral-500 dark:text-neutral-400 lg:p-2 w-full \">\n                <BlurIn className=\"w-3/4 sm:w-2/3\">\n                  Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi\n                  necessitatibus suscipit consequatur aspernatur nemo magni...\n                </BlurIn>\n\n                <FadeIn direction=\"down\" className=\"my-class\">\n                  <div className=\"flex items-center gap-2 w-full lg:w-2/3 mt-6\">\n                    <a href={\"#\"} target=\"_blank\" className=\"flex-1\">\n                      <Button\n                        variant=\"default\"\n                        size=\"lg\"\n                        className=\"flex items-center gap-2 w-full group/Github\"\n                      >\n                        <div>GitHub</div>\n                        <Github className=\"h-5 w-5 lg:group-hover/Github:translate-x-1 transition-all duration-300\" />\n                      </Button>\n                    </a>\n\n                    <a\n                      href=\"mailto:codefellasdd@gmail.com\"\n                      target=\"_blank\"\n                      className=\"flex-1\"\n                    >\n                      <Button\n                        variant=\"default\"\n                        size=\"lg\"\n                        className=\"flex items-center gap-2 w-full group/Mail\"\n                      >\n                        <div>Email Me</div>\n                        <Mail className=\"h-5 w-5 lg:group-hover/Mail:translate-x-1 transition-all duration-300\" />\n                      </Button>\n                    </a>\n                  </div>\n                </FadeIn>\n              </div>\n            </div>\n          </div>\n        </div>\n\n        <div className=\"absolute right-4 top-4 z-50\">\n          <FadeIn direction=\"down\">\n            <Sun />\n          </FadeIn>\n        </div>\n      </>\n    ),\n  },\n  {\n    Icon: \"\",\n    name: \"\",\n    description:\n      \"software engineer & open-source contributor focused in gen-ai, web, linux, cybersecurity, and finance.\",\n    className: \"col-span-3 md:col-span-1\",\n    href: ``,\n    cta: \"Visit portfolio\",\n    background: (\n      <div>\n        <div className=\"absolute right-0 top-0 h-3/4 w-full border-none transition-all duration-300 ease-out [mask-image:linear-gradient(to_top,transparent_5%,#000_50%)] group-hover:scale-105\">\n          <BlurIn duration={0.5} className=\"h-full\">\n            <Image\n              className=\"object-cover object-center h-full w-full\"\n              src={process.env.AVATAR_URL || defaultBgImages[0].image}\n              alt=\"avatar image\"\n              width={300}\n              height={200}\n              priority // Load image immediately\n              quality={100} // Adjust quality for optimization\n              placeholder=\"blur\" // Placeholder to improve perceived performance\n              blurDataURL=\"data:image/svg+xml;base64,...\" // Use a small base64-encoded placeholder image\n            />\n          </BlurIn>\n        </div>\n\n        <FadeIn\n          direction=\"right\"\n          framerProps={{\n            show: { transition: { delay: 1.5 } },\n          }}\n        >\n          <a\n            href={\"#\"}\n            className=\"absolute top-2 right-2 bg-background rounded-lg px-4 py-2 text-xs text-neutral-500 dark:text-neutral-300 max-w-3/4 w-fit\"\n          >\n            <div className=\"flex items-center gap-2\">\n              <div className=\"w-3 h-3 rounded-full animate-pulse bg-emerald-400\"></div>\n              <div className=\"\">aktiv</div>\n            </div>\n          </a>\n        </FadeIn>\n      </div>\n    ),\n  },\n  {\n    Icon: \"\",\n    name: \"Tech Domain\",\n    description: \"Sector-agnostic, focused on solving problems with code.\",\n    href: `#/projects`,\n    cta: \"View projects\",\n    className: \"col-span-3 md:col-span-1\",\n    background: (\n      <motion.div\n        initial={{ opacity: 0 }}\n        animate={{ opacity: 1 }}\n        transition={{ duration: 2.5 }}\n      >\n        <Marquee\n          className=\"absolute h-2/3 top-10 [--duration:40s] [mask-image:linear-gradient(to_top,transparent_10%,#000_100%)] w-full\"\n          pauseOnHover\n        >\n          {defaultDomains.map((f, idx) => (\n            <a\n              href={`#/tags/${f.slug}`}\n              key={idx}\n              className={cn(\n                \"relative w-40 h-full cursor-pointer overflow-hidden rounded-xl border p-4 hover:-translate-y-1\",\n                \"border-gray-950/[.1] bg-gray-950/[.01] hover:bg-gray-950/[.05]\",\n                \"dark:border-gray-50/[.1] dark:bg-gray-50/[.10] dark:hover:bg-gray-50/[.15]\",\n                \"transform-gpu transition-all duration-300 ease-out hover:blur-none\"\n              )}\n            >\n              <div className=\"flex flex-row items-center gap-2\">\n                <div className=\"flex flex-col\">\n                  <figcaption className=\"text-lg font-bold dark:text-white \">\n                    {f.name}\n                  </figcaption>\n                </div>\n              </div>\n              <blockquote className=\"mt-2 text-xs\">{f.body}</blockquote>\n            </a>\n          ))}\n        </Marquee>\n      </motion.div>\n    ),\n  },\n  {\n    Icon: \"\",\n    name: \"Technologies\",\n    description:\n      \"Using a combination of cutting-edge, and time-tested technologies to build robust, scalable, and secure applications.\",\n    href: \"/technologies\",\n    cta: \"View all technologies\",\n    className: \"col-span-3 md:col-span-2\",\n    background: (\n      <div className=\"absolute right-0 top-0 w-[100%] origin-top translate-x-0 transition-all duration-300 ease-out [mask-image:linear-gradient(to_top,transparent_40%,#000_70%)] md:[mask-image:linear-gradient(to_top,transparent_50%,#000_70%)] group-hover:-translate-y-5 group-hover:scale-105\">\n        <FadeIn direction=\"up\">\n          <Image\n            className=\"object-cover object-center h-full w-full\"\n            src={process.env.AVATAR_URL || defaultBgImages[1].image}\n            alt=\"avatar image\"\n            width={300}\n            height={200}\n            priority // Load image immediately\n            quality={100} // Adjust quality for optimization\n            placeholder=\"blur\" // Placeholder to improve perceived performance\n            blurDataURL=\"data:image/svg+xml;base64,...\" // Use a small base64-encoded placeholder image\n          />\n        </FadeIn>\n      </div>\n    ),\n  },\n  {\n    Icon: \"\",\n    name: \"AI Integrations\",\n    description:\n      \"Generative UIs, LLMs, Transformers, Chatbots, Classification, and more.\",\n    href: `#/tags/ai`,\n    cta: \"Visit AI projects\",\n    className: \"col-span-3 md:col-span-2\",\n    background: (\n      <motion.div\n        initial={{ opacity: 0 }}\n        animate={{ opacity: 1 }}\n        transition={{ duration: 1.5 }}\n      >\n        <BlurIn duration={0.5} className=\"h-full\">\n          <Image\n            className=\"object-cover object-center h-full w-full\"\n            src={process.env.AVATAR_URL || defaultBgImages[2].image}\n            alt=\"avatar image\"\n            width={300}\n            height={200}\n            priority // Load image immediately\n            quality={100} // Adjust quality for optimization\n            placeholder=\"blur\" // Placeholder to improve perceived performance\n            blurDataURL=\"data:image/svg+xml;base64,...\" // Use a small base64-encoded placeholder image\n          />\n        </BlurIn>\n      </motion.div>\n    ),\n  },\n  {\n    Icon: \"\",\n    name: \"Seamless Deployments\",\n    description: \"Push, build, deploy.\",\n    className: \"col-span-3 md:col-span-1\",\n    href: `${process.env.NEXT_PUBLIC_PORTFOLIO_URL}/tags/vercel`,\n    cta: \"Learn more\",\n    background: (\n      <div className=\"absolute w-full h-full right-0 top-0 origin-top rounded-md transition-all duration-300 ease-out [mask-image:linear-gradient(to_top,transparent_25%,#000_70%)] group-hover:scale-105\">\n        <BlurIn duration={0.5} className=\"h-full\">\n          <Image\n            className=\"object-cover object-center h-full w-full\"\n            src={process.env.AVATAR_URL || defaultBgImages[3].image}\n            alt=\"avatar image\"\n            width={300}\n            height={200}\n            priority // Load image immediately\n            quality={100} // Adjust quality for optimization\n            placeholder=\"blur\" // Placeholder to improve perceived performance\n            blurDataURL=\"data:image/svg+xml;base64,...\" // Use a small base64-encoded placeholder image\n          />\n        </BlurIn>\n      </div>\n    ),\n  },\n  {\n    Icon: \"\",\n    name: \"Worldwide Reach\",\n    description:\n      \"Deploy to any region on earth. From remote servers, on-prem, in the cloud, or to the edge.\",\n    className: \"col-span-3 md:col-span-3\",\n    href: `#/tags/vercel`,\n    cta: \"Learn more\",\n    background: (\n      <div className=\"absolute w-full h-full right-0 top-0 origin-top rounded-md transition-all duration-300 ease-out  [mask-image:linear-gradient(to_top,transparent_20%,#000_100%)] md:[mask-image:linear-gradient(to_top,transparent_10%,#000_100%)] group-hover:scale-105 group-hover:-translate-y-4\">\n        <BlurIn duration={0.5} className=\"h-full\">\n          <Image\n            className=\"object-cover object-center h-full w-full\"\n            src={process.env.AVATAR_URL || defaultBgImages[4].image}\n            alt=\"avatar image\"\n            width={300}\n            height={200}\n            priority // Load image immediately\n            quality={100} // Adjust quality for optimization\n            placeholder=\"blur\" // Placeholder to improve perceived performance\n            blurDataURL=\"data:image/svg+xml;base64,...\" // Use a small base64-encoded placeholder image\n          />\n        </BlurIn>\n      </div>\n    ),\n  },\n  {\n    Icon: \"\",\n    name: \"GitHub Stars\",\n    description: \"Star this repository to show your support.\",\n    className: \"col-span-3 md:col-span-1\",\n    href: `${process.env.GITHUB_URL}/${process.env.REPO_NAME}`,\n    cta: \"Star repository\",\n    background: (\n      <div className=\"absolute h-full w-full left-0 top-0 origin-top rounded-md transition-all duration-300 ease-out [mask-image:linear-gradient(to_top,transparent_40%,#000_70%)] group-hover:scale-105 group-hover:-translate-y-4\">\n        <div className=\"text-7xl font-semibold w-full flex justify-center items-center h-2/3 group-hover:-translate-y-2 transition-all duration-300\">\n          <a\n            href={`${process.env.GITHUB_URL}/${process.env.REPO_NAME}`}\n            className=\"flex items-center gap-2 border shadow-xl p-5 rounded-lg border-gray-950/[.1] bg-gray-950/[.01] hover:bg-gray-950/[.05] dark:border-gray-50/[.1] dark:bg-gray-50/[.10] dark:hover:bg-gray-50/[.15]\"\n          >\n            <BlurIn duration={0.5} className=\"h-full\">\n              <Image\n                className=\"object-cover object-center h-full w-full\"\n                src={process.env.AVATAR_URL || defaultBgImages[5].image}\n                alt=\"avatar image\"\n                width={120}\n                height={90}\n                priority // Load image immediately\n                quality={100} // Adjust quality for optimization\n                placeholder=\"blur\" // Placeholder to improve perceived performance\n                blurDataURL=\"data:image/svg+xml;base64,...\" // Use a small base64-encoded placeholder image\n              />\n            </BlurIn>\n          </a>\n        </div>\n      </div>\n    ),\n  },\n  {\n    Icon: \"\",\n    name: \"Project Showcase\",\n    description:\n      \"Here are a few of my recent projects, using the technologies mentioned above.\",\n    className: \"col-span-3 md:col-span-2\",\n    href: `${process.env.NEXT_PUBLIC_PORTFOLIO_URL}/projects`,\n    cta: \"All projects\",\n    background: (\n      <div className=\"absolute h-full w-full left-0 top-0 origin-top rounded-md transition-all duration-300 ease-out group-hover:scale-[102%]\">\n        <div className=\"absolute h-full w-full [mask-image:linear-gradient(to_top,transparent_20%,#000_70%)]\">\n          <div className=\"absolute h-full w-full [mask-image:linear-gradient(to_bottom,transparent_2%,#000_10%)]\">\n            <div className=\"text-7xl font-semibold w-full flex justify-center items-center h-2/3 transition-all duration-300\">\n              <div className=\"flex items-center gap-2\">\n                <BlurIn duration={0.5} className=\"h-full\">\n                  <Image\n                    className=\"object-cover object-center h-full w-full\"\n                    src={process.env.AVATAR_URL || defaultBgImages[6].image}\n                    alt=\"avatar image\"\n                    width={300}\n                    height={200}\n                    priority // Load image immediately\n                    quality={100} // Adjust quality for optimization\n                    placeholder=\"blur\" // Placeholder to improve perceived performance\n                    blurDataURL=\"data:image/svg+xml;base64,...\" // Use a small base64-encoded placeholder image\n                  />\n                </BlurIn>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    ),\n  },\n  {\n    Icon: \"\",\n    name: \"Daily Visitors\",\n    description:\n      \"Live visitor stats for this website, powered by Umami Analytics.\",\n    href: \"https://umami.is\",\n    cta: \"Umami\",\n    className: \"col-span-3 md:col-span-2\",\n    background: (\n      <>\n        <div className=\"absolute h-full w-full left-0 top-0 origin-top rounded-md transition-all duration-300 ease-out group-hover:scale-[102%]\">\n          <div className=\"absolute h-full w-full [mask-image:linear-gradient(to_top,transparent_20%,#000_70%)]\">\n            <div className=\"absolute h-full w-full [mask-image:linear-gradient(to_bottom,transparent_2%,#000_10%)]\">\n              <BlurIn duration={0.5} className=\"h-full\">\n                <Image\n                  className=\"object-cover object-center h-full w-full\"\n                  src={\n                    process.env.AVATAR_URL || defaultBgImages[6].image}\n                  alt=\"avatar image\"\n                  width={300}\n                  height={200}\n                  priority // Load image immediately\n                  quality={100} // Adjust quality for optimization\n                  placeholder=\"blur\" // Placeholder to improve perceived performance\n                  blurDataURL=\"data:image/svg+xml;base64,...\" // Use a small base64-encoded placeholder image\n                />\n              </BlurIn>\n            </div>\n            <div className=\"sm:-translate-y-5\"></div>\n          </div>\n        </div>\n      </>\n    ),\n  },\n  {\n    Icon: \"\",\n    name: \"\",\n    description: \"\",\n    className: \"col-span-3 md:col-span-1\",\n    href: `${process.env.NEXT_PUBLIC_PORTFOLIO_URL}/now`,\n    cta: \"Ideas\",\n    background: (\n      <div className=\"absolute h-full w-full left-0 top-0 origin-top rounded-md transition-all duration-300 ease-out group-hover:scale-[105%]\">\n        <div className=\"absolute h-full w-full [mask-image:linear-gradient(to_top,transparent_20%,#000_70%)]\">\n          <div className=\"absolute h-full w-full [mask-image:linear-gradient(to_bottom,transparent_2%,#000_10%)]\">\n            <BlurIn duration={0.5} className=\"h-full\">\n              <Image\n                className=\"object-cover object-center h-full w-full\"\n                src={\n                  process.env.AVATAR_URL || defaultBgImages[7].image}\n                alt=\"avatar image\"\n                width={300}\n                height={200}\n                priority // Load image immediately\n                quality={100} // Adjust quality for optimization\n                placeholder=\"blur\" // Placeholder to improve perceived performance\n                blurDataURL=\"data:image/svg+xml;base64,...\" // Use a small base64-encoded placeholder image\n              />\n            </BlurIn>\n          </div>\n        </div>\n      </div>\n    ),\n  },\n  {\n    Icon: \"\",\n    name: \"\",\n    description: \"\",\n    className: \"col-span-3 md:col-span-3\",\n    href: \"\",\n    cta: \"\",\n    background: (\n      <div\n        id=\"contact-form\"\n        className=\"absolute h-full w-full left-0 top-0 origin-top rounded-md transition-all duration-300 ease-out [mask-image:linear-gradient(to_top,transparent_0%,#000_0%)]\"\n      >\n        <div className=\"absolute inset-0 z-50 flex justify-center items-center gap-5 p-5\">\n          <div className=\"max-w-sm w-full flex flex-col gap-2\">\n            <div className=\"text-5xl md:text-6xl font-semibold text-neutral-700 dark:text-neutral-300 w-full flex justify-start\">\n              <BlurIn duration={0.5} className=\"h-full\">\n                Get in touch.\n              </BlurIn>\n            </div>\n            <div className=\"w-full flex justify-center text-neutral-500 dark:text-neutral-400\">\n              Leave your email to get the conversation started. We&apos;ll be in\n              touch soon.\n            </div>\n            <div className=\"text-sm text-neutral-500 dark:text-neutral-400 mt-2\">\n              *Your email will never be shared with anyone.\n            </div>\n            <div className=\"\"></div>\n          </div>\n        </div>\n      </div>\n    ),\n  },\n];\nexport function Bento() {\n  return (\n    <>\n      <BentoGrid>\n        {features.map((feature, idx) => (\n          <BentoCard key={idx} {...feature} />\n        ))}\n      </BentoGrid>\n    </>\n  );\n}\n",
      "type": "registry:block",
      "target": "components/fellasUI/block/bento/bento.tsx"
    }
  ]
}