create footer and fix header

.idea/inspectionProfiles/Project_Default.xml

@@ -2,5 +2,21 @@
   <profile version="1.0">
     <option name="myName" value="Project Default" />
     <inspection_tool class="Eslint" enabled="true" level="WARNING" enabled_by_default="true" />
+    <inspection_tool class="HtmlUnknownTag" enabled="true" level="WARNING" enabled_by_default="true">
+      <option name="myValues">
+        <value>
+          <list size="7">
+            <item index="0" class="java.lang.String" itemvalue="nobr" />
+            <item index="1" class="java.lang.String" itemvalue="noembed" />
+            <item index="2" class="java.lang.String" itemvalue="comment" />
+            <item index="3" class="java.lang.String" itemvalue="noscript" />
+            <item index="4" class="java.lang.String" itemvalue="embed" />
+            <item index="5" class="java.lang.String" itemvalue="script" />
+            <item index="6" class="java.lang.String" itemvalue="import" />
+          </list>
+        </value>
+      </option>
+      <option name="myCustomValuesEnabled" value="true" />
+    </inspection_tool>
   </profile>
 </component>

src/App.js

@@ -2,14 +2,15 @@ import './App.scss';
 import {Router, Route, Link, Redirect} from 'react-router-dom';
 import createHistory from "history/createBrowserHistory";
 import Header from "./components/Header";
-
+import Footer from "./components/Footer";
 
 const history = createHistory();
 
 function App() {
   return (
       <Router history={history}>
-       <Header/>
+          <Header/>
+          <Footer/>
       </Router>
   )
 }

src/components/Footer.jsx

