Merge pull request #29 from Debanjannnn/main

added Heading
ZeroDay-Alliance-SNU · Sep 1, 2024 · b74eaa0 · b74eaa0
2 parents 6d07100 + 0c9a7e4
commit b74eaa0
Show file tree

Hide file tree

Showing 2 changed files with 72 additions and 57 deletions.
diff --git a/src/components/Events/Events.jsx b/src/components/Events/Events.jsx
@@ -1,5 +1,6 @@
 import { IconBrandLinkedin, IconBrandGithub } from '@tabler/icons-react';
 import image from "/src/assets/null.jpeg";
+import { Title} from '@mantine/core';
 import {
   Card,
   Image,
@@ -19,22 +20,22 @@ const eventData = [
     name: 'upcoming',
     time: 'NA',
     meetingLink: '#',
-    mode: 'Online',
+    mode: 'NA',
     speakerName: 'NA',
   },
   {
     name: 'To be announced',
-    time: '4:00 PM',
-    meetingLink: 'https://example.com/ai-conference',
+    time: 'NA',
+    meetingLink: 'NA',
     mode: 'Offline',
-    speakerName: 'Jane Doe',
+    speakerName: 'NA',
   },
   {
     name: 'To be announced',
-    time: '6:00 PM',
-    meetingLink: 'https://example.com/web-dev-bootcamp',
+    time: 'NA',
+    meetingLink: 'NA',
     mode: 'Online',
-    speakerName: 'John Smith',
+    speakerName: 'NA',
   },
 ];
 
@@ -43,61 +44,66 @@ const Events = () => {
   const theme = useMantineTheme();
 
   return (
-    <Group className={classes.cardsContainer}>
-      {eventData.map((event, index) => (
-        <Card key={index} withBorder radius="md" className={classes.card}>
-          <Card.Section>
-            <a {...linkProps}>
-              <Image src={image} height={200}  fit="cover" />
-            </a>
-          </Card.Section>
+    <>
+       <Title ta="center" className={classes.title1}>
+          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>
+            <Text className={classes.title} fw={500} component="a" {...linkProps}>
+              {event.name}
+            </Text>
 
-          <Group justify="space-between" className={classes.footer}>
-            <Center>
-              <Avatar
-                src="https://raw.githubusercontent.com/mantinedev/mantine/master/.demo/avatars/avatar-1.png"
-                size={34}
-                radius="xl"
-                mr="xs"
-              />
-              <Text fz="sm" inline >
-                {event.speakerName}
-              </Text>
-            </Center  >
+            <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}>
-              <ActionIcon className={classes.action} style={{ backgroundColor: 'black' }}>
-                <IconBrandLinkedin style={{ width: rem(16), height: rem(16), color: 'white' }} />
-              </ActionIcon>
-              <ActionIcon className={classes.action} style={{ backgroundColor: 'black' }}>
-                <IconBrandGithub style={{ width: rem(16), height: rem(16), color: 'white' }} />
-              </ActionIcon>
+              <Group gap={8} mr={0}>
+                <ActionIcon className={classes.action} style={{ backgroundColor: 'black' }}>
+                  <IconBrandLinkedin style={{ width: rem(16), height: rem(16), color: 'white' }} />
+                </ActionIcon>
+                <ActionIcon className={classes.action} style={{ backgroundColor: 'black' }}>
+                  <IconBrandGithub style={{ width: rem(16), height: rem(16), color: 'white' }} />
+                </ActionIcon>
+              </Group>
             </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>
+            <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>
+    </>
   );
 }
 

diff --git a/src/components/Events/Events.module.css b/src/components/Events/Events.module.css
@@ -43,3 +43,12 @@
     flex: 1 1 100%;
   }
 }
+.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);
+
+}