Skip to content

Commit

Permalink
Merge branch 'MohitShaw181104-main'
Browse files Browse the repository at this point in the history
  • Loading branch information
bhaskar1001101 committed Jul 22, 2024
2 parents 88b9c80 + 08f53d6 commit 65c53be
Show file tree
Hide file tree
Showing 14 changed files with 190 additions and 37 deletions.
2 changes: 2 additions & 0 deletions src/App.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -8,13 +8,15 @@ import Tracks from './components/Tracks/Tracks'
import Sponsors from './components/Sponsors/Sponsors'
import Faq from './components/Faq/Faq'
import Cp from './components/Cp/Cp'
// import CursorFollower from './components/CursorFollower';

import LandingPage from './pages/LandingPage'

function App() {

return (
<>
{/* <CursorFollower /> */}
<Navbar />
<LandingPage/>
<Tracks />
Expand Down
47 changes: 47 additions & 0 deletions src/assets/images/LandingPage/cursor.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
11 changes: 11 additions & 0 deletions src/assets/images/LandingPage/cursor1.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified src/assets/images/discord/JOIN2.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
49 changes: 25 additions & 24 deletions src/components/CountdownTimer.jsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import React from 'react';
import {UseCountdown} from '/src/hooks/UseCountdown.jsx';
import { UseCountdown } from '/src/hooks/UseCountdown.jsx';
import '/src/index.css';

const ExpiredNotice = () => {
return (
<div className="expired-notice">
Expand All @@ -9,52 +10,52 @@ const ExpiredNotice = () => {
</div>
);
};
const DateTimeDisplay = ({ value, type, isDanger }) => {

const DateTimeDisplay = ({ value, type }) => {
const formattedValue = value.toString().padStart(2, '0'); // Ensure two digits
return (
<div className='countdown flex flex-col items-center font-vt323 font-[400] text-[#D9D9D9] '>
<div className='mr-[10px] '>
<p className='min-[3840px]:text-[150px] min-[3840px]:h-[15rem] xl:text-[85px] xl:h-[6rem] md:text-[60px] h-[4rem] max-[400px]:text-[30px] max-[400px]:h-[2.5rem] max-[640px]:text-[40px] max-[768px]:text-[45px] max-[768px]:h-[3rem] max-[640px]:h-[3rem] ' >{type !== 'Days' && <span className="min-[3840px]:text-[140px] xl:text-[85px] max-[400px]:text-[30px] max-[768px]:text-[45px] max-[640px]:text-[40px] max-[640px]:h-[4rem] max-[640px]:ml-[0.5rem] text-[60px] ml-[1rem]">:</span>} {value.toString()}</p>
<p className='min-[3840px]:text-[150px] min-[3840px]:h-[15rem] xl:text-[85px] xl:h-[6rem] md:text-[60px] h-[4rem] max-[400px]:text-[30px] max-[400px]:h-[2.5rem] max-[640px]:text-[40px] max-[768px]:text-[45px] max-[768px]:h-[3rem] max-[640px]:h-[3rem]'>
{type !== 'Days' && <span className="min-[3840px]:text-[140px] xl:text-[85px] max-[400px]:text-[30px] max-[768px]:text-[45px] max-[640px]:text-[40px] max-[640px]:h-[4rem] max-[640px]:ml-[0.5rem] text-[60px] ml-[1rem]">:</span>} {formattedValue}
</p>
</div>
{type == 'Days' && <span className="min-[3840px]:text-[100px] 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="min-[3840px]:text-[100px] 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="min-[3840px]:text-[100px] 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="min-[3840px]:text-[100px] 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>}
{type === 'Days' && <span className="min-[3840px]:text-[100px] 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="min-[3840px]:text-[100px] 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="min-[3840px]:text-[100px] 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 === 'Seconds' && <span className="min-[3840px]:text-[100px] 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>
);
};

const ShowCounter = ({ days, hours, minutes, seconds }) => {
return (
<div className="show-counter flex items-center">

<DateTimeDisplay value={days} type={'Days'} isDanger={days <= 3} />

<DateTimeDisplay value={hours} type={'Hours'} isDanger={false} />

<DateTimeDisplay value={minutes} type={'Minutes'} isDanger={false} />

<DateTimeDisplay value={seconds} type={'Seconds'} isDanger={false} />

<DateTimeDisplay value={days} type={'Days'} />
<DateTimeDisplay value={hours} type={'Hours'} />
<DateTimeDisplay value={minutes} type={'Minutes'} />
<DateTimeDisplay value={seconds} type={'Seconds'} />
</div>
);
};

const CountdownTimer = ({ targetDate }) => {

const [days, hours, minutes, seconds] = UseCountdown(targetDate);

if (days + hours + minutes + seconds <= 0) {
return <ExpiredNotice />;
} else {
return (
<section className='flex justify-center'>
<ShowCounter
days={days}
hours={hours}
minutes={minutes}
seconds={seconds}
/>
<ShowCounter
days={days}
hours={hours}
minutes={minutes}
seconds={seconds}
/>
</section>
);
}
};
export default CountdownTimer;

export default CountdownTimer;
4 changes: 2 additions & 2 deletions src/components/Cp/Cp.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -41,8 +41,8 @@ const SimpleSlider = ({ images, direction }) => {
const { clientX, clientY } = e;
const innerWidth = window.innerWidth;
const innerHeight = window.innerHeight;
const posX = (clientX / innerWidth - 0.5) * 10; // Adjust the multiplier for sensitivity
const posY = (clientY / innerHeight - 0.5) * 10; // Adjust the multiplier for sensitivity
const posX = (clientX / innerWidth - 0.5) * 30; // Adjust the multiplier for sensitivity
const posY = (clientY / innerHeight - 0.5) * 30; // Adjust the multiplier for sensitivity
setBgPosition({ x: posX, y: posY });
};

Expand Down
24 changes: 24 additions & 0 deletions src/components/CursorFollower.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
body {
cursor: none;
}

.custom-cursor, .link-cursor {
position: absolute;
pointer-events: none;
transform: translate(-50%, -50%);
z-index: 10000;
}

.custom-cursor {
width: 100px;
height: 100px;
}

.link-cursor {
width: 200px;
height: 200px;
}

a, button, img, svg {
cursor: none; /* Ensure links have a pointer cursor */
}
52 changes: 52 additions & 0 deletions src/components/CursorFollower.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,52 @@
import React, { useState, useEffect } from 'react';
// import './CursorFollower.css';

const CursorFollower = () => {
const [cursorPosition, setCursorPosition] = useState({ x: 0, y: 0 });
const [isHoveringLink, setIsHoveringLink] = useState(false);

useEffect(() => {
const handleMouseMove = (e) => {
setCursorPosition({ x: e.pageX, y: e.pageY });
};

const handleMouseOver = (e) => {
if (e.target.tagName.toLowerCase() === 'a') {
setIsHoveringLink(true);
}
};

const handleMouseOut = (e) => {
if (e.target.tagName.toLowerCase() === 'a') {
setIsHoveringLink(false);
}
};

document.addEventListener('mousemove', handleMouseMove);
document.addEventListener('mouseover', handleMouseOver);
document.addEventListener('mouseout', handleMouseOut);

return () => {
document.removeEventListener('mousemove', handleMouseMove);
document.removeEventListener('mouseover', handleMouseOver);
document.removeEventListener('mouseout', handleMouseOut);
};
}, []);

return (
<>
<img
src={
isHoveringLink
? 'src/assets/images/LandingPage/cursor1.svg'
: 'src/assets/images/LandingPage/cursor.svg'
}
alt="Custom Cursor"
className="custom-cursor"
style={{ left: `${cursorPosition.x}px`, top: `${cursorPosition.y}px` }}
/>
</>
);
};

export default CursorFollower;
2 changes: 1 addition & 1 deletion src/components/Discord/Discord.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ function Discord() {
return (
<div className="section relative max-[768px]:pt-[40px] pt-[55px]" id="footer">
<div
className="absolute h-screen object-cover opacity-70 inset-1"
className="absolute top-[-50px] opacity-70 h-screen object-cover inset-1"
style={{
backgroundImage: `url(${stars})`,
backgroundPosition: `${50+ bgPosition.x}% ${50 + bgPosition.y}%`,
Expand Down
2 changes: 1 addition & 1 deletion src/components/Faq/Faq.jsx
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React, { useState, useEffect } from 'react';
import React, { useState } from 'react';
import stars from '../../assets/images/footer/stars.svg';

const faqData = [
Expand Down
6 changes: 3 additions & 3 deletions src/components/Footer/Footer.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -49,16 +49,16 @@ function Footer() {
</div>
<div className="resources footerelements text-center">
<h1 className="footerheading text-2xl md:text-4xl m-0 text-heading-footer">RESOURCES</h1>
<a href="https://drive.google.com/file/d/1thr3gYMwAX-h0DmaEIGyba44lG53hRxg/view?usp=sharing" className="footercontent text-xl md:text-2xl resourcecontent cursor-pointer text-[#BEBEBE] hover:text-white mb-2" target="_blank" rel="noopener noreferrer text-style-footer">
<a href="https://drive.google.com/file/d/1thr3gYMwAX-h0DmaEIGyba44lG53hRxg/view?usp=sharing" className="footercontent text-xl md:text-2xl resourcecontent text-[#BEBEBE] hover:text-white mb-2" target="_blank" rel="noopener noreferrer text-style-footer">
Sponsorship Brochure<br />
</a>
{/* <a href="https://static.mlh.io/docs/mlh-code-of-conduct.pdf" className="footercontent text-xl md:text-2xl resourcecontent cursor-pointer text-[#BEBEBE] hover:text-white" target="_blank" rel="noopener noreferrer text-style-footer">
Code Of Conduct<br />
</a>
<a href="" className="footercontent text-xl md:text-2xl resourcecontent cursor-pointer text-[#BEBEBE] hover:text-white mb-2" target="_blank" rel="noopener noreferrer text-style-footer">
<a href="" className="footercontent text-xl md:text-2xl resourcecontent text-[#BEBEBE] hover:text-white mb-2" target="_blank" rel="noopener noreferrer text-style-footer">
Community Partners<br />
</a>
<a href="" className="footercontent text-xl md:text-2xl resourcecontent cursor-pointer text-[#BEBEBE] hover:text-white mb-2" target="_blank" rel="noopener noreferrer text-style-footer">
<a href="" className="footercontent text-xl md:text-2xl resourcecontent text-[#BEBEBE] hover:text-white mb-2" target="_blank" rel="noopener noreferrer text-style-footer">
Hackers Guide<br />
</a> */}
</div>
Expand Down
10 changes: 5 additions & 5 deletions src/components/Navbar.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -40,11 +40,11 @@ export default function Navbar(){
<img className="justify-start min-[3840px]:w-[300px] max-[450px]:w-[86px] max-[540px]:w-[90px] max-[640px]:w-[100px] sm:w-[107px] md:w-[88px] lg:w-[107px] xl:w-[120px] " src={sc1_logo}></img>

<ul className=" justify-center flex min-[3840px]:text-[80px] min-[3840px]:space-x-[7rem] xl:space-x-[4rem] lg:space-x-[3rem] sm:space-x-[1.6rem] sm:text-[22px] min-[540px]:space-x-[1.6rem] min-[540px]:text-[22px] md:text-[25px] md:space-x-5 lg:text-[1.8 rem] xl:text-[2.3rem] text-white items-center max-[768px]:hidden ">
<a onClick={scrollToSchedule} style={{ cursor: 'pointer' }}><li className="hover:text-[#c3c3c3]">SCHEDULE</li></a>
<a onClick={scrollToTracks} style={{ cursor: 'pointer' }}><li className="hover:text-[#c3c3c3]">TRACKS</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>
<a onClick={scrollToSchedule} ><li className="hover:text-[#c3c3c3]">SCHEDULE</li></a>
<a onClick={scrollToTracks}><li className="hover:text-[#c3c3c3]">TRACKS</li></a>
<a onClick={scrollToSponsors}><li className="hover:text-[#c3c3c3]">SPONSORS</li></a>
<a onClick={scrollToFaq}><li className="hover:text-[#c3c3c3]">FAQ</li></a>
<a onClick={scrollToFooter}><li className="hover:text-[#c3c3c3]">CONTACT US</li></a>

</ul>
<img className= "justify-end min-[3840px]:w-[400px] md:w-[110px] lg:w-[154px] xl:w-[175px] max-[768px]:hidden" src={iiit_logo}></img>
Expand Down
15 changes: 15 additions & 0 deletions src/pages/LandingPage.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
@keyframes animatedBackground {
0% {
background-position: 50% 0;
}
50% {
background-position: 50% 20%;
}
100% {
background-position: 50% 0;
}
}

.home-mascot {
animation: animatedBackground 5s ease-in-out infinite;
}
3 changes: 2 additions & 1 deletion src/pages/LandingPage.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ 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";
import './LandingPage.css';

function LandingPage() {
const [bgSize, setBgSize] = useState("10%");
Expand Down Expand Up @@ -88,7 +89,7 @@ function LandingPage() {
</div>
<div className="flex text-center justify-center mt-5 xl:mt-1 ml-5 mr-5 min-[3840px]:m-11">
<div
className="bg-top bg-no-repeat flex items-end flex-col justify-center md:h-[80%] bg-cover "
className="home-mascot bg-top bg-no-repeat flex items-end flex-col justify-center md:h-[80%] bg-cover"
style={{
backgroundImage: `url(${HomeMascot})`,
backgroundSize: bgSize,
Expand Down

0 comments on commit 65c53be

Please sign in to comment.