feat: change cta

src/components/Animated/UnderlineIconRouterLink.tsx

···
     position = "left",
     iconVariants = {
         rest: { rotate: 0 },
-        wiggle: { rotate: [0, -10, 10, -10, 10, 0, 0, 0] },
+        active: { rotate: [0, -10, 10, -10, 10, 0, 0, 0] },
     },
     iconTransitions = { duration: 0.25, ease: "easeInOut" },
     target = "_self",
···
             initial="rest"
             transition={iconTransitions}
             className={iconClassName}
-            animate={isIconWiggle ? "wiggle" : "rest"}
+            animate={isIconWiggle ? "active" : "rest"}
         >
             {icon}
         </motion.div>

src/components/Homepage/TrendingFeed.tsx

···
                     />
                     <p className="text-subtext max-w-164">{repoDesc}</p>
                 </div>
-                <button className="flex items-center gap-1">
-                    <LucideStar />
+                <button className="bg-surface1 border-overlay0 group flex cursor-pointer items-center gap-1 rounded-sm border p-1 transition-all">
+                    <LucideStar className="group-hover:text-accent-alt transition-all" />
                     <p>{starCount}</p>
                 </button>
             </div>

src/routes/_layout/index.tsx

···
+import { UnderlineIconRouterLink } from "@/components/Animated/UnderlineIconRouterLink";
 import { TrendingFeed } from "@/components/Homepage/TrendingFeed";
 import { Loading } from "@/components/Icons/Loading";
+import { LucideLogIn } from "@/components/Icons/LucideLogIn";
 import { NavBarUnauthed } from "@/components/Nav/NavBarUnauthed";
 import { useOAuth } from "@/lib/oauth";
 import { createFileRoute, Link, useNavigate } from "@tanstack/react-router";
···
     }
 
     return (
-        <div className="flex flex-col items-center justify-center gap-4 pt-4">
+        <div className="flex flex-col items-center justify-center gap-4 pt-8">
             <h1 className="text-xl font-bold">
                 The better frontend for the better forge.
             </h1>
-            <Link
+            <UnderlineIconRouterLink
                 to="/login"
-                className="hover:bg-overlay0 bg-surface0 text-text rounded-xs p-2 transition-all"
-            >
-                Sign in
-            </Link>
+                label="Sign In"
+                icon={LucideLogIn({})}
+                iconClassName="text-crust"
+                labelClassName="text-crust"
+                underlineClassName="bg-crust"
+                className="bg-accent rounded-sm p-1.5 pr-3 pl-3"
+                position="right"
+                iconTransitions={{ duration: 0.2, ease: "easeInOut" }}
+                iconVariants={{
+                    active: {
+                        x: [0, 10, -10, 0],
+                        opacity: [1, 0, 0, 1],
+                    },
+                }}
+            />
+            <div className="bg-surface1 h-0.5 w-full mt-6" />
+            <TrendingFeed />
         </div>
     );
 };