Redesign home page with hero section (#19)

Author: wins1ey

src/app/home.tsx

@@ -1,8 +1,10 @@
 import { AppGitHubReadme } from "@/components/libresplit/AppGitHubReadme";
+import { AppHero } from "@/components/libresplit/AppHero";
 
 export function Home() {
   return (
-    <div>
+    <div className="flex flex-col items-center justify-center">
+      <AppHero />
       <AppGitHubReadme />
     </div>
   );

src/components/libresplit/AppHero.tsx

@@ -0,0 +1,17 @@
+import { TextScramble } from "../ui/text-scramble";
+
+export function AppHero() {
+  return (
+    <div className="flex flex-col items-center justify-center">
+      <img
+        src="https://raw.githubusercontent.com/LibreSplit/LibreSplit/refs/heads/main/assets/libresplit.svg"
+        alt="LibreSplit"
+        className="w-64"
+      />
+      <p className="text-bold text-6xl">LibreSplit</p>
+      <TextScramble characterSet="_" speed={28}>
+        Free speedrun timer with auto splitting and load removal for Linux.
+      </TextScramble>
+    </div>
+  );
+}

src/components/libresplit/AppNav.tsx

@@ -15,21 +15,23 @@ export function AppNav() {
         <LeftNav />
       </div>
 
-      <NavigationMenu>
-        <NavigationMenuList>
-          <NavigationMenuItem>
-            <NavigationMenuLink asChild>
-              <Link to="/">Home</Link>
-            </NavigationMenuLink>
-          </NavigationMenuItem>
+      <div className="absolute left-1/2 -translate-x-1/2">
+        <NavigationMenu>
+          <NavigationMenuList>
+            <NavigationMenuItem>
+              <NavigationMenuLink asChild>
+                <Link to="/">Home</Link>
+              </NavigationMenuLink>
+            </NavigationMenuItem>
 
-          <NavigationMenuItem>
-            <NavigationMenuLink asChild>
-              <Link to="/converter">Converter</Link>
-            </NavigationMenuLink>
-          </NavigationMenuItem>
-        </NavigationMenuList>
-      </NavigationMenu>
+            <NavigationMenuItem>
+              <NavigationMenuLink asChild>
+                <Link to="/converter">Converter</Link>
+              </NavigationMenuLink>
+            </NavigationMenuItem>
+          </NavigationMenuList>
+        </NavigationMenu>
+      </div>
 
       <div className="flex items-center">
         <RightNav />

src/components/ui/text-scramble.tsx

@@ -0,0 +1,62 @@
+"use client";
+
+import { useEffect, useState } from "react";
+
+import { motion } from "framer-motion";
+
+interface TextScrambleProps {
+  children: string;
+  speed?: number;
+  characterSet?: string;
+  className?: string;
+}
+
+const DEFAULT_CHARS =
+  "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
+
+function getRandomChar(charSet: string) {
+  return charSet[Math.floor(Math.random() * charSet.length)];
+}
+
+export const TextScramble = ({
+  children,
+  speed = 50,
+  characterSet = DEFAULT_CHARS,
+  className,
+  ...motionProps
+}: TextScrambleProps) => {
+  const [text, setText] = useState(children);
+
+  useEffect(() => {
+    let step = 0;
+    const interval = setInterval(() => {
+      let scrambled = "";
+
+      for (let i = 0; i < children.length; i++) {
+        if (i < step) {
+          scrambled += children[i];
+        } else if (children[i] === " ") {
+          scrambled += " ";
+        } else {
+          scrambled += getRandomChar(characterSet);
+        }
+      }
+
+      setText(scrambled);
+      step++;
+
+      if (step > children.length) {
+        clearInterval(interval);
+        setText(children);
+      }
+    }, speed);
+
+    return () => clearInterval(interval);
+  }, [children, speed, characterSet]);
+
+  return (
+    <motion.span className={className} {...motionProps}>
+      {text}
+    </motion.span>
+  );
+};