95 lines
3.8 KiB
TypeScript
95 lines
3.8 KiB
TypeScript
import { Button } from '@/components/ui/button'
|
|
import { ArrowRight, Play, Shield, Zap, Globe } from 'lucide-react'
|
|
|
|
const Hero = () => {
|
|
return (
|
|
<section className="relative min-h-screen flex items-center justify-center overflow-hidden">
|
|
{/* Background */}
|
|
<div className="absolute inset-0">
|
|
<div className="w-full h-full bg-gradient-to-br from-primary/20 via-secondary/10 to-primary/20" />
|
|
<div className="absolute inset-0 bg-gradient-to-br from-primary/90 via-secondary/80 to-primary/90" />
|
|
</div>
|
|
|
|
{/* Content */}
|
|
<div className="relative z-10 container mx-auto px-4 py-20">
|
|
<div className="max-w-4xl mx-auto text-center text-white">
|
|
{/* Trust Badges */}
|
|
<div className="flex items-center justify-center space-x-6 mb-8 text-sm opacity-90">
|
|
<div className="flex items-center space-x-2">
|
|
<Shield className="w-4 h-4" />
|
|
<span>99.9% Uptime</span>
|
|
</div>
|
|
<div className="flex items-center space-x-2">
|
|
<Zap className="w-4 h-4" />
|
|
<span>SSD Storage</span>
|
|
</div>
|
|
<div className="flex items-center space-x-2">
|
|
<Globe className="w-4 h-4" />
|
|
<span>Global CDN</span>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Main Heading */}
|
|
<h1 className="text-5xl md:text-7xl font-bold mb-6 leading-tight text-balance">
|
|
Professional
|
|
<span className="block bg-gradient-to-r from-white to-primary-glow bg-clip-text text-transparent">
|
|
Hosting Solutions
|
|
</span>
|
|
</h1>
|
|
|
|
{/* Subtitle */}
|
|
<p className="text-xl md:text-2xl mb-8 text-white/90 max-w-3xl mx-auto leading-relaxed text-balance font-medium">
|
|
VPS, Kubernetes, Developer Services, and Web Tools. Everything you need to build,
|
|
deploy, and scale your applications with confidence.
|
|
</p>
|
|
|
|
{/* CTAs */}
|
|
<div className="flex flex-col sm:flex-row items-center justify-center space-y-4 sm:space-y-0 sm:space-x-6 mb-12">
|
|
<Button variant="glass" size="xl" className="group">
|
|
Start Free Trial
|
|
<ArrowRight className="w-5 h-5 transition-transform group-hover:translate-x-1" />
|
|
</Button>
|
|
<Button
|
|
variant="outline"
|
|
size="xl"
|
|
className="bg-white/10 border-white/30 text-white hover:bg-white/20"
|
|
>
|
|
<Play className="w-5 h-5" />
|
|
Watch Demo
|
|
</Button>
|
|
</div>
|
|
|
|
{/* Stats */}
|
|
<div className="grid grid-cols-2 md:grid-cols-4 gap-8 pt-8 border-t border-white/20">
|
|
<div className="text-center">
|
|
<div className="text-3xl font-bold mb-1">50k+</div>
|
|
<div className="text-sm opacity-80">Active Users</div>
|
|
</div>
|
|
<div className="text-center">
|
|
<div className="text-3xl font-bold mb-1">99.9%</div>
|
|
<div className="text-sm opacity-80">Uptime SLA</div>
|
|
</div>
|
|
<div className="text-center">
|
|
<div className="text-3xl font-bold mb-1">24/7</div>
|
|
<div className="text-sm opacity-80">Support</div>
|
|
</div>
|
|
<div className="text-center">
|
|
<div className="text-3xl font-bold mb-1">5+ Years</div>
|
|
<div className="text-sm opacity-80">Experience</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Scroll Indicator */}
|
|
<div className="absolute bottom-8 left-1/2 transform -translate-x-1/2 text-white/60">
|
|
<div className="animate-bounce">
|
|
<ArrowRight className="w-6 h-6 rotate-90" />
|
|
</div>
|
|
</div>
|
|
</section>
|
|
)
|
|
}
|
|
|
|
export default Hero
|