Skip to content

Commit b0dbe47

Browse files
monkey-bugmonkey-bug
committed
feat(frontend): under construction, volunteers link
1 parent cac4d40 commit b0dbe47

File tree

3 files changed

+85
-65
lines changed

3 files changed

+85
-65
lines changed

‎frontend/src/app/olympics/page.tsx

+8-1
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,10 @@
1+
import { WrenchScrewdriverIcon } from "@heroicons/react/24/solid";
2+
13
export default function OlympicsHome() {
2-
return <p>Olympics!</p>;
4+
return (
5+
<>
6+
<WrenchScrewdriverIcon className="max-w-16 pb-4" />
7+
<p>Under Construction!</p>
8+
</>
9+
);
310
}

‎frontend/src/app/page.tsx

+64-54
Original file line numberDiff line numberDiff line change
@@ -5,61 +5,71 @@ import Link from "next/link";
55

66
export default function Home() {
77
return (
8-
<div className="flex flex-1 items-center justify-center gap-16 self-stretch">
9-
<Link
10-
href="/olympics"
11-
className="peer/olympics group relative flex max-w-[300px] flex-1 flex-col items-center
12-
justify-center gap-1 font-farray text-4xl text-white"
13-
>
14-
<p
15-
className="trasition-transform absolute top-6 z-10 duration-500
16-
[text-shadow:2px_1px_2px_black;] group-hover:-translate-y-1
17-
group-hover:scale-110"
8+
<>
9+
<div className="flex flex-1 items-center justify-center gap-16 self-stretch">
10+
<Link
11+
href="/olympics"
12+
className="peer/olympics group relative flex max-w-[300px] flex-1 flex-col items-center
13+
justify-center gap-1 font-farray text-4xl text-white"
1814
>
19-
Retro <span className="text-olympics">Olympics</span>
20-
</p>
21-
<Image
22-
className="duration-250 rounded-2xl shadow-olympics transition-shadow ease-linear
23-
group-hover:shadow-[0_0_40px_var(--tw-shadow-color)]"
24-
src="/img/olympics-landing.png"
25-
alt="Retro Olympics"
26-
width={300}
27-
height={425}
28-
/>
29-
<span className="text-lg">New Season 2025</span>
30-
<img
31-
className="fixed left-0 top-[-50vh] -z-10 h-[150vh] w-screen object-cover opacity-0
32-
transition-opacity duration-500 group-hover:opacity-100"
33-
src="/img/olympics-landing.png"
34-
/>
35-
</Link>
36-
<Link
37-
href="/colosso"
38-
className="group relative flex max-w-[300px] flex-1 flex-col items-center justify-center
39-
gap-1 font-farray text-4xl text-white"
40-
>
41-
<p
42-
className="trasition-transform absolute top-6 z-10 duration-500
43-
[text-shadow:2px_1px_2px_black;] group-hover:-translate-y-1
44-
group-hover:scale-110"
15+
<p
16+
className="trasition-transform absolute top-6 z-10 duration-500
17+
[text-shadow:2px_1px_2px_black;] group-hover:-translate-y-1
18+
group-hover:scale-110"
19+
>
20+
Retro <span className="text-olympics">Olympics</span>
21+
</p>
22+
<Image
23+
className="duration-250 rounded-2xl shadow-olympics transition-shadow ease-linear
24+
group-hover:shadow-[0_0_40px_var(--tw-shadow-color)]"
25+
src="/img/olympics-landing.png"
26+
alt="Retro Olympics"
27+
width={300}
28+
height={425}
29+
/>
30+
<span className="text-lg">New Season 2025</span>
31+
<img
32+
className="fixed left-0 top-[-50vh] -z-10 h-[150vh] w-screen object-cover opacity-0
33+
transition-opacity duration-500 group-hover:opacity-100"
34+
src="/img/olympics-landing.png"
35+
/>
36+
</Link>
37+
<Link
38+
href="/colosso"
39+
className="group relative flex max-w-[300px] flex-1 flex-col items-center justify-center
40+
gap-1 font-farray text-4xl text-white"
4541
>
46-
Retro <span className="text-colosso">Colosso</span>
47-
</p>
48-
<Image
49-
className="duration-250 rounded-2xl shadow-colosso transition-shadow ease-linear
50-
group-hover:shadow-[0_0_40px_var(--tw-shadow-color)]"
51-
src="/img/colosso-landing.png"
52-
alt="Retro Colosso"
53-
width={300}
54-
height={425}
55-
/>
56-
<span className="text-lg">Coming soon!</span>
57-
<img
58-
className="fixed left-0 top-[-50vh] -z-10 h-[150vh] w-screen object-cover opacity-0
59-
transition-opacity duration-500 group-hover:opacity-100"
60-
src="/img/colosso-landing.png"
61-
/>
62-
</Link>
63-
</div>
42+
<p
43+
className="trasition-transform absolute top-6 z-10 duration-500
44+
[text-shadow:2px_1px_2px_black;] group-hover:-translate-y-1
45+
group-hover:scale-110"
46+
>
47+
Retro <span className="text-colosso">Colosso</span>
48+
</p>
49+
<Image
50+
className="duration-250 rounded-2xl shadow-colosso transition-shadow ease-linear
51+
group-hover:shadow-[0_0_40px_var(--tw-shadow-color)]"
52+
src="/img/colosso-landing.png"
53+
alt="Retro Colosso"
54+
width={300}
55+
height={425}
56+
/>
57+
<span className="text-lg">Coming soon!</span>
58+
<img
59+
className="fixed left-0 top-[-50vh] -z-10 h-[150vh] w-screen object-cover opacity-0
60+
transition-opacity duration-500 group-hover:opacity-100"
61+
src="/img/colosso-landing.png"
62+
/>
63+
</Link>
64+
</div>
65+
<div>
66+
<Link
67+
href="/volunteers"
68+
className="text-xl underline decoration-transparent transition hover:decoration-white"
69+
>
70+
Volunteers
71+
</Link>
72+
</div>
73+
</>
6474
);
6575
}

