mvp

app/(auth)/layout.tsx

@@ -0,0 +1,27 @@
+import { GitBranch } from "lucide-react";
+import Link from "next/link";
+
+export default function AuthLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <div className="min-h-screen flex flex-col items-center justify-center relative overflow-hidden px-4">
+      <div className="absolute inset-0 bg-[radial-gradient(ellipse_at_top,_var(--tw-gradient-stops))] from-accent/15 via-background to-background" />
+      <div className="absolute inset-0">
+        <div className="absolute top-1/4 left-1/4 w-[500px] h-[500px] bg-accent/5 rounded-full blur-[100px]" />
+        <div className="absolute bottom-1/4 right-1/4 w-[400px] h-[400px] bg-primary/5 rounded-full blur-[100px]" />
+      </div>
+      <div className="relative z-10 flex flex-col items-center w-full max-w-[400px]">
+        <Link href="/" className="flex items-center gap-3 mb-10 group">
+          <div className="relative">
+            <GitBranch className="w-10 h-10 text-foreground transition-transform group-hover:scale-110" />
+          </div>
+          <span className="text-2xl font-bold tracking-tight">gitbruv</span>
+        </Link>
+        {children}
+      </div>
+    </div>
+  );
+}

app/(auth)/login/page.tsx

@@ -0,0 +1,97 @@
+"use client";
+
+import { useState } from "react";
+import { useRouter } from "next/navigation";
+import Link from "next/link";
+import { signIn } from "@/lib/auth-client";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { toast } from "sonner";
+import { Loader2 } from "lucide-react";
+
+export default function LoginPage() {
+  const router = useRouter();
+  const [loading, setLoading] = useState(false);
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+
+  async function handleSubmit(e: React.FormEvent) {
+    e.preventDefault();
+    setLoading(true);
+
+    try {
+      const { error } = await signIn.email({
+        email,
+        password,
+      });
+
+      if (error) {
+        toast.error(error.message || "Failed to sign in");
+        return;
+      }
+
+      toast.success("Welcome back!");
+      router.push("/");
+      router.refresh();
+    } catch {
+      toast.error("Something went wrong");
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  return (
+    <div className="w-full">
+      <div className="rounded-xl border border-border bg-card/80 backdrop-blur-sm p-8">
+        <div className="text-center mb-8">
+          <h1 className="text-xl font-semibold">Sign in to gitbruv</h1>
+        </div>
+        <form onSubmit={handleSubmit} className="space-y-5">
+          <div className="space-y-2">
+            <Label htmlFor="email">Email address</Label>
+            <Input
+              id="email"
+              type="email"
+              value={email}
+              onChange={(e) => setEmail(e.target.value)}
+              placeholder="you@example.com"
+              required
+              className="bg-input/50 h-11"
+            />
+          </div>
+          <div className="space-y-2">
+            <Label htmlFor="password">Password</Label>
+            <Input
+              id="password"
+              type="password"
+              value={password}
+              onChange={(e) => setPassword(e.target.value)}
+              placeholder="••••••••"
+              required
+              className="bg-input/50 h-11"
+            />
+          </div>
+          <Button type="submit" disabled={loading} className="w-full h-11">
+            {loading ? (
+              <>
+                <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                Signing in...
+              </>
+            ) : (
+              "Sign in"
+            )}
+          </Button>
+        </form>
+      </div>
+      <div className="mt-6 p-4 rounded-xl border border-border text-center">
+        <p className="text-sm text-muted-foreground">
+          New to gitbruv?{" "}
+          <Link href="/register" className="text-accent hover:underline font-medium">
+            Create an account
+          </Link>
+        </p>
+      </div>
+    </div>
+  );
+}

app/(auth)/register/page.tsx

@@ -0,0 +1,153 @@
+"use client";
+
+import { useState } from "react";
+import { useRouter } from "next/navigation";
+import Link from "next/link";
+import { signUpWithUsername } from "@/lib/auth-client";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { toast } from "sonner";
+import { Loader2 } from "lucide-react";
+
+export default function RegisterPage() {
+  const router = useRouter();
+  const [loading, setLoading] = useState(false);
+  const [formData, setFormData] = useState({
+    name: "",
+    username: "",
+    email: "",
+    password: "",
+  });
+
+  async function handleSubmit(e: React.FormEvent) {
+    e.preventDefault();
+    setLoading(true);
+
+    if (formData.username.length < 3) {
+      toast.error("Username must be at least 3 characters");
+      setLoading(false);
+      return;
+    }
+
+    if (!/^[a-zA-Z0-9_-]+$/.test(formData.username)) {
+      toast.error("Username can only contain letters, numbers, hyphens, and underscores");
+      setLoading(false);
+      return;
+    }
+
+    try {
+      const { error } = await signUpWithUsername({
+        email: formData.email,
+        password: formData.password,
+        name: formData.name,
+        username: formData.username.toLowerCase(),
+      });
+
+      if (error) {
+        toast.error(error.message || "Failed to create account");
+        return;
+      }
+
+      toast.success("Account created successfully!");
+      router.push("/");
+      router.refresh();
+    } catch {
+      toast.error("Something went wrong");
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  return (
+    <div className="w-full">
+      <div className="rounded-xl border border-border bg-card/80 backdrop-blur-sm p-8">
+        <div className="text-center mb-8">
+          <h1 className="text-xl font-semibold">Create your account</h1>
+        </div>
+        <form onSubmit={handleSubmit} className="space-y-5">
+          <div className="space-y-2">
+            <Label htmlFor="name">Name</Label>
+            <Input
+              id="name"
+              type="text"
+              value={formData.name}
+              onChange={(e) => setFormData({ ...formData, name: e.target.value })}
+              placeholder="John Doe"
+              required
+              className="bg-input/50 h-11"
+            />
+          </div>
+          <div className="space-y-2">
+            <Label htmlFor="username">Username</Label>
+            <Input
+              id="username"
+              type="text"
+              value={formData.username}
+              onChange={(e) => setFormData({ ...formData, username: e.target.value })}
+              placeholder="johndoe"
+              required
+              className="bg-input/50 h-11"
+            />
+            <p className="text-xs text-muted-foreground">
+              This will be your unique identifier on gitbruv
+            </p>
+          </div>
+          <div className="space-y-2">
+            <Label htmlFor="email">Email address</Label>
+            <Input
+              id="email"
+              type="email"
+              value={formData.email}
+              onChange={(e) => setFormData({ ...formData, email: e.target.value })}
+              placeholder="you@example.com"
+              required
+              className="bg-input/50 h-11"
+            />
+          </div>
+          <div className="space-y-2">
+            <Label htmlFor="password">Password</Label>
+            <Input
+              id="password"
+              type="password"
+              value={formData.password}
+              onChange={(e) => setFormData({ ...formData, password: e.target.value })}
+              placeholder="••••••••"
+              required
+              minLength={8}
+              className="bg-input/50 h-11"
+            />
+            <p className="text-xs text-muted-foreground">
+              Must be at least 8 characters
+            </p>
+          </div>
+          <Button
+            type="submit"
+            disabled={loading}
+            className="w-full h-11"
+          >
+            {loading ? (
+              <>
+                <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                Creating account...
+              </>
+            ) : (
+              "Create account"
+            )}
+          </Button>
+        </form>
+      </div>
+      <div className="mt-6 p-4 rounded-xl border border-border text-center">
+        <p className="text-sm text-muted-foreground">
+          Already have an account?{" "}
+          <Link
+            href="/login"
+            className="text-accent hover:underline font-medium"
+          >
+            Sign in
+          </Link>
+        </p>
+      </div>
+    </div>
+  );
+}

app/(main)/[username]/[repo]/blob/[...path]/page.tsx

@@ -0,0 +1,114 @@
+import { notFound } from "next/navigation";
+import Link from "next/link";
+import { getRepository, getRepoFile } from "@/actions/repositories";
+import { CodeViewer } from "@/components/code-viewer";
+import { Badge } from "@/components/ui/badge";
+import { Lock, Globe, ChevronRight, Home, FileCode } from "lucide-react";
+
+const LANGUAGE_MAP: Record<string, string> = {
+  ts: "typescript",
+  tsx: "typescript",
+  js: "javascript",
+  jsx: "javascript",
+  py: "python",
+  rb: "ruby",
+  go: "go",
+  rs: "rust",
+  java: "java",
+  md: "markdown",
+  json: "json",
+  yaml: "yaml",
+  yml: "yaml",
+  css: "css",
+  html: "html",
+  sh: "bash",
+  bash: "bash",
+  zsh: "bash",
+};
+
+function getLanguage(filename: string): string {
+  const ext = filename.split(".").pop()?.toLowerCase() || "";
+  return LANGUAGE_MAP[ext] || "text";
+}
+
+export default async function BlobPage({ params }: { params: Promise<{ username: string; repo: string; path: string[] }> }) {
+  const { username, repo: repoName, path: pathSegments } = await params;
+  const branch = pathSegments[0];
+  const filePath = pathSegments.slice(1).join("/");
+
+  const repo = await getRepository(username, repoName);
+
+  if (!repo) {
+    notFound();
+  }
+
+  const file = await getRepoFile(username, repoName, branch, filePath);
+
+  if (!file) {
+    notFound();
+  }
+
+  const pathParts = filePath.split("/").filter(Boolean);
+  const fileName = pathParts[pathParts.length - 1];
+  const language = getLanguage(fileName);
+  const lineCount = file.content.split("\n").length;
+
+  return (
+    <div className="container px-4 py-6">
+      <div className="flex flex-col lg:flex-row items-start lg:items-center justify-between gap-4 mb-6">
+        <div className="flex items-center gap-2 flex-wrap">
+          <Link href={`/${username}`} className="text-accent hover:underline">
+            <span className="text-xl font-bold">{username}</span>
+          </Link>
+          <span className="text-muted-foreground">/</span>
+          <Link href={`/${username}/${repoName}`} className="text-accent hover:underline font-bold">
+            {repoName}
+          </Link>
+          <Badge variant="secondary" className="text-xs font-normal">
+            {repo.visibility === "private" ? (
+              <>
+                <Lock className="h-3 w-3 mr-1" />
+                Private
+              </>
+            ) : (
+              <>
+                <Globe className="h-3 w-3 mr-1" />
+                Public
+              </>
+            )}
+          </Badge>
+        </div>
+      </div>
+
+      <div className="border border-border rounded-lg overflow-hidden">
+        <nav className="flex items-center gap-1 px-4 py-2 bg-card border-b border-border text-sm">
+          <Link href={`/${username}/${repoName}`} className="text-accent hover:underline flex items-center gap-1">
+            <Home className="h-4 w-4" />
+            {repoName}
+          </Link>
+          {pathParts.map((part, i) => (
+            <span key={i} className="flex items-center gap-1">
+              <ChevronRight className="h-4 w-4 text-muted-foreground" />
+              {i === pathParts.length - 1 ? (
+                <span className="font-medium">{part}</span>
+              ) : (
+                <Link href={`/${username}/${repoName}/tree/${branch}/${pathParts.slice(0, i + 1).join("/")}`} className="text-accent hover:underline">
+                  {part}
+                </Link>
+              )}
+            </span>
+          ))}
+        </nav>
+
+        <div className="flex items-center justify-between px-4 py-2 bg-muted/30 border-b border-border">
+          <div className="flex items-center gap-2 text-sm text-muted-foreground">
+            <FileCode className="h-4 w-4" />
+            <span>{lineCount} lines</span>
+          </div>
+        </div>
+
+        <CodeViewer content={file.content} language={language} showLineNumbers />
+      </div>
+    </div>
+  );
+}

app/(main)/[username]/[repo]/page.tsx

@@ -0,0 +1,131 @@
+import { notFound } from "next/navigation";
+import { getRepository, getRepoFileTree, getRepoFile } from "@/actions/repositories";
+import { FileTree } from "@/components/file-tree";
+import { CodeViewer } from "@/components/code-viewer";
+import { CloneUrl } from "@/components/clone-url";
+import { Badge } from "@/components/ui/badge";
+import { GitBranch, Lock, Globe, FileCode } from "lucide-react";
+import Link from "next/link";
+
+export default async function RepoPage({ params }: { params: Promise<{ username: string; repo: string }> }) {
+  const { username, repo: repoName } = await params;
+
+  const repo = await getRepository(username, repoName);
+
+  if (!repo) {
+    notFound();
+  }
+
+  const fileTree = await getRepoFileTree(username, repoName, repo.defaultBranch);
+  const readmeFile = fileTree?.files.find((f) => f.name.toLowerCase() === "readme.md" && f.type === "blob");
+
+  let readmeContent = null;
+  if (readmeFile) {
+    const file = await getRepoFile(username, repoName, repo.defaultBranch, readmeFile.name);
+    readmeContent = file?.content;
+  }
+
+  return (
+    <div className="container px-4 py-6">
+      <div className="flex flex-col lg:flex-row items-start lg:items-center justify-between gap-4 mb-6">
+        <div className="flex items-center gap-2 flex-wrap">
+          <Link href={`/${username}`} className="text-accent hover:underline">
+            <span className="text-xl font-bold">{username}</span>
+          </Link>
+          <span className="text-muted-foreground">/</span>
+          <h1 className="text-xl font-bold">{repo.name}</h1>
+          <Badge variant="secondary" className="text-xs font-normal">
+            {repo.visibility === "private" ? (
+              <>
+                <Lock className="h-3 w-3 mr-1" />
+                Private
+              </>
+            ) : (
+              <>
+                <Globe className="h-3 w-3 mr-1" />
+                Public
+              </>
+            )}
+          </Badge>
+        </div>
+        <CloneUrl username={username} repoName={repo.name} />
+      </div>
+
+      {repo.description && <p className="text-muted-foreground mb-6">{repo.description}</p>}
+
+      <div className="grid lg:grid-cols-4 gap-6">
+        <div className="lg:col-span-3 space-y-6">
+          <div className="border border-border rounded-lg overflow-hidden">
+            <div className="flex items-center gap-2 px-4 py-3 bg-card border-b border-border">
+              <GitBranch className="h-4 w-4 text-muted-foreground" />
+              <span className="text-sm font-medium">{repo.defaultBranch}</span>
+            </div>
+
+            {fileTree?.isEmpty ? (
+              <EmptyRepoGuide username={username} repoName={repo.name} />
+            ) : (
+              <FileTree files={fileTree?.files || []} username={username} repoName={repo.name} branch={repo.defaultBranch} />
+            )}
+          </div>
+
+          {readmeContent && (
+            <div className="border border-border rounded-lg overflow-hidden">
+              <div className="flex items-center gap-2 px-4 py-3 bg-card border-b border-border">
+                <FileCode className="h-4 w-4 text-muted-foreground" />
+                <span className="text-sm font-medium">README.md</span>
+              </div>
+              <div className="p-6">
+                <CodeViewer content={readmeContent} language="markdown" />
+              </div>
+            </div>
+          )}
+        </div>
+
+        <aside className="space-y-6">
+          <div className="border border-border rounded-lg p-4">
+            <h3 className="font-semibold mb-3">About</h3>
+            <p className="text-sm text-muted-foreground">{repo.description || "No description provided."}</p>
+          </div>
+        </aside>
+      </div>
+    </div>
+  );
+}
+
+function EmptyRepoGuide({ username, repoName }: { username: string; repoName: string }) {
+  const cloneUrl = `${process.env.NEXT_PUBLIC_APP_URL || "http://localhost:3000"}/api/git/${username}/${repoName}.git`;
+
+  return (
+    <div className="p-6 space-y-6">
+      <div className="text-center py-8">
+        <GitBranch className="h-12 w-12 mx-auto mb-4 text-muted-foreground" />
+        <h3 className="text-lg font-medium mb-2">This repository is empty</h3>
+        <p className="text-muted-foreground">Get started by cloning or pushing to this repository.</p>
+      </div>
+
+      <div className="space-y-4">
+        <div>
+          <h4 className="text-sm font-medium mb-2">Create a new repository on the command line</h4>
+          <pre className="bg-muted p-4 rounded-lg text-sm overflow-x-auto">
+            <code>{`echo "# ${repoName}" >> README.md
+git init
+git add README.md
+git commit -m "first commit"
+git branch -M main
+git remote add origin ${cloneUrl}
+git push -u origin main`}</code>
+          </pre>
+        </div>
+
+        <div>
+          <h4 className="text-sm font-medium mb-2">Push an existing repository from the command line</h4>
+          <pre className="bg-muted p-4 rounded-lg text-sm overflow-x-auto">
+            <code>{`git remote add origin ${cloneUrl}
+git branch -M main
+git push -u origin main`}</code>
+          </pre>
+        </div>
+      </div>
+    </div>
+  );
+}

app/(main)/[username]/[repo]/tree/[...path]/page.tsx

@@ -0,0 +1,83 @@
+import { notFound } from "next/navigation";
+import Link from "next/link";
+import { getRepository, getRepoFileTree } from "@/actions/repositories";
+import { FileTree } from "@/components/file-tree";
+import { Badge } from "@/components/ui/badge";
+import { GitBranch, Lock, Globe, ChevronRight, Home } from "lucide-react";
+
+export default async function TreePage({ params }: { params: Promise<{ username: string; repo: string; path: string[] }> }) {
+  const { username, repo: repoName, path: pathSegments } = await params;
+  const branch = pathSegments[0];
+  const dirPath = pathSegments.slice(1).join("/");
+
+  const repo = await getRepository(username, repoName);
+
+  if (!repo) {
+    notFound();
+  }
+
+  const fileTree = await getRepoFileTree(username, repoName, branch, dirPath);
+
+  if (!fileTree) {
+    notFound();
+  }
+
+  const pathParts = dirPath.split("/").filter(Boolean);
+
+  return (
+    <div className="container px-4 py-6">
+      <div className="flex flex-col lg:flex-row items-start lg:items-center justify-between gap-4 mb-6">
+        <div className="flex items-center gap-2 flex-wrap">
+          <Link href={`/${username}`} className="text-accent hover:underline">
+            <span className="text-xl font-bold">{username}</span>
+          </Link>
+          <span className="text-muted-foreground">/</span>
+          <Link href={`/${username}/${repoName}`} className="text-accent hover:underline font-bold">
+            {repoName}
+          </Link>
+          <Badge variant="secondary" className="text-xs font-normal">
+            {repo.visibility === "private" ? (
+              <>
+                <Lock className="h-3 w-3 mr-1" />
+                Private
+              </>
+            ) : (
+              <>
+                <Globe className="h-3 w-3 mr-1" />
+                Public
+              </>
+            )}
+          </Badge>
+        </div>
+      </div>
+
+      <div className="border border-border rounded-lg overflow-hidden">
+        <div className="flex items-center gap-2 px-4 py-3 bg-card border-b border-border">
+          <GitBranch className="h-4 w-4 text-muted-foreground" />
+          <span className="text-sm font-medium">{branch}</span>
+        </div>
+
+        <nav className="flex items-center gap-1 px-4 py-2 bg-muted/30 border-b border-border text-sm">
+          <Link href={`/${username}/${repoName}`} className="text-accent hover:underline flex items-center gap-1">
+            <Home className="h-4 w-4" />
+            {repoName}
+          </Link>
+          {pathParts.map((part, i) => (
+            <span key={i} className="flex items-center gap-1">
+              <ChevronRight className="h-4 w-4 text-muted-foreground" />
+              {i === pathParts.length - 1 ? (
+                <span className="font-medium">{part}</span>
+              ) : (
+                <Link href={`/${username}/${repoName}/tree/${branch}/${pathParts.slice(0, i + 1).join("/")}`} className="text-accent hover:underline">
+                  {part}
+                </Link>
+              )}
+            </span>
+          ))}
+        </nav>
+
+        <FileTree files={fileTree.files} username={username} repoName={repoName} branch={branch} basePath={dirPath} />
+      </div>
+    </div>
+  );
+}

app/(main)/[username]/page.tsx

@@ -0,0 +1,71 @@
+import { notFound } from "next/navigation";
+import { db } from "@/db";
+import { users } from "@/db/schema";
+import { eq } from "drizzle-orm";
+import { getUserRepositories } from "@/actions/repositories";
+import { RepoList } from "@/components/repo-list";
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { CalendarDays, GitBranch } from "lucide-react";
+import { format } from "date-fns";
+
+export default async function ProfilePage({
+  params,
+}: {
+  params: Promise<{ username: string }>;
+}) {
+  const { username } = await params;
+
+  const user = await db.query.users.findFirst({
+    where: eq(users.username, username),
+  });
+
+  if (!user) {
+    notFound();
+  }
+
+  const repos = await getUserRepositories(username);
+
+  return (
+    <div className="container px-4 py-8">
+      <div className="flex flex-col lg:flex-row gap-8">
+        <aside className="lg:w-72 shrink-0">
+          <div className="sticky top-20">
+            <Avatar className="w-64 h-64 mx-auto lg:mx-0 mb-4 border-4 border-border">
+              <AvatarImage src={user.image || undefined} />
+              <AvatarFallback className="text-6xl bg-accent/20">
+                {user.name.charAt(0).toUpperCase()}
+              </AvatarFallback>
+            </Avatar>
+            <h1 className="text-2xl font-bold">{user.name}</h1>
+            <p className="text-lg text-muted-foreground">@{user.username}</p>
+            <div className="flex items-center gap-2 mt-4 text-sm text-muted-foreground">
+              <CalendarDays className="h-4 w-4" />
+              <span>Joined {format(new Date(user.createdAt), "MMMM yyyy")}</span>
+            </div>
+          </div>
+        </aside>
+
+        <div className="flex-1 min-w-0">
+          <div className="flex items-center gap-2 mb-6">
+            <GitBranch className="h-5 w-5" />
+            <h2 className="text-xl font-semibold">Repositories</h2>
+            <span className="text-sm text-muted-foreground">({repos.length})</span>
+          </div>
+
+          {repos.length === 0 ? (
+            <div className="border border-dashed border-border rounded-lg p-12 text-center">
+              <GitBranch className="h-12 w-12 mx-auto mb-4 text-muted-foreground" />
+              <h3 className="text-lg font-medium mb-2">No repositories yet</h3>
+              <p className="text-muted-foreground">
+                {user.name} hasn&apos;t created any public repositories.
+              </p>
+            </div>
+          ) : (
+            <RepoList repos={repos} username={username} />
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
+

app/(main)/layout.tsx

@@ -0,0 +1,18 @@
+import { Header } from "@/components/header";
+import { QueryProvider } from "@/lib/query-client";
+
+export default function MainLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <QueryProvider>
+      <div className="min-h-screen flex flex-col">
+        <Header />
+        <main className="flex-1">{children}</main>
+      </div>
+    </QueryProvider>
+  );
+}
+

app/(main)/new/page.tsx

@@ -0,0 +1,202 @@
+"use client";
+
+import { useState } from "react";
+import { useRouter } from "next/navigation";
+import { createRepository } from "@/actions/repositories";
+import { useSession } from "@/lib/auth-client";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Textarea } from "@/components/ui/textarea";
+import { toast } from "sonner";
+import { Loader2, Lock, Globe, BookMarked } from "lucide-react";
+import Link from "next/link";
+
+export default function NewRepoPage() {
+  const router = useRouter();
+  const { data: session, isPending } = useSession();
+  const [loading, setLoading] = useState(false);
+  const [formData, setFormData] = useState({
+    name: "",
+    description: "",
+    visibility: "public" as "public" | "private",
+  });
+
+  const username = (session?.user as { username?: string } | undefined)?.username || "";
+
+  async function handleSubmit(e: React.FormEvent) {
+    e.preventDefault();
+    if (!session?.user) {
+      toast.error("You must be logged in");
+      return;
+    }
+
+    setLoading(true);
+
+    try {
+      await createRepository({
+        name: formData.name,
+        description: formData.description || undefined,
+        visibility: formData.visibility,
+      });
+
+      toast.success("Repository created!");
+      router.push(`/${username}/${formData.name.toLowerCase().replace(/\s+/g, "-")}`);
+    } catch (err) {
+      toast.error(err instanceof Error ? err.message : "Failed to create repository");
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  if (isPending) {
+    return (
+      <div className="container max-w-2xl py-16">
+        <div className="flex items-center justify-center">
+          <Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
+        </div>
+      </div>
+    );
+  }
+
+  if (!session?.user) {
+    return (
+      <div className="container max-w-2xl py-16">
+        <div className="rounded-xl border border-border bg-card p-12 text-center">
+          <BookMarked className="h-12 w-12 mx-auto mb-4 text-muted-foreground" />
+          <h2 className="text-xl font-semibold mb-2">Sign in required</h2>
+          <p className="text-muted-foreground mb-6">Please sign in to create a repository</p>
+          <Button asChild>
+            <Link href="/login">Sign in</Link>
+          </Button>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="container max-w-2xl! py-8">
+      <div className="mb-8">
+        <h1 className="text-2xl font-bold mb-2">Create a new repository</h1>
+        <p className="text-muted-foreground">A repository contains all project files, including the revision history.</p>
+      </div>
+
+      <form onSubmit={handleSubmit} className="space-y-8">
+        <div className="rounded-xl border border-border bg-card p-6 space-y-6">
+          <div className="space-y-3">
+            <Label htmlFor="name" className="text-sm font-medium">
+              Repository name <span className="text-destructive">*</span>
+            </Label>
+            <div className="flex items-center gap-3">
+              <span className="text-muted-foreground font-medium">{username}</span>
+              <span className="text-muted-foreground">/</span>
+              <Input
+                id="name"
+                value={formData.name}
+                onChange={(e) => setFormData({ ...formData, name: e.target.value })}
+                placeholder="my-awesome-project"
+                required
+                pattern="^[a-zA-Z0-9_.-]+$"
+                className="flex-1 bg-input/50"
+              />
+            </div>
+            <p className="text-xs text-muted-foreground">Great repository names are short and memorable.</p>
+          </div>
+
+          <div className="space-y-3">
+            <Label htmlFor="description" className="text-sm font-medium">
+              Description <span className="text-muted-foreground">(optional)</span>
+            </Label>
+            <Textarea
+              id="description"
+              value={formData.description}
+              onChange={(e) => setFormData({ ...formData, description: e.target.value })}
+              placeholder="A short description of your project"
+              rows={3}
+              className="bg-input/50 resize-none"
+            />
+          </div>
+        </div>
+
+        <div className="rounded-xl border border-border bg-card p-6 space-y-4">
+          <Label className="text-sm font-medium">Visibility</Label>
+          <div className="space-y-3">
+            <label
+              className={`flex items-start gap-4 p-4 rounded-lg border-2 cursor-pointer transition-all ${
+                formData.visibility === "public" ? "border-primary bg-primary/5" : "border-transparent bg-input/30 hover:bg-input/50"
+              }`}
+            >
+              <div
+                className={`mt-0.5 w-5 h-5 rounded-full border-2 flex items-center justify-center transition-colors ${
+                  formData.visibility === "public" ? "border-primary" : "border-muted-foreground"
+                }`}
+              >
+                {formData.visibility === "public" && <div className="w-2.5 h-2.5 rounded-full bg-primary" />}
+              </div>
+              <input
+                type="radio"
+                name="visibility"
+                value="public"
+                checked={formData.visibility === "public"}
+                onChange={() => setFormData({ ...formData, visibility: "public" })}
+                className="sr-only"
+              />
+              <div className="flex-1">
+                <div className="flex items-center gap-2 font-medium">
+                  <Globe className="h-4 w-4 text-muted-foreground" />
+                  Public
+                </div>
+                <p className="text-sm text-muted-foreground mt-1">Anyone on the internet can see this repository.</p>
+              </div>
+            </label>
+
+            <label
+              className={`flex items-start gap-4 p-4 rounded-lg border-2 cursor-pointer transition-all ${
+                formData.visibility === "private" ? "border-primary bg-primary/5" : "border-transparent bg-input/30 hover:bg-input/50"
+              }`}
+            >
+              <div
+                className={`mt-0.5 w-5 h-5 rounded-full border-2 flex items-center justify-center transition-colors ${
+                  formData.visibility === "private" ? "border-primary" : "border-muted-foreground"
+                }`}
+              >
+                {formData.visibility === "private" && <div className="w-2.5 h-2.5 rounded-full bg-primary" />}
+              </div>
+              <input
+                type="radio"
+                name="visibility"
+                value="private"
+                checked={formData.visibility === "private"}
+                onChange={() => setFormData({ ...formData, visibility: "private" })}
+                className="sr-only"
+              />
+              <div className="flex-1">
+                <div className="flex items-center gap-2 font-medium">
+                  <Lock className="h-4 w-4 text-muted-foreground" />
+                  Private
+                </div>
+                <p className="text-sm text-muted-foreground mt-1">You choose who can see and commit to this repository.</p>
+              </div>
+            </label>
+          </div>
+        </div>
+
+        <div className="flex items-center justify-end gap-4 pt-4">
+          <Button type="button" variant="ghost" asChild>
+            <Link href="/">Cancel</Link>
+          </Button>
+          <Button type="submit" disabled={loading || !formData.name} className="min-w-[160px]">
+            {loading ? (
+              <>
+                <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                Creating...
+              </>
+            ) : (
+              "Create repository"
+            )}
+          </Button>
+        </div>
+      </form>
+    </div>
+  );
+}

app/(main)/page.tsx

@@ -0,0 +1,166 @@
+import { getSession } from "@/lib/session";
+import { getUserRepositories } from "@/actions/repositories";
+import { RepoList } from "@/components/repo-list";
+import { Button } from "@/components/ui/button";
+import { GitBranch, Plus, Rocket, Code, Users, BookOpen } from "lucide-react";
+import Link from "next/link";
+
+export default async function HomePage() {
+  const session = await getSession();
+
+  if (!session?.user) {
+    return <LandingPage />;
+  }
+
+  const username = (session.user as { username?: string }).username || "";
+  const repos = await getUserRepositories(username);
+
+  return (
+    <div className="container py-8">
+      <div className="flex flex-col lg:flex-row gap-8">
+        <aside className="lg:w-64 shrink-0">
+          <div className="flex items-center gap-3 p-4 rounded-lg bg-card border border-border">
+            <div className="w-12 h-12 rounded-full bg-gradient-to-br from-accent/30 to-primary/30 flex items-center justify-center text-lg font-bold">
+              {session.user.name?.charAt(0).toUpperCase()}
+            </div>
+            <div className="min-w-0">
+              <p className="font-semibold truncate">{session.user.name}</p>
+              <p className="text-sm text-muted-foreground truncate">@{username}</p>
+            </div>
+          </div>
+          
+          <nav className="mt-4 space-y-1">
+            <Link 
+              href={`/${username}`}
+              className="flex items-center gap-3 px-4 py-2.5 rounded-lg text-sm hover:bg-card transition-colors"
+            >
+              <BookOpen className="h-4 w-4 text-muted-foreground" />
+              Your repositories
+            </Link>
+          </nav>
+        </aside>
+
+        <div className="flex-1 min-w-0">
+          <div className="flex items-center justify-between mb-6">
+            <h2 className="text-xl font-semibold">Repositories</h2>
+            <Button asChild size="sm" className="gap-2">
+              <Link href="/new">
+                <Plus className="h-4 w-4" />
+                New
+              </Link>
+            </Button>
+          </div>
+
+          {repos.length === 0 ? (
+            <div className="border border-dashed border-border rounded-xl p-12 text-center bg-card/30">
+              <div className="w-16 h-16 rounded-full bg-accent/10 flex items-center justify-center mx-auto mb-4">
+                <GitBranch className="h-8 w-8 text-accent" />
+              </div>
+              <h3 className="text-lg font-semibold mb-2">No repositories yet</h3>
+              <p className="text-muted-foreground mb-6 max-w-sm mx-auto">
+                Create your first repository to start building something awesome
+              </p>
+              <Button asChild size="lg">
+                <Link href="/new">
+                  <Plus className="h-4 w-4 mr-2" />
+                  Create repository
+                </Link>
+              </Button>
+            </div>
+          ) : (
+            <RepoList repos={repos} username={username} />
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function LandingPage() {
+  return (
+    <div className="flex flex-col">
+      <section className="relative py-24 lg:py-36 overflow-hidden">
+        <div className="absolute inset-0 bg-[radial-gradient(ellipse_at_top,_var(--tw-gradient-stops))] from-accent/20 via-background to-background" />
+        <div className="absolute inset-0 bg-[url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjAiIGhlaWdodD0iNjAiIHZpZXdCb3g9IjAgMCA2MCA2MCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik0zNiAxOGMtOS45NDEgMC0xOCA4LjA1OS0xOCAxOHM4LjA1OSAxOCAxOCAxOCAxOC04LjA1OSAxOC0xOC04LjA1OS0xOC0xOC0xOHptMCAzMmMtNy43MzIgMC0xNC02LjI2OC0xNC0xNHM2LjI2OC0xNCAxNC0xNCAxNCA2LjI2OCAxNCAxNC02LjI2OCAxNC0xNCAxNHoiIGZpbGw9IiMzMDM2M2QiIGZpbGwtb3BhY2l0eT0iMC4xIi8+PC9nPjwvc3ZnPg==')] opacity-30" />
+        <div className="container relative text-center">
+          <div className="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-accent/10 border border-accent/20 text-sm text-accent mb-8">
+            <span className="relative flex h-2 w-2">
+              <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-accent opacity-75"></span>
+              <span className="relative inline-flex rounded-full h-2 w-2 bg-accent"></span>
+            </span>
+            Built for developers, by developers
+          </div>
+          <h1 className="text-4xl sm:text-5xl lg:text-7xl font-bold tracking-tight mb-6">
+            Where the world
+            <br />
+            <span className="bg-gradient-to-r from-primary via-accent to-primary bg-clip-text text-transparent">
+              builds software
+            </span>
+          </h1>
+          <p className="text-lg lg:text-xl text-muted-foreground max-w-2xl mx-auto mb-10">
+            Host and review code, manage projects, and build software alongside
+            millions of developers. Your code, your way.
+          </p>
+          <div className="flex flex-col sm:flex-row gap-4 justify-center">
+            <Button size="lg" asChild className="text-base h-12 px-8">
+              <Link href="/register">
+                Get started for free
+              </Link>
+            </Button>
+            <Button size="lg" variant="outline" asChild className="text-base h-12 px-8">
+              <Link href="/login">Sign in</Link>
+            </Button>
+          </div>
+        </div>
+      </section>
+
+      <section className="py-24 border-t border-border">
+        <div className="container">
+          <div className="text-center mb-16">
+            <h2 className="text-3xl font-bold mb-4">Everything you need to ship</h2>
+            <p className="text-muted-foreground max-w-2xl mx-auto">
+              Powerful features to help you build, test, and deploy your projects faster
+            </p>
+          </div>
+          <div className="grid md:grid-cols-3 gap-6">
+            <FeatureCard
+              icon={Code}
+              title="Collaborative coding"
+              description="Build better software together with powerful code review and collaboration tools."
+            />
+            <FeatureCard
+              icon={Rocket}
+              title="Ship faster"
+              description="Automate your workflow with CI/CD pipelines and deploy with confidence."
+            />
+            <FeatureCard
+              icon={Users}
+              title="Open source"
+              description="Join the world's largest developer community and contribute to projects."
+            />
+          </div>
+        </div>
+      </section>
+    </div>
+  );
+}
+
+function FeatureCard({
+  icon: Icon,
+  title,
+  description,
+}: {
+  icon: React.ElementType;
+  title: string;
+  description: string;
+}) {
+  return (
+    <div className="group p-6 rounded-xl border border-border bg-card hover:border-accent/50 transition-all duration-300">
+      <div className="w-12 h-12 rounded-xl bg-gradient-to-br from-primary/20 to-accent/20 flex items-center justify-center mb-4 group-hover:scale-110 transition-transform">
+        <Icon className="h-6 w-6 text-accent" />
+      </div>
+      <h3 className="text-lg font-semibold mb-2">{title}</h3>
+      <p className="text-muted-foreground text-sm leading-relaxed">{description}</p>
+    </div>
+  );
+}

app/api/auth/[...all]/route.ts

@@ -0,0 +1,5 @@
+import { auth } from "@/lib/auth";
+import { toNextJsHandler } from "better-auth/next-js";
+
+export const { POST, GET } = toNextJsHandler(auth);
+

app/api/git/[...path]/route.ts

@@ -0,0 +1,258 @@
+import { NextRequest, NextResponse } from "next/server";
+import { db } from "@/db";
+import { users, repositories } from "@/db/schema";
+import { eq, and } from "drizzle-orm";
+import { spawn } from "child_process";
+import path from "path";
+import fs from "fs/promises";
+import { withTempRepo } from "@/lib/r2-git-sync";
+import { auth } from "@/lib/auth";
+
+async function authenticateUser(authHeader: string | null): Promise<{ id: string; username: string } | null> {
+  if (!authHeader || !authHeader.startsWith("Basic ")) {
+    return null;
+  }
+
+  const base64Credentials = authHeader.split(" ")[1];
+  const credentials = Buffer.from(base64Credentials, "base64").toString("utf-8");
+  const [email, password] = credentials.split(":");
+
+  if (!email || !password) {
+    return null;
+  }
+
+  try {
+    const result = await auth.api.signInEmail({
+      body: { email, password },
+    });
+
+    if (!result?.user) {
+      return null;
+    }
+
+    const user = await db.query.users.findFirst({
+      where: eq(users.email, email),
+    });
+
+    if (!user) {
+      return null;
+    }
+
+    return { id: user.id, username: user.username };
+  } catch {
+    return null;
+  }
+}
+
+function runGitCommand(command: string, args: string[], cwd: string, input?: Buffer): Promise<{ stdout: Buffer; stderr: Buffer; code: number }> {
+  return new Promise((resolve) => {
+    const proc = spawn(command, args, {
+      cwd,
+      env: { ...process.env, GIT_DIR: cwd },
+    });
+
+    const stdout: Buffer[] = [];
+    const stderr: Buffer[] = [];
+
+    proc.stdout.on("data", (data) => stdout.push(data));
+    proc.stderr.on("data", (data) => stderr.push(data));
+
+    if (input) {
+      proc.stdin.write(input);
+      proc.stdin.end();
+    }
+
+    proc.on("close", (code) => {
+      resolve({
+        stdout: Buffer.concat(stdout),
+        stderr: Buffer.concat(stderr),
+        code: code || 0,
+      });
+    });
+  });
+}
+
+function parseGitPath(pathSegments: string[]): { username: string; repoName: string; action: string | null } | null {
+  if (pathSegments.length < 2) return null;
+
+  const username = pathSegments[0];
+  let repoName = pathSegments[1];
+
+  if (repoName.endsWith(".git")) {
+    repoName = repoName.slice(0, -4);
+  }
+
+  const remainingPath = pathSegments.slice(2).join("/");
+
+  let action: string | null = null;
+  if (remainingPath === "info/refs") {
+    action = "info/refs";
+  } else if (remainingPath === "git-upload-pack") {
+    action = "git-upload-pack";
+  } else if (remainingPath === "git-receive-pack") {
+    action = "git-receive-pack";
+  }
+
+  return { username, repoName, action };
+}
+
+export async function GET(request: NextRequest, { params }: { params: Promise<{ path: string[] }> }) {
+  const { path: pathSegments } = await params;
+  const parsed = parseGitPath(pathSegments);
+
+  if (!parsed) {
+    return new NextResponse("Not found", { status: 404 });
+  }
+
+  const { username, repoName, action } = parsed;
+
+  const owner = await db.query.users.findFirst({
+    where: eq(users.username, username),
+  });
+
+  if (!owner) {
+    return new NextResponse("Repository not found", { status: 404 });
+  }
+
+  const repo = await db.query.repositories.findFirst({
+    where: and(eq(repositories.ownerId, owner.id), eq(repositories.name, repoName)),
+  });
+
+  if (!repo) {
+    return new NextResponse("Repository not found", { status: 404 });
+  }
+
+  if (repo.visibility === "private") {
+    const user = await authenticateUser(request.headers.get("authorization"));
+    if (!user || user.id !== repo.ownerId) {
+      return new NextResponse("Unauthorized", {
+        status: 401,
+        headers: { "WWW-Authenticate": 'Basic realm="gitbruv"' },
+      });
+    }
+  }
+
+  if (action === "info/refs") {
+    const serviceQuery = request.nextUrl.searchParams.get("service");
+
+    if (serviceQuery === "git-upload-pack" || serviceQuery === "git-receive-pack") {
+      const serviceName = serviceQuery;
+
+      if (serviceName === "git-receive-pack") {
+        const user = await authenticateUser(request.headers.get("authorization"));
+        if (!user || user.id !== repo.ownerId) {
+          return new NextResponse("Unauthorized", {
+            status: 401,
+            headers: { "WWW-Authenticate": 'Basic realm="gitbruv"' },
+          });
+        }
+      }
+
+      const response = await withTempRepo(owner.id, repoName, async (tempDir) => {
+        const { stdout } = await runGitCommand("git", [serviceName.replace("git-", ""), "--advertise-refs", "."], tempDir);
+
+        const packet = `# service=${serviceName}\n`;
+        const packetLen = (packet.length + 4).toString(16).padStart(4, "0");
+        return Buffer.concat([Buffer.from(packetLen + packet + "0000"), stdout]);
+      });
+
+      return new NextResponse(new Uint8Array(response), {
+        headers: {
+          "Content-Type": `application/x-${serviceName}-advertisement`,
+          "Cache-Control": "no-cache",
+        },
+      });
+    }
+
+    const infoRefs = await withTempRepo(owner.id, repoName, async (tempDir) => {
+      await runGitCommand("git", ["update-server-info"], tempDir);
+
+      try {
+        return await fs.readFile(path.join(tempDir, "info", "refs"), "utf-8");
+      } catch {
+        return "";
+      }
+    });
+
+    return new NextResponse(infoRefs, {
+      headers: { "Content-Type": "text/plain" },
+    });
+  }
+
+  return new NextResponse("Not found", { status: 404 });
+}
+
+export async function POST(request: NextRequest, { params }: { params: Promise<{ path: string[] }> }) {
+  const { path: pathSegments } = await params;
+  const parsed = parseGitPath(pathSegments);
+
+  if (!parsed) {
+    return new NextResponse("Not found", { status: 404 });
+  }
+
+  const { username, repoName, action } = parsed;
+
+  if (action !== "git-upload-pack" && action !== "git-receive-pack") {
+    return new NextResponse("Not found", { status: 404 });
+  }
+
+  const owner = await db.query.users.findFirst({
+    where: eq(users.username, username),
+  });
+
+  if (!owner) {
+    return new NextResponse("Repository not found", { status: 404 });
+  }
+
+  const repo = await db.query.repositories.findFirst({
+    where: and(eq(repositories.ownerId, owner.id), eq(repositories.name, repoName)),
+  });
+
+  if (!repo) {
+    return new NextResponse("Repository not found", { status: 404 });
+  }
+
+  const user = await authenticateUser(request.headers.get("authorization"));
+
+  if (action === "git-receive-pack") {
+    if (!user || user.id !== repo.ownerId) {
+      return new NextResponse("Unauthorized", {
+        status: 401,
+        headers: { "WWW-Authenticate": 'Basic realm="gitbruv"' },
+      });
+    }
+  } else if (repo.visibility === "private") {
+    if (!user || user.id !== repo.ownerId) {
+      return new NextResponse("Unauthorized", {
+        status: 401,
+        headers: { "WWW-Authenticate": 'Basic realm="gitbruv"' },
+      });
+    }
+  }
+
+  const body = await request.arrayBuffer();
+  const input = Buffer.from(body);
+
+  const serviceName = action.replace("git-", "");
+  const shouldSyncBack = action === "git-receive-pack";
+
+  const { stdout, stderr, code } = await withTempRepo(
+    owner.id,
+    repoName,
+    async (tempDir) => {
+      return await runGitCommand("git", [serviceName, "--stateless-rpc", "."], tempDir, input);
+    },
+    shouldSyncBack
+  );
+
+  if (code !== 0) {
+    console.error("Git error:", stderr.toString());
+  }
+
+  return new NextResponse(new Uint8Array(stdout), {
+    headers: {
+      "Content-Type": `application/x-${action}-result`,
+      "Cache-Control": "no-cache",
+    },
+  });
+}

app/globals.css

@@ -1,26 +1,173 @@
 @import "tailwindcss";
+@import "tw-animate-css";
 
-:root {
-  --background: #ffffff;
-  --foreground: #171717;
+@custom-variant dark (&:is(.dark *));
+
+@font-face {
+  font-family: "Mona Sans";
+  src: url("https://github.githubassets.com/static/fonts/mona-sans/MonaSans.woff2") format("woff2");
+  font-weight: 200 900;
+  font-style: normal;
+  font-display: swap;
 }
 
 @theme inline {
   --color-background: var(--background);
   --color-foreground: var(--foreground);
-  --font-sans: var(--font-geist-sans);
-  --font-mono: var(--font-geist-mono);
+  --font-sans: "Mona Sans", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
+  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
+  --color-sidebar-ring: var(--sidebar-ring);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar: var(--sidebar);
+  --color-chart-5: var(--chart-5);
+  --color-chart-4: var(--chart-4);
+  --color-chart-3: var(--chart-3);
+  --color-chart-2: var(--chart-2);
+  --color-chart-1: var(--chart-1);
+  --color-ring: var(--ring);
+  --color-input: var(--input);
+  --color-border: var(--border);
+  --color-destructive: var(--destructive);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-accent: var(--accent);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-muted: var(--muted);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-secondary: var(--secondary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-primary: var(--primary);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-popover: var(--popover);
+  --color-card-foreground: var(--card-foreground);
+  --color-card: var(--card);
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+  --radius-2xl: calc(var(--radius) + 8px);
+  --radius-3xl: calc(var(--radius) + 12px);
+  --radius-4xl: calc(var(--radius) + 16px);
+  --color-success: var(--success);
+  --color-success-foreground: var(--success-foreground);
 }
 
-@media (prefers-color-scheme: dark) {
-  :root {
-    --background: #0a0a0a;
-    --foreground: #ededed;
+:root {
+  --radius: 0.5rem;
+  --background: #0d1117;
+  --foreground: #e6edf3;
+  --card: #161b22;
+  --card-foreground: #e6edf3;
+  --popover: #1c2128;
+  --popover-foreground: #e6edf3;
+  --primary: #238636;
+  --primary-foreground: #ffffff;
+  --secondary: #21262d;
+  --secondary-foreground: #c9d1d9;
+  --muted: #161b22;
+  --muted-foreground: #8b949e;
+  --accent: #58a6ff;
+  --accent-foreground: #ffffff;
+  --destructive: #f85149;
+  --border: #30363d;
+  --input: #21262d;
+  --ring: #58a6ff;
+  --chart-1: #238636;
+  --chart-2: #58a6ff;
+  --chart-3: #a371f7;
+  --chart-4: #f78166;
+  --chart-5: #d29922;
+  --sidebar: #010409;
+  --sidebar-foreground: #e6edf3;
+  --sidebar-primary: #238636;
+  --sidebar-primary-foreground: #ffffff;
+  --sidebar-accent: #21262d;
+  --sidebar-accent-foreground: #c9d1d9;
+  --sidebar-border: #21262d;
+  --sidebar-ring: #58a6ff;
+  --success: #238636;
+  --success-foreground: #ffffff;
+}
+
+.dark {
+  --background: #0d1117;
+  --foreground: #e6edf3;
+  --card: #161b22;
+  --card-foreground: #e6edf3;
+  --popover: #1c2128;
+  --popover-foreground: #e6edf3;
+  --primary: #238636;
+  --primary-foreground: #ffffff;
+  --secondary: #21262d;
+  --secondary-foreground: #c9d1d9;
+  --muted: #161b22;
+  --muted-foreground: #8b949e;
+  --accent: #58a6ff;
+  --accent-foreground: #ffffff;
+  --destructive: #f85149;
+  --border: #30363d;
+  --input: #21262d;
+  --ring: #58a6ff;
+  --sidebar: #010409;
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground antialiased;
+    font-family: "Mona Sans", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
   }
 }
 
-body {
-  background: var(--background);
-  color: var(--foreground);
-  font-family: Arial, Helvetica, sans-serif;
+.container {
+  width: 100%;
+  max-width: 1280px;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+@media (min-width: 640px) {
+  .container {
+    padding-left: 1rem;
+    padding-right: 1rem;
+  }
+}
+
+@media (min-width: 1024px) {
+  .container {
+    padding-left: 2rem;
+    padding-right: 2rem;
+  }
+}
+
+::selection {
+  background: rgba(88, 166, 255, 0.4);
+}
+
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+  background: #30363d;
+  border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: #484f58;
+}
+
+input[type="radio"] {
+  accent-color: var(--primary);
 }

app/layout.tsx

@@ -1,20 +1,10 @@
 import type { Metadata } from "next";
-import { Geist, Geist_Mono } from "next/font/google";
+import { Toaster } from "@/components/ui/sonner";
 import "./globals.css";
 
-const geistSans = Geist({
-  variable: "--font-geist-sans",
-  subsets: ["latin"],
-});
-
-const geistMono = Geist_Mono({
-  variable: "--font-geist-mono",
-  subsets: ["latin"],
-});
-
 export const metadata: Metadata = {
-  title: "Create Next App",
-  description: "Generated by create next app",
+  title: "gitbruv",
+  description: "Where code lives",
 };
 
 export default function RootLayout({
@@ -23,11 +13,10 @@ export default function RootLayout({
   children: React.ReactNode;
 }>) {
   return (
-    <html lang="en">
-      <body
-        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
-      >
+    <html lang="en" className="dark">
+      <body className="min-h-screen">
         {children}
+        <Toaster richColors position="top-right" />
       </body>
     </html>
   );

app/not-found.tsx

@@ -0,0 +1,27 @@
+import Link from "next/link";
+import { Button } from "@/components/ui/button";
+import { GitBranch, Home } from "lucide-react";
+
+export default function NotFound() {
+  return (
+    <div className="min-h-screen flex flex-col items-center justify-center px-4">
+      <div className="absolute inset-0 bg-[radial-gradient(ellipse_at_center,_var(--tw-gradient-stops))] from-destructive/10 via-transparent to-transparent" />
+      <div className="relative text-center">
+        <GitBranch className="h-16 w-16 mx-auto mb-6 text-muted-foreground" />
+        <h1 className="text-7xl font-bold text-foreground mb-2">404</h1>
+        <h2 className="text-2xl font-semibold mb-4">Page not found</h2>
+        <p className="text-muted-foreground mb-8 max-w-md">
+          The page you&apos;re looking for doesn&apos;t exist or you don&apos;t have
+          permission to view it.
+        </p>
+        <Button asChild>
+          <Link href="/" className="gap-2">
+            <Home className="h-4 w-4" />
+            Go home
+          </Link>
+        </Button>
+      </div>
+    </div>
+  );
+}
+

app/page.tsx

@@ -1,65 +0,0 @@
-import Image from "next/image";
-
-export default function Home() {
-  return (
-    <div className="flex min-h-screen items-center justify-center bg-zinc-50 font-sans dark:bg-black">
-      <main className="flex min-h-screen w-full max-w-3xl flex-col items-center justify-between py-32 px-16 bg-white dark:bg-black sm:items-start">
-        <Image
-          className="dark:invert"
-          src="/next.svg"
-          alt="Next.js logo"
-          width={100}
-          height={20}
-          priority
-        />
-        <div className="flex flex-col items-center gap-6 text-center sm:items-start sm:text-left">
-          <h1 className="max-w-xs text-3xl font-semibold leading-10 tracking-tight text-black dark:text-zinc-50">
-            To get started, edit the page.tsx file.
-          </h1>
-          <p className="max-w-md text-lg leading-8 text-zinc-600 dark:text-zinc-400">
-            Looking for a starting point or more instructions? Head over to{" "}
-            <a
-              href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-              className="font-medium text-zinc-950 dark:text-zinc-50"
-            >
-              Templates
-            </a>{" "}
-            or the{" "}
-            <a
-              href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-              className="font-medium text-zinc-950 dark:text-zinc-50"
-            >
-              Learning
-            </a>{" "}
-            center.
-          </p>
-        </div>
-        <div className="flex flex-col gap-4 text-base font-medium sm:flex-row">
-          <a
-            className="flex h-12 w-full items-center justify-center gap-2 rounded-full bg-foreground px-5 text-background transition-colors hover:bg-[#383838] dark:hover:bg-[#ccc] md:w-[158px]"
-            href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            <Image
-              className="dark:invert"
-              src="/vercel.svg"
-              alt="Vercel logomark"
-              width={16}
-              height={16}
-            />
-            Deploy Now
-          </a>
-          <a
-            className="flex h-12 w-full items-center justify-center rounded-full border border-solid border-black/[.08] px-5 transition-colors hover:border-transparent hover:bg-black/[.04] dark:border-white/[.145] dark:hover:bg-[#1a1a1a] md:w-[158px]"
-            href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            Documentation
-          </a>
-        </div>
-      </main>
-    </div>
-  );
-}