Aurora Bento Grid

import React from 'react';
import {
  AuroraBackground,
  BentoGrid,
  BentoGridItem,
} from '@/components/ui/aurora-bento-grid';
import {
  Briefcase,
  BarChart,
  Bell,
  Lock,
  Users,
  ArrowRight,
} from 'lucide-react';

/**
 * Main App component to demonstrate the colorful and animated Bento Grid.
 * @returns {JSX.Element} The rendered app with the Bento Grid.
 */
export default function DemoOne() {
  const features = [
    {
      icon: <Briefcase className="w-10 h-10 text-white" />,
      title: 'Project Management',
      description:
        'Organize tasks, deadlines, and team collaboration seamlessly.',
      className: 'md:col-span-4',
      gradientFrom: 'from-blue-500',
      gradientTo: 'to-cyan-400',
    },
    {
      icon: <BarChart className="w-10 h-10 text-white" />,
      title: 'Advanced Analytics',
      description:
        'Gain deep insights with our powerful data visualization tools.',
      className: 'md:col-span-2',
      gradientFrom: 'from-green-500',
      gradientTo: 'to-emerald-400',
    },
    {
      icon: <Bell className="w-10 h-10 text-white" />,
      title: 'Smart Notifications',
      description:
        'Stay updated with intelligent, context-aware alerts.',
      className: 'md:col-span-2',
      gradientFrom: 'from-yellow-500',
      gradientTo: 'to-amber-400',
    },
    {
      icon: <Users className="w-10 h-10 text-white" />,
      title: 'Team Collaboration',
      description:
        'Work together in real-time with shared spaces.',
      className: 'md:col-span-2',
      gradientFrom: 'from-purple-500',
      gradientTo: 'to-violet-400',
    },
    {
      icon: <Lock className="w-10 h-10 text-white" />,
      title: 'Enterprise-Grade Security',
      description:
        'Your data is protected with end-to-end encryption.',
      className: 'md:col-span-2',
      gradientFrom: 'from-red-500',
      gradientTo: 'to-orange-400',
    },
  ];

  return (
    <div className="min-h-screen w-full bg-gray-950 font-sans antialiased relative">
      <AuroraBackground />

      <div className="relative z-10 container mx-auto px-4 py-12">
        <div className="text-center mb-12">
          <h1
            className="
              text-4xl md:text-6xl font-extrabold tracking-tight
              bg-gradient-to-r from-pink-400 via-purple-400 to-indigo-500
              bg-clip-text text-transparent
            "
          >
            Features That Inspire
          </h1>
          <p className="mt-4 text-lg text-gray-300">
            Discover a new way to work and collaborate.
          </p>
        </div>

        <BentoGrid>
          {features.map((feature, i) => (
            <BentoGridItem
              key={i}
              className={feature.className}
              gradientFrom={feature.gradientFrom}
              gradientTo={feature.gradientTo}
            >
              <div className="mb-4">{feature.icon}</div>
              <div className="flex flex-col flex-grow">
                <h3 className="text-xl font-bold text-white mb-2">
                  {feature.title}
                </h3>
                <p className="text-gray-200 text-sm flex-grow">
                  {feature.description}
                </p>
              </div>
              <div className="mt-4">
                <a
                  href="#"
                  className="
                    text-white font-semibold text-sm inline-flex items-center
                    group
                  "
                >
                  Learn more
                  <ArrowRight className="ml-1 w-4 h-4 transition-transform duration-300 group-hover:translate-x-1" />
                </a>
              </div>
            </BentoGridItem>
          ))}
        </BentoGrid>
      </div>
    </div>
  );
}