54 lines
1.8 KiB
TypeScript
54 lines
1.8 KiB
TypeScript
import React from 'react';
|
|
import { Rocket, Shield, Zap } from 'lucide-react';
|
|
|
|
const FeatureCardOne = () => {
|
|
const features = [
|
|
{
|
|
icon: <Rocket className="w-8 h-8 text-blue-600" />,
|
|
title: 'Fast Performance',
|
|
description: 'Optimized for speed and performance with modern web standards.'
|
|
},
|
|
{
|
|
icon: <Shield className="w-8 h-8 text-green-600" />,
|
|
title: 'Secure by Default',
|
|
description: 'Built with security best practices and regular updates.'
|
|
},
|
|
{
|
|
icon: <Zap className="w-8 h-8 text-yellow-600" />,
|
|
title: 'Easy to Use',
|
|
description: 'Simple API and comprehensive documentation for quick setup.'
|
|
}
|
|
];
|
|
|
|
return (
|
|
<section className="py-20 bg-white dark:bg-gray-900">
|
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div className="text-center mb-16">
|
|
<h2 className="text-4xl font-bold text-gray-900 dark:text-white mb-4">
|
|
Why Choose Our Components?
|
|
</h2>
|
|
<p className="text-xl text-gray-600 dark:text-gray-300 max-w-2xl mx-auto">
|
|
Everything you need to build modern web applications.
|
|
</p>
|
|
</div>
|
|
<div className="grid md:grid-cols-3 gap-8">
|
|
{features.map((feature, index) => (
|
|
<div key={index} className="bg-gray-50 dark:bg-gray-800 p-8 rounded-xl text-center">
|
|
<div className="flex justify-center mb-4">
|
|
{feature.icon}
|
|
</div>
|
|
<h3 className="text-xl font-semibold text-gray-900 dark:text-white mb-3">
|
|
{feature.title}
|
|
</h3>
|
|
<p className="text-gray-600 dark:text-gray-300">
|
|
{feature.description}
|
|
</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export default FeatureCardOne; |