add favicon + fix light mode logos (#264)

apps/web/public/icon/drizzle-light.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="160" height="160" fill="none" viewBox="0 0 160 160"><rect width="9.631" height="40.852" fill="#121212" rx="4.816" transform="matrix(.87303 .48767 -.49721 .86763 43.48 67.304)"/><rect width="9.631" height="40.852" fill="#121212" rx="4.816" transform="matrix(.87303 .48767 -.49721 .86763 76.94 46.534)"/><rect width="9.631" height="40.852" fill="#121212" rx="4.816" transform="matrix(.87303 .48767 -.49721 .86763 128.424 46.535)"/><rect width="9.631" height="40.852" fill="#121212" rx="4.816" transform="matrix(.87303 .48767 -.49721 .86763 94.957 67.304)"/></svg>

apps/web/public/icon/express-light.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="64" height="64"><path d="M32 24.795c-1.164.296-1.884.013-2.53-.957l-4.594-6.356-.664-.88-5.365 7.257c-.613.873-1.256 1.253-2.4.944l6.87-9.222-6.396-8.33c1.1-.214 1.86-.105 2.535.88l4.765 6.435 4.8-6.4c.615-.873 1.276-1.205 2.38-.883l-2.48 3.288-3.36 4.375c-.4.5-.345.842.023 1.325L32 24.795zM.008 15.427l.562-2.764C2.1 7.193 8.37 4.92 12.694 8.3c2.527 1.988 3.155 4.8 3.03 7.95H1.48c-.214 5.67 3.867 9.092 9.07 7.346 1.825-.613 2.9-2.042 3.438-3.83.273-.896.725-1.036 1.567-.78-.43 2.236-1.4 4.104-3.45 5.273-3.063 1.75-7.435 1.184-9.735-1.248C1 21.6.434 19.812.18 17.9c-.04-.316-.12-.617-.18-.92q.008-.776.008-1.552zm1.498-.38h12.872c-.084-4.1-2.637-7.012-6.126-7.037-3.83-.03-6.58 2.813-6.746 7.037z"/></svg>

apps/web/public/icon/prisma-light.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 256 310" width="256" height="310" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid"><path fill="#000" d="M254.313 235.519L148 9.749A17.063 17.063 0 00133.473.037a16.87 16.87 0 00-15.533 8.052L2.633 194.848a17.465 17.465 0 00.193 18.747L59.2 300.896a18.13 18.13 0 0020.363 7.489l163.599-48.392a17.929 17.929 0 0011.26-9.722 17.542 17.542 0 00-.101-14.76l-.008.008zm-23.802 9.683l-138.823 41.05c-4.235 1.26-8.3-2.411-7.419-6.685l49.598-237.484c.927-4.443 7.063-5.147 9.003-1.035l91.814 194.973a6.63 6.63 0 01-4.18 9.18h.007z"/></svg>

apps/web/public/logo.svg

@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="92" height="92" viewBox="0 0 92 92" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <rect x="8" y="8" width="76" height="76" rx="12" fill="#F5EEFF" stroke="#B79AFF" stroke-width="3"/>
+  <text x="46" y="56" text-anchor="middle" font-family="monospace" font-size="40" fill="#8F5BFF">$<tspan dx="0" dy="0">_</tspan></text>
+</svg>

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 }) {