add teams page

ZeroDay-Alliance-SNU · Sep 1, 2024 · 065ec74 · 065ec74
1 parent 4c2950d
commit 065ec74
Show file tree

Hide file tree

Showing 5 changed files with 260 additions and 2 deletions.
diff --git a/src/App.jsx b/src/App.jsx
@@ -2,13 +2,15 @@ import { Routes, Route } from "react-router-dom";
 import "./App.css";
 
 import Home from "./pages/Home";
+import Teams from "./pages/Teams";
 import Cli from "./pages/Cli";
 
 function App() {
   return (
     <Routes>
-      <Route path="/" element={<Home />}></Route>
-      <Route path="/cli" element={<Cli />}></Route>
+      <Route path="/" element={<Home />} />
+      <Route path="/teams" element={<Teams />} />
+      <Route path="/cli" element={<Cli />} />
     </Routes>
   );
 }

diff --git a/src/pages/Teams/Teams.jsx b/src/pages/Teams/Teams.jsx
@@ -0,0 +1,76 @@
+import {
+  MantineProvider,
+  Container,
+  Stack,
+  Flex,
+  Title,
+  Paper,
+  Avatar,
+  Text,
+} from "@mantine/core";
+import "@mantine/core/styles.css";
+import classes from "./Teams.module.css";
+import Navbar from "../../components/Navbar";
+import Footer from "../../components/Footer";
+import teams from "./data";
+
+const Teams = () => {
+  return (
+    <MantineProvider defaultColorScheme="dark">
+      <Navbar />
+      <Container className={classes.container}>
+        <Title className={classes.heading} order={1}>
+          Meet Our Core Teams
+        </Title>
+        <Stack align="stretch" justify="center" gap="xl">
+          {teams.map((team, index) => {
+            return (
+              <Stack align="stretch" justify="center" gap="xs" key={index}>
+                <Title className={classes.teamName} order={2}>
+                  {team.name}
+                </Title>
+                <Flex
+                  className={classes.teamMembers}
+                  gap="md"
+                  justify="center"
+                  align="center"
+                  direction="row"
+                  wrap="wrap"
+                >
+                  {team.members.map((member, index) => {
+                    return (
+                      <Paper
+                        className={classes.memberCard}
+                        withBorder
+                        key={index}
+                      >
+                        <Avatar
+                          src={member.avatar}
+                          size={100}
+                          radius={100}
+                          mx="auto"
+                        />
+                        <Text ta="center" fz="lg" fw={600} mt="sm">
+                          {member.name}
+                        </Text>
+                        <Text ta="center" fz="sm" c="dimmed">
+                          {member.role}
+                        </Text>
+                        <Text ta="center" fz="md" fw={400} mt="xs">
+                          {member.bio}
+                        </Text>
+                      </Paper>
+                    );
+                  })}
+                </Flex>
+              </Stack>
+            );
+          })}
+        </Stack>
+      </Container>
+      <Footer/>
+    </MantineProvider>
+  );
+};
+
+export default Teams;
diff --git a/src/pages/Teams/Teams.module.css b/src/pages/Teams/Teams.module.css
@@ -0,0 +1,31 @@
+.container {
+  background: linear-gradient(90deg, #272626 22%, #25424a 68%, #37616c 84%);
+  min-width: 100vw;
+  min-height: 100vh;
+  margin: 0;
+  padding: rem(15px) calc(var(--mantine-spacing-xl) * 1) rem(100px)
+    calc(var(--mantine-spacing-xl) * 1);
+}
+
+.heading {
+  text-align: center;
+  padding: var(--mantine-spacing-xl) 0;
+}
+
+.teamName {
+  text-align: center;
+}
+
+.teamMembers {
+  padding: var(--mantine-spacing-xl) var(--mantine-spacing-md);
+  border-radius: var(--mantine-radius-md);
+  background-color: rgba(190, 190, 190, 0.1);
+}
+
+.memberCard {
+  height: rem(300px);
+  width: rem(225px);
+  padding: var(--mantine-spacing-md);
+  border-radius: var(--mantine-radius-md);
+  background-color: rgba(40, 40, 40, 1);
+}
diff --git a/src/pages/Teams/data.js b/src/pages/Teams/data.js
@@ -0,0 +1,146 @@
+// M: 1 2 3            9 10
+// F:       4 5 6 7 8
+
+const teams = [
+  {
+    name: "Lead",
+    members: [
+      {
+        name: "Dibyataru Chakraborty",
+        role: "Community Lead",
+        bio: "",
+        avatar:
+          "https://raw.githubusercontent.com/mantinedev/mantine/master/.demo/avatars/avatar-1.png",
+      },
+    ],
+  },
+  {
+    name: "Tech Team (Cyber Security)",
+    members: [
+      {
+        name: "Soumyadeep Dutta",
+        role: "Cyber Security Lead",
+        bio: "",
+        avatar:
+          "https://raw.githubusercontent.com/mantinedev/mantine/master/.demo/avatars/avatar-9.png",
+      },
+      {
+        name: "Avik Samanta",
+        role: "Cyber Security, Shell",
+        bio: "",
+        avatar:
+          "https://raw.githubusercontent.com/mantinedev/mantine/master/.demo/avatars/avatar-2.png",
+      },
+      {
+        name: "Debangshu Roy",
+        role: "Cyber Security, Network",
+        bio: "I'm passionate about Ethical Hacking and Red Teaming.",
+        avatar:
+          "https://raw.githubusercontent.com/mantinedev/mantine/master/.demo/avatars/avatar-9.png",
+      },
+      {
+        name: "Debankan Mullick",
+        role: "Cyber Security, Shell",
+        bio: "",
+        avatar:
+          "https://raw.githubusercontent.com/mantinedev/mantine/master/.demo/avatars/avatar-10.png",
+      },
+      {
+        name: "Mohammed Zoheb",
+        role: "Cyber Security",
+        bio: "Cyber Security Enthusiast.",
+        avatar:
+          "https://raw.githubusercontent.com/mantinedev/mantine/master/.demo/avatars/avatar-1.png",
+      },
+      {
+        name: "Praveen Joshi",
+        role: "Cyber Security, Network",
+        bio: "",
+        avatar:
+          "https://raw.githubusercontent.com/mantinedev/mantine/master/.demo/avatars/avatar-10.png",
+      },
+      {
+        name: "Rajdeep Saha",
+        role: "Cyber Security, Crypto",
+        bio: "",
+        avatar:
+          "https://raw.githubusercontent.com/mantinedev/mantine/master/.demo/avatars/avatar-3.png",
+      },
+      {
+        name: "Soumi Biswas",
+        role: "Cyber Security, Crypto",
+        bio: "",
+        avatar:
+          "https://raw.githubusercontent.com/mantinedev/mantine/master/.demo/avatars/avatar-4.png",
+      },
+    ],
+  },
+  {
+    name: "Tech Team (Web Development)",
+    members: [
+      {
+        name: "Krishnendu Das",
+        role: "Web Dev Lead",
+        bio: "Developer etc.",
+        avatar:
+          "https://raw.githubusercontent.com/mantinedev/mantine/master/.demo/avatars/avatar-2.png",
+      },
+      {
+        name: "Aman Kumar Rai",
+        role: "Web Dev, Frontend",
+        bio: "",
+        avatar:
+          "https://raw.githubusercontent.com/mantinedev/mantine/master/.demo/avatars/avatar-3.png",
+      },
+      {
+        name: "Debanjan Mondal",
+        role: "DevOps, Full-Stack Dev",
+        bio: "Full Stack Dev",
+        avatar:
+          "https://raw.githubusercontent.com/mantinedev/mantine/master/.demo/avatars/avatar-10.png",
+      },
+      {
+        name: "Monami Nandy",
+        role: "Web Dev, Frontend",
+        bio: "",
+        avatar:
+          "https://raw.githubusercontent.com/mantinedev/mantine/master/.demo/avatars/avatar-7.png",
+      },
+    ],
+  },
+  {
+    name: "Event Management Team",
+    members: [
+      {
+        name: "Annesha Das",
+        role: "",
+        bio: "",
+        avatar:
+          "https://raw.githubusercontent.com/mantinedev/mantine/master/.demo/avatars/avatar-4.png",
+      },
+      {
+        name: "Arpita Paul",
+        role: "",
+        bio: "",
+        avatar:
+          "https://raw.githubusercontent.com/mantinedev/mantine/master/.demo/avatars/avatar-5.png",
+      },
+      {
+        name: "Salini Dutta",
+        role: "",
+        bio: "",
+        avatar:
+          "https://raw.githubusercontent.com/mantinedev/mantine/master/.demo/avatars/avatar-6.png",
+      },
+      {
+        name: "Sarmistha Ghosh",
+        role: "",
+        bio: "",
+        avatar:
+          "https://raw.githubusercontent.com/mantinedev/mantine/master/.demo/avatars/avatar-8.png",
+      },
+    ],
+  },
+];
+
+export default teams;
diff --git a/src/pages/Teams/index.jsx b/src/pages/Teams/index.jsx
@@ -0,0 +1,3 @@
+import Teams from "./Teams";
+
+export default Teams;
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		import Teams from "./Teams";

		export default Teams;