Some improvements for demo section

spa/components/v1/Demo.vue

@@ -1,17 +1,45 @@
 <script setup lang="ts">
 import Frame from "~/components/v1/Demo/BuggregatorFrame.vue";
 import Buttons from "~/components/v1/Demo/Buttons.vue";
+import GridRow from "~/components/v1/GridRow.vue";
 </script>
 
 <template>
   <div class="demo" id="demo">
-    <Frame class="relative flex-1"/>
-    <Buttons />
+
+    <GridRow class="relative">
+      <h3 class="title text-blue-800">Experience Buggregator in Action</h3>
+
+      <p class="description">
+        <strong>On the left side, you'll see the Buggregator interface.</strong> On the right, we've prepared predefined actions, each
+        represented by a button. By interacting with these buttons, you can actively send sample dumps to
+        the Buggregator, simulating real debugging scenarios in real-time.
+      </p>
+
+      <svg class="hidden lg:inline w-20 -rotate-180 absolute bottom-0 -left-6 fill-current text-gray-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 71 38">
+        <g>
+          <path d="M1.8 37.3a68.1 68.1 0 0 0 30.5-9.8A27 27 0 0 0 39 21c1.8 0 3.6-.1 5.4-.4 7.4-1.2 14.5-5 20.2-10a11138.4 11138.4 0 0 1-3 7.8 1.8 1.8 0 0 0 1.4 1.5 1.9 1.9 0 0 0 2.2-1.2l5-12.1a1.8 1.8 0 0 0-1.8-2.3L54 5.3c-2.4.1-2.4 3.7 0 3.6l7.9-.6a40.8 40.8 0 0 1-13.1 7.5c-2.5.8-5.1 1.4-7.7 1.6a17 17 0 0 0 1.1-4.4c.7-4.7-1.5-9.7-5.9-11.8-3.7-1.8-8-1.4-11.5.2-3.2 1.4-6 4.2-6.2 7.8-.3 4.7 4.7 7.7 8.4 9.3 2.5 1 5 1.8 7.7 2.2-2 2-4.1 3.8-6.6 5.2a69.2 69.2 0 0 1-26.3 7.8A1.8 1.8 0 0 0 0 35.5a1.8 1.8 0 0 0 1.8 1.8Zm23.1-24c-.7-.5-1.3-1-1.9-1.8l-.6-1c.1.2-.2-1-.2-.6a3.7 3.7 0 0 1 1.2-3.2c1-1 2.3-1.9 3.8-2.4 3.1-1.1 6.8-1 9.3 1.4l.5.5v.1h.1l.7 1.2.2.4a30.3 30.3 0 0 0 .6 1.9v.5l.1.5V13l-.2.6a13.3 13.3 0 0 1-.7 2.4l-.1.4-.6 1a25.8 25.8 0 0 1-12.1-4" />
+        </g>
+      </svg>
+    </GridRow>
+
+    <div class="flex gap-0 md:gap-4">
+      <Frame class="relative flex-1"/>
+      <Buttons/>
+    </div>
   </div>
 </template>
 
 <style scoped lang="scss">
 .demo {
-  @apply mt-24 flex gap-0 md:gap-4 mb-24;
+  @apply my-24;
+
+  .title {
+    @apply mb-3 text-2xl font-bold;
+  }
+
+  .description {
+    @apply text-gray-500 text-lg mb-6;
+  }
 }
 </style>

spa/components/v1/Demo/Buttons.vue

