66 lines
2.3 KiB
TypeScript
66 lines
2.3 KiB
TypeScript
import { motion } from 'framer-motion'
|
|
import { Globe } from '../../components/ui/Globe'
|
|
import { CountUpNumber } from '../../components/CountUpNumber'
|
|
import { Container } from '../../components/Container'
|
|
|
|
const stats = [
|
|
{ value: 54958, label: 'CPU Cores' },
|
|
{ value: 1493, label: 'Nodes' },
|
|
{ value: 5388956, label: 'GB Storage' },
|
|
{ value: 44, label: 'Countries' },
|
|
]
|
|
|
|
export function CloudHero() {
|
|
return (
|
|
<section className="relative bg-white py-20 lg:py-32">
|
|
<Container>
|
|
<div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
|
|
{/* Text Content */}
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 20 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.8 }}
|
|
>
|
|
<h1 className="text-4xl lg:text-6xl font-medium tracking-tight text-gray-900">
|
|
Mycelium Cloud
|
|
</h1>
|
|
<p className="mt-6 text-lg lg:text-xl text-gray-600">
|
|
Revolutionary Kubernetes platform that transforms how teams deploy and manage cloud-native applications at scale
|
|
</p>
|
|
</motion.div>
|
|
|
|
{/* Globe */}
|
|
<motion.div
|
|
initial={{ opacity: 0, scale: 0.9 }}
|
|
animate={{ opacity: 1, scale: 1 }}
|
|
transition={{ duration: 0.8, delay: 0.2 }}
|
|
className="flex items-center justify-center"
|
|
>
|
|
<div className="relative w-full max-w-[500px] aspect-square">
|
|
<Globe className="w-full h-full" />
|
|
</div>
|
|
</motion.div>
|
|
</div>
|
|
|
|
{/* Stats */}
|
|
<div className="mt-16 grid grid-cols-2 md:grid-cols-4 gap-6">
|
|
{stats.map((stat, index) => (
|
|
<motion.div
|
|
key={stat.label}
|
|
initial={{ opacity: 0, y: 20 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.5, delay: 0.4 + index * 0.1 }}
|
|
className="rounded-2xl bg-gray-50 border border-gray-200 p-6 text-center hover:shadow-md transition-shadow"
|
|
>
|
|
<div className="text-2xl lg:text-3xl font-bold text-cyan-500">
|
|
<CountUpNumber end={stat.value} />
|
|
</div>
|
|
<p className="mt-2 text-sm text-gray-600">{stat.label}</p>
|
|
</motion.div>
|
|
))}
|
|
</div>
|
|
</Container>
|
|
</section>
|
|
)
|
|
}
|