Add sponsor section

docs/assets/fluent-emoji--heart-suit.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><rect width="32" height="32" fill="none"/><g fill="none"><g filter="url(#f688id3)"><path fill="url(#f688id0)" d="M21.008 5.317c-2.84.502-5.011 3.856-5.011 3.856s-2.18-3.354-5.012-3.856c-7.012-1.235-9.903 4.93-8.732 9.518c1.73 6.778 10.053 12.852 12.834 14.73c.55.371 1.27.371 1.83 0c2.791-1.878 11.113-7.952 12.834-14.73c1.16-4.588-1.73-10.753-8.743-9.518"/><path fill="url(#f688id6)" d="M21.008 5.317c-2.84.502-5.011 3.856-5.011 3.856s-2.18-3.354-5.012-3.856c-7.012-1.235-9.903 4.93-8.732 9.518c1.73 6.778 10.053 12.852 12.834 14.73c.55.371 1.27.371 1.83 0c2.791-1.878 11.113-7.952 12.834-14.73c1.16-4.588-1.73-10.753-8.743-9.518"/><path fill="url(#f688id7)" d="M21.008 5.317c-2.84.502-5.011 3.856-5.011 3.856s-2.18-3.354-5.012-3.856c-7.012-1.235-9.903 4.93-8.732 9.518c1.73 6.778 10.053 12.852 12.834 14.73c.55.371 1.27.371 1.83 0c2.791-1.878 11.113-7.952 12.834-14.73c1.16-4.588-1.73-10.753-8.743-9.518"/></g><g filter="url(#f688id4)"><path fill="url(#f688id1)" d="M15.957 14.762V9.486c.728-.905 2.857-2.157 3.831-2.67c-2.337 2.136-3.528 6.187-3.831 7.946"/></g><g filter="url(#f688id5)"><path fill="url(#f688id2)" d="M15.957 14.762V9.486c-.729-.905-2.858-2.157-3.832-2.67c2.337 2.136 3.528 6.187 3.832 7.946"/></g><defs><linearGradient id="f688id0" x1="16" x2="16" y1="5.157" y2="29.843" gradientUnits="userSpaceOnUse"><stop stop-color="#ff3f67"/><stop offset="1" stop-color="#f83ba1"/></linearGradient><linearGradient id="f688id1" x1="15.391" x2="18.5" y1="12.595" y2="8.669" gradientUnits="userSpaceOnUse"><stop stop-color="#fe375c"/><stop offset="1" stop-color="#fe375c" stop-opacity="0"/></linearGradient><linearGradient id="f688id2" x1="16.522" x2="13.413" y1="12.595" y2="8.669" gradientUnits="userSpaceOnUse"><stop offset=".161" stop-color="#ff5573"/><stop offset="1" stop-color="#ff5573" stop-opacity="0"/></linearGradient><filter id="f688id3" width="28.6" height="25.886" x="2" y="4.557" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/><feOffset dx=".6" dy="-.6"/><feGaussianBlur stdDeviation=".625"/><feComposite in2="hardAlpha" k2="-1" k3="1" operator="arithmetic"/><feColorMatrix values="0 0 0 0 0.807843 0 0 0 0 0.176471 0 0 0 0 0.415686 0 0 0 1 0"/><feBlend in2="shape" result="effect1_innerShadow_18_4033"/><feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/><feOffset dx=".6" dy=".6"/><feGaussianBlur stdDeviation=".625"/><feComposite in2="hardAlpha" k2="-1" k3="1" operator="arithmetic"/><feColorMatrix values="0 0 0 0 0.796078 0 0 0 0 0.207843 0 0 0 0 0.301961 0 0 0 1 0"/><feBlend in2="effect1_innerShadow_18_4033" result="effect2_innerShadow_18_4033"/></filter><filter id="f688id4" width="4.831" height="8.945" x="15.457" y="6.316" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_18_4033" stdDeviation=".25"/></filter><filter id="f688id5" width="4.831" height="8.945" x="11.625" y="6.316" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_18_4033" stdDeviation=".25"/></filter><radialGradient id="f688id6" cx="0" cy="0" r="1" gradientTransform="rotate(-25.71 45.618 -13.992)scale(20.7042 22.7813)" gradientUnits="userSpaceOnUse"><stop offset=".891" stop-color="#ff657c" stop-opacity="0"/><stop offset="1" stop-color="#ff657c"/></radialGradient><radialGradient id="f688id7" cx="0" cy="0" r="1" gradientTransform="rotate(-126.248 9.625 .57)scale(4.35524 1.65175)" gradientUnits="userSpaceOnUse"><stop stop-color="#ff5772"/><stop offset="1" stop-color="#ff5772" stop-opacity="0"/></radialGradient></defs></g></svg>

