feat: design updates + new components

app/(docs)/[...slug]/page.tsx

@@ -1,4 +1,3 @@
-import { ExternalLinkIcon } from "lucide-react";
 import type { Metadata } from "next";
 import { Card, Cards } from "fumadocs-ui/components/card";
 import { RollButton } from "fumadocs-ui/components/roll-button";
@@ -90,7 +89,7 @@ export default function Page({ params }: { params: Param }): JSX.Element {
     >
       <RollButton />
       {page.data.title !== "Home" && (
-        <h1 className="text-3xl font-bold text-foreground sm:text-4xl">
+        <h1 className="text-2xl text-foreground sm:text-3xl">
           {prefix} {page.data.title}
         </h1>
       )}
@@ -99,6 +98,9 @@ export default function Page({ params }: { params: Param }): JSX.Element {
           {page.data.description}
         </p>
       )}
+      {page.data.title !== "Home" && (
+        <hr className="border-t border-border/50" />
+      )}
       <DocsBody>
         {page.data.index ? (
           <Category page={page} />

app/(docs)/layout.client.tsx

@@ -4,7 +4,7 @@ import { cva } from "class-variance-authority";
 import Link from "next/link";
 import { useParams, usePathname } from "next/navigation";
 import type { ReactNode } from "react";
-import { cn } from "@/utils/cn";
+import { cn } from "@/lib/utils";
 import { modes } from "@/utils/modes";
 import { ChevronLeft } from "lucide-react";
 
@@ -15,7 +15,7 @@ const itemVariants = cva(
   {
     variants: {
       active: {
-        true: "text-accent-foreground",
+        true: "text-accent-foreground pointer-events-none",
       },
       mode: {
         bitcoin: "bg-hiro",
@@ -31,7 +31,7 @@ const itemVariants = cva(
       {
         active: true,
         mode: "stacks",
-        className: "bg-background",
+        className: "bg-inverted text-background",
       },
     ],
   }

app/(home)/layout.tsx

@@ -8,7 +8,7 @@ export default function HomeLayout({
   children: ReactNode;
 }): JSX.Element {
   return (
-    <div className="max-w-7xl mx-auto *:border-none">
+    <div className="px-10 *:border-none">
       <Layout {...homeLayoutOptions}>{children}</Layout>
     </div>
   );