Initial commit

src/pages/cloud/CloudHero.tsx

@@ -0,0 +1,65 @@
+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>
+  )
+}