Skip to content

Commit 9df17a2

Browse files
quiteboringquiteboring
committed
feat: about page
1 parent 1aaf93e commit 9df17a2

10 files changed

Lines changed: 419 additions & 14 deletions

File tree

‎app/about/page.tsx‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import User from '@/components/User';
2+
import { team } from '@/data/team';
3+
4+
export default function About() {
5+
return (
6+
<main className="flex flex-1 flex-col items-center px-4 py-20 md:justify-center md:py-0">
7+
<div className="mb-12 text-center">
8+
<h1 className="text-4xl font-bold">The Team</h1>
9+
<p className="mt-4 text-muted-foreground">Meet the people behind Cobalt.</p>
10+
</div>
11+
12+
<div className="grid w-full max-w-4xl grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
13+
{team.map((member) => (
14+
<User key={member.userId} {...member} />
15+
))}
16+
</div>
17+
</main>
18+
);
19+
}

‎app/not-found.tsx‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import { Button } from '@/components/ui/button';
2+
import Link from 'next/link';
3+
4+
export default function NotFound() {
5+
return (
6+
<main className="flex flex-1 flex-col items-center justify-center px-4 text-center">
7+
<h1 className="text-6xl font-bold">404</h1>
8+
<p className="mt-4 text-muted-foreground">Page not found</p>
9+
<Button variant="outline" className="mt-6" asChild>
10+
<Link href="/">Go Home</Link>
11+
</Button>
12+
</main>
13+
);
14+
}

‎components/Navbar.tsx‎

