feat: update card carousel to use direct background images

- Replaced BlurImage component with direct background image styling for better performance
- Added new 'bg' property to Card type to support background image imports
- Imported slider background images for each card category
- Removed redundant background color class and BlurImage component
- Updated card styling to maintain visual consistency with background images
This commit is contained in:
2025-10-27 13:29:05 +01:00
parent b543aebce9
commit a52e838d17
9 changed files with 53 additions and 120 deletions

View File

@@ -10,7 +10,7 @@ export function HomeSlider() {
));
return (
<div className="w-full h-full py-20 bg-black">
<div className="w-full h-full py-20 bg-[#0b0b0b]">
<div className="max-w-7xl mx-auto pl-4">
<H3 className="text-left text-white">
Discover the Mycelium Ecosystem
@@ -43,42 +43,67 @@ const DummyContent = () => {
);
};
import networkImage from "@/images/slider/network1.jpg";
import agentImage from "@/images/slider/agent1.jpg";
import cloudImage from "@/images/slider/cloud1.jpg";
import gpuImage from "@/images/slider/gpu1.jpg";
import computeImage from "@/images/slider/compute1.jpg";
import storageImage from "@/images/slider/storage1.jpg";
const data = [
{
category: "DePIN",
title: "Mycelium Network",
description: "A decentralized network for distributed computing.",
src: "/images/gallery/9.webp",
content: <DummyContent />,
bg: networkImage,
link: "/network",
},
{
category: "AI Agent",
title: "Mycelium Agent",
description: "An intelligent agent for task automation.",
src: "/images/gallery/2.webp",
content: <DummyContent />,
bg: agentImage,
link: "/agent",
},
{
category: "Cloud",
title: "Mycelium Cloud",
description: "Decentralized cloud storage and services.",
src: "/images/gallery/3.webp",
content: <DummyContent />,
bg: cloudImage,
link: "/cloud",
},
{
category: "GPU",
title: "Mycelium GPU",
description: "Access to a global network of GPUs.",
src: "/images/gallery/4.webp",
content: <DummyContent />,
bg: gpuImage,
link: "/gpu",
},
{
category: "Compute",
title: "Mycelium Compute",
description: "Run computations on a distributed network.",
src: "/images/gallery/5.webp",
content: <DummyContent />,
bg: computeImage,
link: "/compute",
},
{
category: "Storage",
title: "Mycelium Storage",
description: "Secure and decentralized data storage.",
src: "/images/gallery/6.webp",
content: <DummyContent />,
bg: storageImage,
link: "/storage",
},
];