next-app/app/components/logo.tsx

'use client';
import { Transition } from "@headlessui/react";
import { motion } from "framer-motion";
import { useState } from "react";

const Logo = () => {

  const [logoHovered, setLogoHovered] = useState( false );
  const [aboutButtonHovered, setAboutButtonHovered] = useState( false );

  return (
    <div style={{ display:"flex", alignItems: 'center', justifyContent: 'center', marginLeft: "40px", marginRight: "40px"}}>
      {/* <Transition
        appear={false}
        show={true}
        enter="transition-opacity duration-75"
        enterFrom={logoHovered ? "opacity-100" : "opacity-70"}
        enterTo={logoHovered ? "opacity-70" : "opacity-100"}
        leave="transition-opacity duration-75"
        leaveFrom={logoHovered ? "opacity-70" : "opacity-100"}
        leaveTo={logoHovered ? "opacity-100" : "opacity-70"}> */}
        <motion.a href="/" style={{ marginBottom: '40px', marginLeft: '40px'}} animate={{opacity: logoHovered ? 0.7 : 1}}
          onMouseEnter={()=>setLogoHovered(true)}
          onMouseLeave={()=>setLogoHovered(false)}>
          <img src="/logo-no-background.png" height="auto" width="400px"/>
        </motion.a>
      {/* </Transition> */}
      <div style={{ marginBottom: '40px', marginRight: '40px' }}></div>
      <motion.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' }}
            animate={{opacity: aboutButtonHovered ? 0.8 : 1}}
            onMouseEnter={()=>setAboutButtonHovered(true)}
            onMouseLeave={()=>setAboutButtonHovered(false)}
        >
            About us
        </motion.a>
    </div>
  )
}

export default Logo;