From e72f6dde6769ceb845b1003bd26f0f54a31ebdf6 Mon Sep 17 00:00:00 2001
From: gracetzeng <zengt.grace@gmail.com>
Date: Mon, 15 Dec 2025 00:18:22 -0600
Subject: [PATCH 1/3] add deadline boxes and make page scrollable

---
 .../general/formPages/GithubAuthPage.tsx      | 188 ++++++++++++++----
 1 file changed, 152 insertions(+), 36 deletions(-)

diff --git a/app/register/general/formPages/GithubAuthPage.tsx b/app/register/general/formPages/GithubAuthPage.tsx
index a7a23944..fb5159c9 100644
--- a/app/register/general/formPages/GithubAuthPage.tsx
+++ b/app/register/general/formPages/GithubAuthPage.tsx
@@ -8,9 +8,17 @@ const GithubAuthPage = () => {
     };
 
     return (
-        <>
+        <Box
+            sx={{
+                position: "relative",
+                minHeight: "100vh",
+                width: "100%",
+                overflowY: "auto"
+            }}
+        >
             <Box
                 sx={{
+                    position: "fixed",
                     display: "flex",
                     width: "100vw",
                     height: "100vh",
@@ -18,57 +26,165 @@ const GithubAuthPage = () => {
                     backgroundSize: "cover",
                     backgroundRepeat: "no-repeat",
                     backgroundPosition: "center",
-                    transform: "scale(1.25)"
+                    transform: "scale(1.25)",
+                    zIndex: -1
                 }}
-            ></Box>
+            />
             <Box
                 sx={{
-                    position: "absolute",
-                    top: 0,
-                    left: 0,
-                    width: "100vw",
-                    height: "100vh",
+                    width: "100%",
+                    minHeight: "100vh",
                     display: "flex",
-                    justifyContent: "center",
+                    flexDirection: "column",
                     alignItems: "center",
-                    gap: 3
+                    textAlign: "center",
+                    pt: "80px",
+                    pb: { xs: "80px", md: "0px" },
+                    px: { xs: 2, sm: 3 }
                 }}
             >
+                <img
+                    src="/registration/hackastra-logo.png"
+                    alt="Hackastra Logo"
+                    style={{
+                        width: "auto",
+                        height: "80px",
+                        maxWidth: "100%",
+                        marginBottom: "20px",
+                        objectFit: "contain"
+                    }}
+                />
+                <Typography
+                    variant="h6"
+                    component="p"
+                    sx={{
+                        mb: 3,
+                        color: "white",
+                        opacity: 0.9,
+                        fontFamily: "Montserrat",
+                        paddingLeft: 6,
+                        paddingRight: 6
+                    }}
+                >
+                    Sign in with your GitHub account to get started
+                </Typography>
+
+                {/* Priority and final deadline boxes */}
                 <Box
                     sx={{
+                        width: {
+                            xs: "100%",
+                            sm: "80vw",
+                            md: "716px"
+                        },
+                        maxWidth: "716px",
                         display: "flex",
                         flexDirection: "column",
-                        alignItems: "center",
-                        justifyContent: "center",
-                        textAlign: "center",
-                        padding: "0 20px"
+                        gap: "24px",
+                        mb: "26px"
                     }}
                 >
-                    <img
-                        src="/registration/hackastra-logo.png"
-                        alt="Hackastra Logo"
-                        style={{
-                            width: "auto",
-                            height: "80px",
-                            maxWidth: "100%",
-                            marginBottom: "20px",
-                            objectFit: "contain"
+                    <Box
+                        sx={{
+                            minHeight: { xs: "auto", md: "103px" },
+                            borderRadius: "67px",
+                            px: { xs: 3, md: 4 },
+                            py: { xs: 2, md: 0 },
+                            display: "flex",
+                            flexDirection: "column",
+                            justifyContent: "center",
+                            alignItems: "center",
+                            background:
+                                "linear-gradient(90deg, rgba(163,21,214,0.6) 0%, rgba(253,171,96,0.6) 51.44%, rgba(163,21,214,0.6) 100%)"
                         }}
-                    />
-                    <Typography
-                        variant="h6"
-                        component="p"
+                    >
+                        <Typography
+                            sx={{
+                                fontFamily: "Montserrat",
+                                fontWeight: 700,
+                                fontSize: {
+                                    xs: "14px",
+                                    sm: "16px",
+                                    md: "20px"
+                                },
+                                lineHeight: "100%",
+                                textAlign: "center",
+                                mb: "12px",
+                                color: "white"
+                            }}
+                        >
+                            PRIORITY DEADLINE: Jan 4th, 2026
+                        </Typography>
+
+                        <Typography
+                            sx={{
+                                fontFamily: "Montserrat",
+                                fontWeight: 500,
+                                fontStyle: "italic",
+                                fontSize: { xs: "12px", md: "16px" },
+                                lineHeight: "100%",
+                                textAlign: "center",
+                                color: "white"
+                            }}
+                        >
+                            Those who register by this deadline will be entered
+                            in a raffle to win an{" "}
+                            <Box
+                                component="span"
+                                sx={{
+                                    fontWeight: 600,
+                                    fontStyle: "italic"
+                                }}
+                            >
+                                iPad
+                            </Box>
+                            !
+                        </Typography>
+                    </Box>
+
+                    <Box
                         sx={{
-                            mb: 3,
-                            color: "white",
-                            opacity: 0.9,
-                            fontFamily: "Montserrat",
-                            paddingLeft: 6,
-                            paddingRight: 6
+                            minHeight: {
+                                xs: "auto",
+                                md: "67px"
+                            },
+                            borderRadius: "67px",
+                            px: { xs: 3, md: 4 },
+                            py: { xs: 2, md: 0 },
+                            display: "flex",
+                            justifyContent: "center",
+                            alignItems: "center",
+                            backgroundColor: "rgba(64, 26, 121, 0.6)"
                         }}
                     >
-                        Sign in with your GitHub account to get started
-                    </Typography>
+                        <Typography
+                            sx={{
+                                fontFamily: "Montserrat",
+                                fontWeight: 700,
+                                fontSize: {
+                                    xs: "14px",
+                                    sm: "16px",
+                                    md: "20px"
+                                },
+                                lineHeight: "100%",
+                                textAlign: "center",
+                                color: "white"
+                            }}
+                        >
+                            FINAL DEADLINE: Jan 27th, 2026
+                        </Typography>
+                    </Box>
+                </Box>
+
+                <Box
+                    sx={{
+                        borderRadius: "999px",
+                        padding: "5px",
+                        background:
+                            "linear-gradient(90deg, #A315D6 0%, #FDAB60 51.44%, #A315D6 100%)",
+                        display: "inline-flex"
+                    }}
+                >
                     <Button
                         variant="contained"
                         size="large"
@@ -107,7 +223,7 @@ const GithubAuthPage = () => {
                     </Button>
                 </Box>
             </Box>
-        </>
+        </Box>
     );
 };
 

From ed42d5efde6956702d678e8bfed4363e97614bb7 Mon Sep 17 00:00:00 2001
From: gracetzeng <zengt.grace@gmail.com>
Date: Mon, 15 Dec 2025 00:55:07 -0600
Subject: [PATCH 2/3] change some paddings

---
 app/register/general/formPages/GithubAuthPage.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/app/register/general/formPages/GithubAuthPage.tsx b/app/register/general/formPages/GithubAuthPage.tsx
index fb5159c9..f7183cb8 100644
--- a/app/register/general/formPages/GithubAuthPage.tsx
+++ b/app/register/general/formPages/GithubAuthPage.tsx
@@ -20,7 +20,7 @@ const GithubAuthPage = () => {
                 sx={{
                     position: "fixed",
                     display: "flex",
-                    width: "100vw",
+                    width: "100%",
                     height: "100vh",
                     backgroundImage: `url("/registration/backgrounds/personal_info.svg")`,
                     backgroundSize: "cover",
@@ -38,8 +38,8 @@ const GithubAuthPage = () => {
                     flexDirection: "column",
                     alignItems: "center",
                     textAlign: "center",
-                    pt: "80px",
-                    pb: { xs: "80px", md: "0px" },
+                    pt: "120px",
+                    pb: { xs: 4, md: 0 },
                     px: { xs: 2, sm: 3 }
                 }}
             >
@@ -121,7 +121,7 @@ const GithubAuthPage = () => {
                                 fontFamily: "Montserrat",
                                 fontWeight: 500,
                                 fontStyle: "italic",
-                                fontSize: { xs: "12px", md: "16px" },
+                                fontSize: { xs: "14px", md: "16px" },
                                 lineHeight: "100%",
                                 textAlign: "center",
                                 color: "white"

From 784f5f56504fc9ffea972b18c9db81116215d9dc Mon Sep 17 00:00:00 2001
From: miguelaenlle <bot.developer3@gmail.com>
Date: Mon, 15 Dec 2025 21:15:07 -0600
Subject: [PATCH 3/3] Center auth page vertically

---
 app/register/general/formPages/GithubAuthPage.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/app/register/general/formPages/GithubAuthPage.tsx b/app/register/general/formPages/GithubAuthPage.tsx
index f7183cb8..1889d618 100644
--- a/app/register/general/formPages/GithubAuthPage.tsx
+++ b/app/register/general/formPages/GithubAuthPage.tsx
@@ -37,9 +37,10 @@ const GithubAuthPage = () => {
                     display: "flex",
                     flexDirection: "column",
                     alignItems: "center",
+                    justifyContent: "center",
                     textAlign: "center",
                     pt: "120px",
-                    pb: { xs: 4, md: 0 },
+                    pb: { xs: 4, md: "120px" },
                     px: { xs: 2, sm: 3 }
                 }}
             >