Free Next.js 15 & Tailwind CSS Code Snippet Generator – React 19 UI Components

'use client';

import React from 'react';
import { Sparkles, ArrowRight } from 'lucide-react';

interface FeatureCardProps {
  title: string;
  description: string;
  badge?: string;
  onAction?: () => void;
}

export default function FeatureCard({ title, description, badge = 'New', onAction }: FeatureCardProps) {
  return (
    <div className="relative group overflow-hidden rounded-3xl p-6 bg-slate-900/60 backdrop-blur-xl border border-slate-800 hover:border-cyan-500/50 transition-all duration-300 shadow-2xl hover:shadow-cyan-500/10">
      <div className="absolute inset-0 -z-10 bg-gradient-to-br from-cyan-500/5 via-transparent to-indigo-500/5 opacity-0 group-hover:opacity-100 transition-opacity" />
      
      <div className="flex items-center justify-between gap-2 mb-4">
        <span className="px-2.5 py-0.5 rounded-full text-[11px] font-bold bg-cyan-500/10 border border-cyan-500/30 text-cyan-400">
          {badge}
        </span>
        <Sparkles className="w-4 h-4 text-cyan-400 group-hover:rotate-12 transition-transform" />
      </div>

      <h3 className="text-lg font-bold text-white mb-2 group-hover:text-cyan-300 transition-colors">
        {title}
      </h3>
      <p className="text-xs text-slate-400 leading-relaxed mb-6">
        {description}
      </p>

      <button
        onClick={onAction}
        className="w-full py-2.5 px-4 rounded-xl bg-slate-800 hover:bg-cyan-500 hover:text-slate-950 text-white font-bold text-xs transition-all flex items-center justify-center gap-1.5 cursor-pointer"
      >
        <span>Explore Feature</span>
        <ArrowRight className="w-3.5 h-3.5" />
      </button>
    </div>
  );
}