tes
/**
* @license
* SPDX-License-Identifier: Apache-2.0
*/
import { useState, useEffect, useRef } from 'react';
import { motion, AnimatePresence } from 'motion/react';
import { Volume2, VolumeX, Play, Pause, ChevronRight, ChevronLeft, Instagram, Facebook, ArrowRight } from 'lucide-react';
// Slides data
const SLIDES = [
{
id: 1,
title: 'PANDUAN NGIKLAN DARI NOL',
description: 'Sampai iklan aktif & bikin cuan!',
image: 'input_file_0.png',
type: 'cover',
color: 'bg-blue-900'
},
{
id: 2,
title: 'STRATEGI TARGET TEPAT',
description: 'Jangkau orang yang benar-benar butuh produk Anda.',
image: 'https://images.unsplash.com/photo-1551288049-bebda4e38f71?auto=format&fit=crop&q=80&w=1000',
type: 'content',
color: 'bg-indigo-900'
},
{
id: 3,
title: 'HASIL OPTIMAL',
description: 'Optimalkan budget harian dengan hasil maksimal.',
image: 'https://images.unsplash.com/photo-1460925895917-afdab827c52f?auto=format&fit=crop&q=80&w=1000',
type: 'content',
color: 'bg-slate-900'
},
{
id: 4,
title: 'CUAN MAKSIMAL',
description: 'Cocok untuk Pemula, UMKM, & Pebisnis Online.',
image: 'https://images.unsplash.com/photo-1553729459-efe14ef6055d?auto=format&fit=crop&q=80&w=1000',
type: 'cta',
color: 'bg-emerald-900'
}
];
export default function App() {
const [currentSlide, setCurrentSlide] = useState(0);
const [isPlaying, setIsPlaying] = useState(true);
const [isMuted, setIsMuted] = useState(false);
const audioRef = useRef(null);
const timerRef = useRef(null);
const nextSlide = () => {
setCurrentSlide((prev) => (prev + 1) % SLIDES.length);
};
const prevSlide = () => {
setCurrentSlide((prev) => (prev - 1 + SLIDES.length) % SLIDES.length);
};
useEffect(() => {
if (isPlaying) {
timerRef.current = setInterval(nextSlide, 5000);
} else if (timerRef.current) {
clearInterval(timerRef.current);
}
return () => {
if (timerRef.current) clearInterval(timerRef.current);
};
}, [isPlaying, currentSlide]);
const togglePlay = () => setIsPlaying(!isPlaying);
const toggleMute = () => {
if (audioRef.current) {
audioRef.current.muted = !isMuted;
setIsMuted(!isMuted);
}
};
// SoundHelix-Song-8 is a lively upbeat track
const MUSIC_URL = 'https://www.soundhelix.com/examples/mp3/SoundHelix-Song-8.mp3';
return (
{/* Background Audio */}
{/* Main Video Container 9:16 */}
);
}
{/* Progress Bar */}
{/* Background Image with Overlay */}
![{SLIDES[currentSlide].title}]({SLIDES[currentSlide].image})
{/* Content Layer */}
{SLIDES[currentSlide].type === 'cover' && (
Mulai Belajar Sekarang
) : (
{/* Controls */}
{/* Interactive Hover Areas for manual navigation */}
{/* Decorative background elements */}
{SLIDES.map((_, idx) => (
idx ? '100%' : '0%'
}}
transition={{
duration: currentSlide === idx && isPlaying ? 5 : 0.3,
ease: "linear"
}}
className="h-full bg-white"
/>
))}
{/* Slides Content */}
Meta Partner
Terlaris
)}
{SLIDES[currentSlide].title}
{SLIDES[currentSlide].description}
{SLIDES[currentSlide].type === 'cta' ? (
Posting Komentar untuk "tes"