feat: Temp redirect page until development

fossnsbm · Apr 30, 2024 · dede807 · dede807
1 parent 15aae93
commit dede807
Show file tree

Hide file tree

Showing 14 changed files with 184 additions and 64 deletions.
diff --git a/next.config.mjs b/next.config.mjs
@@ -1,4 +1,14 @@
 /** @type {import('next').NextConfig} */
-const nextConfig = {};
+const nextConfig = {
+  async redirects() {
+    return [
+      {
+        source: "/",
+        destination: "/underdev",
+        permanent: false,
+      },
+    ];
+  },
+};
 
 export default nextConfig;
diff --git a/package.json b/package.json
@@ -21,6 +21,7 @@
     "next": "14.2.3",
     "react": "^18",
     "react-dom": "^18",
+    "react-fast-marquee": "^1.6.4",
     "react-hook-form": "^7.51.3",
     "react-redux": "^9.1.1",
     "tailwind-merge": "^2.3.0",

diff --git a/public/assets/bg-img.png b/public/assets/bg-img.png
diff --git a/public/assets/mush.png b/public/assets/mush.png
diff --git a/public/assets/question-box.png b/public/assets/question-box.png
diff --git a/public/assets/start.png b/public/assets/start.png
diff --git a/public/fonts/ThaleahFat.ttf b/public/fonts/ThaleahFat.ttf
diff --git a/src/app/(client)/(pages)/underdev/_components/marquee.tsx b/src/app/(client)/(pages)/underdev/_components/marquee.tsx
@@ -0,0 +1,26 @@
+import Image from "next/image";
+import Marquee from "react-fast-marquee";
+
+export default function EventMarquee() {
+  const count = 2;
+  return (
+    <Marquee className="h-[8vh] overflow-hidden ">
+      {Array.from({ length: count }).map((_, index) => (
+        <div key={index} className="flex flex-row">
+          <h1
+            className="text-black text-9xl"
+            style={{
+              textShadow:
+                "4px 4px 0 #fff, -4px -4px 0 #fff, 4px -4px 0 #fff, -4px 4px 0 #fff",
+            }}
+          >
+            Techie sleuths 24
+          </h1>
+          <div className="flex justify-center items-center">
+            <Image alt="mush" src="/assets/mush.png" width={100} height={50} />
+          </div>
+        </div>
+      ))}
+    </Marquee>
+  );
+}
diff --git a/src/app/(client)/(pages)/underdev/_components/question-box.tsx b/src/app/(client)/(pages)/underdev/_components/question-box.tsx
@@ -0,0 +1,26 @@
+import Image from "next/image";
+
+export default function QuestionBox() {
+  return (
+    <div className="flex gap-1">
+      <Image
+        alt="start"
+        src="/assets/question-box.png"
+        width={50}
+        height={50}
+      />
+      <Image
+        alt="start"
+        src="/assets/question-box.png"
+        width={50}
+        height={50}
+      />
+      <Image
+        alt="start"
+        src="/assets/question-box.png"
+        width={50}
+        height={50}
+      />
+    </div>
+  );
+}
diff --git a/src/app/(client)/(pages)/underdev/page.tsx b/src/app/(client)/(pages)/underdev/page.tsx
@@ -0,0 +1,37 @@
+import Image from "next/image";
+import Marquee from "react-fast-marquee";
+import EventMarquee from "./_components/marquee";
+import QuestionBox from "./_components/question-box";
+
+export default function Page() {
+  return (
+    <div className="w-full h-full relative bg-slate-900">
+      <Image
+        alt="Mountains"
+        src="/assets/bg-img.png"
+        layout="fill"
+        objectFit="cover"
+      />
+      <EventMarquee />
+      <div className="w-full h-[85vh] relative flex justify-center items-center flex-col gap-8">
+        <Image
+          alt="start"
+          src="/assets/start.png"
+          width={150}
+          height={150}
+          className="animate-bounce hover:animate-spin"
+        />
+        <h1
+          className="text-black text-5xl text-center font-sans"
+          style={{
+            textShadow:
+              "2px 2px 0 #fff, -2px -2px 0 #fff, 2px -2px 0 #fff, -2px 2px 0 #fff",
+          }}
+        >
+          We are under development!
+        </h1>
+        <QuestionBox />
+      </div>
+    </div>
+  );
+}
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -3,9 +3,15 @@ import { Inter } from "next/font/google";
 import "@/styles/globals.css";
 import { ReduxProvider } from "@/store/provider";
 import { Toaster } from "@/components/ui/toaster";
