Skip to content

Commit ba03dd8

Browse files
itskdhereitskdhere
authored
Merge pull request #33 from ZeroDay-Alliance-SNU/fix
Fix Events and others
2 parents 82bbe62 + 1e97b22 commit ba03dd8

File tree

17 files changed

+182
-195
lines changed

17 files changed

+182
-195
lines changed

‎.github/workflows/cf-pages.yaml

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,10 @@
11
name: Cloudflare Pages Deployment
22

3-
on: [push, pull_request]
3+
on:
4+
push:
5+
branches:
6+
- main
7+
pull_request:
48

59
jobs:
610
cf:

‎public/events/e1.jpg

88 KB
Loading

‎public/events/e2.jpg

73.5 KB
Loading

‎src/components/About/About.jsx

Lines changed: 10 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,28 @@
11
import { Text, Title, Button, Image } from "@mantine/core";
22
import image from "/src/assets/aboutpic.jpeg";
33
import classes from "./About.module.css";
4+
import { Link } from "react-router-dom";
45

56
const About = () => {
67
return (
78
<div id="about" className={classes.wrapper}>
89
<div className={classes.body}>
9-
<Title className={classes.title}>About Us</Title>
10-
<Text fz="md" c="dimmed">
10+
<Title className={classes.title} order={1}>
11+
About Us
12+
</Title>
13+
<Text fz="lg">
1114
Welcome to ZeroDay Alliance, where SNU students passionate about
1215
cybersecurity and ethical hacking come together to learn about the
1316
latest security trends and zero-day vulnerabilities, collaborate on
1417
projects and challenges, share resources and tools, discuss news and
1518
strategies, and network with future professionals in the field.
1619
</Text>
17-
1820
<div className={classes.controls}>
19-
<Button className={classes.control1} size="lg">
20-
Join The Community
21-
</Button>
21+
<Link to="/teams">
22+
<Button className={classes.control1} size="md">
23+
Meet Our Teams
24+
</Button>
25+
</Link>
2226
</div>
2327
</div>
2428
<Image src={image} className={classes.image} />

‎src/components/Commands/Cat.jsx

Lines changed: 4 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -38,21 +38,18 @@ const Cat = (props) => {
3838
case "events":
3939
return (
4040
<ul className={classes.catList}>
41-
<li>Event 1</li>
42-
<li>Event 2</li>
41+
<li>Cyber Security Technology</li>
42+
<li>Coming Soon...</li>
4343
</ul>
4444
);
4545
case "teams":
4646
return (
4747
<ul className={classes.catList}>
48-
<li>Team 1</li>
49-
<li>Team 2</li>
50-
<li>Team 3</li>
51-
<li>Team 4</li>
48+
<li>Coming Soon...</li>
5249
</ul>
5350
);
5451
case "faq":
55-
return <div>FAQ</div>;
52+
return <div>Coming Soon...</div>;
5653
case "contact":
5754
return (
5855
<ul className={classes.catList}>

‎src/components/Events/Events.jsx

Lines changed: 54 additions & 97 deletions
Original file line numberDiff line numberDiff line change
@@ -1,124 +1,81 @@
1-
import { IconBrandLinkedin, IconBrandGithub } from "@tabler/icons-react";
2-
import { Title } from "@mantine/core";
1+
import { IconBrandLinkedin, IconBrandInstagram } from "@tabler/icons-react";
32
import {
3+
Container,
4+
Title,
5+
SimpleGrid,
46
Card,
7+
AspectRatio,
58
Image,
69
Text,
7-
ActionIcon,
810
Group,
9-
Center,
10-
Avatar,
11+
ActionIcon,
1112
rem,
12-
Button,
1313
} from "@mantine/core";
1414
import classes from "./Events.module.css";
1515

16-
const eventData = [
17-
{
18-
name: "upcoming",
19-
time: "NA",
20-
meetingLink: "#",
21-
mode: "NA",
22-
speakerName: "NA",
23-
},
24-
{
25-
name: "To be announced",
26-
time: "NA",
27-
meetingLink: "NA",
28-
mode: "Offline",
29-
speakerName: "NA",
30-
},
31-
{
32-
name: "To be announced",
33-
time: "NA",
34-
meetingLink: "NA",
35-
mode: "Online",
36-
speakerName: "NA",
37-
},
38-
];
16+
import { upcomingEvents } from "../../config/events";
3917

4018
const Events = () => {
41-
const linkProps = {
42-
href: "https://mantine.dev",
43-
target: "_blank",
44-
rel: "noopener noreferrer",
45-
};
46-
4719
return (
48-
<div id="events">
49-
<Title ta="center" className={classes.title1}>
20+
<Container id="events" py="xl" className={classes.container}>
21+
<Title className={classes.heading} order={1}>
5022
Upcoming Events
5123
</Title>
52-
<Group className={classes.cardsContainer}>
53-
{eventData.map((event, index) => (
54-
<Card key={index} withBorder radius="md" className={classes.card}>
55-
<Card.Section>
56-
<a {...linkProps}>
57-
<Image
58-
src="https://media1.tenor.com/m/-4_cFnz_D3YAAAAC/btc-mechanics-ordinals.gif"
59-
height={200}
60-
fit="cover"
61-
/>
62-
</a>
63-
</Card.Section>
64-
65-
<Text
66-
className={classes.title}
67-
fw={500}
68-
component="a"
69-
{...linkProps}
70-
>
71-
{event.name}
72-
</Text>
73-
74-
<Group justify="space-between" className={classes.footer}>
75-
<Center>
76-
<Avatar src="" size={34} radius="xl" mr="xs" />
77-
<Text fz="sm" inline>
78-
{event.speakerName}
79-
</Text>
80-
</Center>
81-
82-
<Group gap={8} mr={0}>
24+
<SimpleGrid cols={{ base: 1, sm: 2 }}>
25+
{upcomingEvents.map((event, index) => {
26+
return (
27+
<Card key={index} p="md" radius="md" className={classes.card}>
28+
<AspectRatio ratio="auto">
29+
<Image width={100} src={event.banner} />
30+
</AspectRatio>
31+
<Text size="xl" fw={700} className={classes.title} mt={5}>
32+
{event.name}
33+
</Text>
34+
<Text c="dimmed" fw={700}>
35+
📅 {event.date}
36+
</Text>
37+
<Text c="dimmed" fw={700}>
38+
⏲ {event.time}
39+
</Text>
40+
<Text c="dimmed" size="sm" fw={700}>
41+
📳 {event.mode}
42+
</Text>
43+
<Text c="dimmed" fw={700}>
44+
📍 {event.location}
45+
</Text>
46+
<Group mt={10}>
8347
<ActionIcon
84-
className={classes.action}
85-
style={{ backgroundColor: "black" }}
48+
size="lg"
49+
variant="default"
50+
radius="xl"
51+
component="a"
52+
target="_blank"
53+
href={event.linkedin}
8654
>
8755
<IconBrandLinkedin
88-
style={{ width: rem(16), height: rem(16), color: "white" }}
56+
style={{ width: rem(18), height: rem(18) }}
57+
stroke={1.5}
8958
/>
9059
</ActionIcon>
9160
<ActionIcon
92-
className={classes.action}
93-
style={{ backgroundColor: "black" }}
61+
size="lg"
62+
variant="default"
63+
radius="xl"
64+
component="a"
65+
target="_blank"
66+
href={event.instagram}
9467
>
95-
<IconBrandGithub
96-
style={{ width: rem(16), height: rem(16), color: "white" }}
68+
<IconBrandInstagram
69+
style={{ width: rem(18), height: rem(18) }}
70+
stroke={1.5}
9771
/>
9872
</ActionIcon>
9973
</Group>
100-
</Group>
101-
102-
<Text fz="sm" c="dimmed" lineClamp={4}>
103-
Date: {event.time}
104-
</Text>
105-
<Text fz="sm" c="dimmed" lineClamp={4}>
106-
Mode: {event.mode}
107-
</Text>
108-
<Button
109-
component="a"
110-
href={event.meetingLink}
111-
target="_blank"
112-
rel="noopener noreferrer"
113-
variant="outline"
114-
style={{ width: "100%" }}
115-
>
116-
Join
117-
</Button>
118-
</Card>
119-
))}
120-
</Group>
121-
</div>
74+
</Card>
75+
);
76+
})}
77+
</SimpleGrid>
78+
</Container>
12279
);
12380
};
12481

‎src/components/Events/Events.module.css

Lines changed: 18 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -1,54 +1,27 @@
1-
.cardsContainer {
1+
.container {
22
background: linear-gradient(90deg, #272626 22%, #25424a 68%, #37616c 84%);
3-
display: flex;
4-
flex-wrap: wrap;
5-
gap: var(--mantine-spacing-md);
6-
padding: calc(var(--mantine-spacing-xl) * 2);
3+
min-width: 100vw;
4+
margin: 0;
5+
padding: rem(15px) calc(var(--mantine-spacing-xl) * 3) rem(100px)
6+
calc(var(--mantine-spacing-xl) * 3);
77
}
88

9-
.card {
10-
flex: 1 1 calc(33.3333% - var(--mantine-spacing-md));
11-
background-color: var(--mantine-color-body);
12-
13-
}
14-
15-
.rating {
16-
position: absolute;
17-
top: var(--mantine-spacing-xs);
18-
right: rem(12px);
19-
pointer-events: none;
20-
}
21-
22-
.title {
23-
display: block;
24-
margin-top: var(--mantine-spacing-md);
25-
margin-bottom: rem(5px);
26-
}
27-
28-
.action {
29-
background-color: var(--mantine-color-gray-0);
9+
.heading {
10+
text-align: center;
11+
padding: var(--mantine-spacing-xl) 0;
3012
}
3113

32-
.action:hover {
33-
background-color: var(--mantine-color-gray-1);
34-
}
35-
36-
.footer {
37-
margin-top: var(--mantine-spacing-md);
38-
}
14+
.card {
15+
transition:
16+
transform 150ms ease,
17+
box-shadow 150ms ease;
3918

40-
/* Media queries for responsive design */
41-
@media (max-width: 768px) {
42-
.card {
43-
flex: 1 1 100%;
19+
&:hover {
20+
box-shadow: var(--mantine-shadow-md);
4421
}
4522
}
46-
.title1 {
47-
background: linear-gradient(90deg, #272626 22%, #25424a 68%, #37616c 84%);
48-
color: var(--mantine-color-white);
49-
font-size: 52px;
50-
font-family:
51-
Greycliff CF,
52-
var(--mantine-font-family);
5323

54-
}
24+
.title {
25+
font-family: "Greycliff CF", var(--mantine-font-family);
26+
font-weight: bold;
27+
}

0 commit comments

Comments
 (0)