Update src/components/sections/feature/FeatureCardOne.tsx

src/components/sections/feature/FeatureCardOne.tsx

@@ -1,56 +1,46 @@
 import React from 'react';
-import { Zap, Shield, Rocket, Users } from 'lucide-react';
 
-const features = [
-  {
-    icon: <Zap className="h-8 w-8" />,
-    title: "Lightning Fast",    description: "Experience blazing fast performance with our optimized architecture and cutting-edge technology."
-  },
-  {
-    icon: <Shield className="h-8 w-8" />,
-    title: "Secure & Reliable",    description: "Your data is protected with enterprise-grade security measures and 99.9% uptime guarantee."
-  },
-  {
-    icon: <Rocket className="h-8 w-8" />,
-    title: "Scale with Ease",    description: "Grow your business without limits. Our platform scales automatically to meet your needs."
-  },
-  {
-    icon: <Users className="h-8 w-8" />,
-    title: "Team Collaboration",    description: "Work together seamlessly with real-time collaboration tools and shared workspaces."
-  }
-];
+const FeatureCardOne = () => {
+  const features = [
+    {
+      title: 'Lightning Fast',
+      description: 'Built with performance in mind, delivering exceptional speed and reliability.',
+      icon: '⚡',
+    },
+    {
+      title: 'Modern Design',
+      description: 'Clean, contemporary aesthetics that captivate and engage your audience.',
+      icon: '🎨',
+    },
+    {
+      title: 'Responsive',
+      description: 'Perfectly optimized for all devices, from mobile to desktop.',
+      icon: '📱',
+    },
+    {
+      title: 'Secure',
+      description: 'Enterprise-grade security measures to protect your data and users.',
+      icon: '🔒',
+    },
+  ];
 
-const FeatureCardOne: React.FC = () => {
   return (
-    <section className="py-24 bg-white">
+    <section className="py-20 bg-gray-900 text-white">
       <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
         <div className="text-center mb-16">
-          <h2 className="text-3xl md:text-4xl font-bold text-gray-900 mb-4">
-            Why Choose Our Platform?
+          <h2 className="text-3xl sm:text-4xl lg:text-5xl font-bold mb-4">
+            Why Choose Us
           </h2>
-          <p className="text-lg text-gray-600 max-w-3xl mx-auto">
-            Discover the features that make us the preferred choice for thousands of businesses worldwide.
+          <p className="text-lg sm:text-xl text-gray-400 max-w-2xl mx-auto">
+            Discover the features that make our platform stand out from the competition.
           </p>
         </div>
-        
         <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
           {features.map((feature, index) => (
-            <div key={index} className="group">
-              <div className="bg-white rounded-2xl p-8 shadow-lg hover:shadow-xl transition-shadow duration-300 border border-gray-100 hover:border-blue-200">
-                <div className="flex items-center justify-center w-16 h-16 bg-blue-100 rounded-xl mb-6 group-hover:bg-blue-200 transition-colors duration-300">
-                  <div className="text-blue-600">
-                    {feature.icon}
-                  </div>
-                </div>
-                
-                <h3 className="text-xl font-semibold text-gray-900 mb-4">
-                  {feature.title}
-                </h3>
-                
-                <p className="text-gray-600 leading-relaxed">
-                  {feature.description}
-                </p>
-              </div>
+            <div key={index} className="bg-gray-800 p-6 rounded-lg hover:bg-gray-700 transition-colors">
+              <div className="text-4xl mb-4">{feature.icon}</div>
+              <h3 className="text-xl font-semibold mb-3">{feature.title}</h3>
+              <p className="text-gray-400">{feature.description}</p>
             </div>
           ))}
         </div>
@@ -59,4 +49,4 @@ const FeatureCardOne: React.FC = () => {
   );
 };
 
-export default FeatureCardOne;
+export default FeatureCardOne;