Merge pull request #44 from erland-syafiq/register-success

Register Success Page

site/app/components/Navbar.jsx

@@ -8,9 +8,10 @@ import { usePathname } from 'next/navigation';
 function Navbar() {
     const path = usePathname();
 
-    const isHomePage = path === '/';
+    // If we are on home page or register/success make navbar transparent
+    const isTransparent = path === '/' || path === '/register/success';
 
-    const navbarStyle = isHomePage ? 'navbar-transparent' : '';
+    const navbarStyle = isTransparent ? 'navbar-transparent' : '';
 
     return (
             <nav className={`${navbarStyle} navbar navbar-expand-md navbar-toggleable-md navbar-light box-shadow`}>

site/app/register/success/RegisterSuccess.css

@@ -0,0 +1,48 @@
+.registerSuccess {
+    text-align: center;
+}
+
+.registerSuccess h2 {
+    color: var(--primary);
+    padding: 10px;
+}
+
+.registerSuccess h5 {
+    padding: 10px;
+}
+
+.registerCard {
+    padding: 20px;
+    margin-bottom: 40px;
+    margin-right: 10px;
+    margin-left: 10px;
+    border: solid var(--primary);
+    background: var(--primary-background);
+    box-shadow: -8px 12px 0px 0px var(--tertiary);
+    margin-top: 100px;
+    margin-bottom: 100px;
+}
+
+.registerImg {
+    height: 250px;
+    width: 100%;
+    object-fit: cover;
+    background-position: center;
+    margin-bottom: 20px;
+    /* box-shadow: 0 6px 8px rgba(0, 0, 0, 0.3); */
+}
+
+/**
+    Unlike home page this background is fixed and static in background
+**/
+.registerSuccessBackground {
+    position: fixed;
+    top: 0px;
+    left: 0px;
+    background-repeat: no-repeat;
+    background-image: url(/Images/registersuccess.jpeg);
+    background-size: cover;
+    height: 100%;
+    width: 100%;
+    z-index: -1;
+}

site/app/register/success/page.jsx

@@ -1,11 +1,29 @@
+import React from 'react';
+import './RegisterSuccess.css';
 
 export default function RegisterSuccess() {
     return (
-        <main class="Container">
-            <h1>Thank you for registering for VTMUNC!</h1>
-            <p>
-                We will begin processing your data as soon as possible. 
-            </p>
-        </main>
+        <main className="container">
+            <div className='registerSuccess'>
+                <div className='row'>
+                    <div className='col-md-3'></div>
+                    <div className='col-md-6'>
+                        <div className='registerCard'>
+                            <div className='row'>
+                                <h2>Thank you for registering for VTMUNC!</h2>                 
+                            </div>
+
+                            <div>
+                                <img className="registerImg" src={"/Images/AboutUsGroupPhoto.jpg"} />
+                            </div>
+
+                            <h5>We will begin processing your data as soon as possible. Please reach out to chargedaffaires@vtmunc.org if you have any more questions.</h5>
+                        </div>
+                    </div> 
+                    <div className='col-md-3'></div>
+                </div>
+                </div>
+            <div className="registerSuccessBackground"></div>
+        </main>        
     )
 }