diff --git a/README.md b/README.md index 56e0b55b..a6dfcc25 100644 --- a/README.md +++ b/README.md @@ -7,7 +7,7 @@ Discover open-source projects, connect with experienced maintainers, and collaborate with a community of passionate contributors. Join over 200+ registered users who are already making a difference ## Demo - + Check out the web app 🌏 : https://projectmate.net/

diff --git a/components/Common/MouseTracker.tsx b/components/Common/MouseTracker.tsx new file mode 100644 index 00000000..338c9fc7 --- /dev/null +++ b/components/Common/MouseTracker.tsx @@ -0,0 +1,38 @@ +import { useEffect, useState } from 'react'; + +export const MouseTracker = () => { + const [position, setPosition] = useState({ x: 0, y: 0 }); + + useEffect(() => { + const updateMousePosition = (e: MouseEvent) => { + setPosition({ x: e.clientX, y: e.clientY }); + }; + + window.addEventListener('mousemove', updateMousePosition); + + return () => { + window.removeEventListener('mousemove', updateMousePosition); + }; + }, []); + + return ( +
+
+
+ ); +}; diff --git a/components/Layouts/SharedLayout/SharedLayout.tsx b/components/Layouts/SharedLayout/SharedLayout.tsx index 55724a41..d18eac8a 100644 --- a/components/Layouts/SharedLayout/SharedLayout.tsx +++ b/components/Layouts/SharedLayout/SharedLayout.tsx @@ -6,7 +6,7 @@ import { BottomBar } from '../BottomBar'; import { TopNavbar } from '../TopNavbar'; import { favicons } from '@/data'; import BackToTopButton from '@/components/Common/BackToTop'; -import RightBar from '../RightBar'; +// import RightBar from '../RightBar'; export const SharedLayout: FC = ({ title = '', @@ -67,9 +67,7 @@ export const SharedLayout: FC = ({ {children} {rightSidebar && ( -
- -
+
{/* */}
)}
{bottomBar && ( diff --git a/components/views/LandingPage/VideoDemo/index.tsx b/components/views/LandingPage/VideoDemo/index.tsx index e8c656c8..b8db3d7b 100644 --- a/components/views/LandingPage/VideoDemo/index.tsx +++ b/components/views/LandingPage/VideoDemo/index.tsx @@ -1,45 +1,76 @@ import { motion } from 'framer-motion'; import { useInView } from 'react-intersection-observer'; -import React from 'react'; +import React, { useEffect } from 'react'; const videoVariants = { hidden: { opacity: 0, y: 50 }, visible: { opacity: 1, y: 0, transition: { duration: 1 } }, }; +const overlayVariants = { + hidden: { opacity: 0 }, + visible: { opacity: 1, transition: { duration: 0.5 } }, +}; + export const VideoDemo = () => { const [ref, inView] = useInView({ - triggerOnce: true, + triggerOnce: false, + threshold: 0.5, }); + useEffect(() => { + // Add/remove a class to the body when video is in view + if (inView) { + document.body.classList.add('video-in-view'); + } else { + document.body.classList.remove('video-in-view'); + } + + return () => { + document.body.classList.remove('video-in-view'); + }; + }, [inView]); + return ( -
+ <> + {/* Overlay that dims the rest of the page */} -
-
- -
-
- -
+ className="pointer-events-none fixed inset-0 bg-black/50 transition-opacity duration-500" + style={{ opacity: inView ? 1 : 0 }} + /> + +
+ +
+
+