add contribute info

src/components/modal/About.vue

@@ -15,21 +15,26 @@
             <a
               href="https://github.com/EvolutionAPI/evolution-api/"
               target="_blank"
-              >Evolution API</a
+            >
+              Evolution API </a
             >, facilita a gestão de suas APIs com uma interface intuitiva. Ele
             foi criado por desenvolvedores independentes, focando em melhorar a
             experiência do usuário e a administração das funcionalidades da API.
           </p>
-
-          <v-btn
-            href="https://github.com/gabrielpastori1/evolution-manager"
-            target="_blank"
-            class="mt-5"
-            color="grey darken-3"
-          >
-            <v-icon start>mdi-github</v-icon>
-            Repositório no GitHub
-          </v-btn>
+          <div class="d-flex gap-x-2 gap-y-1 align-center justify-center mt-5">
+            <v-btn
+              href="https://github.com/gabrielpastori1/evolution-manager"
+              target="_blank"
+              color="grey darken-3"
+            >
+              <v-icon start>mdi-github</v-icon>
+              Repositório no GitHub
+            </v-btn>
+            <v-btn @click="contribute" color="grey darken-3">
+              <v-icon start>mdi-hand-coin</v-icon>
+              Contribua com o projeto
+            </v-btn>
+          </div>
 
           <h3 class="mt-5 mb-2">Processamento de Dados</h3>
           <p>
@@ -60,9 +65,12 @@
       </v-card-actions>
     </v-card>
   </v-dialog>
+  <contribute ref="contribute" />
 </template>
 
 <script>
+import Contribute from "./Contribute.vue";
+
 export default {
   name: "SettingsModal",
   data: () => ({
@@ -70,9 +78,13 @@ export default {
     isHttps: window.location.protocol === "https:",
   }),
   methods: {
+    contribute() {
+      this.$refs.contribute.open();
+    },
     open() {
       this.dialog = true;
     },
   },
+  components: { Contribute },
 };
 </script>

src/components/modal/Contribute.vue

@@ -0,0 +1,55 @@
+<template>
+  <v-dialog v-model="dialog" max-width="350px" scrollable>
+    <v-card>
+      <v-card-text>
+        <div class="d-flex flex-column align-center">
+          <h4>Contribua via PIX</h4>
+          <v-img
+            src="@/assets/pix.svg"
+            height="300px"
+            width="300px"
+            class="mb-2"
+          />
+
+          <v-chip @click="copy" size="small">
+            {{ key }}
+            <v-icon end size="small" v-if="!copied">mdi-content-copy</v-icon>
+            <v-icon end size="small" v-else>mdi-check</v-icon>
+          </v-chip>
+        </div>
+      </v-card-text>
+      <v-card-actions>
+        <v-spacer></v-spacer>
+        <v-btn text @click="dialog = false" :disabled="loading"> Fechar </v-btn>
+        <v-spacer></v-spacer>
+      </v-card-actions>
+    </v-card>
+  </v-dialog>
+</template>
+
+<script>
+export default {
+  name: "SettingsModal",
+  data: () => ({
+    key: "14d43649-13dd-48f8-8b98-feb9b0f11892",
+    dialog: false,
+    copied: false,
+    isHttps: window.location.protocol === "https:",
+  }),
+  methods: {
+    copy() {
+      if (this.copied) return;
+      if (!navigator.clipboard)
+        return alert("Seu navegador não suporta a função de copiar texto.");
+      navigator.clipboard.writeText(this.key);
+      this.copied = true;
+      setTimeout(() => {
+        this.copied = false;
+      }, 2000);
+    },
+    open() {
+      this.dialog = true;
+    },
+  },
+};
+</script>

src/layouts/default/AppFooter.vue

@@ -1,11 +1,22 @@
 <template>
   <v-footer absolute app class="pt-10">
-    <div class="d-flex flex-grow-1 flex-wrap gap-y-1">
+    <div class="d-flex flex-grow-1 flex-wrap gap-y-1 align-end">
       <div class="flex-shrink-0">
-        Criado por
-        <a href="https://github.com/gabrielpastori1" target="_blank">
-          Gabriel Pastori
-        </a>
+        <p style="font-size: 12px;">
+          Criado por
+          <a href="https://github.com/gabrielpastori1" target="_blank">
+            Gabriel Pastori
+          </a>
+        </p>
+        <v-btn
+          @click="contribute"
+          variant="tonal"
+          size="small"
+          color="light-blue-lighten-2"
+        >
+          <v-icon start>mdi-hand-coin</v-icon>
+          Contribua com o projeto
+        </v-btn>
       </div>
       <v-spacer />
       <div class="d-flex gap-x-1">
@@ -25,9 +36,12 @@
       </div>
     </div>
   </v-footer>
+  <Contribute ref="contribute" />
 </template>
 
 <script>
+import Contribute from "@/components/modal/Contribute.vue";
+
 export default {
   name: "AppFooter",
   data: () => ({
@@ -40,7 +54,6 @@ export default {
         title: "Postman",
         url: "https://www.postman.com/agenciadgcode/workspace/evolution-api/overview",
       },
-
       {
         title: "Evolution-Api",
         icon: "mdi-github",
@@ -52,6 +65,12 @@ export default {
       },
     ],
   }),
+  methods: {
+    contribute() {
+      this.$refs.contribute.open();
+    },
+  },
+  components: { Contribute },
 };
 </script>