Initial commit

2025-10-22 17:30:00 +03:00
commit 205c8fd0d9
134 changed files with 8080 additions and 0 deletions
--- a/src/pages/network/Hero.tsx
+++ b/src/pages/network/Hero.tsx
@@ -0,0 +1,114 @@
+import { useId } from 'react'
+import { Container } from '../../components/Container'
+import { Button } from '../../components/Button'
+
+function BackgroundIllustration(props: React.ComponentPropsWithoutRef<'div'>) {
+  let id = useId()
+
+  return (
+    <div {...props}>
+      <svg
+        viewBox="0 0 1026 1026"
+        fill="none"
+        aria-hidden="true"
+        className="absolute inset-0 h-full w-full animate-spin-slow"
+      >
+        <path
+          d="M1025 513c0 282.77-229.23 512-512 512S1 795.77 1 513 230.23 1 513 1s512 229.23 512 512Z"
+          stroke="#D4D4D4"
+          strokeOpacity="0.7"
+        />
+        <path
+          d="M513 1025C230.23 1025 1 795.77 1 513"
+          stroke={`url(#${id}-gradient-1)`}
+          strokeLinecap="round"
+        />
+        <defs>
+          <linearGradient
+            id={`${id}-gradient-1`}
+            x1="1"
+            y1="513"
+            x2="1"
+            y2="1025"
+            gradientUnits="userSpaceOnUse"
+          >
+            <stop stopColor="#06b6d4" />
+            <stop offset="1" stopColor="#06b6d4" stopOpacity="0" />
+          </linearGradient>
+        </defs>
+      </svg>
+      <svg
+        viewBox="0 0 1026 1026"
+        fill="none"
+        aria-hidden="true"
+        className="absolute inset-0 h-full w-full animate-spin-reverse-slower"
+      >
+        <path
+          d="M913 513c0 220.914-179.086 400-400 400S113 733.914 113 513s179.086-400 400-400 400 179.086 400 400Z"
+          stroke="#D4D4D4"
+          strokeOpacity="0.7"
+        />
+        <path
+          d="M913 513c0 220.914-179.086 400-400 400"
+          stroke={`url(#${id}-gradient-2)`}
+          strokeLinecap="round"
+        />
+        <defs>
+          <linearGradient
+            id={`${id}-gradient-2`}
+            x1="913"
+            y1="513"
+            x2="913"
+            y2="913"
+            gradientUnits="userSpaceOnUse"
+          >
+            <stop stopColor="#06b6d4" />
+            <stop offset="1" stopColor="#06b6d4" stopOpacity="0" />
+          </linearGradient>
+        </defs>
+      </svg>
+    </div>
+  )
+}
+
+export function Hero() {
+  return (
+    <div className="overflow-hidden lg:py-32 lg:pb-0 pb-24">
+      <Container>
+        <div className="flex flex-col-reverse gap-y-16 lg:grid lg:grid-cols-12 lg:gap-x-8 lg:gap-y-20">
+          <div className="relative z-10 mx-auto max-w-2xl lg:col-span-7 lg:max-w-none lg:pt-6 xl:col-span-6">
+            <h1 className="text-4xl lg:text-6xl font-medium tracking-tight text-gray-900">
+              Mycelium
+            </h1>
+            <h2 className="mt-6 lg:text-2xl text-xl tracking-tight leading-normal text-gray-600">
+              Unleashing the Power of Decentralized Networks
+            </h2>
+            <p className="mt-6 lg:text-xl text-lg text-gray-600 lg:leading-normal leading-tight">
+              Discover Mycelium, an end-to-end encrypted IPv6 overlay network. The future of secure, efficient, and scalable networking.
+            </p>
+            <p className="mt-6 text-lg text-gray-600">
+              Coming Soon: New Decentralized Features
+            </p>
+            <div className="mt-8 flex flex-wrap gap-x-6 gap-y-4">
+              <Button to="/download" variant="solid" color="cyan">
+                Get Mycelium
+              </Button>
+            </div>
+          </div>
+          <div className="relative lg:mt-10 mt-0 lg:col-span-5 lg:row-span-2 xl:col-span-6">
+            <BackgroundIllustration className="absolute top-4 left-1/2 h-[1026px] w-[1026px] -translate-x-1/2 stroke-gray-300/70 sm:top-16 lg:-top-12 lg:ml-12 ml-0" />
+            <div className="mx-auto h-[448px] mask-[linear-gradient(to_bottom,white_60%,transparent)] lg:px-0 lg:absolute lg:-inset-x-10 lg:-top-24 lg:h-auto lg:pt-10 xl:-bottom-32">
+              <img
+                src="/src/images/phoneframe.png"
+                alt="Mycelium application demo"
+                className="mx-auto max-w-[366px]"
+                width={366}
+                height={729}
+              />
+            </div>
+          </div>
+        </div>
+      </Container>
+    </div>
+  )
+}