docs/assets/ri--heart-add-fill.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><rect width="24" height="24" fill="none"/><path fill="currentColor" d="M19 14v3h3v2h-3v3h-2v-3h-3v-2h3v-3zm1.243-9.243a6 6 0 0 1 .507 7.91a6 6 0 0 0-8.06 8.127l-.69.691l-8.479-8.492a6 6 0 0 1 8.48-8.464a6 6 0 0 1 8.242.228"/></svg>

docs/index.md

@@ -23,21 +23,18 @@ hero:
 ---
 
 <script setup>
-import AvatarKonstantin from './assets/avatar-konstantin.png';
-import AvatarYonatan from './assets/avatar-yonatan.jpeg';
-
 const quotes = [
 	{
 		quote: 'The missing part in the JS ecosystem for building web-first media apps.',
 		author: 'Yonatan, Gling AI',
-		image: AvatarYonatan,
-		url: 'https://www.gling.ai/',
+		image: '/avatars/yonatan.jpeg',
+		url: 'https://x.com/yonatanbd',
 	},
 	{
 		quote: 'Mediabunny gives you low-level control with high-level ease. It’s fast, lightweight, and finally feels like media processing built for the web, not ported to it.',
 		author: 'Konstantin, Diffusion Studio',
-		image: AvatarKonstantin,
-		url: 'https://github.com/k9p5',
+		image: '/avatars/konstantin.png',
+		url: 'https://x.com/konstipaulus',
 	}
 ];
 
@@ -85,9 +82,20 @@ const bundleSizes = [
 	{ name: 'All features', size: 69.62 },
 	{ name: '@remotion/webcodecs', size: 87.2 + 20.8, isThirdParty: true },
 ];
+
+const sponsors = {
+	gold: [
+		{ image: '/sponsors/gling.svg', name: 'Gling AI', url: 'https://www.gling.ai/' },
+		{ image: '/sponsors/diffusionstudio.png', name: 'Diffusion Studio', url: 'https://diffusion.studio/' },
+	],
+	individual: [
+		{ image: 'https://avatars.githubusercontent.com/u/30229596', name: 'Pablo Bonilla', url: 'https://github.com/devPablo' },
+		{ image: 'https://avatars.githubusercontent.com/u/58149663', name: 'H7GhosT', url: 'https://github.com/H7GhosT' },
+	],
+};
 </script>
 
-<div class="flex gap-4 flex-wrap justify-center items-center">
+<div class="flex gap-6 flex-wrap justify-center items-center">
 	<div v-for="quote in quotes" class="bg-(--vp-c-bg-soft) w-80 p-4 rounded-2xl flex shrink-0 flex-col relative">
 		<svg class="size-8 absolute -top-3 left-2.5 text-(--vp-c-gray-1)" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><path fill="currentColor" d="M12 12a1 1 0 0 0 1-1V8.558a1 1 0 0 0-1-1h-1.388q0-.527.062-1.054q.093-.558.31-.992t.559-.683q.34-.279.868-.279V3q-.868 0-1.52.372a3.3 3.3 0 0 0-1.085.992a4.9 4.9 0 0 0-.62 1.458A7.7 7.7 0 0 0 9 7.558V11a1 1 0 0 0 1 1zm-6 0a1 1 0 0 0 1-1V8.558a1 1 0 0 0-1-1H4.612q0-.527.062-1.054q.094-.558.31-.992q.217-.434.559-.683q.34-.279.868-.279V3q-.868 0-1.52.372a3.3 3.3 0 0 0-1.085.992a4.9 4.9 0 0 0-.62 1.458A7.7 7.7 0 0 0 3 7.558V11a1 1 0 0 0 1 1z"/></svg>
 		<p class="!my-0 flex-1 text-sm !leading-6">{{ quote.quote }}</p>
@@ -283,4 +291,44 @@ await conversion.execute();
 </div>
 </div>
 
