feat: integrate custom logo and add cyberpunk trading animations

.gitignore

@@ -55,4 +55,4 @@ out/
 
 
 # Model
-model.onnx
+model.onnx

frontend/src/App.css

@@ -1137,3 +1137,87 @@
 .insight-reason-body p:last-child {
   margin-bottom: 0;
 }
+
+/* ==========================================
+   Animated Cyberpunk Glows & Micro-animations
+   ========================================== */
+@keyframes pulseGlow {
+  0% {
+    transform: scale(0.95);
+    box-shadow: 0 0 0 0 rgba(0, 242, 254, 0.7);
+  }
+  70% {
+    transform: scale(1.2);
+    box-shadow: 0 0 0 6px rgba(0, 242, 254, 0);
+  }
+  100% {
+    transform: scale(0.95);
+    box-shadow: 0 0 0 0 rgba(0, 242, 254, 0);
+  }
+}
+
+/* Neon logo glow effects */
+.glow-cyan {
+  filter: drop-shadow(0 0 6px rgba(0, 242, 254, 0.75));
+}
+.glow-violet {
+  filter: drop-shadow(0 0 6px rgba(161, 84, 255, 0.75));
+}
+
+/* Hover scales and glows on glass panels */
+.glass-panel {
+  transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
+}
+.glass-panel:hover {
+  border-color: rgba(0, 242, 254, 0.25);
+  box-shadow: 0 8px 32px 0 rgba(0, 242, 254, 0.03), inset 0 0 12px rgba(255, 255, 255, 0.02);
+}
+
+/* Watchlist items neon hover indicator */
+.watchlist-item {
+  position: relative;
+  overflow: hidden;
+}
+.watchlist-item::after {
+  content: '';
+  position: absolute;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  width: 3px;
+  background: var(--neon-cyan);
+  transform: scaleY(0);
+  transition: transform 0.2s ease;
+  transform-origin: bottom;
+}
+.watchlist-item:hover::after {
+  transform: scaleY(1);
+}
+.watchlist-item.active {
+  box-shadow: inset 0 0 12px rgba(0, 242, 254, 0.05);
+}
+
+/* AI Analyst Pulsing bias tags */
+.insight-tag {
+  animation: pulsePill 2s infinite ease-in-out;
+}
+@keyframes pulsePill {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.8; }
+}
+
+/* Stock Chart transition */
+.mini-chart-container, .chart-container {
+  animation: fadeInChart 0.6s cubic-bezier(0.16, 1, 0.3, 1);
+}
+@keyframes fadeInChart {
+  from {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+

frontend/src/components/Logo.tsx

@@ -0,0 +1,119 @@
+interface LogoProps {
+  size?: number;
+  className?: string;
+}
+
+export default function Logo({ size = 48, className = "" }: LogoProps) {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 100 100"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+      style={{ display: 'inline-block', verticalAlign: 'middle' }}
+    >
+      <defs>
+        {/* Glow Filters */}
+        <filter id="logo-glow-cyan" x="-30%" y="-30%" width="160%" height="160%">
+          <feGaussianBlur stdDeviation="2.5" result="blur" />
+          <feMerge>
+            <feMergeNode in="blur" />
+            <feMergeNode in="SourceGraphic" />
+          </feMerge>
+        </filter>
+        <filter id="logo-glow-violet" x="-30%" y="-30%" width="160%" height="160%">
+          <feGaussianBlur stdDeviation="3" result="blur" />
+          <feMerge>
+            <feMergeNode in="blur" />
+            <feMergeNode in="SourceGraphic" />
+          </feMerge>
+        </filter>
+        
+        {/* Gradients */}
+        <linearGradient id="violet-grad" x1="0%" y1="0%" x2="100%" y2="100%">
+          <stop offset="0%" stopColor="#d946ef" />
+          <stop offset="100%" stopColor="#a855f7" />
+        </linearGradient>
+        <linearGradient id="cyan-grad" x1="0%" y1="50%" x2="100%" y2="50%">
+          <stop offset="0%" stopColor="#22d3ee" />
+          <stop offset="100%" stopColor="#06b6d4" />
+        </linearGradient>
+      </defs>
+
+      {/* Background shape (hidden by default, transparent vector) */}
+      
+      {/* Concentric Guide Ring (Thin Outer) */}
+      <circle
+        cx="50"
+        cy="50"
+        r="44"
+        stroke="url(#violet-grad)"
+        strokeWidth="0.75"
+        strokeDasharray="4 8 20 8"
+        opacity="0.3"
+      />
+
+      {/* Main Q Circle body (Thick Outer Arc) */}
+      {/* Radius 38, Center 50,50. Gap on right (around y=50) */}
+      <path
+        d="M 87.2,42.1 A 38,38 0 1,0 87.2,57.9"
+        stroke="url(#violet-grad)"
+        strokeWidth="5.5"
+        strokeLinecap="round"
+        filter="url(#logo-glow-violet)"
+      />
+
+      {/* Inner Thin Arc */}
+      <path
+        d="M 79.0,42.2 A 30,30 0 1,0 79.0,57.8"
+        stroke="url(#violet-grad)"
+        strokeWidth="1.2"
+        opacity="0.55"
+      />
+
+      {/* Q Diagonal Tail */}
+      <line
+        x1="70.5"
+        y1="70.5"
+        x2="88"
+        y2="88"
+        stroke="url(#violet-grad)"
+        strokeWidth="6"
+        strokeLinecap="round"
+        filter="url(#logo-glow-violet)"
+      />
+      
+      {/* Decorative hud ticks inside the Q gap */}
+      <line x1="82" y1="46" x2="88" y2="46" stroke="url(#violet-grad)" strokeWidth="1" opacity="0.7" />
+      <line x1="82" y1="54" x2="88" y2="54" stroke="url(#violet-grad)" strokeWidth="1" opacity="0.7" />
+
+      {/* Neon Cyan Stock / Heartbeat Signal Line */}
+      {/* 1. Glow Layer */}
+      <path
+        d="M 12,50 L 35,50 L 39,54 L 43,46 L 47,62 L 51,38 L 55,60 L 59,48 L 63,52 L 67,49 L 71,51 L 76,50 L 88,50"
+        stroke="#00f2fe"
+        strokeWidth="2.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        filter="url(#logo-glow-cyan)"
+      />
+      {/* 2. Core High-Contrast Bright Layer */}
+      <path
+        d="M 12,50 L 35,50 L 39,54 L 43,46 L 47,62 L 51,38 L 55,60 L 59,48 L 63,52 L 67,49 L 71,51 L 76,50 L 88,50"
+        stroke="#e0fbfc"
+        strokeWidth="1.0"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+
+      {/* Neon glowing junction dots */}
+      <circle cx="35" cy="50" r="1.5" fill="#e0fbfc" filter="url(#logo-glow-cyan)" />
+      <circle cx="47" cy="62" r="1.5" fill="#e0fbfc" filter="url(#logo-glow-cyan)" />
+      <circle cx="51" cy="38" r="1.5" fill="#e0fbfc" filter="url(#logo-glow-cyan)" />
+      <circle cx="55" cy="60" r="1.5" fill="#e0fbfc" filter="url(#logo-glow-cyan)" />
+      <circle cx="76" cy="50" r="1.5" fill="#e0fbfc" filter="url(#logo-glow-cyan)" />
+    </svg>
+  );
+}

frontend/src/components/Navbar.tsx

@@ -1,5 +1,6 @@
 
-import { Sparkles, Wallet, LogOut } from 'lucide-react';
+import { Wallet, LogOut } from 'lucide-react';
+import Logo from './Logo';
 
 interface NavbarProps {
   user: any;
@@ -11,7 +12,7 @@ export default function Navbar({ user, onRechargeClick, onLogout }: NavbarProps)
   return (
     <header className="dashboard-header">
       <div className="header-left">
-        <Sparkles size={24} color="#00f2fe" className="glow-cyan" />
+        <Logo size={32} />
         <span className="logo-text">QuantIQ</span>
       </div>
       

frontend/src/pages/LandingPage.tsx

@@ -1,6 +1,7 @@
 import { useEffect, useRef } from 'react';
 import { Sparkles, Play, Activity, Cpu, ArrowRight, Zap } from 'lucide-react';
 import { ResponsiveContainer, AreaChart, Area } from 'recharts';
+import Logo from '../components/Logo';
 
 interface LandingPageProps {
   onGoogleLogin: (response: any) => Promise<void>;
@@ -57,7 +58,7 @@ export default function LandingPage({ onGoogleLogin, onMockLogin, googleClientId
       {/* Landing Header */}
       <header className="landing-header">
         <div className="brand">
-          <Sparkles size={28} color="#00f2fe" className="glow-cyan animate-pulse" />
+          <Logo size={40} className="glow-cyan" />
           <span className="brand-logo-text">QuantIQ</span>
         </div>
       </header>      {/* Main Content Sections */}