43 lines
No EOL
1.8 KiB
TypeScript
43 lines
No EOL
1.8 KiB
TypeScript
'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; |