Interactive Finance Insights Feature Grid

<div
  class="bg-zinc-950 font-['Inter',sans-serif] min-h-screen flex items-center justify-center p-4 sm:p-8 antialiased selection:bg-indigo-500/30 relative text-base overflow-hidden">
  <!-- Dependencies -->
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400&display=swap" rel="stylesheet">
  <script src="https://code.iconify.design/iconify-icon/1.0.7/iconify-icon.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/matter-js/0.19.0/matter.min.js"></script>

  <!-- Global Noise Overlay -->
  <canvas id="noise-canvas"
    class="fixed inset-0 w-full h-full pointer-events-none z-50 opacity-20 mix-blend-overlay"></canvas>
  <script>
    (() => {
            const cvs = document.getElementById('noise-canvas');
            const gl = cvs.getContext('webgl');
            const prg = gl.createProgram();
            const vs = gl.createShader(gl.VERTEX_SHADER);
            gl.shaderSource(vs, 'attribute vec2 p;void main(){gl_Position=vec4(p,0,1);}');
            gl.compileShader(vs);
            const fs = gl.createShader(gl.FRAGMENT_SHADER);
            gl.shaderSource(fs, 'precision lowp float;uniform float t;void main(){float n=fract(sin(dot(gl_FragCoord.xy+t,vec2(12.9898,78.233)))*43758.5453);gl_FragColor=vec4(vec3(n),1.0);}');
            gl.compileShader(fs);
            gl.attachShader(prg, vs); gl.attachShader(prg, fs); gl.linkProgram(prg); gl.useProgram(prg);
            const buf = gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER, buf);
            gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-1,-1,1,-1,-1,1,1,1]), gl.STATIC_DRAW);
            const pos = gl.getAttribLocation(prg, 'p'); gl.enableVertexAttribArray(pos);
            gl.vertexAttribPointer(pos, 2, gl.FLOAT, false, 0, 0);
            const tLoc = gl.getUniformLocation(prg, 't');
            const render = (time) => {
                if(cvs.width !== innerWidth || cvs.height !== innerHeight) {
                    cvs.width = innerWidth; cvs.height = innerHeight;
                    gl.viewport(0, 0, cvs.width, cvs.height);
                }
                gl.uniform1f(tLoc, time * 0.01);
                gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
                requestAnimationFrame(render);
            };
            render(0);
        })();
  </script>

  <div class="max-w-6xl w-full grid grid-cols-1 lg:grid-cols-3 gap-6 lg:gap-8 relative z-10">

    <!-- Section 1: Insights -->
    <div class="relative h-[36rem] rounded-[2rem] overflow-hidden flex flex-col items-center pt-10 group"
      style="background: linear-gradient(180deg, #1f1f22 0%, #09090b 100%); box-shadow: inset 0 1px 2px rgba(255,255,255,0.05), inset 0 -1px 2px rgba(0,0,0,0.5), 0 25px 50px -12px rgba(0, 0, 0, 1); border: 1px solid #27272a;">
      <div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[150%] h-[60%] z-0 opacity-30"
        style="background: radial-gradient(ellipse at center, rgba(139, 92, 246, 0.4) 0%, rgba(249, 115, 22, 0.2) 50%, transparent 70%); filter: blur(40px);">
      </div>
      <div class="relative z-10 flex items-center gap-2 px-3 py-1.5 rounded-full text-xs text-zinc-300 mb-8"
        style="background: linear-gradient(180deg, #27272a 0%, #18181b 100%); box-shadow: inset 0 1px 1px rgba(255,255,255,0.1), inset 0 -1px 1px rgba(0,0,0,0.5), 0 4px 6px rgba(0,0,0,0.5); border: 1px solid #000;">
        <iconify-icon icon="solar:chart-square-linear" width="16" height="16"></iconify-icon>
        <span>Evaluate</span>
      </div>
      <h2 class="relative z-10 text-2xl font-normal tracking-tight text-white mb-3 text-center px-6">Automated Weekly
        Digest</h2>
      <p class="relative z-10 text-sm font-light text-zinc-400 text-center max-w-[85%] leading-relaxed">AI-driven
        summary of core portfolio movements and unusual activities.</p>
      <div class="absolute bottom-10 w-full flex flex-col items-center z-10">
        <div class="relative w-full h-24 mb-6 flex justify-center">
          <div
            class="absolute bottom-4 -ml-24 w-10 h-10 rounded-full flex items-center justify-center text-zinc-400 transition-transform duration-700 group-hover:-translate-y-2"
            style="background: linear-gradient(180deg, #27272a 0%, #18181b 100%); box-shadow: inset 0 1px 1px rgba(255,255,255,0.15), inset 0 -1px 1px rgba(0,0,0,0.8), 0 10px 15px rgba(0,0,0,0.8); border: 1px solid #000;">
            <iconify-icon icon="solar:wallet-linear" width="20" height="20"></iconify-icon>
          </div>
          <div
            class="absolute bottom-8 -ml-8 w-12 h-12 rounded-full flex items-center justify-center text-indigo-400 z-10 transition-transform duration-700 group-hover:-translate-y-3"
            style="background: linear-gradient(180deg, #27272a 0%, #18181b 100%); box-shadow: inset 0 1px 1px rgba(255,255,255,0.15), inset 0 -1px 1px rgba(0,0,0,0.8), 0 15px 20px rgba(0,0,0,0.9); border: 1px solid #000;">
            <iconify-icon icon="solar:banknote-linear" width="24" height="24"></iconify-icon>
          </div>
          <div
            class="absolute bottom-4 ml-12 w-10 h-10 rounded-full flex items-center justify-center text-zinc-400 transition-transform duration-700 group-hover:-translate-y-2"
            style="background: linear-gradient(180deg, #27272a 0%, #18181b 100%); box-shadow: inset 0 1px 1px rgba(255,255,255,0.15), inset 0 -1px 1px rgba(0,0,0,0.8), 0 10px 15px rgba(0,0,0,0.8); border: 1px solid #000;">
            <iconify-icon icon="solar:chart-linear" width="20" height="20"></iconify-icon>
          </div>
        </div>
        <h3 class="text-5xl font-normal tracking-tight text-white" style="text-shadow: 0 4px 10px rgba(0,0,0,0.5);">+22%
        </h3>
        <p class="text-sm font-light text-zinc-400 mt-2">Total Return</p>
      </div>
    </div>

    <!-- Section 2: Sorting -->
    <div id="physics-card" class="relative h-[36rem] rounded-[2rem] flex flex-col items-center pt-10 overflow-hidden"
      style="background: linear-gradient(180deg, #1f1f22 0%, #09090b 100%); box-shadow: inset 0 1px 2px rgba(255,255,255,0.05), inset 0 -1px 2px rgba(0,0,0,0.5), 0 25px 50px -12px rgba(0, 0, 0, 1); border: 1px solid #27272a;">
      <div class="absolute bottom-0 left-0 w-full h-[60%] z-0 pointer-events-none"
        style="background: linear-gradient(to top, rgba(109, 40, 217, 0.4) 0%, transparent 100%);"></div>
      <div
        class="relative z-20 flex items-center gap-2 px-3 py-1.5 rounded-full text-xs text-zinc-300 mb-8 pointer-events-none"
        style="background: linear-gradient(180deg, #27272a 0%, #18181b 100%); box-shadow: inset 0 1px 1px rgba(255,255,255,0.1), inset 0 -1px 1px rgba(0,0,0,0.5), 0 4px 6px rgba(0,0,0,0.5); border: 1px solid #000;">
        <iconify-icon icon="solar:layers-linear" width="16" height="16"></iconify-icon>
        <span>Sort</span>
      </div>
      <h2
        class="relative z-20 text-2xl font-normal tracking-tight text-white mb-3 text-center px-4 pointer-events-none">
        Intelligent Sorting</h2>
      <div id="physics-container" class="absolute inset-0 w-full h-full z-10 overflow-hidden">
        <div
          class="physics-tag absolute text-white px-4 py-2 rounded-full flex items-center gap-2 text-sm font-light cursor-grab active:cursor-grabbing"
          style="background: linear-gradient(180deg, #27272a 0%, #18181b 100%); border: 1px solid #000;"><iconify-icon
            icon="solar:city-linear"></iconify-icon>Taxes & Fees</div>
        <div
          class="physics-tag absolute text-white px-4 py-2 rounded-full flex items-center gap-2 text-sm font-light cursor-grab active:cursor-grabbing"
          style="background: linear-gradient(180deg, #27272a 0%, #18181b 100%); border: 1px solid #000;"><iconify-icon
            icon="solar:settings-linear"></iconify-icon>Shipping</div>
        <div
          class="physics-tag absolute text-white px-4 py-2 rounded-full flex items-center gap-2 text-sm font-light cursor-grab active:cursor-grabbing"
          style="background: linear-gradient(180deg, #27272a 0%, #18181b 100%); border: 1px solid #000;"><iconify-icon
            icon="solar:wallet-money-linear"></iconify-icon>Income</div>
        <div
          class="physics-tag absolute text-white px-4 py-2 rounded-full flex items-center gap-2 text-sm font-light cursor-grab active:cursor-grabbing"
          style="background: linear-gradient(180deg, #27272a 0%, #18181b 100%); border: 1px solid #000;"><iconify-icon
            icon="solar:bolt-linear"></iconify-icon>Utilities</div>
        <div
          class="physics-tag absolute text-white px-4 py-2 rounded-full flex items-center gap-2 text-sm font-light cursor-grab active:cursor-grabbing"
          style="background: linear-gradient(180deg, #27272a 0%, #18181b 100%); border: 1px solid #000;"><iconify-icon
            icon="solar:home-2-linear"></iconify-icon>Rent</div>
      </div>
      <script>
        window.addEventListener('load', () => {
                    const { Engine, Runner, Bodies, Composite, Mouse, MouseConstraint } = Matter;
                    const engine = Engine.create();
                    const container = document.getElementById('physics-container');
                    const tags = container.querySelectorAll('.physics-tag');
                    let width = container.offsetWidth, height = container.offsetHeight;
                    const ground = Bodies.rectangle(width/2, height + 25, width, 50, { isStatic: true });
                    const leftWall = Bodies.rectangle(-25, height/2, 50, height, { isStatic: true });
                    const rightWall = Bodies.rectangle(width + 25, height/2, 50, height, { isStatic: true });
                    Composite.add(engine.world, [ground, leftWall, rightWall]);
                    const bodies = Array.from(tags).map((tag, i) => {
                        const b = Bodies.rectangle(Math.random()*width, -100-(i*50), tag.offsetWidth, tag.offsetHeight, { restitution: 0.6, chamfer: { radius: 15 } });
                        Composite.add(engine.world, b);
                        return { elem: tag, body: b };
                    });
                    const mouse = Mouse.create(container);
                    Composite.add(engine.world, MouseConstraint.create(engine, { mouse, constraint: { stiffness: 0.2, render: { visible: false } } }));
                    Runner.run(Runner.create(), engine);
                    (function update() {
                        bodies.forEach(b => {
                            b.elem.style.transform = `translate(${b.body.position.x - b.elem.offsetWidth/2}px, ${b.body.position.y - b.elem.offsetHeight/2}px) rotate(${b.body.angle}rad)`;
                        });
                        requestAnimationFrame(update);
                    })();
                });
      </script>
    </div>

    <!-- Section 3: Forecast -->
    <div class="relative h-[36rem] rounded-[2rem] flex flex-col items-center pt-10 px-4 overflow-hidden"
      style="background: linear-gradient(180deg, #1f1f22 0%, #09090b 100%); box-shadow: inset 0 1px 2px rgba(255,255,255,0.05), 0 25px 50px -12px rgba(0, 0, 0, 1); border: 1px solid #27272a;">
      <div class="flex items-center gap-2 px-3 py-1.5 rounded-full text-xs text-zinc-300 mb-8"
        style="background: linear-gradient(180deg, #27272a 0%, #18181b 100%); border: 1px solid #000;">
        <iconify-icon icon="solar:target-linear" width="16" height="16"></iconify-icon>
        <span>Predict</span>
      </div>
      <h2 class="text-2xl font-normal tracking-tight text-white mb-3 text-center">Liquidity Projections</h2>
      <div class="mt-8 w-full flex-1 rounded-t-3xl p-6 flex flex-col relative overflow-hidden group"
        style="background: linear-gradient(135deg, #6d28d9 0%, #4c1d95 100%); border: 1px solid #5b21b6; border-bottom: none;">
        <div class="flex items-baseline gap-1 mt-2">
          <span class="text-2xl font-light text-white/80">+</span>
          <h3 class="text-4xl font-normal tracking-tight text-white">$7,250</h3>
        </div>
        <div class="mt-auto w-full h-40 relative">
          <svg width="100%" height="100%" viewBox="0 0 200 100" preserveAspectRatio="none"
            class="absolute bottom-0 left-0">
            <g stroke="rgba(255,255,255,0.15)" stroke-width="2" stroke-linecap="round">
              <line x1="20" y1="70" x2="20" y2="100" />
              <line x1="60" y1="50" x2="60" y2="100" />
              <line x1="100" y1="80" x2="100" y2="100" />
              <line x1="140" y1="30" x2="140" y2="100" />
              <line x1="180" y1="20" x2="180" y2="100" />
            </g>
            <line x1="180" y1="20" x2="180" y2="100" stroke="#fef08a" stroke-width="2" stroke-linecap="round"
              class="transition-all duration-700 group-hover:stroke-[3px]" />
            <circle cx="180" cy="20" r="3" fill="#fef08a" />
          </svg>
        </div>
        <div class="flex items-center justify-between mt-4 border-t border-white/10 pt-4">
          <span class="text-xs font-light text-white/80">30 Day Forecast</span>
          <span class="text-xs font-normal text-white px-2 py-1 rounded-full bg-black/40 border border-white/10">+11%</span>
        </div>
      </div>
    </div>
  </div>
</div>