u-fit/frontend/src/app/components/Logo.tsx

import Link from 'next/link'

const Logo = () => (
  <Link href='/'>
    <a>
      <div id='logo'>
        <span id='circle'>˙u</span>
        <span id='text'>fit</span>
      </div>
      <style jsx>
        {`
          #logo {
            position: relative;
            height: 60px;
            width: 60px;
            color: white;
            background-color: red;
            border-radius: 30px;
            font-size: 40px;
            font-weight: 900;
            padding: 10px 0 0 15px;
          }

          a {
            text-decoration: none;
          }

          #text {
            color: black;
            margin-left: 3px;
          }
        `}
      </style>
    </a>
  </Link>
)

export default Logo