initial commit

components/Features.tsx

@@ -0,0 +1,81 @@
+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