Add SIGS page (#305)

Co-authored-by: No767 <[email protected]>
Co-authored-by: Trek <[email protected]>

react/ucmacm-website/package.json

@@ -35,7 +35,7 @@
     "prettier": "3.2.5",
     "tailwindcss": "^3.4.1",
     "typescript": "5.3.3",
-    "vite": "^5.1.4"
+    "vite": "^5.1.1"
   },
   "packageManager": "[email protected]"
 }

react/ucmacm-website/src/components/SectionTitle.tsx

@@ -0,0 +1,13 @@
+export const SectionTitle = ({ title }: { title: string }) => {
+  return (
+    <div className="grid place-items-center pb-5">
+        <div>
+            <h1 className="text-4xl font-hind tracking-wider font-semibold text-tertiary">
+                {title}
+            </h1>
+            <div className="h-2.5 w-full rounded-xl bg-secondary"/>
+        </div>
+    </div>
+  )
+}
+

react/ucmacm-website/src/components/SigTopic.tsx

@@ -0,0 +1,60 @@
+import { SectionTitle } from './SectionTitle'
+import {
+    Table,
+    TableHeader,
+    TableBody,
+    TableColumn,
+    TableRow,
+    TableCell
+  } from "@nextui-org/react";
+
+interface Event {
+    title: string,
+    date: string,
+    time: string,
+    description: string,
+    location: string
+}
+
+interface SigTopicProps {
+    title: string,
+    description: string,
+    events: Event[]
+}
+
+const SigTopic = ({ title, description, events}: SigTopicProps) => {
+  return (
+    <>
+        <SectionTitle title={title} />
+        <p className="">
+            {description}
+        </p>
+        <h3 className="text-tertiary font-bold mt-8">UPCOMING EVENTS:</h3>
+        <div className="mx-4 my-8">
+            <Table 
+                aria-label="SIG Event list" 
+                fullWidth={false}
+            >
+                <TableHeader>
+                    <TableColumn>Date & Time</TableColumn>
+                    <TableColumn>Event</TableColumn>
+                    <TableColumn>Location</TableColumn>
+                </TableHeader>
+                <TableBody>
+                    {
+                        events.map((event) => (
+                        <TableRow key={event.title}>
+                            <TableCell>{event.date} - {event.time}</TableCell>
+                            <TableCell>{event.title}</TableCell>
+                            <TableCell>{event.location}</TableCell>
+                        </TableRow>
+                        ))
+                    }
+                </TableBody>
+            </Table>
+        </div>
+    </>
+  )
+}
+
+export default SigTopic

react/ucmacm-website/src/index.css

@@ -1,3 +1,7 @@
+/* Temporary fonts based on old website */
+@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Montserrat&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Hind:wght@400;500;700&display=swap');
+
 @tailwind base;
 @tailwind components;
 @tailwind utilities;

react/ucmacm-website/src/pages/Sigs.tsx

