Merge pull request #11 from anushkaj-01/main

fixed some issues
IIITKalyaniFOSC · May 31, 2024 · f413aef · f413aef
2 parents 7213d6a + 42c983f
commit f413aef
Show file tree

Hide file tree

Showing 8 changed files with 38 additions and 25 deletions.
diff --git a/...assets/images/LandingPage/DevfolioBtn.svg → public/images/DevfolioBtn.svg b/...assets/images/LandingPage/DevfolioBtn.svg → public/images/DevfolioBtn.svg
diff --git a/src/App.jsx b/src/App.jsx
@@ -16,7 +16,7 @@ function App() {
       <Navbar />
       <LandingPage/>
       <Sponsors />
-      <Faq/>
+      {/* <Faq/> */}
       <Discord />
       <Footer />
     </>

diff --git a/src/components/CountdownTimer.jsx b/src/components/CountdownTimer.jsx
@@ -18,9 +18,7 @@ const DateTimeDisplay = ({ value, type, isDanger }) => {
       {type == 'Days' && <span className="xl:text-[35px] text-[25px] max-[400px]:text-[20px] max-[640px]:text-[22px] ml-[0.5rem] max-[768px]:ml-0 max-[640px]:ml-[0rem]">{type}</span>}
       {type == 'Hours' && <span className="xl:text-[35px] xl:ml-[4rem] text-[25px] max-[400px]:text-[20px] max-[640px]:text-[22px] ml-[2.9rem] max-[768px]:ml-[2.5rem]  max-[640px]:ml-[2rem]">{type}</span>}
       {type == 'Minutes' && <span className="xl:text-[35px] xl:ml-[4.5rem] text-[25px] max-[400px]:text-[20px] max-[640px]:text-[22px] ml-[3rem] max-[768px]:ml-[2.2rem]  max-[640px]:ml-[2rem]">{type}</span>}
-      {type == 'Minutes' || type=='Seconds' && <span className="xl:text-[35px] xl:ml-[4rem] text-[25px] max-[400px]:text-[20px] max-[640px]:text-[22px] ml-[3rem] max-[768px]:ml-[2rem]  max-[640px]:ml-[1.5rem]">{type}</span>}
-      {/* <span className='text-[25px] ml-[1.5rem]'>{type}</span> */}
-
+      {type == 'Minutes' || type=='Seconds' && <span className="xl:text-[35px] xl:ml-[4rem] text-[25px] max-[400px]:text-[20px] max-[640px]:text-[22px] ml-[3rem] max-[768px]:ml-[2rem]  max-[640px]:ml-[1.5rem]">{type}</span>}      
     </div>
   );
 };

