rohitdasu · awasthi108 · Apr 23, 2024 · Apr 23, 2024 · Apr 24, 2024 · May 11, 2024
diff --git 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/
 <br>
 <br>

diff --git a/components/Common/MouseTracker.tsx 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 (
+    <div
+      style={{
+        position: 'fixed',
+        top: 0,
+        left: 0,
+        pointerEvents: 'none',
+        zIndex: 9999,
+        transform: `translate(${position.x}px, ${position.y}px)`,
+        transition: 'transform 0.1s ease-out',
+      }}
+    >
+      <div
+        className="h-2 w-2 -translate-x-1 -translate-y-1 rounded-full bg-foreground/50"
+        style={{
+          mixBlendMode: 'difference',
+        }}
+      />
+    </div>
+  );
+};
diff --git 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<SharedLayoutProps> = ({
   title = '',
@@ -67,9 +67,7 @@ export const SharedLayout: FC<SharedLayoutProps> = ({
           {children}
         </main>
         {rightSidebar && (
-          <div className="grid min-h-dvh grid-cols-4">
-            <RightBar />
-          </div>
+          <div className="grid min-h-dvh grid-cols-4">{/* <RightBar /> */}</div>
         )}
       </div>
       {bottomBar && (

diff --git 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 (
-    <section className="px-4 md:px-8 xl:px-0" id="demo">
+    <>
+      {/* Overlay that dims the rest of the page */}
       <motion.div
-        ref={ref}
-        variants={videoVariants}
+        variants={overlayVariants}
         initial="hidden"
         animate={inView ? 'visible' : 'hidden'}
-        exit="hidden"
-        className="mx-auto flex max-w-screen-lg flex-col gap-8"
-      >
-        <section>
-          <div style={{ padding: '56.04% 0 0 0', position: 'relative' }}>
-            <iframe
-              src="https://player.vimeo.com/video/893011089?badge=0&amp;autopause=0&amp;player_id=0&amp;app_id=58479&amp;title=0&amp;byline=0&amp;portrait=0"
-              frameBorder="0"
-              allow="autoplay; fullscreen; picture-in-picture"
-              style={{
-                position: 'absolute',
-                top: 0,
-                left: 0,
-                width: '100%',
-                height: '100%',
-              }}
-              title="projectmate-demo"
-            ></iframe>
-          </div>
-        </section>
-      </motion.div>
-    </section>
+        className="pointer-events-none fixed inset-0 bg-black/50 transition-opacity duration-500"
+        style={{ opacity: inView ? 1 : 0 }}
+      />
+
+      <section className="relative z-10 px-4 md:px-8 xl:px-0" id="demo">
+        <motion.div
+          ref={ref}
+          variants={videoVariants}
+          initial="hidden"
+          animate={inView ? 'visible' : 'hidden'}
+          exit="hidden"
+          className="mx-auto flex max-w-screen-lg flex-col gap-8"
+        >
+          <section className="relative">
+            <div style={{ padding: '56.04% 0 0 0', position: 'relative' }}>
+              <iframe
+                src="https://player.vimeo.com/video/893011089?badge=0&amp;autopause=0&amp;player_id=0&amp;app_id=58479&amp;title=0&amp;byline=0&amp;portrait=0&amp;autoplay=1&amp;loop=1&amp;background=1&amp;muted=1"
+                frameBorder="0"
+                allow="autoplay; fullscreen; picture-in-picture"
+                style={{
+                  position: 'absolute',
+                  top: 0,
+                  left: 0,
+                  width: '100%',
+                  height: '100%',
+                }}
+                title="projectmate-demo"
+                className="rounded-lg shadow-lg"
+              />
+            </div>
+          </section>
+        </motion.div>
+      </section>
+    </>
   );
 };
diff --git a/package-lock.json b/package-lock.json
diff --git a/pages/_app.tsx b/pages/_app.tsx
@@ -12,6 +12,7 @@ import { AppDataContext } from '@/context/Common/CommonContext';
 import { Loader } from 'lucide-react';
 import { useState } from 'react';
 import { ProgressBar } from '@/components/Common/ProgressBar';
+import { MouseTracker } from '@/components/Common/MouseTracker';
 
 export default function MyApp({ Component, pageProps }: AppProps) {
   const userDetailsUrl = `/api/user/details`;
@@ -37,6 +38,7 @@ export default function MyApp({ Component, pageProps }: AppProps) {
             <Toaster />
             <AuthModal />
             <ShareModal />
+            <MouseTracker />
             {!isDetailsLoading ? (
               <>
                 <ProgressBar />

diff --git a/pages/_document.tsx b/pages/_document.tsx
@@ -44,8 +44,9 @@ export default class MyDocument extends Document {
           <meta property="twitter:image" content="/og.png" />
 
           <script
-            src="https://survei-feedback.vercel.app/scripts/popup.min.js"
-            data-popup-id="661d54a06635b504822c38e0"
+            src="https://survei-feedback.vercel.app/scripts/survei.js"
+            data-widget="feedbackform1"
+            data-survei-id="661d54a06635b504822c38e0"
             data-theme="sun"
             data-position="left"
             data-button-color="#000000"

diff --git a/styles/globals.css b/styles/globals.css
@@ -72,6 +72,16 @@
   }
   body {
     @apply bg-background text-foreground;
+    transition: background-color 0.5s ease;
+  }
+
+  body.video-in-view {
+    background-color: rgba(0, 0, 0, 0.8);
+  }
+
+  body.video-in-view .bg-background {
+    position: relative;
+    z-index: 1;
   }
 }
 

diff --git a/yarn.lock b/yarn.lock
@@ -19,10 +19,10 @@
   dependencies:
     regenerator-runtime "^0.14.0"
 
-"@babel/runtime@^7.24.0":
-  version "7.24.1"
-  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.24.1.tgz#431f9a794d173b53720e69a6464abc6f0e2a5c57"
-  integrity sha512-+BIznRzyqBf+2wCTxcKE3wDjfGeCoVE61KSHGpkzqrLi8qxqFwBeUFyId2cxkTmm55fzDGnm0+yCxaxygrLUnQ==
+"@babel/runtime@^7.24.1":
+  version "7.24.5"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.24.5.tgz#230946857c053a36ccc66e1dd03b17dd0c4ed02c"
+  integrity sha512-Nms86NXrsaeU9vbBJKni6gXiEXZ4CVpYVzEjDH9Sb8vmZ3UljyA1GSOJl/6LGPO8EHLuSF9H+IxNXHPX8QHJ4g==
   dependencies:
     regenerator-runtime "^0.14.0"
 
@@ -1332,10 +1332,10 @@ [email protected]:
   resolved "https://registry.npmjs.org/clsx/-/clsx-2.0.0.tgz"
   integrity sha512-rQ1+kcj+ttHG0MKVGBUXwayCCF1oh39BF5COIpRzuCEv8Mwjv0XucrI2ExNTOn9IlLifGClWQcU9BrZORvtw6Q==
 
-clsx@^2.1.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/clsx/-/clsx-2.1.0.tgz#e851283bcb5c80ee7608db18487433f7b23f77cb"
-  integrity sha512-m3iNNWpd9rl3jvvcBnu70ylMdrXt8Vlq4HYadnU5fwcOtvkSQWPmj7amUcDT2qYI7risszBjI5AUIUox9D16pg==
+clsx@^2.0.0:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/clsx/-/clsx-2.1.1.tgz#eed397c9fd8bd882bfb18deab7102049a2f32999"
+  integrity sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==
 
 color-convert@^2.0.1:
   version "2.0.1"
@@ -2712,10 +2712,10 @@ lru-cache@^6.0.0:
   resolved "https://registry.npmjs.org/lru-cache/-/lru-cache-10.2.0.tgz"
   integrity sha512-2bIM8x+VAf6JT4bKAljS1qUWgMsqZRPGJS6FSahIMPVvctcNhyVp7AJu7quxOW9jwkryBReKZY5tY5JYv2n/7Q==
 
-lucide-react@^0.363.0:
-  version "0.363.0"
-  resolved "https://registry.yarnpkg.com/lucide-react/-/lucide-react-0.363.0.tgz#2bb1f9d09b830dda86f5118fcd097f87247fe0e3"
-  integrity sha512-AlsfPCsXQyQx7wwsIgzcKOL9LwC498LIMAo+c0Es5PkHJa33xwmYAkkSoKoJWWWSYQEStqu58/jT4tL2gi32uQ==
+lucide-react@^0.292.0:
+  version "0.292.0"
+  resolved "https://registry.yarnpkg.com/lucide-react/-/lucide-react-0.292.0.tgz#c8a06b2ccd8a348a88669def3c0291c035de2884"
+  integrity sha512-rRgUkpEHWpa5VCT66YscInCQmQuPCB1RFRzkkxMxg4b+jaL0V12E3riWWR2Sh5OIiUhCwGW/ZExuEO4Az32E6Q==
 
 make-error@^1.1.1:
   version "1.3.6"
@@ -3594,16 +3594,7 @@ [email protected]:
   resolved "https://registry.npmjs.org/string-argv/-/string-argv-0.3.2.tgz"
   integrity sha512-aqD2Q0144Z+/RqG52NeHEkZauTAUWJO8c6yTftGJKO3Tja5tUgIfmIl6kExvhtxSDP7fXB6DvzkfMpCd/F3G+Q==
 
-"string-width-cjs@npm:string-width@^4.2.0":
-  version "4.2.3"
-  resolved "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz"
-  integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
-  dependencies:
-    emoji-regex "^8.0.0"
-    is-fullwidth-code-point "^3.0.0"
-    strip-ansi "^6.0.1"
-
-string-width@^4.1.0:
+"string-width-cjs@npm:string-width@^4.2.0", string-width@^4.1.0:
   version "4.2.3"
   resolved "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz"
   integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
@@ -3663,14 +3654,7 @@ string.prototype.trimstart@^1.0.7:
     define-properties "^1.2.0"
     es-abstract "^1.22.1"
 
-"strip-ansi-cjs@npm:strip-ansi@^6.0.1":
-  version "6.0.1"
-  resolved "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz"
-  integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
-  dependencies:
-    ansi-regex "^5.0.1"
-
-strip-ansi@^6.0.0, strip-ansi@^6.0.1:
+"strip-ansi-cjs@npm:strip-ansi@^6.0.1", strip-ansi@^6.0.0, strip-ansi@^6.0.1:
   version "6.0.1"
   resolved "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz"
   integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
@@ -3739,12 +3723,12 @@ swr@^2.2.5:
     client-only "^0.0.1"
     use-sync-external-store "^1.2.0"
 
-tailwind-merge@^2.2.2:
-  version "2.2.2"
-  resolved "https://registry.yarnpkg.com/tailwind-merge/-/tailwind-merge-2.2.2.tgz#87341e7604f0e20499939e152cd2841f41f7a3df"
-  integrity sha512-tWANXsnmJzgw6mQ07nE3aCDkCK4QdT3ThPMCzawoYA2Pws7vSTCvz3Vrjg61jVUGfFZPJzxEP+NimbcW+EdaDw==
+tailwind-merge@^2.0.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/tailwind-merge/-/tailwind-merge-2.3.0.tgz#27d2134fd00a1f77eca22bcaafdd67055917d286"
+  integrity sha512-vkYrLpIP+lgR0tQCG6AP7zZXCTLc1Lnv/CCRT3BqJ9CZ3ui2++GPaGb1x/ILsINIMSYqqvrpqjUFsMNLlW99EA==
   dependencies:
-    "@babel/runtime" "^7.24.0"
+    "@babel/runtime" "^7.24.1"
 
 tailwindcss-animate@^1.0.7:
   version "1.0.7"
-Original file line number
+Diff line change
@@ Expand Up / @@ -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/
     <br>
     <br>
@@ Expand Down @@