@@ -0,0 +1,78 @@
+import GlobalFooter from "../components/GlobalFooter";
+import GlobalNavbar from "../components/GlobalNavbar";
+import SigTopic from "../components/SigTopic";
+
+const placeholderEvents = [
+  {
+    title: "Introduction to React",
+    date: "2021-10-01",
+    time: "5:00 PM",
+    description:
+      "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Platea maecenas consequat congue elit lectus tristique eget sapien a. Tortor ullamcorper nibh sed orci eget vel faucibus non. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Platea maecenas consequat congue elit lectus tristique eget sapien a. Tortor ullamcorper nibh sed orci eget vel non.",
+    location: "COB 267"
+  },
+  {
+    title: "Introduction to SQL",
+    date: "2021-10-01",
+    time: "6:45 PM",
+    description:
+      "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Platea maecenas consequat congue elit lectus tristique eget sapien a. Tortor ullamcorper nibh sed orci eget vel faucibus non. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Platea maecenas consequat congue elit lectus tristique eget sapien a. Tortor ullamcorper nibh sed orci eget vel non.",
+    location: "KL 128"
+  },
+  {
+    title: "Introduction to NextUI",
+    date: "2021-10-01",
+    time: "7:00 PM",
+    description:
+      "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Platea maecenas consequat congue elit lectus tristique eget sapien a. Tortor ullamcorper nibh sed orci eget vel faucibus non. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Platea maecenas consequat congue elit lectus tristique eget sapien a. Tortor ullamcorper nibh sed orci eget vel non.",
+    location: "SE 100"
+  }
+]
+
+const Sigs = () => {
+  return (
+    <>
+      <GlobalNavbar />
+      <div className="sigs">
+        <section className="h-full pt-36 lg:pb-24 bg-landing-secondary">
+          <div className="flex flex-col content-end">
+            <h1 className="text-[72px] text-center font-normal tracking-wider text-tertiary font-bebas">Special Interest Groups</h1>
+            <p className="px-80 text-white font-montserrat tracking-wider text-left text-[21px] leading-10">
+              ACM&apos;s Special Interest Groups (SIGs) represent major areas of
+              computing, addressing the interests of technical communities that
+              drive innovation. SIGs offer a wealth of conferences, publications
+              and activities focused on specific computing sub-disciplines. They
+              enable members to share expertise, discovery and best practices.
+            </p>
+          </div>
+        </section>
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 1440 320"
+          className="home__wave"
+        >
+          <path
+            fill="#00e1bfcc"
+            fillOpacity="1"
+            d="M0,256L80,224C160,192,320,128,480,122.7C640,117,800,171,960,192C1120,213,1280,203,1360,197.3L1440,192L1440,0L1360,0C1280,0,1120,0,960,0C800,0,640,0,480,0C320,0,160,0,80,0L0,0Z"
+          ></path>
+        </svg>
+        <section>
+          <ul className="mx-28 font-montseratt tracking-wider text-[20px]">
+            <li className="mx-60">
+              <SigTopic
+                title="Software Engineering (SWE)"
+                description="The ACM Special Interest Group on Software Engineering seeks to improve our ability to engineer software by stimulating interaction among practitioners, researchers, and educators; by fostering the professional development of software engineers; and by representing software engineers to professional, legal, and political entities."
+                events={placeholderEvents}
+              />
+            </li>
+          </ul>
+        </section>
+      </div>
+      <GlobalFooter />
+    </>
+
+  );
+};
+
+export default Sigs;

react/ucmacm-website/src/pages/front.tsx

@@ -1,24 +1,29 @@
 import GlobalNavbar from "../components/GlobalNavbar";
 import GlobalFooter from "../components/GlobalFooter";
-import WaveHeader from "../components/WaveHeader";
 import AboutUsImage from "../assets/images/about-us.png";
