update footer

src/Footer.tsx

@@ -1,51 +1,63 @@
-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],
+    backgroundColor: "#eb7b1a",
-        borderTop: `${rem(1)} solid ${theme.colorScheme === 'dark' ? theme.colors.dark[5] : theme.colors.gray[2]
+    borderTop: `${rem(1)} solid ${
+      theme.colors.dark[5]
     }`,
   },
 
   logo: {
     maxWidth: rem(200),
 
-        [theme.fn.smallerThan('sm')]: {
+    [theme.fn.smallerThan("sm")]: {
-            display: 'flex',
+      display: "flex",
-            flexDirection: 'column',
+      flexDirection: "column",
-            alignItems: 'center',
+      alignItems: "center",
     },
   },
 
   description: {
     marginTop: rem(5),
 
-        [theme.fn.smallerThan('sm')]: {
+    [theme.fn.smallerThan("sm")]: {
       marginTop: theme.spacing.xs,
-            textAlign: 'center',
+      textAlign: "center",
     },
   },
 
   inner: {
-        display: 'flex',
+    display: "flex",
-        justifyContent: 'space-between',
+    justifyContent: "space-between",
 
-        [theme.fn.smallerThan('sm')]: {
+    [theme.fn.smallerThan("sm")]: {
-            flexDirection: 'column',
+      flexDirection: "column",
-            alignItems: 'center',
+      alignItems: "center",
     },
   },
 
   groups: {
-        display: 'flex',
+    display: "flex",
-        flexWrap: 'wrap',
+    flexWrap: "wrap",
 
-        [theme.fn.smallerThan('sm')]: {
+    [theme.fn.smallerThan("sm")]: {
-            display: 'none',
+      display: "none",
     },
   },
 
@@ -54,14 +66,14 @@ const useStyles = createStyles((theme) => ({
   },
 
   link: {
-        display: 'block',
+    display: "block",
-        color: theme.colorScheme === 'dark' ? theme.colors.dark[1] : theme.colors.gray[6],
+    color: theme.colors.dark[4],
     fontSize: theme.fontSizes.sm,
     paddingTop: rem(3),
     paddingBottom: rem(3),
 
-        '&:hover': {
+    "&:hover": {
-            textDecoration: 'underline',
+      textDecoration: "underline",
     },
   },
 
@@ -70,26 +82,28 @@ const useStyles = createStyles((theme) => ({
     fontWeight: 700,
     fontFamily: `Greycliff CF, ${theme.fontFamily}`,
     marginBottom: `calc(${theme.spacing.xs} / 2)`,
-        color: theme.colorScheme === 'dark' ? theme.white : theme.black,
+    color: theme.colors.dark[5],
   },
 
   afterFooter: {
-        display: 'flex',
+    display: "flex",
-        justifyContent: 'space-between',
+    justifyContent: "space-around",
-        alignItems: 'center',
+    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.gray[2]
+    borderTop: `${rem(1)} solid ${
+      theme.colorScheme === "dark" ? theme.colors.dark[4] : theme.colors.dark[4]
     }`,
 
-        [theme.fn.smallerThan('sm')]: {
+    [theme.fn.smallerThan("sm")]: {
-            flexDirection: 'column',
+      flexDirection: "column",
     },
   },
 
   social: {
-        [theme.fn.smallerThan('sm')]: {
+    [theme.fn.smallerThan("sm")]: {
       marginTop: theme.spacing.xs,
     },
   },
@@ -107,7 +121,7 @@ export function FooterLinks({ data }: FooterLinksProps) {
 
   const groups = data.map((group) => {
     const links = group.links.map((link, index) => (
-            <Text<'a'>
+      <Text<"a">
         key={index}
         className={classes.link}
         component="a"
@@ -130,17 +144,29 @@ export function FooterLinks({ data }: FooterLinksProps) {
     <footer className={classes.footer}>
       <Container className={classes.inner}>
         <div className={classes.logo}>
-                    <Title order={3}>Литературные музеи России</Title>
+          {/* <Title order={3}>Литературные музеи России</Title> */}
           {/* <MantineLogo size={30} /> */}
-                    <Text size="xs" color="dimmed" className={classes.description}>
+          <Image src={logo} />
+          <Text size="xs" color="#373A40" className={classes.description}>
             геоинформационный портал
           </Text>
-                    <Text size="xs" className={classes.description}>
+          <Text size="xs" color="#373A40" className={classes.description}>
             Проект создан при поддержке Фонда "История Отечества"
           </Text>
         </div>
         <div className={classes.groups}>{groups}</div>
-                
+      </Container>
+      <Container className={classes.afterFooter}>
+        
+        <Anchor href="https://fond.historyrussia.org/" target="_blank">
+          <Image src={fund} maw={110} />
+        </Anchor>
+        <Anchor href="https://goslitmuz.ru/" target="_blank">
+          <Image src={glm} maw={300} />
+        </Anchor>
+        <Anchor href="https://goslitmuz.ru/projects/174/2361/" target="_blank">
+          <Image src={association} maw={90} />
+        </Anchor>
       </Container>
     </footer>
   );

src/assets/footer.json

@@ -7,49 +7,11 @@
             "label": "Карта",
             "link": "#"
           },
-          {
-            "label": "Статьи",
-            "link": "#"
-          },
           {
             "label": "О проекте",
             "link": "#"
           }
         ]
-      },
-      {
-        "title": "Проект",
-        "links": [
-          {
-            "label": "Присоединиться",
-            "link": "#"
-          },
-          {
-            "label": "Обратная связь",
-            "link": "#"
-          },
-          {
-            "label": "Репозиторий",
-            "link": "#"
-          },
-          {
-            "label": "Релизы",
-            "link": "#"
-          }
-        ]
-      },
-      {
-        "title": "Сообщество",
-        "links": [
-          {
-            "label": "Гослитмузей",
-            "link": "#"
-          },
-          {
-            "label": "Ассоциация музеев",
-            "link": "#"
-          }
-        ]
       }
     ]
   }