test
272 + {/* Slide nav dots */} 273 + <div className="absolute bottom-5 left-1/2 -translate-x-1/2 z-20 flex items-center gap-2.5"> 274 + {[ 275 + { index: 0, label: "Hero image" }, 276 + { index: 1, label: "Walkthrough video 1" }, 277 + { index: 2, label: "Walkthrough video 2" }, 278 + ].map(({ index, label }) => ( 279 + <button 280 + key={index} 281 + aria-label={`Go to slide: ${label}`} 282 + onClick={() => setHeroSlide(index)} 283 + className={`rounded-full transition-all duration-300 ${ 284 + heroSlide === index 285 + ? "w-6 h-2 bg-gold" 286 + : "w-2 h-2 bg-white/50 hover:bg-white/80" 287 + }`} 288 + /> 289 + ))} 290 + </div> 291 </section>