@@ -203,7 +203,7 @@ const callAction = (section: string, group: string, action: string) => {
       }
 
       > .events-buttons {
-        @apply overflow-hidden flex flex-wrap gap-2 md:gap-3 lg:gap-4 text-sm;
+        @apply overflow-hidden flex flex-wrap gap-1 md:gap-2 lg:gap-3 text-sm;
 
         .button {
           @apply border rounded-full text-blue-600 md:py-1 md:px-3 px-2 lg:px-3 border-blue-400 hover:bg-blue-500 hover:text-white transition-all duration-300;

spa/components/v1/GithubStars.vue

@@ -4,28 +4,56 @@ import { useAppStore } from "~/stores/app";
 type Props = {
   repository: number;
   size: Enum<'sm' | 'md' | 'lg'>;
+  progress: boolean;
+  required: number;
 };
 
 const props = withDefaults(defineProps<Props>(), {
   size: 'md',
+  required: 1000,
+  progress: false,
 });
 
 const stars = computed(() => {
   const app = useAppStore();
   return app.github[props.repository].stars;
 });
+
+const currentProgress = computed(() => {
+  return (stars.value / props.required) * 100;
+});
 </script>
 
 <template>
-  <a class="stars-container" :class="size" :href="`https://github.com/buggregator/${repository}`" target="_blank">
-    <div class="text">
-      <img class="logo" src="~/assets/img/github.svg" alt="GitHub Logo"/> GitHub
+  <div class="w-full">
+    <div class="w-56 mx-auto">
+      <a class="stars-container" :class="size" :href="`https://github.com/buggregator/${repository}`" target="_blank">
+        <div class="text">
+          <img class="logo" src="~/assets/img/github.svg" alt="GitHub Logo"/> GitHub
+        </div>
+        <span class="stars">★ {{ stars }}</span>
+      </a>
     </div>
-    <span class="stars">★ {{ stars }}</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>
 </template>
 
 <style scoped lang="scss">
+.progress-bar {
+  @apply h-6 rounded-full w-full overflow-hidden relative mt-6 border bg-gray-800 w-full md:w-2/3 lg:w-1/2 mx-auto;
+  .progress {
+    @apply bg-blue-600 h-full rounded-full;
+  }
+
+  .required {
+    @apply text-white text-xs absolute bottom-0 right-0 px-2 h-full flex items-center;
+  }
+}
+
 .stars-container {
   @apply bg-gray-800 text-white rounded-full flex items-center border bg-gray-800 hover:bg-blue-600 transition cursor-pointer;
 

spa/components/v1/Hero.vue

@@ -4,22 +4,22 @@
 
     <h1 class="title">
       <span class="block mb-4 text-black">Buggregator</span>
-      <span><small class="text-blue-800">The Ultimate Debugging Server for PHP</small></span>
+      <span><small class="text-blue-800">The Ultimate Debugging Server</small></span>
     </h1>
 
     <p class="text">
-      Buggregator is a free Swiss Army knife for developers. What makes it special is that it offers a range
-      of features that you would usually find in various paid tools, but it's available for free.
+      It works seamlessly with the libraries you already use, like Ray, Symfony/VarDumper, Monolog, Sentry, etc. The
+      goal was to simplify the integration process and provide a centralized server to manage and display all the data
+      from your project.
     </p>
 
     <div class="buttons">
       <NuxtLink href="#demo" class="demo">
         Try demo
       </NuxtLink>
-
-      <a href="https://docs.buggregator.dev" class="docs">
-        Documentation
-      </a>
+      <NuxtLink href="#install" class="install">
+        How to run
+      </NuxtLink>
     </div>
   </GridRow>
 </template>
@@ -39,7 +39,7 @@ import GithubStars from "~/components/v1/GithubStars.vue";
 }
 
 .text {
-  @apply text-lg text-gray-500 mb-10 sm:mb-11 text-center w-2/3 xl:w-1/2;
+  @apply text-lg text-gray-500 mb-10 sm:mb-11 text-center w-2/3;
 }
 
 .buttons {
@@ -53,8 +53,12 @@ import GithubStars from "~/components/v1/GithubStars.vue";
     @apply font-semibold text-white;
   }
 
-  .docs {
-    @apply font-semibold leading-6 text-blue-800;
+  .install {
+    @apply font-semibold leading-6 text-blue-800 hover:text-blue-700 hover:bg-blue-100;
+    @apply px-6 py-3;
+    @apply rounded-md;
+    @apply transition-colors;
+    @apply focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white;
   }
 }
 </style>

spa/components/v1/HowToRun.vue

@@ -5,7 +5,7 @@ import CopyCommand from "~/components/v1/CopyCommand.vue";
 </script>
 
 <template>
-  <div class="block-wrapper">
+  <div class="block-wrapper" id="install">
     <GridRow>
       <h3 class="section-title">
         How to run?

spa/components/v1/Support.vue

@@ -6,7 +6,7 @@ import GithubStars from "~/components/v1/GithubStars.vue";
   <div class="support">
     <div class="text">We need your support! <br> Please star the project on GitHub.</div>
 
-    <GithubStars repository="server" size="lg"/>
+    <GithubStars repository="server" size="lg" />
   </div>
 </template>
 

spa/pages/index.vue

@@ -1,6 +1,7 @@
 <template>
   <div>
     <Hero/>
+<!--    <HowItWorks/>-->
     <Demo/>
     <Support/>
     <div class="flex flex-col gap-20">
@@ -28,4 +29,5 @@ import Trap from "~/components/v1/Trap.vue";
 import Team from "~/components/v1/Team.vue";
 import PhpStorm from "~/components/v1/PhpStorm.vue";
 import Contribution from "~/components/v1/Contribution.vue";
+import HowItWorks from "~/components/v1/HowItWorks.vue";
 </script>