diff --git a/src/Footer.tsx b/src/Footer.tsx
index e3a75e3..7e27ff3 100644
--- a/src/Footer.tsx
+++ b/src/Footer.tsx
@@ -1,147 +1,173 @@
-import { createStyles, Text, Container, rem, Title } from '@mantine/core';
+import {
+ createStyles,
+ Text,
+ Container,
+ rem,
+ Anchor,
+ Image,
+} from "@mantine/core";
// import { IconBrandTwitter, IconBrandYoutube, IconBrandInstagram } from '@tabler/icons-react';
// import { MantineLogo } from '@mantine/ds';
+import logo from "./assets/logos/logo-text.png";
+import fund from "./assets/logos/fund.png";
+import association from "./assets/logos/association.png";
+import glm from "./assets/logos/glm.png";
const useStyles = createStyles((theme) => ({
- footer: {
- paddingTop: rem(40),
- paddingBottom: rem(40),
- backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[6] : theme.colors.gray[0],
- borderTop: `${rem(1)} solid ${theme.colorScheme === 'dark' ? theme.colors.dark[5] : theme.colors.gray[2]
- }`,
+ footer: {
+ paddingTop: rem(40),
+ paddingBottom: rem(40),
+ backgroundColor: "#eb7b1a",
+ borderTop: `${rem(1)} solid ${
+ theme.colors.dark[5]
+ }`,
+ },
+
+ logo: {
+ maxWidth: rem(200),
+
+ [theme.fn.smallerThan("sm")]: {
+ display: "flex",
+ flexDirection: "column",
+ alignItems: "center",
},
+ },
- logo: {
- maxWidth: rem(200),
+ description: {
+ marginTop: rem(5),
- [theme.fn.smallerThan('sm')]: {
- display: 'flex',
- flexDirection: 'column',
- alignItems: 'center',
- },
+ [theme.fn.smallerThan("sm")]: {
+ marginTop: theme.spacing.xs,
+ textAlign: "center",
},
+ },
- description: {
- marginTop: rem(5),
+ inner: {
+ display: "flex",
+ justifyContent: "space-between",
- [theme.fn.smallerThan('sm')]: {
- marginTop: theme.spacing.xs,
- textAlign: 'center',
- },
+ [theme.fn.smallerThan("sm")]: {
+ flexDirection: "column",
+ alignItems: "center",
},
+ },
- inner: {
- display: 'flex',
- justifyContent: 'space-between',
+ groups: {
+ display: "flex",
+ flexWrap: "wrap",
- [theme.fn.smallerThan('sm')]: {
- flexDirection: 'column',
- alignItems: 'center',
- },
+ [theme.fn.smallerThan("sm")]: {
+ display: "none",
},
+ },
- groups: {
- display: 'flex',
- flexWrap: 'wrap',
+ wrapper: {
+ width: rem(160),
+ },
- [theme.fn.smallerThan('sm')]: {
- display: 'none',
- },
- },
-
- wrapper: {
- width: rem(160),
- },
-
- link: {
- display: 'block',
- color: theme.colorScheme === 'dark' ? theme.colors.dark[1] : theme.colors.gray[6],
- fontSize: theme.fontSizes.sm,
- paddingTop: rem(3),
- paddingBottom: rem(3),
+ link: {
+ display: "block",
+ color: theme.colors.dark[4],
+ fontSize: theme.fontSizes.sm,
+ paddingTop: rem(3),
+ paddingBottom: rem(3),
- '&:hover': {
- textDecoration: 'underline',
- },
+ "&:hover": {
+ textDecoration: "underline",
},
-
- title: {
- fontSize: theme.fontSizes.lg,
- fontWeight: 700,
- fontFamily: `Greycliff CF, ${theme.fontFamily}`,
- marginBottom: `calc(${theme.spacing.xs} / 2)`,
- color: theme.colorScheme === 'dark' ? theme.white : theme.black,
- },
-
- afterFooter: {
- display: 'flex',
- justifyContent: 'space-between',
- alignItems: 'center',
- marginTop: theme.spacing.xl,
- paddingTop: theme.spacing.xl,
- paddingBottom: theme.spacing.xl,
- borderTop: `${rem(1)} solid ${theme.colorScheme === 'dark' ? theme.colors.dark[4] : theme.colors.gray[2]
- }`,
-
- [theme.fn.smallerThan('sm')]: {
- flexDirection: 'column',
- },
+ },
+
+ title: {
+ fontSize: theme.fontSizes.lg,
+ fontWeight: 700,
+ fontFamily: `Greycliff CF, ${theme.fontFamily}`,
+ marginBottom: `calc(${theme.spacing.xs} / 2)`,
+ color: theme.colors.dark[5],
+ },
+
+ afterFooter: {
+ display: "flex",
+ justifyContent: "space-around",
+ gap: "30px",
+ alignItems: "center",
+ marginTop: theme.spacing.xl,
+ paddingTop: theme.spacing.xl,
+ paddingBottom: theme.spacing.xl,
+ borderTop: `${rem(1)} solid ${
+ theme.colorScheme === "dark" ? theme.colors.dark[4] : theme.colors.dark[4]
+ }`,
+
+ [theme.fn.smallerThan("sm")]: {
+ flexDirection: "column",
},
+ },
- social: {
- [theme.fn.smallerThan('sm')]: {
- marginTop: theme.spacing.xs,
- },
+ social: {
+ [theme.fn.smallerThan("sm")]: {
+ marginTop: theme.spacing.xs,
},
+ },
}));
interface FooterLinksProps {
- data: {
- title: string;
- links: { label: string; link: string }[];
- }[];
+ data: {
+ title: string;
+ links: { label: string; link: string }[];
+ }[];
}
export function FooterLinks({ data }: FooterLinksProps) {
- const { classes } = useStyles();
-
- const groups = data.map((group) => {
- const links = group.links.map((link, index) => (
-