pages/id/index.js


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

import Head from "next/head";
import React from "react";
import Image from "next/image";
import Link from "next/link";
import Footer from "@/components/shared/footer";
import { NewNavbar } from "@/components/shared/NavBar";
import MobileNav from "@/components/shared/MobileNav";

export default function Home() {
  return (
    <>
      <Head>
        <title>Under Construction</title>
        <meta name="about" content="About this web" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <link rel="icon" href="/svg/c.svg" />
      </Head>
      <main className="flex flex-col h-screen">
        <NewNavbar />
        <MobileNav hideProfile />
        {/* Create an under construction page with tailwind css */}
        <div className="h-full w-screen flex-center flex-grow flex-col">
          <Image
            width={500}
            height={500}
            src="/work-on-progress.gif"
            alt="work-on-progress"
            className="w-[26vw] md:w-[15vw]"
          />
          <h1 className="text-2xl sm:text-4xl xl:text-6x font-bold my-4">
            🚧 Page Under Construction 🚧
          </h1>
          <p className="text-base sm:text-lg xl:text-x text-gray-300 mb-6 text-center">
            "Please be patient, as we're still working on this page and it will
            be available soon."
          </p>
          <Link href={`/en/`}>
            <div className="bg-action xl:text-xl text-white font-bold py-2 px-4 rounded hover:bg-[#fb6f44]">
              Go back home
            </div>
          </Link>
        </div>
        <Footer />
      </main>
    </>
  );
}