Merge pull request #1 from Puskar-Roy/main

Improve Mobile Responsiveness

apps/docs/next-env.d.ts

@@ -2,4 +2,4 @@
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/basic-features/typescript for more information.
+// see https://nextjs.org/docs/app/building-your-application/configuring/typescript for more information.

apps/web/components/ui/container-scroll-animation.tsx

@@ -1,6 +1,7 @@
 "use client";
 import React, { useRef } from "react";
 import { useScroll, useTransform, motion, MotionValue } from "framer-motion";
+import BubbleCursor from './custom-cursor'; // Import the BubbleCursor component
 
 export const ContainerScroll = ({
   titleComponent,
@@ -39,6 +40,7 @@ export const ContainerScroll = ({
       className="h-[60rem] md:h-[65rem] flex items-center justify-center relative p-2 md:p-20"
       ref={containerRef}
     >
+      <BubbleCursor /> {/* Add the BubbleCursor here */}
       <div
         className="py-10 md:py-40 w-full relative"
         style={{
@@ -87,7 +89,7 @@ export const Card = ({
       }}
       className="max-w-5xl -mt-12 mx-auto h-[30rem] md:h-[40rem] w-full border-4 border-[#6C6C6C] p-2 md:p-6 bg-[#222222] rounded-[30px] shadow-2xl"
     >
-      <div className=" h-full w-full  overflow-hidden rounded-2xl bg-gray-100 dark:bg-zinc-900 md:rounded-2xl md:p-4 ">
+      <div className="h-full w-full overflow-hidden rounded-2xl bg-gray-100 dark:bg-zinc-900 md:rounded-2xl md:p-4 ">
         {children}
       </div>
     </motion.div>

apps/web/components/ui/custom-cursor.tsx

@@ -0,0 +1,71 @@
+"use client";
+import React, { useEffect, useState } from "react";
+import { motion } from "framer-motion";
+
+const BubbleCursor: React.FC = () => {
+  const [cursorPosition, setCursorPosition] = useState({ x: 0, y: 0 });
+  const [bubbles, setBubbles] = useState<{ x: number; y: number }[]>([]);
+
+  useEffect(() => {
+    const handleMouseMove = (event: MouseEvent) => {
+      setCursorPosition({ x: event.clientX, y: event.clientY });
+      setBubbles((prev) => [
+        ...prev,
+        { x: event.clientX, y: event.clientY },
+      ]);
+    };
+
+    window.addEventListener("mousemove", handleMouseMove);
+    return () => {
+      window.removeEventListener("mousemove", handleMouseMove);
+    };
+  }, []);
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setBubbles((prev) => prev.slice(1));
+    }, 100); // Adjust the interval for bubble flow speed
+    return () => clearInterval(interval);
+  }, []);
+
+  return (
+    <>
+      {bubbles.map((bubble, index) => (
+        <motion.div
+          key={index}
+          style={{
+            position: "fixed",
+            left: bubble.x,
+            top: bubble.y,
+            height: `${Math.random() * 15 + 5}px`, // Bubble size between 5px and 20px
+            width: `${Math.random() * 15 + 5}px`,
+            borderRadius: "50%",
+            backgroundColor: `rgba(255, 255, 255, ${Math.random()})`, // Random opacity for bubbles
+            pointerEvents: "none",
+            transform: "translate(-50%, -50%)",
+          }}
+          initial={{ opacity: 1 }}
+          animate={{ opacity: 0 }}
+          exit={{ opacity: 0 }}
+          transition={{ duration: 0.5 }}
+        />
+      ))}
+      <motion.div
+        style={{
+          position: "fixed",
+          left: cursorPosition.x,
+          top: cursorPosition.y,
+          height: "20px",
+          width: "20px",
+          borderRadius: "50%",
+          backgroundColor: "rgba(255, 0, 0, 0.8)", // Main cursor color
+          pointerEvents: "none",
+          transform: "translate(-50%, -50%)",
+        }}
+        transition={{ type: "spring", stiffness: 300, damping: 15 }}
+      />
+    </>
+  );
+};
+
+export default BubbleCursor;

apps/web/next-env.d.ts

@@ -2,4 +2,4 @@
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/basic-features/typescript for more information.
+// see https://nextjs.org/docs/app/building-your-application/configuring/typescript for more information.