nav scrolls, main fonts corrected, border gone, and text aligned - Jet

CNAME

@@ -0,0 +1 @@
+hackmerced.com

package.json

@@ -1,5 +1,6 @@
 {
   "name": "hackmercedviii",
+  "homepage": "https://hackmerced.com",
   "version": "0.1.0",
   "private": true,
   "dependencies": {
@@ -18,7 +19,9 @@
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",
-    "eject": "react-scripts eject"
+    "eject": "react-scripts eject",
+    "predeploy": "npm run build",
+    "deploy": "gh-pages -d build"
   },
   "eslintConfig": {
     "extends": [
@@ -37,5 +40,8 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "gh-pages": "^5.0.0"
   }
 }

src/App.css

@@ -2,38 +2,58 @@
 @import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;700&family=Unbounded:wght@300;400&display=swap');
 
 
-
+.html{
+  overflow-y: hidden;
+}
 .App {
   text-align: center;
   min-height: 100vh;
+  max-width:fit-content;
 }
 
 .App-link {
   color: #61dafb;
 }
+
+a {
+  color: #FF7676;
+}
+
 .Tracks{
   background: radial-gradient(50% 50% at 50% 50%, #D801DC 0%, #FF7676 100%);
   background-blend-mode: overlay;
   mix-blend-mode: normal;
   backdrop-filter: blur(6px);
-
   color:white;
-  height: 54vh;
-  width: 100vw;
-  position: relative;
+  height: 75vh;
+  max-width: 100vw;
+  align-items: center;
+  text-align: center;
+
+}
+.Tracks-title{
+  margin-top: 0;
+  font-family: 'Unbounded';
+  font-weight: normal;
+  margin-bottom: 2em;
+  padding-top: 3em;
+  text-align: left;
+  position: absolute;
+  padding-left: 10vw;
 }
 .Tracks-Flex{
   justify-content: center;
   display: flex;
-  text-align: center;
+
 }
 .Track-Card{
   background: linear-gradient(170.14deg, rgba(37, 18, 18) 1.13%, rgba(143, 26, 26) 104.83%);
   height: 35vh;
   width: 20vw;
   padding:2em;
-  padding-top: 2vh;
+  padding-top: 5vh;
   margin:1em;
+  margin-top: 20vh;
   opacity: .7;
 }
 .Track-Name{
@@ -99,6 +119,9 @@
 .FAQ-summary .MuiAccordionSummary-expandIconWrapper.Mui-expanded {
   transform: rotate(90deg);
 }
+.accordion-link{
+  color: white; 
+}
 
 .accordion-title{
   font-family: 'DM Sans';
@@ -135,8 +158,9 @@
   justify-content: space-between;
   align-content: center;
   padding-bottom:3rem;
-  background: linear-gradient(107.08deg, rgba(60, 26, 69, 0.7) 2.64%, rgba(67, 25, 92, 0.7) 135.38%);
+  background: linear-gradient(107.08deg, #3C1A45, #43195C);
   /* background-color: red; */
+  z-index: 2;
 }
 .nav-items{
   display: flex;
@@ -145,7 +169,15 @@
   right: 1rem;
   margin-top: 0.8rem;
 }
+
+.nav-items .button, .nav-items .registerButton{
+  font-family: 'DM Sans';
+  font-weight: bold;
+  font-size: 1em;
+}
+
 .nav-items > li{
+  min-width: 1.5rem;
   margin-right: 3rem;
   list-style-type: none;
 }
@@ -182,36 +214,139 @@
 
 .MainPage{
   background-color: #B61255;
+  background: radial-gradient(89.01% 89.01% at 72.01% 35.06%, #D83F0E 0%, #AD066A 100%) /* warning: gradient uses a rotation that is not supported by CSS and may not behave as expected */;
+  background-blend-mode: overlay;
+  mix-blend-mode: normal;
   position:relative;
   display: flex;
   width: 100%;
-  height: 60vh;
+  height: 80vh;
   font-size: calc(1em + 2vmin);
+  font-family: 'unbounded';
+
+  background: radial-gradient(89.01% 89.01% at 72.01% 35.06%, #D83F0E 0%, #AD066A 100%) /* warning: gradient uses a rotation that is not supported by CSS and may not behave as expected */;
+  background-blend-mode: overlay;
+  mix-blend-mode: normal;
 }
 .Main-text{
   position: absolute;
+  text-align: left;
   left:10rem;
   top:10rem;
+  filter: drop-shadow(0px 0px 40px #FF5E54);
+  z-index: 3;
+}
+.Main-video{
+  min-width: 100vw;
+  max-height: 100vh;
+  object-fit: cover;
+  overflow-y: hidden;
+}
+.Main-video{
+  min-width: 100vw;
+  max-height: 100vh;
+  object-fit: cover;
+  overflow-y: hidden;
 }
 .Main-title{
   color:#FFFFFF;
 }
 .Main-subtitle{
   color:#FFFFFF;
 }
-.registerButton2{
+.Main-subtitle2{
+  color:#FFFFFF;
+  font-weight: 500;
+  font-size: 0.6em;
+}
+.Main-registerButton2{
   background-color: #FFFFFF;
   border: 0.18rem solid black;
   border-radius: 100px;
+  font-family: 'unbounded';
 
   width: 15rem;
   height:2rem;
   transition-duration: .4s;
+  border: none;
 }
 .registerButton2:hover{
   background-color: #AD0624;
   border: 0.18rem solid white;
   color: #FFFFFF;
   cursor: pointer;
   transform: translate(0.1rem, -0.1rem);
-}
+  border: none;
+}
+
+/*MOBILE VIEWPORTS*/
+@media screen and (min-width: 300px) and (max-width: 880px) {
+  .MainPage{
+    overflow-y: hidden;
+    display: block;
+  }
+  .Main-video{
+    padding-left: 0;
+    position:sticky;
+    left:0;
+    z-index: 1;
+    overflow: hidden;
+  }
+  .Main-video:-webkit-scrollbar {
+    display: none;
+
+  }
+  .Main-text{
+    left:auto;
+    padding-left: 1em;
+    font-size: smaller;
+    z-index: 3;
+  }
+  .nav-items{
+    left: 0;
+  }
+  .nav-items > li{
+    margin-right: 1.5em;
+  }
+  .Tracks-Flex{
+    display: inline-block;
+
+  }
+  .Track-Card{
+    width: auto;
+    padding-top: 0;
+    margin-top: 0;
+  }
+  .Tracks{
+    height: auto;
+    margin-top: 0;
+    padding-top: 0;
+    z-index: 3;
+    position: relative;
+  }
+  .Tracks-title{
+    text-align: left;
+    padding-left:1.5em;
+    position:initial;
+  }
+  .FAQ-accordion{
+    position: relative;
+    flex-direction: column;
+  }
+  .MuiGrid2-root.FAQ-grid{
+    display: block;
+    columns: 1;
+    gap: 0rem;
+
+  }
+  .FAQ-accordion{
+    width: 80vw;
+  }
+  .FAQ{
+    position: relative;
+    z-index: 3;
+    text-align: left;
+  }
+
+
+}

src/Components/FAQ.js

@@ -14,6 +14,10 @@ const FAQAccordion = (props) => {
       <AccordionDetails>
         <p className="accordion-description">
           {props.description}
+
+        <a className="accordion-link" href={props.link}>
+          {props.link}
+        </a>
         </p>
       </AccordionDetails>
     </Accordion>
@@ -22,7 +26,7 @@ const FAQAccordion = (props) => {
 
 function FAQ() {
   return (
-    <div className="FAQ">
+    <div className="FAQ" id="faq">
       <div className="FAQ-container">
         <h2 className="title">frequently asked questions</h2>
         <Grid className="FAQ-grid" container spacing={2} columns={{ xs: 12 }}>
@@ -51,12 +55,24 @@ function FAQ() {
             <FAQAccordion title='Who can attend?' description='All students are eligible to participate. You do not need to attend UC Merced.'/>
           </Grid>
           <Grid xs={6}>
-            <FAQAccordion title='Can I apply to judge or mentor?' description='We will be opening mentor applications in the near future for interested parties. If you would like to judge a track, please consider sponsoring us by contacting Intiser Aziz at [email protected].'/>
+            <FAQAccordion title='Where can I sleep?' description='HackMerced will have a “quiet room” where you can sleep, relax, or enjoy some quiet. We recommend that you bring your own sleeping bag. If you are local to Merced, you of course are not obligated to stay on campus for the duration of the event.'/>
           </Grid>
           <Grid xs={6}>
-            <FAQAccordion title='I have more questions!' description='Please join the HackMerced Community Discord server! If you have personal questions, feel free to open a ticket with us there.'/>
+            <FAQAccordion title='Where can I park?' description={<>'For a parking map resource, please see {<a href = "https://www.google.com/maps/d/u/0/edit?mid=1WERa2Y1r-rVHjKGyWQaXwaQ7C9iN7JU&usp=sharing">here</a>}. Parking on campus at UC Merced is free on weekends. On Friday, parking is free after 6 PM in the North Bowl, Scholars and Bellevue Lot - Green Zone lots. Parking is free after 8 PM in the Le Grand Lot, Library Lots 1 and 2 and Bellevue Lot - Gold Zone lots. Note that parking in the University Lot, Calaveras Lot, H Zones and specially marked spaces are prohibited at all times.'</>}/>
+          </Grid>
+          <Grid xs={6}>
+            <FAQAccordion title='Can I participate if I’m in high school?' description='Yes! However, if you are under the age of 18 you must sign the waiver in our registration form with a parent or guardian. Additionally, you are not permitted to sleep in campus buildings overnight (we advise leaving and returning to campus during the day).'/>
+          </Grid>
+          <Grid xs={6}>
+            <FAQAccordion title='How do I win free swag?' description='This year, HackMerced is proud to present HackerPass, an RFID-based attendance tracking system. When you participate in workshops or activities, simply scan the badge you obtain at check-in to earn points which can be redeemed for swag.'/>
+          </Grid>
+          <Grid xs={6}>
+            <FAQAccordion title='Can I apply to judge or mentor?' description={<>If you are interested in mentoring, please apply using {<a href="https://forms.gle/JbsZTo9VYRxuRrJQA">this form</a>}. If you would like to judge a track, please consider sponsoring us by contacting Intiser Aziz at [email protected].</>}/>
+          </Grid>
+          <Grid xs={6}>
+          <FAQAccordion title='I have more questions!' description='Please join the HackMerced Community Discord server! If you have personal questions, feel free to open a ticket with us there. Please join our Discord at ' link='https://discord.gg/E5GsRt3jPs'>
+          </FAQAccordion>
           </Grid>
-
         </Grid>
       </div>
     </div>

src/Components/MainPage.js

@@ -1,10 +1,22 @@
+import Video from '../Assets/landing.mp4';
 function MainPage() {
     return (
       <div className="MainPage">
+         <video className='Main-video'
+              autoPlay={true}
+              loop={true}
+              muted={true}
+              playsInline=""
+              src={Video}/>
+
             <div className="Main-text">
                 <h1 className="Main-title">hackmerced viii</h1>
                 <p className="Main-subtitle">march 3-5 2023 @ uc merced</p>
-                <button className="registerButton2">REGISTER NOW</button>
+                <p className="Main-sub2">Join us for the largest hackathon in the San Joaquin Valley.</p>
+                <a href="https://forms.gle/pmMz4zeeEsMD3Pc1A">
+                  <button className="registerButton2">REGISTER NOW</button>
+                </a>
+
             </div>
       </div>
     );

src/Components/NavBar.js

@@ -2,9 +2,11 @@ function NavBar() {
     return (
       <div className="NavBar">
         <ul className="nav-items">
-          <li><button className="button">tracks</button></li>
-          <li><button className="button">faq</button></li>
-          <li><button className="registerButton">register</button></li>
+          {/* <li><button className="nav-button">tracks</button></li> */}
+          <li><a className="nav-button" href="#tracks">tracks</a></li>
+          {/* <li><button className="nav-button">faq</button></li> */}
+          <li><a className="nav-button" href="#faq">faq</a></li>
+          <li><button className="nav-registerButton">register</button></li>
         </ul>
 
       </div>

src/Components/Tracks.js

@@ -2,28 +2,28 @@ import { Card } from "@mui/material";
 import Support from '../Assets/support_1.svg'
 function Tracks() {
     return (
-      <div className="Tracks">
+      <div className="Tracks" id="tracks">
            <h1 style={{marginTop: '0px'}}>Tracks</h1>
            <div className="Tracks-Flex">
             <Card style={{borderRadius: '30px'}} className='Track-Card'>
               <img className='Track-Logo' src={Support} alt="Support logo"/>
               <h1 className="Track-Name">Coming soon</h1>
                 <div className='Track-Text'>
-                  Stay tuned!
+                Stay tuned to learn more about our prize tracks for this year.
                 </div>
               </Card>
               <Card style={{borderRadius: '30px'}} className='Track-Card'>
               <img className='Track-Logo' src={Support} alt="Support logo"/>
               <h1 className="Track-Name">Coming soon</h1>
                 <div className='Track-Text'>
-                Stay Tuned!
+                Stay tuned to learn more about our prize tracks for this year.
                 </div>
               </Card>
               <Card style={{borderRadius: '30px'}} className='Track-Card'>
               <img className='Track-Logo' src={Support} alt="Support logo"/>
               <h1 className="Track-Name">Coming soon</h1>
                 <div className='Track-Text'>
-                Stay Tuned!
+                Stay tuned to learn more about our prize tracks for this year.
                 </div>
               </Card>
            </div>