Adds new feature blocks.

Additional:
1. Fixes paddings in GithubStart component
2. Fixes Hero block buttons size
3. Refactors likes

Author: butschster

spa/assets/css/main.css

@@ -23,7 +23,7 @@ a.text-link {
 }
 
 .read-more-link {
-    @apply border font-bold px-5 py-2 rounded-full;
+    @apply border font-bold px-5 py-2 rounded-full text-sm;
 
     &.gray {
         @apply bg-gray-100 hover:bg-gray-200 text-gray-800;
@@ -41,8 +41,12 @@ a.text-link {
         @apply bg-blue-100 hover:bg-blue-200 text-blue-800;
     }
 
+    &.teal {
+        @apply bg-blue-100 hover:bg-teal-200 text-teal-800;
+    }
+
     &.small {
-        @apply text-sm px-3 py-1;
+        @apply text-xs px-3 py-1;
     }
 }
 
@@ -59,5 +63,5 @@ a.text-link {
 }
 
 .feature-text {
-    @apply text-gray-400 font-semibold;
+    @apply text-gray-400 font-semibold pb-2;
 }

spa/components/Common/Likeable.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { WsEvent } from "~/config/types";
+import JSConfetti from "js-confetti";
 
 type Props = {
   name: string;
@@ -8,27 +9,48 @@ const props = defineProps<Props>();
 
 const icon = () => {
   const list = [
-    'love1.svg',
-    'love2.svg',
-    'pampers.svg',
-    'poop1.svg',
-    'poop2.svg',
-    'toilet.svg',
+    '✌', '⭐', '❤️', '☢',
+    '😊', '🔥', '☀️', '💀️',
+    '⚡', '⏰', '🎈', '⛄',
+    '🎉', '🎁', '🎊', '🎃',
+    '🚀', '🍕', '🍔', '🍟',
+    '🍦', '🏆', '🏈', '🏊',
+    '🏄', '🏂', '🏇', '🚴',
   ]
 
   return list[Math.floor(Math.random() * list.length)];
 };
 
+const position = () => {
+  const min = 10;
+  const max = 80;
+
+  return Math.floor(Math.random() * (max - min + 1)) + min;
+}
+
 const likes = ref([]);
 
 const app = useNuxtApp();
 const like = () => {
   app.$api.data.like(props.name);
 };
 
+const firework = (total: number = 40): void => {
+  const jsConfetti = new JSConfetti();
+  jsConfetti.addConfetti({
+    emojis: ['🦄', '⭐', '🎉', '💖', '🚀', '😍'],
+    emojiSize: 50,
+    confettiNumber: total,
+  });
+}
+
 app.$ws.channel('events').listen((data: WsEvent): void => {
   if (data.event === 'liked' && data.data.key === props.name) {
-    likes.value.push(icon());
+    likes.value.push({ icon: icon(), position: position() });
+
+    if (likes.value.length > 10) {
+      firework(10);
+    }
 
     setTimeout(() => {
       likes.value.shift();
@@ -39,8 +61,11 @@ app.$ws.channel('events').listen((data: WsEvent): void => {
 
 <template>
   <div class="cursor-pointer relative" @click="like">
-    <span v-for="icon in likes" class="heart">
-      <img class="w-16" :src="`/like/${icon}`" :alt="icon"/>
+    <span v-for="{icon, position} in likes"
+          class="icon"
+          :style="{left: `${position}px`}"
+    >
+     {{ icon }}
     </span>
     <slot></slot>
   </div>
@@ -57,33 +82,32 @@ app.$ws.channel('events').listen((data: WsEvent): void => {
   }
   24% {
     transform: rotateZ(20deg) scale(0.7);
-    left: 3px;
+    margin-left: 10px;
     opacity: 0.7
   }
   40% {
     transform: rotateZ(-11deg) scale(0.6);
-    left: -3px;
+    margin-right: 10px;
   }
   70% {
     transform: rotateZ(10deg) scale(0.4);
-    left: 3px;
+    margin-left: 10px;
     opacity: .5;
   }
   90% {
     transform: scale(0.2);
-    left: -3px;
+    margin-right: 10px;
   }
   100% {
     opacity: 0;
-    top: -200px;
+    top: -300px;
     transform: rotateZ(-5deg) scale(0.1);
   }
 }
 
-.heart {
-  position: absolute;
+.icon {
+  @apply absolute text-5xl;
   top: -60px;
-  left: 0;
   animation: float 1.5s linear forwards;
 }
 </style>

spa/components/v1/Features.vue

@@ -5,6 +5,8 @@ import SSO from "~/components/v1/Features/SSO.vue";
 import ExternalDatabases from "~/components/v1/Features/ExternalDatabases.vue";
 import KubernetesReady from "~/components/v1/Features/KubernetesReady.vue";
 import SourceCode from "~/components/v1/Features/SourceCode.vue";
+import Webhooks from "~/components/v1/Features/Webhooks.vue";
+import Metrics from "~/components/v1/Features/Metrics.vue";
 </script>
 
 <template>
@@ -19,6 +21,10 @@ import SourceCode from "~/components/v1/Features/SourceCode.vue";
         <SSO class="md:w-1/2 bg-white"/>
         <ExternalDatabases class="md:w-1/2 bg-white"/>
       </div>
+      <div class="flex flex-col md:flex-row gap-6">
+        <Webhooks class="md:w-1/2 bg-white"/>
+        <Metrics class="md:w-1/2 bg-white"/>
+      </div>
       <KubernetesReady/>
       <SourceCode/>
     </div>

spa/components/v1/Features/ExternalDatabases.vue

@@ -13,14 +13,14 @@ import Feature from "~/components/v1/Features/Feature.vue";
     <div>
       <h3 class="feature-title">External database support</h3>
       <p class="feature-text mb-6">
-        Configure Buggregator to use external databases like MongoDB or
+        Configure Buggregator to use external databases like MySQL or
         PostgreSQL for event storage. This flexibility allows you to scale storage according to your
         project needs.
       </p>
 
       <a href="https://docs.buggregator.dev/config/external-db.html"
          target="_blank"
-         class="read-more-link green"
+         class="read-more-link"
       >
         Read more
       </a>

spa/components/v1/Features/Metrics.vue

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import Feature from "~/components/v1/Features/Feature.vue";
+</script>
+
+<template>
+  <Feature>
+    <div class="feature-grid">
+      <svg role="img" xmlns="http://www.w3.org/2000/svg" class="w-8 text-red-400" viewBox="0 0 52 52" xml:space="preserve"><path fill="currentColor" d="M44.9 2H7.1C4.3 2 2 4.3 2 7.1v37.7C2 47.7 4.3 50 7.1 50h37.7c2.8 0 5.1-2.3 5.1-5.1V7.1c.1-2.8-2.2-5.1-5-5.1zM15.7 39.7c0 .9-.8 1.7-1.7 1.7h-1.7c-.9 0-1.7-.8-1.7-1.7v-9.4c0-.9.8-1.7 1.7-1.7H14c.9 0 1.7.8 1.7 1.7v9.4zm8.6 0c0 .9-.8 1.7-1.7 1.7h-1.7c-.9 0-1.7-.8-1.7-1.7V17.4c0-.9.8-1.7 1.7-1.7h1.7c.9 0 1.7.8 1.7 1.7v22.3zm8.6 0c0 .9-.8 1.7-1.7 1.7h-1.7c-.9 0-1.7-.8-1.7-1.7V12.3c0-.9.8-1.7 1.7-1.7h1.7c.9 0 1.7.8 1.7 1.7v27.4zm8.5 0c0 .9-.8 1.7-1.7 1.7H38c-.9 0-1.7-.8-1.7-1.7V23.4c0-.9.8-1.7 1.7-1.7h1.7c.9 0 1.7.8 1.7 1.7v16.3z"/></svg>
+      <div>
+        <h3 class="feature-title">Metrics</h3>
+        <p class="feature-text">Monitor application errors in real-time with Buggregator's metrics. It provides
+          prometheus metrics, that can be used to monitor errors and exceptions in your application using Grafana.
+        </p>
+      </div>
+    </div>
+    <div>
+      <a href="https://docs.buggregator.dev/config/metrics.html" target="_blank" class="read-more-link">
+        Read more
+      </a>
+    </div>
+  </Feature>
+</template>
+
+<style scoped lang="scss">
+
+</style>

spa/components/v1/Features/SSO.vue

@@ -13,12 +13,13 @@ import Feature from "~/components/v1/Features/Feature.vue";
       <div>
         <h3 class="feature-title">Single Sign On</h3>
         <p class="feature-text">Securely manage user access and authentication through Single
-          Sign-On (SSO) with providers like <a href="https://auth0.com/" class="text-link">Auth0</a>.
+          Sign-On (SSO) with providers like <a href="https://auth0.com" class="text-link">Auth0</a> or <a
+            href="https://kinde.com" class="text-link">Kinde</a>.
         </p>
       </div>
     </div>
     <div>
-      <a href="https://docs.buggregator.dev/config/sso.html" target="_blank" class="read-more-link purple">
+      <a href="https://docs.buggregator.dev/config/sso.html" target="_blank" class="read-more-link">
         Read more
       </a>
     </div>

spa/components/v1/Features/Webhooks.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import Feature from "~/components/v1/Features/Feature.vue";
+</script>
+
+<template>
+  <Feature>
+    <div class="feature-grid">
+      <svg role="img" viewBox="-10 -5 1034 1034" class="w-8 text-teal-400" xmlns="http://www.w3.org/2000/svg">
+        <path fill="currentColor"
+              d="M482 226h-1l-10 2q-33 4-64.5 18.5T351 285q-41 37-57 91-9 30-8 63t12 63q17 45 52 78l13 12-83 135q-26-1-45 7-30 13-45 40-7 15-9 31t2 32q8 30 33 48 15 10 33 14.5t36 2 34.5-12.5 27.5-25q12-17 14.5-39t-5.5-41q-1-5-7-14l-3-6 118-192q6-9 8-14l-10-3q-9-2-13-4-23-10-41.5-27.5T379 484q-17-36-9-75 4-23 17-43t31-34q37-27 82-27 27-1 52.5 9.5T597 345q17 16 26.5 38.5T634 429q0 17-6 42l70 19 8 1q14-43 7-86-4-33-19.5-63.5T654 288q-42-42-103-56-6-2-18-4l-14-2h-37zm18 124q-17 0-34 7t-30.5 20.5T416 409q-8 20-4 44 3 18 14 34t28 25q24 15 56 13 3 4 5 8l112 191q3 6 6 9 27-26 58.5-35.5t65-3.5 58.5 26q32 25 43.5 61.5t.5 73.5q-8 28-28.5 50T782 938q-31 13-66.5 8.5T652 922q-4-3-13-10l-5-6q-4 3-11 10l-47 46q23 23 52 38.5t61 21.5l22 4h39l28-5q64-13 110-60 22-22 36.5-50.5T944 851q5-36-2-71.5T917 715t-44-51-57-35q-34-14-70.5-16t-71.5 7l-17 5-81-137q13-19 16-37 5-32-13-60-16-25-44-35-17-6-35-6zM218 614q-58 13-100 53-47 44-61 105l-4 24v37l2 11q2 13 4 20 7 31 24.5 59t42.5 49q50 41 115 49 38 4 76-4.5t70-28.5q53-34 78-91 7-17 14-45 6-1 18 0l125 2q14 0 20 1 11 20 25 31t31.5 16 35.5 4q28-3 50-20 27-21 32-54 2-17-1.5-33T801 769q-16-22-41-32-17-7-35.5-6.5T689 738q-28 12-43 37l-3 6q-14 0-42-1l-113-1q-15-1-43-1l-50-1 3 17q8 43-13 81-14 27-40 45t-57 22q-35 6-70-7.5T161 892q-28-35-27-79 1-37 23-69 13-19 32-32t41-19l9-3z"/>
+      </svg>
+      <div>
+        <h3 class="feature-title">Webhooks</h3>
+        <p class="feature-text">Use webhooks for integration with third-party services like
+          <a href="https://n8n.io" class="text-link">n8n</a>. For example, you can use webhooks to send notification
+          when an error in your application is occurred.
+        </p>
+      </div>
+    </div>
+    <div>
+      <a href="https://docs.buggregator.dev/config/webhooks.html" target="_blank" class="read-more-link">
+        Read more
+      </a>
+    </div>
+  </Feature>
+</template>
+
+<style scoped lang="scss">
+
+</style>

spa/components/v1/GithubStars.vue

@@ -33,10 +33,10 @@ const currentProgress = computed(() => {
     <span v-else class="no-stars">Star it now!</span>
   </a>
 
-  <!--    <div v-if="progress" class="progress-bar">-->
-  <!--      <div class="progress" :style="{ width: `${currentProgress}%` }"></div>-->
-  <!--      <div class="required">of {{ props.required }} stars</div>-->
-  <!--    </div>-->
+  <div v-if="progress" class="progress-bar">
+    <div class="progress" :style="{ width: `${currentProgress}%` }"></div>
+    <div class="required">of {{ props.required }} stars</div>
+  </div>
 </template>
 
 <style scoped lang="scss">
@@ -55,7 +55,7 @@ const currentProgress = computed(() => {
   @apply bg-gray-800 text-white rounded-full flex items-center border bg-gray-800 hover:bg-blue-600 transition cursor-pointer;
 
   &.lg {
-    @apply gap-6 p-4 text-xl;
+    @apply gap-6 p-4 text-xl pr-5;
 
     .logo {
       @apply w-8 h-8;
@@ -67,7 +67,7 @@ const currentProgress = computed(() => {
   }
 
   &.md {
-    @apply gap-6 p-2;
+    @apply gap-6 py-2 pl-2 pr-3;
 
     .logo {
       @apply w-6 h-6;

spa/components/v1/Hero.vue

@@ -58,11 +58,11 @@ const openVideo = async () => {
   @apply flex flex-col sm:flex-row items-center justify-center gap-6 lg:justify-start mb-8;
 
   .demo {
-    @apply px-3 py-2 md:px-6 md:py-4;
+    @apply px-3 py-2 md:px-6 md:py-3;
     @apply bg-blue-800 hover:bg-blue-700;
     @apply rounded-md shadow-sm;
     @apply focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white;
-    @apply font-semibold text-white;
+    @apply text-white text-sm md:text-base;
   }
 
   .video {
@@ -75,10 +75,11 @@ const openVideo = async () => {
   }
 
   .install {
-    @apply font-semibold leading-6 text-blue-800 hover:text-blue-700 hover:bg-blue-100 border;
-    @apply px-3 py-2 md:px-6 md:py-4;
+    @apply leading-6 text-blue-800 hover:text-blue-700 hover:bg-blue-100 border;
+    @apply px-3 py-2 md:px-6 md:py-3;
     @apply rounded-md;
     @apply transition-colors;
+    @apply text-sm md:text-base;
     @apply focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white;
   }
 }

spa/components/v1/IntroVideo.vue

@@ -6,15 +6,15 @@ import { YoutubeVue3 as Youtube } from 'youtube-vue3'
   <div class="video-container">
     <Youtube videoid="yKWbuw8xN_c"
              class="w-full h-full"
-             controls="0"
+             controls="1"
              :autoplay="true"
              :loop="false"/>
   </div>
 </template>
 
 <style scoped lang="scss">
 .video-container {
-  @apply aspect-video w-3/4 rounded-xl overflow-hidden drop-shadow-2xl;
+  @apply aspect-video w-full md:w-3/4 md:rounded-xl overflow-hidden drop-shadow-2xl;
 
 }
 </style>