a programming education platform
www.hypercommit.com
education
1import Image from "next/image"
2import Link from "next/link"
3import illustration from "./build-your-own-git/illustration.webp"
4import { LogoMenu } from "./logo-menu"
5import {
6 Breadcrumb,
7 BreadcrumbItem,
8 BreadcrumbList,
9 BreadcrumbPage,
10} from "@workspace/ui/components/breadcrumb"
11import { buttonVariants } from "@workspace/ui/components/button"
12import { cn } from "@workspace/ui/lib/utils"
13import { TangledIcon } from "./tangled-icon"
14import { JoinCommunityButton } from "@/components/join-community-button"
15
16export default function Page() {
17 return (
18 <div className="flex min-h-svh p-8">
19 <div className="flex max-w-md min-w-0 flex-col gap-4 text-sm leading-loose">
20 <Breadcrumb>
21 <BreadcrumbList>
22 <BreadcrumbItem>
23 <BreadcrumbPage>~</BreadcrumbPage>
24 </BreadcrumbItem>
25 </BreadcrumbList>
26 </Breadcrumb>
27 <div>
28 <LogoMenu />
29 <h1 className="text-lg font-semibold">Hypercommit</h1>
30 <p className="text-lg text-muted-foreground">
31 Level up as a software engineer, one commit at a time.
32 </p>
33 </div>
34
35 <div className="flex flex-wrap items-center gap-2">
36 <JoinCommunityButton />
37 <a
38 href="https://tangled.org/alexisbouchez.com/hypercommit"
39 className={cn(
40 buttonVariants({ variant: "outline", size: "lg" }),
41 "gap-1 self-start text-[15px] no-underline"
42 )}
43 >
44 <TangledIcon className="mr-1 size-4" />
45 Star on Tangled
46 </a>
47 </div>
48
49 <Link
50 tabIndex={0}
51 className="group/course-card mt-4 block rounded-lg no-underline transition-opacity hover:opacity-80 focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-ring"
52 href="/build-your-own-git"
53 >
54 <div className="pointer-events-auto relative flex aspect-1050/660 w-full items-center justify-center overflow-hidden rounded-lg bg-muted shadow-sm">
55 <Image
56 alt="Thumbnail for Build your own Git"
57 src={illustration}
58 width={illustration.width}
59 height={illustration.height}
60 sizes="(max-width: 768px) 100vw, 1050px"
61 className="object-cover"
62 />
63 </div>
64 <div>
65 <h3 className="mt-4 text-base font-medium">Build your own Git</h3>
66 <p className="text-base leading-6 text-muted-foreground">
67 Implement the most used version control system in Go.
68 </p>
69 </div>
70 </Link>
71 </div>
72 </div>
73 )
74}