Lines changed: 25 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -15,17 +15,27 @@ export default function Navbar() {
1515
<nav className="sticky top-0 z-50 w-full border-b border-white/10 bg-[var(--background)]/80 backdrop-blur-md select-none">
1616
<div className="mx-auto flex h-16 max-w-7xl items-center justify-between px-6">
1717
<div className="flex items-center gap-8">
18-
<Link href="/" className="text-xl font-bold">
19-
cobalt.
20-
</Link>
18+
<h1 className="text-xl font-bold">cobalt.</h1>
2119

2220
<div className="hidden md:flex items-center gap-6">
21+
<Link
22+
href="/"
23+
className="text-xs font-semibold transition-colors hover:text-[#347BB2]"
24+
>
25+
Home
26+
</Link>
2327
<Link
2428
href="/faq"
2529
className="text-xs font-semibold transition-colors hover:text-[#347BB2]"
2630
>
2731
FAQ
2832
</Link>
33+
<Link
34+
href="/about"
35+
className="text-xs font-semibold transition-colors hover:text-[#347BB2]"
36+
>
37+
About
38+
</Link>
2939
</div>
3040
</div>
3141

@@ -59,12 +69,24 @@ export default function Navbar() {
5969
<span className="text-xs font-medium text-muted-foreground uppercase tracking-wider">
6070
Main
6171
</span>
72+
<Link
73+
href="/"
74+
className="text-sm font-semibold transition-colors hover:text-[#347BB2]"
75+
>
76+
Home
77+
</Link>
6278
<Link
6379
href="/faq"
6480
className="text-sm font-semibold transition-colors hover:text-[#347BB2]"
6581
>
6682
FAQ
6783
</Link>
84+
<Link
85+
href="/about"
86+
className="text-sm font-semibold transition-colors hover:text-[#347BB2]"
87+
>
88+
About
89+
</Link>
6890
</div>
6991
<div className="flex flex-col gap-3">
7092
<span className="text-xs font-medium text-muted-foreground uppercase tracking-wider">

‎components/User.tsx‎

Lines changed: 47 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,69 @@
1+
'use client';
2+
13
import React from 'react';
24
import { getDiscordAvatarUrl } from '../data/team';
5+
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
36
import { Badge } from '@/components/ui/badge';
7+
import {
8+
Dialog,
9+
DialogContent,
10+
DialogDescription,
11+
DialogTitle,
12+
DialogTrigger,
13+
} from '@/components/ui/dialog';
14+
import { Separator } from '@/components/ui/separator';
415

516
interface UserProps {
617
name: string;
718
userId: string;
819
avatarHash: string;
920
role: string;
21+
description: string;
1022
}
1123

1224
export default function User({
1325
name,
1426
userId,
1527
avatarHash,
1628
role,
29+
description,
1730
}: UserProps) {
1831
const avatarUrl = getDiscordAvatarUrl(userId, avatarHash);
1932

2033
return (
21-
<div className="group flex flex-col items-center rounded-xl border border-white/5 bg-[#18181b] p-8 transition-all duration-300 ease-out hover:-translate-y-2 hover:border-[#347BB2] hover:shadow-xl hover:shadow-[#347BB2]/20">
22-
<div className="relative mb-5 h-24 w-24 overflow-hidden rounded-full shadow-md ring-2 ring-white/10 transition-all duration-300 ease-out">
23-
<img
24-
src={avatarUrl}
25-
alt={name}
26-
className="h-full w-full object-cover"
27-
/>
28-
</div>
29-
<h3 className="mb-1 text-lg font-bold text-white">{name}</h3>
30-
<Badge variant="outline">{role}</Badge>
31-
</div>
34+
<Dialog>
35+
<DialogTrigger asChild>
36+
<div className="group flex cursor-pointer flex-col items-center rounded-xl border border-white/10 bg-card p-8 transition-all duration-300 ease-out hover:-translate-y-2 hover:border-[#347BB2] hover:shadow-xl hover:shadow-[#347BB2]/20">
37+
<Avatar className="h-24 w-24 border-2 border-white/10">
38+
<AvatarImage src={avatarUrl} alt={name} />
39+
<AvatarFallback>{name[0]}</AvatarFallback>
40+
</Avatar>
41+
<h3 className="mt-4 text-lg font-bold">{name}</h3>
42+
<Badge variant="outline" className="mt-1">
43+
{role}
44+
</Badge>
45+
</div>
46+
</DialogTrigger>
47+
<DialogContent className="sm:max-w-xl">
48+
<div className="flex gap-6 p-4">
49+
<div className="flex flex-col items-center text-center px-4">
50+
<Avatar className="h-24 w-24 border-2 border-white/10">
51+
<AvatarImage src={avatarUrl} alt={name} />
52+
<AvatarFallback>{name[0]}</AvatarFallback>
53+
</Avatar>
54+
<DialogTitle className="mt-4">{name}</DialogTitle>
55+
<Badge variant="outline" className="mt-1">
56+
{role}
57+
</Badge>
58+
</div>
59+
<Separator orientation="vertical" className="h-auto" />
60+
<div className="flex flex-1 items-center">
61+
<DialogDescription className="text-sm">
62+
{description}
63+
</DialogDescription>
64+
</div>
65+
</div>
66+
</DialogContent>
67+
</Dialog>
3268
);
3369
}

‎components/ui/card.tsx‎

Lines changed: 92 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,92 @@
1+
import * as React from "react"
2+
3+
import { cn } from "@/lib/utils"
4+
5+
function Card({ className, ...props }: React.ComponentProps<"div">) {
6+
return (
7+
<div
8+
data-slot="card"
9+
className={cn(
10+
"bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm",
11+
className
12+
)}
13+
{...props}
14+
/>
15+
)
16+
}
17+
18+
function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
19+
return (
20+
<div
21+
data-slot="card-header"
22+
className={cn(
23+
"@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-2 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6",
24+
className
25+
)}
26+
{...props}
27+
/>
28+
)
29+
}
30+
31+
function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
32+
return (
33+
<div
34+
data-slot="card-title"
35+
className={cn("leading-none font-semibold", className)}
36+
{...props}
37+
/>
38+
)
39+
}
40+
41+
function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
42+
return (
43+
<div
44+
data-slot="card-description"
45+
className={cn("text-muted-foreground text-sm", className)}
46+
{...props}
47+
/>
48+
)
49+
}
50+
51+
function CardAction({ className, ...props }: React.ComponentProps<"div">) {
52+
return (
53+
<div
54+
data-slot="card-action"
55+
className={cn(
56+
"col-start-2 row-span-2 row-start-1 self-start justify-self-end",
57+
className
58+
)}
59+
{...props}
60+
/>
61+
)
62+
}
63+
64+
function CardContent({ className, ...props }: React.ComponentProps<"div">) {
65+
return (
66+
<div
67+
data-slot="card-content"
68+
className={cn("px-6", className)}
69+
{...props}
70+
/>
71+
)
72+
}
73+
74+
function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
75+
return (
76+
<div
77+
data-slot="card-footer"
78+
className={cn("flex items-center px-6 [.border-t]:pt-6", className)}
79+
{...props}
80+
/>
81+
)
82+
}
83+
84+
export {
85+
Card,
86+
CardHeader,
87+
CardFooter,
88+
CardTitle,
89+
CardAction,
90+
CardDescription,
91+
CardContent,
92+
}

0 commit comments

Comments
 (0)