From 88afb7b4536569b33cb963601eaa6c107b8050a5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jos=C3=A9=20Henrique?= <jose.henrique.ivan@gmail.com>
Date: Sat, 31 May 2025 14:42:47 -0300
Subject: [PATCH] add animated background

---
 package-lock.json                    |  18 ++
 package.json                         |   1 +
 src/App.css                          |  14 +-
 src/App.tsx                          |  18 +-
 src/components/Footer.tsx            |   2 +-
 src/components/MatrixBackground.tsx  | 334 +++++++++++++++++++++++++++
 src/components/StatisticsSection.tsx |   9 +-
 7 files changed, 379 insertions(+), 17 deletions(-)
 create mode 100644 src/components/MatrixBackground.tsx

diff --git a/package-lock.json b/package-lock.json
index c2e2f8e..adce7d2 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -18,6 +18,7 @@
       "devDependencies": {
         "@eslint/js": "^9.25.0",
         "@heroicons/react": "^2.2.0",
+        "@types/node": "^22.15.29",
         "@types/react": "^19.1.2",
         "@types/react-dom": "^19.1.2",
         "@types/react-router-dom": "^5.3.3",
@@ -1675,6 +1676,16 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@types/node": {
+      "version": "22.15.29",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-22.15.29.tgz",
+      "integrity": "sha512-LNdjOkUDlU1RZb8e1kOIUpN1qQUlzGkEtbVNo53vbrwDg5om6oduhm4SiUaPW5ASTXhAiP0jInWG8Qx9fVlOeQ==",
+      "devOptional": true,
+      "license": "MIT",
+      "dependencies": {
+        "undici-types": "~6.21.0"
+      }
+    },
     "node_modules/@types/react": {
       "version": "19.1.6",
       "resolved": "https://registry.npmjs.org/@types/react/-/react-19.1.6.tgz",
@@ -3952,6 +3963,13 @@
         "typescript": ">=4.8.4 <5.9.0"
       }
     },
+    "node_modules/undici-types": {
+      "version": "6.21.0",
+      "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-6.21.0.tgz",
+      "integrity": "sha512-iwDZqg0QAGrg9Rav5H4n0M64c3mkR59cJ6wQp+7C4nI0gsmExaedaYLNO44eT4AtBBwjbTiGPMlt2Md0T9H9JQ==",
+      "devOptional": true,
+      "license": "MIT"
+    },
     "node_modules/update-browserslist-db": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.1.3.tgz",
diff --git a/package.json b/package.json
index fe22320..94f2e05 100644
--- a/package.json
+++ b/package.json
@@ -20,6 +20,7 @@
   "devDependencies": {
     "@eslint/js": "^9.25.0",
     "@heroicons/react": "^2.2.0",
+    "@types/node": "^22.15.29",
     "@types/react": "^19.1.2",
     "@types/react-dom": "^19.1.2",
     "@types/react-router-dom": "^5.3.3",
diff --git a/src/App.css b/src/App.css
index aacc42b..ffa6e24 100644
--- a/src/App.css
+++ b/src/App.css
@@ -1,5 +1,17 @@
 #root {
   margin: 0 auto;
-  padding: 2rem;
+  padding: 0;
   text-align: center;
+  position: relative;
+  min-height: 100vh;
+  width: 100%;
+}
+
+/* Ensure body and html have no margins/padding for full screen background */
+body, html {
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100%;
+  overflow-x: hidden;
 }
\ No newline at end of file
diff --git a/src/App.tsx b/src/App.tsx
index 0fe60bc..1cf4c21 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -6,6 +6,7 @@ import StatisticsSection from './components/StatisticsSection';
 import FeaturesSection from './components/FeaturesSection';
 import Footer from './components/Footer';
 import CandidatePage from './components/CandidatePage/CandidatePage';
+import MatrixBackground from './components/MatrixBackground';
 import './App.css';
 
 // HomePage component