-import SocialResponsibility from "../assets/images/social-responsibility.png";
-import ProjectManagement from "../assets/images/project-management.png";
-import OnlineCourses from "../assets/images/online-course.png";
-import Communities from "../assets/images/communities.png";
-
 import "../index.css";
 function Front() {
   return (
     <>
       <GlobalNavbar />
-      <WaveHeader />
+      <div className="bg-landing opacity-80 py-8 w-full max-h-max top-16 gap-16 flex-col flex">
+        <p>hi</p>
+      </div>
+      <div className="z-0 gap-16 flex">
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320">
+          <path
+            fill="#00e1bf"
+            fillOpacity="0.8"
+            d="M0,256L80,224C160,192,320,128,480,122.7C640,117,800,171,960,192C1120,213,1280,203,1360,197.3L1440,192L1440,0L1360,0C1280,0,1120,0,960,0C800,0,640,0,480,0C320,0,160,0,80,0L0,0Z"
+          ></path>
+        </svg>
+      </div>
 
       <section className="mx-24">
         <h1 className="font-bold text-center text-4xl text-tertiary pb-16">
           About Us
         </h1>
-        <div className="columns-2 items-center">
+        <div className="columns-2 gap-x-24">
           <div className="container-2xl">
             <p className="text-tertiary text-xl">
               Association for Computing Machinery (ACM) is the biggest computing
@@ -46,59 +51,21 @@ function Front() {
         <h1 className="font-bold text-center text-4xl text-tertiary pt-16 pb-16">
           Goals
         </h1>
+        <div className="columns-2 grid-rows-2 gap-x-24">
+          <div className="container-2xl">
+            <div>
+              <p className="text-tertiary text-xl">yes</p>
+            </div>
+            <div>
+              <p className="text-tertiary text-xl">yes</p>
+            </div>
 
-        {/*TEST THIS AGAINST MOBILE UI - Noelle*/}
-        <div className="grid-rows-2 grid-cols-2 md:columns-1 gap-y-8 justify-center flex flex-row gap-x-24 text-tertiary">
-          <div className="flex flex-col items-center text-center text-wrap max-w-md">
-            <img
-              className="py-2"
-              src={ProjectManagement}
-              width="100"
-              height="100"
-            />
-            <p className="font-semibold text-xl pb-4">Technical Excellence</p>
-            <p className="text-md">
-              Preparing the club and its members for work in the industry, at
-              the highest quality of efficiency and scalability.
-            </p>
-          </div>
-          <div className="flex flex-col items-center text-center text-wrap max-w-md">
-            <img
-              className="py-2"
-              src={OnlineCourses}
-              width="100"
-              height="100"
-            />
-            <p className="font-semibold text-xl pb-4">
-              Educational Transparency
-            </p>
-            <p className="text-md">
-              Allowing ease of access for all academic topics related to
-              computer science and in our course materials.
-            </p>
-          </div>
-          <div className="flex flex-col items-center text-center text-wrap max-w-md">
-            <img className="py-2" src={Communities} width="100" height="100" />
-            <p className="font-semibold text-xl pb-4">Community</p>
-            <p className="text-md">
-              Providing a welcoming environment for computer scientists from all
-              areas of technical knowledge and tying that back to a sense of
-              campus culture.
-            </p>
-          </div>
-          <div className="flex flex-col items-center text-center text-wrap max-w-md">
-            <img
-              className="py-2"
-              src={SocialResponsibility}
-              width="100"
-              height="100"
-            />
-            <p className="font-semibold text-xl pb-4">Social Responsibility</p>
-            <p className="text-md">
-              Ensuring that our members are involved in social and corporate
-              environments that uphold high standards of ethical and moral
-              responsibility.
-            </p>
+            <div>
+              <p className="text-tertiary text-xl">yes</p>
+            </div>
+            <div>
+              <p className="text-tertiary text-xl">yes</p>
+            </div>
           </div>
         </div>
       </section>

react/ucmacm-website/tailwind.config.js

@@ -7,28 +7,28 @@ export default {
     "./node_modules/@nextui-org/theme/dist/**/*.{js,ts,jsx,tsx}",
   ],
   theme: {
-    colors: {
-      // These are all light mode
-      primary: "#0FD5BA",
-      secondary: "#3DA9FC",
-      tertiary: "#084778",
-      text: "#084778",
-      "primary-background": "#f5f5f5",
-      landing: "#00e1bf",
-    },
     fontFamily: {
       hind: ["Hind", "sans-serif"],
+      montserrat: ["Montserrat", "sans-serif"],
+      bebas: ["Bebas Neue", "sans-serif"],
     },
     extend: {
+      colors: {
+        // These are all light mode
+        primary: "#0FD5BA",
+        secondary: "#3DA9FC",
+        tertiary: "#084778",
+        text: "#084778",
+        "primary-background": "#f5f5f5",
+        landing: "#00e1bf",
+        "landing-secondary": "#00e1bfcc",
+      },
       minHeight: {
         40: "40%",
       },
       spacing: {
         neg4: "-4%",
       },
-      colors: {
-        landing: "#00e1bf",
-      },
     },
   },
   darkMode: "class",

react/ucmacm-website/tsconfig.json

@@ -17,8 +17,8 @@
     "noUnusedLocals": true,
     "noUnusedParameters": true,
     "noFallthroughCasesInSwitch": true,
-    "strictNullChecks": true
+    "strictNullChecks": true,
   },
   "include": ["src"],
-  "references": [{ "path": "./tsconfig.node.json" }]
+  "references": [{ "path": "./tsconfig.node.json" }],
 }