diff --git a/src/components/ui/apple-cards-carousel.tsx b/src/components/ui/apple-cards-carousel.tsx index 5c89960..541009d 100644 --- a/src/components/ui/apple-cards-carousel.tsx +++ b/src/components/ui/apple-cards-carousel.tsx @@ -1,19 +1,16 @@ "use client"; import React, { useEffect, - useRef, useState, - createContext, - useContext, } from "react"; import { IconArrowNarrowLeft, IconArrowNarrowRight, - IconX, + IconChevronRight, } from "@tabler/icons-react"; import { cn } from "@/lib/utils"; -import { AnimatePresence, motion } from "motion/react"; -import { useOutsideClick } from "@/hooks/use-outside-click"; +import { Link } from "react-router-dom"; +import { motion } from "motion/react"; interface CarouselProps { items: JSX.Element[]; @@ -24,22 +21,15 @@ type Card = { src: string; title: string; category: string; - content: React.ReactNode; + description: string; + link: string; + bg: any; }; -export const CarouselContext = createContext<{ - onCardClose: (index: number) => void; - currentIndex: number; -}>({ - onCardClose: () => {}, - currentIndex: 0, -}); - export const Carousel = ({ items, initialScroll = 0 }: CarouselProps) => { const carouselRef = React.useRef(null); const [canScrollLeft, setCanScrollLeft] = React.useState(false); const [canScrollRight, setCanScrollRight] = React.useState(true); - const [currentIndex, setCurrentIndex] = useState(0); useEffect(() => { if (carouselRef.current) { @@ -68,27 +58,12 @@ export const Carousel = ({ items, initialScroll = 0 }: CarouselProps) => { } }; - const handleCardClose = (index: number) => { - if (carouselRef.current) { - const cardWidth = isMobile() ? 230 : 384; // (md:w-96) - const gap = isMobile() ? 4 : 8; - const scrollPosition = (cardWidth + gap) * (index + 1); - carouselRef.current.scrollTo({ - left: scrollPosition, - behavior: "smooth", - }); - setCurrentIndex(index); - } - }; - + const isMobile = () => { return window && window.innerWidth < 768; }; return ( -
{
- ); }; export const Card = ({ card, - index, layout = false, }: { card: Card; - index: number; layout?: boolean; }) => { - const [open, setOpen] = useState(false); - const containerRef = useRef(null); - const { onCardClose } = useContext(CarouselContext); - - useEffect(() => { - function onKeyDown(event: KeyboardEvent) { - if (event.key === "Escape") { - handleClose(); - } - } - - if (open) { - document.body.style.overflow = "hidden"; - } else { - document.body.style.overflow = "auto"; - } - - window.addEventListener("keydown", onKeyDown); - return () => window.removeEventListener("keydown", onKeyDown); - }, [open]); - - useOutsideClick(containerRef, () => handleClose()); - - const handleOpen = () => { - setOpen(true); - }; - - const handleClose = () => { - setOpen(false); - onCardClose(index); - }; - + return ( - <> - - {open && ( -
- - - - - {card.category} - - - {card.title} - -
{card.content}
- -
- )} - - +
-
+
{card.title} +
+ + {card.description} + +
+ +
+
- - - + + ); }; diff --git a/src/images/agent1.jpg b/src/images/agent1.jpg new file mode 100644 index 0000000..cb332a5 Binary files /dev/null and b/src/images/agent1.jpg differ diff --git a/src/images/slider/agent1.jpg b/src/images/slider/agent1.jpg new file mode 100644 index 0000000..78cbb9d Binary files /dev/null and b/src/images/slider/agent1.jpg differ diff --git a/src/images/slider/cloud1.jpg b/src/images/slider/cloud1.jpg new file mode 100644 index 0000000..db5fbaf Binary files /dev/null and b/src/images/slider/cloud1.jpg differ diff --git a/src/images/slider/compute1.jpg b/src/images/slider/compute1.jpg new file mode 100644 index 0000000..467d2f1 Binary files /dev/null and b/src/images/slider/compute1.jpg differ diff --git a/src/images/slider/gpu1.jpg b/src/images/slider/gpu1.jpg new file mode 100644 index 0000000..461133e Binary files /dev/null and b/src/images/slider/gpu1.jpg differ diff --git a/src/images/slider/network1.jpg b/src/images/slider/network1.jpg new file mode 100644 index 0000000..dba7399 Binary files /dev/null and b/src/images/slider/network1.jpg differ diff --git a/src/images/slider/storage1.jpg b/src/images/slider/storage1.jpg new file mode 100644 index 0000000..d748cc8 Binary files /dev/null and b/src/images/slider/storage1.jpg differ diff --git a/src/pages/home/HomeSlider.tsx b/src/pages/home/HomeSlider.tsx index 1796af9..830071b 100644 --- a/src/pages/home/HomeSlider.tsx +++ b/src/pages/home/HomeSlider.tsx @@ -10,7 +10,7 @@ export function HomeSlider() { )); return ( -
+

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: , + bg: networkImage, + link: "/network", }, { category: "AI Agent", title: "Mycelium Agent", + description: "An intelligent agent for task automation.", src: "/images/gallery/2.webp", content: , + bg: agentImage, + link: "/agent", }, { category: "Cloud", title: "Mycelium Cloud", + description: "Decentralized cloud storage and services.", src: "/images/gallery/3.webp", content: , + bg: cloudImage, + link: "/cloud", }, { category: "GPU", title: "Mycelium GPU", + description: "Access to a global network of GPUs.", src: "/images/gallery/4.webp", content: , + bg: gpuImage, + link: "/gpu", }, { category: "Compute", title: "Mycelium Compute", + description: "Run computations on a distributed network.", src: "/images/gallery/5.webp", content: , + bg: computeImage, + link: "/compute", }, { category: "Storage", title: "Mycelium Storage", + description: "Secure and decentralized data storage.", src: "/images/gallery/6.webp", content: , + bg: storageImage, + link: "/storage", }, ];