add panduan
This commit is contained in:
parent
7c37026804
commit
156fefc769
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="731.66998" height="619.11871" viewBox="0 0 731.66998 619.11871" xmlns:xlink="http://www.w3.org/1999/xlink" role="img" artist="Katerina Limpitsouni" source="https://undraw.co/"><path d="m0,599.59869c0,.65997.53,1.19,1.19,1.19h729.28998c.65997,0,1.19-.53003,1.19-1.19s-.53003-1.19-1.19-1.19H1.19c-.66,0-1.19.53003-1.19,1.19Z" fill="#3f3d56"/><polygon points="405.32999 539.69873 405.32999 579.02874 435.07001 579.9887 433.82999 539.69873 405.32999 539.69873" fill="#ffb6b6"/><path d="m399.45001,561.57873c-.39999,0-.79999.04999-1.17999.15997-5.37,1.53003-36.42999,29.27002-45.82001,37.72998-1.16,1.04999-1.78,2.53998-1.69,4.09998.07999,1.54999.85999,2.96002,2.12,3.87,7.12,5.13,21.72,13.25,39.41998,9.96997,8.14001-1.51001,16.35999-2.46002,23.62-3.28998,15.53-1.78998,27.79001-3.21002,27.79001-8.70001,0-9.33002-2.56-33.90002-5.78-34.92999-.29001-.09003-.63.14001-1.01999.67999-4.92001,6.89001-21.84,3.22998-22.56,3.07001l-.19-.03998-.10999-.15997c-.09-.13-8.37-12.44-14.60001-12.44h0v-.02002h0v.00006Z" fill="#2f2e41"/><polygon points="349.70001 539.69873 349.70001 579.02874 379.42999 579.9887 378.19 539.69873 349.70001 539.69873" fill="#ffb6b6"/><polygon points="337.70999 258.16873 321.88 270.15872 319 405.40872 345.85999 553.12872 380.87 554.56872 381.82999 413.55871 426.92001 285.02871 417.79999 254.80873 337.70999 258.16873" fill="#2f2e41"/><polygon points="411.57001 281.18872 426.92001 285.02871 437.95001 553.12872 398.14001 549.76873 371.76001 360.31872 411.57001 281.18872" fill="#2f2e41"/><path d="m328.47,619.11871c-13.64999,0-24.73001-6.03003-30.64999-10.09998-1.79001-1.22998-2.89999-3.17999-3.04001-5.34998-.14001-2.19.70999-4.28998,2.34-5.76001,14.70001-13.21997,40.12-35.62,45.25-37.09003,6.64999-1.90997,15.57999,10.81,16.73001,12.5,1.85999.38,17.09,3.28998,21.38-2.72998.82001-1.15002,1.59-1.20001,2.09-1.03998,4.59,1.46997,6.45001,31.03003,6.45001,35.84998,0,6.34998-12.01001,7.73999-28.64001,9.65997-7.23999.84003-15.44,1.78003-23.54999,3.28003-2.88.53003-5.67001.77002-8.37.77002h0l.00998.00995Z" fill="#2f2e41"/><path id="uuid-bcebe549-af57-499c-bd7d-dc350147856d-60" d="m216.28999,83.17871c-5.08-11.22-3.17-22.98,4.27-26.25s17.59,3.18,22.67,14.41c2.09,4.46,3.05,9.36,2.78,14.29l20.90001,47.84-23.58,9.46001-18.10001-48.16c-3.89999-3.1-6.97-7.07-8.94-11.58h0s0-.01001,0-.01Z" fill="#ffb6b6"/><path d="m360.76001,103.48873h0c12.73999,12.02,11.95001,32.52-1.69,43.51l-66.79999,53.82001c-7.29001,5.87-18.10999,3.8-22.70999-4.36-17.55-28.42-20.86-29.98-31.07001-59.09999l28.76999-10.06,16.22,20.31,35.42001-41.78c10.70001-12.63,29.81-13.69,41.85001-2.34h0l.00998-.00002Z" fill="#6c63ff"/><polygon points="370.60001 82.98873 381.51999 104.99873 340.23001 124.93872 340.73001 89.64872 370.60001 82.98873" fill="#ffb6b6"/><circle cx="340.37" cy="62.47873" r="37.16" fill="#ffb6b6"/><path d="m340.12,116.35871l38.10001-22.51h0c27.94,19.6,51.20999,24.18,51.95001,58.3l-5.14999,81.39.29999,35.05c.13,14.72-11.76999,26.70999-26.48001,26.70999h-54.39999c-14.39999,0-25.12-13.28-22.09-27.35999l10.26999-47.69-10.97-92.94,18.47-10.97h0v.02h0v.00002-.00002Z" fill="#6c63ff"/><path d="m127.69,69.65873c0-1.95,1.58-3.52,3.52-3.52h39.71001c1.95,0,3.52,1.58,3.52,3.52v.48l97.93001,5.73c.28-1.11,1.28-1.94,2.48999-1.94h10.41v-7.61c0-1.7,1.38-3.07,3.07001-3.07h2.12v-6.72c0-1.07.87-1.94,1.94-1.94h5.92999c1.07001,0,1.94.87,1.94,1.94v6.72h1.95001c-.14001-.27-.22-.56-.22-.87,0-1.43,1.67999-2.6,3.75-2.6s3.75,1.16,3.75,2.6c0,.37-.12.73-.32001,1.05,1.19.42,2.06,1.55,2.06,2.89v39.46c0,1.7-1.38,3.07-3.07001,3.07h-19.82999c-1.70001,0-3.07001-1.38-3.07001-3.07v-5.3h-10.41c-1.34,0-2.42999-1.03-2.54999-2.34l-98.03,18.05c-.45,1.43-1.78,2.47-3.36,2.47h-39.71001c-1.95,0-3.52-1.58-3.52-3.52-.47-16.1.57-31.39,0-45.48,0,0-.00002,0-.00002,0Z" fill="#3f3d56"/><path id="uuid-56498841-4b1e-4105-a308-6339b9438744-61" d="m281.03,94.43872c-4.95001-11.28-2.89999-23.01,4.57999-26.2,7.48001-3.18,17.54999,3.38,22.5,14.67,2.04001,4.48,2.94,9.39,2.60999,14.32l20.34,48.07999-23.69,9.19-17.54001-48.37c-3.87-3.14-6.89001-7.15-8.79999-11.69h.00003Z" fill="#ffb6b6"/><path d="m425.25,116.43872h0c12.60001,12.17001,11.56,32.66-2.20001,43.49001l-67.41998,53.03c-7.35999,5.78999-18.14999,3.59-22.66-4.62-17.22-28.62-18.61002-24.73-28.48001-53.97l26.54999-16.74001,16.42001,22.03,35.89999-41.36c10.85001-12.5,29.97-13.34,41.88-1.85h.01001s0-.01001,0-.01Z" fill="#6c63ff"/><path d="m378.57999,81.16873l-6.87,4.92s-2.01999-21.45-4.81-22.4-6.54999,3.99-6.54999,3.99l-2.75,8.05-9.09-3.79s-10.51999-5.67-14.23999-6.94-3.16-12.05-3.16-12.05c0,0-44.63998,6.11-37.94-19.62,0,0,2.31-18.93,7.25-15.17s5.01001-5.56,5.01001-5.56l11.20001-2.41s15.37-20.7,45.69-3.09c30.32001,17.61,16.25,74.05,16.25,74.05h0v.02s.00995,0,.00995,0Z" fill="#2f2e41"/></svg>
|
||||
|
After Width: | Height: | Size: 4.7 KiB |
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="747.02774" height="748.82373" viewBox="0 0 747.02774 748.82373" xmlns:xlink="http://www.w3.org/1999/xlink" role="img" artist="Katerina Limpitsouni" source="https://undraw.co/"><path d="M461.01656,750.096,232.62032,318.59351l.96337-.44043L763.69624,75.58813l.43335.85987L973.51387,491.63892l-.89307.45068ZM235.3791,319.53052,461.8669,747.427,970.82735,490.75415,762.7773,78.20825Z" transform="translate(-226.48613 -75.58813)" fill="#f0f0f0"/><path d="M726.20567,394.902a22,22,0,1,1,22-22h0A22.02486,22.02486,0,0,1,726.20567,394.902Zm0-42a20,20,0,1,0,20,20A20,20,0,0,0,726.20567,352.902Z" transform="translate(-226.48613 -75.58813)" fill="#3f3d56"/><path d="M349.20567,331.902a22,22,0,1,1,22-22h0A22.02484,22.02484,0,0,1,349.20567,331.902Zm0-42a20,20,0,1,0,20,20A20,20,0,0,0,349.20567,289.902Z" transform="translate(-226.48613 -75.58813)" fill="#3f3d56"/><path d="M231.567,420.46051a5.66252,5.66252,0,0,1,.12124-1.1679l.934-55.33473,1.37579-.12146.05927.00225,114.016,4.59119a8.87632,8.87632,0,0,1,8.47653,9.26275l-1.97657,44.32194a8.87551,8.87551,0,0,1-9.26231,8.47181l-108.29641-4.36062a5.67783,5.67783,0,0,1-5.44747-5.66523Z" transform="translate(-226.48613 -75.58813)" fill="#6c63ff"/><path d="M226.48613,416.42955c0-.14145.00359-.28266.00988-.42477l1.937-43.44838a9.32465,9.32465,0,0,1,9.71941-8.8894l104.1044,4.64126A8.88583,8.88583,0,0,1,350.728,377.571l-1.97567,44.32171a8.88688,8.88688,0,0,1-9.26321,8.472l-104.1044-4.64125a9.31488,9.31488,0,0,1-8.8986-9.294Z" transform="translate(-226.48613 -75.58813)" fill="#2f2e41"/><circle cx="97.05055" cy="321.38761" r="6.34514" fill="#6c63ff"/><path d="M704.07613,727.607l-10.622-147.37261,2.02028-49.18769-41.40132,9.21207,15.25,193.1057a21.57865,21.57865,0,1,0,34.753-5.75747Z" transform="translate(-226.48613 -75.58813)" fill="#9e616a"/><path d="M335.18042,441.74994,295.582,416.012a21.57745,21.57745,0,1,0-17.68895,27.66071c.28784-.03962.56328-.1097.84636-.16038L321.188,474.38692Z" transform="translate(-226.48613 -75.58813)" fill="#9e616a"/><path d="M388.68819,530.41187l-94.12555-69.547,34.12555-26.453,41.4513,31.38632L523.015,403.7864a16.97494,16.97494,0,0,1,12.92388,3.074,16.71469,16.71469,0,0,1,6.69668,11.23629l.07413.5257-28.02149,43.78945Z" transform="translate(-226.48613 -75.58813)" fill="#6c63ff"/><path d="M664.97618,682.13442,638.45741,497.79948l.04379-.17029L665.73584,390.567l2.5518-.29678A29.732,29.732,0,0,1,700.664,413.80809l2.01844,273.98227Z" transform="translate(-226.48613 -75.58813)" fill="#6c63ff"/><path d="M673.34358,361.65952H535.50891v-62.2747a68.91733,68.91733,0,1,1,137.83467,0Z" transform="translate(-226.48613 -75.58813)" fill="#2f2e41"/><circle cx="602.83804" cy="307.19899" r="56.33087" transform="translate(-267.14144 440.65923) rotate(-45)" fill="#9e616a"/><circle cx="403.54719" cy="146.32169" r="37.49795" fill="#2f2e41"/><path d="M665.75461,310.1791H519.15154v-.83033c0-38.00135,32.88272-68.91734,73.30154-68.91734s73.30153,30.916,73.30153,68.91734Z" transform="translate(-226.48613 -75.58813)" fill="#2f2e41"/><path d="M689.29805,397.35187l-.02-.18a12.24093,12.24093,0,0,0-13.46-11.26l-147.08008,15.04a12.262,12.262,0,0,0-10.37988,8.32l-10.83008,32.46c-2.52978,2.8-36.10986,41.32-16.11963,93.98l7.48975,43.04-13.67969,25.58c-28.08008,30.11-44.43018,100.56-48.58008,205.2a351.49381,351.49381,0,0,0,101.54981,14.88c.28027,0,.56006,0,.83984-.01l9.27-66.74,19.98,65.47a349.11924,349.11924,0,0,0,95.52-21.81l-23.46973-162.15-4.70019-61.1,53.62012-180.56Z" transform="translate(-226.48613 -75.58813)" fill="#2f2e41"/></svg>
|
||||
|
After Width: | Height: | Size: 3.5 KiB |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 14 KiB |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 5.0 KiB |
|
|
@ -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 (
|
||||
<div className="relative w-full max-w-lg mx-auto p-6 pb-20 bg-white rounded-xl shadow-lg">
|
||||
<AnimatePresence mode="wait">
|
||||
{slides.map(
|
||||
(slide, index) =>
|
||||
index === current && (
|
||||
<motion.div
|
||||
key={index}
|
||||
className="flex flex-col items-center text-center"
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
exit={{ opacity: 0, y: -20 }}
|
||||
transition={{ duration: 0.5 }}
|
||||
>
|
||||
<img
|
||||
src={slide.image}
|
||||
alt={slide.title}
|
||||
className="h-60"
|
||||
/>
|
||||
{/* <h2 className="mt-4 text-xl font-bold">{slide.title}</h2> */}
|
||||
<p className="mt-8 text-gray-500 text-sm">
|
||||
{slide.description}
|
||||
</p>
|
||||
{/* <button
|
||||
onClick={nextSlide}
|
||||
className="mt-4 bg-blue-500 text-white py-2 px-4 rounded-full shadow-md"
|
||||
>
|
||||
{slide.button}
|
||||
</button> */}
|
||||
</motion.div>
|
||||
)
|
||||
)}
|
||||
</AnimatePresence>
|
||||
<div className="absolute bottom-4 left-1/2 -translate-x-1/2 flex gap-2">
|
||||
{slides.map((_, index) => (
|
||||
<button
|
||||
key={index}
|
||||
onClick={() => setCurrent(index)}
|
||||
className={`h-2 w-2 rounded-full ${
|
||||
index === current ? "bg-blue-500" : "bg-gray-300"
|
||||
}`}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
<button
|
||||
onClick={prevSlide}
|
||||
className="absolute left-0 top-1/2 -translate-y-1/2 bg-base-100 text-gray-600 p-1 rounded-full"
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
className="h-4 w-4"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth={2}
|
||||
d="M15 19l-7-7 7-7"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
<button
|
||||
onClick={nextSlide}
|
||||
className="absolute right-0 top-1/2 -translate-y-1/2 bg-base-100 text-gray-600 p-1 rounded-full"
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
className="h-4 w-4"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth={2}
|
||||
d="M9 5l7 7-7 7"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -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 (
|
||||
<LayoutPage>
|
||||
<AnimatePresence>
|
||||
{showDialog && (
|
||||
<motion.div
|
||||
className="fixed inset-0 bg-black bg-opacity-50 flex items-center z-[999] justify-center"
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
exit={{ opacity: 0 }}
|
||||
onClick={(e) => {
|
||||
if (e.target === e.currentTarget) {
|
||||
setShowDialog(false);
|
||||
}
|
||||
}}
|
||||
>
|
||||
<motion.div
|
||||
className="bg-white max-h-[90%] px-8 py-6 rounded-md flex flex-col max-w-[90%] md:min-w-[400px] md:max-w-[400px] w-full"
|
||||
initial={{ scale: 0.5 }}
|
||||
animate={{ scale: 1 }}
|
||||
exit={{ scale: 0.8 }}
|
||||
>
|
||||
<div className="flex gap-2 justify-between items-center pb-8">
|
||||
<h1 className="font-semibold">Cara Bermain</h1>
|
||||
<button
|
||||
onClick={() => setShowDialog(false)}
|
||||
className="hover:bg-base-100 p-3 rounded-md"
|
||||
>
|
||||
<IoCloseOutline />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col md:flex-row gap-6 overflow-y-auto flex-1">
|
||||
<Carousel />
|
||||
</div>
|
||||
</motion.div>
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
<div className="flex flex-col flex-1 py-4 relative">
|
||||
<ul className="flex gap-3 mt-4">
|
||||
<li className="hover:text-primary cursor-default">Home</li>
|
||||
|
|
@ -107,12 +148,18 @@ const MenyusunHuruf = () => {
|
|||
onClick={() => {
|
||||
ProsesKuis();
|
||||
}}
|
||||
className="bg-blue-500 hover:bg-blue-700 text-white px-3 py-2 rounded-full whitespace-nowrap"
|
||||
className="bg-blue-500 hover:bg-blue-700 btn text-white px-3 py-2 rounded-full whitespace-nowrap"
|
||||
>
|
||||
Mulai Kuis
|
||||
</button>
|
||||
</div>
|
||||
<span className="text-primary">Lihat Ranking</span>
|
||||
<div className="flex items-center gap-2">
|
||||
<span onClick={() => {
|
||||
setShowDialog(true);
|
||||
}} className="text-primary btn btn-link px-0">Cara Bermain</span>
|
||||
<span className="text-gray-400">|</span>
|
||||
<span className="text-primary btn btn-link px-0">Lihat Ranking</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<img
|
||||
|
|
|
|||
Loading…
Reference in New Issue