Spaces:
Running
Running
File size: 2,860 Bytes
86a3569 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 | const Features = () => {
const features = [
{
icon: "cpu",
title: "Blazing Fast Performance",
description: "Optimized with modern React and Tailwind for lightning-fast load times and smooth animations."
},
{
icon: "smartphone",
title: "Fully Responsive",
description: "Looks great on any device, from mobile phones to large desktop displays."
},
{
icon: "moon",
title: "Dark Mode Ready",
description: "Automatic dark mode detection with toggle option for user preference."
},
{
icon: "code",
title: "Clean Code",
description: "Modular components with proper separation of concerns for easy maintenance."
}
];
return (
<section className="py-16 bg-gray-50 dark:bg-gray-800 transition-colors duration-300">
<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 dark:text-white mb-4">
Why Choose PixelPulse?
</h2>
<p className="text-gray-600 dark:text-gray-300 max-w-2xl mx-auto">
We combine cutting-edge technology with elegant design to deliver exceptional digital experiences.
</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="bg-white dark:bg-gray-700 p-8 rounded-xl shadow-lg hover:shadow-xl transition-shadow duration-300 group"
>
<div className="w-14 h-14 bg-indigo-100 dark:bg-pink-900 rounded-lg flex items-center justify-center mb-6 group-hover:bg-indigo-500 dark:group-hover:bg-pink-500 transition-colors">
<i
data-feather={feature.icon}
className="text-indigo-500 dark:text-pink-500 w-6 h-6 group-hover:text-white transition-colors"
></i>
</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>
);
} |