done

src/index.html

@@ -11,6 +11,62 @@
   <link rel="icon" type="image/png" sizes="32x32"
     href="https://img.freepik.com/free-vector/human-group-connecting-topology-concept-background-design_1017-53324.jpg?w=826&t=st=1729248294~exp=1729248894~hmac=3865b1d5630a5be3b7c74044d086d128aeb23412766f39a882e977845f837603">
   <style>
+
+
+
+    /* General Body Styling */
+
+    body {
+
+cursor: none; /* Hide the default cursor */
+
+}
+
+
+/* Cursor Tail Effect - the small dots trailing behind */
+.cursor-tail {
+
+position: absolute;
+width: 11px;  /* Small dot */
+height: 11px;
+background-color: rgba(184, 0, 235, 0.8); /* Neon green tail */
+border-radius: 50%;
+pointer-events: none; /* Ensure the trail doesn't interfere with clicks */
+z-index: 9999;
+transform: translate(-50%, -50%);
+animation: trail 0.5s forwards;
+
+}
+
+
+/* Tail Effect Animation - Fades and shrinks */
+@keyframes trail {
+
+0% {
+  transform: scale(1) translate(-50%, -50%);
+  opacity: 1;
+}
+100% {
+  transform: scale(0) translate(-50%, -50%);
+  opacity: 0;
+}
+
+}
+
+
+/* Sample content to make sure scrolling works */
+.content {
+
+height: 200vh; /* Make the page taller to enable scrolling */
+display: flex;
+flex-direction: column;
+align-items: center;
+justify-content: center;
+
+}
+
+
+
 .montserrat-unique {
   font-family: "Montserrat", sans-serif;
   font-optical-sizing: auto;
@@ -256,7 +312,7 @@
 <div class="cursor-dot"></div>
 
 <script>
-  var cursor = {
+ /* var cursor = {
     delay: 8,
     _x: 0,
     _y: 0,
@@ -274,7 +330,7 @@
         
         this.setupEventListeners();
         this.animateDotOutline();
-    },
+    },*/
 
 //     updateCursor: function(e) {
 //         var self = this;
@@ -1311,6 +1367,47 @@ <h2>Contact Us</h2>
     <!-- Testimonials Section -->
 
 
+
+
+    <script>
+
+
+      // Create a trailing dot element dynamically
+      function createTrailDot(x, y) {
+        const trailDot = document.createElement('div');
+        trailDot.classList.add('cursor-tail');
+        trailDot.style.left = `${x}px`;
+        trailDot.style.top = `${y}px`;
+        document.body.appendChild(trailDot);
+
+
+        // Remove the trail dot after the animation completes (0.5s)
+        setTimeout(() => {
+          trailDot.remove();
+        }, 500); // Match the duration of the animation in CSS
+
+      }
+
+
+      // Function to move the cursor and generate trailing dots
+      function moveCursor(event) {
+
+        const x = event.pageX;
+        const y = event.pageY;
+
+        // Create a new trail dot at the cursor position
+        createTrailDot(x, y);
+
+      }
+
+
+      // Listen to mousemove event to trigger the cursor and trail
+      document.addEventListener('mousemove', moveCursor);
+
+
+    </script>
+
+
   </body>
 
 </html>