diff --git a/src/components/Faq/Faq.jsx b/src/components/Faq/Faq.jsx
@@ -55,7 +55,7 @@ const Faq = () => {
 
   return (
     <>
-      <div className="w-full h-screen bg-[url('/src/assets/images/faq/faqbg.svg')] flex items-center justify-center">
+      <div className="w-full h-screen bg-[url('/src/assets/images/faq/faqbg.svg')] flex items-center justify-center" id='faq'>
         <img src={stars} alt="" className="absolute object-cover w-full h-full" />
         <div className="mb-10 text-center">
           <h1 className="text-[#9E9E9E] text-3xl md:text-4xl xl:text-5xl m-0 flex justify-center md:justify-start">

diff --git a/src/components/HamburgerMenu.jsx b/src/components/HamburgerMenu.jsx
@@ -13,6 +13,11 @@ 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 [state, setState] = React.useState({
+    top: false,
+  });
+
   const scrollToSection = (id) => {
     const element = document.getElementById(id);
     if (element) {
@@ -21,10 +26,6 @@ export default function SwipeableTemporaryDrawer() {
     setState({ ...state, top: false }); // Close the drawer
   };
 
-  const [state, setState] = React.useState({
-    top: false,
-  });
-
   const toggleDrawer = (open) => (event) => {
     if (
       event &&
@@ -53,10 +54,10 @@ export default function SwipeableTemporaryDrawer() {
       onKeyDown={toggleDrawer(false)}
     >
       <List>
-        {['SCHEDULE', 'TRACKS', 'PRIZES', 'MORE'].map((text, index) => (
+        {['SCHEDULE', 'SPONSORS', 'FAQ', 'CONTACT US'].map((text, index) => (
           <ListItem key={text} disablePadding>
             <ListItemButton onClick={() => {
-                const id = text === 'MORE' ? 'footer' : text.toLowerCase();
+                const id = text === 'CONTACT US' ? 'footer' : text.toLowerCase();
                 scrollToSection(id);
               }}>
               {/* <ListItemIcon>
@@ -84,14 +85,15 @@ export default function SwipeableTemporaryDrawer() {
   );
 
   return (
-    <div className='min-[540px]:hidden w-[80px] h-[60px]' >
+    <div className='relative min-[540px]:hidden w-[80px] h-[60px] ml-[72%]' >
       {/* 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>
       </Button> */}
-      <button onClick={toggleDrawer(!state.top)} style={{ zIndex: 9999,position: 'absolute', }}><img className="min-[540px]:hidden min-[320px]:w-[100%]  min-[320px]:pr-[0] min-[320px]:h-[40%] min-[320px]:mt-[110%] min-[320px]:mr-[50%] ml-0" src={hamburger} ></img></button>
+      <button onClick={toggleDrawer(!state.top)} style={{ zIndex: 9999,position: 'fixed', }}><img className="min-[540px]:hidden min-[320px]:w-[100%]  min-[320px]:pr-[0] min-[320px]:h-[40%] min-[320px]:mt-[110%] min-[320px]:ml-[100%] ml-0" src={hamburger} ></img></button>
       <SwipeableDrawer
         anchor="top"
+        style={{ zIndex: 1000 }}
         open={state.top}
         onClose={toggleDrawer(false)}
         onOpen={toggleDrawer(true)}

diff --git a/src/components/Navbar.jsx b/src/components/Navbar.jsx
@@ -15,23 +15,36 @@ export default function Navbar(){
             footerSection.scrollIntoView({ behavior: 'smooth' });
         }
     };
+    const scrollToSponsors = () => {
+        const footerSection = document.getElementById('sponsors');
+        if (footerSection) {
+            footerSection.scrollIntoView({ behavior: 'smooth' });
+        }
+    };
+    const scrollToFaq = () => {
+        const footerSection = document.getElementById('faq');
+        if (footerSection) {
+            footerSection.scrollIntoView({ behavior: 'smooth' });
+        }
+    };
     return(
-        <>
-        <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 ">
+        <section className="w-full">
+        <nav className="fixed z-30 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>
-                <li className="hover:text-[#c3c3c3]" style={{ cursor: 'pointer' }}>TRACKS</li>
-                <li className="hover:text-[#c3c3c3]" style={{ cursor: 'pointer' }}>PRIZES</li>
-                <a onClick={scrollToFooter} style={{ cursor: 'pointer' }}><li className="hover:text-[#c3c3c3]">MORE</li></a>
+                <a onClick={scrollToSponsors} style={{ cursor: 'pointer' }}><li className="hover:text-[#c3c3c3]">SPONSORS</li></a>
+                <a onClick={scrollToFaq} style={{ cursor: 'pointer' }}><li className="hover:text-[#c3c3c3]">FAQ</li></a>
+                <a onClick={scrollToFooter} style={{ cursor: 'pointer' }}><li className="hover:text-[#c3c3c3]">CONTACT US</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-[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 max-[540px]:h-[58%] min-[450px]:mr-[73%] max-[540px]:mt-[3%]  min-[320px]:mr-[65%] min-[350px]:mr-[68%] min-[400px]:mr-[70%]" 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>
-        </>
+        <SwipeableTemporaryDrawer/>
+        </section>
     )
 }
 // max-[540px]:h-[40%] max-[540px]:mr-[4%] max-[540px]:mt-[4%]
diff --git a/src/components/Sponsors/Sponsors.jsx b/src/components/Sponsors/Sponsors.jsx
@@ -16,7 +16,7 @@ import ethIndiaLogo from '../../assets/images/sponsors/ethIndia.png';
 
 const Sponsors = () => {
     return (
-        <section className="relative">
+        <section className="relative" id='sponsors'>
 
             <div className="py-20 bg-[url('/src/assets/images/discord/stars.svg')]">
 

diff --git a/src/pages/LandingPage.jsx b/src/pages/LandingPage.jsx
@@ -1,8 +1,8 @@
 import React, { useState, useEffect } from 'react';
 import BgLandingPage from "/images/BgLandingPage.svg";
 import HomeMascot from "/images/HomeMascot.svg";
-import DevfolioBtn from "../assets/images/LandingPage/DevfolioBtn.svg";
-import DevfolioLogo from "../assets/images/LandingPage/DevfolioLogo.svg"
+import DevfolioBtn from "/images/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"
@@ -53,7 +53,7 @@ function LandingPage() {
         }}
       >
         {/* Hero section */}
-        <section id="hero" className=" ml-5 mr-5 mt-[100px]">
+        <section id="hero" className=" ml-5 mr-5 max-[540px]:mt-[10px] mt-[100px]">
           <div>
             <h1
               className="text-white min-[320px]:text-[48px] sm:text-[12vh] font-vt323"