Modified headers and logo positioning (#573)

* Modified headers and logo positioning * Fixed linting issues
HackRU · Aug 30, 2023 · 52094c7 · 52094c7
1 parent b2b1add
commit 52094c7
Show file tree

Hide file tree

Showing 9 changed files with 88 additions and 21 deletions.
diff --git a/public/tailwind-output.css b/public/tailwind-output.css
@@ -786,6 +786,11 @@ video {
   margin-bottom: 1.25rem;
 }
 
+.my-10 {
+  margin-top: 2.5rem;
+  margin-bottom: 2.5rem;
+}
+
 .mt-3 {
   margin-top: 0.75rem;
 }
@@ -846,6 +851,22 @@ video {
   margin-left: 1.5rem;
 }
 
+.mr-10 {
+  margin-right: 2.5rem;
+}
+
+.mr-4 {
+  margin-right: 1rem;
+}
+
+.ml-4 {
+  margin-left: 1rem;
+}
+
+.mt-20 {
+  margin-top: 5rem;
+}
+
 .block {
   display: block;
 }
@@ -916,6 +937,10 @@ video {
   height: auto;
 }
 
+.h-1 {
+  height: 0.25rem;
+}
+
 .min-h-\[600px\] {
   min-height: 600px;
 }
@@ -994,6 +1019,18 @@ video {
   width: 11rem;
 }
 
+.w-28 {
+  width: 7rem;
+}
+
+.w-1\/6 {
+  width: 16.666667%;
+}
+
+.w-10\/12 {
+  width: 83.333333%;
+}
+
 .max-w-lg {
   max-width: 32rem;
 }
@@ -1191,6 +1228,11 @@ video {
   background-color: rgb(241 225 146 / var(--tw-bg-opacity));
 }
 
+.bg-black {
+  --tw-bg-opacity: 1;
+  background-color: rgb(0 0 0 / var(--tw-bg-opacity));
+}
+
 .bg-gradient-to-b {
   background-image: linear-gradient(to bottom, var(--tw-gradient-stops));
 }
@@ -1337,6 +1379,14 @@ video {
   padding-left: 1rem;
 }
 
+.pb-12 {
+  padding-bottom: 3rem;
+}
+
+.pb-24 {
+  padding-bottom: 6rem;
+}
+
 .text-left {
   text-align: left;
 }

diff --git a/src/components/_Landing/Landing.tsx b/src/components/_Landing/Landing.tsx
@@ -9,6 +9,7 @@ import { randomizeAnimationDurations } from "./utilities";
 import Schedule from "./sections/schedule/Schedule";
 import Sponsors from "./sections/sponsors/Sponsors";
 import Sun from "./assets/sun/sun";
+import SectionTitle from "./global_components/SectionTitle";
 
 function LandingPage(props: any) {
 
@@ -22,10 +23,19 @@ function LandingPage(props: any) {
             className="w-full h-fit">
             <Sun />
             <Hero profile={props.profile} />
+            <SectionTitle title="ABOUT" />
             <About />
+
+            <SectionTitle title="SCHEDULE" />
             <Schedule />
+
+            <SectionTitle title="SPONSORS" />
             <Sponsors />
+
+            <SectionTitle title="FAQ" />
             <FAQ />
+
+            <SectionTitle title="FOOTER" />
             <Footer />
         </div>
     );

diff --git a/src/components/_Landing/global_components/SectionTitle.tsx b/src/components/_Landing/global_components/SectionTitle.tsx
@@ -0,0 +1,14 @@
+import React from "react";
+
+function SectionTitle(props: { title: string }) {
+    const { title } = props;
+    return (
+        <div className="flex w-full px-4 justify-center items-center my-10 z-50">
+            <div className="w-1/6 h-2 bg-text mr-4" />
+            <div className="HeaderText font-semibold text-7xl text-text">{title}</div>
+            <div className="w-1/6 h-2 bg-text ml-4" />
+        </div>
+    );
+}
+
+export default SectionTitle;
diff --git a/src/components/_Landing/sections/about/components/AboutContent.css b/src/components/_Landing/sections/about/components/AboutContent.css
@@ -7,7 +7,7 @@
 }
 
 .textStyle{
-  color: #d1e9ef;
+  color: #f1e192;
   font-size: 25px;
   font-family: "Titillium Web";
   text-align: center;

diff --git a/src/components/_Landing/sections/about/components/AboutContent.tsx b/src/components/_Landing/sections/about/components/AboutContent.tsx
@@ -13,7 +13,6 @@ import useAboutConfig from "../hooks/useConfigAbout";
 import "./AboutContent.css";
 import { defaults } from "../../../Default";
 
-
 const Introduction = (headerTextAlignment: string) => {
     switch (headerTextAlignment) {
         case "left":
@@ -178,12 +177,12 @@ function AboutContent() {
         return (
             <div className="grid sm-about:grid-cols-1 lg-about:grid-cols-2 xl-about:grid-cols-2 max-w-[120rem]">
                 {/* Header Text */}
-                <div className="glow basis-1 lg-about:col-span-2 flex HeaderText text-7xl text-text glow-subtitles font-semibold"
+                {/* <div className="glow basis-1 lg-about:col-span-2 flex HeaderText text-7xl text-text glow-subtitles font-semibold"
                     style={{
                         margin: "60px 100px 0px 100px"
                     }}>
                     About
-                </div>
+                </div> */}
 
                 {/* first row */}
                 <div className='sm-about:order-1 lg-about:order-1'
@@ -192,10 +191,10 @@ function AboutContent() {
                     }}>
                     <Card backgroundColor={theme.splitCard[0]}>
                         <div style={{}}>
-                            <h1 className="glow text-6xl text-text">
+                            <h1 className="glow text-6xl text-text font-bold">
                                 WHAT
                             </h1>
-                            <p className="textStyle">
+                            <p className="textStyle text-text">
                                 HackRU is a <b>24-hour hackathon</b> at Rutgers University. We welcome
                                 <b> hundreds of students</b> to join us in building <b>awesome tech projects.
                                     Industry experts</b> and <b>mentors</b> help foster an atmosphere of <b>learning </b>
@@ -229,7 +228,7 @@ function AboutContent() {
                     }}>
                     <Card backgroundColor={theme.splitCard[0]}>
                         <div style={{}}>
-                            <h1 className="glow text-6xl text-text">
+                            <h1 className="glow text-6xl text-text font-bold">
                                 TRACKS
                             </h1>
                             <p className="textStyle">
@@ -255,7 +254,7 @@ function AboutContent() {
                     }}>
                     <Card backgroundColor={theme.splitCard[0]}>
                         <div style={{}}>
-                            <h1 className="glow text-6xl text-text">
+                            <h1 className="glow text-6xl text-text font-bold">
                                 JOIN US!
                             </h1>
 

diff --git a/src/components/_Landing/sections/faq/FAQ.tsx b/src/components/_Landing/sections/faq/FAQ.tsx
@@ -11,8 +11,7 @@ function FAQ() {
             className="w-full flex h-fit
     relative overflow-hidden items-center
     flex-col justify-start min-h-[600px]">
-            <div className="w-full h-full max-w-7xl relative flex flex-col items-center pt-64 pb-[24rem]">
-                <div className="text-7xl text-text glow-subtitles font-semibold z-30">FAQs</div>
+            <div className="w-full h-full max-w-7xl relative flex flex-col items-center pb-[24rem]">
                 <QuestionContainer />
                 <img src={owl}
                     loading="lazy"

diff --git a/src/components/_Landing/sections/hero/Navbar.tsx b/src/components/_Landing/sections/hero/Navbar.tsx
@@ -72,7 +72,7 @@ function Navbar() {
         <div className="flex md:fixed justify-end z-40 w-[100%]">
             <img src={yellowHackRULogo}
                 alt="yellow hackru logo"
-                className="w-24 absolute top-2 left-4 z-50" />
+                className="w-24 absolute top-0 left-4 z-50" />
             <CollapsedMenu />
             <div
                 className="absolute top-0 font-light text-text hidden md:flex

diff --git a/src/components/_Landing/sections/schedule/Schedule.tsx b/src/components/_Landing/sections/schedule/Schedule.tsx
@@ -77,15 +77,13 @@ function ScheduleOfTheDay(props: { dayInfo: DayInfo }) {
 
 function Schedule() {
     return (
-        <div className="w-full flex justify-center px-4 mb-20 mt-40 sm:mt-24 md:mt-40 relative"
+        <div className="w-full flex justify-center px-4 mb-20 relative"
             id="Schedule">
             <div className="w-full max-w-7xl h-fit flex flex-col items-center">
-                <div className="text-7xl text-text glow-subtitles font-semibold z-30">Schedule</div>
-
-                <div className="transparent-black-background w-full text-text rounded-3xl mt-10
+                <div className="transparent-black-background w-full text-text rounded-3xl
                                 flex flex-col items-center md:flex-row md:items-start relative">
                     <ScheduleOfTheDay dayInfo={schedule["Saturday"]} />
-                    <div className="w-20 h-2 bg-text md:invisible md:absolute glow-subtitle-color rounded-sm" />
+                    <div className="w-20 h-2 bg-text md:invisible md:absolute rounded-sm" />
                     <ScheduleOfTheDay dayInfo={schedule["Sunday"]} />
                 </div>
             </div>

diff --git a/src/components/_Landing/sections/sponsors/Sponsors.tsx b/src/components/_Landing/sections/sponsors/Sponsors.tsx
@@ -10,12 +10,9 @@ function Sponsors() {
         <div
             id="Sponsors"
             className="w-full h-fit
-                    p-24 relative overflow-hidden
+                    pb-24 relative overflow-hidden
                     flex flex-col items-center px-6">
             <div className="w-full max-w-6xl relative ">
-                <div className="text-text glow-subtitles font-semibold text-5xl sm:text-7xl text-left w-full">
-                    Sponsors
-                </div>
                 <img src={cloud3}
                     alt="cloud"
                     className="absolute z-0 w-96 top-[30rem] left-[30rem] opacity-50
@@ -32,7 +29,7 @@ function Sponsors() {
           cloud"/>
 
                 <div className="w-full py-12 px-5
-                                transparent-black-background mt-10 rounded-lg flex flex-row
+                                transparent-black-background rounded-lg flex flex-row
                                 flex-wrap justify-center items-center z-20 relative">
                     <img src={echo_3d}
                         alt="Echo 3D"