app/components/logo.tsx

@@ -1,5 +1,6 @@
 'use client';
 import { Transition } from "@headlessui/react";
+import { motion } from "framer-motion";
 import { useState } from "react";
 
 const Logo = () => {
@@ -18,20 +19,23 @@ const Logo = () => {
         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'}}
+        <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"/>
-        </a>
+        </motion.a>
       {/* </Transition> */}
       <div style={{ marginBottom: '40px', marginRight: '40px' }}></div>
-      <a
+      <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
-        </a>
+        </motion.a>
     </div>
   )
 }

package-lock.json

@@ -10,6 +10,7 @@
       "dependencies": {
         "@headlessui/react": "^2.0.4",
         "@heroicons/react": "^2.1.3",
+        "framer-motion": "^11.2.10",
         "next": "14.2.3",
         "react": "^18",
         "react-dom": "^18",
@@ -2245,6 +2246,30 @@
         "url": "https://github.com/sponsors/isaacs"
       }
     },
+    "node_modules/framer-motion": {
+      "version": "11.2.10",
+      "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-11.2.10.tgz",
+      "integrity": "sha512-/gr3PLZUVFCc86a9MqCUboVrALscrdluzTb3yew+2/qKBU8CX6nzs918/SRBRCqaPbx0TZP10CB6yFgK2C5cYQ==",
+      "dependencies": {
+        "tslib": "^2.4.0"
+      },
+      "peerDependencies": {
+        "@emotion/is-prop-valid": "*",
+        "react": "^18.0.0",
+        "react-dom": "^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@emotion/is-prop-valid": {
+          "optional": true
+        },
+        "react": {
+          "optional": true
+        },
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/fs.realpath": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",

package.json

@@ -11,6 +11,7 @@
   "dependencies": {
     "@headlessui/react": "^2.0.4",
     "@heroicons/react": "^2.1.3",
+    "framer-motion": "^11.2.10",
     "next": "14.2.3",
     "react": "^18",
     "react-dom": "^18",