Feat/register page

src/layouts/BaseLayout.astro

@@ -1,4 +1,6 @@
 ---
+import "@/styles/global.css";
+
 interface Props {
   pageTitle?: string;
 }

src/layouts/SignInBackground.astro

@@ -0,0 +1,84 @@
+---
+import { Image } from "astro:assets";
+---
+
+<div class="relative overflow-hidden bg-signin bg-cover">
+  <Image
+    src="/element/lavender-lemonade.png"
+    alt="Lavender Lemonade"
+    class="absolute -left-[60px] -top-[100px] rotate-[8.94deg]"
+    width="185.51"
+    height="159.11"
+  />
+  <Image
+    src="/element/pina-colada.png"
+    alt="Pina Colada"
+    class="absolute -right-[20px] -top-[110px] -rotate-[137.56deg]"
+    width="153.52"
+    height="194.27"
+  />
+  <Image
+    src="/element/icecream2.png"
+    alt="Ice Cream 2"
+    class="absolute -right-[50px] top-[90px]"
+    width="141"
+    height="186"
+  />
+  <Image
+    src="/element/blue-lagoon.png"
+    alt="Blue Lagoon"
+    class="absolute -left-[50px] top-[180px] rotate-[13.95deg]"
+    width="110"
+    height="170"
+  />
+  <Image
+    src="/element/gin-and-tonic.png"
+    alt="Gin and Tonic"
+    class="absolute -right-[25px] top-[300px] rotate-[22.93deg]"
+    width="126"
+    height="134.79"
+  />
+  <Image
+    src="/element/radio.png"
+    alt="Radio"
+    class="absolute -left-[90px] top-[450px] -rotate-[16.27deg] opacity-85"
+    width="281.48"
+    height="185.95"
+  />
+  <Image
+    src="/element/palette.png"
+    alt="Palette"
+    class="absolute -bottom-[80px] right-[150px] rotate-[19.89deg]"
+    width="165.19"
+    height="284.15"
+  />
+  <Image
+    src="/element/lightning.png"
+    alt="Lightning"
+    class="absolute -bottom-[80px] -right-[30px] rotate-[12.79deg] opacity-80"
+    width="165.19"
+    height="284.15"
+  />
+  <Image
+    src="/element/summer-berry-sangria.png"
+    alt="Summer Berry Sangria"
+    class="absolute -bottom-[100px] -right-[10px]"
+    width="243"
+    height="294"
+  />
+  <Image
+    src="/element/cosmopolitan.png"
+    alt="Cosmopolitan"
+    class="absolute -bottom-[80px] -right-[90px] -rotate-[13.41deg]"
+    width="240.90"
+    height="425.65"
+  />
+  <Image
+    src="/element/calendar.png"
+    alt="Calendar"
+    class="absolute -bottom-[70px] -left-[110px] rotate-[43.60deg]"
+    width="310"
+    height="250"
+  />
+  <slot />
+</div>

src/pages/signin.astro

@@ -1,15 +1,44 @@
 ---
 import BaseLayout from "@/layouts/BaseLayout.astro";
+import SignInBackground from "@/layouts/SignInBackground.astro";
+import { Image } from "astro:assets";
+import BarImage from "@/public/images/bar.png";
 ---
 
 <!-- TODO: Implement the logic for the Google OAuth -->
 <BaseLayout pageTitle="Login">
-  <div class="flex w-full flex-col items-center justify-center px-4">
-    <button
-      class="flex h-fit w-full flex-wrap items-center justify-center gap-2 rounded-2xl border-2 border-red-800 px-4 py-2 text-center text-2xl shadow-md shadow-red-800 hover:translate-y-1 active:translate-y-0"
-    >
-      <i class="icon-[devicon--google]"></i>
-       Sign In With Google
-    </button>
-  </div>
+  <SignInBackground>
+    <div class="relative flex h-full w-full items-center justify-center px-14">
+      <div class="absolute top-20 flex">
+        <Image src="/logo/esc-logo.png" alt="ESC Logo" width="92" height="92" />
+        <Image
+          src="/logo/gearfest-logo.png"
+          alt="Gear Festival 2023 Logo"
+          width="92"
+          height="92"
+        />
+        <Image
+          src="/logo/kntu-logo.png"
+          alt="KNTU Logo"
+          width="92"
+          height="92"
+        />
+      </div>
+      <div class="w-full space-y-12">
+        <div
+          class="flex h-72 w-full items-end overflow-hidden rounded-lg bg-white"
+        >
+          <Image src={BarImage} alt="Bar Image" />
+        </div>
+        <div>
+          <button
+            class="flex h-fit w-full flex-wrap items-center justify-center gap-6 rounded-lg bg-base px-4 py-2.5 text-center text-2xl font-semibold text-primary shadow-button"
+          >
+            <i class="icon-[devicon--google] h-7 w-7"></i>
+             Register with Google
+          </button>
+        </div>
+      </div>
+    </div>
+  </SignInBackground>
 </BaseLayout>

src/styles/global.css

@@ -0,0 +1,52 @@
+@font-face {
+  font-family: "SukhumvitSet";
+  src: url("/fonts/SukhumvitSet-Text.ttf");
+  font-weight: normal;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "SukhumvitSet";
+  src: url("/fonts/SukhumvitSet-Bold.ttf");
+  font-weight: bold;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "SukhumvitSet";
+  src: url("/fonts/SukhumvitSet-SemiBold.ttf");
+  font-weight: 600;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "SukhumvitSet";
+  src: url("/fonts/SukhumvitSet-Medium.ttf");
+  font-weight: 500;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "SukhumvitSet";
+  src: url("/fonts/SukhumvitSet-Light.ttf");
+  font-weight: 300;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "SukhumvitSet";
+  src: url("/fonts/SukhumvitSet-Thin.ttf");
+  font-weight: 100;
+  font-style: normal;
+  font-display: swap;
+}
+
+html,
+body {
+  font-family: "SukhumvitSet", sans-serif;
+}

tailwind.config.mjs

@@ -4,7 +4,20 @@ const { addDynamicIconSelectors } = require("@iconify/tailwind");
 export default {
   content: ["./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}"],
   theme: {
-    extend: {},
+    extend: {
+      colors: {
+        primary: "#864974",
+        base: "#E0E0E0",
+      },
+      backgroundImage: {
+        signin:
+          "url(/public/images/grain-bg.png), linear-gradient(170deg, #A283AB -10.14%, #0D3C56 69.45%);",
+      },
+      boxShadow: {
+        button:
+          "0px -4px 4px 0px rgba(0, 0, 0, 0.25) inset, 0px 2px 9px 0px rgba(0, 0, 0, 0.25);",
+      },
+    },
   },
   plugins: [addDynamicIconSelectors()],
 };

tsconfig.json

@@ -3,7 +3,8 @@
   "compilerOptions": {
     "baseUrl": ".",
     "paths": {
-      "@/*": ["src/*"]
+      "@/*": ["src/*"],
+      "@/public/*": ["public/*"]
     },
     "jsx": "react-jsx",
     "jsxImportSource": "react"