RetroOlympics · monkey-bug · Aug 14, 2024 · Aug 19, 2024 · Aug 27, 2024 · Aug 27, 2024
diff --git a/frontend/.prettierrc b/frontend/.prettierrc
@@ -1,4 +1,8 @@
 {
     "tabWidth": 4,
-    "plugins": ["prettier-plugin-tailwindcss"]
+    "plugins": [
+        "prettier-plugin-tailwindcss",
+        "prettier-plugin-classnames",
+        "prettier-plugin-merge"
+    ]
 }
diff --git a/frontend/next.config.mjs b/frontend/next.config.mjs
@@ -1,4 +1,16 @@
+// @ts-check
 /** @type {import('next').NextConfig} */
-const nextConfig = {};
+const nextConfig = {
+    images: {
+        remotePatterns: [
+            {
+                protocol: "https",
+                hostname: "media.retroachievements.org",
+                port: "",
+                pathname: "/UserPic/**",
+            },
+        ],
+    },
+};
 
 export default nextConfig;
diff --git a/frontend/package.json b/frontend/package.json
@@ -8,6 +8,7 @@
         "format": "prettier --cache -w ."
     },
     "dependencies": {
+        "@heroicons/react": "^2.1.5",
         "next": "14.2.5",
         "react": "^18.3.1",
         "react-dom": "^18.3.1"
@@ -23,6 +24,8 @@
         "eslint-config-next": "14.2.5",
         "postcss": "^8.4.39",
         "prettier": "^3.3.2",
+        "prettier-plugin-classnames": "^0.7.2",
+        "prettier-plugin-merge": "^0.7.1",
         "prettier-plugin-tailwindcss": "^0.6.5",
         "tailwindcss": "^3.4.4",
         "typescript": "^5.5.3"

diff --git a/frontend/pnpm-lock.yaml b/frontend/pnpm-lock.yaml
diff --git a/frontend/public/font/farray.otf b/frontend/public/font/farray.otf
diff --git a/frontend/public/img/colosso-landing.png b/frontend/public/img/colosso-landing.png
diff --git a/frontend/public/img/logo/colosso.png b/frontend/public/img/logo/colosso.png
diff --git a/frontend/public/img/logo/olympics.png b/frontend/public/img/logo/olympics.png
diff --git a/frontend/public/img/olympics-landing.png b/frontend/public/img/olympics-landing.png
diff --git a/frontend/src/app/colosso/layout.tsx b/frontend/src/app/colosso/layout.tsx
@@ -0,0 +1,14 @@
+import Navbar from "@/components/navbar";
+
+export default function Layout({
+    children,
+}: Readonly<{
+    children: React.ReactNode;
+}>) {
+    return (
+        <>
+            <Navbar site="colosso" />
+            {children}
+        </>
+    );
+}
diff --git a/frontend/src/app/colosso/page.tsx b/frontend/src/app/colosso/page.tsx
@@ -0,0 +1,17 @@
+export default function ColossoHome() {
+    return (
+        <div
+            className="flex w-full flex-1 items-center justify-center py-16
+                [@media(min-aspect-ratio:4/3)]:flex-col"
+        >
+            <iframe
+                className="aspect-video flex-1"
+                src="https://www.youtube-nocookie.com/embed/WoezWo5yxVk?si=wrzsl-qWTEJuyhkx"
+                title="YouTube video player"
+                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+                referrerPolicy="strict-origin-when-cross-origin"
+                allowFullScreen
+            ></iframe>
+        </div>
+    );
+}
diff --git a/frontend/src/app/global.css b/frontend/src/app/global.css
@@ -0,0 +1,9 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@font-face {
+    font-family: "Farray";
+    src: url("../../public/font/farray.otf");
+    ascent-override: 85%;
+}
diff --git a/frontend/src/app/globals.css b/frontend/src/app/globals.css
diff --git a/frontend/src/app/layout.tsx b/frontend/src/app/layout.tsx
@@ -1,12 +1,11 @@
 import type { Metadata } from "next";
-import { Inter } from "next/font/google";
-import "./globals.css";
-import Navbar from "@/components/navigationbar";
+import { Roboto_Condensed } from "next/font/google";
+import "./global.css";
 
-const inter = Inter({ subsets: ["latin"] });
+const roboto = Roboto_Condensed({ subsets: ["latin"] });
 
 export const metadata: Metadata = {
-    title: "Create Next App",
+    title: "Retro Olympics",
     description: "Generated by create next app",
 };
 
@@ -17,9 +16,14 @@ export default function RootLayout({
 }>) {
     return (
         <html lang="en">
-            <body className={inter.className}>
-                <Navbar />
-                {children}
+            <body className={roboto.className}>
+                <main
+                    className="flex min-h-dvh flex-col items-center justify-center
+                        bg-[radial-gradient(75%_75%_at_50%_25%,rgba(0,0,0,0.7)_0%,rgb(0,0,0,0.95)_100%)]
+                        bg-fixed px-16 py-16 text-center text-white"
+                >
+                    {children}
+                </main>
             </body>
         </html>
     );

diff --git a/frontend/src/app/olympics/layout.tsx b/frontend/src/app/olympics/layout.tsx
@@ -0,0 +1,14 @@
+import Navbar from "@/components/navbar";
+
+export default function Layout({
+    children,
+}: Readonly<{
+    children: React.ReactNode;
+}>) {
+    return (
+        <>
+            <Navbar site="olympics" />
+            {children}
+        </>
+    );
+}
diff --git a/frontend/src/app/olympics/page.tsx b/frontend/src/app/olympics/page.tsx
@@ -0,0 +1,10 @@
+import { WrenchScrewdriverIcon } from "@heroicons/react/24/solid";
+
+export default function OlympicsHome() {
+    return (
+        <>
+            <WrenchScrewdriverIcon className="max-w-16 pb-4" />
+            <p>Under Construction!</p>
+        </>
+    );
+}
diff --git a/frontend/src/app/page.tsx b/frontend/src/app/page.tsx
@@ -1,7 +1,83 @@
+import Image from "next/image";
+import Link from "next/link";
+
+// TODO: add volunteers link
+
 export default function Home() {
     return (
-        <main>
-            <h1>Template</h1>
-        </main>
+        <>
+            <div className="flex flex-1 items-center justify-center gap-16 self-stretch">
+                <Link
+                    href="/olympics"
+                    className="peer/olympics group relative flex max-w-[300px] flex-1 flex-col items-center
+                        justify-center gap-1 font-farray text-4xl text-white"
+                >
+                    <p
+                        className="trasition-transform absolute top-6 z-10 duration-500
+                            [text-shadow:2px_1px_2px_black;] group-hover:-translate-y-1
+                            group-hover:scale-110"
+                    >
+                        Retro <span className="text-olympics">Olympics</span>
+                    </p>
+                    <Image
+                        className="duration-250 rounded-2xl shadow-olympics transition-shadow ease-linear
+                            group-hover:shadow-[0_0_40px_var(--tw-shadow-color)]"
+                        src="/img/olympics-landing.png"
+                        alt="Retro Olympics"
+                        width={300}
+                        height={425}
+                    />
+                    <span className="text-lg">New Season 2025</span>
+                    <Image
+                        className="fixed left-0 top-[-50vh] -z-10 h-[150vh] w-screen object-cover opacity-0
+                            transition-opacity duration-500 group-hover:opacity-100"
+                        src="/img/olympics-landing.png"
+                        width={0}
+                        height={0}
+                        sizes="100vw"
+                        alt=""
+                    />
+                </Link>
+                <Link
+                    href="/colosso"
+                    className="group relative flex max-w-[300px] flex-1 flex-col items-center justify-center
+                        gap-1 font-farray text-4xl text-white"
+                >
+                    <p
+                        className="trasition-transform absolute top-6 z-10 duration-500
+                            [text-shadow:2px_1px_2px_black;] group-hover:-translate-y-1
+                            group-hover:scale-110"
+                    >
+                        Retro <span className="text-colosso">Colosso</span>
+                    </p>
+                    <Image
+                        className="duration-250 rounded-2xl shadow-colosso transition-shadow ease-linear
+                            group-hover:shadow-[0_0_40px_var(--tw-shadow-color)]"
+                        src="/img/colosso-landing.png"
+                        alt="Retro Colosso"
+                        width={300}
+                        height={425}
+                    />
+                    <span className="text-lg">Coming soon!</span>
+                    <Image
+                        className="fixed left-0 top-[-50vh] -z-10 h-[150vh] w-screen object-cover opacity-0
+                            transition-opacity duration-500 group-hover:opacity-100"
+                        src="/img/colosso-landing.png"
+                        width={0}
+                        height={0}
+                        sizes="100vw"
+                        alt=""
+                    />
+                </Link>
+            </div>
+            <div>
+                <Link
+                    href="/volunteers"
+                    className="text-xl underline decoration-transparent transition hover:decoration-white"
+                >
+                    Volunteers
+                </Link>
+            </div>
+        </>
     );
 }