fixes

app/components/backup-restore.vue

@@ -1,3 +1,26 @@
+<template>
+  <h2 class="title"> Backup & restore </h2>
+  <section class="docker-web-section">
+    <Terminal :terminal-content="terminalContent" />
+    <div class="flex flex-col items-center md:w-3/4 lg:w-1/2 h-20 relative rounded-b-xl transition-all">
+      <div class="flex transition-all justify-center duration-1000" :class="startApps">
+        <SvgGitea :class="penpotClass" class="app--backup" />
+        <SvgDrone :class="giteaClass" class="app--backup hidden md:block" />
+        <SvgPlausible :class="plausibleClass" class="app--backup" />
+      </div>
+      <div :class="endApps">
+        <div class="app" :class="folderClass">
+          <SvgFolder class="text-yellow-400" />
+          <div class="-mt-7 text-sm text-center"> tar.gz </div>
+        </div>
+        <SvgStorj class="hidden" :class="storjClass" />
+      </div>
+      <div class="flex mt-10 w-14 absolute" :class="progressBarClass"> <span
+          class="h-2 w-full absolute bg-black rounded-full opacity-10" /> <span
+          class="h-2 absolute rounded-full bg-green-400 transition-all duration-1000" :class="progressClass" /> </div>
+    </div>
+  </section>
+</template>
 <script>
 export default {
   data: () => ({
@@ -134,3 +157,21 @@ export default {
   }
 }
 </script>
+
+<style>
+code {
+  display: block;
+  /* pour gérer le scroll */
+  overflow-x: auto;
+  /* scroll horizontal si nécessaire */
+  scrollbar-width: none;
+  /* Firefox */
+  -ms-overflow-style: none;
+  /* IE et Edge */
+}
+
+code::-webkit-scrollbar {
+  display: none;
+  /* Chrome, Safari */
+}
+</style>