Tradezella Feature Grid Section

<section class="sm:px-6 lg:px-8 z-20 bg-white w-full pt-24 pb-24 relative">

  <!-- Header Section -->
  <div class="flex flex-col text-center max-w-3xl mx-auto mb-16 space-y-4 items-center">
    <h2 class="text-4xl sm:text-5xl font-semibold tracking-tight text-gray-900">
      Powered by Tradezella
    </h2>
    <p class="text-lg text-gray-500 max-w-2xl leading-relaxed">
      Learn trading through structured lessons designed by experts, giving you the clarity to move from beginner to
      confident trader.
    </p>
  </div>

  <!-- Bento Grid Container -->
  <div class="grid grid-cols-1 md:grid-cols-6 gap-6 w-full max-w-7xl mr-auto ml-auto gap-x-6 gap-y-6">

    <!-- Card 1: Automated data ingestion -->
    <div
      class="col-span-1 md:col-span-3 bg-[#fafafa] rounded-3xl p-8 shadow-[inset_0_0_0_1px_rgba(0,0,0,0.04)] relative flex flex-col justify-between h-[420px] overflow-hidden group">
      <div class="relative z-10">
        <h3 class="text-lg font-semibold text-gray-900 inline tracking-tight">Automated data ingestion</h3>
        <span class="text-base text-gray-500">seamlessly capture every event across your connected systems, eliminating manual errors</span>
      </div>

      <!-- Illustration -->
      <div class="relative flex-1 flex flex-col items-center justify-end w-full pb-2 mt-8 z-10">
        <!-- Floating Button -->
        <div
          class="absolute top-[20%] z-30 px-5 py-2.5 bg-gradient-to-r from-[#6b8cff] to-[#5174ff] rounded-full text-white shadow-[0_8px_16px_-4px_rgba(81,116,255,0.4)] flex items-center gap-2 border border-blue-400/50">
          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none"
            stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"
            class="animate-spin text-white/90">
            <path d="M21 12a9 9 0 1 1-6.219-8.56" class=""></path>
          </svg>
          <span class="text-sm font-medium">Syncing Systems</span>
        </div>

        <!-- Stacked Papers -->
        <div class="relative w-full max-w-[85%] h-36 flex justify-center">
          <!-- Back paper -->
          <div class="absolute bottom-6 w-[85%] h-full bg-white/40 rounded-t-2xl border border-white/60 shadow-sm">
          </div>
          <!-- Mid paper -->
          <div class="absolute bottom-3 w-[92%] h-full bg-white/70 rounded-t-2xl border border-white/80 shadow-sm">
          </div>
          <!-- Front paper -->
          <div
            class="absolute bottom-0 w-full h-full bg-white rounded-t-2xl border border-gray-100/80 shadow-md flex flex-col overflow-hidden z-10">
            <div class="h-2.5 w-full bg-gradient-to-r from-[#5174ff] to-[#6b8cff]"></div>
            <div class="p-5 flex flex-col gap-3">
              <div class="w-1/3 h-2 bg-gray-100 rounded-full mb-2"></div>
              <div class="w-3/4 h-2 bg-gray-50 rounded-full"></div>
              <div class="w-1/2 h-2 bg-gray-50 rounded-full"></div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- Card 2: Advanced analytics dashboard -->
    <div
      class="col-span-1 md:col-span-3 bg-[#fafafa] rounded-3xl p-8 shadow-[inset_0_0_0_1px_rgba(0,0,0,0.04)] relative flex flex-col justify-between h-[420px] overflow-hidden group">
      <div class="relative z-10">
        <h3 class="text-lg font-semibold text-gray-900 inline tracking-tight">Advanced analytics dashboard</h3>
        <span class="text-base text-gray-500">transforms raw numbers into actionable insights, giving you clarity on performance and error rates</span>
      </div>

      <!-- Illustration -->
      <div class="relative flex-1 flex items-end justify-center w-full mt-8 z-10">
        <!-- Main window -->
        <div
          class="w-[90%] h-52 bg-white/95 backdrop-blur-sm rounded-t-2xl border border-gray-100 shadow-lg p-5 flex flex-col translate-y-6">
          <div class="flex items-center gap-2 mb-6">
            <div class="w-6 h-6 rounded-full bg-blue-50 flex items-center justify-center text-[#5174ff]">
              <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none"
                stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="">
                <path d="M21.21 15.89A10 10 0 1 1 8 2.83" class=""></path>
                <path d="M22 12A10 10 0 0 0 12 2v10z" class=""></path>
              </svg>
            </div>
            <span class="text-sm font-medium text-gray-600">Analytics</span>
          </div>

          <div class="flex items-end gap-2 h-24 px-2 opacity-80">
            <!-- Bar chart mock -->
            <div class="w-3 bg-[#e0e7ff] rounded-t-md h-[40%]"></div>
            <div class="w-3 bg-[#e0e7ff] rounded-t-md h-[60%]"></div>
            <div class="w-3 bg-[#e0e7ff] rounded-t-md h-[30%]"></div>
            <div class="w-3 bg-[#b5c5ff] rounded-t-md h-[80%]"></div>
            <div class="w-3 bg-[#b5c5ff] rounded-t-md h-[50%]"></div>
            <div class="w-3 bg-[#e0e7ff] rounded-t-md h-[70%]"></div>
            <div class="w-3 bg-[#e0e7ff] rounded-t-md h-[40%]"></div>
            <div class="w-3 bg-[#b5c5ff] rounded-t-md h-[90%]"></div>
            <div class="w-3 bg-[#e0e7ff] rounded-t-md h-[60%]"></div>

            <!-- Donut chart mock -->
            <div
              class="ml-auto w-14 h-14 rounded-full border-[5px] border-[#e0e7ff] border-t-[#5174ff] border-r-[#5174ff] transform rotate-45 mb-2">
            </div>
          </div>
        </div>

        <!-- Overlapping Net P&L Card -->
        <div
          class="absolute right-0 bottom-12 w-40 bg-white/95 backdrop-blur-md rounded-xl shadow-xl border border-gray-100/80 p-5 z-20">
          <span class="text-xs font-medium text-gray-500 block mb-4">Net Uptime</span>
          <div class="flex flex-col gap-2.5">
            <div class="h-2 w-full bg-gray-100 rounded-full"></div>
            <div class="h-2 w-4/5 bg-gray-100 rounded-full"></div>
            <div class="h-2 w-full bg-gray-100 rounded-full"></div>
          </div>
        </div>
      </div>
    </div>

    <!-- Card 3: Integrated simulation tool -->
    <div
      class="col-span-1 md:col-span-2 bg-[#fafafa] rounded-3xl p-8 shadow-[inset_0_0_0_1px_rgba(0,0,0,0.04)] relative flex flex-col justify-between h-[420px] overflow-hidden group">
      <!-- Illustration -->
      <div class="relative flex-1 flex flex-col items-center justify-center w-full mb-8 z-10">
        <!-- Candlesticks bg -->
        <div class="w-full flex items-center justify-between px-2 opacity-[0.35] h-28 mt-2">
          <div class="w-1.5 h-12 bg-[#8ca6ff] rounded-full relative">
            <div class="absolute top-2 bottom-2 -left-1 -right-1 bg-[#8ca6ff] rounded-sm"></div>
          </div>
          <div class="w-1.5 h-16 bg-[#8ca6ff] rounded-full relative translate-y-2">
            <div class="absolute top-4 bottom-4 -left-1 -right-1 bg-[#8ca6ff] rounded-sm"></div>
          </div>
          <div class="w-1.5 h-8 bg-[#8ca6ff] rounded-full relative -translate-y-4">
            <div class="absolute top-1 bottom-1 -left-1 -right-1 bg-[#8ca6ff] rounded-sm"></div>
          </div>
          <div class="w-1.5 h-20 bg-[#8ca6ff] rounded-full relative translate-y-1">
            <div class="absolute top-5 bottom-4 -left-1 -right-1 bg-[#8ca6ff] rounded-sm"></div>
          </div>
          <div class="w-1.5 h-14 bg-[#8ca6ff] rounded-full relative -translate-y-3">
            <div class="absolute top-3 bottom-3 -left-1 -right-1 bg-[#8ca6ff] rounded-sm"></div>
          </div>
          <div class="w-1.5 h-24 bg-[#8ca6ff] rounded-full relative translate-y-2">
            <div class="absolute top-6 bottom-6 -left-1 -right-1 bg-[#8ca6ff] rounded-sm"></div>
          </div>
          <div class="w-1.5 h-10 bg-[#8ca6ff] rounded-full relative -translate-y-1">
            <div class="absolute top-2 bottom-1 -left-1 -right-1 bg-[#8ca6ff] rounded-sm"></div>
          </div>
          <div class="w-1.5 h-16 bg-[#8ca6ff] rounded-full relative translate-y-4">
            <div class="absolute top-4 bottom-2 -left-1 -right-1 bg-[#8ca6ff] rounded-sm"></div>
          </div>
          <div class="w-1.5 h-12 bg-[#8ca6ff] rounded-full relative -translate-y-2">
            <div class="absolute top-2 bottom-2 -left-1 -right-1 bg-[#8ca6ff] rounded-sm"></div>
          </div>
        </div>

        <!-- Slider -->
        <div
          class="w-full flex items-center gap-3 mt-8 bg-white/60 backdrop-blur-sm px-4 py-3 rounded-2xl border border-white shadow-sm">
          <span class="text-xs font-medium text-gray-600">1m</span>
          <div class="flex-1 h-3.5 bg-gray-200/80 rounded-full relative shadow-[inset_0_1px_3px_rgba(0,0,0,0.1)]">
            <div class="absolute left-0 top-0 h-full w-[40%] bg-[#5174ff] rounded-full"></div>
            <div
              class="absolute left-[40%] top-1/2 -translate-y-1/2 w-6 h-6 bg-white rounded-full shadow-[0_2px_8px_rgba(81,116,255,0.4)] border-[5px] border-[#5174ff]">
            </div>
          </div>
          <span class="text-xs font-medium text-gray-600">1y</span>
        </div>
      </div>

      <div class="relative z-10">
        <h3 class="text-lg font-semibold text-gray-900 inline tracking-tight">Integrated simulation tool</h3>
        <span class="text-base text-gray-500">refines workflows before risking production data.</span>
      </div>
    </div>

    <!-- Card 4: System audit logs -->
    <div
      class="col-span-1 md:col-span-2 bg-[#fafafa] rounded-3xl p-8 shadow-[inset_0_0_0_1px_rgba(0,0,0,0.04)] relative flex flex-col justify-between h-[420px] overflow-hidden group">
      <!-- Illustration -->
      <div class="relative flex-1 flex items-center justify-center w-full mb-8 pt-4 z-10">
        <!-- Dashed Background Square -->
        <div
          class="absolute right-[5%] top-[5%] w-44 h-36 bg-[#e0e7ff]/30 border border-dashed border-[#b5c5ff] rounded-2xl z-0">
        </div>

        <!-- Note Card -->
        <div
          class="w-[90%] bg-white rounded-xl shadow-[0_8px_24px_-8px_rgba(0,0,0,0.08)] border border-gray-100 p-5 relative z-10 -translate-x-3">
          <span class="text-sm font-medium text-gray-700 block mb-3">System Alert</span>
          <p class="text-[13px] leading-relaxed text-gray-500">
            Executed failover on cluster-A at 10:24 after the
            <span class="bg-blue-50 text-[#5174ff] px-1 rounded inline-block my-0.5 border border-blue-100/50">manipulation of a relevant load spike with system confirmation.</span>
            Maintained stability.
          </p>

          <!-- Toolbar -->
          <div
            class="absolute -bottom-5 right-2 bg-gray-900 rounded-full px-4 py-2 flex items-center gap-3.5 shadow-xl text-white">
            <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none"
              stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="opacity-80">
              <path d="M4 7h6a4 4 0 0 1 4 4 4 4 0 0 1-4 4H4Z" class=""></path>
              <path d="M4 15h7a4 4 0 0 1 4 4 4 4 0 0 1-4 4H4Z" class=""></path>
              <line x1="4" x2="4" y1="7" y2="23" class=""></line>
            </svg>
            <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none"
              stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="opacity-80">
              <path d="M6 3v7a6 6 0 0 0 6 6 6 6 0 0 0 6-6V3" class=""></path>
              <line x1="4" x2="20" y1="21" y2="21" class=""></line>
            </svg>
            <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none"
              stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="opacity-80">
              <line x1="19" x2="5" y1="4" y2="4" class=""></line>
              <line x1="15" x2="9" y1="20" y2="20" class=""></line>
              <line x1="14" x2="10" y1="4" y2="20" class=""></line>
            </svg>
            <div class="w-[1px] h-3 bg-gray-700"></div>
            <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none"
              stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="opacity-80">
              <line x1="21" x2="3" y1="6" y2="6" class=""></line>
              <line x1="21" x2="9" y1="12" y2="12" class=""></line>
              <line x1="21" x2="7" y1="18" y2="18" class=""></line>
            </svg>
            <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none"
              stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="opacity-80">
              <line x1="21" x2="3" y1="6" y2="6" class=""></line>
              <line x1="21" x2="3" y1="12" y2="12" class=""></line>
              <line x1="21" x2="3" y1="18" y2="18" class=""></line>
            </svg>
          </div>
        </div>
      </div>

      <div class="relative z-10">
        <h3 class="text-lg font-semibold text-gray-900 inline tracking-tight">System audit logs</h3>
        <span class="text-base text-gray-500">track system states, anomalies, and execution paths.</span>
      </div>
    </div>

    <!-- Card 5: Fully custom event filtering -->
    <div
      class="col-span-1 md:col-span-2 bg-[#fafafa] rounded-3xl p-8 shadow-[inset_0_0_0_1px_rgba(0,0,0,0.04)] relative flex flex-col justify-between h-[420px] overflow-hidden group">
      <!-- Illustration -->
      <div class="relative flex-1 flex flex-col items-center justify-center w-full mb-8 mt-2 z-10">
        <!-- Background chart faint -->
        <div class="absolute inset-0 flex items-center justify-between px-4 opacity-10 pointer-events-none">
          <div class="w-2 h-16 bg-[#5174ff] relative">
            <div class="absolute top-2 bottom-4 -left-1.5 -right-1.5 bg-[#5174ff] rounded-sm"></div>
          </div>
          <div class="w-2 h-24 bg-[#5174ff] relative -translate-y-4">
            <div class="absolute top-6 bottom-8 -left-1.5 -right-1.5 bg-[#5174ff] rounded-sm"></div>
          </div>
          <div class="w-2 h-12 bg-[#5174ff] relative translate-y-6">
            <div class="absolute top-1 bottom-3 -left-1.5 -right-1.5 bg-[#5174ff] rounded-sm"></div>
          </div>
          <div class="w-2 h-20 bg-[#5174ff] relative -translate-y-2">
            <div class="absolute top-4 bottom-2 -left-1.5 -right-1.5 bg-[#5174ff] rounded-sm"></div>
          </div>
        </div>

        <!-- Filter Panel & Button -->
        <div class="w-full relative">
          <!-- Filter Button Floating -->
          <div
            class="absolute -top-6 right-2 z-20 px-4 py-2 bg-gradient-to-r from-[#6b8cff] to-[#5174ff] rounded-full text-white shadow-[0_8px_16px_-4px_rgba(81,116,255,0.4)] flex items-center gap-2 border border-blue-400/50">
            <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none"
              stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="">
              <circle cx="12" cy="12" r="10" fill="white" stroke="none" class=""></circle>
              <path d="M12 8v8M8 12h8" stroke="#5174ff" stroke-width="2" stroke-linecap="round" class=""></path>
            </svg>
            <span class="text-xs font-semibold tracking-wide">Apply Filters</span>
          </div>

          <!-- Filter Panel -->
          <div
            class="w-full bg-white/95 backdrop-blur-sm rounded-xl shadow-[0_8px_24px_-8px_rgba(0,0,0,0.1)] border border-gray-100 p-5 mt-4 relative z-10">
            <span class="text-[10px] font-semibold text-gray-400 uppercase tracking-wider block mb-3">Event Class</span>
            <div class="flex flex-wrap gap-2.5 mb-5">
              <div class="flex items-center gap-1.5">
                <div class="w-3.5 h-3.5 bg-[#5174ff] rounded-[3px] flex items-center justify-center text-white"><svg
                    xmlns="http://www.w3.org/2000/svg" width="8" height="8" viewBox="0 0 24 24" fill="none"
                    stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" class="">
                    <polyline points="20 6 9 17 4 12" class=""></polyline>
                  </svg></div>
                <span class="text-xs text-gray-600 font-medium">Errors</span>
              </div>
              <div class="flex items-center gap-1.5 ml-1">
                <div class="w-3.5 h-3.5 bg-gray-100 border border-gray-200 rounded-[3px] shadow-inner"></div>
                <span class="text-xs text-gray-600 font-medium">Logs</span>
              </div>
              <div class="flex items-center gap-1.5 ml-1">
                <div class="w-3.5 h-3.5 bg-gray-100 border border-gray-200 rounded-[3px] shadow-inner"></div>
                <span class="text-xs text-gray-600 font-medium">Metrics</span>
              </div>
              <div class="flex items-center gap-1.5">
                <div class="w-3.5 h-3.5 bg-gray-100 border border-gray-200 rounded-[3px] shadow-inner"></div>
                <span class="text-xs text-gray-600 font-medium">Traces</span>
              </div>
            </div>

            <div class="grid grid-cols-2 gap-4">
              <div>
                <span class="text-[10px] font-semibold text-gray-400 uppercase tracking-wider block mb-2">Latency</span>
                <div class="bg-gray-50/80 px-2.5 py-1.5 rounded-md border border-gray-100">
                  <span class="text-xs text-gray-700 font-medium">10ms - 50ms</span>
                </div>
              </div>
              <div>
                <span class="text-[10px] font-semibold text-gray-400 uppercase tracking-wider block mb-2">Success Rate</span>
                <div class="bg-gray-50/80 px-2.5 py-1.5 rounded-md border border-gray-100">
                  <span class="text-xs text-gray-700 font-medium">99.9%</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="relative z-10">
        <h3 class="text-lg font-semibold text-gray-900 inline tracking-tight">Fully custom event filtering</h3>
        <span class="text-base text-gray-500">isolates the exact anomalies you want to review.</span>
      </div>
    </div>

  </div>
</section>