feat: migrate latest

components/LatestPage/index.tsx

@@ -0,0 +1,19 @@
+import React from "react";
+import HotSongs from "../modules/HotSongs";
+import TopSongs from "../modules/TopSongs/TopSongs";
+import PageCard from "../modules/__modules__/Card/PageCard";
+
+const LatestPage = () => {
+  return (
+    <div className="bg-globalBg">
+      <PageCard setIsTopNav={() => null}>
+        <div className="mt-20">
+          <TopSongs />
+          <HotSongs />
+        </div>
+      </PageCard>
+    </div>
+  );
+};
+
+export default LatestPage;

components/Maintenance/Maintenance.tsx

@@ -0,0 +1,69 @@
+import React from "react";
+import { useRouter } from "next/router";
+import {
+  ExclamationCircle,
+  LayoutTopLine,
+  Clock,
+} from "../modules/__modules/Vectors/index";
+
+const Maintenance = () => {
+  const router = useRouter();
+
+  return (
+    <div className="flex flex-wrap min-h-screen items-center justify-center ">
+      <div className=" max-w-6xl p-4">
+        <div className=" flex flex-col items-center justify-center text-center ">
+          <img
+            src="https://templates.iqonic.design/muzik/html/images/error/02.png"
+            alt="logo"
+            className="sm:h-56 h-28  mb-6"
+          />
+          <h1 className="font-extrabold text-4xl p-4">
+            We are Currently Performing Maintenance
+          </h1>
+          <p className="font-lighter mb-4 p-2">Please chack back sometime</p>
+        </div>
+        <div className="grid lg:grid-cols-3 gap-6 justify-center place-items-center text-center md:px-20">
+          <div className=" rounded-lg p-4 m-1 md:w-full shadow-xl lg:shadow-2xl">
+            <div className="px-4 py-2 flex flex-col justify-center items-center">
+              <span className="text-primary ">
+                <LayoutTopLine size={54} />
+              </span>
+              <h2 className="font-bold text-lg p-2">Why is the Down</h2>
+              <p className="text-gray-600 font-light">
+                It is a long established fact that a reader will be distracted
+                by the readable content of a page when looking at its layout.
+              </p>
+            </div>
+          </div>
+          <div className=" rounded-lg p-4 m-1 md:w-full shadow-xl lg:shadow-2xl">
+            <div className="px-4 py-2 flex flex-col justify-center items-center">
+              <span className="text-primary ">
+                <Clock size={54} />
+              </span>
+              <h2 className="font-bold text-lg p-2">What is the Downtime?</h2>
+              <p className="text-gray-600 font-light">
+                It is a long established fact that a reader will be distracted
+                by the readable content of a page when looking at its layout.
+              </p>
+            </div>
+          </div>
+          <div className=" rounded-lg p-4 m-1 md:w-full shadow-xl lg:shadow-2xl">
+            <div className="px-4 py-2 flex flex-col justify-center  items-center ">
+              <span className="text-primary">
+                <ExclamationCircle size={54} />
+              </span>
+              <h2 className="font-bold text-lg p-2">Do you need Support?</h2>
+              <p className="text-gray-600 font-light">
+                It is a long established fact that a reader will be distracted
+                by the readable content of a page when looking at its layout.
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Maintenance;

components/Maintenance/index.tsx

@@ -0,0 +1,67 @@
+import React from "react";
+import {
+  ExclamationCircle,
+  LayoutTopLine,
+  Clock,
+} from "../modules/__modules/Vectors/index";
+import MaintenanceImg from "../modules/static/images/MaintenanceGuy.png";
+
+const Index = () => {
+  return (
+    <div className="flex flex-wrap min-h-screen items-center justify-center">
+      <div className=" max-w-6xl p-4">
+        <div className="flex flex-col items-center justify-center text-center">
+          <img
+            src={MaintenanceImg.src}
+            alt="logo"
+            className="sm:h-56 h-28  mb-6"
+          />
+          <h1 className="font-extrabold text-4xl p-4">
+            We are Currently Performing Maintenance
+          </h1>
+          <p className="font-lighter mb-4 p-2">Please chack back sometime</p>
+        </div>
+        <div className="grid lg:grid-cols-3 gap-6 justify-center place-items-center text-center md:px-20">
+          <div className="card">
+            <div className="px-4 py-2 flex flex-col justify-center items-center">
+              <span className="text-primary">
+                <LayoutTopLine size={54} />
+              </span>
+              <h2 className="font-bold text-lg p-2">Why is the Down</h2>
+              <p className="text-gray-600 font-light">
+                It is a long established fact that a reader will be distracted
+                by the readable content of a page when looking at its layout.
+              </p>
+            </div>
+          </div>
+          <div className="card">
+            <div className="px-4 py-2 flex flex-col justify-center items-center">
+              <span className="text-primary">
+                <Clock size={54} />
+              </span>
+              <h2 className="font-bold text-lg p-2">What is the Downtime?</h2>
+              <p className="text-gray-600 font-light">
+                It is a long established fact that a reader will be distracted
+                by the readable content of a page when looking at its layout.
+              </p>
+            </div>
+          </div>
+          <div className="card">
+            <div className="px-4 py-2 flex flex-col justify-center  items-center">
+              <span className="text-primary">
+                <ExclamationCircle size={54} />
+              </span>
+              <h2 className="font-bold text-lg p-2">Do you need Support?</h2>
+              <p className="text-gray-600 font-light">
+                It is a long established fact that a reader will be distracted
+                by the readable content of a page when looking at its layout.
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Index;

components/dummy_data/dailySalesData.ts

@@ -0,0 +1,30 @@
+export const dailySalesData = [
+  {
+    id: 1,
+    img: "https://templates.iqonic.design/muzik/html/images/dashboard/feature-album/01.png",
+    title: "sabali",
+    artist: "Damian Marley",
+    amount: 83,
+  },
+  {
+    id: 2,
+    img: "https://templates.iqonic.design/muzik/html/images/dashboard/popular-hindi-song/02.png",
+    title: "Holly Mountain",
+    artist: "Bob Marley",
+    amount: 83,
+  },
+  {
+    id: 3,
+    img: "https://templates.iqonic.design/muzik/html/images/dashboard/popular-hindi-song/06.png",
+    title: "In My pocket",
+    artist: "Duro lite",
+    amount: 83,
+  },
+  {
+    id: 4,
+    img: "https://templates.iqonic.design/muzik/html/images/dashboard/feature-album/01.png",
+    title: "Call away",
+    artist: "Charlie puth",
+    amount: 83,
+  },
+];