From d73f5995c29ed92ffd5cd3d622a6c86c7fccb04e Mon Sep 17 00:00:00 2001
From: bender <kudin.dima@gmail.com>
Date: Wed, 11 Mar 2026 13:56:22 +0000
Subject: [PATCH] Update src/app/page.tsx

---
 src/app/page.tsx | 167 +++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 167 insertions(+)

diff --git a/src/app/page.tsx b/src/app/page.tsx
index 3d940f8..9031d71 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -12,8 +12,175 @@ import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
 import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
 import FooterSimple from '@/components/sections/footer/FooterSimple';
 import { Award, Sparkles, Star, Zap } from "lucide-react";
+import { useEffect } from "react";
 
 export default function LandingPage() {
+  useEffect(() => {
+    // Create custom cursor element
+    const cursor = document.createElement('div');
+    cursor.id = 'flowing-cursor';
+    cursor.style.cssText = `
+      position: fixed;
+      width: 20px;
+      height: 20px;
+      border: 2px solid currentColor;
+      border-radius: 50%;
+      pointer-events: none;
+      z-index: 99999;
+      mix-blend-mode: screen;
+      box-shadow: 0 0 20px currentColor;
+      transition: opacity 0.3s ease;
+      opacity: 0;
+    `;
+    document.body.appendChild(cursor);
+
+    // Create trailing elements
+    const trails = [];
+    const maxTrails = 15;
+    let mouseX = 0;
+    let mouseY = 0;
+    let cursorX = 0;
+    let cursorY = 0;
+    let isMoving = false;
+    let moveTimeout;
+
+    // Color array for flowing effect
+    const colors = [
+      '#ff0080',
+      '#ff0099',
+      '#ff00b2',
+      '#ff00cc',
+      '#ff00e6',
+      '#e600ff',
+      '#cc00ff',
+      '#b200ff',
+      '#9900ff',
+      '#8000ff',
+      '#6600ff',
+      '#4d00ff',
+      '#3300ff',
+      '#1a00ff',
+      '#0066ff',
+    ];
+
+    function createTrail(x, y, colorIndex) {
+      const trail = document.createElement('div');
+      trail.style.cssText = `
+        position: fixed;
+        width: 8px;
+        height: 8px;
+        border-radius: 50%;
+        pointer-events: none;
+        z-index: 99998;
+        left: ${x}px;
+        top: ${y}px;
+        background: ${colors[colorIndex % colors.length]};
+        box-shadow: 0 0 10px ${colors[colorIndex % colors.length]};
+        animation: fadeOutTrail 1s forwards;
+      `;
+      document.body.appendChild(trail);
+      trails.push({ element: trail, startTime: Date.now() });
+      return trail;
+    }
+
+    // Add animation keyframes
+    if (!document.getElementById('cursor-animation-styles')) {
+      const style = document.createElement('style');
+      style.id = 'cursor-animation-styles';
+      style.textContent = `
+        @keyframes fadeOutTrail {
+          0% {
+            opacity: 1;
+            transform: scale(1);
+          }
+          100% {
+            opacity: 0;
+            transform: scale(0.5);
+          }
+        }
+      `;
+      document.head.appendChild(style);
+    }
+
+    document.addEventListener('mousemove', (e) => {
+      mouseX = e.clientX;
+      mouseY = e.clientY;
+
+      // Show cursor
+      cursor.style.opacity = '1';
+
+      // Clear existing timeout
+      clearTimeout(moveTimeout);
+      isMoving = true;
+
+      // Hide cursor after 1 second of no movement
+      moveTimeout = setTimeout(() => {
+        isMoving = false;
+        cursor.style.opacity = '0';
+      }, 1000);
+    });
+
+    document.addEventListener('mouseleave', () => {
+      cursor.style.opacity = '0';
+      isMoving = false;
+      clearTimeout(moveTimeout);
+    });
+
+    document.addEventListener('mouseenter', () => {
+      if (isMoving) {
+        cursor.style.opacity = '1';
+      }
+    });
+
+    // Animation loop
+    function animate() {
+      // Smooth cursor movement
+      cursorX += (mouseX - cursorX) * 0.2;
+      cursorY += (mouseY - cursorY) * 0.2;
+
+      // Update cursor position
+      cursor.style.left = `${cursorX - 10}px`;
+      cursor.style.top = `${cursorY - 10}px`;
+
+      // Create trails periodically
+      if (isMoving && Math.random() > 0.7) {
+        const colorIndex = Math.floor((Date.now() / 50) % colors.length);
+        createTrail(cursorX, cursorY, colorIndex);
+      }
+
+      // Change cursor color based on time
+      const hue = (Date.now() / 20) % 360;
+      cursor.style.color = `hsl(${hue}, 100%, 50%)`;
+
+      // Clean up old trails
+      for (let i = trails.length - 1; i >= 0; i--) {
+        if (Date.now() - trails[i].startTime > 1000) {
+          trails[i].element.remove();
+          trails.splice(i, 1);
+        }
+      }
+
+      // Keep max trails limit
+      while (trails.length > maxTrails) {
+        trails[0].element.remove();
+        trails.shift();
+      }
+
+      requestAnimationFrame(animate);
+    }
+
+    animate();
+
+    // Cleanup
+    return () => {
+      cursor.remove();
+      trails.forEach(t => t.element.remove());
+      document.removeEventListener('mousemove', () => {});
+      document.removeEventListener('mouseleave', () => {});
+      document.removeEventListener('mouseenter', () => {});
+    };
+  }, []);
+
   return (
     <ThemeProvider
       defaultButtonVariant="bounce-effect"
-- 
2.49.1