"use client";

export default function HomePage() {
  const features = [
    {
      title: "Dependency Injection",      description: "Built-in dependency injection container makes your code more testable and maintainable",      imageSrc: "/images/di.a0b12f44-1768997608322.svg",      imageAlt: "Dependency Injection architecture"
    },
    {
      title: "Microservices",      description: "Build scalable applications with microservices architecture",      imageSrc: "/images/microservices.e0074903-1768997608338.svg",      imageAlt: "Microservices architecture"
    },
    {
      title: "Ecosystem",      description: "Rich ecosystem of modules and plugins for rapid development",      imageSrc: "/images/ecosystem.eaa69289-1768997608340.svg",      imageAlt: "Ecosystem overview"
    },
    {
      title: "Type Safety",      description: "Built with TypeScript for better developer experience and fewer runtime errors",      imageSrc: "/images/type-safety.34453790-1768997608341.svg",      imageAlt: "TypeScript type safety"
    },
    {
      title: "Modular",      description: "Modular architecture allows you to use only what you need",      imageSrc: "/images/puzzle.c9dfc495-1768997608342.svg",      imageAlt: "Modular architecture"
    },
    {
      title: "3D Graphics",      description: "Advanced 3D graphics capabilities for modern web applications",      imageSrc: "/images/3d.cfabe065-1768997608344.svg",      imageAlt: "3D graphics"
    }
  ];

  return (
    <div className="min-h-screen bg-gradient-to-br from-slate-900 via-purple-900 to-slate-900">
      <div className="container mx-auto px-4 py-16">
        <div className="text-center mb-16">
          <h1 className="text-5xl md:text-7xl font-bold text-white mb-6">
            Build Better Apps
          </h1>
          <p className="text-xl text-gray-300 max-w-2xl mx-auto">
            A progressive Node.js framework for building efficient and scalable server-side applications
          </p>
        </div>
        
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
          {features.map((feature, index) => (
            <div key={index} className="bg-white/10 backdrop-blur-sm rounded-lg p-6 hover:bg-white/20 transition-colors">
              <img 
                src={feature.imageSrc} 
                alt={feature.imageAlt}
                className="w-16 h-16 mb-4"
              />
              <h3 className="text-xl font-semibold text-white mb-2">
                {feature.title}
              </h3>
              <p className="text-gray-300">
                {feature.description}
              </p>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}