From fe6be9132dbce4f8dcb97f06877fff36d86801c8 Mon Sep 17 00:00:00 2001
From: D33102 <122258680+D33102@users.noreply.github.com>
Date: Sat, 17 Feb 2024 18:20:04 +0700
Subject: [PATCH] feat: coming soon page (#20)

* feat: coming soon page

* fix format and edit title

---------

Co-authored-by: Nutthapat Pongtanyavichai <59821765+Leomotors@users.noreply.github.com>
---
 src/pages/join.astro | 124 +++++++++++++++----------------------------
 1 file changed, 42 insertions(+), 82 deletions(-)

diff --git a/src/pages/join.astro b/src/pages/join.astro
index 5c00128..50f9f9f 100644
--- a/src/pages/join.astro
+++ b/src/pages/join.astro
@@ -2,90 +2,50 @@
 import Layout from "@/layouts/Layout.astro";
 ---
 
-<Layout title="Join" description="Join ISD">
-  <div class="relative w-screen overflow-hidden">
-    <div
-      class="lg:bg-lg-[url('recruitBackground.svg')] flex aspect-[4/3] w-screen bg-[url('recruitMobileBackground.svg')] bg-cover bg-bottom px-4 lg:aspect-[27/10]"
-    >
+<Layout title="Join" description="Coming soon">
+  <main class="absolute top-0">
+    <div class="flex w-full items-center justify-center">
       <div
-        class="font-['Space Grotesk'] mb-6 ml-4 mt-auto flex w-max text-2xl font-bold text-white lg:mb-20 lg:ml-6 lg:text-[64px]"
+        class="flex h-screen w-screen flex-col items-center justify-center bg-primary px-[12%] md:px-0"
       >
-        ISD66 Recruitment
-      </div>
-    </div>
-  </div>
-  <div class="block h-fit w-screen gap-4 bg-black pb-10 pt-5 text-white">
-    <div
-      class="flex w-full border-b-2 border-neutral-500 p-4 text-white hover:text-neutral-500 lg:px-10 lg:pb-9 lg:pt-8"
-    >
-      <div class="font-'Space Grotesk' text-xl font-normal lg:text-4xl">
-        Front-end Development
-      </div>
-      <div
-        class="font-'Space Grotesk' ml-auto pl-2 text-xl font-normal lg:text-4xl"
-      >
-        Learn More
-      </div>
-    </div>
-    <div
-      class="flex w-full border-b-2 border-neutral-500 p-4 text-white hover:text-neutral-500 lg:px-10 lg:pb-9 lg:pt-8"
-    >
-      <div class="font-'Space Grotesk' text-xl font-normal lg:text-4xl">
-        Back-end Development
-      </div>
-      <div
-        class="font-'Space Grotesk' ml-auto pl-2 text-xl font-normal lg:text-4xl"
-      >
-        Learn More
-      </div>
-    </div>
-    <div
-      class="flex w-full border-b-2 border-neutral-500 p-4 text-white hover:text-neutral-500 lg:px-10 lg:pb-9 lg:pt-8"
-    >
-      <div class="font-'Space Grotesk' text-xl font-normal lg:text-4xl">
-        Project Manager
-      </div>
-      <div
-        class="font-'Space Grotesk' ml-auto pl-2 text-xl font-normal lg:text-4xl"
-      >
-        Learn More
-      </div>
-    </div>
-    <div
-      class="flex w-full border-b-2 border-neutral-500 p-4 text-white hover:text-neutral-500 lg:px-10 lg:pb-9 lg:pt-8"
-    >
-      <div class="font-'Space Grotesk' text-xl font-normal lg:text-4xl">
-        UX-UI Designer
-      </div>
-      <div
-        class="font-'Space Grotesk' ml-auto pl-2 text-xl font-normal lg:text-4xl"
-      >
-        Learn More
-      </div>
-    </div>
-    <div
-      class="flex w-full border-b-2 border-neutral-500 p-4 text-white hover:text-neutral-500 lg:px-10 lg:pb-9 lg:pt-8"
-    >
-      <div class="font-'Space Grotesk' text-xl font-normal lg:text-4xl">
-        DevOps Enginner
-      </div>
-      <div
-        class="font-'Space Grotesk' ml-auto pl-2 text-xl font-normal lg:text-4xl"
-      >
-        Learn More
-      </div>
-    </div>
-    <div
-      class="flex w-full border-b-2 border-neutral-500 p-4 text-white hover:text-neutral-500 lg:px-10 lg:pb-9 lg:pt-8"
-    >
-      <div class="font-'Space Grotesk' text-xl font-normal lg:text-4xl">
-        Mobile App Developer
-      </div>
-      <div
-        class="font-'Space Grotesk' ml-auto pl-2 text-xl font-normal lg:text-4xl"
-      >
-        Learn More
+        <div
+          class="stroke-width-2 flex flex-row justify-center text-5xl font-medium text-primary md:text-[10rem]"
+        >
+          <div class="stroke-white">C</div>
+          <div class="stroke-yellow">0</div>
+          <div class="stroke-white">M</div>
+          <div class="stroke-yellow">I</div>
+          <div class="stroke-white">N</div>
+          <div class="stroke-yellow mr-1 md:mr-4">G</div>
+          <div class="ml-1 stroke-white md:ml-4">S</div>
+          <div class="stroke-yellow">O</div>
+          <div class="stroke-white">O</div>
+          <div class="stroke-yellow">N</div>
+        </div>
+        <div class="mt-6 text-center text-2xl text-[#807F7E] md:text-5xl">
+          Page that you are looking is not available
+        </div>
+
+        <a href="/">
+          <div
+            class="mt-10 cursor-pointer rounded-2xl border-[1px] border-white px-4 py-2 text-xl font-medium text-white md:px-8 md:py-4 md:text-4xl"
+          >
+            Homepage
+          </div>
+        </a>
       </div>
     </div>
-  </div>
+  </main>
 </Layout>
+
+<style>
+  .stroke-width-2 {
+    -webkit-text-stroke-width: 2px;
+  }
+  .stroke-white {
+    -webkit-text-stroke-color: var(--white, #fff);
+  }
+  .stroke-yellow {
+    -webkit-text-stroke-color: var(--Yellow, #fdc648);
+  }
+</style>