diff --git a/src/App.jsx b/src/App.jsx index 4d5de92..c55fd80 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -8,6 +8,7 @@ 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' @@ -15,6 +16,7 @@ function App() { return ( <> + {/* */} diff --git a/src/assets/images/LandingPage/cursor.svg b/src/assets/images/LandingPage/cursor.svg new file mode 100644 index 0000000..7cf9b6d --- /dev/null +++ b/src/assets/images/LandingPage/cursor.svg @@ -0,0 +1,47 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/images/LandingPage/cursor1.svg b/src/assets/images/LandingPage/cursor1.svg new file mode 100644 index 0000000..d98c9bc --- /dev/null +++ b/src/assets/images/LandingPage/cursor1.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/src/assets/images/discord/JOIN2.png b/src/assets/images/discord/JOIN2.png index 6edd25e..7e6e9db 100644 Binary files a/src/assets/images/discord/JOIN2.png and b/src/assets/images/discord/JOIN2.png differ diff --git a/src/components/CountdownTimer.jsx b/src/components/CountdownTimer.jsx index 9ba8214..f8469a7 100644 --- a/src/components/CountdownTimer.jsx +++ b/src/components/CountdownTimer.jsx @@ -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 (
@@ -9,37 +10,36 @@ const ExpiredNotice = () => {
); }; -const DateTimeDisplay = ({ value, type, isDanger }) => { + +const DateTimeDisplay = ({ value, type }) => { + const formattedValue = value.toString().padStart(2, '0'); // Ensure two digits return (
-

{type !== 'Days' && :} {value.toString()}

+

+ {type !== 'Days' && :} {formattedValue} +

- {type == 'Days' && {type}} - {type == 'Hours' && {type}} - {type == 'Minutes' && {type}} - {type == 'Minutes' || type=='Seconds' && {type}} + {type === 'Days' && {type}} + {type === 'Hours' && {type}} + {type === 'Minutes' && {type}} + {type === 'Seconds' && {type}}
); }; + const ShowCounter = ({ days, hours, minutes, seconds }) => { return (
- - - - - - - - - + + + +
); }; const CountdownTimer = ({ targetDate }) => { - const [days, hours, minutes, seconds] = UseCountdown(targetDate); if (days + hours + minutes + seconds <= 0) { @@ -47,14 +47,15 @@ const CountdownTimer = ({ targetDate }) => { } else { return (
- +
); } }; -export default CountdownTimer; \ No newline at end of file + +export default CountdownTimer; diff --git a/src/components/Cp/Cp.jsx b/src/components/Cp/Cp.jsx index 64836a8..7d41d90 100644 --- a/src/components/Cp/Cp.jsx +++ b/src/components/Cp/Cp.jsx @@ -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 }); }; diff --git a/src/components/CursorFollower.css b/src/components/CursorFollower.css new file mode 100644 index 0000000..4304ffb --- /dev/null +++ b/src/components/CursorFollower.css @@ -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 */ +} diff --git a/src/components/CursorFollower.jsx b/src/components/CursorFollower.jsx new file mode 100644 index 0000000..3678b7b --- /dev/null +++ b/src/components/CursorFollower.jsx @@ -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 ( + <> + Custom Cursor + + ); +}; + +export default CursorFollower; diff --git a/src/components/Discord/Discord.jsx b/src/components/Discord/Discord.jsx index b44fb8b..22c32e6 100644 --- a/src/components/Discord/Discord.jsx +++ b/src/components/Discord/Discord.jsx @@ -24,7 +24,7 @@ function Discord() { return (