Adds Sponsors banner to DDEV.com.

[bmartinez287]

The Issue

Adds Sponsor banner on ddev.com

How This PR Solves The Issue

Solves #339

[bmartinez287]

https://fe380118.ddev-com-front-end.pages.dev/

[rfay]

It really does look great! The progress section may require people to look more than once to understand it. Doesn't look exactly like a normal progress bar.

[bmartinez287]

I will look into some alternatives for the progress bar. Maybe one that's thicker.

[stasadev]

This is great!

I spent some time with ChatGPT, maybe it can help with different styles (but apparently it has too much in height):

      this.shadowRoot.innerHTML = `
        <style>
          :host {
            display: block;
            width: 100%;
          }

          .ddev-sponsor-us-banner {
            width: 100%;
            background-color: #fff8e7;
            padding: 1.5rem 1rem;
            box-sizing: border-box;
            color: #000;
            font-family: ui-sans-serif, system-ui, sans-serif;
          }

          .ddev-sponsor-us-banner__inner {
            max-width: 900px;
            margin: 0 auto;
          }

          .ddev-sponsor-us-banner__goal {
            text-align: center;
            margin-bottom: 1rem;
            font-size: 1rem;
          }

          .ddev-sponsor-us-banner__progress-container {
            width: 100%;
            height: 20px;
            background: #e0e0e0;
            border-radius: 10px;
            overflow: hidden;
            margin-bottom: 1.5rem;
          }

          .ddev-sponsor-us-banner__progress {
            height: 100%;
            background: #FF5D50;
            width: ${Math.min((json.total_monthly_average_income / goal) * 100, 100)}%;
          }

          .ddev-sponsor-us-banner__stats {
            display: flex;
            justify-content: space-between;
            text-align: center;
            flex-wrap: wrap;
            gap: 1rem;
          }

          .ddev-sponsor-us-banner__stat {
            flex: 1;
            min-width: 120px;
          }

          .ddev-sponsor-us-banner__number {
            font-weight: bold;
            font-size: 1.25rem;
          }

          .ddev-sponsor-us-banner__label {
            font-size: 0.75rem;
            color: #666;
            margin-top: 0.25rem;
          }

          .ddev-sponsor-us-banner__link {
            display: inline-block;
            padding: 0.5rem 1rem;
            border-radius: 0.25rem;
            font-weight: bold;
            text-decoration: none;
            color: #ffffff;
            background: #02a8e2;
            transition: background-color 0.3s ease;
          }

          .ddev-sponsor-us-banner__link:hover {
            background-color: #018bbf;
          }

          /* Dark mode */
          @media (prefers-color-scheme: dark) {
            .ddev-sponsor-us-banner {
              background-color: #22304a;
              color: #ffffff;
            }

            .ddev-sponsor-us-banner__label {
              color: #aaa;
            }
          }
        </style>

        <div class="ddev-sponsor-us-banner">
          <div class="ddev-sponsor-us-banner__inner">
            <div class="ddev-sponsor-us-banner__goal">
              Help us reach our goal of ${formattedGoal} per month
              <a href="https://github.com/sponsors/ddev" class="ddev-sponsor-us-banner__link">Sponsor Us</a>
            </div>
            <div class="ddev-sponsor-us-banner__progress-container">
              <div class="ddev-sponsor-us-banner__progress"></div>
            </div>
            <div class="ddev-sponsor-us-banner__stats">
              <div class="ddev-sponsor-us-banner__stat">
                <span class="ddev-sponsor-us-banner__number">${Math.round((json.total_monthly_average_income / goal) * 100)}%</span>
                <span class="ddev-sponsor-us-banner__label">Funded</span>
              </div>
              <div class="ddev-sponsor-us-banner__stat">
                <span class="ddev-sponsor-us-banner__number">${formattedIncome}</span>
                <span class="ddev-sponsor-us-banner__label">Raised</span>
              </div>
              <div class="ddev-sponsor-us-banner__stat">
                <span class="ddev-sponsor-us-banner__number">${formattedGoal}</span>
                <span class="ddev-sponsor-us-banner__label">Goal</span>
              </div>
            </div>
          </div>
        </div>
      `

[rfay]

I do like the textual part, saying what the goal is and where we're at.

When you are happy with this you can pull it @bmartinez287