@@ -0,0 +1,157 @@
+import {Container, Typography, Link, Grid, Box, useMediaQuery} from "@mui/material";
+import LocalPhoneIcon from '@mui/icons-material/LocalPhone';
+import LocationOnIcon from '@mui/icons-material/LocationOn';
+import EmailIcon from '@mui/icons-material/Email';
+import WatchLaterIcon from '@mui/icons-material/WatchLater';
+import FacebookIcon from '@mui/icons-material/Facebook';
+import InstagramIcon from '@mui/icons-material/Instagram';
+import TwitterIcon from '@mui/icons-material/Twitter';
+import YouTubeIcon from '@mui/icons-material/YouTube';
+import LinkRouter from "react-router-dom/es/Link";
+import background from "../img/footer/bg-footer.png"
+import "../scss/Footer.scss"
+
+
+const contactDefault = [
+    {'icon': LocalPhoneIcon, 'text': '+123 488 9652', 'url': '#'},
+    {'icon': LocationOnIcon, 'text': '25 West 21th Street, Miami FL, USA', 'url': '#'},
+    {'icon': EmailIcon, 'text': 'info@abraxas.com', 'url': '#'},
+    {'icon': WatchLaterIcon, 'text': 'Mon-Fri: 10:00 - 18:00', 'url': '#'}
+]
+const linksSocialDefault = [
+    {'icon': FacebookIcon, 'url': 'https://www.facebook.com/'},
+    {'icon': InstagramIcon, 'url': 'https://www.instagram.com/'},
+    {'icon': TwitterIcon, 'url': 'https://twitter.com/home'},
+    {'icon': YouTubeIcon, 'url': 'https://www.youtube.com/'},
+]
+
+const Contact = ({Icon, text, link}) => {
+    return (
+        <Typography
+            color="inherit"
+            variant="h6"
+            noWrap
+            component="div"
+        >
+            <Link
+                className='Footer__Contact'
+                display="flex"
+                flexDirection="row"
+                alignItems="center"
+                textAlign="left"
+                padding="10px 0"
+                component="a"
+                variant="body2"
+                color="#fff"
+                underline="none"
+                href={link}
+            >
+                <Icon />
+                {text}
+            </Link>
+        </Typography>
+    )
+}
+const Social = ({Icon, link}) => {
+    return (
+        <Link
+            className='Footer__Social'
+            marginRight="30px"
+            component="a"
+            variant="body2"
+            href={link}
+            color="#969696"
+            underline="none"
+        >
+            <Icon />
+        </Link>
+    )
+}
+
+const Footer = ({contact=contactDefault, linksSocial=linksSocialDefault}) => {
+    const matches = useMediaQuery('(max-width:899px)');
+    const matches2 = useMediaQuery('(max-width:450px)');
+    return (
+        <footer
+            className="Footer"
+            style={{background: `url(${background}) center repeat`, padding: "40px 0"}}
+        >
+            <Container maxWidth="lg">
+                <Grid container spacing={{ xs: 2, md: 3 }} columns={{ xs: 1, sm: 8, md: 12 }}>
+                    <Grid
+                        item
+                        sm={12} md={4}
+                        width={matches ? "100%" : "auto"}
+                    >
+                        {(contact || []).map(item =>
+                            <Contact Icon={item.icon} text={item.text} link={item.url}/>
+                        )}
+                    </Grid>
+                    <Grid
+                        item
+                        sm={12} md={4}
+                        display="flex"
+                        flexDirection="column"
+                        alignItems="center"
+                        justifyContent="center"
+                        width={matches ? "100%" : "auto"}
+                    >
+                        <Typography
+                            variant="h4"
+                            textAlign="center"
+                            marginBottom="20px"
+                        >
+                            <LinkRouter to='/' className="Footer__Logo"> ABRAXAS </LinkRouter>
+                        </Typography>
+                        <Box>
+                            {(linksSocial || []).map(item =>
+                                <Social Icon={item.icon} link={item.url}/>
+                            )}
+                        </Box>
+                    </Grid>
+                    <Grid
+                        item
+                        sm={12} md={4}
+                        display="flex"
+                        justifyContent={matches ? "center" : "end"}
+                        width={matches ? "100%" : "auto"}
+                    >
+                        <Typography
+                            variant="body1"
+                            textAlign={matches ? "center" : "right"}
+                            color="#969696"
+                            fontSize="14px"
+                            maxWidth="275px"
+                            lineHeight="1.7em"
+                        >
+                            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid, animi consectetur, dicta dolore doloremque eum exercitationem illum incidunt inventore ipsam itaque, modi odio odit quo sed sint suscipit vitae voluptates.
+                        </Typography>
+                    </Grid>
+                </Grid>
+                <Box
+                    display="flex"
+                    flexDirection={matches2 ? "column-reverse" : "row"}
+                    alignItems="center"
+                    justifyContent="space-between"
+                    marginTop="30px"
+                >
+                    <Typography
+                        variant="body2"
+                        color="#969696"
+                        fontSize="13px"
+                    >
+                        © 2022 ABRAXAS. All rights reserved.
+                    </Typography>
+                    <Typography
+                        variant="body2"
+                        marginBottom={matches2 ? "10px" : "0"}
+                    >
+                        <LinkRouter to='/privacy-policy' className="Footer__Bottom-link"> PRIVACY POLICY </LinkRouter>
+                        <LinkRouter to='/faq' className="Footer__Bottom-link"> FAQ </LinkRouter>
+                    </Typography>
+                </Box>
+            </Container>
+        </footer>
+    )
+}
+export default Footer;

src/components/Header.jsx

@@ -1,23 +1,12 @@
-import * as React from 'react';
-import AppBar from '@mui/material/AppBar';
-import Box from '@mui/material/Box';
-import Toolbar from '@mui/material/Toolbar';
-import IconButton from '@mui/material/IconButton';
-import Typography from '@mui/material/Typography';
-import Menu from '@mui/material/Menu';
+import {AppBar, Box, Toolbar, IconButton, Typography, Menu, Container, Avatar, Button, Tooltip, MenuItem, Badge} from '@mui/material';
 import MenuIcon from '@mui/icons-material/Menu';
-import Container from '@mui/material/Container';
-import Avatar from '@mui/material/Avatar';
-import Button from '@mui/material/Button';
-import Tooltip from '@mui/material/Tooltip';
-import MenuItem from '@mui/material/MenuItem';
 import SearchIcon from '@mui/icons-material/Search';
 import FavoriteBorderIcon from '@mui/icons-material/FavoriteBorder';
 import ShoppingCartIcon from '@mui/icons-material/ShoppingCart';
 import ManageSearchIcon from '@mui/icons-material/ManageSearch';
 import Link from "react-router-dom/es/Link";
