diff --git a/public/videos/plebdevs-montage.mp4 b/public/videos/plebdevs-montage.mp4 new file mode 100644 index 0000000..ac3ff62 Binary files /dev/null and b/public/videos/plebdevs-montage.mp4 differ diff --git a/src/components/content/carousels/InteractivePromotionalCarousel.js b/src/components/content/carousels/InteractivePromotionalCarousel.js index 535f93c..2f26f30 100644 --- a/src/components/content/carousels/InteractivePromotionalCarousel.js +++ b/src/components/content/carousels/InteractivePromotionalCarousel.js @@ -1,5 +1,5 @@ import Image from "next/image" -import { useState } from "react" +import { useState, useRef, useEffect } from "react" import { useImageProxy } from "@/hooks/useImageProxy" import GenericButton from "@/components/buttons/GenericButton" import { useRouter } from "next/router" @@ -13,68 +13,69 @@ const promotions = [ title: "Developer education & community platform", description: "PlebDevs is your gateway to mastering Bitcoin, Lightning, and Nostr technologies. Join our community of aspiring developers and start your journey today!", icon: "pi pi-code", - image: "https://media.istockphoto.com/id/537331500/photo/programming-code-abstract-technology-background-of-software-deve.jpg?s=612x612&w=0&k=20&c=jlYes8ZfnCmD0lLn-vKvzQoKXrWaEcVypHnB5MuO-g8=", + video: "/videos/plebdevs-montage.mp4", }, { id: 2, - category: "COURSES", - title: "Structured learning paths for new devs", - description: "Dive into our comprehensive courses covering Bitcoin protocol, Lightning Network, and Nostr. From basics to advanced topics, we've got you covered.", + category: "CONTENT", + title: "Comprehensive Learning Resources", + description: "Access our extensive library of courses, videos, and documents. From structured learning paths to hands-on workshops, we've got everything you need to master Bitcoin, Lightning, and Nostr development.", icon: "pi pi-book", image: "https://media.istockphoto.com/id/1224500457/photo/programming-code-abstract-technology-background-of-software-developer-and-computer-script.jpg?s=612x612&w=0&k=20&c=nHMypkMTU1HUUW85Zt0Ff7MDbq17n0eVeXaoM9Knt4Q=", }, { id: 3, - category: "VIDEOS", - title: "Hands-on workshops and devleloper video content", - description: "Watch and learn with our interactive video workshops. Get practical experience building real Bitcoin and Lightning applications.", - icon: "pi pi-video", - image: "https://newsroom.siliconslopes.com/content/images/2018/10/code.jpg", - }, - { - id: 4, - category: "DOCUMENTS", - title: "In-depth Resources and Documentation", - description: "Access our extensive library of documents, including guides, resources, and best practices for Bitcoin development.", - icon: "pi pi-file", - image: "https://img.freepik.com/free-photo/programming-background-with-person-working-with-codes-computer_23-2150010125.jpg", - }, - { - id: 5, category: "COMMUNITY", - title: "Join Our Community", + title: "Join Our Community of learners, hackers, and plebs", description: "Connect with other developers, share your projects, and get support from our community of Bitcoin enthusiasts.", icon: "pi pi-users", image: "https://pikwizard.com/pw/medium/50238b1cad4ff412fdafc1325efa1c9f.jpg", }, { - id: 6, + id: 4, category: "LIGHTNING / NOSTR", - title: "Lightning and Nostr integrated", + title: "Lightning and Nostr integrated platform", description: "This platform is the first of its kind to integrate Lightning Network and Nostr protocols, allowing users to send and receive payments and interact with the Nostr network.", icon: "pi pi-bolt", image: "https://www.financemagnates.com/wp-content/uploads/2016/05/Bicoin-lightning.jpg", }, ] -// todo bigger ore simple CTA to get users into the content const InteractivePromotionalCarousel = () => { const [selectedPromotion, setSelectedPromotion] = useState(promotions[0]) const { returnImageProxy } = useImageProxy(); const windowWidth = useWindowWidth(); const isMobileView = windowWidth <= 1360; const router = useRouter(); + const videoRef = useRef(null); + + useEffect(() => { + if (videoRef.current && selectedPromotion.video) { + videoRef.current.play(); + } + }, [selectedPromotion]); return (
- {selectedPromotion.title} + {selectedPromotion.video ? ( +