@@ -19,13 +20,16 @@ const HomePage: React.FC = () => (
 
 function App() {
   return (
-    <div className="bg-gray-900 min-h-screen w-full flex flex-col">
-      <Navbar />
-      <Routes>
-        <Route path="/" element={<HomePage />} />
-        <Route path="/candidato/:id" element={<CandidatePage />} />
-      </Routes>
-      <Footer />
+    <div className="min-h-screen w-full flex flex-col relative" style={{ backgroundColor: 'transparent' }}>
+      <MatrixBackground />
+      <div className="relative z-10">
+        <Navbar />
+        <Routes>
+          <Route path="/" element={<HomePage />} />
+          <Route path="/candidato/:id" element={<CandidatePage />} />
+        </Routes>
+        <Footer />
+      </div>
     </div>
   );
 }
diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
index 79b8c9e..bce67d7 100644
--- a/src/components/Footer.tsx
+++ b/src/components/Footer.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 
 const Footer: React.FC = () => {
   return (
-    <footer className="bg-gray-900 text-gray-400 py-8 text-center">
+    <footer className="bg-gray-800/30 text-gray-400 py-8 text-center">
       <div className="container mx-auto">
         <p className="mb-2">
           &copy; {new Date().getFullYear()} OpenCand. Todos os direitos reservados.
diff --git a/src/components/MatrixBackground.tsx b/src/components/MatrixBackground.tsx
new file mode 100644
index 0000000..1f85f07
--- /dev/null
+++ b/src/components/MatrixBackground.tsx
@@ -0,0 +1,334 @@
+import React, { useEffect, useRef, useState } from 'react';
+
+interface Dot {
+  x: number;
+  y: number;
+  vx: number;
+  vy: number;
+  connections: number[];
+  brightness: number;
+  targetBrightness: number;
+}
+
+interface Connection {
+  from: number;
+  to: number;
+  brightness: number;
+  targetBrightness: number;
+  thickness: number;
+  targetThickness: number;
+}
+
+const MatrixBackground: React.FC = () => {
+  const canvasRef = useRef<HTMLCanvasElement>(null);
+  const animationRef = useRef<number>(0);
+  const dotsRef = useRef<Dot[]>([]);
+  const connectionsRef = useRef<Connection[]>([]);
+  const mouseRef = useRef({ x: 0, y: 0 });
+  const [, setDimensions] = useState({ width: 0, height: 0 });
+
+  // Configuration
+  const config = {
+    dotCount: 300,
+    maxConnections: 3,
+    connectionDistance: 150,
+    dotSpeed: 0.3,
+    hoverRadius: 120,
+    baseBrightness: 0.25, // Reduced to 30% opacity (0.3 * 0.3)
+    hoverBrightness: 0.6, // Reduced hover brightness
+    baseThickness: 0.5,
+    hoverThickness: 1.5,
+    fadeSpeed: 0.08, // Slightly faster fade for better responsiveness
+  };
+
+  // Initialize dots
+  const initializeDots = (width: number, height: number) => {
+    const dots: Dot[] = [];
+    for (let i = 0; i < config.dotCount; i++) {
+      dots.push({
+        x: Math.random() * width,
+        y: Math.random() * height,
+        vx: (Math.random() - 0.5) * config.dotSpeed,
+        vy: (Math.random() - 0.5) * config.dotSpeed,
+        connections: [],
+        brightness: config.baseBrightness,
+        targetBrightness: config.baseBrightness,
+      });
+    }
+    return dots;
+  };
+
+  // Calculate connections between dots
+  const calculateConnections = (dots: Dot[]) => {
+    const connections: Connection[] = [];
+    
+    for (let i = 0; i < dots.length; i++) {
+      const dot = dots[i];
+      dot.connections = [];
+      
+      const distances: { index: number; distance: number }[] = [];
+      
+      for (let j = 0; j < dots.length; j++) {
+        if (i === j) continue;
+        
+        const dx = dot.x - dots[j].x;
+        const dy = dot.y - dots[j].y;
+        const distance = Math.sqrt(dx * dx + dy * dy);
+        
+        if (distance < config.connectionDistance) {
+          distances.push({ index: j, distance });
+        }
+      }
+      
+      // Sort by distance and take closest connections
+      distances.sort((a, b) => a.distance - b.distance);
+      const maxConnections = Math.min(config.maxConnections, distances.length);
+      
+      for (let k = 0; k < maxConnections; k++) {
+        const targetIndex = distances[k].index;
+        
+        // Avoid duplicate connections
+        const existing = connections.find(
+          conn => (conn.from === i && conn.to === targetIndex) || 
+                  (conn.from === targetIndex && conn.to === i)
+        );
+        
+        if (!existing) {
+          dot.connections.push(targetIndex);
+          connections.push({
+            from: i,
+            to: targetIndex,
+            brightness: config.baseBrightness,
+            targetBrightness: config.baseBrightness,
+            thickness: config.baseThickness,
+            targetThickness: config.baseThickness,
+          });
+        }
+      }
+    }
+    
+    return connections;
+  };
+
+  // Update hover effects
+  const updateHoverEffects = (dots: Dot[], connections: Connection[], mouseX: number, mouseY: number) => {
+    // Reset all targets to base values
+    dots.forEach(dot => {
+      dot.targetBrightness = config.baseBrightness;
+    });
+    
+    connections.forEach(conn => {
+      conn.targetBrightness = config.baseBrightness;
+      conn.targetThickness = config.baseThickness;
+    });
+
+    // Check which dots are near the mouse
+    let hoveredCount = 0;
+    dots.forEach((dot, index) => {
+      const dx = dot.x - mouseX;
+      const dy = dot.y - mouseY;
+      const distance = Math.sqrt(dx * dx + dy * dy);
+      
+      if (distance < config.hoverRadius) {
+        hoveredCount++;
+        const intensity = 1 - (distance / config.hoverRadius);
+        dot.targetBrightness = config.baseBrightness + 
+          (config.hoverBrightness - config.baseBrightness) * intensity;
+        
+        // Brighten connected lines
+        connections.forEach(conn => {
+          if (conn.from === index || conn.to === index) {
+            conn.targetBrightness = config.baseBrightness + 
+              (config.hoverBrightness - config.baseBrightness) * intensity * 0.7;
+            conn.targetThickness = config.baseThickness + 
+              (config.hoverThickness - config.baseThickness) * intensity;
+          }
+        });
+      }
+    });
+
+    // Smooth transitions
+    dots.forEach(dot => {
+      dot.brightness += (dot.targetBrightness - dot.brightness) * config.fadeSpeed;
+    });
+    
+    connections.forEach(conn => {
+      conn.brightness += (conn.targetBrightness - conn.brightness) * config.fadeSpeed;
+      conn.thickness += (conn.targetThickness - conn.thickness) * config.fadeSpeed;
+    });
+  };
+
+  // Animation loop
+  const animate = () => {
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+    
+    const ctx = canvas.getContext('2d');
+    if (!ctx) return;
+
+    const { width, height } = canvas;
+    
+    // Clear canvas with dark blue background
+    ctx.fillStyle = '#0a0f1a';
+    ctx.fillRect(0, 0, width, height);
+
+    const dots = dotsRef.current;
+    const connections = connectionsRef.current;
+
+    // Update dot positions
+    dots.forEach(dot => {
+      dot.x += dot.vx;
+      dot.y += dot.vy;
+
+      // Bounce off edges
+      if (dot.x <= 0 || dot.x >= width) {
+        dot.vx *= -1;
+        dot.x = Math.max(0, Math.min(width, dot.x));
+      }
+      if (dot.y <= 0 || dot.y >= height) {
+        dot.vy *= -1;
+        dot.y = Math.max(0, Math.min(height, dot.y));
+      }
+    });
+
+    // Recalculate connections periodically for smooth movement
+    if (Math.random() < 0.02) {
+      connectionsRef.current = calculateConnections(dots);
+    }
+
+    // Update hover effects
+    updateHoverEffects(dots, connections, mouseRef.current.x, mouseRef.current.y);
+
+    // Draw connections
+    connections.forEach(conn => {
+      const fromDot = dots[conn.from];
+      const toDot = dots[conn.to];
+      
+      if (!fromDot || !toDot) return;
+
+      ctx.strokeStyle = `rgba(100, 200, 255, ${conn.brightness * 0.3})`; // Changed to blue with 30% opacity
+      ctx.lineWidth = conn.thickness;
+      ctx.lineCap = 'round';
+      
+      ctx.beginPath();
+      ctx.moveTo(fromDot.x, fromDot.y);
+      ctx.lineTo(toDot.x, toDot.y);
+      ctx.stroke();
+    });
+
+    // Draw dots
+    dots.forEach(dot => {
+      ctx.fillStyle = `rgba(100, 200, 255, ${dot.brightness * 0.3})`; // Changed to blue with 30% opacity
+      ctx.beginPath();
+      ctx.arc(dot.x, dot.y, 2, 0, Math.PI * 2);
+      ctx.fill();
+      
+      // Add subtle glow
+      ctx.shadowColor = `rgba(100, 200, 255, ${dot.brightness * 0.15})`; // Reduced glow opacity
+      ctx.shadowBlur = 4;
+      ctx.beginPath();
+      ctx.arc(dot.x, dot.y, 1.5, 0, Math.PI * 2);
+      ctx.fill();
+      ctx.shadowBlur = 0;
+    });
+
+    animationRef.current = requestAnimationFrame(animate);
+  };
+
+  // Handle resize
+  const handleResize = () => {
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+
+    // Set canvas size to window size
+    canvas.width = window.innerWidth;
+    canvas.height = window.innerHeight;
+    
+    canvas.style.width = `${window.innerWidth}px`;
+    canvas.style.height = `${window.innerHeight}px`;
+
+    setDimensions({ width: window.innerWidth, height: window.innerHeight });
+    
+    // Reinitialize dots for new dimensions
+    dotsRef.current = initializeDots(window.innerWidth, window.innerHeight);
+    connectionsRef.current = calculateConnections(dotsRef.current);
+    
+    if (process.env.NODE_ENV === 'development') {
+      console.log(`MatrixBackground: Canvas resized to ${window.innerWidth}x${window.innerHeight}`);
+    }
+  };
+
+  // Handle mouse movement
+  const handleMouseMove = (event: MouseEvent) => {
+    mouseRef.current = {
+      x: event.clientX,
+      y: event.clientY,
+    };
+  };
+
+  useEffect(() => {
+    const canvas = canvasRef.current;
+    if (!canvas) {
+      if (process.env.NODE_ENV === 'development') {
+        console.log('MatrixBackground: Canvas not found');
+      }
+      return;
+    }
+
+    if (process.env.NODE_ENV === 'development') {
+      console.log('MatrixBackground: Canvas found, initializing...');
+    }
+
+    // Initial setup
+    handleResize();
+    
+    // Start animation
+    const startAnimation = () => {
+      if (animationRef.current) {
+        cancelAnimationFrame(animationRef.current);
+      }
+      animationRef.current = requestAnimationFrame(animate);
+    };
+    
+    startAnimation();
+
+    // Event listeners
+    window.addEventListener('resize', handleResize);
+    document.addEventListener('mousemove', handleMouseMove);
+
+    if (process.env.NODE_ENV === 'development') {
+      console.log('MatrixBackground: Animation started');
+    }
+
+    return () => {
+      if (animationRef.current) {
+        cancelAnimationFrame(animationRef.current);
+      }
+      window.removeEventListener('resize', handleResize);
+      document.removeEventListener('mousemove', handleMouseMove);
+      if (process.env.NODE_ENV === 'development') {
+        console.log('MatrixBackground: Cleanup completed');
+      }
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  return (
+    <canvas
+      ref={canvasRef}
+      className="fixed inset-0"
+      style={{ 
+        zIndex: 0,
+        position: 'fixed',
+        top: 0,
+        left: 0,
+        width: '100vw',
+        height: '100vh',
+        backgroundColor: '#0a0f1a', // Dark blue background
+        pointerEvents: 'none'
+      }}
+    />
+  );
+};
+
+export default MatrixBackground;
diff --git a/src/components/StatisticsSection.tsx b/src/components/StatisticsSection.tsx
index 27546d7..6196c2b 100644
--- a/src/components/StatisticsSection.tsx
+++ b/src/components/StatisticsSection.tsx
@@ -105,18 +105,11 @@ const StatisticsSection: React.FC = () => {
   ];
 
   return (
-    <section id="stats" className="py-20 bg-gray-900">
+    <section id="stats" className="py-20 bg-gray-800/30">
       <div className="container mx-auto px-4">
         <h2 className="text-3xl font-bold text-center text-white mb-12">
           Dados em Números
         </h2>
-        {error && !isLoading && (
-          <div className="text-center mb-8">
-            <p className="text-yellow-400 text-sm">
-              ⚠️ Usando dados de demonstração - {error}
-            </p>
-          </div>
-        )}
         <div className="flex flex-wrap justify-center gap-8 mx-auto">
           {statisticsData.slice(0, 3).map((stat, index) => (
             <div key={index} className="w-full md:w-80 lg:w-96">