From e9694be105b6646017080e9e60348b709005ceb8 Mon Sep 17 00:00:00 2001 From: cyril <97067553+cyriljoby@users.noreply.github.com> Date: Mon, 18 May 2026 13:59:40 -0700 Subject: [PATCH 1/4] Add global CSS design tokens to globals.scss (#318) * add global CSS design tokens to globals.scss * cleaned up unneccessary globals and fixed dotgothic import --------- Co-authored-by: Cyril Joby Co-authored-by: Nathan Ong --- .../app/(home)/sections/FAQ/FAQ.module.scss | 10 +++++----- .../(home)/sections/Landing/Title.module.scss | 2 +- .../src/app/apply/ApplicationForm.module.scss | 4 ++-- .../app/apply/ApplicationsClosed.module.scss | 2 +- apps/site/src/app/layout.tsx | 14 +++++++------- apps/site/src/app/login/Login.module.scss | 2 +- .../src/app/portal/Confirmation.module.scss | 2 +- apps/site/src/lib/styles/_bootstrap-utils.scss | 2 +- apps/site/src/lib/styles/globals.scss | 18 +++++++++--------- .../HeadingCard/HeadingCard.module.scss | 4 ++-- .../ResourceCard/ResourceCard.module.scss | 2 +- 11 files changed, 31 insertions(+), 31 deletions(-) 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/Landing/Title.module.scss b/apps/site/src/app/(home)/sections/Landing/Title.module.scss index 06d7fb33..8a2262ba 100644 --- a/apps/site/src/app/(home)/sections/Landing/Title.module.scss +++ b/apps/site/src/app/(home)/sections/Landing/Title.module.scss @@ -24,7 +24,7 @@ font-weight: 500; margin-top: 2rem; margin-bottom: 1rem; - font-family: var(--next-font-reddit-mono), monospace; + font-family: var(--font-mono); @include bootstrap.media-breakpoint-up(md) { font-size: 1.5rem; 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/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/lib/styles/_bootstrap-utils.scss b/apps/site/src/lib/styles/_bootstrap-utils.scss index 44c6638f..f4522025 100644 --- a/apps/site/src/lib/styles/_bootstrap-utils.scss +++ b/apps/site/src/lib/styles/_bootstrap-utils.scss @@ -1,7 +1,7 @@ @import "~bootstrap/scss/functions"; // Bootstrap overrides (must come before importing variables) -$font-family-base: var(--next-font-reddit-mono); +$font-family-base: var(--next-font-inter); $font-size-base: 1.25rem; $h1-font-size: 5rem; $h2-font-size: 3rem; diff --git a/apps/site/src/lib/styles/globals.scss b/apps/site/src/lib/styles/globals.scss index 2213c10d..90079b4d 100644 --- a/apps/site/src/lib/styles/globals.scss +++ b/apps/site/src/lib/styles/globals.scss @@ -1,13 +1,19 @@ -@use "bootstrap-utils" as bootstrap; +@use "zothacks-theme" as theme; -$container-padding: 8rem; +// Shared design tokens +:root { + --gradient-blue: linear-gradient(180deg, #03036d 0%, #487db5 100%); + --font-inter: var(--next-font-inter), sans-serif; + --font-pixel: var(--next-font-dotgothic16), sans-serif; +} +// Global styles .background { background: linear-gradient(180deg, #0d1321 77.73%, #070a11 100%); } .accordion { - --bs-accordion-active-color: theme.$black; + --bs-accordion-active-color: #{theme.$black}; --bs-accordion-bg: transparent; --bs-accordion-active-bg: transparent; --bs-accordion-border-color: transparent; @@ -15,12 +21,6 @@ $container-padding: 8rem; --bs-accordion-btn-icon-width: 14px; } -section.container { - // responsive padding - @include bootstrap.padding-top($container-padding); - @include bootstrap.padding-bottom($container-padding); -} - html { scroll-behavior: smooth; scroll-padding-top: 100px; diff --git a/apps/site/src/views/Resources/components/HeadingCard/HeadingCard.module.scss b/apps/site/src/views/Resources/components/HeadingCard/HeadingCard.module.scss index cba08d1e..ab31f861 100644 --- a/apps/site/src/views/Resources/components/HeadingCard/HeadingCard.module.scss +++ b/apps/site/src/views/Resources/components/HeadingCard/HeadingCard.module.scss @@ -23,7 +23,7 @@ $heading-font-size: 1.75rem; } .title { - font-family: "Reddit Mono", monospace; + font-family: var(--font-inter); font-weight: 800; font-style: normal; font-size: 25px; @@ -34,7 +34,7 @@ $heading-font-size: 1.75rem; } .description { - font-family: "Reddit Mono", monospace; + font-family: var(--font-inter); font-weight: 400; font-size: 16px; line-height: 180%; diff --git a/apps/site/src/views/Resources/components/ResourceCard/ResourceCard.module.scss b/apps/site/src/views/Resources/components/ResourceCard/ResourceCard.module.scss index 07520f57..594cf9ca 100644 --- a/apps/site/src/views/Resources/components/ResourceCard/ResourceCard.module.scss +++ b/apps/site/src/views/Resources/components/ResourceCard/ResourceCard.module.scss @@ -38,7 +38,7 @@ } .text { - font-family: "Reddit Mono", monospace; + font-family: var(--font-inter); font-weight: 400; font-size: 16px; line-height: 180%; From 5a4b22c9695cb99e7daaf4d56db126bcec4d1cd9 Mon Sep 17 00:00:00 2001 From: Joshua Sullivan Date: Mon, 18 May 2026 15:53:55 -0700 Subject: [PATCH 2/4] Created Universal/Reusable Retro Window Component (#317) * feat: initial commit * big feat: implemented entire window component * chore: adjusted styling to match hifi * feat: docstrings to retro window! * feat: Renamed Window.tsx to RetroWindow.tsx * chore: testing window modes * fix: increased window control size * ran prettier * chore: renamed variables, small styling, and added/removed props * Apply suggestions from code review Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> * removed about retro window testing * restored framedContent and cleaned up imports * fixed padding with framed content * forgot to remove the about testing omg --------- Co-authored-by: Nathan Ong Co-authored-by: Nathan Ong <164730140+NoNathan17@users.noreply.github.com> Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> --- .../src/app/(home)/sections/About/About.tsx | 2 - .../RetroWindow/RetroWindow.module.scss | 164 ++++++++++++++++++ .../components/RetroWindow/RetroWindow.tsx | 98 +++++++++++ 3 files changed, 262 insertions(+), 2 deletions(-) create mode 100644 apps/site/src/components/RetroWindow/RetroWindow.module.scss create mode 100644 apps/site/src/components/RetroWindow/RetroWindow.tsx diff --git a/apps/site/src/app/(home)/sections/About/About.tsx b/apps/site/src/app/(home)/sections/About/About.tsx index 3144bf31..2db4d709 100644 --- a/apps/site/src/app/(home)/sections/About/About.tsx +++ b/apps/site/src/app/(home)/sections/About/About.tsx @@ -12,8 +12,6 @@ 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"; 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..5ea41594 --- /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(--next-font-reddit-mono), 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(--next-font-reddit-mono), 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 && ( + + )} + + {toolbar != null &&
{toolbar}
} + +
+ {children} +
+ + {footer != null &&
{footer}
} +
+
+
+ ); +}; + +export default RetroWindow; From 5cf23c5ff27b94ad680d2ad5b715396ebb9b837d Mon Sep 17 00:00:00 2001 From: Nathan Ong Date: Mon, 18 May 2026 19:35:07 -0700 Subject: [PATCH 3/4] big commit for clean up + setup --- apps/site/src/app/(home)/page.tsx | 2 - .../src/app/(home)/sections/About/About.tsx | 7 +- .../GetInvolved/GetInvolved.module.scss | 158 ------------------ .../sections/GetInvolved/GetInvolved.tsx | 73 -------- .../app/(home)/sections/GetInvolved/index.ts | 1 - .../(home)/sections/Intro/Intro.module.scss | 49 ------ .../src/app/(home)/sections/Intro/Intro.tsx | 18 -- .../src/app/(home)/sections/Intro/index.ts | 1 - .../(home)/sections/Landing/ApplyButton.tsx | 1 - .../app/(home)/sections/Landing/Landing.tsx | 1 - .../src/app/(home)/sections/Sponsors/clip.svg | 4 - apps/site/src/app/apply/ApplyLanding.tsx | 13 ++ apps/site/src/app/apply/hacker/page.tsx | 10 ++ apps/site/src/app/apply/page.tsx | 4 +- .../RetroWindow/RetroWindow.module.scss | 4 +- apps/site/src/lib/styles/globals.scss | 16 +- 16 files changed, 44 insertions(+), 318 deletions(-) delete mode 100644 apps/site/src/app/(home)/sections/GetInvolved/GetInvolved.module.scss delete mode 100644 apps/site/src/app/(home)/sections/GetInvolved/GetInvolved.tsx delete mode 100644 apps/site/src/app/(home)/sections/GetInvolved/index.ts delete mode 100644 apps/site/src/app/(home)/sections/Intro/Intro.module.scss delete mode 100644 apps/site/src/app/(home)/sections/Intro/Intro.tsx delete mode 100644 apps/site/src/app/(home)/sections/Intro/index.ts delete mode 100644 apps/site/src/app/(home)/sections/Sponsors/clip.svg create mode 100644 apps/site/src/app/apply/ApplyLanding.tsx create mode 100644 apps/site/src/app/apply/hacker/page.tsx 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 2db4d709..356149e1 100644 --- a/apps/site/src/app/(home)/sections/About/About.tsx +++ b/apps/site/src/app/(home)/sections/About/About.tsx @@ -5,7 +5,6 @@ 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"; @@ -56,10 +55,10 @@ const About = () => { alt="Log texture" className={styles.logTexture} /> - {/*
+

