Header&Footer

package.json

@@ -15,17 +15,26 @@
     "test:coverage": "vitest run --coverage"
   },
   "dependencies": {
+    "@hookform/resolvers": "^5.2.1",
+    "@mantine/core": "^8.3.1",
+    "@mantine/hooks": "^8.3.1",
     "@reduxjs/toolkit": "^2.9.0",
     "@remix-run/node-fetch-server": "^0.8.0",
+    "@tabler/icons-react": "^3.34.1",
     "compression": "^1.8.1",
     "cross-env": "^10.0.0",
     "express": "^5.1.0",
+    "firebase": "^12.2.1",
+    "lodash": "^4.17.21",
+    "lucide-react": "^0.544.0",
     "normalize.css": "^8.0.1",
     "react": "^19.1.1",
     "react-dom": "^19.1.1",
+    "react-hook-form": "^7.62.0",
     "react-intl": "^7.1.11",
     "react-redux": "^9.2.0",
-    "react-router": "7.7.0"
+    "react-router": "7.7.0",
+    "yup": "^1.7.0"
   },
   "devDependencies": {
     "@eslint/js": "^9.33.0",
@@ -35,6 +44,7 @@
     "@testing-library/user-event": "^14.6.1",
     "@types/compression": "^1.8.1",
     "@types/express": "^5.0.3",
+    "@types/lodash": "^4.17.20",
     "@types/node": "^24.3.1",
     "@types/react": "^19.1.12",
     "@types/react-dom": "^19.1.9",

src/components/Footer/Footer.module.css

@@ -0,0 +1,8 @@
+.footer {
+  /* height: 60px; */
+  padding-left: var(--mantine-spacing-md);
+  padding-right: var(--mantine-spacing-md);
+  padding-top: var(--mantine-spacing-md);
+  border-top: 1px solid
+    light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-4));
+}

src/components/Footer/Footer.tsx

@@ -1,9 +1,47 @@
+import { Anchor, Box, Group, Image, Stack } from '@mantine/core';
 import type { JSX } from 'react';
+import classes from './Footer.module.css';
+import { IconBrandGithub } from '@tabler/icons-react';
 
 export function Footer(): JSX.Element {
   return (
-    <footer className={'footer'}>
-      <div className={'container'}>Footer</div>
-    </footer>
+    <Box pt="60" pb="20" w="100%">
+      <footer className={classes.footer}>
+        <Group justify="space-around" align="center" color="black">
+          <Stack gap="0">
+            <Anchor href="https://github.com/aliquickc">
+              <Group>
+                <IconBrandGithub />
+                aliquickc
+              </Group>
+            </Anchor>
+            <Anchor href="https://github.com/xomkalol">
+              <Group>
+                <IconBrandGithub />
+                xomkalol
+              </Group>
+            </Anchor>
+            <Anchor href="https://github.com/sashawl">
+              <Group>
+                <IconBrandGithub />
+                sashawl
+              </Group>
+            </Anchor>
+          </Stack>
+          <Box>©2025</Box>
+          <Box>
+            <Anchor href="https://rs.school/courses/reactjs">
+              <Image
+                src="https://raw.githubusercontent.com/rolling-scopes-school/tasks/260b39cca721aa5c822ed2b026d6584a78948b0d/react/assets/rss-logo.svg"
+                alt="rs-logo"
+                width={40}
+                height={40}
+                fit="contain"
+              />
+            </Anchor>
+          </Box>
+        </Group>
+      </footer>
+    </Box>
   );
 }

src/components/Header/Header.module.css

@@ -0,0 +1,44 @@
+.header {
+  height: 90px;
+  padding-left: var(--mantine-spacing-md);
+  padding-right: var(--mantine-spacing-md);
+}
+
+.headerBox {
+  position: sticky;
+  top: 0;
+  z-index: 10;
+  background-color: white;
+  box-shadow: none;
+  transition: all 0.3s ease;
+  margin-bottom: 60px;
+  border-bottom: 1px solid
+    light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-4));
+}
+
+.scrolled {
+  padding-top: 0;
+  background-color: #ccc6c6;
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+}
+
+.link {
+  display: flex;
+  align-items: center;
+  height: 100%;
+  padding-left: var(--mantine-spacing-md);
+  padding-right: var(--mantine-spacing-md);
+  text-decoration: none;
+  color: light-dark(var(--mantine-color-black), var(--mantine-color-white));
+  font-weight: 500;
+  font-size: var(--mantine-font-size-sm);
+
+  @media (max-width: mantine-breakpoint-sm) {
+    height: 42px;
+    width: 100%;
+  }
+}
+
+.link:hover {
+  background-color: rgb(243, 238, 238);
+}