Initial commit

src/pages/cloud/MyceliumNetworking.tsx

@@ -0,0 +1,49 @@
+import { motion } from 'framer-motion'
+import { Container } from '../../components/Container'
+
+export function MyceliumNetworking() {
+  return (
+    <section className="bg-white py-20 lg:py-32">
+      <Container>
+        <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
+          {/* Content */}
+          <motion.div
+            initial={{ opacity: 0, x: -20 }}
+            whileInView={{ opacity: 1, x: 0 }}
+            viewport={{ once: true }}
+            transition={{ duration: 0.8 }}
+          >
+            <h2 className="text-3xl lg:text-4xl font-medium tracking-tight text-gray-900">
+              Mycelium Networking
+            </h2>
+            <p className="mt-6 text-lg text-gray-600">
+              Ultra-fast, decentralized networking inspired by nature. Mycelium Networking forms a resilient, adaptive mesh that routes around failures and optimizes for speed and security.
+            </p>
+            <div className="mt-6 flex flex-wrap gap-3">
+              <span className="inline-flex items-center rounded-full border border-cyan-500 px-4 py-2 text-sm font-medium text-cyan-500">
+                End-to-end encrypted
+              </span>
+              <span className="inline-flex items-center rounded-full border border-cyan-500 px-4 py-2 text-sm font-medium text-cyan-500">
+                Nature-inspired
+              </span>
+            </div>
+          </motion.div>
+
+          {/* Visual Placeholder */}
+          <motion.div
+            initial={{ opacity: 0, x: 20 }}
+            whileInView={{ opacity: 1, x: 0 }}
+            viewport={{ once: true }}
+            transition={{ duration: 0.8 }}
+            className="relative aspect-square rounded-2xl bg-gradient-to-br from-cyan-50 to-blue-50 border border-gray-200 flex items-center justify-center"
+          >
+            <div className="text-center p-8">
+              <div className="text-6xl mb-4">🕸️</div>
+              <p className="text-gray-600">Decentralized Mesh Network</p>
+            </div>
+          </motion.div>
+        </div>
+      </Container>
+    </section>
+  )
+}