‎frontend/src/components/navbar.tsx

+13-10
Original file line numberDiff line numberDiff line change
@@ -13,11 +13,14 @@ function renderOlympicsNav() {
1313
const userName = cookies().get("user");
1414

1515
return [
16-
{ href: "/", title: "Teams" },
17-
{ href: "/", title: "Standings" },
18-
{ href: "/", title: "Schedule" },
19-
{ href: "/", title: "Games" },
20-
{ href: "/", title: userName != undefined ? userName.value : "USER" },
16+
{ href: "/olympics", title: "Teams" },
17+
{ href: "/olympics", title: "Standings" },
18+
{ href: "/olympics", title: "Schedule" },
19+
{ href: "/olympics", title: "Games" },
20+
{
21+
href: "/olympics",
22+
title: userName != undefined ? userName.value : "USER",
23+
},
2124
].map((link, i) => (
2225
<Link
2326
className="flex h-1/2 items-center px-4 underline decoration-transparent underline-offset-2
@@ -59,8 +62,8 @@ export default function Navbar({ site }: { site: "olympics" | "colosso" }) {
5962
/>
6063
</Link>
6164
<div
62-
className="absolute left-[calc(-4rem-2px)] top-16 flex flex-col border-r-2 border-white/20
63-
bg-black/60 backdrop-blur transition-[left] duration-250 group-hover:left-0"
65+
className="duration-250 absolute left-[calc(-4rem-2px)] top-16 flex flex-col border-r-2
66+
border-white/20 bg-black/60 backdrop-blur transition-[left] group-hover:left-0"
6467
>
6568
<Link href={`/${otherSite}`}>
6669
<Image
@@ -72,16 +75,16 @@ export default function Navbar({ site }: { site: "olympics" | "colosso" }) {
7275
/>
7376
</Link>
7477
<Link href="/">
75-
<HomeIcon className="w-[64px] h-[64px] p-4 hover:drop-shadow-[0_0_4px_white]" />
78+
<HomeIcon className="h-[64px] w-[64px] p-4 hover:drop-shadow-[0_0_4px_white]" />
7679
</Link>
7780
</div>
7881
</div>
7982
<Link
8083
href="/"
8184
className="ml-4 flex h-full flex-col flex-wrap items-start justify-center font-farray
8285
text-2xl uppercase underline decoration-transparent decoration-1
83-
underline-offset-[6px] transition hover:decoration-white sm:flex-row sm:flex-nowrap
84-
sm:items-center sm:text-3xl"
86+
underline-offset-[6px] transition hover:decoration-white sm:flex-row
87+
sm:flex-nowrap sm:items-center sm:text-3xl"
8588
>
8689
Retro
8790
<span className={`mt-[-0.5rem] sm:mt-0 ${textClass}`}>

0 commit comments

Comments
 (0)