diff --git a/public/images/bento-network.png b/public/images/bento-network.png new file mode 100644 index 0000000..8aade9f Binary files /dev/null and b/public/images/bento-network.png differ diff --git a/src/components/features-section-demo-2.tsx b/src/components/features-section-demo-2.tsx index f32c4e8..2e6fdab 100644 --- a/src/components/features-section-demo-2.tsx +++ b/src/components/features-section-demo-2.tsx @@ -59,7 +59,7 @@ export default function FeaturesSectionDemo() { }, ]; return ( -
+
{features.map((feature, index) => ( ))} @@ -81,7 +81,7 @@ const Feature = ({ return (
+

Packed with thousands of features diff --git a/src/components/ui/apple-cards-carousel.tsx b/src/components/ui/apple-cards-carousel.tsx index 5f51780..ec966f6 100644 --- a/src/components/ui/apple-cards-carousel.tsx +++ b/src/components/ui/apple-cards-carousel.tsx @@ -62,7 +62,7 @@ export const Carousel = ({ items, initialScroll = 0 }: CarouselProps) => { return (
@@ -135,7 +135,7 @@ export const Card = ({ layoutId={layout ? `card-${card.title}` : undefined} className="relative z-10 flex h-104 w-80 flex-col justify-between overflow-hidden rounded-3xl p-8 md:h-120 md:w-96" > -
+
+
Benefits @@ -129,7 +129,7 @@ export function HomeBenefits() { export const SkeletonOne = () => { return ( -
+
{/* TODO */} diff --git a/src/pages/home/HomeHosting.tsx b/src/pages/home/HomeHosting.tsx index 3d9e3b6..d96f460 100644 --- a/src/pages/home/HomeHosting.tsx +++ b/src/pages/home/HomeHosting.tsx @@ -108,38 +108,51 @@ const features = [ export function HomeHosting() { return ( -
- -
- IN ACTIVE EVOLUTION -

- Expanding the Network Layer -

-

- 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. -

-
+
-
    - {features.map((feature) => ( -
+
+ + + {/* ✅ Inner content container */} +
+ +
+ IN ACTIVE EVOLUTION +

+ Expanding the Network Layer +

+

+ 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. +

+
+ +
    - -

    {feature.name}

    -

    {feature.description}

    - - ))} -
- + {features.map((feature) => ( +
  • + +

    {feature.name}

    +

    {feature.description}

    +
    • + ))} + + + +
    + {/* ✅ Bottom horizontal line with spacing */} +
    +
    ) } diff --git a/src/pages/home/HomeTab.tsx b/src/pages/home/HomeTab.tsx index d0b983d..863bd5f 100644 --- a/src/pages/home/HomeTab.tsx +++ b/src/pages/home/HomeTab.tsx @@ -3,94 +3,147 @@ import { useState } from "react"; import { Eyebrow, H3, P } from "@/components/Texts"; -const tabs = [ - { - id: "cloud", - label: "Kubernetes Clusters", - title: "Mycelium Cloud", - description: "Deploy Kubernetes clusters on sovereign infrastructure.", - image: "/images/testpic.png", - link: "/cloud", - }, - { - id: "network", - label: "Mesh Networking", - title: "Mycelium Network", - description: "Encrypted peer-to-peer mesh networking across the globe.", - image: "/images/testpic.png", - link: "/network", - }, - { - id: "agent", - label: "AI Agents", - title: "Mycelium Agents", - description: "Private, programmable AI systems that run on your hardware.", - image: "/images/testpic.png", - link: "/agent", - }, - { - id: "compute", - label: "Compute & Storage", - title: "Hardware Resources", - description: "The resource layers powering the stack.", - image: "/images/testpic.png", - link: "/compute", - }, -]; - export function HomeTab() { - const [active, setActive] = useState("cloud"); - const current = tabs.find((t) => t.id === active)!; - return ( -
    +
    -
    - Ecosystem -

    Mycelium Components

    -

    + {/* ✅ Top spacer + full-width line */} +

    +
    + + + {/* ✅ Section with vertical borders */} +
    + Deploy faster +

    Mycelium Components

    +

    Each component can be used on its own or combined into a fully sovereign cloud.

    -
    - {/* ✅ FULL-WIDTH NO PADDING CARD ROW */} -
    - - {tabs.map((tab) => ( - - ))} +
    +
    + +
    +
    +
    + +
    +

    Agents

    +

    Mycelium Agents

    +

    + Private, programmable AI systems that run on your hardware. +

    +
    +
    +
    +
    + {/* ✅ ✅ MIDDLE ROW (half-height, equal spacing) */} +
    +
    +
    + +
    +

    Agents

    +

    Mycelium Cloud

    +

    + Private, programmable AI systems that run on your hardware. +

    +
    +
    +
    +
    + + {/* ✅ BOTTOM ROW */} +
    +
    +
    + +
    +

    Compute

    +

    Mycelium Compute

    +

    + The Compute resource layers powering the stack. +

    +
    +
    +
    +
    + +
    +
    +
    + +
    +

    Storage

    +

    Mycelium Storage

    +

    + The Storage resource layers powering the stack. +

    +
    +
    +
    +
    + +
    +
    +
    + +
    +

    GPU

    +

    Mycelium GPU

    +

    + The GPU resource layers powering the stack. +

    +
    +
    +
    +
    +
    + + {/* ✅ Bottom full-width line + spacer */} +
    +
    ); } diff --git a/src/pages/home/StackSectionDark.tsx b/src/pages/home/StackSectionDark.tsx index b19d4c6..2ca0d8a 100644 --- a/src/pages/home/StackSectionDark.tsx +++ b/src/pages/home/StackSectionDark.tsx @@ -7,9 +7,12 @@ import { FadeIn } from "@/components/ui/FadeIn"; export function StackSectionDark() { return ( -
    +
    + {/* ✅ Top horizontal line with spacing */} +
    +
    {/* === Background Layer === */} -
    +
    {/* Central main aura */} {/* === Content === */} -
    +
    {/* Left Column - Text */}
    @@ -69,7 +72,7 @@ export function StackSectionDark() {
    {/* Right Column - Animated Stack */} -
    +
    + {/* ✅ Bottom horizontal line with spacing */} +
    +
    ); } diff --git a/src/pages/home/archive/HomeMap.tsx b/src/pages/home/archive/HomeMap.tsx index 5e0892a..f46b363 100644 --- a/src/pages/home/archive/HomeMap.tsx +++ b/src/pages/home/archive/HomeMap.tsx @@ -23,7 +23,7 @@ export function HomeMapSection() { ))}

    -

    +

    Mycelium Network's advancement technology enables anyone to deploy their own Internet infrastructure, anywhere.

    diff --git a/src/pages/home/archive/HomeUniverse.tsx b/src/pages/home/archive/HomeUniverse.tsx index 02c54c2..8ddd58a 100644 --- a/src/pages/home/archive/HomeUniverse.tsx +++ b/src/pages/home/archive/HomeUniverse.tsx @@ -4,7 +4,7 @@ import { GlobeAltIcon } from "@heroicons/react/24/outline"; export function HomeUniverse() { return ( -
    +

    {/* left text */} diff --git a/src/pages/network/PrimaryFeatures.tsx b/src/pages/network/PrimaryFeatures.tsx index c0d6110..e8c02e3 100644 --- a/src/pages/network/PrimaryFeatures.tsx +++ b/src/pages/network/PrimaryFeatures.tsx @@ -348,7 +348,7 @@ function FeaturesMobile() { >