Merge pull request #85 from Asadaaaaa/staging

Staging
Asadaaaaa · Nov 4, 2023 · 96f14f0 · 96f14f0
2 parents 566c2ad + f01d429
commit 96f14f0
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 15 deletions.
diff --git a/src/app/(main)/layout.js b/src/app/(main)/layout.js
@@ -1,13 +1,19 @@
 "use client";
 
+import Link from 'next/link';
+import Image from 'next/image';
 import { useEffect, useState } from 'react';
+import { FaSignOutAlt } from 'react-icons/fa';
 import { getCookie, setCookie, deleteCookie, hasCookie } from 'cookies-next';
 
 import Loading from '@/app/loading';
+import font from '@/app/font.module.css';
 import styles from '@/components/main/main.module.css';
 import Sidebar from '@/components/main/sidebar/Sidebar';
 import { IsLogin, Username } from '@/components/main/LoginContext';
 
+import Logo from '../../../public/images/Sersow.png';
+
 import TokenCheck from '@/api/auth/token-check';
 import RefreshToken from '@/api/auth/refresh-token';
 
@@ -62,19 +68,33 @@ export default async function MainLayout(props) {
   }, []);
 
   return (isLogin === null || data === null) ? (<Loading />) : (
-    <main className="w-screen h-screen flex">
-      <div className="grow h-screen bg-slate-900"></div>
-      <IsLogin.Provider value={{ isLogin }}>
-        <div className="grow-0 h-screen flex">
-          <Sidebar image={data ? data.data.image : ""} name={data ? data.data.name : ""} username={data ? data.data.username : ""} />
-          <div className={`${styles.mainScrollbar} w-[1016px] overflow-y-auto`}>
-            <Username.Provider value={{ username: data ? data.data.username : null }}>
-              {props.children}
-            </Username.Provider>
+    <>
+      <main className="w-screen h-screen sm:flex hidden">
+        <div className="grow h-screen bg-slate-900"></div>
+        <IsLogin.Provider value={{ isLogin }}>
+          <div className="grow-0 h-screen flex">
+            <Sidebar image={data ? data.data.image : ""} name={data ? data.data.name : ""} username={data ? data.data.username : ""} />
+            <div className={`${styles.mainScrollbar} w-[1016px] overflow-y-auto`}>
+              <Username.Provider value={{ username: data ? data.data.username : null }}>
+                {props.children}
+              </Username.Provider>
+            </div>
           </div>
-        </div>
-      </IsLogin.Provider>
-      <div className="grow h-screen"></div>
-    </main>
+        </IsLogin.Provider>
+        <div className="grow h-screen"></div>
+      </main>
+      <main className="bg-slate-950 w-screen h-screen flex flex-col justify-center items-center gap-8 px-6 sm:hidden">
+        <Image src={Logo} alt="sersow" className="w-32 h-auto" />
+        <h3 className={`${font.Satoshi_h6medium} text-white text-center`}>Opps, my bad! Our website is under construction and not mobile-friendly yet. But don't worry, we're working hard to make it mobile-ready. Hang tight, it's coming soon!</h3>
+        <Link href="/">
+          <button className="flex items-center gap-2 px-4 py-3 border border-solid border-slate-300 rounded-md transition ease-out delay-150 hover:shadow-[0_0_4px_1px_white] hover:shadow-inner-[0_0_3px_1px_rgb(255,255,255,0.4)] active:scale-[.92] active:delay-150">
+            <div>
+              <FaSignOutAlt className="text-white" />
+            </div>
+            <h4 className={`${font.Satoshi_b1medium} text-white`}>Go Back</h4>
+          </button>
+        </Link>
+      </main>
+    </>
   );
 }
diff --git a/src/app/credits/page.js b/src/app/credits/page.js
@@ -85,9 +85,10 @@ export default function Credits() {
         <div>
           <Image src={BgGradient} className="absolute float-right right-0 mix-blend-hard-light w-3/6 -mt-8 select-none" draggable="false" />
         </div>
-        <p className={`${font.Clash_display_h1bold} mx-auto mt-20 mb-16 pb-4 select-none`} draggable="false">Introducing our savvy mastermind</p>
+        <p className={`${font.Clash_display_h1bold} hidden md:block mx-auto mt-20 mb-16 pb-4 select-none`} draggable="false">Introducing our savvy mastermind</p>
+        <p className={`${font.Clash_display_h2bold} block md:hidden mx-auto mt-20 mb-16 pb-4 select-none text-center`} draggable="false">Introducing our savvy mastermind</p>
         {dataDev.map((row, index) => (
-          <div key={"row" + index} className="mx-auto flex gap-6 mb-12 select-none" draggable="false">
+          <div key={"row" + index} className="mx-auto flex flex-col md:flex-row gap-6 mb-12 select-none" draggable="false">
           {row.map((items, index) => (
             <div key={"card" + index} className="group">
               <div className="relative w-48 rounded-[0.65rem] overflow-hidden text-white">