Want to develop your first project?

- Apply to be a hacker -
*/} + Apply to be a hacker +
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 = ( - - ); - - const mentorLink = ( - - ); - - return ( - - {sectionHeading} -
-
-
-
- {leftBubbleText} - {applyLink} -
-
-
- A cartoon anteater sitting on a ring buoy coding -
-
-
-
-
- {rightBubbleText} - {mentorLink} -
-
-
- A cartoon anteater captain sitting on a ring buoy -
-
-
- - ); -}; - -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! -

-
- ); -} diff --git a/apps/site/src/app/(home)/sections/Intro/index.ts b/apps/site/src/app/(home)/sections/Intro/index.ts deleted file mode 100644 index 5a041185..00000000 --- a/apps/site/src/app/(home)/sections/Intro/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default } from "./Intro"; diff --git a/apps/site/src/app/(home)/sections/Landing/ApplyButton.tsx b/apps/site/src/app/(home)/sections/Landing/ApplyButton.tsx index 8f9c6103..c9caeec6 100644 --- a/apps/site/src/app/(home)/sections/Landing/ApplyButton.tsx +++ b/apps/site/src/app/(home)/sections/Landing/ApplyButton.tsx @@ -1,5 +1,4 @@ import { motion } from "framer-motion"; -import Link from "next/link"; import styles from "./ApplyButton.module.scss"; diff --git a/apps/site/src/app/(home)/sections/Landing/Landing.tsx b/apps/site/src/app/(home)/sections/Landing/Landing.tsx index 566d9c0d..45be2366 100644 --- a/apps/site/src/app/(home)/sections/Landing/Landing.tsx +++ b/apps/site/src/app/(home)/sections/Landing/Landing.tsx @@ -3,7 +3,6 @@ import Image from "next/image"; import Title from "./Title"; -import PrimaryButton from "@/components/PrimaryButton/PrimaryButton"; import Moon from "@/assets/background/landing/moon.svg"; import Trees from "@/assets/background/landing/main-trees.svg"; diff --git a/apps/site/src/app/(home)/sections/Sponsors/clip.svg b/apps/site/src/app/(home)/sections/Sponsors/clip.svg deleted file mode 100644 index 7216f455..00000000 --- a/apps/site/src/app/(home)/sections/Sponsors/clip.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - \ No newline at end of file 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/components/RetroWindow/RetroWindow.module.scss b/apps/site/src/components/RetroWindow/RetroWindow.module.scss index 5ea41594..5b929e73 100644 --- a/apps/site/src/components/RetroWindow/RetroWindow.module.scss +++ b/apps/site/src/components/RetroWindow/RetroWindow.module.scss @@ -26,7 +26,7 @@ $content-background: #ffffff; .title { color: theme.$white; - font-family: var(--next-font-reddit-mono), monospace; + font-family: var(--font-pixel), monospace; font-size: 14px; padding-left: 0.3rem; line-height: 1.2; @@ -121,7 +121,7 @@ $control-size: 20px; display: flex; gap: 1rem; padding-top: 0.6rem; - font-family: var(--next-font-reddit-mono), monospace; + font-family: var(--font-pixel), monospace; font-size: 13px; line-height: 1; color: theme.$black; diff --git a/apps/site/src/lib/styles/globals.scss b/apps/site/src/lib/styles/globals.scss index 90079b4d..6fdd2870 100644 --- a/apps/site/src/lib/styles/globals.scss +++ b/apps/site/src/lib/styles/globals.scss @@ -1,8 +1,20 @@ @use "zothacks-theme" as theme; -// Shared design tokens +// Global CSS variables :root { - --gradient-blue: linear-gradient(180deg, #03036d 0%, #487db5 100%); + --blue-gradient: linear-gradient(180deg, #03036d 0%, #487db5 100%); + --radial-gradient-blue: radial-gradient( + circle, + #f1f1f1 0%, + #c5d8ed 35%, + #a3c4e9 65%, + #5697e2 100% + ); + --green-gradient: radial-gradient(circle, #05dc05 0%, #152e14 100%); + --schedule-gray: #d9d9d9; + --input-gray: #d7d7d7; + --scrollbar-gray: #808080; + --vibrant-blue: #215fda; --font-inter: var(--next-font-inter), sans-serif; --font-pixel: var(--next-font-dotgothic16), sans-serif; } From 9c34733b63f8dab62aa9c491536468c9614493ca Mon Sep 17 00:00:00 2001 From: Nathan Ong Date: Mon, 18 May 2026 19:42:57 -0700 Subject: [PATCH 4/4] remove apply button --- apps/site/src/app/(home)/sections/About/About.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/apps/site/src/app/(home)/sections/About/About.tsx b/apps/site/src/app/(home)/sections/About/About.tsx index 356149e1..46ec3ae8 100644 --- a/apps/site/src/app/(home)/sections/About/About.tsx +++ b/apps/site/src/app/(home)/sections/About/About.tsx @@ -55,10 +55,10 @@ const About = () => { alt="Log texture" className={styles.logTexture} /> -
+ {/*

Want to develop your first project?

Apply to be a hacker -
+
*/}