Add src/components/sections/about/AboutCardFeature.js

src/components/sections/about/AboutCardFeature.js

@@ -0,0 +1,49 @@
+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;