leumas-private-shared/src/Components/Backgrounds/LeumasLogo.jsx

Private React JSX Package For Leumas Shared Components, Headers, Footers, Asides, Login Pages, API Key Manager and much more. Styles and everything reusable to avoid DRY code across all of our subdomains

import React from 'react';
import { styled, keyframes } from '@mui/system';

const wave = keyframes`
  0% {
    width: 26px;
    height: 26px;
  }
  100% {
    width: 500px;
    height: 500px;
  }
`;

const Logo = styled('div')`
  position: absolute;
  width: 246px;
  height: 80px;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  background-image: url("https://res.cloudinary.com/dx25lltre/image/upload/v1707175639/Leumas/Leumas_Tech_Logo_900_x_300_io3gk6.png");
  background-color: #39f;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  overflow: hidden;

  &::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    visibility: hidden;
    box-shadow:
      0 0 10px 5px rgba(255, 255, 255, 1),
      inset 0 0 10px 5px #fff;
  }

  &:hover::after {
    visibility: visible;
    animation: ${wave} 2s forwards;
  }
`;

const Info = styled('div')`
  position: absolute;
  bottom: 0;
  right: 0;
  padding: 3px 5px;
  font-style: italic;
  color: #999;

  a {
    color: inherit;
    text-decoration: none;
  }
`;

const LeumasLogo = () => (
  <div>
    <Logo id="logo" />
    <Info id="info">
      Leumas Tech
    </Info>
  </div>
);

export default LeumasLogo;