39 lines
No EOL
1.6 KiB
TypeScript
39 lines
No EOL
1.6 KiB
TypeScript
'use client';
|
|
import { Transition } from "@headlessui/react";
|
|
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"}> */}
|
|
<a href="/" style={{ marginBottom: '40px', marginLeft: '40px', transition: 'opacity', opacity: logoHovered ? 0.7 : 1 , animationDuration: '0.3s'}}
|
|
onMouseEnter={()=>setLogoHovered(true)}
|
|
onMouseLeave={()=>setLogoHovered(false)}>
|
|
<img src="/logo-no-background.png" height="auto" width="400px"/>
|
|
</a>
|
|
{/* </Transition> */}
|
|
<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; |