+<div class="flex flex-col items-center">
+	<h2 class="!my-0 !pt-0 !border-0">...and more!</h2>
+	<a class="!no-underline inline-flex items-center gap-1.5" :no-icon="true" href="/guide/introduction#features">
+		See full feature list
+		<span class="vpi-arrow-right" />
+	</a>
+</div>
+
+</div>
+
+<hr class="!my-16" />
+
+<div class="flex flex-col items-center">
+	<h1 id="sponsors" class="flex items-center gap-4" style="background: -webkit-linear-gradient(-30deg, #ff45ac, #ff78c2); -webkit-background-clip: text; color: transparent;">
+		Made possible by you
+		<img class="size-8" src="./assets/fluent-emoji--heart-suit.svg">
+	</h1>
+	<p class="max-w-2xl">Mediabunny is an open-source project released under the <a href="https://choosealicense.com/licenses/mpl-2.0/" target="_blank">MPL-2.0</a> and is therefore free to use for any purpose, including closed-source commercial use. A permissive license is essential for a foundational library like this to truly thrive. That said, this project requires an immense amount of work and care. This is made possible by the generous financial backing of these awesome sponsors:</p>
+	<template v-if="sponsors.gold.length > 0">
+		<h3 class="!text-2xl">Gold sponsors</h3>
+		<div class="flex flex-wrap mt-1 justify-center gap-1">
+			<a v-for="sponsor in sponsors.gold" :href="sponsor.url" target="_blank" class="flex items-center p-2 rounded-full hover:bg-(--vp-c-gray-3) !text-[initial] !no-underline">
+				<img :src="sponsor.image" class="size-16 rounded-full">
+				<p class="!my-0 !font-medium px-3">{{ sponsor.name }}</p>
+			</a>
+		</div>
+	</template>
+	<template v-if="sponsors.individual.length > 0">
+		<h4>Individual sponsors</h4>
+		<div class="flex flex-wrap mt-1 justify-center">
+			<a v-for="sponsor in sponsors.individual" :href="sponsor.url" target="_blank" class="flex gap-1 w-24 flex-col items-center p-2 rounded-xl hover:bg-(--vp-c-gray-3) !text-[initial] !no-underline">
+				<img :src="sponsor.image" class="size-8 rounded-full">
+				<p class="!my-0 !font-medium text-xs !leading-4">{{ sponsor.name }}</p>
+			</a>
+		</div>
+	</template>
+	<a href="https://github.com/sponsors/Vanilagy" target="_blank" class="flex items-center pl-4 pr-5 mt-8 py-2 rounded-full bg-(--vp-c-brand-3) hover:bg-(--vp-c-brand-2) !text-white !no-underline">
+		<svg class="size-6" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><rect width="24" height="24" fill="none"/><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m12 21l-8.8-8.3A5.6 5.6 0 1 1 12 6a5.6 5.6 0 1 1 8.9 6.6z"/></svg>
+		<p class="!my-0 !font-medium pl-3">And you</p>
+	</a>
 </div>

docs/public/sponsors/gling.svg

@@ -0,0 +1,5 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="32" height="32" rx="5.33333" fill="#DAFF99"/>
+<path d="M14.3273 9.29964C14.5206 8.97719 14.9878 8.97719 15.1811 9.29964L17.7213 13.5375C17.7634 13.6077 17.8221 13.6664 17.8923 13.7085L22.1301 16.2487C22.4526 16.4419 22.4526 16.9092 22.1301 17.1025L17.8923 19.6427C17.8221 19.6848 17.7634 19.7435 17.7213 19.8137L15.1811 24.0515C14.9878 24.374 14.5206 24.374 14.3273 24.0515L11.7871 19.8137C11.745 19.7435 11.6863 19.6848 11.6161 19.6427L7.37825 17.1025C7.0558 16.9092 7.0558 16.4419 7.37825 16.2487L11.6161 13.7085C11.6863 13.6664 11.745 13.6077 11.7871 13.5375L14.3273 9.29964Z" fill="#2D2D2D"/>
+<path d="M22.7374 7.51156C22.7857 7.43094 22.9026 7.43094 22.9509 7.51156L23.7608 8.86276C23.7713 8.88032 23.786 8.895 23.8035 8.90552L25.1548 9.71544C25.2354 9.76376 25.2354 9.88058 25.1548 9.9289L23.8035 10.7388C23.786 10.7493 23.7713 10.764 23.7608 10.7816L22.9509 12.1328C22.9026 12.2134 22.7857 12.2134 22.7374 12.1328L21.9275 10.7816C21.917 10.764 21.9023 10.7493 21.8847 10.7388L20.5335 9.9289C20.4529 9.88058 20.4529 9.76376 20.5335 9.71544L21.8847 8.90552C21.9023 8.895 21.917 8.88032 21.9275 8.86276L22.7374 7.51156Z" fill="#2D2D2D"/>
+</svg>