Add support buttons

components/app-bar.vue

@@ -6,10 +6,10 @@ const { user, clear } = useUserSession();
   <div class="w-full h-16 border-b-4 border-b-orange-500 flex">
     <UContainer class="max-w-2xl flex justify-between items-center">
       <div class="flex gap-2 items-center">
-        <NuxtImg src="/ghostwriter-logo.png" class="size-9" />
         <div class="font-bold text-xl tracking-tight font-fira-code">
           Ghostwriter
         </div>
+        <NuxtImg src="/ghostwriter-logo.png" class="size-9" />
       </div>
       <UDropdownMenu :items="[{ label: 'Log out', onSelect: () => clear() }]">
         <UAvatar

components/app-footer.vue

@@ -4,8 +4,12 @@
   >
     <div class="text-center">
       Built with 💪 in Athens, Greece 🇬🇷 by Marios Antonoudiou.
-      <ULink class="underline" href="mailto:mariosant@sent.com"
-        >Send feedback</ULink
+
+      <ULink
+        class="underline"
+        target="_blank"
+        href="https://buymeacoffee.com/mariosant"
+        >Support Ghostwriter 👻</ULink
       >.
     </div>
     <NuxtImg src="/images/powered-by-strava.svg" width="80px" />

components/register.vue

@@ -13,10 +13,10 @@ const { openInPopup } = useUserSession();
     <UCard class="max-w-sm grid gap-6 justify-center items-center">
       <div class="flex flex-col gap-10 items-center justify-center">
         <div class="flex gap-2 items-center">
-          <NuxtImg src="/ghostwriter-logo.png" class="size-9" />
           <div class="font-bold text-xl tracking-tight font-fira-code">
             Ghostwriter
           </div>
+          <NuxtImg src="/ghostwriter-logo.png" class="size-9" />
         </div>
         <div class="grid gap-2">
           <div class="text-center text-2xl font-bold">

pages/index.vue

@@ -60,9 +60,9 @@ const saveOp = watchPausable(
     <div class="font-bold text-lg">Welcome to Ghostwriter!</div>
 
     <div>
-      Ghostwriter automatically generates fun and engaging titles and
-      descriptions for your Strava activities, right when they are created.
-      Customize your preferences below.
+      Let's generate fun and engaging titles and descriptions for your Strava
+      activities automatically, right when they are created. Customize your
+      preferences below.
     </div>
 
     <div>
@@ -70,6 +70,26 @@ const saveOp = watchPausable(
       choose your language, and we'll do the rest!
     </div>
   </UContainer>
+
+  <UContainer class="max-w-2xl py-8 flex flex-col gap-4">
+    <div class="font-bold text-lg">❤️ Support</div>
+    <UCard class="">
+      <div class="flex flex-col gap-8">
+        Ghostwriter 👻 is free but keeping it up and running is not! Please
+        consider supporting this application and it's author.
+      </div>
+      <template #footer>
+        <ULink href="https://buymeacoffee.com/mariosant" target="_blank">
+          <NuxtImg
+            src="images/bmac-orange-button.png"
+            height="32px"
+            class="h-8"
+          />
+        </ULink>
+      </template>
+    </UCard>
+  </UContainer>
+
   <UContainer
     class="max-w-2xl py-8 flex flex-col gap-4"
     v-if="status === 'success'"