Merge pull request #65 from NUWildHacks/website-mlh-and-content-updates

Website MLH and content updates
NUWildHacks · Jan 19, 2025 · b78330f · b78330f
2 parents accf122 + f2a90b4
commit b78330f
Show file tree

Hide file tree

Showing 16 changed files with 177 additions and 66 deletions.
diff --git a/index.html b/index.html
@@ -6,6 +6,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Sour+Gummy:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet" type="text/css" />
     <title>Wildhacks 2025</title>
+    <a id="mlh-trust-badge" style="display:block;max-width:80px;min-width:50px;position:fixed;left:clamp(25px, 5vw, 100px);top:0;width:10%;z-index:10000" href="https://mlh.io/na?utm_source=na-hackathon&utm_medium=TrustBadge&utm_campaign=2025-season&utm_content=black" target="_blank"><img src="https://s3.amazonaws.com/logged-assets/trust-badge/2025/mlh-trust-badge-2025-black.svg" alt="Major League Hacking 2025 Hackathon Season" style="width:100%"></a>
   </head>
   <body>
     <div id="root"></div>

diff --git a/src/App.tsx b/src/App.tsx
@@ -14,12 +14,11 @@ export const App = () => {
   return (
     <MainWrapper>
       <Navigation />
-
       <div id="landing">
         <Splash />
       </div>
 
-      <WaveVector color={colors.dark_green} waviness={0} />
+      <WaveVector color={colors.dark_green} waviness={2} />
       <div id="about">
         <AboutUs />
       </div>

diff --git a/src/assets/sponsors/stand-out-stickers.svg b/src/assets/sponsors/stand-out-stickers.svg
diff --git a/src/components/EmailList/EmailList.scss b/src/components/EmailList/EmailList.scss
@@ -5,7 +5,17 @@
   display: flex;
   flex-direction: row;
 
-  #email_list__button {
+  .splash__button_container {
+    display: flex;
+    gap: 1rem;
+    flex-direction: column;
+
+    @include breakpoints.xs {
+      flex-direction: row;
+    }
+  }
+
+  .splash__button {
     background-color: white;
     border-radius: clamp(20px, 24px, 2rem);
     border-width: 5px;
@@ -14,15 +24,15 @@
     font-family: "Sour Gummy", sans-serif;
     font-optical-sizing: auto;
     font-weight: 900;
-    font-size: 1rem;
+    font-size: 1.2rem;
     box-shadow: 0px 8px 0px 0px rgba(77, 115, 138, 0.15);
 
-    @include breakpoints.sm {
+    @include breakpoints.xs {
       font-size: 1.25rem;
     }
 
-    @include breakpoints.xs {
-      font-size: 1.2rem;
+    @include breakpoints.sm {
+      font-size: 1.3rem;
     }
 
     &:hover {
@@ -33,7 +43,26 @@
 
     &:active {
       transform: translateY(5px);
-      box-shadow: 0px 5px 0px 0px rgba(67, 88, 93, 0.15);
+    }
+  }
+
+  #button__email_list {
+    border-color: #4a71cf;
+    color: #4a71cf;
+
+    &:hover {
+      border-color: #85abdf;
+      color: #85abdf;
+    }
+  }
+
+  #button__register_now {
+    border-color: #f3735d;
+    color: #f3735d;
+
+    &:hover {
+      border-color: #f8ab9e;
+      color: #f8ab9e;
     }
   }
 }

diff --git a/src/components/EmailList/EmailList.tsx b/src/components/EmailList/EmailList.tsx
@@ -2,10 +2,12 @@ import { Modal, TextInput } from "@mantine/core";
 import { useForm } from "@mantine/form";
 import { useDisclosure } from "@mantine/hooks";
 
+import SplashScreenButton from "./SplashScreenButton";
+
+import React from "react";
 import axios from "axios";
 
 import "./EmailList.scss";
-import React from "react";
 
 interface IEmailList {}
 
@@ -104,9 +106,20 @@ export const EmailList: React.FC<IEmailList> = () => {
           </Modal.Body>
         </Modal.Content>
       </Modal.Root>
-      <button id="email_list__button" onClick={open}>
-        Join the mailing list!
-      </button>
+
+      <div className="splash__button_container">
+        <SplashScreenButton
+          id="button__register_now"
+          onClick={() => {
+            window.location.href = "https://dashboard.wildhacks.net/";
+          }}
+        >
+          Register now!
+        </SplashScreenButton>
+        <SplashScreenButton id="button__email_list" onClick={open}>
+          Join the mailing list!
+        </SplashScreenButton>
+      </div>
     </div>
   );
 };

diff --git a/src/components/EmailList/SplashScreenButton.tsx b/src/components/EmailList/SplashScreenButton.tsx
@@ -0,0 +1,22 @@
+import "./EmailList.scss";
+import React from "react";
+
+interface ISplashScreenButton {
+  id: string;
+  children: React.ReactNode;
+  onClick: () => any;
+}
+
+export const SplashScreenButton: React.FC<ISplashScreenButton> = ({
+  id,
+  children,
+  onClick,
+}) => {
+  return (
+    <button className="splash__button" id={id} onClick={onClick}>
+      {children}
+    </button>
+  );
+};
+
+export default SplashScreenButton;
diff --git a/src/components/Footer/Footer.scss b/src/components/Footer/Footer.scss
@@ -24,13 +24,23 @@
   display: flex;
   justify-content: space-between;
   flex-direction: column;
-  gap: 0.5rem;
+  gap: 1rem;
   align-items: center;
-  padding-left: 2rem;
-  padding-right: 2rem;
+  padding-left: 1rem;
+  padding-right: 1rem;
+
+  div {
+    justify-content: center;
+  }
 
   @include breakpoints.sm {
     flex-direction: row;
+    :first-child {
+      justify-content: flex-start;
+    }
+    :last-child {
+      justify-content: flex-end;
+    }
   }
 
   .footer__flexbox {
@@ -41,9 +51,8 @@
     padding: 0.5rem;
     width: 100%;
     align-items: center;
-    justify-content: center;
 
-    @include breakpoints.sm {
+    @include breakpoints.xs {
       padding: 0;
       width: 33%;
     }
@@ -66,13 +75,26 @@
     }
   }
 
-  .footer__school_image {
+  .footer__code_of_conduct {
     display: flex;
+    flex-direction: column;
     align-items: center;
+    justify-content: center;
+    gap: 0;
 
-    @include breakpoints.sm {
-      justify-content: end;
+    #nu:hover {
+      color: #4e2a84;
+      transition: 250ms ease-in-out;
+    }
+    #mlh:hover {
+      color: rgb(232, 184, 60);
+      transition: 250ms ease-in-out;
     }
+  }
+
+  .footer__school_image {
+    display: flex;
+    align-items: center;
 
     img {
       width: 12rem;

diff --git a/src/components/Footer/Footer.tsx b/src/components/Footer/Footer.tsx
@@ -21,27 +21,42 @@ export const Footer: React.FC<IFooter> = () => {
           </div>
           <h2>WildHacks 2025</h2>
         </div>
-        <div>
-          <div className="footer__flexbox" id="icons__flexbox">
-            <a href="https://www.instagram.com/wildhacks/" rel="noreferrer">
-              <FontAwesomeIcon icon={faInstagram} size="2xl" />
-            </a>
-            <a
-              href="https://www.linkedin.com/company/wildhacks/"
-              rel="noreferrer"
-            >
-              <FontAwesomeIcon icon={faLinkedin} size="2xl" />
-            </a>
-            <a href="mailto:[email protected]">
-              <FontAwesomeIcon icon={faEnvelope} size="2xl" />
-            </a>
-          </div>
-        </div>
+
         <div className="footer__flexbox footer__school_image">
           <a href="https://www.northwestern.edu">
             <img src={nuLogo} alt="Northwestern University logo" />
           </a>
         </div>
+
+        <div className="footer__flexbox footer__code_of_conduct">
+          <a
+            id="nu"
+            href="https://www.northwestern.edu/communitystandards/student-handbook/student-handbook.pdf"
+          >
+            Northwestern University Code of Conduct
+          </a>
+          <a
+            id="mlh"
+            href="https://github.com/MLH/mlh-policies/blob/main/code-of-conduct.md"
+          >
+            Major League Hacking Code of Conduct
+          </a>
+        </div>
+
+        <div className="footer__flexbox" id="icons__flexbox">
+          <a href="https://www.instagram.com/wildhacks/" rel="noreferrer">
+            <FontAwesomeIcon icon={faInstagram} size="2xl" />
+          </a>
+          <a
+            href="https://www.linkedin.com/company/wildhacks/"
+            rel="noreferrer"
+          >
+            <FontAwesomeIcon icon={faLinkedin} size="2xl" />
+          </a>
+          <a href="mailto:[email protected]">
+            <FontAwesomeIcon icon={faEnvelope} size="2xl" />
+          </a>
+        </div>
       </div>
     </div>
   );

diff --git a/src/components/Navigation/Navigation.scss b/src/components/Navigation/Navigation.scss
@@ -11,16 +11,17 @@
   justify-content: space-between;
   align-items: start;
 
-  position: sticky;
+  position: relative;
   top: 0;
 
   @include breakpoints.sm {
     padding-right: 2rem;
   }
 
   .navigation__logo_wrapper {
-    width: 96px;
-    min-width: 96px;
+    margin-left: clamp(50px, 15vw, 150px);
+    width: clamp(72px, 8vw, 96px);
+    min-width: 72px;
 
     img {
       width: 100%;

diff --git a/src/components/Navigation/Navigation.tsx b/src/components/Navigation/Navigation.tsx
@@ -34,13 +34,15 @@ export const Navigation: React.FC<INavigation> = () => {
       <HamburgerMenu>
         <div className="navigation__bar_wrapper">
           <NavigationMotionDiv>
-            <button className="button-A">
-              <div className="button__inner_div">
-                <div className="button__bar"></div>
-                Dashboard
-                <div className="button__bar"></div>
-              </div>
-            </button>
+            <a href="https://dashboard.wildhacks.net">
+              <button className="button-A">
+                <div className="button__inner_div">
+                  <div className="button__bar"></div>
+                  Dashboard
+                  <div className="button__bar"></div>
+                </div>
+              </button>
+            </a>
           </NavigationMotionDiv>
 
           <NavigationMotionDiv>

diff --git a/src/components/Splash/Splash.scss b/src/components/Splash/Splash.scss
@@ -21,7 +21,7 @@
 
   position: relative;
 
-  padding: 1rem;
+  padding: 4rem;
 
   @include breakpoints.sm {
     padding: 0;

diff --git a/src/components/Splash/Splash.tsx b/src/components/Splash/Splash.tsx
@@ -40,7 +40,7 @@ export const Splash: React.FC<ISplash> = () => {
             scale: { type: "spring", visualDuration: 0.3, bounce: 0.8 },
           }}
         >
-          <span>April 4-6, 2025</span>
+          <span>April 5-6, 2025</span>
         </motion.div>
         <motion.div
           id="header__email_container"

diff --git a/src/components/Sponsors/Sponsors.scss b/src/components/Sponsors/Sponsors.scss
@@ -62,14 +62,15 @@
     flex-direction: row;
     flex-wrap: wrap;
 
-    justify-content: space-evenly;
+    justify-content: center;
     align-items: center;
 
     div {
-      height: 80px;
+      height: clamp(80px, 10vh, 250px);
+      max-width: 100vw;
 
       img {
-        height: 80%;
+        height: 85%;
       }
     }
   }

diff --git a/src/components/Sponsors/Sponsors.tsx b/src/components/Sponsors/Sponsors.tsx
@@ -3,6 +3,7 @@ import nucsLogo from "../../assets/sponsors/nucs.png";
 import garageLogo from "../../assets/sponsors/the-garage.png";
 import omnistackLogo from "../../assets/sponsors/omnistack.png";
 import googleLogo from "../../assets/sponsors/google.png";
+import stickersLogo from "../../assets/sponsors/stand-out-stickers.svg";
 
 import WaveVector from "../WaveVector/WaveVector";
 import { colors } from "../../shared/colors.ts";
@@ -45,6 +46,9 @@ export const Sponsors: React.FC<ISponsors> = () => {
             <div>
               <img src={googleLogo} />
             </div>
+            <div>
+              <img src={stickersLogo} />
+            </div>
           </div>
         </div>
       </div>

diff --git a/src/components/WaveVector/WaveVector.tsx b/src/components/WaveVector/WaveVector.tsx
@@ -49,8 +49,10 @@ export const WaveVector: React.FC<IWaveVector> = ({
         className={`${flip && "upside_down"}`}
         xmlns="http://www.w3.org/2000/svg"
         viewBox="0 0 1000 100"
+        width="100%"
+        height="100%"
       >
-        <rect x="0" y="0" width="1000" height="90" style={outerColor} />
+        <rect x="0" y="0" width="100%" height="100%" style={outerColor} />
         {waves[waviness]}
       </svg>
     </div>