export default function RuangUmatCarousel() { const slides = [ { title: "RUANG UMAT", subtitle: "adalah sebuah", highlight: "KEBUN", text: "Di dalamnya bukan hanya ada ladang yang siap panen, tetapi juga sungai, kolam ikan, pepohonan yang membuat teduh, gubuk tempat beristirahat, dan bunga yang memberi ketenangan.", speech: "Ruang umat adalah sebuah kebun. Di dalamnya bukan hanya ada ladang yang siap panen, tetapi juga sungai, kolam ikan, pepohonan yang membuat teduh, gubuk tempat beristirahat, dan bunga yang memberi ketenangan.", bg: "https://images.unsplash.com/photo-1506744038136-46273834b3fb?q=80&w=1600&auto=format&fit=crop", }, { title: "MERAWAT", subtitle: "berarti menjaga", highlight: "SELURUH UNSURNYA", text: "Kolam dipelihara agar tetap memberi manfaat. Sawah dialiri supaya kehidupan berlanjut. Pohon dirawat untuk keteduhan. Bahkan bunga dijaga karena hidup bukan hanya soal bertahan, tetapi juga tentang rasa.", speech: "Merawat berarti menjaga seluruh unsurnya. Kolam dipelihara agar tetap memberi manfaat. Sawah dialiri supaya kehidupan berlanjut. Pohon dirawat untuk keteduhan. Bahkan bunga dijaga karena hidup bukan hanya soal bertahan, tetapi juga tentang rasa.", bg: "https://images.unsplash.com/photo-1465146344425-f00d5f5c8f07?q=80&w=1600&auto=format&fit=crop", }, { title: "PENDIDIKAN", subtitle: "SOSIAL · EKONOMI", highlight: "SUDAH DIRAWAT?", text: "Dalam konteks umat hari ini, pertanyaannya sederhana. Sudahkah unsur-unsur kehidupan itu benar-benar dirawat? Ataukah perhatian hanya hadir saat hasil ingin dinikmati?", speech: "Dalam konteks umat hari ini, pertanyaannya sederhana. Sudahkah unsur-unsur kehidupan itu benar-benar dirawat? Ataukah perhatian hanya hadir saat hasil ingin dinikmati?", bg: "https://images.unsplash.com/photo-1494526585095-c41746248156?q=80&w=1600&auto=format&fit=crop", }, { title: "PEMELIHARAAN", subtitle: "harus didahulukan daripada", highlight: "PERAYAAN", text: "Keberlanjutan lebih penting daripada kemeriahan sesaat. Kegiatan dan kegembiraan bukanlah hal keliru, namun tata kelola harus lebih dulu menjaga kehidupan yang ada.", speech: "Pemeliharaan harus didahulukan daripada perayaan. Keberlanjutan lebih penting daripada kemeriahan sesaat.", bg: "https://images.unsplash.com/photo-1500530855697-b586d89ba3ee?q=80&w=1600&auto=format&fit=crop", }, { title: "PENGELOLA", subtitle: "menumbuhkan", highlight: "TANGGUNG JAWAB", text: "Sikap sebagai pengelola membuat seseorang menjaga dan mengoptimalkan yang ada. Sebaliknya, sikap sebagai pemilik cenderung merasa memiliki hak, bukan amanah.", speech: "Sikap sebagai pengelola menumbuhkan tanggung jawab. Sebaliknya, sikap sebagai pemilik cenderung merasa memiliki hak, bukan amanah.", bg: "https://images.unsplash.com/photo-1472396961693-142e6e269027?q=80&w=1600&auto=format&fit=crop", }, { title: "RUANG UMAT", subtitle: "adalah", highlight: "SISTEM KEHIDUPAN", text: "Bukan sekadar tempat berkumpul. Jika tidak dirawat dengan sadar dan berkelanjutan, ia perlahan kehilangan daya hidupnya.", speech: "Ruang umat adalah sistem kehidupan. Bukan sekadar tempat berkumpul. Jika tidak dirawat dengan sadar dan berkelanjutan, ia perlahan kehilangan daya hidupnya.", bg: "https://images.unsplash.com/photo-1502082553048-f009c37129b9?q=80&w=1600&auto=format&fit=crop", }, { title: "MEREKA", subtitle: "memang tidak", highlight: "TAHU?", text: "Atau memang tidak diberi tahu? Banyak yang punya kepedulian dan kemampuan untuk ikut merawat, tetapi mereka tidak pernah benar-benar diajak memahami kondisi kebun bersama.", speech: "Mereka memang tidak tahu? Atau memang tidak diberi tahu? Banyak yang punya kepedulian dan kemampuan untuk ikut merawat, tetapi mereka tidak pernah benar-benar diajak memahami kondisi kebun bersama.", bg: "https://images.unsplash.com/photo-1506748686214-e9df14d4d9d0?q=80&w=1600&auto=format&fit=crop", }, { title: "AMANAH", subtitle: "atau", highlight: "KUASA", text: "Apakah ini amanah yang dirawat bersama, atau sekadar wilayah yang dijaga oleh yang merasa punya kuasa?", speech: "Apakah ini amanah yang dirawat bersama, atau sekadar wilayah yang dijaga oleh yang merasa punya kuasa?", bg: "https://images.unsplash.com/photo-1511497584788-876760111969?q=80&w=1600&auto=format&fit=crop", }, ];
const [started, setStarted] = React.useState(false); const [index, setIndex] = React.useState(0);
const current = slides[index];
React.useEffect(() => { if (!started) return;
const synth = window.speechSynthesis;
synth.cancel();
const utterance = new SpeechSynthesisUtterance(current.speech);
utterance.lang = "id-ID";
utterance.rate = 0.92;
utterance.pitch = 0.9;
const voices = synth.getVoices();
const maleVoice = voices.find(
(v) =>
v.lang.includes("id") &&
(v.name.toLowerCase().includes("male") ||
v.name.toLowerCase().includes("andika") ||
v.name.toLowerCase().includes("google"))
);
if (maleVoice) utterance.voice = maleVoice;
utterance.onend = () => {
if (index < slides.length - 1) {
setTimeout(() => {
setIndex((prev) => prev + 1);
}, 2000);
}
};
synth.speak(utterance);
return () => synth.cancel();
}, [index, started]);
return (
{!started ? (
) : (
)}
); }
Refleksi Ruang Umat
Apakah kamu mau melihat realita yang ada?
Slide {index + 1}
{current.title}
{current.subtitle}
{current.highlight}
{current.text}
🌱 Kehidupan
🌾 Amanah
⚠️ Refleksi
{slides.map((_, i) => (
))}