From 32b577482f0c82251381188967173d78df3e9352 Mon Sep 17 00:00:00 2001
From: JHAMILCALI <jhamilquea@gmail.com>
Date: Fri, 27 Mar 2026 11:14:14 -0400
Subject: [PATCH] =?UTF-8?q?feat:=20agregar=20part=C3=ADculas=20flotantes?=
 =?UTF-8?q?=20utilizando=20useMemo=20para=20optimizar=20el=20rendimiento?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/Team.tsx | 32 ++++++++++++++++++++++----------
 1 file changed, 22 insertions(+), 10 deletions(-)

diff --git a/src/pages/Team.tsx b/src/pages/Team.tsx
index 8b07e5e..68fabb3 100644
--- a/src/pages/Team.tsx
+++ b/src/pages/Team.tsx
@@ -1,4 +1,4 @@
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useMemo } from 'react';
 import { FiMail, FiUsers, FiUserPlus, FiCheckCircle, FiClock } from 'react-icons/fi';
 import { useProject } from '../context/ProjectContext';
 import robotIcon3 from '../assets/robot-icon3.png'; // Ajusta la ruta según donde tengas la imagen
@@ -30,6 +30,18 @@ export default function Team() {
   const [pendingRequests, setPendingRequests] = useState<PendingInvitation[]>([]);
   const [mousePosition, setMousePosition] = useState({ x: 0, y: 0 });
 
+  const particles = useMemo(() => Array.from({ length: 30 }, (_, i) => ({
+    id: i,
+    width: Math.random() * 3 + 1,
+    height: Math.random() * 3 + 1,
+    left: Math.random() * 100,
+    top: Math.random() * 100,
+    opacity1: Math.random() * 0.3 + 0.1,
+    opacity2: Math.random() * 0.15,
+    delay: Math.random() * 15,
+    duration: Math.random() * 20 + 15,
+  })), []);
+
   useEffect(() => {
     const handleMouseMove = (e: MouseEvent) => {
       setMousePosition({ x: e.clientX, y: e.clientY });
@@ -201,18 +213,18 @@ export default function Team() {
       <div className="absolute inset-0 bg-[linear-gradient(rgba(59,130,246,0.05)_1px,transparent_1px),linear-gradient(90deg,rgba(59,130,246,0.05)_1px,transparent_1px)] bg-[size:50px_50px]" />
       
       {/* Partículas flotantes suaves */}
-      {[...Array(30)].map((_, i) => (
+      {particles.map((p) => (
         <div
-          key={i}
+          key={p.id}
           className="absolute rounded-full animate-float-gentle"
           style={{
-            width: `${Math.random() * 3 + 1}px`,
-            height: `${Math.random() * 3 + 1}px`,
-            left: `${Math.random() * 100}%`,
-            top: `${Math.random() * 100}%`,
-            background: `radial-gradient(circle, rgba(59,130,246,${Math.random() * 0.3 + 0.1}), rgba(139,92,246,${Math.random() * 0.15}))`,
-            animationDelay: `${Math.random() * 15}s`,
-            animationDuration: `${Math.random() * 20 + 15}s`,
+            width: `${p.width}px`,
+            height: `${p.height}px`,
+            left: `${p.left}%`,
+            top: `${p.top}%`,
+            background: `radial-gradient(circle, rgba(59,130,246,${p.opacity1}), rgba(139,92,246,${p.opacity2}))`,
+            animationDelay: `${p.delay}s`,
+            animationDuration: `${p.duration}s`,
           }}
         />
       ))}