development/91b18844-c148-4ae0-9a69-cc57582d450b
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
development
2026-01-20 15:23:50 +00:00
parent 8435694e4f
commit 17a028c25a
1 changed files with 33 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

76
src/components/sections/feature/FeatureCardOne.tsx
View File

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