diff --git a/public/images/cons.png b/public/images/cons.png new file mode 100644 index 0000000..46a4085 Binary files /dev/null and b/public/images/cons.png differ diff --git a/public/images/dev.png b/public/images/dev.png new file mode 100644 index 0000000..a37fd1a Binary files /dev/null and b/public/images/dev.png differ diff --git a/public/images/seekers.png b/public/images/seekers.png new file mode 100644 index 0000000..c3b6e3e Binary files /dev/null and b/public/images/seekers.png differ diff --git a/src/App.tsx b/src/App.tsx index 51485b1..f3569b8 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -11,7 +11,7 @@ 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 NodePage = lazy(() => import('./pages/node/NodePage')); +const NodesPage = lazy(() => import('./pages/nodes/NodesPage')); function App() { return ( @@ -28,7 +28,7 @@ function App() { } /> } /> } /> - } /> + } /> diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx index d4f36c0..766967f 100644 --- a/src/components/Footer.tsx +++ b/src/components/Footer.tsx @@ -28,7 +28,7 @@ export function Footer() { Agents - Node + Nodes diff --git a/src/components/Header.tsx b/src/components/Header.tsx index d11eb79..d0d718c 100644 --- a/src/components/Header.tsx +++ b/src/components/Header.tsx @@ -46,7 +46,7 @@ export function Header() { to="/nodes" className="text-base/7 tracking-tight text-gray-700 hover:text-cyan-500 transition-colors" > - Node + Nodes @@ -135,7 +135,7 @@ export function Header() { 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)} > - Node + Nodes
diff --git a/src/components/HeaderDark.tsx b/src/components/HeaderDark.tsx index 80cf471..ddee062 100644 --- a/src/components/HeaderDark.tsx +++ b/src/components/HeaderDark.tsx @@ -46,7 +46,7 @@ export function HeaderDark() { to="/nodes" className="text-base/7 tracking-tight text-gray-300 hover:text-cyan-400 transition-colors" > - Node + Nodes
@@ -135,7 +135,7 @@ export function HeaderDark() { 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)} > - Node + Nodes
diff --git a/src/pages/home/CallToAction.tsx b/src/pages/home/CallToAction.tsx index 6618438..f05f0ba 100644 --- a/src/pages/home/CallToAction.tsx +++ b/src/pages/home/CallToAction.tsx @@ -1,3 +1,4 @@ +import { Link } from 'react-router-dom'; import { Container } from '@/components/Container' import { Button } from '@/components/Button' import { H3, P } from '@/components/Texts' @@ -63,9 +64,9 @@ export function CallToAction() { Deploy in Cloud - + Host a Node → - +
diff --git a/src/pages/network/CallToAction.tsx b/src/pages/network/CallToAction.tsx index e200f21..2f1076d 100644 --- a/src/pages/network/CallToAction.tsx +++ b/src/pages/network/CallToAction.tsx @@ -1,6 +1,7 @@ "use client"; -import { Container } from "@/components/Container"; +import { Link } from 'react-router-dom'; +import { Container } from '@/components/Container' import { Button } from "@/components/Button"; export function CallToAction() { @@ -42,9 +43,9 @@ Use the network to link environments, deploy workloads, or host nodes to strengt Deploy in Cloud - + Host a Node → - + diff --git a/src/pages/network/NetworkPage.tsx b/src/pages/network/NetworkPage.tsx index 2684e23..60d54fd 100644 --- a/src/pages/network/NetworkPage.tsx +++ b/src/pages/network/NetworkPage.tsx @@ -6,6 +6,8 @@ import { SecondaryFeatures } from './SecondaryFeatures' import { CallToAction } from './CallToAction' import { NetworkCapabilities } from './NetworkCapabilities' import { NetworkUsecases } from './NetworkUsecases' +import { NetworkPros } from './NetworkPros' + export default function NetworkPage() { return ( @@ -19,7 +21,7 @@ export default function NetworkPage() { - + @@ -27,13 +29,18 @@ export default function NetworkPage() { - + - + + + + + + diff --git a/src/pages/network/NetworkPros.tsx b/src/pages/network/NetworkPros.tsx new file mode 100644 index 0000000..23f0f9c --- /dev/null +++ b/src/pages/network/NetworkPros.tsx @@ -0,0 +1,68 @@ +import { Small } from '@/components/Texts' + +const highlights = [ + { + label: 'Network Advantage', + title: 'Fully peer-to-peer, no logins, no central cloud.', + description: + 'Connectivity flows directly between users, nodes, and services without platform ownership.', + }, + { + label: 'Identity', + title: 'One identity across all capabilities.', + description: + 'A single cryptographic identity governs your network, storage, agents, and deployments.', + }, + { + label: 'Scale', + title: 'Scales instantly from one POD to thousands.', + description: + 'Deploy locally or expand globally — the mesh routes and balances itself automatically.', + }, + { + label: 'Security', + title: 'Secure, quantum-safe, and edge-ready for the next decade.', + description: + 'Next-gen encryption, multipath routing, and attested nodes protect workloads everywhere.', + }, +] + +export function NetworkPros() { + return ( +
+ {/* ✅ Top horizontal line with spacing */} +
+
+ +
+
+ {highlights.map((item) => ( +
+
+ +
+ + {item.label} + + +

+ {item.title} +

+ +

+ {item.description} +

+
+
+ ))} +
+
+ +
+
+
+ ) +} diff --git a/src/pages/network/NetworkUsecases.tsx b/src/pages/network/NetworkUsecases.tsx index 964499f..12f0c80 100644 --- a/src/pages/network/NetworkUsecases.tsx +++ b/src/pages/network/NetworkUsecases.tsx @@ -1,12 +1,12 @@ "use client"; -import { useRef } from "react"; import { Eyebrow, SectionHeader, P } from "@/components/Texts"; -import { IoArrowBackOutline, IoArrowForwardOutline } from "react-icons/io5"; import { LockClosedIcon, ArrowPathIcon, GlobeAltIcon, + SignalIcon, + CpuChipIcon, } from "@heroicons/react/24/solid"; const networkUseCases = [ @@ -27,46 +27,52 @@ const networkUseCases = [ { title: "Service-to-Service Networking Across Environments", description: - "Connect applications running across home labs, cloud regions, edge nodes, and data centers all on one address space.", + "Connect apps running across home labs, cloud regions, edge nodes, and datacenters — all on one address space.", ideal: "Ideal for: dev teams, distributed apps, container + K3s workloads", icon: GlobeAltIcon, }, { title: "Resilient Connectivity Across Regions & Outages", description: - "Connect systems across countries, datacenters, edge locations, and remote deployments — with routing that automatically heals around ISP failures, censorship, and regional outages.", + "Automatically routes around ISP failures, censorship, and regional outages using multipath encrypted relays.", ideal: - "Ideal for: research networks, cross-border orgs, distributed compute, off-grid / rural deployments", + "Ideal for: cross-border orgs, distributed compute, remote/off-grid deployments", icon: ArrowPathIcon, }, + { + title: "Adaptive Mesh for Mobile & Edge Movement", + description: + "Devices moving between networks, cities, or countries maintain continuous secure connectivity with no reconnection steps.", + ideal: "Ideal for: mobile agents, field teams, robotics, vehicles, IoT", + icon: SignalIcon, + }, + { + title: "Compute Fabric Linking Nodes & Agents", + description: + "Agents, jobs, and tasks can interact across nodes without exposing private IPs or opening firewalls.", + ideal: "Ideal for: agent networks, edge AI workloads, distributed computation", + icon: CpuChipIcon, + }, ]; export function NetworkUsecases() { - const sliderRef = useRef(null); - - const scrollLeft = () => - sliderRef.current?.scrollBy({ left: -400, behavior: "smooth" }); - - const scrollRight = () => - sliderRef.current?.scrollBy({ left: 400, behavior: "smooth" }); - return (
-
-
    +
    + {/* GRID 3 x 3 */} +
    {networkUseCases.map((item, idx) => ( -
  • + {/* Intro Card */} {item.isIntro ? (
    @@ -81,47 +87,39 @@ export function NetworkUsecases() { {item.description}

    - -
    - - -
    ) : ( <> - {/* ✅ Icon above title */} - {item.icon && ( + {/* Icon */} + {item.icon && (
    )} -

    + {/* Title */} +

    {item.title}

    -

    + {/* Description */} +

    {item.description}

    -

    + + {/* Ideal for */} +

    {item.ideal}

    )} -
    • +
    ))} -
+
+ +
+
); } diff --git a/src/pages/network/SecondaryFeatures.tsx b/src/pages/network/SecondaryFeatures.tsx index 7c65d21..c0cff04 100644 --- a/src/pages/network/SecondaryFeatures.tsx +++ b/src/pages/network/SecondaryFeatures.tsx @@ -197,12 +197,12 @@ export function SecondaryFeatures() {
-

IN ACTIVE EVOLUTION

+

FEATURES

- Expanding the Network Layer + Core Features

- The Mycelium Network is evolving to support richer data movement, identity, and application connectivity across the mesh. These enhancements deepen autonomy and improve real-world usability. + The Mycelium Network is evolving with new features to support richer data movement, identity, and application connectivity across the mesh.

    { +const NodesPage: React.FC = () => { return ( <> @@ -19,4 +19,4 @@ const NodePage: React.FC = () => { ); }; -export default NodePage; +export default NodesPage;