amber/src/components/Header/Header.jsx

import React from 'react';
import { styled } from '@mui/material/styles';
import { Box, Typography } from '@mui/material';
import InstagramIcon from '@mui/icons-material/Instagram';
import FacebookIcon from '@mui/icons-material/Facebook';
import TwitterIcon from '@mui/icons-material/Twitter';
import PinterestIcon from '@mui/icons-material/Pinterest';

const Container = styled(Box)(({theme})=>({
    backgroundColor: theme.palette.primary.main,
    paddingTop: 20,
    paddingBottom: 20,
    width: "100%",
    display:"flex",
    position:"relative",
    minHeight:"fit-content",
    [`@media (max-width: ${theme.breakpoints.values.md}px)`]: {
        display: "none"
    },
}))


const Header = () => {

    return (
        <Container>
            <Box sx={{color:"white", px:23}}>
                <Box sx={{display:"flex", gap:1}}>
                    <InstagramIcon style={{ fontSize: 20 }} />
                    <FacebookIcon style={{ fontSize: 20 }} />
                    <TwitterIcon style={{ fontSize: 20 }} />
                    <PinterestIcon style={{ fontSize: 20 }} />
                </Box>
                <Typography variant="body2" sx={{position: "absolute", top: "50%", left: "50%", transform: "translate(-50%, -50%)" }}>Don’t miss out on our next big thing! Click here to subcribe now.</Typography>
            </Box>
        </Container>
    );
};

export default Header;