diff --git a/apps/site/src/app/(home)/page.tsx b/apps/site/src/app/(home)/page.tsx
index a4697c81..61519a70 100644
--- a/apps/site/src/app/(home)/page.tsx
+++ b/apps/site/src/app/(home)/page.tsx
@@ -1,7 +1,6 @@
export const revalidate = 60;
import Landing from "./sections/Landing";
-import GetInvolved from "./sections/GetInvolved";
import Sponsors from "./sections/Sponsors";
import FAQ from "./sections/FAQ";
import Clubs from "./sections/Clubs/Clubs";
@@ -15,7 +14,6 @@ const Home = () => {
- {/*
*/}
{/*
*/}
{/*
*/}
diff --git a/apps/site/src/app/(home)/sections/About/About.tsx b/apps/site/src/app/(home)/sections/About/About.tsx
index 3144bf31..46ec3ae8 100644
--- a/apps/site/src/app/(home)/sections/About/About.tsx
+++ b/apps/site/src/app/(home)/sections/About/About.tsx
@@ -5,15 +5,12 @@ import LeftCharacter from "@/assets/images/LeftCharacter.png";
import RightCharacter from "@/assets/images/RightCharacter.png";
import Flashlight from "@/assets/images/flashlight.png";
import Light from "@/assets/images/light.png";
-import PrimaryButton from "@/components/PrimaryButton/PrimaryButton";
import GrassPatch from "@/assets/background/landing/grass-patch.png";
import CampBase from "@/assets/background/landing/Camp_base.png";
import LogShading from "@/assets/background/landing/Log_shading.png";
import Log from "@/assets/background/landing/Log.png";
import LogTexture from "@/assets/background/landing/Log_texture.png";
import Tent from "@/assets/background/landing/Tent.png";
-import TentShading1 from "@/assets/background/landing/Tent_shading_1.png";
-import TentShading2 from "@/assets/background/landing/Tent_shading_2.png";
import styles from "./About.module.scss";
@@ -60,7 +57,7 @@ const About = () => {
/>
{/*
*/}
diff --git a/apps/site/src/app/(home)/sections/FAQ/FAQ.module.scss b/apps/site/src/app/(home)/sections/FAQ/FAQ.module.scss
index 453c7cef..0146632b 100644
--- a/apps/site/src/app/(home)/sections/FAQ/FAQ.module.scss
+++ b/apps/site/src/app/(home)/sections/FAQ/FAQ.module.scss
@@ -43,7 +43,7 @@ $item-padding-x: 3rem;
& > * > * {
font-weight: 400;
color: white;
- font-family: var(--next-font-reddit-mono), monospace;
+ font-family: var(--font-inter);
font-size: 0.9rem;
}
}
@@ -55,7 +55,7 @@ $item-padding-x: 3rem;
color: #cacaca;
margin-top: 15px;
padding: 1.5rem 2rem;
- font-family: var(--next-font-reddit-mono), monospace;
+ font-family: var(--font-inter);
font-size: 0.9rem;
font-weight: 400;
@@ -65,7 +65,7 @@ $item-padding-x: 3rem;
color: #cacaca;
letter-spacing: 0.03em;
line-height: 2;
- font-family: var(--next-font-reddit-mono), monospace;
+ font-family: var(--font-inter);
font-size: 1rem;
}
}
@@ -81,13 +81,13 @@ $item-padding-x: 3rem;
font-size: 1.6rem;
margin-bottom: 1rem;
letter-spacing: 0.03em;
- font-family: var(--next-font-reddit-mono), monospace;
+ font-family: var(--font-inter);
}
.faq-subtitle {
color: #99b1cb;
margin: 0;
- font-family: var(--next-font-reddit-mono), monospace;
+ font-family: var(--font-inter);
font-weight: 400;
font-size: 1rem;
align-self: center;
diff --git a/apps/site/src/app/(home)/sections/GetInvolved/GetInvolved.module.scss b/apps/site/src/app/(home)/sections/GetInvolved/GetInvolved.module.scss
deleted file mode 100644
index 4599c5ae..00000000
--- a/apps/site/src/app/(home)/sections/GetInvolved/GetInvolved.module.scss
+++ /dev/null
@@ -1,158 +0,0 @@
-@use "zothacks-theme" as theme;
-@use "bootstrap-utils" as bootstrap;
-
-$text-font-weight: 600;
-$text-font-size: 1.5rem;
-$border-radius: 14px;
-$speech-padding: 20px;
-$speech-shadow: 0 10px 0 rgba(1, 57, 70, 0.2);
-
-@mixin speechBubble($bg-color, $border-color) {
- background-color: $bg-color;
- border: 6px solid $border-color;
- border-radius: $border-radius;
- padding: $speech-padding;
- font-weight: $text-font-weight;
- font-size: $text-font-size;
- text-align: center;
-
- @include bootstrap.media-breakpoint-up(md) {
- padding: 32px 48px;
- text-align: left;
- }
-}
-
-@mixin boxShadow {
- box-shadow: $speech-shadow;
-}
-
-.container {
- padding-top: 0 !important;
-}
-
-.headingText {
- color: theme.$white;
- margin-bottom: 48px;
- font-weight: $text-font-weight;
-}
-
-.anteaterContainerLeft,
-.anteaterContainerRight {
- display: none;
- height: 187px;
- width: 136px;
- z-index: 4;
- @include bootstrap.media-breakpoint-up(md) {
- display: block;
- position: relative;
- }
-}
-
-.anteaterContainerLeft {
- @include bootstrap.media-breakpoint-up(md) {
- left: -32px;
- top: -32px;
- }
-}
-
-.anteaterContainerRight {
- @include bootstrap.media-breakpoint-up(md) {
- top: -64px;
- left: 48px;
- margin-left: auto;
- }
-}
-
-.anteaterImage {
- &:hover {
- transform: scale(1.05);
- animation: rotateAnimation 0.7s ease-in-out 1;
- }
-
- height: 187px;
- width: 136px;
- z-index: 5;
- transition: transform 0.5s ease-in-out;
-}
-
-@keyframes rotateAnimation {
- 0%,
- 100% {
- transform: scale(1.05) rotate(0deg);
- }
- 33% {
- transform: scale(1.05) rotate(-7deg);
- }
- 66% {
- transform: scale(1.05) rotate(7deg);
- }
-}
-
-.speechSectionLeft,
-.speechSectionRight {
- margin-bottom: 20px;
- position: relative;
-}
-
-.speechSectionRight {
- @include bootstrap.media-breakpoint-up(md) {
- top: -230px;
- }
-}
-
-.speechBubbleOuterLeft,
-.speechBubbleOuterRight {
- position: relative;
- background-color: theme.$white;
- border-radius: 18px;
- padding: 4px;
- @include boxShadow;
-
- @include bootstrap.media-breakpoint-up(md) {
- width: 65%;
- }
-}
-
-.speechBubbleOuterLeft {
- z-index: 2;
- @include bootstrap.media-breakpoint-up(md) {
- margin-left: 90px;
- }
-}
-
-.speechBubbleOuterRight {
- z-index: 1;
- @include bootstrap.media-breakpoint-up(md) {
- margin-left: auto;
- margin-right: 90px;
- }
-}
-
-.speechBubbleLeft {
- @include speechBubble(theme.$white, theme.$black);
-}
-
-.speechBubbleRight {
- @include speechBubble(theme.$light-green, theme.$black);
-}
-
-.applyButton {
- background-color: theme.$purple;
- color: theme.$white;
- border: 0px;
- padding: 4px 24px;
- font-weight: $text-font-weight;
-
- --bs-btn-disabled-bg: #{theme.$purple};
- --bs-btn-disabled-border-color: #{theme.$purple};
-
- @include bootstrap.media-breakpoint-up(md) {
- padding: 4px 32px;
- }
-
- &::before {
- background-color: theme.$purple;
- color: theme.$white;
- padding: 10px;
- }
-}
diff --git a/apps/site/src/app/(home)/sections/GetInvolved/GetInvolved.tsx b/apps/site/src/app/(home)/sections/GetInvolved/GetInvolved.tsx
deleted file mode 100644
index d68b78d4..00000000
--- a/apps/site/src/app/(home)/sections/GetInvolved/GetInvolved.tsx
+++ /dev/null
@@ -1,73 +0,0 @@
-"use client";
-
-import Image from "next/image";
-
-import Container from "react-bootstrap/Container";
-import Button from "react-bootstrap/Button";
-import anteater_left from "@/assets/images/involved_anteater_left.png";
-import anteater_right from "@/assets/images/involved_anteater_right.png";
-import styles from "./GetInvolved.module.scss";
-
-const GetInvolved = () => {
- const sectionHeading = GET INVOLVED ;
- const leftBubbleText = Want to develop your first project?
;
- const rightBubbleText = (
- Otherwise, if you have some experience under your belt,
- );
- const applyLink = (
-
- Hacker Apps Closed
-
- );
-
- const mentorLink = (
-
- Mentor Apps Closed
-
- );
-
- return (
-
- {sectionHeading}
-
-
-
-
- {leftBubbleText}
- {applyLink}
-
-
-
-
-
-
-
-
- {rightBubbleText}
- {mentorLink}
-
-
-
-
-
-
- );
-};
-
-export default GetInvolved;
diff --git a/apps/site/src/app/(home)/sections/GetInvolved/index.ts b/apps/site/src/app/(home)/sections/GetInvolved/index.ts
deleted file mode 100644
index 064f25c5..00000000
--- a/apps/site/src/app/(home)/sections/GetInvolved/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from "./GetInvolved";
diff --git a/apps/site/src/app/(home)/sections/Intro/Intro.module.scss b/apps/site/src/app/(home)/sections/Intro/Intro.module.scss
deleted file mode 100644
index 5706c381..00000000
--- a/apps/site/src/app/(home)/sections/Intro/Intro.module.scss
+++ /dev/null
@@ -1,49 +0,0 @@
-@use "bootstrap-utils" as bootstrap;
-
-.description {
- text-align: center;
- font-size: 0.75rem;
-
- @include bootstrap.media-breakpoint-up(sm) {
- font-size: 1rem;
- }
-
- @include bootstrap.media-breakpoint-up(xl) {
- font-size: 1.5rem;
- }
-}
-
-.header {
- font-size: 1rem;
- font-weight: 600;
-
- @include bootstrap.media-breakpoint-up(sm) {
- font-size: 1.5rem;
- }
-
- @include bootstrap.media-breakpoint-up(xl) {
- font-size: 2rem;
- }
-}
-
-.intro {
- display: flex;
- flex-direction: column;
- justify-content: center;
- width: 90vw;
- margin-top: 1vw;
-
- transform: translateY(calc(-50% + 40vw));
-
- @media (min-width: 400px) {
- transform: translateY(calc(-50% + 40vw));
- }
-
- @include bootstrap.media-breakpoint-up(md) {
- transform: translateY(calc(-50% + 18vw));
- }
-
- @media (min-width: 1200px) {
- transform: translateY(calc(-50% + 22vw));
- }
-}
diff --git a/apps/site/src/app/(home)/sections/Intro/Intro.tsx b/apps/site/src/app/(home)/sections/Intro/Intro.tsx
deleted file mode 100644
index 175c470e..00000000
--- a/apps/site/src/app/(home)/sections/Intro/Intro.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import styles from "./Intro.module.scss";
-
-export default function Intro() {
- return (
-
-
What is ZotHacks?
-
- ZotHacks is a 12-hour hackathon designed for beginners where students
- with minimal computer science experience will learn to build their first
- CS project. Through ZotHacks, we introduce these students to the world
- of hackathons and web development by providing technical workshops,
- dedicated mentors for every team, and free food! We encourage applicants
- from all backgrounds, including underrepresented minorities, majors, or
- genders to apply!
-
-
-
\ No newline at end of file
diff --git a/apps/site/src/app/apply/ApplicationForm.module.scss b/apps/site/src/app/apply/ApplicationForm.module.scss
index d07a44db..0abdef38 100644
--- a/apps/site/src/app/apply/ApplicationForm.module.scss
+++ b/apps/site/src/app/apply/ApplicationForm.module.scss
@@ -160,11 +160,11 @@
padding: 10px 12px;
color: theme.$off-white;
- font-family: var(--next-font-reddit-mono), monospace;
+ font-family: var(--font-inter);
}
.select option {
background: rgba(255, 255, 255, 0.1);
color: black;
- font-family: var(--next-font-reddit-mono), monospace;
+ font-family: var(--font-inter);
}
diff --git a/apps/site/src/app/apply/ApplicationsClosed.module.scss b/apps/site/src/app/apply/ApplicationsClosed.module.scss
index 26bd7478..2da0c61a 100644
--- a/apps/site/src/app/apply/ApplicationsClosed.module.scss
+++ b/apps/site/src/app/apply/ApplicationsClosed.module.scss
@@ -8,7 +8,7 @@
align-items: center;
justify-content: center;
gap: 2rem;
- font-family: var(--next-font-reddit-mono), monospace;
+ font-family: var(--font-inter);
}
.mascot {
diff --git a/apps/site/src/app/apply/ApplyLanding.tsx b/apps/site/src/app/apply/ApplyLanding.tsx
new file mode 100644
index 00000000..b834ae33
--- /dev/null
+++ b/apps/site/src/app/apply/ApplyLanding.tsx
@@ -0,0 +1,13 @@
+import Link from "next/link";
+
+export default function ApplyLanding() {
+ return (
+
+ Are you applying as a Hacker or Mentor?
+
+
+
+ );
+}
diff --git a/apps/site/src/app/apply/hacker/page.tsx b/apps/site/src/app/apply/hacker/page.tsx
new file mode 100644
index 00000000..18c511d8
--- /dev/null
+++ b/apps/site/src/app/apply/hacker/page.tsx
@@ -0,0 +1,10 @@
+import { Maintenance } from "@/views";
+import HackerApplication from "../HackerApplication";
+
+export const revalidate = 60;
+
+const Component = process.env.MAINTENANCE_MODE_APPLICATION
+ ? Maintenance
+ : HackerApplication;
+
+export default Component;
diff --git a/apps/site/src/app/apply/page.tsx b/apps/site/src/app/apply/page.tsx
index 2b36af1a..fc01391f 100644
--- a/apps/site/src/app/apply/page.tsx
+++ b/apps/site/src/app/apply/page.tsx
@@ -1,10 +1,10 @@
import { Maintenance } from "@/views";
-import HackerApplication from "./HackerApplication";
+import ApplyLanding from "./ApplyLanding";
export const revalidate = 60;
const Component = process.env.MAINTENANCE_MODE_APPLICATION
? Maintenance
- : HackerApplication;
+ : ApplyLanding;
export default Component;
diff --git a/apps/site/src/app/layout.tsx b/apps/site/src/app/layout.tsx
index 0498ba11..0791ffaa 100644
--- a/apps/site/src/app/layout.tsx
+++ b/apps/site/src/app/layout.tsx
@@ -1,5 +1,5 @@
import type { Metadata } from "next";
-import { DM_Sans, Reddit_Mono } from "next/font/google";
+import { DotGothic16, Inter } from "next/font/google";
import NavbarParent from "@/components/NavBar/NavBarParent";
import Footer from "@/components/Footer/Footer";
@@ -16,16 +16,16 @@ export const metadata: Metadata = {
},
};
-const dmSans = DM_Sans({
+const inter = Inter({
weight: ["400", "500", "600", "700"],
subsets: ["latin"],
- variable: "--next-font-dm-sans",
+ variable: "--next-font-inter",
});
-const redditMono = Reddit_Mono({
- weight: ["400", "600", "800"],
+const dotGothic16 = DotGothic16({
+ weight: "400",
subsets: ["latin"],
- variable: "--next-font-reddit-mono",
+ variable: "--next-font-dotgothic16",
});
export default function RootLayout({
@@ -34,7 +34,7 @@ export default function RootLayout({
children: React.ReactNode;
}) {
return (
-
+
{children}
diff --git a/apps/site/src/app/login/Login.module.scss b/apps/site/src/app/login/Login.module.scss
index 28020e63..a983060d 100644
--- a/apps/site/src/app/login/Login.module.scss
+++ b/apps/site/src/app/login/Login.module.scss
@@ -6,7 +6,7 @@
justify-content: center;
align-items: center;
gap: 1.875rem;
- font-family: var(--next-font-reddit-mono), monospace;
+ font-family: var(--font-inter);
}
.form {
diff --git a/apps/site/src/app/portal/Confirmation.module.scss b/apps/site/src/app/portal/Confirmation.module.scss
index ec860586..825d1caa 100644
--- a/apps/site/src/app/portal/Confirmation.module.scss
+++ b/apps/site/src/app/portal/Confirmation.module.scss
@@ -8,7 +8,7 @@
justify-content: center;
gap: 2rem;
background: url("~@/assets/background/mountains-background.png");
- font-family: var(--next-font-reddit-mono), monospace;
+ font-family: var(--font-inter);
}
.mascot {
diff --git a/apps/site/src/components/RetroWindow/RetroWindow.module.scss b/apps/site/src/components/RetroWindow/RetroWindow.module.scss
new file mode 100644
index 00000000..5b929e73
--- /dev/null
+++ b/apps/site/src/components/RetroWindow/RetroWindow.module.scss
@@ -0,0 +1,164 @@
+@use "zothacks-theme" as theme;
+
+$window-gray: #e2e2e0;
+$content-border: #ababad;
+$content-background: #ffffff;
+
+.root {
+ width: 100%;
+}
+
+.mainContainer {
+ border: 1.68px solid theme.$white;
+ background-color: $window-gray;
+ box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.35);
+ overflow: hidden;
+}
+
+.gradientHeader {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ gap: 0.75rem;
+ padding: 0.45rem 0.5rem;
+ background: linear-gradient(90deg, #03036d 0%, #487db5 100%);
+}
+
+.title {
+ color: theme.$white;
+ font-family: var(--font-pixel), monospace;
+ font-size: 14px;
+ padding-left: 0.3rem;
+ line-height: 1.2;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+}
+
+$control-face: #c6c6c6;
+$control-highlight: #ffffff;
+$control-highlight-inner: #dfdfdf;
+$control-shadow: #000000;
+$control-shadow-inner: #808080;
+$control-size: 20px;
+
+.controls {
+ display: flex;
+ flex-shrink: 0;
+ gap: 0.65rem;
+}
+
+.windowControl {
+ flex-shrink: 0;
+ padding: 0;
+ border: none;
+ background: transparent;
+ cursor: default;
+ line-height: 0;
+}
+
+// Layered borders: inner on the element, outer on ::before (inset -1px)
+.controlBevel {
+ position: relative;
+ display: block;
+ width: $control-size;
+ height: $control-size;
+ box-sizing: border-box;
+ background-color: $control-face;
+ border-style: solid;
+ border-width: 1px;
+ // Inner bevel — light top/left, dark bottom/right
+ border-color: $control-highlight-inner $control-shadow-inner
+ $control-shadow-inner $control-highlight-inner;
+ image-rendering: pixelated;
+
+ &::before {
+ content: "";
+ position: absolute;
+ inset: -1px;
+ border-style: solid;
+ border-width: 1px;
+ // Outer bevel — white top/left, black bottom/right
+ border-color: $control-highlight $control-shadow $control-shadow
+ $control-highlight;
+ pointer-events: none;
+ }
+}
+
+.minimizeIcon {
+ position: absolute;
+ left: 50%;
+ bottom: 4px;
+ width: 10px;
+ height: 2px;
+ transform: translateX(-50%);
+ background-color: $control-shadow;
+}
+
+.maximizeIcon {
+ position: absolute;
+ top: 4px;
+ left: 50%;
+ width: 11px;
+ height: 11px;
+ transform: translateX(-50%);
+ box-sizing: border-box;
+ border: 1px solid $control-shadow;
+ background-color: transparent;
+
+ &::before {
+ content: "";
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ height: 2px;
+ background-color: $control-shadow;
+ }
+}
+
+.editMenu {
+ display: flex;
+ gap: 1rem;
+ padding-top: 0.6rem;
+ font-family: var(--font-pixel), monospace;
+ font-size: 13px;
+ line-height: 1;
+ color: theme.$black;
+}
+
+.menuKey {
+ text-decoration: underline;
+ text-underline-offset: 1px;
+}
+
+.body {
+ display: flex;
+ flex-direction: column;
+ gap: 0.75rem;
+ padding: 0.75rem;
+ background-color: $window-gray;
+}
+
+.bodyWithMenu {
+ padding-top: 0.25rem;
+ gap: 0.35rem;
+}
+
+.toolbar {
+ padding: 0 0.25rem;
+}
+
+.content {
+ padding: 0.25rem 0.5rem;
+}
+
+.contentFrame {
+ border: 2.52px solid $content-border;
+ background: $content-background;
+ overflow: hidden;
+}
+
+.footer {
+ padding: 0 0.25rem;
+}
diff --git a/apps/site/src/components/RetroWindow/RetroWindow.tsx b/apps/site/src/components/RetroWindow/RetroWindow.tsx
new file mode 100644
index 00000000..5d7a6f13
--- /dev/null
+++ b/apps/site/src/components/RetroWindow/RetroWindow.tsx
@@ -0,0 +1,98 @@
+import clsx from "clsx";
+import React, { PropsWithChildren } from "react";
+
+import styles from "./RetroWindow.module.scss";
+
+/**
+ * Retro window shell: title bar, optional menu bar, optional toolbar,
+ * main body, and optional footer row.
+ *
+ * `children` (from `PropsWithChildren`) is the main body content.
+ */
+export interface RetroWindowProps extends PropsWithChildren {
+ /** When true, shows the “File Edit Insert” menu bar (visual only). */
+ showEditBar?: boolean;
+ /** Text shown in the blue gradient title bar. */
+ title: string;
+ /**
+ * When true, wraps the main `children` in the bordered panel; the child sets its
+ * own background (e.g. white). When false, children sit on the default gray (#E2E2E0).
+ */
+ framedContent?: boolean;
+ /** Optional row above the main content, e.g. tabs, filters, or tools. */
+ toolbar?: React.ReactNode;
+ /** Optional row below the main content, e.g. status text or actions. */
+ footer?: React.ReactNode;
+}
+
+const RetroWindow = ({
+ title,
+ children,
+ showEditBar = false,
+ framedContent = false,
+ toolbar,
+ footer,
+}: RetroWindowProps) => {
+ return (
+
+
+
+
{title}
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {showEditBar && (
+
+
+ F ile
+
+
+ E dit
+
+
+ I nsert
+
+
+ )}
+
+ {toolbar != null &&
{toolbar}
}
+
+
+ {children}
+
+
+ {footer != null &&
{footer}
}
+
+
+