62 lines
2.4 KiB
TypeScript
62 lines
2.4 KiB
TypeScript
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: React.FC = () => {
|
|
return (
|
|
<section className="py-24 bg-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>
|
|
<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>
|
|
</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>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export default FeatureCardOne; |