Untitled

{/* Tray Background SVG */}
<div className={styles.trayBackground}>
  <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="69" viewBox="0 0 558 69" preserveAspectRatio="xMidYMid slice" colorInterpolation="linearRGB">
    <defs>
      <linearGradient id="outer-fill" x1="0" x2="0" y1="0" y2="1">
        {/* Multiple gradient stops for the outer area */}
      </linearGradient>
      <linearGradient id="tray-fill" x1="0" x2="0" y1="0" y2="1">
        {/* Multiple gradient stops for the tray itself */}
      </linearGradient>
      {/* More gradients and path definitions... */}
    </defs>
    {/* Rectangles and paths that create the tray visual effect */}
  </svg>
</div>