Initial commit

src/pages/network/About.tsx

@@ -0,0 +1,41 @@
+import { Button } from '../../components/Button'
+import { CircleBackground } from '../../components/CircleBackground'
+import { Container } from '../../components/Container'
+
+export function About() {
+  return (
+    <section
+      id="about"
+      className="relative overflow-hidden bg-gray-900 py-20 lg:py-32 lg:top-0 top-0"
+    >
+      <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2">
+        <CircleBackground color="#06b6d4" className="animate-spin-slower" />
+      </div>
+      <Container className="relative">
+        <div className="mx-auto max-w-3xl text-center">
+          <h2 className="text-base/7 font-semibold text-cyan-500">Our Mission</h2>
+          <p className="text-3xl lg:text-4xl font-medium tracking-tight text-white sm:text-4xl">
+            Discover Mycelium
+          </p>
+          <p className="mt-6 text-lg text-gray-300">
+            Mycelium is an unbreakable network, always finding the shortest path and providing 100% secure, peer-to-peer communication. But this is just the beginning.
+          </p>
+          <p className="mt-6 text-lg text-gray-300">
+            Our mission is to create a sustainable digital ecosystem where communication is seamless, data is secure, and scalability knows no bounds.
+          </p>
+          <div className="mt-8 flex justify-center">
+            <Button
+              to="https://threefold.info/mycelium_network/docs/"
+              as="a"
+              target="_blank"
+              variant="outline"
+              color="white"
+            >
+              Learn More
+            </Button>
+          </div>
+        </div>
+      </Container>
+    </section>
+  )
+}