import React from 'react';
import { CheckCircle } from 'lucide-react';

function AboutCardFeature() {
  const features = [
    'Modern React components',
    'TypeScript support',
    'Responsive design',
    'Accessibility built-in',
    'Custom theming',
    'Developer tools'
  ];

  return (
    <section className="py-16 bg-white">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
          <div>
            <h2 className="text-3xl md:text-4xl font-bold text-gray-900 mb-6">
              Everything you need to build faster
            </h2>
            <p className="text-xl text-gray-600 mb-8">
              Our comprehensive component library includes everything you need to build modern web applications quickly and efficiently.
            </p>
            
            <div className="space-y-4">
              {features.map((feature, index) => (
                <div key={index} className="flex items-center">
                  <CheckCircle className="w-6 h-6 text-green-500 mr-3" />
                  <span className="text-gray-700 font-medium">{feature}</span>
                </div>
              ))}
            </div>
            
            <button className="mt-8 bg-blue-600 text-white px-8 py-3 rounded-lg font-semibold hover:bg-blue-700 transition-colors">
              Learn More
            </button>
          </div>
          
          <div>
            <img src="/images/devtools.7a9f095a-1768917228138.png" alt="Features" className="rounded-lg shadow-lg" />
          </div>
        </div>
      </div>
    </section>
  );
}

export default AboutCardFeature;
