feat: enhance onboarding

apps/nextjs/src/app/[locale]/init/page.tsx

@@ -15,6 +15,7 @@ import { resolveHomarrUrlConfig } from "@homarr/workshop/schema";
 
 import { DatabaseRestoreFlow } from "~/components/backup";
 import { env } from "~/env";
+import { getPackageVersion } from "~/versions/package-reader";
 import { AssistantConfiguration } from "../manage/assistant/_components/assistant-configuration";
 
 export default async function InitPage() {
@@ -55,6 +56,7 @@ export default async function InitPage() {
   return (
     <OnboardingStudio
       environment={{
+        version: getPackageVersion(),
         currentStep,
         databaseDriver,
         externalAuthEnabled: isProviderEnabled("ldap") || isProviderEnabled("oidc"),

apps/nextjs/src/app/[locale]/manage/_components/hero-banner.module.css

@@ -21,26 +21,4 @@
 
 .scrollContainer {
   height: 100%;
-  transform: rotateZ(10deg);
-}
-
-@keyframes scrolling {
-  0% {
-    transform: translateY(0);
-  }
-  100% {
-    transform: translateY(-50.8%);
-  }
-}
-
-.scrollAnimationContainer {
-  animation: scrolling;
-  animation-timing-function: linear;
-  animation-iteration-count: infinite;
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .scrollAnimationContainer {
-    animation: none !important;
-  }
 }

apps/nextjs/src/app/[locale]/manage/_components/hero-banner.tsx

@@ -1,20 +1,10 @@
-import { Box, Grid, GridCol, Group, Image, Stack, Title } from "@mantine/core";
+import { Box, Group, Image, Stack, Title } from "@mantine/core";
 
-import { splitToNChunks } from "@homarr/common";
-import { integrationDefs } from "@homarr/definitions";
 import { getScopedI18n } from "@homarr/translation/server";
+import { IntegrationMarquee } from "@homarr/ui";
 
 import classes from "./hero-banner.module.css";
 
-const icons = Object.values(integrationDefs)
-  .filter((int) => int.name !== "Mock")
-  .map((int) => int.iconUrl);
-
-const countIconGroups = 3;
-const animationDurationInSeconds = icons.length;
-const arrayInChunks = splitToNChunks(icons, countIconGroups);
-const gridSpan = 12 / countIconGroups;
-
 export const HeroBanner = async () => {
   const t = await getScopedI18n("management.page.home");
 
@@ -30,41 +20,7 @@ export const HeroBanner = async () => {
         </Group>
       </Stack>
       <Box visibleFrom="md" className={classes.scrollContainer} w={"30%"} top={0} right={0} pos="absolute">
-        <Grid>
-          {Array(countIconGroups)
-            .fill(0)
-            .map((_, columnIndex) => (
-              <GridCol key={`grid-column-${columnIndex}`} span={gridSpan}>
-                <Stack
-                  className={classes.scrollAnimationContainer}
-                  style={{
-                    animationDuration: `${animationDurationInSeconds - columnIndex}s`,
-                  }}
-                >
-                  {arrayInChunks[columnIndex]?.map((icon, index) => (
-                    <Image
-                      key={`grid-column-${columnIndex}-scroll-1-${index}`}
-                      src={icon}
-                      fit={"contain"}
-                      w={50}
-                      h={50}
-                    />
-                  ))}
-
-                  {/* This is used for making the animation seem seamless */}
-                  {arrayInChunks[columnIndex]?.map((icon, index) => (
-                    <Image
-                      key={`grid-column-${columnIndex}-scroll-2-${index}`}
-                      src={icon}
-                      fit={"contain"}
-                      w={50}
-                      h={50}
-                    />
-                  ))}
-                </Stack>
-              </GridCol>
-            ))}
-        </Grid>
+        <IntegrationMarquee />
       </Box>
     </Box>
   );