educational app

src/app/educational/page.tsx

@@ -0,0 +1,8 @@
+import { Educational } from "@/components/Educational/Educational";
+const educational = () => {
+    return (
+        <Educational />
+    )
+}
+
+export default educational;

src/components/Educational/Educational.tsx

@@ -0,0 +1,56 @@
+'use client'
+import Image from "next/image";
+import { useRouter } from "next/navigation";
+import { useState } from "react";
+import { FaArrowLeftLong as arrowLeft, FaArrowRight as arrowRight } from "react-icons/fa6";
+import { Icon } from "../ui/Icon";
+import { LuHome as home } from "react-icons/lu";
+import { educationalData } from "@/constants/educational";
+
+
+export const Educational = () => {
+    const router = useRouter();
+    const [actual, setActual] = useState(0);
+
+    const { id, title, data } = educationalData[actual];
+
+    const changePageBack = () => {
+        if (actual >= 0) setActual(actual - 1);
+    }
+
+    const changePageForw = () => {
+        if (actual < educationalData.length) setActual(actual + 1);
+    }
+
+    return (
+        <>
+            <div className="flex w-[100%] p-10 text-center text-2xl font-bold">
+                <h1 className="">{id}. {title}</h1>
+            </div>
+            <div className="flex w-[100%] ">
+                <div className="flex flex-row w-[100%] h-auto py-10">
+                    <div className="flex justify-center w-[50%]">
+                        <Image src={data[0].img} alt="img" width={300} height={300} />
+                    </div>
+
+                    <div className="flex justify-center items-center w-[50%]">
+                        <h1>
+                            {data[0].content}
+                        </h1>
+                    </div>
+                </div>
+            </div>
+
+            <div className="flex w-[100%] justify-center p-10">
+                <div className="flex flex-row w-[30%] space-x-10 justify-center justify-items-center py-5 ">
+                    {actual !== 0 && (<Icon icon={arrowLeft} className="md:w-10 w-6 h-6 md:h-10 hover:cursor-pointer hover:scale-125" onClick={changePageBack} />)}
+                    <Icon icon={home} className="md:w-10 w-6 h-6 md:h-10 hover:cursor-pointer hover:scale-125" onClick={() => router.push('/')} />
+                    {actual < educationalData.length - 1 && (<Icon icon={arrowRight} className="md:w-10 w-6 h-6 md:h-10 hover:cursor-pointer hover:scale-125" onClick={changePageForw} />)}
+                </div>
+            </div>
+        </>
+
+    )
+}
+
+

src/constants/educational.ts

@@ -0,0 +1,83 @@
+export const educationalData = [
+    {
+        id: 1,
+        title: 'Buying Zcash',
+        data: [{
+            img: '/DAOlogo.png',
+            content: `In order to use Zcash in private (shielded) transactions, you need to have ZEC. To get ZEC, you'll need to buy it. You can buy ZEC from a number of different exchanges, which we will list below. It is recommended that you use an exchange that supports shielded withdrawals.`
+        }],
+    },
+    {
+        id: 2,
+        title: 'Blockchain Explorers',
+        data: [{
+            img: '/DAOlogo.png',
+            content: `A blockchain explorer is a search engine that allows users to explore the blockchain of a cryptocurrency. It provides a user-friendly interface to view transaction details, block information, and address histories.`
+        }],
+    },
+    {
+        id: 3,
+        title: 'Non-Custodial Exchanges',
+        data: [{
+            img: '/DAOlogo.png',
+            content: `Sideshift AI`
+        }],
+    },
+    {
+        id: 4,
+        title: 'Full Nodes',
+        data: [{
+            img: '/DAOlogo.png',
+            content: `A Full Node is software that runs a full copy of any cryptocurrency's blockchain giving access to the protocols features.
+                    It holds a complete record of every transaction that has occurred since genesis and is therefore able to verify the validity of new transactions and blocks that are added to the blockchain.`
+        }],
+    },
+    {
+        id: 5,
+        title: 'Zcash Wallet Tutorials',
+        data: [{
+            img: '/DAOlogo.png',
+            content: `Sideshift AI`
+        }],
+    },
+    {
+        id: 6,
+        title: 'Zcash Wallet Tutorials',
+        data: [{
+            img: '/DAOlogo.png',
+            content: `Sideshift AI`
+        }],
+    },
+    {
+        id: 7,
+        title: 'Zcash Wallet Tutorials',
+        data: [{
+            img: '/DAOlogo.png',
+            content: `Sideshift AI`
+        }],
+    },
+    {
+        id: 8,
+        title: 'Zcash Wallet Tutorials',
+        data: [{
+            img: '/DAOlogo.png',
+            content: `Sideshift AI`
+        }],
+    },
+    {
+        id: 9,
+        title: 'Zcash Wallet Tutorials',
+        data: [{
+            img: '/DAOlogo.png',
+            content: `Sideshift AI`
+        }],
+    },
+    {
+        id: 10,
+        title: 'Zcash Wallet Tutorials',
+        data: [{
+            img: '/DAOlogo.png',
+            content: `Sideshift AI`
+        }],
+    },
+]