minor fixes

ZeroDay-Alliance-SNU · Sep 1, 2024 · bcd7226 · bcd7226
1 parent b74eaa0
commit bcd7226
Show file tree

Hide file tree

Showing 8 changed files with 160 additions and 85 deletions.
diff --git a/index.html b/index.html
@@ -2,9 +2,44 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta http-equiv="Content-Language" content="en" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="icon" type="image/jpeg" href="/logo.jpeg" />
     <title>ZeroDay Alliance SNU</title>
+    <meta name="robots" content="index, follow" />
+    <meta name="author" content="ZeroDay Alliance SNU" />
+    <meta
+      name="keywords"
+      content="ZeroDay Alliance SNU, cybersecurity, ethical hacking, zero-day vulnerabilities, security trends, ethical hacking projects, cybersecurity news, hacking tools, cybersecurity students, network, cybersecurity innovations"
+    />
+    <meta
+      property="og:title"
+      content="ZeroDay Alliance SNU - Cybersecurity & Ethical Hacking Community"
+    />
+    <meta
+      property="og:description"
+      content="Join ZeroDay Alliance SNU to learn about zero-day vulnerabilities, collaborate on ethical hacking projects, and network with future cybersecurity professionals."
+    />
+    <meta
+      property="og:image"
+      content="	https://zeroday-alliance.pages.dev/logo1.jpeg"
+    />
+    <meta property="og:url" content="https://zeroday-alliance.pages.dev" />
+    <meta property="og:type" content="website" />
+    <meta name="twitter:card" content="summary_large_image" />
+    <meta
+      name="twitter:title"
+      content="ZeroDay Alliance SNU - Cybersecurity & Ethical Hacking Community"
+    />
+    <meta
+      name="twitter:description"
+      content="Explore, collaborate, and network within the ZeroDay Alliance SNU, a community for students passionate about cybersecurity and ethical hacking."
+    />
+    <meta
+      name="twitter:image"
+      content="https://zeroday-alliance.pages.dev/logo1.jpeg"
+    />
+    <meta name="twitter:site" content="@ZeroDay_Alliance_SNU" />
   </head>
   <body>
     <div id="root"></div>

diff --git a/public/logo.jpeg b/public/logo.jpeg
diff --git a/public/logo1.jpg b/public/logo1.jpg
diff --git a/src/components/About/About.jsx b/src/components/About/About.jsx
@@ -4,9 +4,9 @@ import classes from "./About.module.css";
 
 const About = () => {
   return (
-    <div className={classes.wrapper}>
+    <div id="about" className={classes.wrapper}>
       <div className={classes.body}>
-        <Title className={classes.title}>About US</Title>
+        <Title className={classes.title}>About Us</Title>
         <Text fz="md" c="dimmed">
           Welcome to ZeroDay Alliance, where SNU students passionate about
           cybersecurity and ethical hacking come together to learn about the

diff --git a/src/components/Events/Events.jsx b/src/components/Events/Events.jsx
@@ -1,6 +1,5 @@
-import { IconBrandLinkedin, IconBrandGithub } from '@tabler/icons-react';
-import image from "/src/assets/null.jpeg";
-import { Title} from '@mantine/core';
+import { IconBrandLinkedin, IconBrandGithub } from "@tabler/icons-react";
+import { Title } from "@mantine/core";
 import {
   Card,
   Image,
@@ -9,77 +8,93 @@ import {
   Group,
   Center,
   Avatar,
-  useMantineTheme,
   rem,
   Button,
-} from '@mantine/core';
-import classes from './Events.module.css';
+} from "@mantine/core";
+import classes from "./Events.module.css";
 
 const eventData = [
   {
-    name: 'upcoming',
-    time: 'NA',
-    meetingLink: '#',
-    mode: 'NA',
-    speakerName: 'NA',
+    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: "Offline",
+    speakerName: "NA",
   },
   {
-    name: 'To be announced',
-    time: 'NA',
-    meetingLink: 'NA',
-    mode: 'Online',
-    speakerName: 'NA',
+    name: "To be announced",
+    time: "NA",
+    meetingLink: "NA",
+    mode: "Online",
+    speakerName: "NA",
   },
 ];
 
 const Events = () => {
-  const linkProps = { href: 'https://mantine.dev', target: '_blank', rel: 'noopener noreferrer' };
-  const theme = useMantineTheme();
+  const linkProps = {
+    href: "https://mantine.dev",
+    target: "_blank",
+    rel: "noopener noreferrer",
+  };
 
   return (
-    <>
-       <Title ta="center" className={classes.title1}>
-          Upcoming Events
-        </Title>
+    <div id="events">
+      <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" />
+                <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}>
+            <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"
-                />
+                <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
+                  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
+                  className={classes.action}
+                  style={{ backgroundColor: "black" }}
+                >
+                  <IconBrandGithub
+                    style={{ width: rem(16), height: rem(16), color: "white" }}
+                  />
                 </ActionIcon>
               </Group>
             </Group>
@@ -96,15 +111,15 @@ const Events = () => {
               target="_blank"
               rel="noopener noreferrer"
               variant="outline"
-              style={{ width: '100%' }}
+              style={{ width: "100%" }}
             >
               Join
             </Button>
           </Card>
         ))}
       </Group>
-    </>
+    </div>
   );
-}
+};
 
 export default Events;
