Video tutorial card created

src/app/[...slug]/page.tsx

@@ -1,64 +1,54 @@
-import dynamic from 'next/dynamic'
-import Link from 'next/link'
-import Image from 'next/image'
-import { getFileContent, getRoot } from '@/lib/authAndFetch'
-import { getDynamicRoute, getBanner, getName, genMetadata } from '@/lib/helpers'
-import SideMenu from '@/components/SideMenu'
-import { Icon } from '@/components/ui/Icon'
-import { BiRightArrowAlt as Arrow } from 'react-icons/bi'
-import { Metadata } from 'next'
+import dynamic from "next/dynamic";
+import Image from "next/image";
+import { getFileContent, getRoot } from "@/lib/authAndFetch";
+import { getDynamicRoute, getBanner, genMetadata } from "@/lib/helpers";
+import { Metadata } from "next";
 
 export const metadata: Metadata = genMetadata({
-    title: "Donate now",
-    url: "https://zechub.wiki/donation"
-})
+  title: "Donate now",
+  url: "https://zechub.wiki/donation",
+});
 
-
-const MdxComponent = dynamic(
-    () => import('@/components/MdxComponent'),
-    {
-        loading: () => <span className='text-center text-3xl'>Loading...</span>,
-    }
-)
+const MdxComponent = dynamic(() => import("@/components/MdxComponent"), {
+  loading: () => <span className="text-center text-3xl">Loading...</span>,
+});
 
 export default async function Page({ params }: { params: { slug: string } }) {
-
-    const { slug } = params
-    const url = getDynamicRoute(slug)
-    const markdown = await getFileContent(url)
-
-    const content = markdown ? markdown : 'No Data or Wrong file'
-    const urlRoot = `/site/${slug[0]}`
-    const roots = await getRoot(urlRoot)
-
-    const imgUrl = getBanner(slug[0])
-
-    return (
-
-        <main>
-            <div className='flex justify-center w-full  mb-5 bg-transparent rounded pb-4'>
-                <Image
-                    className="w-full mb-5 object-cover "
-                    alt="wiki-banner"
-                    width={800}
-                    height={50}
-                    src={imgUrl != undefined ? imgUrl : '/wiki-banner.avif'}
-                />
-            </div>
-
-            <div id="content" className={`flex flex-col space-y-5 ${roots && roots.length > 0 ? 'md:flex-row md:space-x-5' : 'md:flex-col'} h-auto w-full p-5`}>
-                {(roots && roots.length > 0) && (
-                    <div className='w-auto md:w-2/5  relative'>
-                        <SideMenu folder={slug[0]} roots={roots} />
-                    </div>
-                )}
-
-                <section className='h-auto w-full border-t-2 md:border-l-2 px-3'>
-                    <div>
-                        <MdxComponent source={content} />
-                    </div>
-                </section>
-            </div>
-        </main>
-    )
+  const { slug } = params;
+  const url = getDynamicRoute(slug);
+  const markdown = await getFileContent(url);
+
+  const content = markdown ? markdown : "No Data or Wrong file";
+  const urlRoot = `/site/${slug[0]}`;
+
+  const roots = await getRoot(urlRoot);
+
+  const imgUrl = getBanner(slug[0]);
+
+  return (
+    <main>
+      <div className="flex justify-center w-full  mb-5 bg-transparent rounded pb-4">
+        <Image
+          className="w-full mb-5 object-cover "
+          alt="wiki-banner"
+          width={800}
+          height={50}
+          src={imgUrl != undefined ? imgUrl : "/wiki-banner.avif"}
+        />
+      </div>
+
+      <div
+        id="content"
+        className={`flex flex-col space-y-5 ${
+          roots && roots.length > 0 ? "md:flex-row md:space-x-5" : "md:flex-col"
+        } h-auto w-full p-5`}
+      >
+        <section className="h-auto w-full border-t-2 md:border-l-2 px-3">
+          <div>
+            <MdxComponent source={content} />
+          </div>
+        </section>
+      </div>
+    </main>
+  );
 }

src/app/dashboard/ShieldedPoolDashboard.tsx

@@ -158,7 +158,6 @@ const ShieldedPoolDashboard = () => {
   if (!blockchainInfo) {
     return <div>Loading...</div>;
   }
-
   return (
     <div>
       <h2 className="font-bold mt-8 mb-4">Shielded Supply Chart (ZEC)</h2>

src/app/zechub-tutorials/page.tsx

@@ -0,0 +1,46 @@
+import React from "react";
+import { Metadata } from "next";
+import Image from "next/image";
+import { getRoot } from "@/lib/authAndFetch";
+import { getBanner, genMetadata } from "@/lib/helpers";
+import SideMenu from "@/components/SideMenu";
+
+export const metadata: Metadata = genMetadata({
+  title: "Zechub Tutorial",
+  url: "https://zechub.wiki/tutorials",
+});
+
+const ZechubTutorial = async () => {
+  const slug = "tutorials";
+  const urlRoot = `/site/tutorials`;
+  const roots = await getRoot(urlRoot);
+  const imgUrl = getBanner(slug);
+  return (
+    <main>
+      <div className="flex justify-center w-full  mb-5 bg-transparent rounded pb-4">
+        <Image
+          className="w-full mb-5 object-cover "
+          alt="wiki-banner"
+          width={800}
+          height={50}
+          src={imgUrl != undefined ? imgUrl : "/wiki-banner.avif"}
+        />
+      </div>
+
+      <div
+        id="content"
+        className={`flex flex-col space-y-5 ${
+          roots && roots.length > 0 ? "md:flex-row md:space-x-5" : "md:flex-col"
+        } h-auto w-full p-5`}
+      >
+        {roots && roots.length > 0 && (
+          <div className="relative">
+            <SideMenu folder={slug} roots={roots} />
+          </div>
+        )}
+      </div>
+    </main>
+  );
+};
+
+export default ZechubTutorial;

src/components/MdxComponent.tsx

@@ -24,7 +24,7 @@ const MdxComponent = async ({ source }: ContentSource) => {
       <div className="px-3">{content}</div>
     ) :
     (
-      <p className="text-center text-2xl">{source}</p>
+      <p className="text-center text-2xl">{}</p>
     )
   );
 };

