Merge pull request #13 from Debanjannnn/test

Matched Color palette
ZeroDay-Alliance-SNU · Aug 31, 2024 · 0e5ed73 · 0e5ed73
2 parents 5c702df + 6dc3c37
commit 0e5ed73
Show file tree

Hide file tree

Showing 3 changed files with 69 additions and 18 deletions.
diff --git a/src/components/FAQ/Faq.module.css b/src/components/FAQ/Faq.module.css
@@ -9,6 +9,7 @@
   background-position: top left;
   position: relative;
   color: var(--mantine-color-black);
+  background: linear-gradient(90deg, #272626 22%, #25424a 68%, #37616c 84%);
 }
 
 .title {

diff --git a/src/components/Footer/Footer.jsx b/src/components/Footer/Footer.jsx
@@ -1,27 +1,69 @@
-import { Container, Group, ActionIcon, rem } from '@mantine/core';
-import { IconBrandTwitter, IconBrandYoutube, IconBrandInstagram } from '@tabler/icons-react';
-
+import { Anchor, Group, ActionIcon, rem } from '@mantine/core';
+import { IconBrandTwitter, IconBrandYoutube, IconBrandInstagram, IconBrandLinkedin, IconBrandGithub } from '@tabler/icons-react';
 import classes from './Footer.module.css';
+import logo from "/src/assets/logo1.jpg";
+const links = [
+  { link: '#', label: 'Contact' },
+  { link: '#', label: 'Privacy' },
+  { link: '#', label: 'Blog' },
+  { link: 'https://zeroday-alliance.pages.dev/', label: 'Website' }, // Added website link
+  { link: '#', label: 'Careers' },
+];
 
 const Footer = () => {
+  const items = links.map((link) => (
+    <Anchor
+      c="dimmed"
+      key={link.label}
+      href={link.link}
+      lh={1}
+      onClick={(event) => event.preventDefault()}
+      size="sm"
+    >
+      {link.label}
+    </Anchor>
+  ));
+
   return (
     <div className={classes.footer}>
-      <Container className={classes.inner}>
-        {/* <MantineLogo size={28} /> */}
-        <Group gap={0} className={classes.links} justify="flex-end" wrap="nowrap">
-          <ActionIcon size="lg" color="gray" variant="subtle">
-            <IconBrandTwitter style={{ width: rem(18), height: rem(18) }} stroke={1.5} />
+      <div className={classes.inner}>
+        {/* <MantineLogo  size={28} /> */}
+        <img className={classes.image11} src={logo} alt="Logo" />
+
+        <Group className={classes.links}>{items}</Group>
+
+        <Group gap="xs" justify="flex-end" wrap="nowrap">
+          <ActionIcon
+            size="lg"
+            variant="default"
+            radius="xl"
+            component="a"
+            href="https://github.com/ZeroDay-Alliance-SNU" 
+          >
+            <IconBrandGithub style={{ width: rem(18), height: rem(18) }} stroke={1.5} />
           </ActionIcon>
-          <ActionIcon size="lg" color="gray" variant="subtle">
-            <IconBrandYoutube style={{ width: rem(18), height: rem(18) }} stroke={1.5} />
+          <ActionIcon
+            size="lg"
+            variant="default"
+            radius="xl"
+            component="a"
+            href="https://www.linkedin.com/company/zeroday-alliance-snu/"
+          >
+            <IconBrandLinkedin style={{ width: rem(18), height: rem(18) }} stroke={1.5} />
           </ActionIcon>
-          <ActionIcon size="lg" color="gray" variant="subtle">
+          <ActionIcon
+            size="lg"
+            variant="default"
+            radius="xl"
+            component="a"
+            href="https://www.instagram.com/zerodayalliance"
+          >
             <IconBrandInstagram style={{ width: rem(18), height: rem(18) }} stroke={1.5} />
           </ActionIcon>
         </Group>
-      </Container>
+      </div>
     </div>
   );
 }
 
-export default Footer
+export default Footer;
diff --git a/src/components/Footer/Footer.module.css b/src/components/Footer/Footer.module.css
@@ -1,22 +1,30 @@
 .footer {
   margin-top: rem(120px);
   border-top: rem(1px) solid light-dark(var(--mantine-color-gray-2), var(--mantine-color-dark-5));
+  background: linear-gradient(90deg, #272626 22%, #25424a 68%, #37616c 84%);
 }
 
 .inner {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding-top: var(--mantine-spacing-xl);
-  padding-bottom: var(--mantine-spacing-xl);
+  padding: var(--mantine-spacing-md) var(--mantine-spacing-md);
 
-  @media (max-width: $mantine-breakpoint-xs) {
+  @media (max-width: $mantine-breakpoint-sm) {
     flex-direction: column;
   }
 }
 
 .links {
-  @media (max-width: $mantine-breakpoint-xs) {
-    margin-top: var(--mantine-spacing-md);
+  @media (max-width: $mantine-breakpoint-sm) {
+    margin-top: var(--mantine-spacing-lg);
+    margin-bottom: var(--mantine-spacing-sm);
   }
+}
+
+.image11 {
+  height: 50px;
+  width: 50px;
+  border: none;
+  border-radius: 50px;
 }