From 2ff28eed82caa6200633a3256cb0cd5636a56912 Mon Sep 17 00:00:00 2001 From: Dev Singh Date: Thu, 11 Sep 2025 21:11:37 -0500 Subject: [PATCH 1/4] Don't open new tab for initial join now --- src/components/Hero/index.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/components/Hero/index.tsx b/src/components/Hero/index.tsx index 928943f0..46504420 100644 --- a/src/components/Hero/index.tsx +++ b/src/components/Hero/index.tsx @@ -105,7 +105,6 @@ export default function Hero({ upcomingEvents, eventsLoading }: HeroProps) { Join Now @@ -224,7 +223,7 @@ export default function Hero({ upcomingEvents, eventsLoading }: HeroProps) { } const url = config['addCalendarLinks']['majorEvents'][ - selectedCalPlatform + selectedCalPlatform ]; window.open(url, '_blank')?.focus(); }} From f24bd165a63d0fb4baa51dbb9291851ca39e0ec4 Mon Sep 17 00:00:00 2001 From: Dev Singh Date: Thu, 11 Sep 2025 21:11:46 -0500 Subject: [PATCH 2/4] Add specific metadata for join and check pages --- .../(membership)/check-membership/layout.tsx | 35 +++++++++++++++++++ src/app/(membership)/join/layout.tsx | 35 +++++++++++++++++++ src/app/(membership)/join/page.tsx | 17 --------- src/app/(membership)/membership/layout.tsx | 35 +++++++++++++++++++ 4 files changed, 105 insertions(+), 17 deletions(-) create mode 100644 src/app/(membership)/check-membership/layout.tsx create mode 100644 src/app/(membership)/join/layout.tsx create mode 100644 src/app/(membership)/membership/layout.tsx diff --git a/src/app/(membership)/check-membership/layout.tsx b/src/app/(membership)/check-membership/layout.tsx new file mode 100644 index 00000000..50b0a6cf --- /dev/null +++ b/src/app/(membership)/check-membership/layout.tsx @@ -0,0 +1,35 @@ +import { Metadata } from "next"; +import { DM_Sans } from 'next/font/google'; + +const dm_sans = DM_Sans({ + subsets: ['latin', 'latin-ext'], + display: 'swap', + variable: '--font-dm-sans', + weight: ['400', '500', '700'], +}); + +export const metadata: Metadata = { + title: "ACM @ UIUC Membership", + description: "Verify your ACM @ UIUC paid membership status, and add your membership card to your mobile wallet." +} + +export default function RootLayout({ + children, +}: { + children: React.ReactNode; +}) { + // add CF web analytics script + return ( + <> + + + {children} + + + ); +} diff --git a/src/app/(membership)/join/layout.tsx b/src/app/(membership)/join/layout.tsx new file mode 100644 index 00000000..7710952e --- /dev/null +++ b/src/app/(membership)/join/layout.tsx @@ -0,0 +1,35 @@ +import { Metadata } from "next"; +import { DM_Sans } from 'next/font/google'; + +const dm_sans = DM_Sans({ + subsets: ['latin', 'latin-ext'], + display: 'swap', + variable: '--font-dm-sans', + weight: ['400', '500', '700'], +}); + +export const metadata: Metadata = { + title: "Join ACM @ UIUC", + description: "ACM @ UIUC is a great place to learn more about CS and meet your peers!" +} + +export default function RootLayout({ + children, +}: { + children: React.ReactNode; +}) { + // add CF web analytics script + return ( + <> + + + {children} + + + ); +} diff --git a/src/app/(membership)/join/page.tsx b/src/app/(membership)/join/page.tsx index 317ad15d..fba306b1 100644 --- a/src/app/(membership)/join/page.tsx +++ b/src/app/(membership)/join/page.tsx @@ -1,21 +1,4 @@ 'use client'; -import { useEffect, useState } from 'react'; -import { - Button, - Dropdown, - DropdownItem, - DropdownMenu, - DropdownTrigger, - Modal, - ModalBody, - ModalContent, - ModalFooter, - ModalHeader, - Skeleton, - useDisclosure, -} from '@heroui/react'; -import Link from 'next/link'; -import Transition from '@/components/Transition'; const MembershipOptions = () => { return ( diff --git a/src/app/(membership)/membership/layout.tsx b/src/app/(membership)/membership/layout.tsx new file mode 100644 index 00000000..79c9ee40 --- /dev/null +++ b/src/app/(membership)/membership/layout.tsx @@ -0,0 +1,35 @@ +import { Metadata } from "next"; +import { DM_Sans } from 'next/font/google'; + +const dm_sans = DM_Sans({ + subsets: ['latin', 'latin-ext'], + display: 'swap', + variable: '--font-dm-sans', + weight: ['400', '500', '700'], +}); + +export const metadata: Metadata = { + title: "Become an ACM @ UIUC paid member", + description: "A paid ACM @ UIUC membership provide great benefits at an exceptional value." +} + +export default function RootLayout({ + children, +}: { + children: React.ReactNode; +}) { + // add CF web analytics script + return ( + <> + + + {children} + + + ); +} From d8ffddee707fe4f541fa9c365ad5d20f5b13e2ce Mon Sep 17 00:00:00 2001 From: Dev Singh Date: Thu, 11 Sep 2025 21:47:06 -0500 Subject: [PATCH 3/4] First draft of updating colors --- src/app/(main)/about/page.tsx | 2 +- src/app/(membership)/join/page.tsx | 31 +++++++-- src/app/(resources)/resources/page.tsx | 11 ++-- src/app/not-found.tsx | 2 +- src/components/CalendarControls/index.tsx | 6 +- .../CalendarEventDetail.tsx | 4 +- src/components/Card/EventCard.tsx | 2 +- src/components/Footer/index.tsx | 4 +- src/components/Hero/hero.css | 26 -------- src/components/Hero/horizontal.svg | 16 ----- src/components/Hero/index.tsx | 19 +++--- src/components/Hero/vertical.svg | 16 ----- src/components/Navbar/index.tsx | 4 +- src/components/NewsletterPopup/index.tsx | 2 +- src/config.json | 2 +- tailwind.config.js | 65 +++++++++++++++++-- 16 files changed, 116 insertions(+), 96 deletions(-) delete mode 100644 src/components/Hero/hero.css delete mode 100644 src/components/Hero/horizontal.svg delete mode 100644 src/components/Hero/vertical.svg diff --git a/src/app/(main)/about/page.tsx b/src/app/(main)/about/page.tsx index 0082b424..d3243aca 100644 --- a/src/app/(main)/about/page.tsx +++ b/src/app/(main)/about/page.tsx @@ -8,7 +8,7 @@ import LeadershipSection from '@/sections/about/LeadershipSection'; export default function About() { return ( <> -
+
diff --git a/src/app/(membership)/join/page.tsx b/src/app/(membership)/join/page.tsx index fba306b1..7282234b 100644 --- a/src/app/(membership)/join/page.tsx +++ b/src/app/(membership)/join/page.tsx @@ -3,12 +3,33 @@ const MembershipOptions = () => { return ( <> -
-

+
+

Become a Member of ACM@UIUC

-
+

+ Becoming a paid member unlocks exclusive benefits like our resume book, Latea discount, discounts on events, free printing, and more! + + See the full list in our Paid Member Guide. + +

+ + + +

1. Join Discord

@@ -16,7 +37,7 @@ const MembershipOptions = () => { and updates.

{ exclusive benefits and member-only resources!

{ return ( <> -
+
{/*table of contents*/} @@ -15,19 +16,19 @@ const Resources = () => {
ACM Paid Member Guide CS Cares Feedback @@ -60,7 +61,7 @@ const Resources = () => { here {' '} - to pay for your membership online. Only $20 for a lifetime ACM + to pay for your membership online. Only {config.membershipPrice.replaceAll('.00', '')} for a lifetime ACM membership → $0 per day! You’ll need to pay with a credit or debit card.

diff --git a/src/app/not-found.tsx b/src/app/not-found.tsx index 8aca685c..79c12420 100644 --- a/src/app/not-found.tsx +++ b/src/app/not-found.tsx @@ -112,7 +112,7 @@ const component = function NotFound() { }, [displayedText]); return ( -
+
Today @@ -85,7 +85,7 @@ export default function CalendarControls({ changeDate(-1, currView); }} variant="bordered" - className="border-surface-000 border-1 bg-primary text-white hover:cursor-pointer " + className="border-surface-000 border-1 bg-yale_blue text-white hover:cursor-pointer " > @@ -96,7 +96,7 @@ export default function CalendarControls({ changeDate(1, currView); }} variant="bordered" - className="border-surface-000 border-1 bg-primary text-white hover:cursor-pointer" + className="border-surface-000 border-1 bg-yale_blue text-white hover:cursor-pointer" > diff --git a/src/components/CalendarEventDetail/CalendarEventDetail.tsx b/src/components/CalendarEventDetail/CalendarEventDetail.tsx index 75697337..bd2f4b7e 100644 --- a/src/components/CalendarEventDetail/CalendarEventDetail.tsx +++ b/src/components/CalendarEventDetail/CalendarEventDetail.tsx @@ -58,7 +58,7 @@ function CalendarEventDetail({ : start && `${moment(start).format('h:mm A z')} ${timezoneAbbr}`; return (
-
+
Event Information
@@ -95,7 +95,7 @@ function CalendarEventDetail({

{description}

{paidEventId && ( {paidEventId ? ( - - - - - - - - - - - - - - - diff --git a/src/components/Hero/index.tsx b/src/components/Hero/index.tsx index 46504420..a875c8f7 100644 --- a/src/components/Hero/index.tsx +++ b/src/components/Hero/index.tsx @@ -10,7 +10,6 @@ import { } from 'react-icons/fa'; import EventCard from '@/components/Card/EventCard'; -import './hero.css'; import headerJpg from './header.jpg'; import headerWebp from './header.webp'; @@ -82,10 +81,10 @@ export default function Hero({ upcomingEvents, eventsLoading }: HeroProps) { }; return ( -
+
-
+
ACM@UIUC @@ -101,17 +100,17 @@ export default function Hero({ upcomingEvents, eventsLoading }: HeroProps) { strong network of students and alumni, bringing their diverse interests to ACM.

-
+
- Join Now + Membership -
+
View all events +
+ {eventsLoading ? ( + + ) : ( +
+
+

+ Featured Events +

+ {upcomingEvents.length > 1 && ( +
+ + +
+ )} +
+ + {upcomingEvents.length > 0 ? ( +
+
+ +
+
+ ) : ( +
+
+
+ + No events scheduled +
+
+
+ )} + + {/* Event indicators - only show if more than 1 event */} + {upcomingEvents.length > 1 && ( +
+ {upcomingEvents.map((_, index) => ( +
+ )} + + {/* Upcoming Events List */} + {upcomingEventsFiltered.length > 0 && ( +
+
+
+ {upcomingEventsFiltered.map(event => ( +
+ +
+ ))} +
+
+
+ )} + + {/* Calendar Action Buttons */} +
+ + + View All + + +
+
+ )}
+ + {/* Modal remains the same */} - {(onClose) => ( + {onClose => ( <> Subscribe to ACM@UIUC's Events Calendar @@ -202,8 +397,7 @@ export default function Hero({ upcomingEvents, eventsLoading }: HeroProps) { : 'Select an option'} - setCalPlatform(key as any)}> - {/* Dropdown Items */} + setCalPlatform(key as any)}> Google Calendar Other @@ -234,6 +428,38 @@ export default function Hero({ upcomingEvents, eventsLoading }: HeroProps) { )} + +
); } diff --git a/src/components/Navbar/index.tsx b/src/components/Navbar/index.tsx index 94b7e3fa..1ef2a861 100644 --- a/src/components/Navbar/index.tsx +++ b/src/components/Navbar/index.tsx @@ -34,7 +34,7 @@ export default function Navbar() {
{!prod ? : null} -
+
*/}
  • - Merch + Store
  • diff --git a/src/components/NewsletterPopup/index.tsx b/src/components/NewsletterPopup/index.tsx index 1060147d..1fc31fe1 100644 --- a/src/components/NewsletterPopup/index.tsx +++ b/src/components/NewsletterPopup/index.tsx @@ -1,6 +1,7 @@ 'use client'; import { useEffect, useState } from 'react'; import { FaRegTimesCircle } from 'react-icons/fa'; +import config from "@/config.json" import styles from './index.module.css'; @@ -43,7 +44,7 @@ export default function NewsletterPopup() {

    diff --git a/src/config.json b/src/config.json index c45a1360..8a0ac7d4 100644 --- a/src/config.json +++ b/src/config.json @@ -5,5 +5,11 @@ "google": "https://calendar.google.com/calendar/r?cid=http%3A%2F%2Fical.acm.illinois.edu%2FACM", "ical": "webcal://ical.acm.illinois.edu/ACM" } - } + }, + "paidMemberGuide": "https://go.acm.illinois.edu/paid-member-guide", + "discordInvite": "https://go.acm.illinois.edu/discord", + "instagramPage": "https://instagram.com/acm.uiuc", + "mailingListSignup": "https://listmonk.acm.illinois.edu/subscription/form", + "donateUrl": "https://go.acm.illinois.edu/donate", + "numMembers": 600 } \ No newline at end of file diff --git a/src/styles/global.css b/src/styles/global.css index bda96df4..c9e66f84 100644 --- a/src/styles/global.css +++ b/src/styles/global.css @@ -5,16 +5,24 @@ @keyframes rainbowBackground { 0% { background-color: #5386e4; - } /* ACM Muted Primary Color */ + } + + /* ACM Muted Primary Color */ 33% { background-color: #00635d; - } /* ACM Additional Color 1 */ + } + + /* ACM Additional Color 1 */ 66% { background-color: #260c1a; - } /* ACM Additional Color 2 */ + } + + /* ACM Additional Color 2 */ 100% { background-color: #0053b3; - } /* ACM Primary Color */ + } + + /* ACM Primary Color */ } .rainbow-background { @@ -28,15 +36,22 @@ } :root { - --rgb-acmdark: 62 72 111; /* #3E486F */ - --rgb-primary: 69 119 248; /* #4577F8 */ - --rgb-secondary: 56 98 201; /* #3862C9 */ - --rgb-surface-000: 255 255 255; /* #FFFFFF */ - --rgb-surface-050: 250 250 250; /* #FAFAFA */ - --rgb-surface-100: 239 239 239; /* #EFEFEF */ - --rgb-surface-150: 224 224 224; /* #E0E0E0 */ - --rgb-surface-200: 189 189 189; /* #BDBDBD */ - --rgb-surface-250: 158 158 158; /* #9E9E9E */ + --rgb-primary: 0 57 122; + /* #4577F8 */ + --rgb-secondary: 56 98 201; + /* #3862C9 */ + --rgb-surface-000: 255 255 255; + /* #FFFFFF */ + --rgb-surface-050: 250 250 250; + /* #FAFAFA */ + --rgb-surface-100: 239 239 239; + /* #EFEFEF */ + --rgb-surface-150: 224 224 224; + /* #E0E0E0 */ + --rgb-surface-200: 189 189 189; + /* #BDBDBD */ + --rgb-surface-250: 158 158 158; + /* #9E9E9E */ --font-size-body: 1.125rem; --font-size-bodylarge: 1.25rem; @@ -62,25 +77,32 @@ body { h1 { font-size: var(--font-size-h1); } + h2 { font-size: var(--font-size-h2); } + h3 { font-size: var(--font-size-h3); } + h4 { font-size: var(--font-size-h4); } + h5 { font-size: var(--font-size-h5); } + h6 { font-size: var(--font-size-h6); } + h1, h2 { - color: rgb(var(--rgb-acmdark)); + color: rgb(var(--rgb-primary)); } + h1, h2, h3, @@ -92,4 +114,4 @@ h6 { .no-scroll { overflow-y: hidden; -} +} \ No newline at end of file diff --git a/tailwind.config.js b/tailwind.config.js index dcd7d405..981e7aa1 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -15,7 +15,6 @@ module.exports = { }, extend: { colors: { - acmdark: 'rgb(var(--rgb-acmdark) / )', surface: { '000': 'rgb(var(--rgb-surface-000) / )', '050': 'rgb(var(--rgb-surface-050) / )',