Add google adsense

www/.nvmrc

@@ -0,0 +1 @@
+v20.18.0

www/pages/badges/index.vue

@@ -1,8 +1,8 @@
 <template>
   <div class="my-badges-container container">
     <b-container fluid="lg">
-      <b-row class="badges ">
-        <b-col lg="12">
+      <b-row class="badges">
+        <b-col lg="3" md="6" sm="12" v-for="badge in badges" :key="badge.ulid" class="mb-4">
           <b-card
             border-variant="primary"
             header-bg-variant="primary"
@@ -11,20 +11,13 @@
             :header="badge.label"
             :sub-title="badgeCreated(badge.CreatedAt)"
             bg-variant="light"
-            v-for="badge in badges"
-            :key="badge.ulid"
-            class="my-badge"
+            class="my-badge h-100"
           >
-            <b-card-text> </b-card-text>
-
             <b-card-text>
-              <b-link :href="statsUrl(badge)"><img :src="badgeUrl(badge)" class="my-badge" /></b-link>
+              <b-link :href="statsUrl(badge)">
+                <img :src="badgeUrl(badge)" class="img-fluid my-badge" alt="Badge" />
+              </b-link>
             </b-card-text>
-
-            <a href="#" class="card-link" style="display:none"><svg></svg></a>
-            <b-link href="#" class="card-link" style="display:none"
-              >Another link</b-link
-            >
           </b-card>
         </b-col>
       </b-row>
@@ -71,9 +64,35 @@ export default {
 </script>
 <style lang="scss">
 .my-badges-container {
-  .badges {
-    .my-badge {
-      margin-top: 4vh;
+  padding: 4rem 0;
+  background-color: #f8f9fa;
+
+  h2 {
+    color: #343a40;
+    font-weight: 600;
+  }
+
+  .badge-card {
+    transition: transform 0.3s ease-in-out;
+    border: none;
+    overflow: hidden;
+
+    &:hover {
+      transform: translateY(-5px);
+    }
+
+    .card-header {
+      border-bottom: none;
+    }
+
+    .badge-link {
+      display: block;
+      text-align: center;
+    }
+
+    .badge-image {
+      max-width: 200px;
+      margin: 0 auto;
     }
   }
 }

www/pages/index.vue

@@ -163,6 +163,23 @@
           >
         </b-col>
       </b-row>
+      <b-row class="mt-5">
+        <b-col>
+          <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-2599506592075808"
+               crossorigin="anonymous"></script>
+          <!-- badger -->
+          <ins class="adsbygoogle"
+               style="display:block"
+               data-ad-client="ca-pub-2599506592075808"
+               data-ad-slot="9291316096"
+               data-ad-format="auto"
+               data-full-width-responsive="true"></ins>
+          <script>
+               (adsbygoogle = window.adsbygoogle || []).push({});
+          </script>
+        </b-col>
+      </b-row>
+
     </b-container>
   </div>
 </template>

www/pages/stats/_id.vue

@@ -25,6 +25,22 @@
           </b-button>
         </b-col>
       </b-row>
+      <b-row class="mt-5">
+        <b-col>
+          <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-2599506592075808"
+               crossorigin="anonymous"></script>
+          <!-- badger -->
+          <ins class="adsbygoogle"
+               style="display:block"
+               data-ad-client="ca-pub-2599506592075808"
+               data-ad-slot="9291316096"
+               data-ad-format="auto"
+               data-full-width-responsive="true"></ins>
+          <script>
+               (adsbygoogle = window.adsbygoogle || []).push({});
+          </script>
+        </b-col>
+      </b-row>
     </b-container>
   </div>
 </template>