rewrite this page "<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Futuristic Hologram Dashboard</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <!-- Bootstrap CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  
  <!-- Anime.js -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js"></script>

  <!-- Custom Font -->
  <link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@500&display=swap" rel="stylesheet">

  <style>
    * {
      font-family: 'Orbitron', sans-serif;
      letter-spacing: 0.5px;
    }

    body {
      background: radial-gradient(ellipse at top, #050d1a 0%, #000000 100%);
      color: #00ffe7;
      margin: 0;
      padding: 0;
      overflow-x: hidden;
    }

    .neon-glow {
      text-shadow: 0 0 5px #00ffe7, 0 0 10px #00ffe7, 0 0 20px #00ffe7;
    }

    .holo-panel {
      background: rgba(0, 255, 231, 0.05);
      border: 1px solid rgba(0, 255, 231, 0.2);
      border-radius: 20px;
      box-shadow: 0 0 40px rgba(0, 255, 231, 0.2);
      backdrop-filter: blur(10px);
      padding: 30px;
      margin-bottom: 20px;
      transition: transform 0.3s ease, box-shadow 0.3s ease;
    }

    .holo-panel:hover {
      transform: translateY(-5px);
      box-shadow: 0 0 60px rgba(0, 255, 231, 0.4);
    }

    .holo-sidebar {
      min-height: 100vh;
      background: rgba(0, 255, 231, 0.02);
      border-right: 1px solid rgba(0, 255, 231, 0.2);
      box-shadow: inset -5px 0 20px rgba(0, 255, 231, 0.1);
    }

    .holo-sidebar a {
      color: #00ffe7;
      padding: 12px 20px;
      display: block;
      text-decoration: none;
      border-left: 3px solid transparent;
      transition: all 0.3s ease;
    }

    .holo-sidebar a:hover {
      background: rgba(0, 255, 231, 0.05);
      border-left: 3px solid #00ffe7;
    }

    .stat-number {
      font-size: 2rem;
      font-weight: bold;
    }

    .radar-animation {
      position: absolute;
      top: -50px;
      right: -50px;
      width: 200px;
      height: 200px;
      border-radius: 50%;
      border: 2px dashed #00ffe7;
      animation: rotate 6s linear infinite;
      opacity: 0.1;
    }

    @keyframes rotate {
      0% { transform: rotate(0deg);}
      100% { transform: rotate(360deg);}
    }
  </style>
</head>
<body>

<div class="container-fluid">
  <div class="row">

    <!-- Sidebar -->
    <div class="col-md-2 holo-sidebar py-4 px-3">
      <h4 class="neon-glow">🧠 HoloBoard</h4>
      <hr style="border-color: rgba(0,255,231,0.2)">
      <a href="#">Dashboard</a>
      <a href="#">Analytics</a>
      <a href="#">AI Modules</a>
      <a href="#">System Logs</a>
      <a href="#">Settings</a>
    </div>

    <!-- Main Content -->
    <div class="col-md-10 p-5 position-relative">
      <div class="radar-animation"></div>
      
      <div class="row g-4">
        <div class="col-md-4">
          <div class="holo-panel" id="card1">
            <h5>👤 Active Users</h5>
            <div class="stat-number">1,204</div>
          </div>
        </div>
        <div class="col-md-4">
          <div class="holo-panel" id="card2">
            <h5>💵 Monthly Revenue</h5>
            <div class="stat-number">$18,400</div>
          </div>
        </div>
        <div class="col-md-4">
          <div class="holo-panel" id="card3">
            <h5>⚙️ System Health</h5>
            <div class="stat-number">98.7%</div>
          </div>
        </div>
      </div>

      <div class="row g-4 mt-4">
        <div class="col-md-6">
          <div class="holo-panel">
            <h5>📊 AI Predictions</h5>
            <p>Last 24h: 2,302 models served</p>
            <p>Accuracy: 92.4%</p>
          </div>
        </div>
        <div class="col-md-6">
          <div class="holo-panel">
            <h5>🧠 Neural Sync</h5>
            <p>Status: Synchronized</p>
            <p>Latency: 12ms</p>
          </div>
        </div>
      </div>
    </div>

  </div>
</div>

<!-- Anime.js Animations -->
<script>
  anime({
    targets: '.holo-panel',
    opacity: [0, 1],
    translateY: [30, 0],
    delay: anime.stagger(150),
    easing: 'easeOutExpo',
    duration: 1000
  });

  anime({
    targets: '.holo-sidebar a',
    translateX: [-30, 0],
    opacity: [0, 1],
    delay: anime.stagger(100, { start: 500 }),
    easing: 'easeOutExpo',
    duration: 600
  });
</script>

</body>
</html>
". i want white background with google logo color light animation glowing and animation lightly in the background and card and ui should be glassmorphism animate effect