Fast Performance

Optimize your app for lightning-fast speed and responsiveness. Our cutting-edge techniques ensure smooth user experiences.

Secure & Reliable

Ensure your data is protected with our advanced security measures. We implement industry-standard protocols to keep your information safe.

Mobile Friendly

Create responsive designs that work seamlessly across all devices. From smartphones to desktops, your app will look great everywhere.

Clean Code

Write maintainable and efficient code with our best practices. Our team follows strict coding standards to ensure long-term sustainability.

User-Centric Design

Design intuitive interfaces that prioritize user experience. We focus on creating interfaces that are both beautiful and easy to use.

Cloud Integration

Seamlessly integrate with popular cloud services and platforms. Leverage the power of the cloud to enhance your application's capabilities.

npm i framer-motion clsx tailwind-merge lucid-react

import { clsx } from "clsx"
import { twMerge } from "tailwind-merge"

export function cn(...inputs) {
  return twMerge(clsx(inputs))
}

"use client";

import { useState } from "react";
import { AnimatePresence, motion } from "framer-motion";
import { cn } from "@/lib/utils";

export default function CardHoverEffect({
  items,
  containerClassName,
  itemClassName,
  hoveredItemClassName,
  IconComponent,
}) {
  const [hoveredIdx, setHoveredIdx] = useState(null);

  return (
    <div className={cn("grid md:grid-cols-3", containerClassName)}>
      {items.map((item, idx) => {
        const { title, description, icon } = item;
        const Icon = icon || IconComponent;

        return (
          <div
            key={idx}
            className={cn("relative flex flex-col gap-3 p-4", itemClassName)}
            onMouseEnter={()=> setHoveredIdx(idx)}
            onMouseLeave={()=> setHoveredIdx(null)}
          >
            <AnimatePresence>
              {hoveredIdx === idx && (
                <motion.span
                  className={cn(
                    "absolute inset-0 z-0 block h-full w-full rounded-xl bg-neutral-900",
                    hoveredItemClassName
                  )}
                  layoutId="cardHoverEffect"
                  initial={{ opacity: 0 }}
                  animate={{
                    opacity: 1,
                    transition: { duration: 0.15 },
                  }}
                  exit={{
                    opacity: 0,
                    transition: { duration: 0.15, delay: 0.2 },
                  }}
                />
              )}
            </AnimatePresence>
            <div className="z-[1] space-y-3">
              <div className="flex items-center space-x-3">
                {Icon && <Icon className="w-6 h-6 text-neutral-500" />}
                <h1 className="font-medium text-white">{title}</h1>
              </div>
              <p className="text-neutral-400 text-sm">{description}</p>
            </div>
          </div>
        );
      })}
    </div>
  );
}