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:
		@@ -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",
 | 
			
		||||
  },
 | 
			
		||||
];
 | 
			
		||||
 
 | 
			
		||||
		Reference in New Issue
	
	Block a user