From 6b14cda3f9f4b93019c3b852e9fb4eb36c8cebc0 Mon Sep 17 00:00:00 2001
From: Phan An <me@phanan.net>
Date: Wed, 26 Oct 2022 23:39:24 +0200
Subject: [PATCH] feat: add sponsor list to About modal (#1558)

---
 resources/assets/img/sponsors/exoscale.svg    |  6 ++
 resources/assets/img/sponsors/keycdn.svg      |  6 ++
 resources/assets/img/sponsors/render.svg      | 60 +++++++++++++++++++
 .../assets/img/sponsors/what-the-diff.svg     |  1 +
 .../js/components/meta/AboutKoelModal.spec.ts | 16 ++++-
 .../js/components/meta/AboutKoelModal.vue     | 32 +++++-----
 .../js/components/meta/SponsorList.spec.ts    | 11 ++++
 .../assets/js/components/meta/SponsorList.vue | 36 +++++++++++
 .../__snapshots__/AboutKoelModal.spec.ts.snap |  7 +--
 .../__snapshots__/SponsorList.spec.ts.snap    |  3 +
 resources/assets/js/sponsors.ts               | 46 ++++++++++++++
 11 files changed, 199 insertions(+), 25 deletions(-)
 create mode 100644 resources/assets/img/sponsors/exoscale.svg
 create mode 100644 resources/assets/img/sponsors/keycdn.svg
 create mode 100644 resources/assets/img/sponsors/render.svg
 create mode 100644 resources/assets/img/sponsors/what-the-diff.svg
 create mode 100644 resources/assets/js/components/meta/SponsorList.spec.ts
 create mode 100644 resources/assets/js/components/meta/SponsorList.vue
 create mode 100644 resources/assets/js/components/meta/__snapshots__/SponsorList.spec.ts.snap
 create mode 100644 resources/assets/js/sponsors.ts

diff --git a/resources/assets/img/sponsors/exoscale.svg b/resources/assets/img/sponsors/exoscale.svg
new file mode 100644
index 00000000..fc9e74b1
--- /dev/null
+++ b/resources/assets/img/sponsors/exoscale.svg
@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 487 96">
+  <path
+    d="M37.9 15.5L0 80.5h5.4l32.5-55.7v9.3L10.8 80.5h5.4l21.7-37.1v9.2L21.7 80.5h5.4l10.8-18.6v9.3l-5.4 9.3h43.3zm54.3 9.3H127v7.3h-26.5v12.1H124v7.4h-23.5V64h26.9v7.3H92.2V24.8zm88.2 0l-16.3 22.7 17 23.7h-9.7L159 53.5l-12.3 17.7h-9.4l16.9-23.6-16.3-22.8h9.7l11.6 16.8L171 24.8h9.4zm7.5 23.3V48c0-13.1 10.2-24 24.6-24s24.4 10.8 24.4 23.9v.1c0 13.1-10.2 24-24.6 24-14.3 0-24.4-10.8-24.4-23.9zm40.4 0V48c0-9-6.6-16.4-15.9-16.4s-15.8 7.3-15.8 16.3v.1c0 9 6.6 16.4 15.9 16.4s15.8-7.3 15.8-16.3zm18.9 16.3l5-5.8c4.5 3.8 9 6 14.8 6 5.1 0 8.3-2.4 8.3-5.8v-.1c0-3.3-1.9-5.1-10.6-7.1-10-2.4-15.6-5.3-15.6-13.8v-.1c0-8 6.7-13.4 16-13.4 6.8 0 12.3 2.1 17 5.8l-4.4 6.2c-4.2-3.1-8.4-4.8-12.7-4.8-4.8 0-7.6 2.5-7.6 5.5 0 3.6 2.1 5.2 11.2 7.3 9.9 2.4 15 5.9 15 13.6v.1c0 8.7-6.9 13.8-16.7 13.8-7.3.1-14.1-2.4-19.7-7.4zm47.7-16.3V48c0-13.2 10-24 24.1-24 8.7 0 13.9 3 18.4 7.2l-5.3 6c-3.8-3.4-7.8-5.7-13.2-5.7-8.8 0-15.4 7.2-15.4 16.3v.2c0 9.1 6.5 16.4 15.5 16.4 5.8 0 9.4-2.3 13.5-6l5.3 5.3c-4.9 5-10.2 8.2-19 8.2-13.8.1-23.9-10.4-23.9-23.8zm71.8-23.6h7.6L395 71.2h-8.7L381.5 60h-22.2l-4.8 11.2h-8.4l20.6-46.7zm11.8 28.3l-8.1-18.6-8 18.6h16.1zm28.3-28h8.2v39h24.6v7.4h-32.9V24.8zm45.1 0h34.8v7.3h-26.5v12.1h23.5v7.4h-23.5V64H487v7.3h-35.1V24.8z"
+    fill="#fff"/>
+  <defs/>
+</svg>
diff --git a/resources/assets/img/sponsors/keycdn.svg b/resources/assets/img/sponsors/keycdn.svg
new file mode 100644
index 00000000..6afdf165
--- /dev/null
+++ b/resources/assets/img/sponsors/keycdn.svg
@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 137.09 39.849">
+  <path
+    d="M3.971 32.104c.39.016.784.07 1.151.205v-.004l.056.02 4.842-4.723.178.237a12.32 12.32 0 0 0 .8.962l.103.119.207.222.12.118.117.119.104.103.118.119.104.103.133.119.12.104a12.868 12.868 0 0 0 8.025 3.065 12.983 12.983 0 0 0 6.915-1.792l.37.385 1.304 1.377a15.234 15.234 0 0 1-8.648 2.414 15.224 15.224 0 0 1-9.418-3.554l.015-.03-3.107 3.063a3.873 3.873 0 1 1-3.707-2.752h.1zM33.58 12.127a15.231 15.231 0 0 1 2.206 8.323 15.172 15.172 0 0 1-3.805 9.684l.015.015 1.91 2.029c.77-.104 1.54.162 2.073.725a2.405 2.405 0 0 1-.089 3.391 2.405 2.405 0 0 1-3.39-.089 2.388 2.388 0 0 1-.608-2.102 739.91 739.91 0 0 0-3.36-3.569l-.194-.207.222-.178a12 12 0 0 0 1.6-1.525 12.818 12.818 0 0 0 3.243-8.233 12.84 12.84 0 0 0-1.6-6.575zM6.597 3.076c.68-.01 1.32.259 1.794.744a2.39 2.39 0 0 1 .607 2.103l3.673 3.85-.223.178c-.577.459-1.11.962-1.599 1.525a12.927 12.927 0 0 0-1.658 14.822l-1.763 1.718a15.112 15.112 0 0 1-2.22-8.366c.076-3.565 1.465-7.009 3.798-9.691l-2.022-2.11a2.406 2.406 0 0 1-2.073-.727 2.405 2.405 0 0 1 .09-3.391 2.43 2.43 0 0 1 1.367-.64c.076-.008.153-.01.23-.016zM37.498 0a3.873 3.873 0 1 1-1.208 7.553v.005l-.06-.021-5.257 4.99-.178-.237c-.28-.37-.592-.74-.918-1.08l-.06-.075-.162-.163-.296-.296-.207-.177-.133-.119-.104-.089-.134-.118a12.862 12.862 0 0 0-7.966-3.021c-2.444-.06-4.828.548-6.9 1.792l-1.689-1.763a15.233 15.233 0 0 1 8.648-2.414 15.154 15.154 0 0 1 9.418 3.569h.03l3.48-3.305A3.873 3.873 0 0 1 37.5 0zM20.617 8.646a11.92 11.92 0 0 1 1.309.086c6.249.785 10.676 6.486 9.906 12.735-.785 6.25-6.486 10.677-12.735 9.907-6.249-.785-10.677-6.487-9.907-12.735.746-5.797 5.616-9.973 11.427-9.993zm-.171 4.894c-2.53.203-4.36 2.116-4.425 4.659.04 1.766.802 3.013 2.246 3.989l.348.189-.88 4.139h5.901l-.879-4.14c1.62-.834 2.547-2.365 2.593-4.177-.034-2.624-2.064-4.6-4.664-4.665l-.24.006zm.088-.025h-.015.015zm30.457.999c-.287 0-.489.058-.834.518l-4.772 6.21 2.07-11.644c.086-.431-.144-.575-.489-.575h-4.313c-.517 0-.66.259-.718.575l-3.709 21.016c-.086.46.201.633.517.633h4.313c.316 0 .632-.317.69-.633l1.15-6.555 2.501 6.555c.173.46.403.633.719.633h5.175c.374 0 .517-.345.374-.633l-3.68-8.05 6.555-7.446c.23-.23.201-.604-.202-.604zm20.014 5.923c0-3.422-1.955-6.182-6.124-6.182-4.801 0-8.079 2.128-9.027 7.82l-.317 1.898a8.854 8.854 0 0 0-.115 1.466c0 4.083 3.163 6.066 6.354 6.066 2.415 0 4.37-.287 6.296-.89.489-.145.633-.346.719-.806l.46-2.587v-.115c0-.26-.173-.374-.431-.374h-.115c-1.093.115-3.997.23-5.52.23-1.438 0-2.358-.201-2.358-1.639 0-.259.029-.546.086-.891h8.942a.737.737 0 0 0 .718-.633l.288-1.725c.086-.546.144-1.092.144-1.638zm-5.175-.202c0 .345-.058.748-.144 1.15h-4.255c.345-1.638 1.035-2.846 2.645-2.846 1.294 0 1.754.69 1.754 1.696zm24.527-5.29c0-.23-.259-.43-.517-.43h-4.744c-.316 0-.604.23-.719.545l-4.111 10.408h-.23c-.172 0-.201-.144-.23-.489l-.518-9.89c-.028-.316-.143-.575-.46-.575h-4.627c-.489 0-.719.23-.719.546v.087l1.667 13.685c.173 1.466.92 1.983 2.272 1.983h.374l-.403.95c-.345.833-.949 1.092-1.754 1.092-1.092 0-2.817-.173-3.881-.23h-.029c-.345 0-.69.287-.747.603l-.489 2.79v.085c0 .26.259.345.546.46.748.288 2.645.518 3.795.518 4.514 0 6.153-1.783 7.562-4.859l7.906-17.077a.533.533 0 0 0 .057-.202zm12.773.23c0-.287-.173-.373-.489-.46-.776-.2-2.156-.46-3.853-.46-4.427 0-7.273 2.214-8.193 7.562l-.374 2.156a11.156 11.156 0 0 0-.144 1.639c0 3.363 1.955 5.893 5.664 5.893a17.62 17.62 0 0 0 4.025-.46c.403-.086.633-.23.69-.603l.575-3.22v-.115c0-.26-.201-.432-.46-.432h-.057c-1.007.058-1.927.173-3.335.173-.978 0-1.553-.345-1.553-1.639a7.06 7.06 0 0 1 .115-1.236l.374-2.156c.402-2.387 1.236-2.904 2.472-2.904 1.409 0 2.272.144 3.249.201h.058c.316 0 .603-.23.66-.546l.576-3.249zm17.943-5.663c0-.288-.258-.49-.546-.49h-4.284c-.316 0-.603.26-.66.576l-.863 4.859c-.575-.087-1.553-.202-2.013-.202-5.232 0-7.849 2.185-8.797 7.504l-.403 2.243a9.023 9.023 0 0 0-.144 1.466c0 3.536 2.444 6.037 6.383 6.037 2.587 0 5.031-.402 6.584-.718.92-.202 1.063-.374 1.15-.92l3.594-20.27zm-7.158 9.43l-1.38 7.877a12.26 12.26 0 0 1-1.984.144c-1.236 0-1.667-.719-1.667-1.84a5.31 5.31 0 0 1 .114-1.121l.403-2.243c.287-1.667.977-2.932 2.587-2.932.69 0 1.352.057 1.927.115zm23.176.2c0-3.22-1.323-4.887-4.514-4.887-1.063 0-2.645.26-4.657 1.582l.144-.748c.086-.431-.115-.575-.49-.575h-3.938c-.316 0-.604.259-.661.575l-2.76 15.525c-.058.403.259.633.661.633h4.111c.432 0 .719-.288.777-.633l1.955-11.126c.517-.288 1.58-.633 2.443-.633.978 0 1.352.23 1.352 1.122 0 .488-.115.977-.202 1.466l-1.61 9.171c-.057.288 0 .633.489.633h4.313c.345 0 .66-.317.718-.633l1.582-8.97c.143-.805.287-1.754.287-2.501z"
+    fill="#fff"/>
+  <defs/>
+</svg>
diff --git a/resources/assets/img/sponsors/render.svg b/resources/assets/img/sponsors/render.svg
new file mode 100644
index 00000000..853c6f1e
--- /dev/null
+++ b/resources/assets/img/sponsors/render.svg
@@ -0,0 +1,60 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 23.0.2, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 785.2 171" style="enable-background:new 0 0 785.2 171;" xml:space="preserve">
+<style type="text/css">
+	.st0{enable-background:new    ;}
+	.st1{fill:#3F4358;}
+	.st2{fill:#46E3B7;}
+</style>
+<g id="Group_2766" transform="translate(-15853 -8503)">
+	<g class="st0">
+		<path class="st1" d="M16140,8582.1c-10,0-17.8,2.6-25.5,6.7v74.4c0,2-1.7,3.9-3.7,3.9h-17c-2,0-3.7-1.8-3.7-3.9v-96.8
+			c0-2,1.7-3.7,3.7-3.7h16.1c2,0,3.7,1.7,3.7,3.7v3.9c9.1-7,19.1-8.9,26.5-8.9c2,0,3.7,1.7,3.7,3.7v13.3
+			C16143.7,8580.4,16142,8582.1,16140,8582.1z"/>
+		<path class="st1" d="M16237.5,8623.3h-60.3v0.6c0,10.7,4.4,23.5,22.2,23.5c13.5,0,26.3-1.1,34-1.9c0.2,0,0.4,0,0.6,0
+			c1.9,0,3.3,0.9,3.3,2.8v12.2c0,3-0.6,4.3-3.9,4.8c-12,2.2-19.2,3.1-35.9,3.1c-18.5,0-44.8-10-44.8-46.4v-13.7
+			c0-28.9,16.1-47,44.4-47c28.5,0,44,19.4,44,47v10.4C16241.2,8621.7,16240.1,8623.3,16237.5,8623.3z M16216.6,8605.2
+			c0-14.4-8-22.8-19.4-22.8s-19.8,8.1-19.8,22.8v0.7h39.2V8605.2z"/>
+		<path class="st1" d="M16343.8,8667h-17c-2,0-3.7-1.8-3.7-3.9v-60.3c0-16.1-1.5-20.7-15.7-20.7c-6.3,0-13.1,2.6-20.9,6.7v74.4
+			c0,2-1.7,3.9-3.7,3.9h-17c-2,0-3.7-1.8-3.7-3.9v-96.8c0-2,1.7-3.7,3.7-3.7h16.1c2,0,3.7,1.7,3.7,3.7v3.9c10.7-6.8,17.8-8.9,30-8.9
+			c26.6,0,32,17.9,32,41.4v60.3C16347.5,8665.2,16345.9,8667,16343.8,8667z"/>
+		<path class="st1" d="M16449.3,8663.7c-11.5,3-25.3,4.8-37.2,4.8c-29.8,0-44.2-17.6-44.2-46.4v-14.2c0-28.9,14.4-46.4,44.2-46.4
+			c4.4,0,10.9,0.4,17.8,1.3v-32.7c0-2,1.7-3.7,3.7-3.7h17c2,0,3.7,1.7,3.7,3.7v128.8C16454.3,8661.5,16453.5,8662.6,16449.3,8663.7z
+			 M16429.9,8582.6c-5.2-0.7-13.3-1.3-17.8-1.3c-15.9,0-19.8,11.3-19.8,26.5v14.2c0,15.2,3.9,26.5,19.8,26.5
+			c6.7,0,14.2-0.6,17.8-1.3V8582.6z"/>
+		<path class="st1" d="M16559.9,8623.3h-60.3v0.6c0,10.7,4.4,23.5,22.2,23.5c13.5,0,26.3-1.1,34-1.9c0.2,0,0.4,0,0.6,0
+			c1.8,0,3.3,0.9,3.3,2.8v12.2c0,3-0.6,4.3-3.9,4.8c-12,2.2-19.2,3.1-35.9,3.1c-18.5,0-44.8-10-44.8-46.4v-13.7
+			c0-28.9,16.1-47,44.4-47c28.5,0,44,19.4,44,47v10.4C16563.6,8621.7,16562.5,8623.3,16559.9,8623.3z M16539,8605.2
+			c0-14.4-8-22.8-19.4-22.8c-11.5,0-19.8,8.1-19.8,22.8v0.7h39.2V8605.2z"/>
+		<path class="st1" d="M16634.5,8582.1c-10,0-17.8,2.6-25.5,6.7v74.4c0,2-1.7,3.9-3.7,3.9h-17c-2,0-3.7-1.8-3.7-3.9v-96.8
+			c0-2,1.7-3.7,3.7-3.7h16.1c2,0,3.7,1.7,3.7,3.7v3.9c9.1-7,19.1-8.9,26.5-8.9c2,0,3.7,1.7,3.7,3.7v13.3
+			C16638.2,8580.4,16636.5,8582.1,16634.5,8582.1z"/>
+	</g>
+	<g>
+		<polygon class="st2" points="15966.3,8503 15964.3,8503 15964.3,8505 15964.3,8523.6 15964.3,8525.6 15966.3,8525.6 
+			15984.9,8525.6 15986.9,8525.6 15986.9,8523.6 15986.9,8505 15986.9,8503 15984.9,8503 		"/>
+		<path class="st2" d="M15906.5,8503c-7.2,0-14.2,1.4-20.8,4.2c-6.4,2.7-12.1,6.6-17,11.5c-4.9,4.9-8.8,10.6-11.5,17
+			c-2.8,6.6-4.2,13.6-4.2,20.8v78.4v2h2h18.6h2v-2v-78.7c0.4-8.1,3.8-15.7,9.5-21.3c5.8-5.7,13.4-9,21.5-9.3h41.2h2v-2V8505v-2h-2
+			H15906.5z"/>
+		<polygon class="st2" points="16003.4,8577.2 16001.4,8577.2 16001.4,8579.2 16001.4,8597.8 16001.4,8599.8 16003.4,8599.8 
+			16022,8599.8 16024,8599.8 16024,8597.8 16024,8579.2 16024,8577.2 16022,8577.2 		"/>
+		<polygon class="st2" points="16003.4,8540.1 16001.4,8540.1 16001.4,8542.1 16001.4,8560.7 16001.4,8562.7 16003.4,8562.7 
+			16022,8562.7 16024,8562.7 16024,8560.7 16024,8542.1 16024,8540.1 16022,8540.1 		"/>
+		<polygon class="st2" points="16022,8503 16003.4,8503 16001.4,8503 16001.4,8505 16001.4,8523.6 16001.4,8525.6 16003.4,8525.6 
+			16022,8525.6 16024,8525.6 16024,8523.6 16024,8505 16024,8503 		"/>
+		<polygon class="st2" points="16003.4,8614.3 16001.4,8614.3 16001.4,8616.3 16001.4,8634.9 16001.4,8636.9 16003.4,8636.9 
+			16022,8636.9 16024,8636.9 16024,8634.9 16024,8616.3 16024,8614.3 16022,8614.3 		"/>
+		<polygon class="st2" points="16003.4,8651.4 16001.4,8651.4 16001.4,8653.4 16001.4,8672 16001.4,8674 16003.4,8674 16022,8674 
+			16024,8674 16024,8672 16024,8653.4 16024,8651.4 16022,8651.4 		"/>
+		<polygon class="st2" points="15966.3,8651.4 15964.3,8651.4 15964.3,8653.4 15964.3,8672 15964.3,8674 15966.3,8674 15984.9,8674 
+			15986.9,8674 15986.9,8672 15986.9,8653.4 15986.9,8651.4 15984.9,8651.4 		"/>
+		<polygon class="st2" points="15929.2,8651.4 15927.2,8651.4 15927.2,8653.4 15927.2,8672 15927.2,8674 15929.2,8674 15947.8,8674 
+			15949.8,8674 15949.8,8672 15949.8,8653.4 15949.8,8651.4 15947.8,8651.4 		"/>
+		<polygon class="st2" points="15892.1,8651.4 15890.1,8651.4 15890.1,8653.4 15890.1,8672 15890.1,8674 15892.1,8674 15910.7,8674 
+			15912.7,8674 15912.7,8672 15912.7,8653.4 15912.7,8651.4 15910.7,8651.4 		"/>
+		<polygon class="st2" points="15855,8651.4 15853,8651.4 15853,8653.4 15853,8672 15853,8674 15855,8674 15873.6,8674 
+			15875.6,8674 15875.6,8672 15875.6,8653.4 15875.6,8651.4 15873.6,8651.4 		"/>
+	</g>
+</g>
+</svg>
diff --git a/resources/assets/img/sponsors/what-the-diff.svg b/resources/assets/img/sponsors/what-the-diff.svg
new file mode 100644
index 00000000..3ff529f3
--- /dev/null
+++ b/resources/assets/img/sponsors/what-the-diff.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 700 82" fill="#fff"><path d="M80.7 11.2L72 45.6 59.1 11.2H42.9L30 45.6l-8.7-34.4H0l10.2 34.4 10.6 35.6H39l12-35.6 12 35.6h18.2l10.6-35.6L102 11.2z"/><path d="M80.7 11.2H102l-20.8 70H63m99.7-43.7c1.5 3 2.3 6.4 2.3 10.2v33.5h-19.3V51.6c0-2.6-.6-4.6-2-6.1-1.3-1.5-3.2-2.2-5.7-2.2-1.6 0-2.9.3-4.1 1s-2.1 1.6-2.7 2.9c-.6 1.2-1 2.7-1 4.5v29.5H111v-70h18.6v27.5h.6c1.2-3.4 3.2-6 6-7.8 2.8-1.9 6.2-2.8 10.2-2.8 3.8 0 7.1.8 9.9 2.5 2.7 1.6 4.9 3.9 6.4 6.9zm59.7.9c1.1 2.1 1.6 4.3 1.6 6.8v36h-17.5v-7.4h-.4c-1 2-2.3 3.5-3.8 4.8-1.5 1.2-3.2 2.1-5.1 2.6s-4 .8-6.2.8c-3.3 0-6.3-.6-8.8-1.7s-4.5-2.8-6-5c-1.4-2.3-2.2-5.1-2.2-8.6 0-2.9.5-5.3 1.5-7.4 1-2 2.3-3.7 4.1-5 1.7-1.3 3.8-2.3 6.1-3s4.8-1.1 7.5-1.3c2.9-.2 5.3-.5 7-.8 1.8-.3 3.1-.8 3.9-1.4s1.2-1.4 1.2-2.4v-.1c0-1.4-.5-2.4-1.6-3.1-1-.7-2.4-1.1-4-1.1-1.8 0-3.2.4-4.4 1.2s-1.8 2-2 3.6H176c.2-3.2 1.2-6.1 3-8.8s4.4-4.9 7.9-6.5 7.8-2.4 13-2.4c3.7 0 7.1.4 10.1 1.3s5.5 2.1 7.6 3.7c2.1 1.3 3.7 3.2 4.8 5.2zm-17 19.8a27.68 27.68 0 0 1-1.6.6c-.6.2-1.1.4-1.8.5-.6.2-1.3.3-2 .4s-1.4.3-2.2.4c-1.4.2-2.6.6-3.5 1.1s-1.6 1.1-2 1.9c-.4.7-.7 1.6-.7 2.5 0 1.5.5 2.6 1.5 3.3 1 .8 2.3 1.2 3.9 1.2 1.4 0 2.8-.3 4-.9 1.3-.6 2.3-1.4 3.1-2.6.8-1.1 1.2-2.5 1.2-4.1v-4.3zm59.8 8.8c-.4.1-.9.2-1.7.3s-1.4.2-2 .2c-.8 0-1.5-.1-2-.4-.5-.2-.9-.6-1.2-1.1s-.4-1.1-.4-1.8v-22h9.1V28.6h-9.1V16h-19.1v12.6H232v13.7h6.8v23.8c0 3.7.7 6.7 2.2 9.2 1.5 2.4 3.7 4.2 6.7 5.4 3 1.1 6.7 1.6 11 1.4 2.2-.1 4-.4 5.6-.7l3.7-.9-2.8-13.5zM295 30V11.2h62V30h-19.7v51.2h-22.7V30H295z"/><path d="M295 11.2h42.3V30H295zm123.7 26.3c1.5 3 2.3 6.4 2.3 10.2v33.5h-19.3V51.6c0-2.6-.6-4.6-2-6.1-1.3-1.5-3.2-2.2-5.7-2.2-1.6 0-2.9.3-4.1 1s-2.1 1.6-2.7 2.9c-.6 1.2-1 2.7-1 4.5v29.5H367v-70h18.6v27.5h.6c1.2-3.4 3.2-6 6-7.8 2.8-1.9 6.2-2.8 10.2-2.8 3.8 0 7.1.8 9.9 2.5 2.7 1.6 4.9 3.9 6.4 6.9zM448 59.2v.8c0 1.7.4 3.2 1.1 4.5a7.71 7.71 0 0 0 3.1 3.1c1.4.7 3 1.1 4.9 1.1 1.3 0 2.5-.2 3.7-.5 1.1-.4 2.1-.9 2.9-1.6s1.4-1.5 1.7-2.5H483c-.6 3.6-2 6.8-4.3 9.5s-5.3 4.7-9 6.2-8.1 2.2-13 2.2c-5.7 0-10.7-1.1-14.8-3.2s-7.3-5.2-9.5-9.3c-2.2-4-3.3-8.9-3.3-14.5 0-5.4 1.1-10.1 3.4-14.2 2.2-4 5.4-7.2 9.5-9.4s8.9-3.4 14.4-3.4c4.1 0 7.7.6 11 1.8s6.1 3 8.4 5.3 4.1 5.2 5.4 8.5 1.9 7.1 1.9 11.2v4.4H448zm0-10.3h17.2c0-1.5-.4-2.8-1.2-4-.8-1.1-1.8-2-3-2.7-1.3-.6-2.7-1-4.3-1s-3 .3-4.3 1c-1.3.6-2.3 1.5-3.1 2.7-.8 1.1-1.2 2.4-1.3 4zm102-37.7h-1-36v70h36 1c19.3 0 35-15.7 35-35h0c0-19.4-15.7-35-35-35z"/><path d="M513 45.2h36v36h-36zM595.7 20c-1.7-1.7-2.6-3.8-2.6-6.1 0-2.4.9-4.4 2.6-6.1s3.8-2.6 6.3-2.6 4.5.9 6.3 2.6c1.7 1.7 2.6 3.8 2.6 6.1 0 2.4-.9 4.4-2.6 6.1s-3.8 2.6-6.3 2.6c-2.4 0-4.5-.9-6.3-2.6zm92 5.8c0-1.2.3-2.2.9-3s1.9-1.1 3.7-1.1c.7 0 1.5.1 2.4.2s1.7.3 2.4.5L700 8.7c-1.1-.3-2.8-.6-5.2-1-2.3-.4-4.7-.6-7.1-.6-3.9 0-7.3.7-10.2 2.1s-5.1 3.6-6.7 6.5-2.4 6.5-2.4 10.9v1.5h-3-3.8-15.4v-2.3c0-1.2.3-2.2.9-3s1.9-1.1 3.7-1.1c.7 0 1.5.1 2.4.2s1.7.3 2.4.5l2.8-13.7c-1.1-.3-2.8-.6-5.2-1-2.3-.4-4.7-.6-7.1-.6-3.9 0-7.3.7-10.2 2.1s-5.1 3.6-6.7 6.5-2.4 6.5-2.4 10.9v1.5H620V42h6.9v39.2h19.3V42h15.4 3.8 3v39.2h19.3V42h9.8V28.2h-9.8v-2.4zM593 81.2h18V28.1h-18v53.1z"/></svg>
diff --git a/resources/assets/js/components/meta/AboutKoelModal.spec.ts b/resources/assets/js/components/meta/AboutKoelModal.spec.ts
index f16fe89d..845c68dc 100644
--- a/resources/assets/js/components/meta/AboutKoelModal.spec.ts
+++ b/resources/assets/js/components/meta/AboutKoelModal.spec.ts
@@ -6,18 +6,28 @@ import { waitFor } from '@testing-library/vue'
 import AboutKoelModel from './AboutKoelModal.vue'
 
 new class extends UnitTestCase {
+  private renderComponent () {
+    return this.render(AboutKoelModel, {
+      global: {
+        stubs: {
+          SponsorList: this.stub('sponsor-list')
+        }
+      }
+    })
+  }
+
   protected test () {
     it('renders', async () => {
       commonStore.state.current_version = 'v0.0.0'
       commonStore.state.latest_version = 'v0.0.0'
 
-      expect(this.render(AboutKoelModel).html()).toMatchSnapshot()
+      expect(this.renderComponent().html()).toMatchSnapshot()
     })
 
     it('shows new version', () => {
       commonStore.state.current_version = 'v1.0.0'
       commonStore.state.latest_version = 'v1.0.1'
-      this.actingAsAdmin().render(AboutKoelModel).getByTestId('new-version-about')
+      this.actingAsAdmin().renderComponent().getByTestId('new-version-about')
     })
 
     it('shows demo notation', async () => {
@@ -25,7 +35,7 @@ new class extends UnitTestCase {
       // @ts-ignore
       import.meta.env.VITE_KOEL_ENV = 'demo'
 
-      const { getByTestId } = this.render(AboutKoelModel)
+      const { getByTestId } = this.renderComponent()
 
       await waitFor(() => {
         getByTestId('demo-credits')
diff --git a/resources/assets/js/components/meta/AboutKoelModal.vue b/resources/assets/js/components/meta/AboutKoelModal.vue
index 096181d4..d21affe3 100644
--- a/resources/assets/js/components/meta/AboutKoelModal.vue
+++ b/resources/assets/js/components/meta/AboutKoelModal.vue
@@ -1,15 +1,11 @@
 <template>
   <div v-koel-focus class="about text-secondary" data-testid="about-modal" tabindex="0" @keydown.esc="close">
-    <header>
-      <h1 class="text-primary">About Koel</h1>
-    </header>
-
     <main>
       <div class="logo">
         <img alt="Koel's logo" src="@/../img/logo.svg" width="128">
       </div>
 
-      <p class="current-version">{{ currentVersion }}</p>
+      <p class="current-version">Koel {{ currentVersion }}</p>
 
       <p v-if="shouldNotifyNewVersion" data-testid="new-version-about">
         <a :href="latestVersionReleaseUrl" target="_blank">
@@ -25,7 +21,7 @@
         href="https://github.com/koel/koel/graphs/contributors" rel="noopener" target="_blank">contributors</a>.
       </p>
 
-      <div v-if="isDemo()" class="credit-wrapper" data-testid="demo-credits">
+      <div v-if="credits" class="credit-wrapper" data-testid="demo-credits">
         Music by
         <ul class="credits">
           <li v-for="credit in credits" :key="credit.name">
@@ -34,6 +30,8 @@
         </ul>
       </div>
 
+      <SponsorList/>
+
       <p>
         Loving Koel? Please consider supporting its development via
         <a href="https://github.com/users/phanan/sponsorship" rel="noopener" target="_blank">GitHub Sponsors</a>
@@ -55,6 +53,7 @@ import { isDemo } from '@/utils'
 import { useNewVersionNotification } from '@/composables'
 import { http } from '@/services'
 
+import SponsorList from '@/components/meta/SponsorList.vue'
 import Btn from '@/components/ui/Btn.vue'
 
 type DemoCredits = {
@@ -62,7 +61,7 @@ type DemoCredits = {
   url: string
 }
 
-const credits = ref<DemoCredits[]>([])
+const credits = ref<DemoCredits[] | null>(null)
 
 const {
   shouldNotifyNewVersion,
@@ -75,7 +74,7 @@ const emit = defineEmits(['close'])
 const close = () => emit('close')
 
 onMounted(async () => {
-  credits.value = isDemo() ? orderBy(await http.get<DemoCredits[]>('demo/credits'), 'name') : []
+  credits.value = isDemo() ? orderBy(await http.get<DemoCredits[]>('demo/credits'), 'name') : null
 })
 </script>
 
@@ -87,6 +86,7 @@ onMounted(async () => {
   width: 90%;
   border-radius: .6rem;
   overflow: hidden;
+  position: relative;
 
   main {
     padding: 2rem;
@@ -96,22 +96,16 @@ onMounted(async () => {
     }
   }
 
-  header, footer {
+  footer {
     padding: 1rem;
-    background: rgba(255, 255, 255, .05);
-  }
-
-  header {
-    font-size: 1.2rem;
-    border-bottom: 1px solid rgba(255, 255, 255, .1);
-    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
+    background: rgba(255, 255, 255, .02);
   }
 
   a {
     color: var(--color-text-primary);
 
     &:hover {
-      color: var(--color-highlight);
+      color: var(--color-accent);
     }
   }
 }
@@ -148,4 +142,8 @@ onMounted(async () => {
     }
   }
 }
+
+.sponsors {
+  margin-top: 1rem;
+}
 </style>
diff --git a/resources/assets/js/components/meta/SponsorList.spec.ts b/resources/assets/js/components/meta/SponsorList.spec.ts
new file mode 100644
index 00000000..55cc7088
--- /dev/null
+++ b/resources/assets/js/components/meta/SponsorList.spec.ts
@@ -0,0 +1,11 @@
+import { expect, it } from 'vitest'
+import UnitTestCase from '@/__tests__/UnitTestCase'
+import SponsorList from './SponsorList.vue'
+
+new class extends UnitTestCase {
+  protected test () {
+    it('renders', () => {
+      expect(this.render(SponsorList).html()).toMatchSnapshot()
+    })
+  }
+}
diff --git a/resources/assets/js/components/meta/SponsorList.vue b/resources/assets/js/components/meta/SponsorList.vue
new file mode 100644
index 00000000..4604bc06
--- /dev/null
+++ b/resources/assets/js/components/meta/SponsorList.vue
@@ -0,0 +1,36 @@
+<template>
+  <div class="sponsors">
+    <a
+      v-for="sponsor in sponsors"
+      :key="sponsor.url"
+      :href="sponsor.url"
+      :title="sponsor.description"
+      target="_blank"
+    >
+      <img :alt="sponsor.description" :src="sponsor.logo.src" :style="sponsor.logo.style">
+    </a>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import sponsors from '@/sponsors'</script>
+
+<style lang="scss" scoped>
+.sponsors {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  justify-content: center;
+  row-gap: 4px;
+  column-gap: 16px;
+  padding: 8px;
+  background: rgba(0, 0, 0, .1);
+  border-radius: 5px;
+  border: 1px solid rgba(255, 255, 255, .05);
+
+  img {
+    filter: brightness(10);
+    height: 32px;
+  }
+}
+</style>
diff --git a/resources/assets/js/components/meta/__snapshots__/AboutKoelModal.spec.ts.snap b/resources/assets/js/components/meta/__snapshots__/AboutKoelModal.spec.ts.snap
index 9dbe859e..61c5d14b 100644
--- a/resources/assets/js/components/meta/__snapshots__/AboutKoelModal.spec.ts.snap
+++ b/resources/assets/js/components/meta/__snapshots__/AboutKoelModal.spec.ts.snap
@@ -2,15 +2,12 @@
 
 exports[`renders 1`] = `
 <div class="about text-secondary" data-testid="about-modal" tabindex="0" data-v-6b5b01a9="">
-  <header data-v-6b5b01a9="">
-    <h1 class="text-primary" data-v-6b5b01a9="">About Koel</h1>
-  </header>
   <main data-v-6b5b01a9="">
     <div class="logo" data-v-6b5b01a9=""><img alt="Koel's logo" src="undefined/resources/assets/img/logo.svg" width="128" data-v-6b5b01a9=""></div>
-    <p class="current-version" data-v-6b5b01a9="">v0.0.0</p>
+    <p class="current-version" data-v-6b5b01a9="">Koel v0.0.0</p>
     <!--v-if-->
     <p class="author" data-v-6b5b01a9=""> Made with ❤️ by <a href="https://github.com/phanan" rel="noopener" target="_blank" data-v-6b5b01a9="">Phan An</a> and quite a few <a href="https://github.com/koel/core/graphs/contributors" rel="noopener" target="_blank" data-v-6b5b01a9="">awesome</a>&nbsp;<a href="https://github.com/koel/koel/graphs/contributors" rel="noopener" target="_blank" data-v-6b5b01a9="">contributors</a>. </p>
-    <!--v-if-->
+    <!--v-if--><br data-testid="sponsor-list" data-v-6b5b01a9="">
     <p data-v-6b5b01a9=""> Loving Koel? Please consider supporting its development via <a href="https://github.com/users/phanan/sponsorship" rel="noopener" target="_blank" data-v-6b5b01a9="">GitHub Sponsors</a> and/or <a href="https://opencollective.com/koel" rel="noopener" target="_blank" data-v-6b5b01a9="">OpenCollective</a>. </p>
   </main>
   <footer data-v-6b5b01a9=""><button type="button" data-testid="close-modal-btn" red="" rounded="" data-v-e368fe26="" data-v-6b5b01a9="">Close</button></footer>
diff --git a/resources/assets/js/components/meta/__snapshots__/SponsorList.spec.ts.snap b/resources/assets/js/components/meta/__snapshots__/SponsorList.spec.ts.snap
new file mode 100644
index 00000000..5f9ce23f
--- /dev/null
+++ b/resources/assets/js/components/meta/__snapshots__/SponsorList.spec.ts.snap
@@ -0,0 +1,3 @@
+// Vitest Snapshot v1
+
+exports[`renders 1`] = `<div class="sponsors" data-v-46e7cf66=""><a href="https://render.com" title="Render - Cloud Hosting for Developers" target="_blank" data-v-46e7cf66=""><img alt="Render - Cloud Hosting for Developers" src="undefined/resources/assets/img/sponsors/render.svg" style="height: 28px;" data-v-46e7cf66=""></a><a href="https://exoscale.ch" title="Exoscale - European Cloud Hosting" target="_blank" data-v-46e7cf66=""><img alt="Exoscale - European Cloud Hosting" src="undefined/resources/assets/img/sponsors/exoscale.svg" data-v-46e7cf66=""></a><a href="https://www.keycdn.com?a=11519" title="KeyCDN - Content delivery made easy" target="_blank" data-v-46e7cf66=""><img alt="KeyCDN - Content delivery made easy" src="undefined/resources/assets/img/sponsors/keycdn.svg" data-v-46e7cf66=""></a><a href="https://whatthediff.ai" title="What The Diff - AI powered changelog generation" target="_blank" data-v-46e7cf66=""><img alt="What The Diff - AI powered changelog generation" src="undefined/resources/assets/img/sponsors/what-the-diff.svg" style="height: 20px;" data-v-46e7cf66=""></a></div>`;
diff --git a/resources/assets/js/sponsors.ts b/resources/assets/js/sponsors.ts
new file mode 100644
index 00000000..ec44079c
--- /dev/null
+++ b/resources/assets/js/sponsors.ts
@@ -0,0 +1,46 @@
+import renderLogo from '@/../img/sponsors/render.svg'
+import exoscaleLogo from '@/../img/sponsors/exoscale.svg'
+import keyCdnLogo from '@/../img/sponsors/keycdn.svg'
+import whatTheDiffLogo from '@/../img/sponsors/what-the-diff.svg'
+
+type Sponsor = {
+  description: string
+  url: string
+  logo: {
+    src: string
+    style?: string
+  }
+}
+
+export default [
+  {
+    description: 'Render - Cloud Hosting for Developers',
+    url: 'https://render.com',
+    logo: {
+      src: renderLogo,
+      style: 'height: 28px'
+    }
+  },
+  {
+    description: 'Exoscale - European Cloud Hosting',
+    url: 'https://exoscale.ch',
+    logo: {
+      src: exoscaleLogo
+    }
+  },
+  {
+    description: 'KeyCDN - Content delivery made easy',
+    url: 'https://www.keycdn.com?a=11519',
+    logo: {
+      src: keyCdnLogo
+    }
+  },
+  {
+    description: 'What The Diff - AI powered changelog generation',
+    url: 'https://whatthediff.ai',
+    logo: {
+      src: whatTheDiffLogo,
+      style: 'height: 20px'
+    }
+  }
+] as Sponsor[]