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

src/components/sections/feature/FeatureCardOne.js

@@ -1,57 +1,85 @@
 import React from 'react';
-import { Rocket, Zap, Shield, Users } from 'lucide-react';
+import { Shield, Zap, Globe, Users } from 'lucide-react';
 
-function FeatureCardOne() {
+const FeatureCard = ({ icon: Icon, title, description }) => {
+  return (
+    <div className="group p-6 bg-white dark:bg-gray-800 rounded-2xl shadow-lg hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-2 border border-gray-100 dark:border-gray-700">
+      <div className="mb-4">
+        <div className="w-12 h-12 bg-gradient-to-r from-blue-500 to-purple-600 rounded-lg flex items-center justify-center group-hover:scale-110 transition-transform duration-300">
+          <Icon className="w-6 h-6 text-white" />
+        </div>
+      </div>
+      
+      <h3 className="text-xl font-semibold mb-3 text-gray-900 dark:text-white group-hover:text-blue-600 dark:group-hover:text-blue-400 transition-colors">
+        {title}
+      </h3>
+      
+      <p className="text-gray-600 dark:text-gray-300 leading-relaxed">
+        {description}
+      </p>
+    </div>
+  );
+};
+
+const FeatureCardOne = () => {
   const features = [
     {
-      icon: <Rocket size={32} />,
-      title: "Fast Performance",      description: "Lightning-fast loading times with optimized components and modern build tools.",      image: "/images/rocket.518dadfa-1768917245450.svg"
+      icon: Shield,
+      title: "Enterprise Security",      description: "Advanced encryption and security protocols to protect your data with military-grade protection systems."
     },
     {
-      icon: <Zap size={32} />,
-      title: "Easy to Use",      description: "Simple APIs and intuitive design make development a breeze for teams of all sizes.",      image: "/images/magic-wand.ff01fe1d-1768917245455.svg"
+      icon: Zap,
+      title: "Lightning Performance",      description: "Optimized for speed and efficiency, delivering results in milliseconds with our advanced infrastructure."
     },
     {
-      icon: <Shield size={32} />,
-      title: "Type Safe",      description: "Built with TypeScript for better developer experience and fewer runtime errors.",      image: "/images/type-safety.34453790-1768917245458.svg"
+      icon: Globe,
+      title: "Global Reach",      description: "Worldwide coverage with 99.9% uptime guarantee, ensuring your services are always accessible."
     },
     {
-      icon: <Users size={32} />,
-      title: "Team Friendly",      description: "Collaborative tools and documentation to help your team work together effectively.",      image: "/images/quality.d1d04ce8-1768917245456.svg"
+      icon: Users,
+      title: "Team Collaboration",      description: "Seamless collaboration tools designed for modern teams to work together efficiently and effectively."
     }
   ];
 
   return (
-    <section className="py-20 bg-white">
+    <section className="py-20 bg-gray-50 dark:bg-gray-900">
       <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        {/* Header */}
         <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-4xl md:text-5xl font-bold text-gray-900 dark:text-white mb-6">
+            Why Choose
+            <span className="block text-transparent bg-clip-text bg-gradient-to-r from-blue-600 to-purple-600">
+              Our Platform
+            </span>
           </h2>
-          <p className="text-xl text-gray-600 max-w-2xl mx-auto">
-            We've built everything you need to create amazing web experiences, 
-            from the ground up with modern best practices.
+          
+          <p className="text-xl text-gray-600 dark:text-gray-300 max-w-3xl mx-auto">
+            Discover the features that make us the preferred choice for businesses worldwide, 
+            delivering excellence in every aspect of our service.
           </p>
         </div>
-        
+
+        {/* Features Grid */}
         <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
           {features.map((feature, index) => (
-            <div key={index} className="bg-white rounded-xl p-6 shadow-lg hover:shadow-xl transition-shadow border border-gray-100">
-              <div className="text-blue-600 mb-4">
-                {feature.icon}
-              </div>
-              <h3 className="text-xl font-semibold text-gray-900 mb-3">
-                {feature.title}
-              </h3>
-              <p className="text-gray-600 leading-relaxed">
-                {feature.description}
-              </p>
-            </div>
+            <FeatureCard
+              key={index}
+              icon={feature.icon}
+              title={feature.title}
+              description={feature.description}
+            />
           ))}
         </div>
+
+        {/* CTA Section */}
+        <div className="text-center mt-16">
+          <button className="bg-gradient-to-r from-blue-600 to-purple-600 text-white px-8 py-4 rounded-full font-semibold hover:from-blue-700 hover:to-purple-700 transition-all duration-300 transform hover:scale-105 shadow-lg hover:shadow-xl">
+            Explore All Features
+          </button>
+        </div>
       </div>
     </section>
   );
-}
+};
 
-export default FeatureCardOne;
+export default FeatureCardOne;