refactor move home / into vue components (#3498)

lnbits/static/css/base.css

@@ -215,6 +215,53 @@ body.body--dark .q-drawer {
   backdrop-filter: blur(6px);
 }
 
+:root {
+  --size: 100px;
+  --gap: 25px;
+}
+
+.home .btn-fixed-width {
+  /* width: 45%; */
+}
+.home .wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: var(--gap);
+  margin: auto;
+  max-width: 100%;
+}
+.home .marquee {
+  display: flex;
+  overflow: hidden;
+  user-select: none;
+  gap: var(--gap);
+  height: max-content;
+  mask-image: linear-gradient(to right, hsla(0, 0%, 0%, 0), hsl(0, 0%, 0%) 20%, hsl(0, 0%, 0%) 80%, hsla(0, 0%, 0%, 0));
+}
+.home .marquee__group {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+  gap: var(--gap);
+  min-width: 100%;
+  animation: scroll-x 60s linear infinite;
+}
+.home .marquee:hover .marquee__group {
+  animation-play-state: paused;
+}
+.home .marquee__group div {
+  width: var(--size);
+}
+@keyframes scroll-x {
+  from {
+    transform: translateX(0);
+  }
+  to {
+    transform: translateX(calc(-100% - var(--gap)));
+  }
+}
+
 [v-cloak] {
   display: none;
 }