From 678da4b66c912c8675046b7c2ee60f91107a626b Mon Sep 17 00:00:00 2001 From: sasha-astiadi Date: Fri, 14 Nov 2025 18:15:04 +0100 Subject: [PATCH] feat: redesign cloud page with improved content structure and visual hierarchy - Replaced CloudHostingNew with new CloudIntro component featuring tabbed interface for Kubernetes, VDC, and QSFS capabilities - Added CloudCodeTabs component with interactive code examples and syntax highlighting - Created CloudPros section highlighting platform architecture, reliability, compatibility, and scalability - Updated hero section copy to emphasize sovereign edge infrastructure and simplified messaging - Remove --- src/pages/cloud/CloudCodeTabs.tsx | 112 ++++++++++++++++++++ src/pages/cloud/CloudHeroNew.tsx | 18 ++-- src/pages/cloud/CloudHostingNew.tsx | 4 - src/pages/cloud/CloudIntro.tsx | 154 ++++++++++++++++++++++++++++ src/pages/cloud/CloudPage.tsx | 18 +--- src/pages/cloud/CloudPros.tsx | 69 +++++++++++++ src/pages/home/HomeDesign.tsx | 69 +++++++++++++ src/pages/home/HomePage.tsx | 3 +- src/pages/network/NetworkPros.tsx | 33 +++--- 9 files changed, 435 insertions(+), 45 deletions(-) create mode 100644 src/pages/cloud/CloudCodeTabs.tsx create mode 100644 src/pages/cloud/CloudIntro.tsx create mode 100644 src/pages/cloud/CloudPros.tsx create mode 100644 src/pages/home/HomeDesign.tsx diff --git a/src/pages/cloud/CloudCodeTabs.tsx b/src/pages/cloud/CloudCodeTabs.tsx new file mode 100644 index 0000000..233a76f --- /dev/null +++ b/src/pages/cloud/CloudCodeTabs.tsx @@ -0,0 +1,112 @@ +"use client"; + +import { useState } from "react"; + +const files = [ + { + id: "kube", + label: "kubernetes.yaml", + code: `apiVersion: apps/v1 +kind: Deployment +metadata: + name: mycelium-app +spec: + replicas: 3 + selector: + matchLabels: + app: mycelium-app + template: + metadata: + labels: + app: mycelium-app`, + }, + + { + id: "vdc", + label: "vdc.tf", + code: `provider "mycelium" { + identity = "~/.mycelium/id" +} + +resource "mycelium_vdc" "production" { + name = "prod-vdc" + region = "eu-central" + nodes = 6 + cpu_cores = 24 + ram_gb = 128 + storage = "10TB" + + network_policies = ["private", "encrypted"] +}`, + }, + + { + id: "qsfs", + label: "qsfs.py", + code: `from qsfs import QSFS + +# mount encrypted distributed filesystem +fs = QSFS.mount("/mnt/secure", key="my-private-key") + +# write protected research data +with fs.open("dataset/raw-images/img001.png", "wb") as f: + f.write(b"...binary data...") + +# list stored files via S3/IPFS/WebDAV compatibility layer +files = fs.list("dataset/raw-images/") +print("Stored files:", files)`, + }, +]; + +export function CloudCodeTabs() { + const [active, setActive] = useState("kube"); + const file = files.find((f) => f.id === active)!; + + return ( +
+
+ + {/* Cyan skew background */} + + ); +} diff --git a/src/pages/cloud/CloudHeroNew.tsx b/src/pages/cloud/CloudHeroNew.tsx index 9170bbb..a06b5b2 100644 --- a/src/pages/cloud/CloudHeroNew.tsx +++ b/src/pages/cloud/CloudHeroNew.tsx @@ -13,19 +13,17 @@ export function CloudHeroNew({ onGetStartedClick = () => {} }: { onGetStartedCli
- Mycelium Cloud + MYCELIUM CLOUD

- Run Kubernetes on the Sovereign Agentic Cloud + Sovereign Edge Cloud Infrastructure

- Deploy K3s clusters on a global, self-healing mesh network. - Your workloads run on sovereign, encrypted infrastructure, without centralized cloud control. + Run compute, storage, and AI resources on infrastructure you control.

-

- Works Alone. Works Together. - Mycelium Cloud can run on any network fabric, or pair with Mycelium Network - for sovereign connectivity. +

+ The Mycelium Cloud runs on a distributed grid of independent nodes, + delivering secure, scalable performance wherever your users or data live.

diff --git a/src/pages/cloud/CloudHostingNew.tsx b/src/pages/cloud/CloudHostingNew.tsx index c7c37ff..21afbb8 100644 --- a/src/pages/cloud/CloudHostingNew.tsx +++ b/src/pages/cloud/CloudHostingNew.tsx @@ -13,7 +13,6 @@ import { Eyebrow, H3, H4 } from "@/components/Texts" const product = { subtitle: 'capabilities', name: 'What You Can Run on Mycelium Cloud', - description: '

Host nodes, deploy workloads, or build private AI systems, all on infrastructure you own and control.

', details: [ { name: 'Kubernetes Clusters', @@ -64,9 +63,6 @@ export function CloudHostingNew() { -
{/* ✅ Details accordion */} diff --git a/src/pages/cloud/CloudIntro.tsx b/src/pages/cloud/CloudIntro.tsx new file mode 100644 index 0000000..a17a4ff --- /dev/null +++ b/src/pages/cloud/CloudIntro.tsx @@ -0,0 +1,154 @@ +"use client"; + +import { useState } from "react"; +import { CloudCodeTabs } from "./CloudCodeTabs"; +import { Eyebrow, H3, P } from "@/components/Texts"; + +const tabs = [ + { + id: "kubernetes", + label: "Managed Kubernetes", + content: { + item: "Managed Kubernetes", + desc: + "Create and manage clusters across distributed environments using standard Kubernetes tools.", + + bullets: [ + "Create and manage clusters on distributed nodes", + "Run workloads at the edge or across enterprise sites", + "Keep full ownership of data and orchestration", + "Use the Kubernetes ecosystem without modification", + ], + }, + }, + + { + id: "vdc", + label: "Virtual Data Centers", + content: { + item: "Virtual Data Centers", + desc: + "Provision and manage full cloud environments without owning or maintaining servers.", + + bullets: [ + "Create dedicated environments for applications, databases, and internal services", + "Add or remove compute and storage resources instantly", + "Migrate workloads from cloud or on-prem systems", + "Meet compliance requirements by selecting where data resides", + "Benefit from continuous monitoring and automated recovery", + ], + }, + }, + + { + id: "qsfs", + label: "Quantum Safe File System (QSFS)", + content: { + item: "Quantum Safe File System (QSFS)", + desc: + "Encrypted, redundant storage designed for high-security and high-availability workloads. Data is distributed across independent nodes and remains accessible even during failures or outages.", + + bullets: [ + "Secure file storage with quantum-safe encryption", + "Distributed replication for durability", + "Standard protocol support: S3, IPFS, WebDAV", + "Automatic scaling as data grows", + "Consistent performance for research, enterprise, and AI workloads", + ], + }, + }, +]; + +export function CloudIntro() { + const [active, setActive] = useState("kubernetes"); + const current = tabs.find((t) => t.id === active)!.content; + + return ( +
+ {/* Top Spacing Border */} +
+
+ +
+ + {/* ================================ + Header + ================================= */} +
+ Capabilities + +

What You Can Run on Mycelium Cloud

+ +

+ Host nodes, deploy workloads, or build private AI systems — all on + infrastructure you own and control. Mycelium gives you scalable compute, + secure storage, and sovereign orchestration without depending on + hyperscalers. +

+
+ + {/* ================================ + Two-column layout + ================================= */} +
+ + {/* Left: Code UI */} +
+ +
+ + {/* Right: Tabs */} +
+ + {/* Tabs Navigation */} +
+ {tabs.map((tab) => ( + + ))} +
+ + {/* Tab Content */} +
+
+

{current.item}

+

+ {current.desc} +

+
+ +
+

+ Key capabilities +

+ +
    + {current.bullets.map((b, i) => ( +
  • + • + {b} +
    • + ))} +
+
+ +
+
+
+
+ + {/* Bottom Borders */} +
+
+
+ ); +} diff --git a/src/pages/cloud/CloudPage.tsx b/src/pages/cloud/CloudPage.tsx index ddc466a..99dcba0 100644 --- a/src/pages/cloud/CloudPage.tsx +++ b/src/pages/cloud/CloudPage.tsx @@ -1,11 +1,9 @@ import { AnimatedSection } from '../../components/AnimatedSection' -import { CloudArchitecture } from './CloudArchitecture' -import { CloudUseCases } from './CloudUseCases' import { CloudHeroNew } from './CloudHeroNew' -import { CloudBluePrint } from './CloudBluePrint' import { CallToAction } from './CalltoAction' -import { CloudHostingNew } from './CloudHostingNew' +import { CloudIntro } from './CloudIntro' import { CloudFeaturesLight } from './CloudFeaturesLight' +import { CloudPros } from './CloudPros' export default function CloudPage() { @@ -17,7 +15,7 @@ export default function CloudPage() { - + @@ -25,15 +23,7 @@ export default function CloudPage() { - - - - - - - - - + diff --git a/src/pages/cloud/CloudPros.tsx b/src/pages/cloud/CloudPros.tsx new file mode 100644 index 0000000..e0178d2 --- /dev/null +++ b/src/pages/cloud/CloudPros.tsx @@ -0,0 +1,69 @@ +import { Small } from '@/components/Texts' + +const highlights = [ + { + label: 'Platform Architecture', + title: 'Unified compute, storage & orchestration.', + description: + 'One unified platform for compute, storage, and orchestration.', + }, + { + label: 'Reliability', + title: 'Consistent performance everywhere.', + description: + 'Runs reliably across distributed environments.', + }, + { + label: 'Compatibility', + title: 'Works with your existing stack.', + description: + 'Works with your existing tools and workflows.', + }, + { + label: 'Scalability', + title: 'Grows with your needs.', + description: + 'Scales from small projects to full environments.', + }, +] + +export function CloudPros() { + return ( +
+ {/* Top spacing line */} +
+
+ +
+
+ {highlights.map((item) => ( +
+ {/* Hover glow */} +
+ +
+ + {item.label} + + +

+ {item.title} +

+ +

+ {item.description} +

+
+
+ ))} +
+
+ +
+
+
+ ) +} diff --git a/src/pages/home/HomeDesign.tsx b/src/pages/home/HomeDesign.tsx new file mode 100644 index 0000000..a3232a7 --- /dev/null +++ b/src/pages/home/HomeDesign.tsx @@ -0,0 +1,69 @@ +"use client"; + +const benefits = [ + { + id: 1, + title: "For Integrators & Builders", + description: + "Deploy sovereign infrastructure for organizations, governments, and large-scale systems.", + image: "/images/dev.png", + }, + { + id: 2, + title: "For Enterprises & Institutions", + description: + "Protect data, meet local compliance, and unlock new AI capabilities across distributed environments.", + image: "/images/cons.png", + }, + { + id: 3, + title: "For Sovereignty Seekers", + description: + "Run nodes, build applications, and connect directly without relying on centralized platforms.", + image: "/images/seekers.png", + }, +]; + +export function HomeDesign() { + return ( +
+ + {/* Top spacing line */} +
+
+ + {/* Content */} +
+
+ {benefits.map((item) => ( +
+ {/* Image on the LEFT */} + {item.title} + + {/* Text on the RIGHT */} +
+

+ {item.title} +

+

+ {item.description} +

+
+
+ ))} +
+
+ + {/* ✅ Bottom horizontal line with spacing */} +
+
+
+ ); +} diff --git a/src/pages/home/HomePage.tsx b/src/pages/home/HomePage.tsx index e6b6bdc..fda37ac 100644 --- a/src/pages/home/HomePage.tsx +++ b/src/pages/home/HomePage.tsx @@ -7,6 +7,7 @@ import { HomeMap } from './HomeMap' import { HomeAudience } from './HomeAudience' import { HomeAurora } from './HomeAurora' import { HomeArchitecture } from './HomeArchitecture'; +import { HomeDesign } from './HomeDesign'; @@ -35,7 +36,7 @@ export default function HomePage() { - + diff --git a/src/pages/network/NetworkPros.tsx b/src/pages/network/NetworkPros.tsx index 23f0f9c..cd00c2a 100644 --- a/src/pages/network/NetworkPros.tsx +++ b/src/pages/network/NetworkPros.tsx @@ -8,10 +8,10 @@ const highlights = [ 'Connectivity flows directly between users, nodes, and services without platform ownership.', }, { - label: 'Identity', - title: 'One identity across all capabilities.', + label: 'Platform', + title: 'One unified platform for compute, storage, and orchestration.', description: - 'A single cryptographic identity governs your network, storage, agents, and deployments.', + 'Runs reliably across distributed environments. Works with your existing tools and workflows. Scales from small projects to full environments.', }, { label: 'Scale', @@ -27,32 +27,33 @@ const highlights = [ }, ] -export function NetworkPros() { +export function CloudPros() { return ( -
- {/* ✅ Top horizontal line with spacing */} -
-
+
+ {/* Top spacing line */} +
+
-
+
{highlights.map((item) => (
-
+ {/* Hover glow */} +
- + {item.label} -

+

{item.title}

-

+

{item.description}

@@ -61,8 +62,8 @@ export function NetworkPros() {
-
-
+
+
) }