make ebook giveaway more obvious by moving it to the floating button …

…area (#108)

* make ebook giveaway more obvious by moving it to the floating button area

* introduce delay on showing ebook offer

src/frontend/src/App.vue

@@ -5,6 +5,7 @@ import SalesEndpoint from "./components/SalesEndpoint.vue";
 import ShippingEndpoint from "./components/ShippingEndpoint.vue";
 import TryItOut from "./components/guideline/TryItOut.vue";
 import FloatingButton from "./components/FloatingButton.vue";
+import FloatingContainer from "./components/FloatingContainer.vue";
 import { ref } from "vue";
 import { store } from "./components/shared";
 
@@ -33,12 +34,6 @@ const tab = ref("showcase");
   <div class="container">
     <div v-show="tab === 'showcase'">
       <h2>Simulating customers placing orders on a website</h2>
-      <div v-if="store.messageRetried">
-        Thanks for trying our showcase. 
-        <a href="https://gleam.io/ViON2/manning-ebook-giveaway">
-          Get your free eBook now!
-        </a>
-      </div>
       <div class="architecture-diagram"></div>
       <div class="sections">
         <div><ClientEndpoint /></div>
@@ -48,10 +43,18 @@ const tab = ref("showcase");
       </div>
     </div>
     <div v-show="tab === 'tryit'"><TryItOut /></div>
-    <floating-button
-      text="Any issues? Ping us"
-      location="https://discuss.particular.net/tag/masstransit"
-    />
+    <floating-container>
+      <floating-button
+        v-if="store.messageRetried"
+        text="Thanks for trying our showcase. Get your free eBook now!"
+        location="https://gleam.io/ViON2/manning-ebook-giveaway"
+        color="green"
+      />
+      <floating-button
+        text="Any issues? Ping us"
+        location="https://discuss.particular.net/tag/masstransit"
+      />
+    </floating-container>
   </div>
 </template>
 

src/frontend/src/components/FloatingButton.vue

@@ -1,13 +1,22 @@
 <script setup lang="ts">
-import { GA4 } from "../utils/analytics";
-defineProps<{
-  text: string;
-  location?: string;
-}>();
+withDefaults(
+  defineProps<{
+    text: string;
+    location?: string;
+    color?: string;
+  }>(),
+  { color: "#00a3c4" }
+);
 </script>
 
 <template>
-  <a class="floating-button" v-if="location" target="_blank" :href="location">
+  <a
+    class="floating-button"
+    v-if="location"
+    target="_blank"
+    :style="{ 'background-color': color }"
+    :href="location"
+  >
     <span @click="$emit('click')">
       {{ text }}
     </span>
@@ -17,10 +26,6 @@ defineProps<{
 <style scoped>
 /* Floating Button Styling */
 a.floating-button {
-  position: fixed;
-  bottom: 20px;
-  right: 20px;
-  background-color: #00a3c4; /* Nice blue color */
   color: white; /* Text color */
   padding: 12px 24px;
   border-radius: 30px;
@@ -37,14 +42,14 @@ a.floating-button {
 
 /* Hover Effect */
 a.floating-button:hover {
-  background-color: #00729c; /* Slightly darker blue */
+  background-image: linear-gradient(rgb(0 0 0/15%) 0 0);
   box-shadow: 0 6px 8px rgba(0, 0, 0, 0.2);
   transform: scale(1.05);
 }
 
 /* Active (Pressed) Effect */
 a.floating-button:active {
-  background-color: #01445c; /* Even darker blue */
+  background-image: linear-gradient(rgb(0 0 0/25%) 0 0);
   transform: scale(0.95);
 }
 </style>

src/frontend/src/components/FloatingContainer.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts"></script>
+
+<template>
+  <div class="floating-container">
+    <slot></slot>
+  </div>
+</template>
+
+<style scoped>
+.floating-container {
+  position: fixed;
+  bottom: 1.5em;
+  right: 1.5em;
+  max-width: 15em;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5em;
+}
+</style>

src/frontend/src/components/shared.ts

@@ -10,6 +10,6 @@ export const store = reactive({
   },
   messageRetried: false,
   setMessageRetried() {
-    this.messageRetried = true;
+    setTimeout(() => (this.messageRetried = true), 5000);
   },
 });