Files
www_projectmycelium_com/src/pages/home/HomeSlider.tsx
sasha-astiadi 00802c7064 feat: reorder slider items and update ecosystem messaging
- Moved Compute/Storage/GPU to first position in slider
- Updated heading from "Mycelium Products" to "Mycelium Components"
- Changed description to emphasize Agents instead of "intelligent automation"
2025-11-04 13:33:53 +01:00

71 lines
1.9 KiB
TypeScript

"use client";
import { Carousel, Card } from "@/components/ui/apple-cards-carousel";
import { H3, P , Eyebrow} from "@/components/Texts";
export function HomeSlider() {
const cards = data.map((card) => (
<Card key={card.src} card={card} />
));
return (
<div className="w-full h-full py-20 bg-[#111111]">
<div className="max-w-7xl mx-auto pl-4">
<Eyebrow className="text-left">
Ecosystem
</Eyebrow>
<H3 className="text-left text-white">
Discover Mycelium Components
</H3>
<div className="mt-4 max-w-3xl">
<P className="text-left text-neutral-400">
From compute and networking to Agents, these components can be used on its own or combined into a fully sovereign cloud.
</P>
</div>
</div>
<Carousel items={cards} />
</div>
);
}
import networkImage from "/images/pages/network.webp";
import agentImage from "/images/pages/agent.webp";
import cloudImage from "/images/pages/cloud.webp";
import computeImage from "/images/pages/compute.webp";
const data = [
{
category: "Resources",
title: "Compute / Storage / GPU",
description: "The resource layers powering the stack.",
src: "/images/pages/compute.png",
bg: computeImage,
link: "/compute",
},
{
category: "Cloud",
title: "Mycelium Cloud",
description: "Deploy Kubernetes clusters on sovereign infrastructure.",
src: "/images/pages/cloud.png",
bg: cloudImage,
link: "/cloud",
},
{
category: "DePIN",
title: "Mycelium Network",
description: "Encrypted peer-to-peer mesh networking across the globe.",
src: "/images/pages/network.png",
bg: networkImage,
link: "/network",
},
{
category: "AI Agent",
title: "Mycelium Agents",
description: "Private, programmable AI systems that run on your hardware.",
src: "/images/pages/agent.png",
bg: agentImage,
link: "/agent",
},
];