acm-uiuc · devksingh4 · Sep 12, 2025 · Sep 12, 2025 · Sep 12, 2025 · Sep 12, 2025
@@ -2,4 +2,4 @@ NEXT_PUBLIC_RUN_ENV=dev
 NEXT_PUBLIC_TICKETING_BASE_URL='https://xclhkh0duc.execute-api.us-east-1.amazonaws.com/default'
 NEXT_PUBLIC_MEMBERSHIP_BASE_URL='https://infra-membership-api.aws.qa.acmuiuc.org'
 NEXT_PUBLIC_MERCH_API_BASE_URL='https://merchapi.acm.illinois.edu'
-NEXT_PUBLIC_EVENTS_API_BASE_URL='https://core.aws.qa.acmuiuc.org'
+NEXT_PUBLIC_EVENTS_API_BASE_URL='https://core.acm.illinois.edu'
@@ -8,7 +8,7 @@ import LeadershipSection from '@/sections/about/LeadershipSection';
 export default function About() {
   return (
     <>
-      <div className="h-5 bg-acmdark flex" />
+      <div className="h-5 bg-primary-300 flex" />
       <Transition bgClass="bg-surface-000" />
       <div className="flex flex-col gap-8 bg-surface-000 pt-6 pb-24">
         <section id="about" className="container flex flex-col gap-4">

@@ -3,15 +3,14 @@
 import Script from 'next/script';
 import Hero from '@/components/Hero';
 import NewsletterPopup from '@/components/NewsletterPopup';
-import Sponsors from '@/components/Sponsors';
 import Transition from '@/components/Transition';
 import Sigscard from '@/sections/home/Sigscard';
 import { useEffect, useState } from 'react';
 import { IEvent } from '@/components/Events/events';
-import moment from 'moment';
-import { getEventsAfter } from '@/utils/dateutils';
 import { AllSigData } from '@/utils/organizations';
 import { fetchUpcomingEvents } from '@/utils/api';
+import moment from 'moment';
+import { getEventsAfter } from '@/utils/dateutils';
 
 export default function Home() {
   const [upcomingEvents, setUpcomingEvents] = useState<IEvent[]>([]);

@@ -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 (
+    <>
+      <html lang="en" className={dm_sans.variable}>
+        <script
+          defer
+          async
+          src="https://static.cloudflareinsights.com/beacon.min.js"
+          data-cf-beacon='{"token": "09fe6ae0a5fd498bac829b586599e1d8"}'
+        ></script>
+        <body>{children}</body>
+      </html>
+    </>
+  );
+}
@@ -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 (
+    <>
+      <html lang="en" className={dm_sans.variable}>
+        <script
+          defer
+          async
+          src="https://static.cloudflareinsights.com/beacon.min.js"
+          data-cf-beacon='{"token": "09fe6ae0a5fd498bac829b586599e1d8"}'
+        ></script>
+        <body>{children}</body>
+      </html>
+    </>
+  );
+}
@@ -1,40 +1,47 @@
 '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';
+
+import { buttonStyles } from "@/components/Hero";
+import config from "@/config.json"
 
 const MembershipOptions = () => {
   return (
     <>
-      <div className="bg-acmdark min-h-screen flex flex-col items-center justify-center">
-        <h1 className="text-white text-4xl font-bold mb-8 text-center">
+      <div className="bg-primary-300 min-h-screen flex flex-col items-center justify-center py-12 px-4 sm:px-6">
+        <h1 className="text-white text-4xl font-bold mb-4 text-center">
           Become a Member of ACM@UIUC
         </h1>
 
-        <div className="max-w-6xl w-full flex flex-col p-6 md:flex-row gap-8 justify-center">
+        <p className="text-gray-300 text-center max-w-3xl mx-auto">
+          Becoming a paid member unlocks exclusive benefits like our resume book, Latea discount, discounts on events, free printing, and more!
+          <a
+            href={config.paidMemberGuide}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="font-semibold text-white underline hover:text-secondary transition-colors ml-1"
+          >
+            See the full list in our Paid Member Guide.
+          </a>
+        </p>
+
+        <div className="max-md:my-8 lg:my-10 w-full max-w-6xl text-center">
+          <a
+            href="/check-membership"
+            className={`block w-full sm:w-fit mx-auto px-16 py-3 text-white text-center text-xl rounded-full ${buttonStyles} transition-all`}
+          >
+            Already a member? Get your verification pass here!
+          </a>
+        </div>
+
+        <div className="max-w-6xl w-full flex flex-col md:flex-row gap-8 justify-center">
           <div className="flex-1 bg-white rounded-lg shadow-md p-6 flex flex-col items-center text-center justify-center min-h-[300px]">
             <h2 className="text-2xl font-semibold mb-4">1. Join Discord</h2>
             <p className="mb-6">
               Connect with our community on Discord for real‑time discussions
               and updates.
             </p>
             <a
-              className="flex flex-col w-full sm:w-fit px-16 py-3 items-center text-white text-center text-xl rounded-full bg-primary hover:bg-secondary transition-all"
-              href="https://discord.gg/w8kX7YgD3F"
+              className="flex flex-col w-full sm:w-fit px-16 py-3 items-center text-white text-center text-xl rounded-full bg-atomic_tangerine-400 hover:bg-atomic_tangerine-600 transition-all"
+              href={config.discordInvite}
               target="_blank"
               rel="noopener noreferrer"
             >
@@ -51,7 +58,7 @@ const MembershipOptions = () => {
               exclusive benefits and member-only resources!
             </p>
             <a
-              className="flex flex-col w-full sm:w-fit px-16 py-3 items-center text-white text-center text-xl rounded-full bg-primary hover:bg-secondary transition-all"
+              className="flex flex-col w-full sm:w-fit px-16 py-3 items-center text-white text-center text-xl rounded-full bg-atomic_tangerine-400 hover:bg-atomic_tangerine-600 transition-all"
               href="/membership"
               target="_blank"
               rel="noopener noreferrer"

@@ -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 (
+    <>
+      <html lang="en" className={dm_sans.variable}>
+        <script
+          defer
+          async
+          src="https://static.cloudflareinsights.com/beacon.min.js"
+          data-cf-beacon='{"token": "09fe6ae0a5fd498bac829b586599e1d8"}'
+        ></script>
+        <body>{children}</body>
+      </html>
+    </>
+  );
+}
@@ -1,11 +1,12 @@
 import Link from 'next/link';
 import ExtLink from '@/components/Link';
 import Transition from '@/components/Transition';
+import config from '@/config.json'
 
 const Resources = () => {
   return (
     <>
-      <div className="h-5 bg-acmdark flex" />
+      <div className="h-5 bg-primary-300 flex" />
       <Transition bgClass="bg-surface-000" />
       <div className="flex flex-col md:flex-row bg-surface-000 pt-6 pb-24">
         {/*table of contents*/}
@@ -15,19 +16,19 @@ const Resources = () => {
             <div className="space-y-4">
               <Link
                 href="#acm-paid-member-guide"
-                className="block p-4 bg-acmdark hover:bg-secondary text-white rounded-lg shadow-md"
+                className="block p-4 bg-primary-300 hover:bg-secondary text-white rounded-lg shadow-md"
               >
                 ACM Paid Member Guide
               </Link>
               <Link
                 href="#cs-cares"
-                className="block p-4 bg-acmdark hover:bg-secondary text-white rounded-lg shadow-md"
+                className="block p-4 bg-primary-300 hover:bg-secondary text-white rounded-lg shadow-md"
               >
                 CS Cares
               </Link>
               <Link
                 href="#feedback"
-                className="block p-4 bg-acmdark hover:bg-secondary text-white rounded-lg shadow-md"
+                className="block p-4 bg-primary-300 hover:bg-secondary text-white rounded-lg shadow-md"
               >
                 Feedback
               </Link>
@@ -60,7 +61,7 @@ const Resources = () => {
               <ExtLink href="https://www.acm.illinois.edu/membership">
                 here
               </ExtLink>{' '}
-              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 &rarr; $0 per day! You’ll need to pay with a credit or
               debit card.
             </p>
@@ -130,8 +131,8 @@ const Resources = () => {
             <p>
               CS CARES is a confidential resource for students to discuss
               concerns about potential Code of Conduct violations; feel free to
-              ask them for guidance or support in addressing any academic
-              integrity issues inside and outside of ACM.{' '}
+              ask them for guidance or support in addressing any issues inside
+              and/or outside of ACM.{' '}
               <ExtLink href="https://siebelschool.illinois.edu/about/cs-cares">
                 https://siebelschool.illinois.edu/about/cs-cares
               </ExtLink>

@@ -112,7 +112,7 @@ const component = function NotFound() {
   }, [displayedText]);
 
   return (
-    <div className="min-h-screen flex flex-col items-center justify-center bg-acmdark text-white p-6 w-full">
+    <div className="min-h-screen flex flex-col items-center justify-center bg-primary-300 text-white p-6 w-full">
       <header className="flex flex-col items-center mb-6">
         <Link href="https://acm.illinois.edu/">
           <Image

@@ -74,7 +74,7 @@ export default function CalendarControls({
               resetDate();
             }}
             variant="bordered"
-            className="border-surface-000 border-1 bg-primary text-white hover:cursor-pointer hidden md:block"
+            className="border-surface-000 border-1 bg-yale_blue text-white hover:cursor-pointer hidden md:block"
           >
             Today
           </Button>
@@ -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 "
             >
               <FaArrowLeft />
             </Button>
@@ -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"
             >
               <FaArrowRight />
             </Button>

@@ -57,8 +57,8 @@ function CalendarEventDetail({
         ? `${moment(start).format('h:mm A')} - ${moment(end).format('h:mm A z')} ${timezoneAbbr}`
         : start && `${moment(start).format('h:mm A z')} ${timezoneAbbr}`;
     return (
-      <div className="flex flex-col flex-grow bg-surface-000 break-words border-2 border-acmdark border-opacity-10 mt-2 border-t-transparent border rounded-2xl">
-        <div className="text-xl w-full text-surface-000 text-center bg-acmdark rounded-t-2xl pb-2 pt-2 font-semibold">
+      <div className="flex flex-col flex-grow bg-surface-000 break-words border-2 border-primary border-opacity-10 mt-2 border-t-transparent border rounded-2xl">
+        <div className="text-xl w-full text-surface-000 text-center bg-primary-300 rounded-t-2xl pb-2 pt-2 font-semibold">
           Event Information
         </div>
         <div className="p-5">
@@ -95,7 +95,7 @@ function CalendarEventDetail({
           <p>{description}</p>
           {paidEventId && (
             <a
-              className="inline-flex flex-row grow-0 items-center gap-2 px-4 py-2 text-white rounded-md bg-primary hover:bg-secondary transition-all"
+              className="inline-flex flex-row grow-0 items-center gap-2 px-4 py-2 text-white rounded-md bg-yale_blue hover:bg-secondary transition-all"
               href={paidEventHref}
               target="_blank"
               rel="noopener noreferrer"