Initial commit

src/components/Footer.tsx

@@ -0,0 +1,61 @@
+import { Link } from 'react-router-dom'
+import { Container } from './Container'
+
+export function Footer() {
+  return (
+    <footer className="border-t border-gray-200">
+      <Container>
+        <div className="flex flex-col items-start justify-between gap-y-12 pt-16 pb-6 lg:flex-row lg:items-center lg:py-8">
+          <div>
+            <div className="flex items-center text-gray-900">
+              <img src="/src/images/logomark.svg" alt="Mycelium Logomark" className="h-20 w-20 flex-none" />
+              <div className="ml-4">
+                <p className="text-base font-semibold">Mycelium</p>
+                <p className="mt-1 text-sm">Unleash the Power of Decentralized Networks</p>
+              </div>
+            </div>
+            <nav className="mt-10 flex gap-8">
+              <Link to="/" className="text-sm text-gray-700 hover:text-cyan-500 transition-colors">
+                Home
+              </Link>
+              <Link to="/cloud" className="text-sm text-gray-700 hover:text-cyan-500 transition-colors">
+                Cloud
+              </Link>
+              <Link to="/network" className="text-sm text-gray-700 hover:text-cyan-500 transition-colors">
+                Network
+              </Link>
+              <Link to="/agents" className="text-sm text-gray-700 hover:text-cyan-500 transition-colors">
+                Agents
+              </Link>
+            </nav>
+          </div>
+          <div className="group relative -mx-4 flex items-center self-stretch p-4 transition-colors hover:bg-gray-100 sm:self-auto sm:rounded-2xl lg:mx-0 lg:self-auto lg:p-6">
+            <div className="relative flex h-16 w-16 flex-none items-center justify-center">
+              <img src="/src/images/github.svg" alt="GitHub" className="h-16 w-16" />
+            </div>
+            <div className="ml-4 lg:w-72">
+              <p className="text-base font-semibold text-gray-900">
+                <a href="https://github.com/threefoldtech/mycelium/releases/" target="_blank" rel="noopener noreferrer">
+                  <span className="absolute inset-0 sm:rounded-2xl" />
+                  Download Mycelium
+                </a>
+              </p>
+              <p className="mt-1 text-sm text-gray-700">
+                Head to the GitHub to access the latest Mycelium builds for your devices.
+              </p>
+            </div>
+          </div>
+        </div>
+        <div className="flex flex-col items-center border-t border-gray-200 pt-8 pb-12 md:flex-row-reverse md:justify-between md:pt-6">
+          <p className="mt-6 text-sm text-gray-500 md:mt-0">
+            &copy; Copyright{' '}
+            <a href="https://www.threefold.io" target="_blank" rel="noopener noreferrer" className="hover:text-cyan-500 transition-colors">
+              ThreeFold
+            </a>{' '}
+            {new Date().getFullYear()}. All rights reserved.
+          </p>
+        </div>
+      </Container>
+    </footer>
+  )
+}