diff --git a/src/components/Footer/Footer.jsx b/src/components/Footer/Footer.jsx
@@ -1,13 +1,15 @@
-import { Anchor, Group, ActionIcon, rem } from '@mantine/core';
-import { IconBrandInstagram, IconBrandLinkedin, IconBrandGithub } from '@tabler/icons-react';
-import classes from './Footer.module.css';
+import { Anchor, Group, ActionIcon, rem } from "@mantine/core";
+import {
+  IconBrandInstagram,
+  IconBrandLinkedin,
+  IconBrandGithub,
+} from "@tabler/icons-react";
+import classes from "./Footer.module.css";
 import logo from "/src/assets/logo1.jpg";
 const links = [
-  { link: '#', label: 'Code Of conduct' },
-  { link: '#', label: 'Gallery' },
-  { link: '#', label: 'Blog' },
-  // { link: 'https://zeroday-alliance.pages.dev/', label: 'Website' }, // Added website link
-  { link: '#', label: 'Careers' },
+  { link: "#", label: "Code Of Conduct" },
+  { link: "#", label: "Gallery" },
+  { link: "#", label: "Blog" },
 ];
 
 const Footer = () => {
@@ -38,32 +40,44 @@ const Footer = () => {
             variant="default"
             radius="xl"
             component="a"
-            href="https://github.com/ZeroDay-Alliance-SNU" 
+            target="_blank"
+            href="https://github.com/ZeroDay-Alliance-SNU"
           >
-            <IconBrandGithub style={{ width: rem(18), height: rem(18) }} stroke={1.5} />
+            <IconBrandGithub
+              style={{ width: rem(18), height: rem(18) }}
+              stroke={1.5}
+            />
           </ActionIcon>
           <ActionIcon
             size="lg"
             variant="default"
             radius="xl"
             component="a"
+            target="_blank"
             href="https://www.linkedin.com/company/zeroday-alliance-snu/"
           >
-            <IconBrandLinkedin style={{ width: rem(18), height: rem(18) }} stroke={1.5} />
+            <IconBrandLinkedin
+              style={{ width: rem(18), height: rem(18) }}
+              stroke={1.5}
+            />
           </ActionIcon>
           <ActionIcon
             size="lg"
             variant="default"
             radius="xl"
             component="a"
+            target="_blank"
             href="https://www.instagram.com/zerodayalliance"
           >
-            <IconBrandInstagram style={{ width: rem(18), height: rem(18) }} stroke={1.5} />
+            <IconBrandInstagram
+              style={{ width: rem(18), height: rem(18) }}
+              stroke={1.5}
+            />
           </ActionIcon>
         </Group>
       </div>
     </div>
   );
-}
+};
 
 export default Footer;
diff --git a/src/components/Navbar/Navbar.jsx b/src/components/Navbar/Navbar.jsx
@@ -6,7 +6,6 @@ import {
   Burger,
   Drawer,
   ScrollArea,
-  rem,
 } from "@mantine/core";
 import logo from "/src/assets/logo1.jpg";
 import { IconTerminal2 } from "@tabler/icons-react";
@@ -32,24 +31,21 @@ const Navbar = () => {
           </Group>
 
           <Group h="100%" gap={0} visibleFrom="sm">
-            {/* <a href="/#home" className={classes.link}>
-              Home
-            </a> */}
-            <a href="/#about" className={classes.link}>
+            <Link to="/#about" className={classes.link}>
               About
-            </a>
-            <a href="/#events" className={classes.link}>
+            </Link>
+            <Link to="/#events" className={classes.link}>
               Events
-            </a>
-            <a href="/#teams" className={classes.link}>
+            </Link>
+            <Link to="/teams" className={classes.link}>
               Teams
-            </a>
-            <a href="/#faq" className={classes.link}>
+            </Link>
+            <Link to="/#faq" className={classes.link}>
               FAQs
-            </a>
-            <a href="/#contact" className={classes.link}>
+            </Link>
+            <Link to="/#contact" className={classes.link}>
               Contact
-            </a>
+            </Link>
           </Group>
 
           <Group visibleFrom="sm">
@@ -84,24 +80,21 @@ const Navbar = () => {
       >
         <ScrollArea>
           <Divider my="sm" />
-          <a href="/#home" className={classes.link}>
-            Home
-          </a>
-          <a href="/#about" className={classes.link}>
+          <Link to="/#about" className={classes.link}>
             About
-          </a>
-          <a href="/#events" className={classes.link}>
+          </Link>
+          <Link to="/#events" className={classes.link}>
             Events
-          </a>
-          <a href="/#teams" className={classes.link}>
+          </Link>
+          <Link to="/teams" className={classes.link}>
             Teams
-          </a>
-          <a href="/#faq" className={classes.link}>
+          </Link>
+          <Link to="/#faq" className={classes.link}>
             FAQs
-          </a>
-          <a href="/#contact" className={classes.link}>
+          </Link>
+          <Link to="/#contact" className={classes.link}>
             Contact
-          </a>
+          </Link>
 
           <Divider my="sm" />
 

diff --git a/src/pages/Home/Home.jsx b/src/pages/Home/Home.jsx
@@ -1,3 +1,5 @@
+import { useEffect } from "react";
+import { useLocation } from "react-router-dom";
 import {  MantineProvider } from "@mantine/core";
 import "@mantine/core/styles.css";
 import Navbar from "../../components/Navbar";
@@ -7,9 +9,25 @@ import Faq from "../../components/FAQ";
 import About from "../../components/About";
 import Events from "../../components/Events";
 
+const ScrollToHashElement = () => {
+  const location = useLocation();
+
+  useEffect(() => {
+    if (location.hash) {
+      const element = document.getElementById(location.hash.substring(1));
+      if (element) {
+        element.scrollIntoView({ behavior: "smooth" });
+      }
+    }
+  }, [location]);
+
+  return null;
+};
+
 function Home() {
   return (
     <MantineProvider defaultColorScheme="dark">
+      <ScrollToHashElement />
       <Navbar />
       <Hero />
       <About />