Analytics Dashboard Hero with Animated Background

<div class="relative min-h-screen w-full flex items-center justify-center p-4 md:p-8 overflow-x-hidden"
  style="background-color: #0d0e12; color: #cbd5e1; font-family: 'Inter', sans-serif; selection-background-color: rgba(16, 185, 129, 0.3);">
  <script src="https://cdn.tailwindcss.com"></script>
  <script src="https://code.iconify.design/iconify-icon/1.0.7/iconify-icon.min.js"></script>

  <!-- Background Layer -->
  <div class="fixed inset-0 pointer-events-none z-0">
    <canvas id="noise-canvas" class="w-full h-full opacity-[0.05]"></canvas>
    <script>
      (() => {
                const canvas = document.getElementById('noise-canvas');
                const gl = canvas.getContext('webgl');
                if (!gl) return;
                const pid = gl.createProgram();
                const shader = (src, type) => {
                    const s = gl.createShader(type);
                    gl.shaderSource(s, src);
                    gl.compileShader(s);
                    gl.attachShader(pid, s);
                };
                shader('attribute vec2 p;void main(){gl_Position=vec4(p,0,1);}', gl.VERTEX_SHADER);
                shader('precision lowp float;uniform float t;void main(){gl_FragColor=vec4(vec3(fract(sin(dot(gl_FragCoord.xy,vec2(12.9898,78.233))+t)*43758.5453)),1);}', gl.FRAGMENT_SHADER);
                gl.linkProgram(pid); gl.useProgram(pid);
                gl.bindBuffer(gl.ARRAY_BUFFER, gl.createBuffer());
                gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-1,-1, 1,-1, -1,1, 1,1]), gl.STATIC_DRAW);
                const p = gl.getAttribLocation(pid, 'p');
                gl.enableVertexAttribArray(p);
                gl.vertexAttribPointer(p, 2, gl.FLOAT, false, 0, 0);
                const t = gl.getUniformLocation(pid, 't');
                const draw = (time) => {
                    if (canvas.width !== window.innerWidth || canvas.height !== window.innerHeight) {
                        canvas.width = window.innerWidth; canvas.height = window.innerHeight;
                        gl.viewport(0, 0, canvas.width, canvas.height);
                    }
                    gl.uniform1f(t, time / 1000.0);
                    gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
                    requestAnimationFrame(draw);
                };
                draw(0);
            })();
    </script>
    <div
      class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[800px] h-[800px] bg-emerald-500/5 rounded-full blur-[120px]">
    </div>
  </div>

  <!-- Main Content -->
  <main class="max-w-[1000px] w-full grid grid-cols-1 md:grid-cols-12 gap-6 relative z-10">

    <!-- Automation Card -->
    <section
      class="md:col-span-5 rounded-[2rem] p-8 flex flex-col relative overflow-hidden border border-t-white/10 border-b-black/60 border-x-white/5 shadow-[0_30px_60px_-15px_rgba(0,0,0,0.9)]"
      style="background: linear-gradient(to bottom, #242730, #1a1c23);">
      <div class="self-start relative mb-12">
        <div class="absolute -left-2 -bottom-2 w-4 h-4 rounded-full bg-emerald-500/20 blur-sm"></div>
        <div
          class="absolute -left-4 -bottom-4 w-2 h-2 rounded-full bg-emerald-400 shadow-[0_0_10px_rgba(52,211,153,0.8)]">
        </div>
        <div
          class="bg-gradient-to-br from-emerald-400 to-emerald-600 text-white text-sm px-4 py-3 rounded-2xl rounded-bl-none shadow-[inset_0_1px_1px_rgba(255,255,255,0.4),0_10px_20px_rgba(16,185,129,0.2)] border border-emerald-300/20 relative z-10">
          Log every event seamlessly. Shall we start?
        </div>
      </div>

      <div id="eq-container"
        class="flex items-end justify-center gap-[6px] h-10 mb-8 px-4 py-2 rounded-xl border border-white/5 shadow-[inset_0_2px_10px_rgba(0,0,0,0.5)] w-fit mx-auto"
        style="background-color: #13151a;">
        <div
          class="w-2 rounded-full bg-gradient-to-t from-amber-600 to-amber-400 shadow-[0_0_8px_rgba(251,191,36,0.5)] transition-all duration-150"
          style="height: 40%"></div>
        <div
          class="w-2 rounded-full bg-gradient-to-t from-amber-600 to-amber-400 shadow-[0_0_8px_rgba(251,191,36,0.5)] transition-all duration-150"
          style="height: 80%"></div>
        <div
          class="w-2 rounded-full bg-gradient-to-t from-amber-600 to-amber-400 shadow-[0_0_8px_rgba(251,191,36,0.5)] transition-all duration-150"
          style="height: 60%"></div>
        <div
          class="w-2 rounded-full bg-gradient-to-t from-amber-600 to-amber-400 shadow-[0_0_8px_rgba(251,191,36,0.5)] transition-all duration-150"
          style="height: 90%"></div>
        <div class="w-2 rounded-full bg-white/5" style="height: 30%"></div>
        <div class="w-2 rounded-full bg-white/5" style="height: 45%"></div>
        <script>
          setInterval(() => {
                        document.querySelectorAll('#eq-container div').forEach(bar => {
                            if(bar.classList.contains('bg-white/5')) return;
                            bar.style.height = `${Math.floor(Math.random() * 70) + 30}%`;
                        });
                    }, 150);
        </script>
      </div>

      <div
        class="mx-auto mb-10 p-1.5 rounded-[1.5rem] border border-black/50 w-full max-w-[240px] shadow-[0_15px_30px_rgba(0,0,0,0.6),inset_0_1px_1px_rgba(255,255,255,0.1)]"
        style="background: linear-gradient(to bottom, #2a2d35, #121419);">
        <div
          class="relative bg-[#080b09] rounded-[1.25rem] p-6 flex items-center justify-center overflow-hidden shadow-[inset_0_0_30px_rgba(0,0,0,1)] border border-white/5"
          style="background-image: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,0,0,0.2) 2px, rgba(0,0,0,0.2) 4px);">
          <div
            class="font-mono text-5xl text-emerald-400 tracking-widest drop-shadow-[0_0_12px_rgba(52,211,153,0.7)] relative z-10 flex items-center">
            <span>0</span><span>3</span><span id="clock-colon" class="mx-1">:</span><span>4</span><span>7</span>
          </div>
        </div>
        <script>
          setInterval(() => { const c = document.getElementById('clock-colon'); c.style.opacity = c.style.opacity === '0' ? '1' : '0'; }, 1000);
        </script>
      </div>

      <div
        class="mx-auto mb-12 w-14 h-14 rounded-full flex items-center justify-center shadow-[inset_0_4px_10px_rgba(0,0,0,0.8),0_1px_1px_rgba(255,255,255,0.05)] border border-black/80"
        style="background-color: #13151a;">
        <div
          class="w-4 h-4 rounded-sm bg-red-500 shadow-[0_0_15px_rgba(239,68,68,0.7),inset_0_1px_2px_rgba(255,255,255,0.4)] border border-red-400/50 animate-pulse">
        </div>
      </div>

      <div class="mt-auto">
        <h2 class="text-2xl font-normal text-white tracking-tight mb-3">Streamline your processes</h2>
        <p class="text-sm text-slate-400 leading-relaxed">Guarantee all user touchpoints are recorded immediately using
          smart distribution and dynamic analysis.</p>
      </div>
    </section>

    <!-- Right Column -->
    <div class="md:col-span-7 flex flex-col gap-6">
      <!-- Visualization Card -->
      <section
        class="flex-1 rounded-[2rem] p-8 relative overflow-hidden border border-t-white/10 border-b-black/60 border-x-white/5 shadow-[0_30px_60px_-15px_rgba(0,0,0,0.9)] flex flex-col items-center justify-start pt-12"
        style="background: linear-gradient(to bottom, #242730, #1a1c23);">
        <h2 class="text-xl font-normal text-white tracking-tight mb-12 relative z-20">Dynamic Data Models</h2>
        <div class="relative w-full max-w-[280px] h-[160px] flex items-center justify-center"
          style="perspective: 1000px;">
          <div
            class="absolute w-24 h-24 rounded-2xl border border-white/5 shadow-[0_10px_30px_rgba(0,0,0,0.8)] -translate-x-20 scale-90 opacity-60"
            style="background-color: #13151a;"></div>
          <div
            class="absolute w-24 h-24 rounded-2xl border border-white/5 shadow-[0_10px_30px_rgba(0,0,0,0.8)] translate-x-20 scale-90 opacity-60"
            style="background-color: #13151a;"></div>
          <div id="floating-ui"
            class="relative z-10 w-44 h-32 rounded-2xl border border-t-white/10 border-white/5 shadow-[0_25px_50px_rgba(0,0,0,0.9),inset_0_1px_0_rgba(255,255,255,0.1)] p-3 flex flex-col gap-2"
            style="background: linear-gradient(to bottom, #2a2d35, #1e2028);">
            <div class="flex gap-1.5 mb-1">
              <div class="w-2 h-2 rounded-full bg-amber-500 shadow-[0_0_5px_rgba(245,158,11,0.5)]"></div>
              <div class="w-2 h-2 rounded-full bg-emerald-500 shadow-[0_0_5px_rgba(16,185,129,0.5)]"></div>
            </div>
            <div class="flex gap-2 h-full">
              <div class="flex-1 bg-amber-500/10 rounded-lg border border-amber-500/20 relative overflow-hidden">
                <div class="absolute inset-0 bg-gradient-to-b from-amber-400/20 to-transparent"></div>
              </div>
              <div
                class="flex-[1.5] bg-emerald-500/10 rounded-lg border border-emerald-500/20 relative overflow-hidden">
                <div class="absolute inset-0 bg-gradient-to-b from-emerald-400/20 to-transparent"></div>
              </div>
            </div>
          </div>
          <script>
            document.getElementById('floating-ui').animate([
                            { transform: 'translateY(0px)' }, { transform: 'translateY(-12px)' }, { transform: 'translateY(0px)' }
                        ], { duration: 4000, iterations: Infinity, easing: 'ease-in-out' });
          </script>
        </div>
      </section>

      <!-- Infrastructure Card -->
      <section
        class="rounded-[2rem] p-8 border border-t-white/10 border-b-black/60 border-x-white/5 shadow-[0_30px_60px_-15px_rgba(0,0,0,0.9)]"
        style="background: linear-gradient(to bottom, #242730, #1a1c23);">
        <h2 class="text-xl font-normal text-white tracking-tight mb-6">Unified Infrastructure</h2>
        <div
          class="rounded-2xl p-6 border border-white/5 shadow-[inset_0_10px_30px_rgba(0,0,0,0.8),0_1px_0_rgba(255,255,255,0.05)] flex items-center justify-between relative overflow-hidden"
          style="background-color: #111318;">
          <div class="absolute -left-10 -top-10 w-32 h-32 bg-emerald-500/10 rounded-full blur-2xl"></div>
          <div class="flex items-center gap-4 relative z-10">
            <div
              class="w-12 h-12 rounded-xl shadow-[0_5px_15px_rgba(0,0,0,0.5),inset_0_1px_1px_rgba(255,255,255,0.1)] border border-black/50 flex items-center justify-center"
              style="background: linear-gradient(to bottom right, #2a2d35, #1a1c23);">
              <iconify-icon icon="solar:server-square-linear" width="24" height="24"
                class="text-emerald-400 drop-shadow-[0_2px_4px_rgba(0,0,0,0.5)]"></iconify-icon>
            </div>
            <span class="text-lg font-normal text-white">Core Vector</span>
          </div>
          <div class="flex flex-col gap-3 relative z-10 border-l border-white/5 pl-6">
            <div>
              <div class="text-sm font-normal text-white">9,200+</div>
              <div class="text-xs text-slate-500">Live Connections</div>
            </div>
            <div>
              <div class="text-sm font-normal text-white">48</div>
              <div class="text-xs text-slate-500">Active Relays</div>
            </div>
          </div>
        </div>
      </section>
    </div>
  </main>
</div>