Merge pull request #42 from fossnsbm/feat/development/23-registration…

…page refactor: Background color
fossnsbm · May 12, 2024 · 41e83b2 · 41e83b2
2 parents def0b88 + 48905a4
commit 41e83b2
Show file tree

Hide file tree

Showing 3 changed files with 65 additions and 1 deletion.
diff --git a/src/app/(client)/(pages)/register/page.tsx b/src/app/(client)/(pages)/register/page.tsx
@@ -0,0 +1,24 @@
+import Image from "next/image";
+import EventDetailsMarquee from "@/components/ui/marquee";
+import RegistrationForm from "@/components/register/registration-form";
+
+export default function RegisterPage() {
+  return (
+    <div>
+      <div className="w-full min-h-screen relative">
+        <div className="absolute inset-0 bg-slate-900">
+          <Image
+            alt="Mountains"
+            src="/assets/bg-img.webp"
+            layout="fill"
+            objectFit="cover"
+          />
+        </div>
+        <RegistrationForm />
+      </div>
+      <div className="mt-10 opacity-70">
+        <EventDetailsMarquee />
+      </div>
+    </div>
+  );
+}
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -19,7 +19,7 @@ export default function RootLayout({
   return (
     <html lang="en">
       <body
-        className={`${jetbrains.variable} ${thalehfatFont.variable} font-sans`}
+        className={`${jetbrains.variable} ${thalehfatFont.variable} font-sans bg-[#0F172A]`}
       >
         <ReduxProvider>
           <NavBar />

diff --git a/src/components/register/registration-form.tsx b/src/components/register/registration-form.tsx
@@ -0,0 +1,40 @@
+export default function RegistrationForm() {
+  const style = {
+    boxShadowLittle: "3px 3px #000",
+    boxShadowLarge: "8px 8px #000",
+    littleBoxStyle: "absolute aspect-square w-3 bg-[#A66224]",
+  };
+
+  return (
+    <div className="relative z-10 min-h-screen gird place-content-center">
+      <div
+        style={{
+          boxShadow: style.boxShadowLarge,
+        }}
+        className="relative max-w-5xl mx-auto bg-[#FEF3C7] py-10 border-8 border-[#A66224]"
+      >
+        <div
+          style={{ boxShadow: style.boxShadowLittle }}
+          className={`top-0 mt-2 ml-2 ${style.littleBoxStyle}`}
+        />
+        <div
+          style={{ boxShadow: style.boxShadowLittle }}
+          className={`bottom-0 mb-2 ml-2 ${style.littleBoxStyle}`}
+        />
+        <div
+          style={{ boxShadow: style.boxShadowLittle }}
+          className={`right-0 bottom-0 mb-2 mr-2 ${style.littleBoxStyle}`}
+        />
+        <div
+          style={{ boxShadow: style.boxShadowLittle }}
+          className={`right-0 top-0 mt-2 mr-2 ${style.littleBoxStyle}`}
+        />
+        <h1 className="absolute top-0 left-1/2 transform -translate-x-1/2 text-center text-6xl text-[#5A270B]">
+          Enter game
+        </h1>
+
+
+      </div>
+    </div>
+  );
+}