From 7a1c208be023c17151f7dc73086f245d890f84f8 Mon Sep 17 00:00:00 2001
From: Will Murphy <william@datatitian.com>
Date: Mon, 21 Nov 2022 12:31:10 -0600
Subject: [PATCH] link opencollective

---
 web/src/App.vue        |  3 ++-
 web/src/views/Home.vue | 18 ++++++++++++++++++
 2 files changed, 20 insertions(+), 1 deletion(-)

diff --git a/web/src/App.vue b/web/src/App.vue
index 9b643c1..7dc6d31 100644
--- a/web/src/App.vue
+++ b/web/src/App.vue
@@ -17,7 +17,8 @@
       <div class="w3-col s0 m1 l2">&nbsp;</div>
     </div>
     <footer class="w3-container w3-padding-64 w3-center w3-opacity w3-light-grey w3-xlarge">
-      <a href="https://github.com/wmurphyrd/guppe"><i class="fab fa-github w3-hover-opacity"></i></a>
+      <a href="https://github.com/wmurphyrd/guppe"><i class="fab fa-github w3-hover-opacity w3-margin"></i></a>
+      <a rel="me" href="https://social.coop/@datatitian"><i class="fab fa-mastodon w3-hover-opacity w3-margin"></i></a>
     </footer>
   </div>
 </template>
diff --git a/web/src/views/Home.vue b/web/src/views/Home.vue
index 016468b..958c47a 100644
--- a/web/src/views/Home.vue
+++ b/web/src/views/Home.vue
@@ -10,6 +10,10 @@
       interests without the maniuplation of your attention to maximize ad revenue nor the
       walled garden lock-in of capitalist social media.
     </p>
+    <p>
+      Guppe is brought to you by <a href="https://web.immers.space">Immers Space</a>,
+      the Immersive Web freelancer cooperative that uses its margins to fund the development of free software that breaks down the walls between metaverse platforms.
+    </p>
     <h2 class="w3-center">How does Guppe work?</h2>
     <p>
       Guppe groups look like regular users you can interact with using your existing account on any
@@ -21,6 +25,16 @@
       <li>New groups are created on demand, just search for or mention @YourGroupNameHere@{{ domain }} and it will show up</li>
       <li>Visit a @{{ domain }} group profile to see the group history</li>
     </ol>
+
+    <h2 class="w3-center">Support Guppe</h2>
+    <p>
+      <a href="https://opencollective.com/guppe-groups">Become a member of Guppe on Open Collective</a> to
+      help keep Guppe running, vote on development decicisions, and see your name listed here.
+    </p>
+    <div class="flex-center">
+      <object type="image/svg+xml" data="https://opencollective.com/guppe-groups/tiers/member.svg?avatarHeight=48&width=350"></object>
+    </div>
+
     <h2 class="w3-center">Active Groups</h2>
     <p class="w3-center">Top 50 groups with the most recent posts</p>
     <div class="profile-grid w3-margin-bottom w3-mobile">
@@ -79,4 +93,8 @@ export default {
   .profile-image {
     width: 75px;
   }
+  .flex-center {
+    display: flex;
+    justify-content: center;
+  }
 </style>