mvp

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>
+  );
+}