refactor move home / into vue components (#3498)

lnbits/static/scss/base.scss

@@ -1,6 +1,7 @@
 @import 'themes';
 @import 'borders';
 @import 'background';
+@import 'home';
 
 [v-cloak] {
   display: none;

lnbits/static/scss/home.scss

@@ -0,0 +1,60 @@
+:root {
+  --size: 100px;
+  --gap: 25px;
+}
+
+.home {
+  .btn-fixed-width {
+    /* width: 45%; */
+  }
+
+  .wrapper {
+    display: flex;
+    flex-direction: column;
+    gap: var(--gap);
+    margin: auto;
+    max-width: 100%;
+  }
+
+  .marquee {
+    display: flex;
+    overflow: hidden;
+    user-select: none;
+    gap: var(--gap);
+    height: max-content;
+    mask-image: linear-gradient(
+      to right,
+      hsl(0 0% 0% / 0),
+      hsl(0 0% 0% / 1) 20%,
+      hsl(0 0% 0% / 1) 80%,
+      hsl(0 0% 0% / 0)
+    );
+  }
+
+  .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;
+  }
+
+  .marquee:hover .marquee__group {
+    animation-play-state: paused;
+  }
+
+  .marquee__group div {
+    width: var(--size);
+  }
+
+  @keyframes scroll-x {
+    from {
+      transform: translateX(0);
+    }
+    to {
+      transform: translateX(calc(-100% - var(--gap)));
+    }
+  }
+}