'use client' import * as React from 'react' // 1469 - 954 const data = [ { title: 'Paramétrez votre CRA en 3 clicks', description: 'Sélectionnez votre période, le prestataire qui réalise la mission et le client pour lequel vous travaillez : votre CRA est créé et prêt à être rempli.', video: '/1.mp4', }, { title: 'Saissisez vos temps sans effort', description: 'Que vous travailliez à l’heure ou à la journée, Timizer vous permet de remplir simplement et rapidement les temps que vous avez passés quotidiennement sur votre mission sur votre CRA.', video: '/2.mp4', }, { title: 'Exportez votre CRA au format PDF', description: 'Chaque fin de mois, générez un PDF contenant toutes les informations utiles de la mission, en y intégrant votre signature, avant de le soumettre à la validation de votre client.', video: '/3.mp4', }, { title: 'Faites-le signer par votre client', description: 'Une fois votre CRA validé, plus besoin de l’imprimer : partagez-le à votre client et faites-le signer directement en ligne depuis l’application Timizer dans une interface dédiée et sécurisée.', video: '/4.mp4', }, ] export default function Home() { const [active, setActive] = React.useState(0) const [progress, setProgress] = React.useState(0) const videoRefs = React.useRef<HTMLVideoElement[] | null[]>([]) const handleShow = (index: number) => { setActive(index) setProgress(0) const video = videoRefs.current[index] if (video) { video.currentTime = 0 video.play() } } const updateProgress = () => { const video = videoRefs.current[active] if (video) { const progress = (video.currentTime / video.duration) * 100 setProgress(progress) } } const handleVideoEnd = () => { setActive((prevActive) => { const nextActive = (prevActive + 1) % data.length const nextVideo = videoRefs.current[nextActive] if (nextVideo) { nextVideo.currentTime = 0 nextVideo.play() } return nextActive }) setProgress(0) } return ( <main className="relative flex min-h-screen items-center justify-center bg-white p-4 pt-16 xl:p-24"> <div className="flex w-full max-w-7xl flex-col items-center gap-6 xl:flex-row"> <div className="w-full space-y-4 xl:w-5/12"> {data.map((item, index) => ( <button key={item.title} className={`relative w-full cursor-pointer overflow-hidden rounded-2xl border border-slate-50 bg-white px-4 py-6 opacity-50 duration-300 ${active === index && 'border-white bg-yellow-50 !opacity-100'} `} onClick={() => handleShow(index)} //onMouseEnter={() => handleShow(index)} onKeyDown={(e) => { if (e.key === 'Enter') { handleShow(index) } }} > <div className="flex w-full items-center justify-start gap-4"> <div className={`flex h-10 w-10 shrink-0 items-center justify-center rounded-lg border duration-300 ${ active === index ? 'border-white bg-green-300 text-white' : 'bg-white' } `} > {index + 1} </div> <h3 className={`text-left text-xl font-bold leading-6 ${active === index ? 'text-abyss' : 'text-grey-light'} `} > {item.title} </h3> </div> <div className={`description ${active === index && 'active'} `}> <p className="font-outfit text-grey-light text-left text-base leading-6"> {item.description} </p> </div> {active === index && ( <div className="transition-all" style={{ width: `${progress}%`, height: '5px', background: 'green', position: 'absolute', bottom: 0, left: 0, transitionDuration: '0.5s', }} ></div> )} </button> ))} </div> <div className="bg-blur-background flex h-[560px] w-full flex-col overflow-hidden rounded-3xl border border-white backdrop-blur-2xl xl:w-7/12"> {data.map((item, index) => ( <div key={item.title} className="relative flex h-[560px] w-full shrink-0 items-center justify-center bg-slate-50 p-4 duration-300" style={{ transform: `translateY(-${active * 100}%)`, }} > <video ref={(el) => (videoRefs.current[index] = el)} className="h-full w-full rounded-2xl object-cover" autoPlay loop={false} muted onTimeUpdate={updateProgress} onEnded={handleVideoEnd} > <source src={item.video} type="video/mp4" /> </video> </div> ))} </div> </div> <div className="absolute top-0 flex w-full items-center justify-between border-b-2 border-green-900 bg-slate-100 px-6 py-2 font-semibold text-white"> <a className="text-green-900 underline underline-offset-2" href="https://x.com/ln_dev7" > Code by LN </a> <a className="text-green-900 underline underline-offset-2" href="https://github.com/ln-dev7/bc-challenge-04-06-24" > GitHub </a> <a className="text-green-900 underline underline-offset-2" href="https://timizer.io/" > Credits </a> </div> </main> ) }

Dynamic Carousel 0

Code

Stacks

Inspiration

X ( Twitter ) Post