add favicon + fix light mode logos (#264)

apps/web/src/app/(home)/_components/code-container.tsx

@@ -53,7 +53,7 @@ const CodeContainer = () => {
 	const packageManagers: Array<"npm" | "pnpm" | "bun"> = ["bun", "pnpm", "npm"];
 
 	return (
-		<div className="mx-auto mt-6 w-full max-w-3xl font-mono">
+		<div className="mx-auto mt-6 w-full max-w-3xl px-2 font-mono md:px-0">
 			<div className="overflow-hidden rounded-lg border border-border bg-muted/30 shadow-sm">
 				<div className="flex items-center justify-between border-border border-b bg-muted/50 px-4 py-2">
 					<span className="text-muted-foreground text-xs">

apps/web/src/app/(home)/_components/navbar.tsx

@@ -3,6 +3,7 @@ import { ThemeToggle } from "@/components/theme-toggle";
 import { cn } from "@/lib/utils";
 import { Github, Maximize2, Menu, X } from "lucide-react";
 import { AnimatePresence, motion } from "motion/react";
+import Image from "next/image";
 import Link from "next/link";
 import { useEffect, useState } from "react";
 import PackageIcon from "./icons";
@@ -93,11 +94,13 @@ export default function Navbar() {
 			>
 				<div className="mx-auto flex h-16 max-w-7xl items-center justify-between px-4 sm:px-6 lg:px-8">
 					<Link href="/" className="flex flex-shrink-0 items-center gap-2">
-						<div className="flex h-6 w-6 items-center justify-center rounded-md border border-primary/50 bg-primary/10">
-							<span className="font-medium font-mono text-primary text-sm">
-								$_
-							</span>
-						</div>
+						<Image
+							src="/logo.svg"
+							alt="Better-T Stack"
+							width={32}
+							height={32}
+							unoptimized
+						/>
 						<span className="hidden font-semibold text-foreground text-md sm:inline-block">
 							Better-T Stack
 						</span>

apps/web/src/app/(home)/_components/stack-builder.tsx

@@ -31,6 +31,7 @@ import {
 	Terminal,
 } from "lucide-react";
 import { motion } from "motion/react";
+import { useTheme } from "next-themes";
 import Image from "next/image";
 import Link from "next/link";
 import { useQueryStates } from "nuqs";
@@ -152,7 +153,23 @@ const TechIcon: React.FC<{
 	name: string;
 	className?: string;
 }> = ({ icon, name, className }) => {
-	if (icon.startsWith("/icon/")) {
+	const [mounted, setMounted] = useState(false);
+	const { theme } = useTheme();
+
+	useEffect(() => {
+		setMounted(true);
+	}, []);
+
+	if (mounted && icon.startsWith("/icon/")) {
+		if (
+			theme === "light" &&
+			(icon.includes("drizzle") ||
+				icon.includes("prisma") ||
+				icon.includes("express"))
+		) {
+			icon = icon.replace(".svg", "-light.svg");
+		}
+
 		return (
 			<Image
 				src={icon}

apps/web/src/app/layout.tsx

@@ -80,6 +80,9 @@ export const metadata: Metadata = {
 		},
 	},
 	category: "Technology",
+	icons: {
+		icon: "/logo.svg",
+	},
 };
 
 export default function Layout({ children }: { children: ReactNode }) {