added animations and formated the code

src/components/Navbar.tsx

@@ -1,6 +1,6 @@
-'use client'
+"use client";
 
-import { usePathname } from 'next/navigation';
+import { usePathname } from "next/navigation";
 
 export default function Navbar() {
   const pathname = usePathname();
@@ -9,17 +9,35 @@ export default function Navbar() {
     <nav className="py-4 flex">
       <div className="mx-auto flex">
         <div className="space-x-4 text-white block font-bold">
-          <a href="/" className={"hover:text-red transition-colors duration-300" + (pathname === '/' ? ' text-red' : '')}>
+          <a
+            href="/"
+            className={
+              "hover:text-red transition-colors duration-300" +
+              (pathname === "/" ? " text-red" : "")
+            }
+          >
             Home
           </a>
-          <a href="/pricing" className={"hover:text-red transition-colors duration-300" + (pathname === '/pricing' ? ' text-red' : '')}>
+          <a
+            href="/pricing"
+            className={
+              "hover:text-red transition-colors duration-300" +
+              (pathname === "/pricing" ? " text-red" : "")
+            }
+          >
             Pricing
           </a>
-          <a href="/blog" className={"hover:text-red transition-colors duration-300" + (pathname === '/blog' ? ' text-red' : '')}>
+          <a
+            href="/blog"
+            className={
+              "hover:text-red transition-colors duration-300" +
+              (pathname === "/blog" ? " text-red" : "")
+            }
+          >
             Blog
           </a>
         </div>
       </div>
     </nav>
   );
-};
+}