Merge pull request #44 from G-Techs/maintenance

Maintenance page init
G-Techs · Jun 27, 2022 · a24ae98 · a24ae98
2 parents a227581 + fa602bf
commit a24ae98
Show file tree

Hide file tree

Showing 5 changed files with 126 additions and 1 deletion.
diff --git a/components/Maintenance/Maintenance.jsx b/components/Maintenance/Maintenance.jsx
@@ -0,0 +1,56 @@
+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
diff --git a/components/Maintenance/index.jsx b/components/Maintenance/index.jsx
@@ -0,0 +1,52 @@
+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} 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
diff --git a/components/modules/__modules/Vectors/index.js b/components/modules/__modules/Vectors/index.js
@@ -12,18 +12,20 @@ import {
   AiOutlineHome as HomeIcon,
   AiOutlineMenu as MenuOutlineIcon,
   AiOutlinePlayCircle as PlayCircleIcon,
+  AiOutlineExclamationCircle as ExclamationCircle
 } from "react-icons/ai";
 import {
   RiNotificationLine as NotificationIcon,
   RiMenu3Fill as MenuIcon,
+  RiLayoutTopLine as LayoutTopLine
 } from "react-icons/ri";
 import { IoCloseOutline as CloseIcon } from "react-icons/io5";
 import {
   FiChevronRight as ChevronRightIcon,
   FiChevronDown as ChevronDowntIcon,
   FiFilePlus as FilePlusIcon,
 } from "react-icons/fi";
-import { GoHome as HomeSubMenuIcon } from "react-icons/go";
+import { GoHome as HomeSubMenuIcon ,GoClock as Clock} from "react-icons/go";
 import {
   BsHeadphones as HeadPhonesIcon,
   BsSun as SunIcon,
@@ -100,4 +102,7 @@ export {
   ShuffleIcon,
   VPen,
   VTrash,
+  ExclamationCircle,
+  LayoutTopLine,
+  Clock
 };
diff --git a/components/modules/static/images/MaintenanceGuy.png b/components/modules/static/images/MaintenanceGuy.png
diff --git a/pages/maintenance.js b/pages/maintenance.js
@@ -0,0 +1,12 @@
+import React from "react";
+import Maintenance from "../components/Maintenance/Maintenance";
+
+const maintenance = () => {
+  return (
+    <div className=" h-screen">
+      <Maintenance />
+    </div>
+  );
+};
+
+export default maintenance;