next-app/app/components/logo.tsx

const Logo = () => {
  return (
    <div style={{ display:"flex", alignItems: 'center', justifyContent: 'center', marginLeft: "40px", marginRight: "40px"}}>
      <a href="/" style={{ marginBottom: '40px', marginLeft: '40px' }}>
        <img src="/logo-no-background.png" height="auto" width="400px"/>
      </a>
      <div style={{ marginBottom: '40px', marginRight: '40px' }}></div>
      <a
            href="/about-us"  
            className="rounded-md bg-white text-sm font-semibold text-gray-900 shadow-sm hover:bg-gray-100 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white"
            style={{ marginBottom: '40px', marginRight: '40px', padding: '10px' }}
        >
            About us
        </a>
    </div>
  )
}

export default Logo;