1
import { ArrowRight } from "lucide-react";
2
 
3
export function HomePage() {
4
  return (
5
    <div className="space-y-12 pt-8 sm:pt-12">
6
      <section className="animate-slide-up opacity-0" style={{ animationDelay: "0ms" }}>
7
        <span className="mb-3 inline-block text-xs font-medium uppercase tracking-widest text-zinc-500">
8
          Git hosting on the edge
9
        </span>
10
        <h1 className="font-display text-4xl font-extrabold tracking-tight sm:text-5xl lg:text-6xl">
11
          git-on-cloudflare
12
        </h1>
13
        <p className="mt-4 max-w-lg text-lg text-zinc-500 dark:text-zinc-400">
14
          A full Git Smart HTTP v2 server running entirely on Cloudflare Workers. Clone, push, and
15
          browse repositories — at the edge.
16
        </p>
17
      </section>
18
19
      <section className="animate-slide-up opacity-0" style={{ animationDelay: "60ms" }}>
20
        <div className="overflow-hidden rounded-xl border border-zinc-200 dark:border-zinc-800/60 bg-white dark:bg-zinc-900/50 p-5 font-mono text-sm sm:text-base">
21
          <div className="mb-3 flex items-center gap-2">
22
            <span className="h-3 w-3 rounded-full bg-red-500/60" />
23
            <span className="h-3 w-3 rounded-full bg-amber-500/60" />
24
            <span className="h-3 w-3 rounded-full bg-green-500/60" />
25
          </div>
26
          <div>
27
            <span className="select-none text-zinc-500">$ </span>
28
            <span className="text-zinc-800 dark:text-zinc-100">
29
              git clone https://git.limic.dev/rachel/git-on-cloudflare
30
            </span>
31
          </div>
32
        </div>
33
      </section>
34
35
      <section className="animate-slide-up opacity-0" style={{ animationDelay: "120ms" }}>
36
        <dl className="grid gap-x-12 gap-y-6 sm:grid-cols-2">
37
          <a
38
            href="https://git.limic.dev/rachel/git-on-cloudflare"
39
            target="_blank"
40
            rel="noreferrer"
41
            className="group block rounded-xl border border-zinc-200 dark:border-zinc-800/60 bg-white dark:bg-zinc-900/50 p-4 no-underline transition-colors hover:border-zinc-300 dark:hover:border-zinc-700 hover:shadow-sm"
42
          >
43
            <dt className="text-sm font-semibold text-zinc-800 dark:text-zinc-200 group-hover:text-accent-500 dark:group-hover:text-accent-400">
44
              Browse source
45
            </dt>
46
            <dd className="mt-1 flex items-center justify-between text-sm text-zinc-500">
47
              <span>
48
                Explore the{" "}
49
                <span className="text-accent-500 dark:text-accent-400">git-on-cloudflare</span>{" "}
50
                repository — code, commits, and trees.
51
              </span>
52
              <ArrowRight
53
                className="ml-2 h-4 w-4 flex-shrink-0 text-zinc-400 transition-transform group-hover:translate-x-0.5"
54
                aria-hidden="true"
55
              />
56
            </dd>
57
          </a>
58
          <a
59
            href="/auth"
60
            className="group block rounded-xl border border-zinc-200 dark:border-zinc-800/60 bg-white dark:bg-zinc-900/50 p-4 no-underline transition-colors hover:border-zinc-300 dark:hover:border-zinc-700 hover:shadow-sm"
61
          >
62
            <dt className="text-sm font-semibold text-zinc-800 dark:text-zinc-200 group-hover:text-accent-500 dark:group-hover:text-accent-400">
63
              Manage auth
64
            </dt>
65
            <dd className="mt-1 flex items-center justify-between text-sm text-zinc-500">
66
              <span>
67
                Configure <span className="text-accent-500 dark:text-accent-400">owners</span> and{" "}
68
                <span className="text-accent-500 dark:text-accent-400">access tokens</span> for push
69
                access.
70
              </span>
71
              <ArrowRight
72
                className="ml-2 h-4 w-4 flex-shrink-0 text-zinc-400 transition-transform group-hover:translate-x-0.5"
73
                aria-hidden="true"
74
              />
75
            </dd>
76
          </a>
77
        </dl>
78
      </section>
79
    </div>
80
  );
81
}