Spaces:
Sleeping
Sleeping
File size: 2,454 Bytes
587c8e5 |
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 62 63 64 65 66 |
import { Cpu, Zap, Wifi, Code, Shield, Users } from 'lucide-react';
const features = [
{
icon: Cpu,
title: 'High Performance',
description: 'Powered by advanced actuators providing precise control and smooth movements for complex tasks.',
},
{
icon: Zap,
title: 'Easy Setup',
description: 'Get started in minutes with our intuitive setup process and comprehensive documentation.',
},
{
icon: Wifi,
title: 'Cloud Connected',
description: 'Seamlessly integrate with cloud services and control your robot from anywhere in the world.',
},
{
icon: Code,
title: 'Open Source',
description: 'Fully open-source hardware and software. Customize and extend to fit your specific needs.',
},
{
icon: Shield,
title: 'Safe & Reliable',
description: 'Built with safety in mind. Includes collision detection and emergency stop functionality.',
},
{
icon: Users,
title: 'Community Driven',
description: 'Join a vibrant community of developers, researchers, and robotics enthusiasts.',
},
];
export default function Features() {
return (
<section id="features" className="py-24 bg-gray-800/50">
<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 mb-4">
<span className="text-gradient">Powerful Features</span>
</h2>
<p className="text-gray-400 text-lg max-w-2xl mx-auto">
Everything you need to bring your robotics projects to life
</p>
</div>
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
{features.map((feature, index) => (
<div
key={index}
className="group bg-gray-900 border border-gray-700 rounded-2xl p-8 hover:border-primary-500/50 transition-all duration-300 hover:shadow-lg hover:shadow-primary-500/10"
>
<div className="w-14 h-14 bg-gradient-to-br from-primary-500 to-accent-500 rounded-xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
<feature.icon className="w-7 h-7 text-white" />
</div>
<h3 className="text-xl font-semibold mb-3 text-white">{feature.title}</h3>
<p className="text-gray-400">{feature.description}</p>
</div>
))}
</div>
</div>
</section>
);
} |