From 7db723af69b1df6affca5837a2fc1d328034eb53 Mon Sep 17 00:00:00 2001
From: winbow13 <benjaminwu13@gmail.com>
Date: Thu, 25 Apr 2024 00:16:35 -0400
Subject: [PATCH] Made login buttons

Buttons do not go anywhere yet
---
 frontend/src/App.tsx                          |  12 ++--
 frontend/src/commons/images/reallycoolguy.jpg | Bin 0 -> 3258 bytes
 frontend/src/pages/Login/Login.module.css     |  59 ++++++++++++++++++
 frontend/src/pages/Login/Login.tsx            |  59 ++++++++++++++----
 4 files changed, 114 insertions(+), 16 deletions(-)
 create mode 100644 frontend/src/commons/images/reallycoolguy.jpg
 create mode 100644 frontend/src/pages/Login/Login.module.css

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 1c61745..2fbface 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -16,18 +16,22 @@ function App() {
   const programs = [CGSC, CPSC, ECON, HIST];
   const strPrograms = JSON.stringify(programs);
   localStorage.setItem("programList", strPrograms);
-
-
   
   return (
   <div>
     <Routes>
-      <Route path="/"             element={auth ? <Navigate to="/graduation"/> : <Navigate to="/login"/>}/> 
+      {/* <Route path="/"             element={auth ? <Navigate to="/graduation"/> : <Navigate to="/login"/>}/> 
       <Route path="/login"        element={auth ? <Navigate to="/graduation"/> : <Login/>}/> 
 
       <Route path="/graduation"   element={auth ? <Graduation/> : <Navigate to="/login"/>}/> 
       <Route path="/courses"      element={auth ? <Courses/> : <Navigate to="/login"/>}/> 
-      <Route path="/majors"       element={auth ? <Majors/> : <Navigate to="/login"/>}/> 
+      <Route path="/majors"       element={auth ? <Majors/> : <Navigate to="/login"/>}/>  */}
+      <Route path="/"             element={<Navigate to="/login"/>}/> 
+      <Route path="/login"        element={<Login />}/> 
+
+      <Route path="/graduation"   element={<Graduation/>}/> 
+      <Route path="/courses"      element={<Courses/>}/> 
+      <Route path="/majors"       element={<Majors/>}/>
     </Routes>
   </div>
   );
diff --git a/frontend/src/commons/images/reallycoolguy.jpg b/frontend/src/commons/images/reallycoolguy.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..dabaf1d0b91bd18d69a2d55af4d820b77b923d85
GIT binary patch
literal 3258
zcmbW1dpy(MAICqlF`G#<WSLnmp-kIsW-BRWZc&6JL`;U6<}Rs7v?O9=bdy{nzAJM1
zkz7jZi*iY%i(BN9$t@**^ZorEzu)8W`|J1nz0c!)9_O6*>%1S2=XsxV*50js1~ytT
zEExbu0suhb2CTgY_5spTQcx*LX($v5gGs{?3bF_p83bA$C8waeSq-bY8H2%T>TBcF
z^)xUT9jdM#fk-Bk)wF5GMx<T(24vED5)cdqL&zYMWo4B~TQFNl|Ff;F0-cRTxTBr{
zOq^pND~!nvW`#uR<Msvw;JB=lz9GRlE;E?P4P$!i<BoDdacs{>Tp%X|=fw$%#BsRd
zXb_j<9qPrzh4`|9aY4SE5DtzNi1Q4L#QAWzY<;-cqVYr`nNB1U>39P=o<<c9DRd(e
zog|(R>10DXSsWqJ=p-VYN}^K<bUcNQC$7g0$#j}{%etN@UZxq+DI_{ktix03RI!LA
z&O@eC=|)EDBI3F}dhIEIlm;RIZ!kz5kU)aKNYGj{pe8<hNzh*g{L?@ZV2Gp?R2l}C
z5eq6d0umrFSONl;l!QRU>NDav06|L1Zz1lLLfLsj)lVsq&Zpjy)-V+|DB8afX&Rj1
z#=_uAo0QR;wYF;O=x!rZ45>ym`o8^U408)htHTbCPDh-Nx_EgreNOta{DMP5!@?sX
zqv9^aUrb26#JiT3&d<oao+Ze=n|Ck2ps?uv!$;*6k1MOHYZ{xHpFMAR(fYEptGnlI
z@4LSK!J*-i(Jy1;Unge2&&@9^F8x^kxy}Uw!2iG!_x}L<4=$vbO9BD`L!j$iAc=6X
zgOL!)Ekr5#y>?K~Qz&)Pd1(dH)H}ikn1+G9Nbv;s4O~f+Jg7Chj`kPXe+L%(f06wQ
z?B87d00ImW7Y~dCOn{}II=ScII;CpQkE6&Pa4WXFVeJ!DF9yirCu(xqvb=J$&3N(<
zZ+X(;$NMrj*^Jo!X9s81rA)HDoiHZIXsb#Y>f&f~&i8xu`KNw5&=V^xZ`pQ`8X(sy
z_d^6B0q7W!*8p#MeC6<40nBLzr5A^2Fdh3oyzG=5Kg(q6FIm<N2WQ$#(P+jUw7dPd
zMSJ6Z-f+n-wp2Zt@ReKQ_bKKGC~-H>IHsbvU;urhMfG4*`HWDOQZ=EIdp(w?b6Y~}
zh+C)$o4kmVcJ&On=;@z%i$+6FOuBcx{WcMK@8<CvmxC+=PX~%qOdeN>K1z9>Un7~9
z^oPsm0d_Q$YmgNFRAZJhwCc-(f9oiXEb;l)_O)1jH1F~3E1{<=VS-_~yKX{d4KRdp
z)wcg`t6#le$;!3SF+a5I#eZ7*u%q#yo_V`dn6c6C?b_t5a#l5l98T@>WasWQ7ZrY9
zRa7p|aZ{>F%KvDAt(X=-FW}36+?AEjlGC%ApW*dYiQ2Q(nI)e!7j`?Bd<eOj*yEY)
z@~CNkI%?9g`snSH!s&}9oppa3{M77UXS*n4J(=i(3bem4IE?f5xK&G#tH%!SJ~M0r
zZQ%H8Eu@<oUd=GWkd}tKkErIl9`uh&J4Q2S45*ldSNOv-dz8ELx*qNBbVA%oA3>(D
z{85c`-oz7B7w5>Ti>X0-Bu1^<=|d>S(@fzINbJxTF*|ChAMrg~$CfG|)})O)pI?Tz
zb(a4+{lQ+x4mKx8oB!t5dsVJ4n)BfOvZ--qSAZF<F+($WzG20W13TslEFo(xrVMA&
zQlNj79(CIqcKC?!Yrortjn5^_8k67yJVL4xvasa<e6FBo7J|Ok;g}p$cck^jZ>Zwk
zI}w%6g0G%+$Ly<{0_-=OnR9L5&|Cch{h%b=E;1RMVqRf88tV}oQ(-^!(>Fj6RGcF1
zx=0yYdZIb2+55y{b49tu+4#Fq%;Hckq1rxEw|DYT$s$S@LrUQq7dPX*lsX5-&Z}U0
z?=?jZK`Voed-y|MU%;cBrUH{2k)uCLsH6<nO*<d20k@*w3jD^$N@je{fJF?E>ksts
z99p1Kq?ob>NCgEMSFg;ur@4oVPFh>5N$d-|eX%YqHQ_aXl|Rn^q<Yox*dMvPZI|HQ
zx%*IwyproXtr6!=dxsai*`tPEIo`DcU+b<vqxXPaP@QP;l|xH)jb+U8?G2J|u=<s*
zXbMQ?s42Z#A^N$0^^dW8oa(Mn>8|K9NXAGM@RDJ?>Qj1lPd2mMH;8+;ptEXnr@@=1
zz2q$Z8X#@8>ylP0>xSH?liDU_^;UISyp|Bn{YatFAtShPg6FiGw{K}J0@PaK=9u}*
z%<FLcmA$ET+p*#J4fRZAzbi$TKd_263^5`VUranvI=u#vNbz7U8hWr7{Ii!SZO2w>
zb-Xlg;B?zg9Tk^CE3`iqZq}aTUDCe8M)YC&L33awNxIuJ_1)t$ExXRpV<?w~j1eCq
z-XAQ#tP>c!_4CfmhBaXG0{Ftjw&WXLiZe;`%Xvv^`upFt>{9L1m>nvW4`fhSS~A$8
zT-KrSD13ev=jyh8LL3;qR6K9zo;ob4V7F)8F$v8!Qj@N)HIxX;l}=qSM^FQ^0RgSY
zttyTx8J5Y=EmfWcqZA`@JYsjAcyh5!clKkdRst{0-ps_O4j_W#QxM1>=j7^l^W%Np
zTqm0xS>O3X#C_}<#`24mV)ZqkX^~!=l}=<?=+!w4-?Pff;qOQiqFbywu31;jn4YPK
zHE+D$8yHjDtKd{{FKnKoE*cfwuFN{{bmObqks|C(ekCMTLS5O(T`H>A5Z5i+FYLkG
z8Qs&NJ@=*5rQgq#V>mRv%QJbC2UPW8@cz4Z*xYQY1urgRIl-@bu#P_DX4>ifC~c~B
z>zu(k&~t`)nMQ>pu`N`S@E*~+1rDtiU$e!q#`boVP#W^K>oEH1<gr5qe|~G%vk6yx
zS(En0OmQIc{9o_c?y^hg7q)Q1u;gPbvtzDEu-X>0FaVy!i7NpJk7Bijafd{s^Hd~M
zM#kdi{RtT4^w`R_H*d)eITMCC+_N#YF%@$&&1y+lTwRZT$qFSbqd(xl8<;%hWKIY^
zqa8G++|c5J53>C;)3*CAe?Kbd;J#z9d^7Utqy*8lt89AXL?1Kh8#Kk-?wFIygLw~z
z)JhPE;NNy?>NN4%L}<#_jKcH$FLMU1C!pUI{k;#FUmH6eeczz_mlLI=Cg~mNX-Yxy
zle2qW!d?iAEv77uJCsZMDK1mVR~v|FLoh_bDeEu|<K$8F$|LuL<0b<u`?DKsUa(0!
zkL5FU>94A$(NG|k5V2I|Cwg1Q8RE$G`@MZ>r+qw2&cP$-)sKylGw$(_Zp995g|7Qk
z{&r@H!gd8aGay34Kv$!nGo6qgkjgm7D3-&Hcc>9Y9IWMQlIA^AoiqA6eh6sO^Zr-$
zNmF~i{vP=5|7Y~~GWThW|0%E;X*4r#mC_WEHu%eSIyC>`^RbMi-(B<b4|H4cXj1nV
z@&gxZSopJw^wer)k$-vTf^+BzB_l1K`!9#oTZOAtr6}9iWr9`bld%@hs$>Zon6Q;K
z;7*y>>wxLAj|Q(eOaq<{UTP0)ocI0|be0*hUN?5vnkgkDmPYq!Z|5g6_G<KM^F|g-
zHu<^4CcbIQGa0y&JiNdWJ&Vd0-gfpg#LG5%v$v=|JPP}^y}81TK762CtK!y-h6iE1
zNvKd{pTM>%zEp(Yae^=~>)t1-Y_5zliQnD6cr(C;JA*!n<8NU=v3H8wR<;kS++cQ2
zj3@^vR{MN@mHcYuQP*Ugdv>8EmS1o}x^dZ8o~#P>FyZ^#yCK^%4~sw6_)A_Y(moHX
zHtCUs`}d7aL_G8IbKmh+BW+rj^z_1@ha&=5()1RLkyX?c1`d4m{vO?F5tX)z?ZH;;
zULL+=YwNGQ)iJs8Q%lrk)4Zm@mTH~Il`Dz~Odq8l>IRE8h3f0`+gh;=RT~!E6=VaX
zS2r=$_E_ZdAePvDQZ2^Ynl@13I{A{3{LN@|DtF^Z>a>lh-$(nbz4S_9ZW=gm+vZ(J
z*T-eK&VGUmHm4*qF09l&G?pt|B-@#WsgS4frY}e>-~x(uv+^~wBrG*<+0IO2M;~%S
pcGdYb*D3a5TWI=7yoXNic|m`EO%40ydw%;y?9R|!o(^)Y@9)a}yCwht

literal 0
HcmV?d00001

diff --git a/frontend/src/pages/Login/Login.module.css b/frontend/src/pages/Login/Login.module.css
new file mode 100644
index 0000000..18d1c45
--- /dev/null
+++ b/frontend/src/pages/Login/Login.module.css
@@ -0,0 +1,59 @@
+.centerDiv {
+    min-height: 100vh;
+    text-align: center;
+    max-width: 1000px;
+    margin-left: auto;
+    margin-right: auto;
+    justify-content: center;
+    align-items: center;
+    padding: 1rem;
+    display: flex;
+    flex-wrap: wrap;
+}
+
+.featureListStyle {
+    list-style: none;
+    display: flex;
+    flex-direction: column;
+    gap: .5rem;
+    margin: 0;
+    padding: 0;
+}
+
+.featureItemStyle {
+    font-weight: 500;
+    transition: transform .3s;
+    cursor: default;
+    text-align: left;
+}
+
+.featureItemStyle:hover {
+    transform: translateX(7px);
+}
+
+.loginButtons {
+    display: flex;
+    margin-left: auto;
+    margin-right: auto;
+    margin-top: 3px;
+    justify-content: start;
+    justify-content: center;
+}
+
+.btn {
+    padding: 8px 24px;
+    border-radius: 10px;
+    font-weight: 500;
+    color: black;
+    background-color: lightblue;
+    transition:
+    transform 0.3s,
+    filter 0.3s;
+    margin-top: 8px;
+}
+
+.btn:hover {
+    text-decoration: none;
+    transform: translateY(-5px);
+    filter: brightness(90%);
+  }
\ No newline at end of file
diff --git a/frontend/src/pages/Login/Login.tsx b/frontend/src/pages/Login/Login.tsx
index c4dce4d..f8919d0 100644
--- a/frontend/src/pages/Login/Login.tsx
+++ b/frontend/src/pages/Login/Login.tsx
@@ -1,27 +1,62 @@
-
 import React, { useState } from "react";
-import navStyles from "./../../navbar/NavBar.module.css";
-import logo from "./../../commons/images/ma_logo.png";
+import { Link } from "react-router-dom";
+import styles from "./Login.module.css";
+
+import navStyles from "../../navbar/NavBar.module.css";
+import logo from "../../commons/images/ma_logo.png";
+import loginPageImage from "../../commons/images/reallycoolguy.jpg";
 
 function NavBar() {
-  return(
+  return (
     <div className={navStyles.NavBar}>
       <div style={{ marginLeft: "20px" }}>
-        <img src={logo} alt="" style={{ width: "150px", height: "auto", marginRight: "10px" }}/>
+        <img
+          src={logo}
+          alt=""
+          style={{ width: "150px", height: "auto", marginRight: "10px" }}
+        />
       </div>
+      {/* <PageLinks />
+      <MeDropdown /> */}
     </div>
   );
 }
 
-
-function Login(){
-  return(
+function Login() {
+  return (
     <div>
-      <NavBar/>
-
+      <NavBar />
+      <div className={styles.centerDiv}>
+        <div style={{width: "450px"}}>
+          <h1>The best place to explore and plan your major at Yale</h1>
+          <ul className={styles.featureListStyle}>
+            <li className={styles.featureItemStyle}>Explore all 80+ majors at Yale</li>
+            <li className={styles.featureItemStyle}>Check all your distributional requirements are satisfied</li>
+            <li className={styles.featureItemStyle}>Plan out all your courses in the traditional four-year plan</li>
+            <li className={styles.featureItemStyle}>Look at this really cool guy to the right</li>
+          </ul>
+          <div className={styles.loginButtons}>
+            {/* <a
+              href={`${API_ENDPOINT}/api/auth/cas?redirect=${window.location.origin}/catalog`}
+              className={clsx(styles.btn, styles.login, 'me-2')}
+            >
+              Login with CAS
+            </a> */}
+            <Link to="/graduation" className={styles.btn} style={{marginRight: "8px"}}>
+              Login with CAS
+            </Link>
+            <Link to="/courses" className={styles.btn} style={{marginRight: "8px"}}>
+              About Us
+            </Link>
+            <Link to="/majors" className={styles.btn}>
+              Guest
+            </Link>
+          </div>
+        </div>
+        <img alt="Landing page" src={loginPageImage} width="450"/>
+      </div>
     </div>
-  )
+  );
 }
 
 export default Login;
-