+import localFont from "next/font/local";
 
 const inter = Inter({ subsets: ["latin"] });
 
+const thalehfatFont = localFont({
+  src: "../../public/fonts/ThaleahFat.ttf",
+  display: "swap",
+});
+
 export const metadata: Metadata = {
   title: "Techie Sleuths '24🔎",
   description: "Techie Sleuths | Annual treasure hunt organized by WIF NSBM",
@@ -18,7 +24,7 @@ export default function RootLayout({
 }>) {
   return (
     <html lang="en">
-      <body className={inter.className}>
+      <body className={`${inter.className} ${thalehfatFont.className}`}>
         <ReduxProvider>
           {children}
           <Toaster />

diff --git a/src/styles/globals.css b/src/styles/globals.css
@@ -1,76 +1,82 @@
 @tailwind base;
-  @tailwind components;
-  @tailwind utilities;
+@tailwind components;
+@tailwind utilities;
 
-  @layer base {
-    :root {
-      --background: 0 0% 100%;
-      --foreground: 222.2 84% 4.9%;
+html,
+body,
+:root {
+  height: 100%;
+}
 
-      --card: 0 0% 100%;
-      --card-foreground: 222.2 84% 4.9%;
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 222.2 84% 4.9%;
 
-      --popover: 0 0% 100%;
-      --popover-foreground: 222.2 84% 4.9%;
+    --card: 0 0% 100%;
+    --card-foreground: 222.2 84% 4.9%;
 
-      --primary: 222.2 47.4% 11.2%;
-      --primary-foreground: 210 40% 98%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 222.2 84% 4.9%;
 
-      --secondary: 210 40% 96.1%;
-      --secondary-foreground: 222.2 47.4% 11.2%;
+    --primary: 222.2 47.4% 11.2%;
+    --primary-foreground: 210 40% 98%;
 
-      --muted: 210 40% 96.1%;
-      --muted-foreground: 215.4 16.3% 46.9%;
+    --secondary: 210 40% 96.1%;
+    --secondary-foreground: 222.2 47.4% 11.2%;
 
-      --accent: 210 40% 96.1%;
-      --accent-foreground: 222.2 47.4% 11.2%;
+    --muted: 210 40% 96.1%;
+    --muted-foreground: 215.4 16.3% 46.9%;
 
-      --destructive: 0 84.2% 60.2%;
-      --destructive-foreground: 210 40% 98%;
+    --accent: 210 40% 96.1%;
+    --accent-foreground: 222.2 47.4% 11.2%;
 
-      --border: 214.3 31.8% 91.4%;
-      --input: 214.3 31.8% 91.4%;
-      --ring: 222.2 84% 4.9%;
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 210 40% 98%;
 
-      --radius: 0.5rem;
-    }
+    --border: 214.3 31.8% 91.4%;
+    --input: 214.3 31.8% 91.4%;
+    --ring: 222.2 84% 4.9%;
 
-    .dark {
-      --background: 222.2 84% 4.9%;
-      --foreground: 210 40% 98%;
+    --radius: 0.5rem;
+  }
+
+  .dark {
+    --background: 222.2 84% 4.9%;
+    --foreground: 210 40% 98%;
 
-      --card: 222.2 84% 4.9%;
-      --card-foreground: 210 40% 98%;
+    --card: 222.2 84% 4.9%;
+    --card-foreground: 210 40% 98%;
 
-      --popover: 222.2 84% 4.9%;
-      --popover-foreground: 210 40% 98%;
+    --popover: 222.2 84% 4.9%;
+    --popover-foreground: 210 40% 98%;
 
-      --primary: 210 40% 98%;
-      --primary-foreground: 222.2 47.4% 11.2%;
+    --primary: 210 40% 98%;
+    --primary-foreground: 222.2 47.4% 11.2%;
 
-      --secondary: 217.2 32.6% 17.5%;
-      --secondary-foreground: 210 40% 98%;
+    --secondary: 217.2 32.6% 17.5%;
+    --secondary-foreground: 210 40% 98%;
 
-      --muted: 217.2 32.6% 17.5%;
-      --muted-foreground: 215 20.2% 65.1%;
+    --muted: 217.2 32.6% 17.5%;
+    --muted-foreground: 215 20.2% 65.1%;
 
-      --accent: 217.2 32.6% 17.5%;
-      --accent-foreground: 210 40% 98%;
+    --accent: 217.2 32.6% 17.5%;
+    --accent-foreground: 210 40% 98%;
 
-      --destructive: 0 62.8% 30.6%;
-      --destructive-foreground: 210 40% 98%;
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 210 40% 98%;
 
-      --border: 217.2 32.6% 17.5%;
-      --input: 217.2 32.6% 17.5%;
-      --ring: 212.7 26.8% 83.9%;
-    }
+    --border: 217.2 32.6% 17.5%;
+    --input: 217.2 32.6% 17.5%;
+    --ring: 212.7 26.8% 83.9%;
   }
+}
 
-  @layer base {
-    * {
-      @apply border-border;
-    }
-    body {
-      @apply bg-background text-foreground;
-    }
-  }
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}
diff --git a/tailwind.config.ts b/tailwind.config.ts
@@ -1,13 +1,13 @@
-import type { Config } from "tailwindcss"
+import type { Config } from "tailwindcss";
 
 const config = {
   darkMode: ["class"],
   content: [
-    './pages/**/*.{ts,tsx}',
-    './components/**/*.{ts,tsx}',
-    './app/**/*.{ts,tsx}',
-    './src/**/*.{ts,tsx}',
-	],
+    "./pages/**/*.{ts,tsx}",
+    "./components/**/*.{ts,tsx}",
+    "./app/**/*.{ts,tsx}",
+    "./src/**/*.{ts,tsx}",
+  ],
   prefix: "",
   theme: {
     container: {
@@ -72,9 +72,12 @@ const config = {
         "accordion-down": "accordion-down 0.2s ease-out",
         "accordion-up": "accordion-up 0.2s ease-out",
       },
+      fontFamily: {
+        sans: ["var(--font-thaleahfat)"],
+      },
     },
   },
   plugins: [require("tailwindcss-animate")],
-} satisfies Config
+} satisfies Config;
 
-export default config
+export default config;
diff --git a/yarn.lock b/yarn.lock
@@ -2845,6 +2845,11 @@ react-dom@^18:
     loose-envify "^1.1.0"
     scheduler "^0.23.2"
 
+react-fast-marquee@^1.6.4:
+  version "1.6.4"
+  resolved "https://registry.yarnpkg.com/react-fast-marquee/-/react-fast-marquee-1.6.4.tgz#ac0bed0faee63e4d97e9b8cd03f3bea9f242fab3"
+  integrity sha512-LAgvhRmHdqaUQ8R5jCUwzEGFUIjnCCt3T3W8X7j7wF6DWe0SATlpP0JX1V0pp2qX3DYUezmn1Iz5AtRFdL2EWQ==
+
 react-hook-form@^7.51.3:
   version "7.51.3"
   resolved "https://registry.yarnpkg.com/react-hook-form/-/react-hook-form-7.51.3.tgz#7486dd2d52280b6b28048c099a98d2545931cab3"