src/components/SideMenu.tsx

@@ -4,19 +4,18 @@ import { useRouter } from "next/navigation";
 import Link from "next/link";
 import {
   BiRightArrowAlt as Arrow,
-  BiMenu as BurgerMenuIcon,
 } from "react-icons/bi";
 import { BiSolidWallet as Wallet } from "react-icons/bi";
-import { FiFile as FileIcon } from "react-icons/fi";
 import { Icon } from "./ui/Icon";
 import { getName, transformGithubFilePathToWikiLink } from "@/lib/helpers";
-import { matchIcons } from "@/constants/Icons";
+import Card from "./ui/Card";
 
 interface MenuProps {
   folder: string;
   roots: string[];
 }
 
+const images = ['/exchangetutorials.png' , '/fullnodetutorials.png' , '/usingzcashtutorials.png' , '/wallettutorials.png']
 const SideMenu = ({ folder, roots }: MenuProps) => {
   const [isMenuOpen, setIsMenuOpen] = useState(false);
   const toggleMenu = () => setIsMenuOpen(!isMenuOpen);
@@ -29,10 +28,10 @@ const SideMenu = ({ folder, roots }: MenuProps) => {
 
   return (
     <div className="relative flex flex-wrap items-center md:items-start order-1 justify-between md:flex-col">
-      <button onClick={toggleMenu} className="md:hidden flex ">
+      {/* <button onClick={toggleMenu} className="md:hidden flex ">
         <BurgerMenuIcon size={24} />{" "}
         <h3 className="ms-2 font-bold">Navigation</h3>
-      </button>
+      </button> */}
       <div className="flex justify-end md:justify-center w-auto order-2 md:order-3">
         <Link
           href="/explore"
@@ -49,15 +48,13 @@ const SideMenu = ({ folder, roots }: MenuProps) => {
         </Link>
       </div>
       <div
-        className={`flex flex-col shrink-0 top-0 py-4 items-center justify-start w-full px-3 order-3 md:order-2 ${
-          isMenuOpen ? "block mt-7" : "hidden md:block"
-        }`}
+        className={`flex flex-col shrink-0 top-0 py-4 items-center justify-start w-full px-3 order-3 md:order-2 mt-7`}
       >
         <h1 className="text-4xl font-bold mb-6"> {fold}: </h1>
 
-        <div>
-          <ul>
-            {root.map((item, i) => {
+        <div className="flex w-full gap-2 justify-between flex-wrap">
+
+            {/* {root.map((item, i) => {
               if (getName(item) === "Wallets") return null; // Skip rendering the item named "Wallets"
 
               const myIcon = matchIcons(fold, getName(item));
@@ -85,6 +82,18 @@ const SideMenu = ({ folder, roots }: MenuProps) => {
                   </Link>
                 </li>
               );
+            })} */}
+
+            {root.map((item, i) => {
+              return (
+                <Card
+                  title={getName(item)}
+                  imageUrl={images[i]}
+                  description=""
+                  buttonText="Watch Videos"
+                  buttonLink={`/${transformGithubFilePathToWikiLink(item)}#content`}
+                />
+              );
             })}
 
             {fold === "Using Zcash" && (
@@ -106,7 +115,7 @@ const SideMenu = ({ folder, roots }: MenuProps) => {
                 </a>
               </li>
             )}
-          </ul>
+
         </div>
       </div>
     </div>

src/components/ui/Card.tsx

@@ -0,0 +1,39 @@
+// Card.js
+import Link from "next/link";
+import React from "react";
+
+interface CardProps {
+  title: string;
+  imageUrl: string;
+  description: string;
+  buttonText: string;
+  buttonLink: string;
+}
+
+const Card: React.FC<CardProps> = ({
+  title,
+  imageUrl,
+  description,
+  buttonText,
+  buttonLink,
+}) => {
+  return (
+    <div className="lg:w-[22%] md:w-[30%] w-full rounded overflow-hidden shadow-lg md:m-4">
+      <img className="w-full" src={imageUrl} alt="Card image cap" />
+      <div className="px-6 py-4">
+        <div className="font-bold text-xl mb-2">{title}</div>
+        <p className="text-gray-700 text-base">{description}</p>
+      </div>
+      <div className="px-6 pb-4">
+        <Link
+          href={buttonLink}
+          className="bg-[#1984c7] text-white font-bold py-2 px-4 rounded"
+        >
+          {buttonText}
+        </Link>
+      </div>
+    </div>
+  );
+};
+
+export default Card;

src/constants/Icons.ts

@@ -26,7 +26,7 @@ import { MdOutlinePayments } from "react-icons/md";
 
 interface IconsFor {
     [key: string]: {
-      [key: string]: string;
+      [key: string]: any;
     };
   };
 

src/constants/exploreFolders.ts

@@ -9,7 +9,7 @@ export const exploreFolders = [
         img: '/Tutorials.png',
         description: '',
         name: 'Tutorials',
-        url: '/tutorials/buy-zec-in-gemini'
+        url: '/zechub-tutorials'
     },
     {
         img: '/Using_Zcash-07.png',