Merge pull request #10 from anushkaj-01/main

fixed icons, made landing page responsive and fixed navbar
IIITKalyaniFOSC · May 31, 2024 · 7213d6a · 7213d6a
2 parents 9771d1c + ffd3c70
commit 7213d6a
Show file tree

Hide file tree

Showing 6 changed files with 73 additions and 27 deletions.
diff --git a/public/images/DevfolioBtn.svg → ...assets/images/LandingPage/DevfolioBtn.svg b/public/images/DevfolioBtn.svg → ...assets/images/LandingPage/DevfolioBtn.svg
diff --git a/public/images/DevfolioLogo.svg → ...ssets/images/LandingPage/DevfolioLogo.svg b/public/images/DevfolioLogo.svg → ...ssets/images/LandingPage/DevfolioLogo.svg
diff --git a/public/images/ScrollButton.svg → ...ssets/images/LandingPage/ScrollButton.svg b/public/images/ScrollButton.svg → ...ssets/images/LandingPage/ScrollButton.svg
diff --git a/src/components/HamburgerMenu.jsx b/src/components/HamburgerMenu.jsx
@@ -13,6 +13,14 @@ import MailIcon from '@mui/icons-material/Mail';
 import MenuIcon from '@mui/icons-material/Menu';
 import hamburger from '../assets/images/Navbar/Vector.svg';
 export default function SwipeableTemporaryDrawer() {
+  const scrollToSection = (id) => {
+    const element = document.getElementById(id);
+    if (element) {
+      element.scrollIntoView({ behavior: 'smooth' });
+    }
+    setState({ ...state, top: false }); // Close the drawer
+  };
+
   const [state, setState] = React.useState({
     top: false,
   });
@@ -45,9 +53,12 @@ export default function SwipeableTemporaryDrawer() {
       onKeyDown={toggleDrawer(false)}
     >
       <List>
-        {['SHEDULE', 'TRACKS', 'PRIZES', 'MORE'].map((text, index) => (
+        {['SCHEDULE', 'TRACKS', 'PRIZES', 'MORE'].map((text, index) => (
           <ListItem key={text} disablePadding>
-            <ListItemButton>
+            <ListItemButton onClick={() => {
+                const id = text === 'MORE' ? 'footer' : text.toLowerCase();
+                scrollToSection(id);
+              }}>
               {/* <ListItemIcon>
                 {index % 2 === 0 ? <InboxIcon /> : <MailIcon />}
               </ListItemIcon> */}
@@ -73,7 +84,7 @@ export default function SwipeableTemporaryDrawer() {
   );
 
   return (
-    <div className='min-[540px]:hidden w-[70px] h-[60px]' >
+    <div className='min-[540px]:hidden w-[80px] h-[60px]' >
       {/* Conditionally render hamburger menu icon */}
       {/* <Button className='w-[20%] pr-0 pt-0' onClick={toggleDrawer(!state.top)} style={{ zIndex: state.top ? 9999 : 1 }}>
       <img className="min-[450px]:hidden min-[320px]:w-[30%] min-[320px]:pr-[0] min-[320px]:h-[18%] min-[320px]:mt-[40%] min-[320px]:mr-[30%]" src="./images/Vector.svg" ></img>

diff --git a/src/components/Navbar.jsx b/src/components/Navbar.jsx
@@ -17,8 +17,8 @@ export default function Navbar(){
     };
     return(
         <>
-        <nav className="flex bg-gradient-to-b from-[#040842] to-[#040842] justify-between w-full h-[100px] mt-0 bg-blue-800 font-vt323 ">
-            <img className=" xl:ml-[0] xl:mt-[1%] lg:w-[10%] lg:h-[62%] sm:w-[12%] min-[540px]:w-[13%] min-[900px]:h-[55%] min-[900px]:mt-[2%] sm:ml-[1.7%] min-[540px]:ml-[1.7%] lg:ml-[1.5%] lg:mt-[1.5%] mt-[1%] max-[540px]:h-[38%] max-[540px]:ml-[4%] max-[540px]:mt-[4%]" src={sc1_logo}></img>
+        <nav className="fixed flex bg-gradient-to-b from-[#040842] to-[#040842] justify-between w-full h-[100px] max-[540px]:h-[60px] mt-0 bg-blue-800 font-vt323 ">
+            <img className=" xl:ml-[0] xl:mt-[1%] lg:w-[10%] lg:h-[62%] sm:w-[12%] min-[540px]:w-[13%] min-[900px]:h-[55%] min-[900px]:mt-[2%] sm:ml-[1.7%] min-[540px]:ml-[1.7%] lg:ml-[1.5%] lg:mt-[1.5%] mt-[1%] max-[540px]:h-[50%] max-[540px]:ml-[4%] max-[540px]:mt-[4%]" src={sc1_logo}></img>
 
             <ul className=" flex xl:space-x-[5rem] lg:space-x-[4rem] sm:space-x-[1.6rem] sm:text-[22px] min-[540px]:space-x-[1.6rem] min-[540px]:text-[22px] md:space-x-[2.2rem] md:text-[25px] min-[900px]:space-x-[2.4rem] min-[900px]:text-[1.8rem] lg:text-[2rem] text-white items-center max-[540px]:hidden ">
                 <a onClick={scrollToSchedule} style={{ cursor: 'pointer' }}><li className="hover:text-[#c3c3c3]">SCHEDULE</li></a>
@@ -27,7 +27,7 @@ export default function Navbar(){
                 <a onClick={scrollToFooter} style={{ cursor: 'pointer' }}><li className="hover:text-[#c3c3c3]">MORE</li></a>
             </ul>
             <img className="xl:w-[14%] xl:mr-[1%] lg:w-[15%] sm:w-[17%] sm:mr-[1.7%] min-[540px]:w-[17%] min-[540px]:mr-[1.7%] lg:mr-[1.2%] lg:mt-[1%] mt-[1%]   max-[540px]:hidden" src={iiit_logo}></img>
-            <img className="min-[540px]:hidden max-[540px]:h-[45%] min-[450px]:mr-[55%] max-[540px]:mt-[3%]  min-[320px]:mr-[35%] min-[350px]:mr-[42%]" src={iiit_logo_mobile}></img>
+            <img className="min-[540px]:hidden max-[540px]:h-[58%] min-[450px]:mr-[55%] max-[540px]:mt-[3%]  min-[320px]:mr-[35%] min-[350px]:mr-[42%]" src={iiit_logo_mobile}></img>
             {/* <img className="min-[540px]:hidden w-[10%] h-[18%] mt-[7%] mr-[5%]" src="./images/Vector.svg" ></img> */}
             <SwipeableTemporaryDrawer/>
         </nav>

diff --git a/src/pages/LandingPage.jsx b/src/pages/LandingPage.jsx
@@ -1,12 +1,47 @@
-
+import React, { useState, useEffect } from 'react';
 import BgLandingPage from "/images/BgLandingPage.svg";
 import HomeMascot from "/images/HomeMascot.svg";
-import DevfolioBtn from "/images/DevfolioBtn.svg";
+import DevfolioBtn from "../assets/images/LandingPage/DevfolioBtn.svg";
+import DevfolioLogo from "../assets/images/LandingPage/DevfolioLogo.svg"
 import TimerSection from "./TimerSection";
 import Schedule from "../components/Schedule/Schedule";
+import ScrollButton from "../assets/images/LandingPage/ScrollButton.svg"
 
 
 function LandingPage() {
+  const [bgSize, setBgSize] = useState('10%');
+
+  useEffect(() => {
+    const handleResize = () => {
+      const width = window.innerWidth;
+      if (width >= 1248) {
+        setBgSize('15%');
+      } else if (width >= 1024) {
+        setBgSize('18%');
+      }else if (width >= 750) {
+        setBgSize('22%');
+      }else if (width >= 768) {
+        setBgSize('15%');
+      }  else if(width>= 640){
+        setBgSize('25%')
+      }
+      else {
+        setBgSize('40%');
+      }
+    };
+
+    window.addEventListener('resize', handleResize);
+    handleResize();
+
+    return () => window.removeEventListener('resize', handleResize);
+  }, []);
+
+  const scrollToTimer = () => {
+    const scheduleSection = document.getElementById('timer');
+    if (scheduleSection) {
+      scheduleSection.scrollIntoView({ behavior: 'smooth' });
+    }
+  };
   return (
     <>
       <div
@@ -18,36 +53,36 @@ function LandingPage() {
         }}
       >
         {/* Hero section */}
-        <section id="hero" className="ml-5 mr-5 mt-5">
+        <section id="hero" className=" ml-5 mr-5 mt-[100px]">
           <div>
             <h1
-              className="text-white text-[12vh] font-vt323"
+              className="text-white min-[320px]:text-[48px] sm:text-[12vh] font-vt323"
               style={{ textShadow: "2px 2px 0 rgb(236, 83, 176, 1)" }}
             >
               STATUS CODE <span className="text-red">1</span>
             </h1>
-            <h3 className="text-purple-900 font-vt323 text-2xl bg-gradient-to-r from-gradient_blue_purple-0 via-gradient_blue_purple-50 to-gradient_blue_purple-100  text-transparent bg-clip-text">
+            <h3 className="text-purple-900 font-vt323 min-[320px]:text-[20px] md:text-2xl bg-gradient-to-r from-gradient_blue_purple-0 via-gradient_blue_purple-50 to-gradient_blue_purple-100  text-transparent bg-clip-text">
               Code With Purpose & Innovate, Collaborate, Dominate
             </h3>
           </div>
           <div className="flex text-center justify-center mt-5 ml-5 mr-5">
-            <div className="bg-top bg-no-repeat flex items-end flex-col justify-center h-[90%] "style={{
-                backgroundImage: `url(${HomeMascot})`,
-                backgroundSize: "15%",
-              }}
+            <div className="bg-top bg-no-repeat flex items-end flex-col justify-center md:h-[80%] bg-cover " style={{
+              backgroundImage: `url(${HomeMascot})`,
+              backgroundSize: bgSize,
+            }}
             >
-              <div className="text-center justify-center gap-2 mt-[21%]">
-                <div   className="bg-no-repeat bg-center text-center justify-center flex flex-row" style={{
-                    backgroundImage: `url(${DevfolioBtn})`,
-                    backgroundSize: "contain",
-                  }}
+              <div className="text-center justify-center gap-2 min-[320px]:mt-[25%] md:mt-0">
+                <div className="bg-no-repeat bg-center bg-cover  text-center justify-center flex flex-row min-[320px]:mt-[25%] min-[640px]:mt-[10%] min-[750px]:mt-[6%] md:mt-[27%] lg:mt-[22%] xl:mt-[20%]" style={{
+                  backgroundImage: `url(${DevfolioBtn})`,
+                  backgroundSize: "contain",
+                }}
                 >
-                  <button className="text-purple font-vt323 text-2xl  text-center justify-center flex  mt-2 mb-2 gap-3 ">
-                    <img src="/images/DevfolioLogo.svg"  />
+                  <a href="https://statuscode-1.devfolio.co/"><button className="text-purple font-vt323 text-2xl text-center justify-center flex  mt-2 mb-2 gap-3 ">
+                    <img src={DevfolioLogo} />
                     Apply with Devfolio
-                  </button>
+                  </button></a>
                 </div>
-                <p className=" font-vt323 text-2xl m-3 bg-gradient-to-b from-gradient_purple_fade-0 via-gradient_purple_fade-50 to-gradient_purple_fade-100  text-transparent bg-clip-text">
+                <p className="max-[540px]:leading-normal md:leading-tight xl:leading-normal md:text-[22px] xl:text-[25px] font-vt323 min-[320px]:text-[18px] md:text-2xl m-3 bg-gradient-to-b from-gradient_purple_fade-0 via-gradient_purple_fade-50 to-gradient_purple_fade-100  text-transparent bg-clip-text">
                   Unleash your creativity and join Status Code 1, an official
                   MLH Member Event and the ultimate 36-hour hackathon
                   extravaganza! Compete across diverse categories, showcasing
@@ -57,7 +92,7 @@ function LandingPage() {
                 </p>
 
                 <button className="">
-                  <img src="/images/ScrollButton.svg" alt="Down" width="80%" />
+                  <a onClick={scrollToTimer}> <img src={ScrollButton} alt="Down" width="80%" /></a>
                 </button>
               </div>
             </div>
@@ -66,12 +101,12 @@ function LandingPage() {
 
         {/* Timer section  */}
         <section id="timer" className="mt-[4%] mb-10">
-          <TimerSection/>
+          <TimerSection />
         </section>
 
         {/* Schedule section */}
         <section id="schedule" className="mt-[12%]"></section>
-        <Schedule/>
+        <Schedule />
       </div>
     </>
   );