refactor(register): refactor register page

esc-chula · Jan 27, 2024 · 22d7c57 · 22d7c57
1 parent eb56c54
commit 22d7c57
Show file tree

Hide file tree

Showing 34 changed files with 70 additions and 58 deletions.
diff --git a/public/element/blue-lagoon.png b/public/element/blue-lagoon.png
diff --git a/public/element/bottle.png b/public/element/bottle.png
diff --git a/public/element/cake1.png b/public/element/cake1.png
diff --git a/public/element/cake2.png b/public/element/cake2.png
diff --git a/public/element/calendar.png b/public/element/calendar.png
diff --git a/public/element/casette.png b/public/element/casette.png
diff --git a/public/element/cosmopolitan.png b/public/element/cosmopolitan.png
diff --git a/public/element/disk.png b/public/element/disk.png
diff --git a/public/element/donot.png b/public/element/donot.png
diff --git a/public/element/drinks.png b/public/element/drinks.png
diff --git a/public/element/gin-and-tonic.png b/public/element/gin-and-tonic.png
diff --git a/public/element/headphones.png b/public/element/headphones.png
diff --git a/public/element/heart1.png b/public/element/heart1.png
diff --git a/public/element/heart2.png b/public/element/heart2.png
diff --git a/public/element/icecream1.png b/public/element/icecream1.png
diff --git a/public/element/icecream2.png b/public/element/icecream2.png
diff --git a/public/element/lavender-lemonade.png b/public/element/lavender-lemonade.png
diff --git a/public/element/letter.png b/public/element/letter.png
diff --git a/public/element/lightning.png b/public/element/lightning.png
diff --git a/public/element/music.png b/public/element/music.png
diff --git a/public/element/orange.png b/public/element/orange.png
diff --git a/public/element/palette.png b/public/element/palette.png
diff --git a/public/element/pina-colada.png b/public/element/pina-colada.png
diff --git a/public/element/radio.png b/public/element/radio.png
diff --git a/public/element/rose.png b/public/element/rose.png
diff --git a/public/element/strawberry.png b/public/element/strawberry.png
diff --git a/public/element/summer-berry-sangria.png b/public/element/summer-berry-sangria.png
diff --git a/public/logo/esc-logo.png → src/assets/logo/esc-logo.png b/public/logo/esc-logo.png → src/assets/logo/esc-logo.png
diff --git a/public/logo/gearfest-logo.png → src/assets/logo/gearfest-logo.png b/public/logo/gearfest-logo.png → src/assets/logo/gearfest-logo.png
diff --git a/public/logo/kntu-logo.png → src/assets/logo/kntu-logo.png b/public/logo/kntu-logo.png → src/assets/logo/kntu-logo.png
diff --git a/src/components/register-page/Hero.tsx b/src/components/register-page/Hero.tsx
@@ -1,5 +1,4 @@
-// import BarImage from "@/assets/images/bar.png";
-// import { Image } from "astro:assets";
+import BarImage from "@/assets/images/bar.png";
 
 interface Props {
   page: "register" | "start" | "redo";
@@ -10,7 +9,7 @@ const Hero = ({ page, dDay }: Props) => {
   return (
     <div className="w-full space-y-12">
       <div className="flex h-72 w-full items-end overflow-hidden rounded-lg bg-white">
-        {/* <Image src={BarImage} alt="Bar Image" /> */}
+        <img src={BarImage.src} alt="Bar Image" />
         {page === "redo" ? "result" : "Image"}
       </div>
       <>

diff --git a/src/layouts/SignInBackground.astro b/src/layouts/SignInBackground.astro
@@ -1,81 +1,103 @@
 ---
 import { Image } from "astro:assets";
+import elemLavenderLemonade from "@/assets/elements/lavender-lemonade.png";
+import elemPinaColada from "@/assets/elements/pina-colada.png";
+import elemIceCream2 from "@/assets/elements/icecream-2.png";
+import elemBlueLagoon from "@/assets/elements/blue-lagoon.png";
+import elemGinAndTonic from "@/assets/elements/gin-and-tonic.png";
+import elemRadio from "@/assets/elements/radio.png";
+import elemPalette from "@/assets/elements/palette.png";
+import elemLightning from "@/assets/elements/lightning.png";
+import elemSummerBerrySangria from "@/assets/elements/summer-berry-sangria.png";
+import elemCosmopolitan from "@/assets/elements/cosmopolitan.png";
+import elemCalendar from "@/assets/elements/calendar.png";
 ---
 
 <div class="relative w-full overflow-hidden bg-signin bg-cover">
   <Image
-    src="/element/lavender-lemonade.png"
-    alt="Lavender Lemonade"
+    src={elemLavenderLemonade}
+    alt=""
+    aria-hidden
     class="absolute -left-[60px] -top-[100px] rotate-[8.94deg]"
     width="185.51"
     height="159.11"
   />
   <Image
-    src="/element/pina-colada.png"
-    alt="Pina Colada"
+    src={elemPinaColada}
+    alt=""
+    aria-hidden
     class="absolute -right-[20px] -top-[110px] -rotate-[137.56deg]"
     width="153.52"
     height="194.27"
   />
   <Image
-    src="/element/icecream2.png"
-    alt="Ice Cream 2"
+    src={elemIceCream2}
+    alt=""
+    aria-hidden
     class="absolute -right-[50px] top-[90px]"
     width="141"
     height="186"
   />
   <Image
-    src="/element/blue-lagoon.png"
-    alt="Blue Lagoon"
+    src={elemBlueLagoon}
+    alt=""
+    aria-hidden
     class="absolute -left-[50px] top-[180px] rotate-[13.95deg]"
     width="110"
     height="170"
   />
   <Image
-    src="/element/gin-and-tonic.png"
-    alt="Gin and Tonic"
+    src={elemGinAndTonic}
+    alt=""
+    aria-hidden
     class="absolute -right-[25px] top-[300px] rotate-[22.93deg]"
     width="126"
     height="134.79"
   />
   <Image
-    src="/element/radio.png"
-    alt="Radio"
+    src={elemRadio}
+    alt=""
+    aria-hidden
     class="absolute -left-[90px] top-[450px] -rotate-[16.27deg] opacity-85"
     width="281.48"
     height="185.95"
   />
   <Image
-    src="/element/palette.png"
-    alt="Palette"
+    src={elemPalette}
+    alt=""
+    aria-hidden
     class="absolute -bottom-[80px] right-[150px] rotate-[19.89deg]"
     width="165.19"
     height="284.15"
   />
   <Image
-    src="/element/lightning.png"
-    alt="Lightning"
+    src={elemLightning}
+    alt=""
+    aria-hidden
     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"
+    src={elemSummerBerrySangria}
+    alt=""
+    aria-hidden
     class="absolute -bottom-[100px] -right-[10px]"
     width="243"
     height="294"
   />
   <Image
-    src="/element/cosmopolitan.png"
-    alt="Cosmopolitan"
+    src={elemCosmopolitan}
+    alt=""
+    aria-hidden
     class="absolute -bottom-[80px] -right-[90px] -rotate-[13.41deg]"
     width="240.90"
     height="425.65"
   />
   <Image
-    src="/element/calendar.png"
-    alt="Calendar"
+    src={elemCalendar}
+    alt=""
+    aria-hidden
     class="absolute -bottom-[70px] -left-[110px] rotate-[43.60deg]"
     width="310"
     height="250"

diff --git a/src/pages/index.astro b/src/pages/index.astro
@@ -1,8 +1,29 @@
 ---
+import { Image } from "astro:assets";
+
 import BaseLayout from "@/layouts/BaseLayout.astro";
+import SignInBackground from "@/layouts/SignInBackground.astro";
+import Hero from "@/components/register-page/Hero.tsx";
+
+import escLogo from "@/assets/logo/esc-logo.png";
+import gearfestLogo from "@/assets/logo/gearfest-logo.png";
+import kntuLogo from "@/assets/logo/kntu-logo.png";
 ---
 
-<BaseLayout>
-  <!-- TODO: Show user's email here -->
-  <h1>email</h1>
+<BaseLayout pageTitle="Login">
+  <SignInBackground>
+    <div class="relative flex h-full w-full items-center justify-center px-14">
+      <div class="absolute top-20 flex">
+        <Image src={escLogo} alt="ESC Logo" width="92" height="92" />
+        <Image
+          src={gearfestLogo}
+          alt="Gear Festival 2023 Logo"
+          width="92"
+          height="92"
+        />
+        <Image src={kntuLogo} alt="KNTU Logo" width="92" height="92" />
+      </div>
+      <Hero client:load page="register" dDay={true} />
+    </div>
+  </SignInBackground>
 </BaseLayout>
diff --git a/src/pages/signin.astro b/src/pages/signin.astro