Merge pull request #33 from ZeroDay-Alliance-SNU/fix

Fix Events and others

.github/workflows/cf-pages.yaml

@@ -1,6 +1,10 @@
 name: Cloudflare Pages Deployment
 
-on: [push, pull_request]
+on:
+  push:
+    branches:
+      - main
+  pull_request:
 
 jobs:
   cf:

src/components/About/About.jsx

@@ -1,24 +1,28 @@
 import { Text, Title, Button, Image } from "@mantine/core";
 import image from "/src/assets/aboutpic.jpeg";
 import classes from "./About.module.css";
+import { Link } from "react-router-dom";
 
 const About = () => {
   return (
     <div id="about" className={classes.wrapper}>
       <div className={classes.body}>
-        <Title className={classes.title}>About Us</Title>
-        <Text fz="md" c="dimmed">
+        <Title className={classes.title} order={1}>
+          About Us
+        </Title>
+        <Text fz="lg">
           Welcome to ZeroDay Alliance, where SNU students passionate about
           cybersecurity and ethical hacking come together to learn about the
           latest security trends and zero-day vulnerabilities, collaborate on
           projects and challenges, share resources and tools, discuss news and
           strategies, and network with future professionals in the field.
         </Text>
-
         <div className={classes.controls}>
-          <Button className={classes.control1} size="lg">
-            Join The Community
-          </Button>
+          <Link to="/teams">
+            <Button className={classes.control1} size="md">
+              Meet Our Teams
+            </Button>
+          </Link>
         </div>
       </div>
       <Image src={image} className={classes.image} />

src/components/Commands/Cat.jsx

@@ -38,21 +38,18 @@ const Cat = (props) => {
     case "events":
       return (
         <ul className={classes.catList}>
-          <li>Event 1</li>
-          <li>Event 2</li>
+          <li>Cyber Security Technology</li>
+          <li>Coming Soon...</li>
         </ul>
       );
     case "teams":
       return (
         <ul className={classes.catList}>
-          <li>Team 1</li>
-          <li>Team 2</li>
-          <li>Team 3</li>
-          <li>Team 4</li>
+          <li>Coming Soon...</li>
         </ul>
       );
     case "faq":
-      return <div>FAQ</div>;
+      return <div>Coming Soon...</div>;
     case "contact":
       return (
         <ul className={classes.catList}>

src/components/Events/Events.jsx

@@ -1,124 +1,81 @@
-import { IconBrandLinkedin, IconBrandGithub } from "@tabler/icons-react";
-import { Title } from "@mantine/core";
+import { IconBrandLinkedin, IconBrandInstagram } from "@tabler/icons-react";
 import {
+  Container,
+  Title,
+  SimpleGrid,
   Card,
+  AspectRatio,
   Image,
   Text,
-  ActionIcon,
   Group,
-  Center,
-  Avatar,
+  ActionIcon,
   rem,
-  Button,
 } from "@mantine/core";
 import classes from "./Events.module.css";
 
-const eventData = [
-  {
-    name: "upcoming",
-    time: "NA",
-    meetingLink: "#",
-    mode: "NA",
-    speakerName: "NA",
-  },
-  {
-    name: "To be announced",
-    time: "NA",
-    meetingLink: "NA",
-    mode: "Offline",
-    speakerName: "NA",
-  },
-  {
-    name: "To be announced",
-    time: "NA",
-    meetingLink: "NA",
-    mode: "Online",
-    speakerName: "NA",
-  },
-];
+import { upcomingEvents } from "../../config/events";
 
 const Events = () => {
-  const linkProps = {
-    href: "https://mantine.dev",
-    target: "_blank",
-    rel: "noopener noreferrer",
-  };
-
   return (
-    <div id="events">
-      <Title ta="center" className={classes.title1}>
+    <Container id="events" py="xl" className={classes.container}>
+      <Title className={classes.heading} order={1}>
         Upcoming Events
       </Title>
-      <Group className={classes.cardsContainer}>
-        {eventData.map((event, index) => (
-          <Card key={index} withBorder radius="md" className={classes.card}>
-            <Card.Section>
-              <a {...linkProps}>
-                <Image
-                  src="https://media1.tenor.com/m/-4_cFnz_D3YAAAAC/btc-mechanics-ordinals.gif"
-                  height={200}
-                  fit="cover"
-                />
-              </a>
-            </Card.Section>
-
-            <Text
-              className={classes.title}
-              fw={500}
-              component="a"
-              {...linkProps}
-            >
-              {event.name}
-            </Text>
-
-            <Group justify="space-between" className={classes.footer}>
-              <Center>
-                <Avatar src="" size={34} radius="xl" mr="xs" />
-                <Text fz="sm" inline>
-                  {event.speakerName}
-                </Text>
-              </Center>
-
-              <Group gap={8} mr={0}>
+      <SimpleGrid cols={{ base: 1, sm: 2 }}>
+        {upcomingEvents.map((event, index) => {
+          return (
+            <Card key={index} p="md" radius="md" className={classes.card}>
+              <AspectRatio ratio="auto">
+                <Image width={100} src={event.banner} />
+              </AspectRatio>
+              <Text size="xl" fw={700} className={classes.title} mt={5}>
+                {event.name}
+              </Text>
+              <Text c="dimmed" fw={700}>
+                📅 {event.date}
+              </Text>
+              <Text c="dimmed" fw={700}>
+                ⏲ {event.time}
+              </Text>
+              <Text c="dimmed" size="sm" fw={700}>
+                📳 {event.mode}
+              </Text>
+              <Text c="dimmed" fw={700}>
+                📍 {event.location}
+              </Text>
+              <Group mt={10}>
                 <ActionIcon
-                  className={classes.action}
-                  style={{ backgroundColor: "black" }}
+                  size="lg"
+                  variant="default"
+                  radius="xl"
+                  component="a"
+                  target="_blank"
+                  href={event.linkedin}
                 >
                   <IconBrandLinkedin
-                    style={{ width: rem(16), height: rem(16), color: "white" }}
+                    style={{ width: rem(18), height: rem(18) }}
+                    stroke={1.5}
                   />
                 </ActionIcon>
                 <ActionIcon
-                  className={classes.action}
-                  style={{ backgroundColor: "black" }}
+                  size="lg"
+                  variant="default"
+                  radius="xl"
+                  component="a"
+                  target="_blank"
+                  href={event.instagram}
                 >
-                  <IconBrandGithub
-                    style={{ width: rem(16), height: rem(16), color: "white" }}
+                  <IconBrandInstagram
+                    style={{ width: rem(18), height: rem(18) }}
+                    stroke={1.5}
                   />
                 </ActionIcon>
               </Group>
-            </Group>
-
-            <Text fz="sm" c="dimmed" lineClamp={4}>
-              Date: {event.time}
-            </Text>
-            <Text fz="sm" c="dimmed" lineClamp={4}>
-              Mode: {event.mode}
-            </Text>
-            <Button
-              component="a"
-              href={event.meetingLink}
-              target="_blank"
-              rel="noopener noreferrer"
-              variant="outline"
-              style={{ width: "100%" }}
-            >
-              Join
-            </Button>
-          </Card>
-        ))}
-      </Group>
-    </div>
+            </Card>
+          );
+        })}
+      </SimpleGrid>
+    </Container>
   );
 };
 

src/components/Events/Events.module.css

@@ -1,54 +1,27 @@
-.cardsContainer {
+.container {
   background: linear-gradient(90deg, #272626 22%, #25424a 68%, #37616c 84%);
-  display: flex;
-  flex-wrap: wrap;
-  gap: var(--mantine-spacing-md);
-  padding: calc(var(--mantine-spacing-xl) * 2);
+  min-width: 100vw;
+  margin: 0;
+  padding: rem(15px) calc(var(--mantine-spacing-xl) * 3) rem(100px)
+    calc(var(--mantine-spacing-xl) * 3);
 }
 
-.card {
-  flex: 1 1 calc(33.3333% - var(--mantine-spacing-md));
-  background-color: var(--mantine-color-body);
-
-}
-
-.rating {
-  position: absolute;
-  top: var(--mantine-spacing-xs);
-  right: rem(12px);
-  pointer-events: none;
-}
-
-.title {
-  display: block;
-  margin-top: var(--mantine-spacing-md);
-  margin-bottom: rem(5px);
-}
-
-.action {
-  background-color: var(--mantine-color-gray-0);
+.heading {
+  text-align: center;
+  padding: var(--mantine-spacing-xl) 0;
 }
 
-.action:hover {
-  background-color: var(--mantine-color-gray-1);
-}
-
-.footer {
-  margin-top: var(--mantine-spacing-md);
-}
+.card {
+  transition:
+    transform 150ms ease,
+    box-shadow 150ms ease;
 
-/* Media queries for responsive design */
-@media (max-width: 768px) {
-  .card {
-    flex: 1 1 100%;
+  &:hover {
+    box-shadow: var(--mantine-shadow-md);
   }
 }
-.title1 {
-  background: linear-gradient(90deg, #272626 22%, #25424a 68%, #37616c 84%);
-  color: var(--mantine-color-white);
-  font-size: 52px;
-  font-family:
-    Greycliff CF,
-    var(--mantine-font-family);
 
-}
+.title {
+  font-family: "Greycliff CF", var(--mantine-font-family);
+  font-weight: bold;
+}