Merge pull request #25 from raunak-111/main

fixed landingPage background and updated responsiveness
IIITKalyaniFOSC · Jun 30, 2024 · 08d9080 · 08d9080
2 parents 6c3818b + 2b878ef
commit 08d9080
Show file tree

Hide file tree

Showing 4 changed files with 101 additions and 78 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -12,8 +12,8 @@
   "dependencies": {
     "@emotion/react": "^11.11.4",
     "@emotion/styled": "^11.11.5",
-    "@mui/icons-material": "^5.15.17",
-    "@mui/material": "^5.15.19",
+    "@mui/icons-material": "^5.15.20",
+    "@mui/material": "^5.15.20",
     "@mui/styled-engine-sc": "^6.0.0-alpha.18",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

diff --git a/src/components/Tracks/Tracks.jsx b/src/components/Tracks/Tracks.jsx
@@ -58,7 +58,7 @@ const Tracks = () => {
             <img src={trackData[selectedTrack - 1].image} alt="" className='z-1 absolute pointer-events-none left-0 right-0 mx-auto max-w-full xl:-translate-y-48 opacity-50'/>
             <div className='text-white max-w-[1280px] md:mx-8 lg:mx-12 xl:mx-auto z-2'>
                 <h1 className='py-6 md:text-left text-2xl md:text-4xl xl:text-5xl text-[#9E9E9E]'>$ ls -a <span className='text-white'>TRACKS</span></h1>
-                <div className='xl:flex'>
+                <div className='xl:flex'>   
                     <div className="track-section pl-12 xl:w-1/2 mr-5 mb-5 xl:mb-0" >
                         {selectedTrack ? (
                             <div>

diff --git a/src/pages/LandingPage.jsx b/src/pages/LandingPage.jsx
@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect } from "react";
 import BgLandingPage from "/images/BgLandingPage.svg";
 import HomeMascot from "/images/HomeMascot.svg";
 import DevfolioBtn from "/images/DevfolioBtn.svg";
@@ -8,25 +8,30 @@ import Schedule from "../components/Schedule/Schedule";
 import ScrollButton from "../assets/images/LandingPage/ScrollButton.svg";
 
 function LandingPage() {
-  const [bgSize, setBgSize] = useState('10%');
+  const [bgSize, setBgSize] = useState("10%");
   const [bgPosition, setBgPosition] = useState({ x: 0, y: 0 });
 
   useEffect(() => {
     const handleResize = () => {
       const width = window.innerWidth;
-      if (width >= 1248) {
-        setBgSize('15%');
+      if (width >= 3840) {
+
+        setBgSize("18%");
+      } else if (width >= 2560) {
+        // Adjustments for 1440p resolution
+        setBgSize("18%");
+      } else if (width >= 1248) {
+        setBgSize("18%");
       } 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%');
+        setBgSize("18%");
+      } else if (width >= 750) {
+        setBgSize("22%");
+      } else if (width >= 768) {
+        setBgSize("15%");
+      } else if (width >= 640) {
+        setBgSize("25%");
+      } else {
+        setBgSize("40%");
       }
     };
 
@@ -37,65 +42,80 @@ function LandingPage() {
       setBgPosition({ x, y });
     };
 
-    window.addEventListener('resize', handleResize);
-    window.addEventListener('mousemove', handleMouseMove);
+    window.addEventListener("resize", handleResize);
+    window.addEventListener("mousemove", handleMouseMove);
 
     handleResize();
 
     return () => {
-      window.removeEventListener('resize', handleResize);
-      window.removeEventListener('mousemove', handleMouseMove);
+      window.removeEventListener("resize", handleResize);
+      window.removeEventListener("mousemove", handleMouseMove);
     };
   }, []);
 
   const scrollToTimer = () => {
-    const scheduleSection = document.getElementById('timer');
+    const scheduleSection = document.getElementById("timer");
     if (scheduleSection) {
-      scheduleSection.scrollIntoView({ behavior: 'smooth' });
+      scheduleSection.scrollIntoView({ behavior: "smooth" });
     }
   };
 
   return (
     <>
       <div
-        className=" h-full w-full flex flex-col text-center bg-no-repeat  bg-bg_color m-0"
+        className=" h-full  2xl:h-[4000px] w-full flex flex-col text-center bg-no-repeat  bg-bg_color m-0"
         style={{
           backgroundImage: `url(${BgLandingPage})`,
           backgroundPosition: `${50 + bgPosition.x}% ${20 + bgPosition.y}%`,
           backgroundSize: "cover",
         }}
       >
         {/* Hero section */}
-        <section id="hero" className=" ml-5 mr-5 max-[540px]:mt-[60px] mt-[110px]">
+        <section
+          id="hero"
+          className=" ml-5 mr-5 max-[540px]:mt-[60px] mt-[110px] 2xl:mt-[150px] "
+        >
           <div>
             <h1
-              className="text-white min-[320px]:text-[48px] sm:text-[12vh] font-vt323"
+              className="text-white min-[320px]:text-5xl md:text-7xl   xl:text-8xl  2xl: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 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">
+            <h3 className="text-purple-900 font-vt323 min-[320px]:text-[20px] md:text-3xl xl:text-[40px] 2xl:m-11 2xl:p-10 2xl:text-[4vh] 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 md:h-[80%] bg-cover " style={{
-              backgroundImage: `url(${HomeMascot})`,
-              backgroundSize: bgSize,
-            }}
+          <div className="flex text-center justify-center mt-5 ml-5 mr-5 2xl:m-11">
+            <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 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",
-                }}
+              <div className="text-center justify-center gap-2 min-[320px]:mt-[25%] md:mt-0 " >
+                {/* <a href="https://statuscode-1.devfolio.co/"> */}
+                <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%] 2xl:mt-[24%]"
+                  style={{
+                    backgroundImage: `url(${DevfolioBtn})`,
+                    backgroundSize: "contain",
+
+
+                  }}
                 >
-                  <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></a>
+                  <button  onClick={() =>
+                    window.open("https://statuscode-1.devfolio.co/")
+                  }
+                   className="text-purple font-vt323 text-2xl text-center justify-center  flex  mt-2 mb-2 gap-3 2xl:gap-11 2xl:text-7xl 2xl:m-5     ">
+                    <img className="2xl:w-[5vh]" src={DevfolioLogo} />
+                    <p className="2xl:mt-5">Apply with Devfolio </p>
+                  </button>
                 </div>
-                <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 text-purple bg-clip-text">
+                {/* </a> */}
+                <p className="max-[540px]:leading-normal md:leading-tight xl:leading-normal md:text-[22px] xl:text-[24px] 2xl:text-[3vh] 2xl:pl-[17vh] 2xl:pr-[17vh] 2xl:p-11 font-vt323 min-[320px]:text-[16px] md:text-2xl m-3 bg-gradient-to-b text-purple 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
@@ -104,8 +124,11 @@ function LandingPage() {
                   challenge yourself,
                 </p>
 
-                <button className="animate-bounce">
-                  <a onClick={scrollToTimer}> <img src={ScrollButton} alt="Down" width="80%" /></a>
+                <button className="animate-bounce 2xl:w-[5%]  ">
+                  <a onClick={scrollToTimer}>
+                    {" "}
+                    <img src={ScrollButton} alt="Down" width="80% " />
+                  </a>
                 </button>
               </div>
             </div>
@@ -118,7 +141,7 @@ function LandingPage() {
         </section>
 
         {/* Schedule section */}
-        <section id="schedule" className="mt-[12%]"></section>
+        <section id="schedule" className="mt-[4%]"></section>
         <Schedule />
       </div>
     </>