diff --git a/src/app/pages/Home.tsx b/src/app/pages/Home.tsx
index b802ce4d..b1704a63 100644
--- a/src/app/pages/Home.tsx
+++ b/src/app/pages/Home.tsx
@@ -35,6 +35,7 @@ export function Home({}: Props) {
}
+
@@ -125,3 +126,20 @@ function Changelog() {
{latestChanges?.map(change => )}
}
+
+function Sponsors() {
+ const { value } = useAsync(() => {
+ return fetch('https://ghs.vercel.app/sponsors/misode').then(r => r.json())
+ }, [])
+
+ return
+}
diff --git a/src/styles/global.css b/src/styles/global.css
index 21fa7aa3..15d09a3e 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -1970,6 +1970,42 @@ hr {
background-color: var(--selection) !important;
}
+.sponsors {
+ margin: 40px auto;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+}
+
+.sponsors h3 {
+ margin-bottom: 10px;
+ font-weight: normal;
+ color: var(--text-2);
+}
+
+.sponsors-list {
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: center;
+}
+
+.sponsors-list > * {
+ margin: 3px;
+ border-radius: 50%;
+ background-color: var(--background-2);
+ width: 48px;
+ height: 48px;
+ transition: background-color 200ms;
+}
+
+.sponsors-list > * img {
+ border-radius: 50%;
+}
+
+.sponsors-list > *:hover {
+ background-color: var(--background-3);
+}
+
.giscus-container {
margin-top: 16px;
min-height: 325.667px;