82 lines
2.6 KiB
TypeScript
82 lines
2.6 KiB
TypeScript
import { Shield, Clock, Headphones, Award, Globe, Lock, Zap, Users } from 'lucide-react'
|
|
|
|
const Features = () => {
|
|
const features = [
|
|
{
|
|
icon: Shield,
|
|
title: '99.9% Uptime SLA',
|
|
description: 'Industry-leading uptime guarantee with compensation for outages',
|
|
},
|
|
{
|
|
icon: Clock,
|
|
title: '24/7 Support',
|
|
description: 'Round-the-clock technical support from hosting experts',
|
|
},
|
|
{
|
|
icon: Lock,
|
|
title: 'Enterprise Security',
|
|
description: 'DDoS protection, SSL certificates, and security monitoring',
|
|
},
|
|
{
|
|
icon: Zap,
|
|
title: 'Lightning Fast',
|
|
description: 'SSD storage, CDN, and optimized server configurations',
|
|
},
|
|
{
|
|
icon: Globe,
|
|
title: 'Global Infrastructure',
|
|
description: 'Data centers worldwide for optimal performance',
|
|
},
|
|
{
|
|
icon: Users,
|
|
title: 'Developer Friendly',
|
|
description: 'APIs, documentation, and tools built for developers',
|
|
},
|
|
{
|
|
icon: Award,
|
|
title: 'Industry Recognition',
|
|
description: 'Trusted by 50,000+ developers and businesses worldwide',
|
|
},
|
|
{
|
|
icon: Headphones,
|
|
title: 'Expert Consultation',
|
|
description: 'Human developer consulting for complex projects',
|
|
},
|
|
]
|
|
|
|
return (
|
|
<section className="py-24 bg-background">
|
|
<div className="container mx-auto px-4">
|
|
<div className="text-center mb-16">
|
|
<h2 className="text-4xl font-bold mb-4">Why Choose SiliconPin?</h2>
|
|
<p className="text-xl text-muted-foreground max-w-2xl mx-auto">
|
|
Built by developers, for developers. We understand what you need to succeed.
|
|
</p>
|
|
</div>
|
|
|
|
<div className="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
|
|
{features.map((feature, index) => {
|
|
const Icon = feature.icon
|
|
return (
|
|
<div
|
|
key={index}
|
|
className="text-center group hover:scale-105 transition-transform duration-300"
|
|
>
|
|
<div className="w-16 h-16 bg-gradient-primary rounded-xl flex items-center justify-center mx-auto mb-6 group-hover:shadow-glow transition-shadow duration-300">
|
|
<Icon className="w-8 h-8 text-white" />
|
|
</div>
|
|
<h3 className="text-lg font-semibold mb-3">{feature.title}</h3>
|
|
<p className="text-muted-foreground text-sm leading-relaxed">
|
|
{feature.description}
|
|
</p>
|
|
</div>
|
|
)
|
|
})}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
)
|
|
}
|
|
|
|
export default Features
|