Update CTA for dashboard and sign in

src/app/header.tsx

@@ -1,6 +1,8 @@
 "use client";
 
 import ThemeToggle from "@/components/ThemeToggle";
+import { buttonVariants } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
 import {
 	SignedIn,
 	UserButton,
@@ -24,12 +26,26 @@ export default function Header() {
 			<div className="flex items-center gap-3">
 				<SignedIn>
 					{!path.includes("dashboard") && (
-						<Link href="/dashboard">Go to Dashboard</Link>
+						<Link
+							href="/dashboard"
+							className={cn(buttonVariants({ variant: "default", size: "sm" }))}
+						>
+							Dashboard
+						</Link>
 					)}
 					<UserButton afterSignOutUrl="\" />
 				</SignedIn>
 				<SignedOut>
-					<SignInButton mode="modal" />
+					<SignInButton mode="modal">
+						<span
+							className={cn(
+								buttonVariants({ variant: "default", size: "sm" }),
+								"cursor-pointer"
+							)}
+						>
+							Sign in
+						</span>
+					</SignInButton>
 				</SignedOut>
 				<nav className="flex items-center space-x-1">
 					<ThemeToggle />

src/app/page.tsx

@@ -4,12 +4,12 @@ import { useConvexAuth } from "convex/react";
 import Header from "./header";
 
 export default function Home() {
-	const { isAuthenticated } = useConvexAuth();
-
 	return (
 		<>
 			<Header />
-			<main className="h-svh pt-24">Home page!</main>
+			<main className="h-svh flex items-center justify-center">
+				<h1 className="text-8xl">Home page!</h1>
+			</main>
 		</>
 	);
 }

src/components/DashboardNav/DashboardNav.tsx

@@ -27,8 +27,7 @@ export default function DashboardNav({
 									className={cn(
 										buttonVariants({ variant: link.variant, size: "icon" }),
 										"h-9 w-9",
-										link.variant === "default" &&
-											"dark:bg-muted dark:text-muted-foreground dark:hover:bg-muted dark:hover:text-white"
+										link.variant === "default"
 									)}
 									onClick={() => setActiveTab(index)}
 								>