Compare commits
3 Commits
main
...
developmen
| Author | SHA1 | Date | |
|---|---|---|---|
| f015a0d892 | |||
| 954d51dcaa | |||
| 3ac2f8ede7 |
@@ -1 +0,0 @@
|
||||
google-site-verification: google5dd3a8b700455c0e.html
|
||||
@@ -2,13 +2,10 @@
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" type="image/png" href="/favicon-32.png" sizes="32x32" />
|
||||
<link rel="icon" type="image/x-icon" href="/favicon.ico" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta name="google-site-verification" content="rRrZkMEhdC4yFe_BrENEzYmy2bRfD-VE6RTRiDJNLkg" />
|
||||
<title>Project Mycelium - Built for Digital Sovereignty</title>
|
||||
<meta name="description" content="Discover Project Mycelium. A sovereign peer-to-peer network for private communication, storage, and compute. Build and run your digital environment on infrastructure you control." />
|
||||
<meta name="keywords" content="Project Mycelium, ProjectMycelium, projectmycelium, Mycelium, decentralized network, peer-to-peer infrastructure, private storage, secure compute, sovereign cloud, edge cloud" />
|
||||
<title>Project Mycelium - Unleash the Power of Decentralized Networks</title>
|
||||
<meta name="description" content="Project Mycelium's technology enables anyone to deploy their own Internet infrastructure, anywhere." />
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||||
<link href="https://fonts.googleapis.com/css2?family=Mulish:wght@400;500;700&display=swap" rel="stylesheet" />
|
||||
|
||||
|
Before Width: | Height: | Size: 1.7 KiB |
|
Before Width: | Height: | Size: 15 KiB After Width: | Height: | Size: 15 KiB |
|
Before Width: | Height: | Size: 65 KiB |
|
Before Width: | Height: | Size: 1.3 MiB |
|
Before Width: | Height: | Size: 618 KiB |
|
Before Width: | Height: | Size: 508 KiB |
BIN
public/images/audience/1.jpg
Normal file
|
After Width: | Height: | Size: 306 KiB |
BIN
public/images/audience/2.jpg
Normal file
|
After Width: | Height: | Size: 205 KiB |
BIN
public/images/audience/3.jpg
Normal file
|
After Width: | Height: | Size: 192 KiB |
BIN
public/images/audience/4.jpg
Normal file
|
After Width: | Height: | Size: 147 KiB |
BIN
public/images/audience/5.jpg
Normal file
|
After Width: | Height: | Size: 128 KiB |
BIN
public/images/audience/6.jpg
Normal file
|
After Width: | Height: | Size: 234 KiB |
BIN
public/images/audience/7.jpg
Normal file
|
After Width: | Height: | Size: 152 KiB |
BIN
public/images/audience/8.jpg
Normal file
|
After Width: | Height: | Size: 228 KiB |
BIN
public/images/audiences/1.jpg
Normal file
|
After Width: | Height: | Size: 229 KiB |
BIN
public/images/audiences/2.jpg
Normal file
|
After Width: | Height: | Size: 164 KiB |
BIN
public/images/audiences/3.jpg
Normal file
|
After Width: | Height: | Size: 147 KiB |
BIN
public/images/audiences/4.jpg
Normal file
|
After Width: | Height: | Size: 117 KiB |
BIN
public/images/audiences/5.jpg
Normal file
|
After Width: | Height: | Size: 102 KiB |
BIN
public/images/audiences/6.jpg
Normal file
|
After Width: | Height: | Size: 184 KiB |
BIN
public/images/audiences/7.jpg
Normal file
|
After Width: | Height: | Size: 124 KiB |
BIN
public/images/audiences/8.jpg
Normal file
|
After Width: | Height: | Size: 182 KiB |
|
Before Width: | Height: | Size: 63 KiB |
|
Before Width: | Height: | Size: 56 KiB |
|
Before Width: | Height: | Size: 208 KiB |
|
Before Width: | Height: | Size: 259 KiB |
|
Before Width: | Height: | Size: 793 KiB |
|
Before Width: | Height: | Size: 801 KiB |
|
Before Width: | Height: | Size: 50 KiB |
|
Before Width: | Height: | Size: 792 KiB |
|
Before Width: | Height: | Size: 55 KiB |
|
Before Width: | Height: | Size: 56 KiB |
|
Before Width: | Height: | Size: 57 KiB |
|
Before Width: | Height: | Size: 1.5 KiB After Width: | Height: | Size: 66 KiB |
BIN
public/images/logowhite.png
Normal file
|
After Width: | Height: | Size: 44 KiB |
|
Before Width: | Height: | Size: 12 KiB |
|
Before Width: | Height: | Size: 14 KiB |
|
Before Width: | Height: | Size: 5.0 KiB |
|
Before Width: | Height: | Size: 1.8 KiB |
@@ -1 +0,0 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100" zoomAndPan="magnify" viewBox="0 0 75 74.999997" height="100" preserveAspectRatio="xMidYMid meet" version="1.0"><defs><clipPath id="17cc7c511f"><path d="M 0.679688 0.28125 L 48.441406 0.28125 L 48.441406 5 L 0.679688 5 Z M 0.679688 0.28125 " clip-rule="nonzero"/></clipPath><clipPath id="871aafab52"><path d="M 0.679688 36 L 48.441406 36 L 48.441406 40.601562 L 0.679688 40.601562 Z M 0.679688 36 " clip-rule="nonzero"/></clipPath><clipPath id="08bb39558f"><rect x="0" width="49" y="0" height="41"/></clipPath></defs><g transform="matrix(1, 0, 0, 1, 13, 17)"><g clip-path="url(#08bb39558f)"><g clip-path="url(#17cc7c511f)"><path stroke-linecap="butt" transform="matrix(0.559221, 0, 0, 0.559221, 3.099571, 0.434943)" fill="none" stroke-linejoin="miter" d="M -0.00342307 4.000082 L 76.539934 4.000082 " stroke="#22d3ee" stroke-width="8" stroke-opacity="1" stroke-miterlimit="4"/></g><path fill="#22d3ee" d="M 3.097656 18.003906 L 29.941406 18.003906 L 29.941406 22.480469 L 3.097656 22.480469 M 34.414062 18.003906 L 45.902344 18.003906 L 45.902344 22.480469 L 34.414062 22.480469 " fill-opacity="1" fill-rule="nonzero"/><g clip-path="url(#871aafab52)"><path stroke-linecap="butt" transform="matrix(0.559221, 0, 0, 0.559221, 3.099571, 36.091279)" fill="none" stroke-linejoin="miter" d="M -0.00342307 3.999929 L 76.539934 3.999929 " stroke="#22d3ee" stroke-width="8" stroke-opacity="1" stroke-miterlimit="4"/></g></g></g></svg>
|
||||
|
Before Width: | Height: | Size: 1.5 KiB |
|
Before Width: | Height: | Size: 12 KiB |
|
Before Width: | Height: | Size: 5.0 KiB |
|
Before Width: | Height: | Size: 1.8 KiB |
@@ -1 +0,0 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100" zoomAndPan="magnify" viewBox="0 0 75 74.999997" height="100" preserveAspectRatio="xMidYMid meet" version="1.0"><defs><clipPath id="17cc7c511f"><path d="M 0.679688 0.28125 L 48.441406 0.28125 L 48.441406 5 L 0.679688 5 Z M 0.679688 0.28125 " clip-rule="nonzero"/></clipPath><clipPath id="871aafab52"><path d="M 0.679688 36 L 48.441406 36 L 48.441406 40.601562 L 0.679688 40.601562 Z M 0.679688 36 " clip-rule="nonzero"/></clipPath><clipPath id="08bb39558f"><rect x="0" width="49" y="0" height="41"/></clipPath></defs><g transform="matrix(1, 0, 0, 1, 13, 17)"><g clip-path="url(#08bb39558f)"><g clip-path="url(#17cc7c511f)"><path stroke-linecap="butt" transform="matrix(0.559221, 0, 0, 0.559221, 3.099571, 0.434943)" fill="none" stroke-linejoin="miter" d="M -0.00342307 4.000082 L 76.539934 4.000082 " stroke="#22d3ee" stroke-width="8" stroke-opacity="1" stroke-miterlimit="4"/></g><path fill="#22d3ee" d="M 3.097656 18.003906 L 29.941406 18.003906 L 29.941406 22.480469 L 3.097656 22.480469 M 34.414062 18.003906 L 45.902344 18.003906 L 45.902344 22.480469 L 34.414062 22.480469 " fill-opacity="1" fill-rule="nonzero"/><g clip-path="url(#871aafab52)"><path stroke-linecap="butt" transform="matrix(0.559221, 0, 0, 0.559221, 3.099571, 36.091279)" fill="none" stroke-linejoin="miter" d="M -0.00342307 3.999929 L 76.539934 3.999929 " stroke="#22d3ee" stroke-width="8" stroke-opacity="1" stroke-miterlimit="4"/></g></g></g></svg>
|
||||
|
Before Width: | Height: | Size: 1.5 KiB |
|
Before Width: | Height: | Size: 20 KiB |
|
Before Width: | Height: | Size: 16 KiB |
|
Before Width: | Height: | Size: 19 KiB |
|
Before Width: | Height: | Size: 18 KiB |
|
Before Width: | Height: | Size: 16 KiB |
|
Before Width: | Height: | Size: 1.3 MiB |
|
Before Width: | Height: | Size: 1.2 MiB |
|
Before Width: | Height: | Size: 990 KiB |
|
Before Width: | Height: | Size: 52 KiB |
@@ -1,6 +0,0 @@
|
||||
User-agent: *
|
||||
Allow: /
|
||||
|
||||
Sitemap: https://www.projectmycelium.com/sitemap.xml
|
||||
|
||||
|
||||
@@ -1,59 +0,0 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
|
||||
<url>
|
||||
<loc>https://www.projectmycelium.com/</loc>
|
||||
<changefreq>weekly</changefreq>
|
||||
<priority>1.0</priority>
|
||||
</url>
|
||||
<url>
|
||||
<loc>https://www.projectmycelium.com/cloud</loc>
|
||||
<changefreq>weekly</changefreq>
|
||||
<priority>0.9</priority>
|
||||
</url>
|
||||
<url>
|
||||
<loc>https://www.projectmycelium.com/network</loc>
|
||||
<changefreq>weekly</changefreq>
|
||||
<priority>0.9</priority>
|
||||
</url>
|
||||
<url>
|
||||
<loc>https://www.projectmycelium.com/agents</loc>
|
||||
<changefreq>weekly</changefreq>
|
||||
<priority>0.8</priority>
|
||||
</url>
|
||||
<url>
|
||||
<loc>https://www.projectmycelium.com/download</loc>
|
||||
<changefreq>monthly</changefreq>
|
||||
<priority>0.7</priority>
|
||||
</url>
|
||||
<url>
|
||||
<loc>https://www.projectmycelium.com/compute</loc>
|
||||
<changefreq>weekly</changefreq>
|
||||
<priority>0.8</priority>
|
||||
</url>
|
||||
<url>
|
||||
<loc>https://www.projectmycelium.com/storage</loc>
|
||||
<changefreq>weekly</changefreq>
|
||||
<priority>0.8</priority>
|
||||
</url>
|
||||
<url>
|
||||
<loc>https://www.projectmycelium.com/gpu</loc>
|
||||
<changefreq>weekly</changefreq>
|
||||
<priority>0.8</priority>
|
||||
</url>
|
||||
<url>
|
||||
<loc>https://www.projectmycelium.com/pods</loc>
|
||||
<changefreq>weekly</changefreq>
|
||||
<priority>0.7</priority>
|
||||
</url>
|
||||
<url>
|
||||
<loc>https://www.projectmycelium.com/nodes</loc>
|
||||
<changefreq>weekly</changefreq>
|
||||
<priority>0.7</priority>
|
||||
</url>
|
||||
<url>
|
||||
<loc>https://www.projectmycelium.com/mediakit</loc>
|
||||
<changefreq>monthly</changefreq>
|
||||
<priority>0.7</priority>
|
||||
</url>
|
||||
</urlset>
|
||||
|
||||
BIN
public/videos/agent.mp4
Normal file
BIN
public/videos/benefits.jpg
Normal file
|
After Width: | Height: | Size: 156 KiB |
BIN
public/videos/benefits.mp4
Normal file
BIN
public/videos/chip_vid.mp4
Normal file
BIN
public/videos/cloud.mp4
Normal file
BIN
public/videos/cta.mp4
Normal file
BIN
public/videos/deterministic.mp4
Normal file
BIN
public/videos/fungistor.mp4
Normal file
BIN
public/videos/herodb.mp4
Normal file
BIN
public/videos/mesh.mp4
Normal file
BIN
public/videos/mhero.mp4
Normal file
BIN
public/videos/mycelium2.mp4
Normal file
BIN
public/videos/sandbox.mp4
Normal file
BIN
public/videos/universal.mp4
Normal file
28
src/App.tsx
@@ -1,6 +1,6 @@
|
||||
import { HashRouter, Routes, Route, useLocation } from 'react-router-dom';
|
||||
import { HashRouter, Routes, Route } from 'react-router-dom';
|
||||
import { Layout } from './components/Layout';
|
||||
import { lazy, Suspense, useEffect } from 'react';
|
||||
import { lazy, Suspense } from 'react';
|
||||
|
||||
const HomePage = lazy(() => import('./pages/home/HomePage'));
|
||||
const CloudPage = lazy(() => import('./pages/cloud/CloudPage'));
|
||||
@@ -11,32 +11,10 @@ const ComputePage = lazy(() => import('./pages/compute/ComputePage'));
|
||||
const StoragePage = lazy(() => import('./pages/storage/StoragePage'));
|
||||
const GpuPage = lazy(() => import('./pages/gpu/GpuPage'));
|
||||
const PodsPage = lazy(() => import('./pages/pods/PodsPage'));
|
||||
const NodesPage = lazy(() => import('./pages/nodes/NodesPage'));
|
||||
const MediaPage = lazy(() => import('./pages/mediakit/MediaPage'));
|
||||
|
||||
function ScrollToTop() {
|
||||
const { pathname, hash } = useLocation();
|
||||
|
||||
useEffect(() => {
|
||||
if (hash) {
|
||||
const id = hash.replace('#', '');
|
||||
const element = document.getElementById(id);
|
||||
if (element) {
|
||||
element.scrollIntoView({ behavior: 'smooth', block: 'start' });
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
window.scrollTo({ top: 0, left: 0, behavior: 'auto' });
|
||||
}, [pathname, hash]);
|
||||
|
||||
return null;
|
||||
}
|
||||
|
||||
function App() {
|
||||
return (
|
||||
<HashRouter>
|
||||
<ScrollToTop />
|
||||
<Suspense fallback={<div>Loading...</div>}>
|
||||
<Routes>
|
||||
<Route path="/" element={<Layout />}>
|
||||
@@ -49,8 +27,6 @@ function App() {
|
||||
<Route path="storage" element={<StoragePage />} />
|
||||
<Route path="gpu" element={<GpuPage />} />
|
||||
<Route path="pods" element={<PodsPage />} />
|
||||
<Route path="nodes" element={<NodesPage />} />
|
||||
<Route path="mediakit" element={<MediaPage />} />
|
||||
</Route>
|
||||
</Routes>
|
||||
</Suspense>
|
||||
|
||||
@@ -1,93 +0,0 @@
|
||||
Copyright 2016 The Mulish Project Authors (https://github.com/googlefonts/mulish)
|
||||
|
||||
This Font Software is licensed under the SIL Open Font License, Version 1.1.
|
||||
This license is copied below, and is also available with a FAQ at:
|
||||
https://openfontlicense.org
|
||||
|
||||
|
||||
-----------------------------------------------------------
|
||||
SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
|
||||
-----------------------------------------------------------
|
||||
|
||||
PREAMBLE
|
||||
The goals of the Open Font License (OFL) are to stimulate worldwide
|
||||
development of collaborative font projects, to support the font creation
|
||||
efforts of academic and linguistic communities, and to provide a free and
|
||||
open framework in which fonts may be shared and improved in partnership
|
||||
with others.
|
||||
|
||||
The OFL allows the licensed fonts to be used, studied, modified and
|
||||
redistributed freely as long as they are not sold by themselves. The
|
||||
fonts, including any derivative works, can be bundled, embedded,
|
||||
redistributed and/or sold with any software provided that any reserved
|
||||
names are not used by derivative works. The fonts and derivatives,
|
||||
however, cannot be released under any other type of license. The
|
||||
requirement for fonts to remain under this license does not apply
|
||||
to any document created using the fonts or their derivatives.
|
||||
|
||||
DEFINITIONS
|
||||
"Font Software" refers to the set of files released by the Copyright
|
||||
Holder(s) under this license and clearly marked as such. This may
|
||||
include source files, build scripts and documentation.
|
||||
|
||||
"Reserved Font Name" refers to any names specified as such after the
|
||||
copyright statement(s).
|
||||
|
||||
"Original Version" refers to the collection of Font Software components as
|
||||
distributed by the Copyright Holder(s).
|
||||
|
||||
"Modified Version" refers to any derivative made by adding to, deleting,
|
||||
or substituting -- in part or in whole -- any of the components of the
|
||||
Original Version, by changing formats or by porting the Font Software to a
|
||||
new environment.
|
||||
|
||||
"Author" refers to any designer, engineer, programmer, technical
|
||||
writer or other person who contributed to the Font Software.
|
||||
|
||||
PERMISSION & CONDITIONS
|
||||
Permission is hereby granted, free of charge, to any person obtaining
|
||||
a copy of the Font Software, to use, study, copy, merge, embed, modify,
|
||||
redistribute, and sell modified and unmodified copies of the Font
|
||||
Software, subject to the following conditions:
|
||||
|
||||
1) Neither the Font Software nor any of its individual components,
|
||||
in Original or Modified Versions, may be sold by itself.
|
||||
|
||||
2) Original or Modified Versions of the Font Software may be bundled,
|
||||
redistributed and/or sold with any software, provided that each copy
|
||||
contains the above copyright notice and this license. These can be
|
||||
included either as stand-alone text files, human-readable headers or
|
||||
in the appropriate machine-readable metadata fields within text or
|
||||
binary files as long as those fields can be easily viewed by the user.
|
||||
|
||||
3) No Modified Version of the Font Software may use the Reserved Font
|
||||
Name(s) unless explicit written permission is granted by the corresponding
|
||||
Copyright Holder. This restriction only applies to the primary font name as
|
||||
presented to the users.
|
||||
|
||||
4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
|
||||
Software shall not be used to promote, endorse or advertise any
|
||||
Modified Version, except to acknowledge the contribution(s) of the
|
||||
Copyright Holder(s) and the Author(s) or with their explicit written
|
||||
permission.
|
||||
|
||||
5) The Font Software, modified or unmodified, in part or in whole,
|
||||
must be distributed entirely under this license, and must not be
|
||||
distributed under any other license. The requirement for fonts to
|
||||
remain under this license does not apply to any document created
|
||||
using the Font Software.
|
||||
|
||||
TERMINATION
|
||||
This license becomes null and void if any of the above conditions are
|
||||
not met.
|
||||
|
||||
DISCLAIMER
|
||||
THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
|
||||
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
|
||||
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
|
||||
OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
|
||||
COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
|
||||
INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
|
||||
DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
|
||||
FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
|
||||
OTHER DEALINGS IN THE FONT SOFTWARE.
|
||||
@@ -1,79 +0,0 @@
|
||||
Mulish Variable Font
|
||||
====================
|
||||
|
||||
This download contains Mulish as both variable fonts and static fonts.
|
||||
|
||||
Mulish is a variable font with this axis:
|
||||
wght
|
||||
|
||||
This means all the styles are contained in these files:
|
||||
Mulish/Mulish-VariableFont_wght.ttf
|
||||
Mulish/Mulish-Italic-VariableFont_wght.ttf
|
||||
|
||||
If your app fully supports variable fonts, you can now pick intermediate styles
|
||||
that aren’t available as static fonts. Not all apps support variable fonts, and
|
||||
in those cases you can use the static font files for Mulish:
|
||||
Mulish/static/Mulish-ExtraLight.ttf
|
||||
Mulish/static/Mulish-Light.ttf
|
||||
Mulish/static/Mulish-Regular.ttf
|
||||
Mulish/static/Mulish-Medium.ttf
|
||||
Mulish/static/Mulish-SemiBold.ttf
|
||||
Mulish/static/Mulish-Bold.ttf
|
||||
Mulish/static/Mulish-ExtraBold.ttf
|
||||
Mulish/static/Mulish-Black.ttf
|
||||
Mulish/static/Mulish-ExtraLightItalic.ttf
|
||||
Mulish/static/Mulish-LightItalic.ttf
|
||||
Mulish/static/Mulish-Italic.ttf
|
||||
Mulish/static/Mulish-MediumItalic.ttf
|
||||
Mulish/static/Mulish-SemiBoldItalic.ttf
|
||||
Mulish/static/Mulish-BoldItalic.ttf
|
||||
Mulish/static/Mulish-ExtraBoldItalic.ttf
|
||||
Mulish/static/Mulish-BlackItalic.ttf
|
||||
|
||||
Get started
|
||||
-----------
|
||||
|
||||
1. Install the font files you want to use
|
||||
|
||||
2. Use your app's font picker to view the font family and all the
|
||||
available styles
|
||||
|
||||
Learn more about variable fonts
|
||||
-------------------------------
|
||||
|
||||
https://developers.google.com/web/fundamentals/design-and-ux/typography/variable-fonts
|
||||
https://variablefonts.typenetwork.com
|
||||
https://medium.com/variable-fonts
|
||||
|
||||
In desktop apps
|
||||
|
||||
https://theblog.adobe.com/can-variable-fonts-illustrator-cc
|
||||
https://helpx.adobe.com/nz/photoshop/using/fonts.html#variable_fonts
|
||||
|
||||
Online
|
||||
|
||||
https://developers.google.com/fonts/docs/getting_started
|
||||
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Fonts/Variable_Fonts_Guide
|
||||
https://developer.microsoft.com/en-us/microsoft-edge/testdrive/demos/variable-fonts
|
||||
|
||||
Installing fonts
|
||||
|
||||
MacOS: https://support.apple.com/en-us/HT201749
|
||||
Linux: https://www.google.com/search?q=how+to+install+a+font+on+gnu%2Blinux
|
||||
Windows: https://support.microsoft.com/en-us/help/314960/how-to-install-or-remove-a-font-in-windows
|
||||
|
||||
Android Apps
|
||||
|
||||
https://developers.google.com/fonts/docs/android
|
||||
https://developer.android.com/guide/topics/ui/look-and-feel/downloadable-fonts
|
||||
|
||||
License
|
||||
-------
|
||||
Please read the full license text (OFL.txt) to understand the permissions,
|
||||
restrictions and requirements for usage, redistribution, and modification.
|
||||
|
||||
You can use them in your products & projects – print or digital,
|
||||
commercial or otherwise.
|
||||
|
||||
This isn't legal advice, please consider consulting a lawyer and see the full
|
||||
license for all details.
|
||||
@@ -3,30 +3,23 @@ import clsx from 'clsx'
|
||||
|
||||
const baseStyles = {
|
||||
solid:
|
||||
'inline-flex justify-center rounded-full py-2 px-5 text-sm md:text-base font-semibold transition-colors',
|
||||
'inline-flex justify-center rounded-full py-2 px-5 text-base font-semibold transition-colors',
|
||||
outline:
|
||||
'inline-flex justify-center bg-transparent font-semibold rounded-full border border-2 py-[calc(--spacing(2)-1px)] px-[calc(--spacing(5)-1px)] text-sm md:text-base transition-colors',
|
||||
link:
|
||||
'inline-flex items-center text-sm md:text-base font-semibold transition-colors',
|
||||
'inline-flex justify-center bg-transparent rounded-full border py-[calc(--spacing(2)-1px)] px-[calc(--spacing(5)-1px)] text-base transition-colors',
|
||||
}
|
||||
|
||||
const variantStyles = {
|
||||
solid: {
|
||||
cyan: 'relative overflow-hidden bg-cyan-500 text-white before:absolute before:inset-0 hover:bg-cyan-400 active:before:bg-transparent hover:before:bg-white/10 active:bg-cyan-500 active:text-white/80 before:transition-colors',
|
||||
cyan: 'relative overflow-hidden bg-cyan-500 text-white before:absolute before:inset-0 active:before:bg-transparent hover:before:bg-white/10 active:bg-cyan-600 active:text-white/80 before:transition-colors',
|
||||
white:
|
||||
'bg-white text-cyan-900 hover:bg-white/90 active:bg-white/90 active:text-cyan-900/70',
|
||||
gray: 'bg-gray-800 text-white hover:bg-gray-900 active:bg-gray-800 active:text-white/80',
|
||||
green: 'bg-green-500 text-white hover:bg-green-600',
|
||||
},
|
||||
outline: {
|
||||
cyan: 'border-cyan-500 text-cyan-500 hover:border-cyan-400 hover:text-cyan-400 active:border-cyan-400',
|
||||
gray: 'border-gray-200 text-gray-600 hover:text-cyan-400 hover:border-cyan-400 active:border-cyan-400',
|
||||
white: 'border-gray-300 text-white hover:text-cyan-400 hover:border-cyan-400 active:border-cyan-400',
|
||||
},
|
||||
link: {
|
||||
cyan: 'text-cyan-400 underline hover:text-cyan-300',
|
||||
white: 'text-white underline hover:text-cyan-300',
|
||||
dark: 'text-gray-900 underline hover:text-cyan-400',
|
||||
cyan: 'border-cyan-500 text-cyan-500',
|
||||
gray: 'border-gray-300 text-white hover:text-cyan-500 hover:border-cyan-500 active:border-cyan-500',
|
||||
white: 'border-gray-300 text-white hover:border-cyan-500 active:border-cyan-500',
|
||||
},
|
||||
}
|
||||
|
||||
@@ -37,11 +30,7 @@ type ButtonProps = (
|
||||
}
|
||||
| {
|
||||
variant: 'outline'
|
||||
color?: keyof typeof variantStyles.outline
|
||||
}
|
||||
| {
|
||||
variant: 'link'
|
||||
color?: keyof typeof variantStyles.link
|
||||
color?: (keyof typeof variantStyles.outline) | 'cyan'
|
||||
}
|
||||
) &
|
||||
(
|
||||
@@ -54,33 +43,16 @@ type ButtonProps = (
|
||||
)
|
||||
|
||||
export function Button({ className, as, ...props }: ButtonProps) {
|
||||
// Set safe defaults per variant so color always matches a valid palette key
|
||||
if (!props.variant) {
|
||||
props.variant = 'solid'
|
||||
}
|
||||
|
||||
if (!props.color) {
|
||||
if (props.variant === 'solid') {
|
||||
props.color = 'gray'
|
||||
} else if (props.variant === 'outline') {
|
||||
props.color = 'gray'
|
||||
} else if (props.variant === 'link') {
|
||||
props.color = 'cyan'
|
||||
}
|
||||
}
|
||||
|
||||
const variant = props.variant
|
||||
const color = props.color as string
|
||||
props.variant ??= 'solid'
|
||||
props.color ??= 'gray'
|
||||
|
||||
className = clsx(
|
||||
baseStyles[variant],
|
||||
variant === 'outline'
|
||||
? variantStyles.outline[color as keyof typeof variantStyles.outline]
|
||||
: variant === 'solid'
|
||||
? variantStyles.solid[color as keyof typeof variantStyles.solid]
|
||||
: variant === 'link'
|
||||
? variantStyles.link[color as keyof typeof variantStyles.link]
|
||||
: undefined,
|
||||
baseStyles[props.variant],
|
||||
props.variant === 'outline'
|
||||
? variantStyles.outline[props.color]
|
||||
: props.variant === 'solid'
|
||||
? variantStyles.solid[props.color]
|
||||
: undefined,
|
||||
className,
|
||||
)
|
||||
|
||||
|
||||
@@ -8,30 +8,27 @@ export function Footer() {
|
||||
<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="/images/logomark.svg" alt="Mycelium Logomark" className="h-20 w-20 flex-none" />
|
||||
<div className="">
|
||||
<p className="text-base lg:text-lg font-semibold">Project Mycelium</p>
|
||||
<p className="mt-1 text-sm">Built for Digital Sovereignty</p>
|
||||
<img src="/images/logomark.svg" alt="Mycelium Logomark" className="h-15 w-15 flex-none" />
|
||||
<div className="ml-4">
|
||||
<p className="text-base font-semibold">Project Mycelium</p>
|
||||
<p className="mt-1 text-sm">Unleash the Power of Decentralization</p>
|
||||
</div>
|
||||
</div>
|
||||
<nav className="mt-10 flex gap-8">
|
||||
<Link to="/network" className="text-sm text-gray-700 hover:text-cyan-500 transition-colors">
|
||||
Network
|
||||
<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="/pods" className="text-sm text-gray-700 hover:text-cyan-500 transition-colors">
|
||||
Pods
|
||||
<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>
|
||||
<Link to="/nodes" className="text-sm text-gray-700 hover:text-cyan-500 transition-colors">
|
||||
Nodes
|
||||
</Link>
|
||||
<Link to="/mediakit" className="text-sm text-gray-700 hover:text-cyan-500 transition-colors">
|
||||
Media Kit
|
||||
<Link to="/pods" className="text-sm text-gray-700 hover:text-cyan-500 transition-colors">
|
||||
Pods
|
||||
</Link>
|
||||
</nav>
|
||||
</div>
|
||||
@@ -52,11 +49,11 @@ export function Footer() {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-col items-center border-t border-gray-100 py-8 md:flex-row-reverse md:justify-between md:pt-6">
|
||||
<div className="flex flex-col items-center border-t border-gray-100 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">
|
||||
© Copyright{' '}
|
||||
<a href="https://ourworld.tf/" target="_blank" rel="noopener noreferrer" className="font-semibold hover:text-cyan-500 transition-colors">
|
||||
OurWorld
|
||||
<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>
|
||||
|
||||
@@ -1,25 +1,31 @@
|
||||
import { useState } from 'react'
|
||||
import { Link, useLocation, useNavigate } from 'react-router-dom'
|
||||
import { smoothScrollToElement } from '@/utils/scroll'
|
||||
import { Link, useLocation } from 'react-router-dom'
|
||||
import { Dropdown } from './ui/Dropdown'
|
||||
import { ChevronDownIcon } from '@heroicons/react/20/solid'
|
||||
import { Container } from './Container'
|
||||
import { Button } from './Button'
|
||||
import pmyceliumLogo from '../images/logos/mainlogo.svg'
|
||||
import pmyceliumLogo from '../images/logos/logo_1.png'
|
||||
import { Dialog } from '@headlessui/react'
|
||||
import { Bars3Icon, XMarkIcon } from '@heroicons/react/24/outline'
|
||||
|
||||
const cloudNavItems = [
|
||||
{ name: 'Cloud', href: '/cloud' },
|
||||
{ name: 'Compute', href: '/compute' },
|
||||
{ name: 'Storage', href: '/storage' },
|
||||
{ name: 'GPU', href: '/gpu' },
|
||||
]
|
||||
|
||||
export function Header() {
|
||||
const location = useLocation()
|
||||
const [mobileMenuOpen, setMobileMenuOpen] = useState(false)
|
||||
|
||||
const navigate = useNavigate()
|
||||
const location = useLocation()
|
||||
|
||||
const handleGetConnectorClick = () => {
|
||||
if (location.pathname === '/network') {
|
||||
smoothScrollToElement('download', 1200)
|
||||
} else {
|
||||
navigate('/network')
|
||||
}
|
||||
}
|
||||
const getCurrentPageName = () => {
|
||||
const currentPath = location.pathname;
|
||||
if (currentPath.startsWith('/compute')) return 'Compute';
|
||||
if (currentPath.startsWith('/storage')) return 'Storage';
|
||||
if (currentPath.startsWith('/gpu')) return 'GPU';
|
||||
return 'Cloud';
|
||||
};
|
||||
|
||||
return (
|
||||
<header className="bg-white">
|
||||
@@ -30,24 +36,28 @@ export function Header() {
|
||||
<img src={pmyceliumLogo} alt="Mycelium" className="h-8 w-auto" />
|
||||
</Link>
|
||||
<div className="hidden lg:flex lg:gap-10">
|
||||
<Dropdown
|
||||
buttonContent={
|
||||
<>
|
||||
{['Compute', 'Storage', 'GPU'].includes(getCurrentPageName()) ? (
|
||||
<>
|
||||
<span className="text-gray-500">Cloud {' >'} </span>
|
||||
<span>{getCurrentPageName()}</span>
|
||||
</>
|
||||
) : (
|
||||
'Cloud'
|
||||
)}
|
||||
<ChevronDownIcon className="h-5 w-5" aria-hidden="true" />
|
||||
</>
|
||||
}
|
||||
items={cloudNavItems}
|
||||
/>
|
||||
<Link
|
||||
to="/network"
|
||||
className="text-base/7 tracking-tight text-gray-700 hover:text-cyan-500 transition-colors"
|
||||
>
|
||||
Network
|
||||
</Link>
|
||||
<Link
|
||||
to="/cloud"
|
||||
className="text-base/7 tracking-tight text-gray-700 hover:text-cyan-500 transition-colors"
|
||||
>
|
||||
Cloud
|
||||
</Link>
|
||||
<Link
|
||||
to="/pods"
|
||||
className="text-base/7 tracking-tight text-gray-700 hover:text-cyan-500 transition-colors"
|
||||
>
|
||||
Pods
|
||||
</Link>
|
||||
<Link
|
||||
to="/agents"
|
||||
className="text-base/7 tracking-tight text-gray-700 hover:text-cyan-500 transition-colors"
|
||||
@@ -55,10 +65,10 @@ export function Header() {
|
||||
Agents
|
||||
</Link>
|
||||
<Link
|
||||
to="/nodes"
|
||||
to="/pods"
|
||||
className="text-base/7 tracking-tight text-gray-700 hover:text-cyan-500 transition-colors"
|
||||
>
|
||||
Nodes
|
||||
Pods
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
@@ -73,7 +83,7 @@ export function Header() {
|
||||
>
|
||||
Deploy Now
|
||||
</Button>
|
||||
<Button variant="solid" color="cyan" onClick={handleGetConnectorClick}>
|
||||
<Button to="/download" variant="solid" color="cyan">
|
||||
Get Mycelium Connector
|
||||
</Button>
|
||||
</div>
|
||||
@@ -114,6 +124,16 @@ export function Header() {
|
||||
<div className="mt-6 flow-root">
|
||||
<div className="-my-6 divide-y divide-gray-500/10">
|
||||
<div className="space-y-2 py-6">
|
||||
{cloudNavItems.map((item) => (
|
||||
<Link
|
||||
key={item.name}
|
||||
to={item.href}
|
||||
className="-mx-3 block rounded-lg px-3 py-2 text-base font-semibold leading-7 text-gray-900 hover:bg-gray-50"
|
||||
onClick={() => setMobileMenuOpen(false)}
|
||||
>
|
||||
{item.name}
|
||||
</Link>
|
||||
))}
|
||||
<Link
|
||||
to="/network"
|
||||
className="-mx-3 block rounded-lg px-3 py-2 text-base font-semibold leading-7 text-gray-900 hover:bg-gray-50"
|
||||
@@ -121,20 +141,6 @@ export function Header() {
|
||||
>
|
||||
Network
|
||||
</Link>
|
||||
<Link
|
||||
to="/cloud"
|
||||
className="-mx-3 block rounded-lg px-3 py-2 text-base font-semibold leading-7 text-gray-900 hover:bg-gray-50"
|
||||
onClick={() => setMobileMenuOpen(false)}
|
||||
>
|
||||
Cloud
|
||||
</Link>
|
||||
<Link
|
||||
to="/pods"
|
||||
className="-mx-3 block rounded-lg px-3 py-2 text-base font-semibold leading-7 text-gray-900 hover:bg-gray-50"
|
||||
onClick={() => setMobileMenuOpen(false)}
|
||||
>
|
||||
Pods
|
||||
</Link>
|
||||
<Link
|
||||
to="/agents"
|
||||
className="-mx-3 block rounded-lg px-3 py-2 text-base font-semibold leading-7 text-gray-900 hover:bg-gray-50"
|
||||
@@ -143,11 +149,11 @@ export function Header() {
|
||||
Agents
|
||||
</Link>
|
||||
<Link
|
||||
to="/nodes"
|
||||
to="/pods"
|
||||
className="-mx-3 block rounded-lg px-3 py-2 text-base font-semibold leading-7 text-gray-900 hover:bg-gray-50"
|
||||
onClick={() => setMobileMenuOpen(false)}
|
||||
>
|
||||
Nodes
|
||||
Pods
|
||||
</Link>
|
||||
</div>
|
||||
<div className="py-6">
|
||||
@@ -162,15 +168,7 @@ export function Header() {
|
||||
>
|
||||
Start Deployment
|
||||
</Button>
|
||||
<Button
|
||||
variant="solid"
|
||||
color="cyan"
|
||||
className="mt-4 w-full"
|
||||
onClick={() => {
|
||||
setMobileMenuOpen(false)
|
||||
handleGetConnectorClick()
|
||||
}}
|
||||
>
|
||||
<Button to="/download" variant="solid" color="cyan" className="mt-4 w-full" onClick={() => setMobileMenuOpen(false)}>
|
||||
Get Mycelium Connector
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
@@ -1,53 +1,64 @@
|
||||
import { useState } from 'react'
|
||||
import { Link, useLocation, useNavigate } from 'react-router-dom'
|
||||
import { smoothScrollToElement } from '@/utils/scroll'
|
||||
import { Link, useLocation } from 'react-router-dom'
|
||||
import { Dropdown } from './ui/Dropdown'
|
||||
import { ChevronDownIcon } from '@heroicons/react/20/solid'
|
||||
import { Container } from './Container'
|
||||
import { Button } from './Button'
|
||||
import pmyceliumLogo from '../images/logos/mainlogo.svg'
|
||||
import pmyceliumLogo from '../images/logos/logowhite.png'
|
||||
import { Dialog } from '@headlessui/react'
|
||||
import { Bars3Icon, XMarkIcon } from '@heroicons/react/24/outline'
|
||||
|
||||
const cloudNavItems = [
|
||||
{ name: 'Cloud', href: '/cloud' },
|
||||
{ name: 'Compute', href: '/compute' },
|
||||
{ name: 'Storage', href: '/storage' },
|
||||
{ name: 'GPU', href: '/gpu' },
|
||||
]
|
||||
|
||||
export function HeaderDark() {
|
||||
const location = useLocation()
|
||||
const [mobileMenuOpen, setMobileMenuOpen] = useState(false)
|
||||
|
||||
const navigate = useNavigate()
|
||||
const location = useLocation()
|
||||
|
||||
const handleGetConnectorClick = () => {
|
||||
if (location.pathname === '/network') {
|
||||
smoothScrollToElement('download', 1200)
|
||||
} else {
|
||||
navigate('/network')
|
||||
}
|
||||
}
|
||||
const getCurrentPageName = () => {
|
||||
const currentPath = location.pathname;
|
||||
if (currentPath.startsWith('/compute')) return 'Compute';
|
||||
if (currentPath.startsWith('/storage')) return 'Storage';
|
||||
if (currentPath.startsWith('/gpu')) return 'GPU';
|
||||
return 'Cloud';
|
||||
};
|
||||
|
||||
return (
|
||||
<header className="bg-[#111111]">
|
||||
<nav className="border-b border-gray-800">
|
||||
<nav className="">
|
||||
<Container className="flex bg-transparent justify-between py-4">
|
||||
<div className="relative z-10 flex items-center gap-16">
|
||||
<Link to="/" aria-label="Home">
|
||||
<img src={pmyceliumLogo} alt="Mycelium" className="h-8 w-auto" />
|
||||
</Link>
|
||||
<div className="hidden lg:flex lg:gap-10">
|
||||
<Dropdown
|
||||
buttonClassName="bg-transparent"
|
||||
buttonContent={
|
||||
<>
|
||||
{['Compute', 'Storage', 'GPU'].includes(getCurrentPageName()) ? (
|
||||
<>
|
||||
<span className="text-white bg-[#111111]">Cloud {' >'} </span>
|
||||
<span className="text-white bg-[#111111]">{getCurrentPageName()}</span>
|
||||
</>
|
||||
) : (
|
||||
<span className="text-white">Cloud</span>
|
||||
)}
|
||||
<ChevronDownIcon className="h-5 w-5 text-white" aria-hidden="true" />
|
||||
</>
|
||||
}
|
||||
items={cloudNavItems}
|
||||
/>
|
||||
<Link
|
||||
to="/network"
|
||||
className="text-base/7 tracking-tight text-gray-300 hover:text-cyan-400 transition-colors"
|
||||
>
|
||||
Network
|
||||
</Link>
|
||||
<Link
|
||||
to="/cloud"
|
||||
className="text-base/7 tracking-tight text-gray-300 hover:text-cyan-400 transition-colors"
|
||||
>
|
||||
Cloud
|
||||
</Link>
|
||||
<Link
|
||||
to="/pods"
|
||||
className="text-base/7 tracking-tight text-gray-300 hover:text-cyan-400 transition-colors"
|
||||
>
|
||||
Pods
|
||||
</Link>
|
||||
<Link
|
||||
to="/agents"
|
||||
className="text-base/7 tracking-tight text-gray-300 hover:text-cyan-400 transition-colors"
|
||||
@@ -55,10 +66,10 @@ export function HeaderDark() {
|
||||
Agents
|
||||
</Link>
|
||||
<Link
|
||||
to="/nodes"
|
||||
to="/pods"
|
||||
className="text-base/7 tracking-tight text-gray-300 hover:text-cyan-400 transition-colors"
|
||||
>
|
||||
Nodes
|
||||
Pods
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
@@ -73,7 +84,7 @@ export function HeaderDark() {
|
||||
>
|
||||
Deploy Now
|
||||
</Button>
|
||||
<Button variant="solid" color="cyan" onClick={handleGetConnectorClick}>
|
||||
<Button to="/download" variant="solid" color="cyan">
|
||||
Get Mycelium Connector
|
||||
</Button>
|
||||
</div>
|
||||
@@ -114,6 +125,16 @@ export function HeaderDark() {
|
||||
<div className="mt-6 flow-root">
|
||||
<div className="-my-6 divide-y divide-gray-500/20">
|
||||
<div className="space-y-2 py-6">
|
||||
{cloudNavItems.map((item) => (
|
||||
<Link
|
||||
key={item.name}
|
||||
to={item.href}
|
||||
className="-mx-3 block rounded-lg px-3 py-2 text-base font-semibold leading-7 text-white hover:bg-gray-800"
|
||||
onClick={() => setMobileMenuOpen(false)}
|
||||
>
|
||||
{item.name}
|
||||
</Link>
|
||||
))}
|
||||
<Link
|
||||
to="/network"
|
||||
className="-mx-3 block rounded-lg px-3 py-2 text-base font-semibold leading-7 text-white hover:bg-gray-800"
|
||||
@@ -121,20 +142,6 @@ export function HeaderDark() {
|
||||
>
|
||||
Network
|
||||
</Link>
|
||||
<Link
|
||||
to="/cloud"
|
||||
className="-mx-3 block rounded-lg px-3 py-2 text-base font-semibold leading-7 text-white hover:bg-gray-800"
|
||||
onClick={() => setMobileMenuOpen(false)}
|
||||
>
|
||||
Cloud
|
||||
</Link>
|
||||
<Link
|
||||
to="/pods"
|
||||
className="-mx-3 block rounded-lg px-3 py-2 text-base font-semibold leading-7 text-white hover:bg-gray-800"
|
||||
onClick={() => setMobileMenuOpen(false)}
|
||||
>
|
||||
Pods
|
||||
</Link>
|
||||
<Link
|
||||
to="/agents"
|
||||
className="-mx-3 block rounded-lg px-3 py-2 text-base font-semibold leading-7 text-white hover:bg-gray-800"
|
||||
@@ -143,11 +150,11 @@ export function HeaderDark() {
|
||||
Agents
|
||||
</Link>
|
||||
<Link
|
||||
to="/nodes"
|
||||
to="/pods"
|
||||
className="-mx-3 block rounded-lg px-3 py-2 text-base font-semibold leading-7 text-white hover:bg-gray-800"
|
||||
onClick={() => setMobileMenuOpen(false)}
|
||||
>
|
||||
Nodes
|
||||
Pods
|
||||
</Link>
|
||||
</div>
|
||||
<div className="py-6">
|
||||
@@ -162,15 +169,7 @@ export function HeaderDark() {
|
||||
>
|
||||
Start Deployment
|
||||
</Button>
|
||||
<Button
|
||||
variant="solid"
|
||||
color="cyan"
|
||||
className="mt-4 w-full"
|
||||
onClick={() => {
|
||||
setMobileMenuOpen(false)
|
||||
handleGetConnectorClick()
|
||||
}}
|
||||
>
|
||||
<Button to="/download" variant="solid" color="cyan" className="mt-4 w-full" onClick={() => setMobileMenuOpen(false)}>
|
||||
Get Mycelium Connector
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
@@ -1,9 +1,9 @@
|
||||
import { TextHoverEffect } from "@/components/ui/text-hover-effect";
|
||||
import { TextHoverEffects } from "@/components/ui/text-hover-effects";
|
||||
|
||||
export function HomeHeadline() {
|
||||
return (
|
||||
<div className="flex items-center justify-center h-auto max-h-[200px]">
|
||||
<TextHoverEffect text="MYCELIUM" />
|
||||
<TextHoverEffects text="MYCELIUM" />
|
||||
</div>
|
||||
);
|
||||
}
|
||||