-import '../scss/Header.scss';
 import {useState} from "react";
+import '../scss/Header.scss';
 
 const pages = ['catalog', 'about us', 'our team', 'faq', 'contact'];
 const settings = ['Profile', 'Account', 'Dashboard', 'Logout'];
@@ -59,7 +48,7 @@ const Header = () => {
             </Button>
         )
     }
-    const IconItems = ({size="large", color='default'}) => {
+    const IconItems = ({size="large", color='default', valueWishList=0, valueBasket=0}) => {
         return (
             <>
                 <Link to='/search'>
@@ -74,12 +63,30 @@ const Header = () => {
                 </Link>
                 <Link to='/wish-list'>
                     <IconButton size={size} aria-label="wish-list" color={color}>
-                        <FavoriteBorderIcon />
+                        <Badge
+                            color="success"
+                            badgeContent={valueWishList}
+                            anchorOrigin={{
+                                vertical: 'bottom',
+                                horizontal: 'right',
+                            }}
+                        >
+                            <FavoriteBorderIcon />
+                        </Badge>
                     </IconButton>
                 </Link>
                 <Link to='/basket'>
                     <IconButton size={size} aria-label="basket" color={color}>
-                        <ShoppingCartIcon />
+                        <Badge
+                                color="success"
+                                badgeContent={valueBasket}
+                                anchorOrigin={{
+                                    vertical: 'bottom',
+                                    horizontal: 'right',
+                                }}
+                        >
+                            <ShoppingCartIcon/>
+                        </Badge>
                     </IconButton>
                 </Link>
             </>
@@ -87,7 +94,7 @@ const Header = () => {
     }
 
     return (
-        <AppBar className='Header' position="fixed">
+        <AppBar sx={{padding: '10px 0'}} className='Header' position="fixed" enableColorOnDark={true}>
             <Container maxWidth="xl">
                 <Toolbar disableGutters>
                     {/*Основной логотип*/}

src/scss/Footer.scss

@@ -0,0 +1,86 @@
+.Footer {
+  &__Contact {
+    transition: opacity 0.3s linear,visibility 0.3s linear,color 0.15s linear,border-color 0.15s linear,background-color 0.15s linear,box-shadow 0.15s linear;
+    &:hover {
+      color: #969696;
+    }
+    svg {
+      width: 13px;
+      height: 13px;
+      margin-right: 15px;
+    }
+    @media (max-width: 899px) {
+      & {
+        display: flex;
+        text-align: left;
+        justify-content: center;
+      }
+    }
+  }
+  &__Logo {
+    margin-right: -13px;
+    text-align: center;
+    font-family: inherit;
+    text-decoration: none;
+    font-size: 27px;
+    letter-spacing: 13px;
+    font-weight: 400;
+    color: rgba(255, 255, 255, 0.54);
+    user-select: none;
+    text-transform: uppercase;
+    @media (max-width: 1100px) {
+      & {
+        font-size: 24px;
+        margin-right: -10px;
+        letter-spacing: 10px;
+      }
+    }
+    @media (max-width: 425px) {
+      & {
+        font-size: 22px;
+        margin-right: -7px;
+        letter-spacing: 7px;
+      }
+    }
+  }
+  &__Social {
+    &:last-child {
+      margin: 0!important;
+    }
+    svg {
+      width: 20px;
+      height: 20px;
+      transition: 0.3s;
+      &:hover {
+        fill: #fafafa;
+      }
+    }
+  }
+  &__Bottom-link {
+    font-size: 13px;
+    text-transform: uppercase;
+    margin-right: 30px;
+    text-decoration: none;
+    color: #fff;
+    position: relative;
+    transition: opacity 0.3s linear,visibility 0.3s linear,color 0.15s linear,border-color 0.15s linear,background-color 0.15s linear,box-shadow 0.15s linear;
+    &:hover {
+      color: #969696;
+    }
+    &:last-child{
+      margin: 0;
+      &::after {
+        background-color: #000;
+      }
+    }
+    &::after {
+      content: "";
+      width: 2px;
+      height: 2px;
+      background-color: #fff;
+      position: absolute;
+      top: 7px;
+      right: -15px;
+    }
+  }
+}