"use client"; import React, { useRef, useState } from "react"; import { motion } from "motion/react"; import { BarChart3, Users, Calendar, Users2, Activity } from "lucide-react"; const Card = ({ bgColor, index, isHovered, }: { bgColor: string; index: number; isHovered: boolean; }) => { const ref = useRef(null); const firstCardAnimation = isHovered ? { x: 15, scale: 0.95, opacity: 0.6, } : { x: 0, scale: 1, opacity: 1, }; const lastCardAnimation = isHovered ? { x: 0, scale: 1, opacity: 1, } : { x: 15, scale: 0.95, opacity: 0.6, }; const cardContent = [ { title: "Feature Alpha", description: "Primary functionality with core benefits", badge: "New", metric: "98%", metricLabel: "Success", icon: BarChart3, }, { title: "Feature Beta", description: "Secondary feature for enhanced experience", badge: "Active", metric: "2.5k", metricLabel: "Active", icon: Users, }, { title: "Feature Gamma", description: "Advanced functionality for power users", badge: "Updated", metric: "24", metricLabel: "Items", icon: Calendar, }, { title: "Feature Delta", description: "Collaborative tools for team productivity", badge: "Popular", metric: "92%", metricLabel: "Rating", icon: Users2, }, ]; const content = cardContent[index]; const IconComponent = content.icon; return (

{content.title}

{content.description}

{content.metric}

{content.metricLabel}

); }; function FeatureList() { const cardColors = [ "bg-neutral-800", "bg-neutral-800", "bg-neutral-800", "bg-neutral-800", ]; const [isHovered, setIsHovered] = useState(false); return (

setIsHovered(true)} onMouseLeave={() => setIsHovered(false)} className="relative bg-neutral-900 h-[23rem] w-[42rem] rounded-lg shadow-[0_-2px_4px_rgba(255,255,255,0.1),0_-8px_16px_rgba(255,255,255,0.05),0_-16px_32px_rgba(255,255,255,0.02)] overflow-hidden" > {cardColors.map((color, index) => ( ))}

Sample Data

Interactive component showcase

); } export default FeatureList;

Featurelist

Feature Alpha

Feature Beta

Feature Gamma

Feature Delta

Installation