diff --git a/public/assets/images/susun_1.svg b/public/assets/images/susun_1.svg
new file mode 100644
index 0000000..2cc9c79
--- /dev/null
+++ b/public/assets/images/susun_1.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/public/assets/images/susun_2.svg b/public/assets/images/susun_2.svg
new file mode 100644
index 0000000..43f75bf
--- /dev/null
+++ b/public/assets/images/susun_2.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/public/assets/images/susun_3.svg b/public/assets/images/susun_3.svg
new file mode 100644
index 0000000..3cf5e1c
--- /dev/null
+++ b/public/assets/images/susun_3.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/public/assets/images/susun_4.svg b/public/assets/images/susun_4.svg
new file mode 100644
index 0000000..aa09b64
--- /dev/null
+++ b/public/assets/images/susun_4.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/src/components/organisms/Carousel.tsx b/src/components/organisms/Carousel.tsx
new file mode 100644
index 0000000..b044ee3
--- /dev/null
+++ b/src/components/organisms/Carousel.tsx
@@ -0,0 +1,130 @@
+import { useState } from "react";
+import { motion, AnimatePresence } from "framer-motion";
+
+const slides = [
+ {
+ title: "Nama",
+ description:
+ "Masukkan nama Anda untuk memulai. Nama Anda akan digunakan untuk personalisasi pengalaman Anda selama menggunakan aplikasi ini.",
+ image: "/assets/images/susun_1.svg",
+ button: "Next",
+ },
+ {
+ title: "Gerakan",
+ description:
+ "Gerakkan tangan Anda di depan kamera untuk melanjutkan. Sistem akan mendeteksi gerakan Anda untuk navigasi tanpa sentuhan.",
+ image: "/assets/images/susun_2.svg",
+ button: "Next",
+ },
+ {
+ title: "Susun abjad",
+ description:
+ "Susun huruf-huruf menjadi kata yang benar. Ini adalah latihan untuk meningkatkan keterampilan kognitif dan kecepatan berpikir Anda.",
+ image: "/assets/images/susun_3.svg",
+ button: "Next",
+ },
+ {
+ title: "Score",
+ description:
+ "Selesaikan tugas dengan cepat untuk mendapatkan skor tertinggi. Skor Anda akan dibandingkan dengan pengguna lain di papan peringkat.",
+ image: "/assets/images/susun_4.svg",
+ button: "Get Started",
+ },
+];
+
+export default function Carousel() {
+ const [current, setCurrent] = useState(0);
+
+ const nextSlide = () => {
+ setCurrent((prev) => (prev === slides.length - 1 ? 0 : prev + 1));
+ };
+
+ const prevSlide = () => {
+ setCurrent((prev) => (prev === 0 ? slides.length - 1 : prev - 1));
+ };
+
+ return (
+
+
+ {slides.map(
+ (slide, index) =>
+ index === current && (
+
+
+ {/*
{slide.title}
*/}
+
+ {slide.description}
+
+ {/* */}
+
+ )
+ )}
+
+
+ {slides.map((_, index) => (
+
+
+
+
+ );
+}
diff --git a/src/pages/Kuis/MenyusunHuruf/MenyusunHuruf.tsx b/src/pages/Kuis/MenyusunHuruf/MenyusunHuruf.tsx
index f523020..51ba825 100644
--- a/src/pages/Kuis/MenyusunHuruf/MenyusunHuruf.tsx
+++ b/src/pages/Kuis/MenyusunHuruf/MenyusunHuruf.tsx
@@ -1,7 +1,10 @@
+import Carousel from "@/components/organisms/Carousel";
import LayoutPage from "@/components/templates/LayoutPage";
import useMenyusunHurufStore from "@/stores/MenyusunHurufStore";
import useNavbarStore from "@/stores/NavbarStore";
-import { useEffect } from "react";
+import { AnimatePresence, motion } from "motion/react";
+import { useEffect, useState } from "react";
+import { IoCloseOutline } from "react-icons/io5";
import { Link, useNavigate } from "react-router-dom";
import Swal from "sweetalert2";
@@ -76,8 +79,46 @@ const MenyusunHuruf = () => {
router("/kuis/menyusun-huruf/app");
};
+ const [showDialog, setShowDialog] = useState(true);
+
return (
+
+ {showDialog && (
+ {
+ if (e.target === e.currentTarget) {
+ setShowDialog(false);
+ }
+ }}
+ >
+
+