Update UI of navbar

components/CountingNumbers.tsx

@@ -0,0 +1,45 @@
+"use client";
+
+import { useEffect, useState } from "react";
+
+const formatStars = (num: number) =>
+  Intl.NumberFormat('en-US', {
+    notation: "compact",
+    maximumFractionDigits: 1,
+  }).format(num);
+
+interface CountingNumbersProps {
+  className: string;
+  reverse?: boolean;
+  start?: number;
+  interval?: number;
+  duration?: number;
+}
+
+export default function CountingNumbers({
+  className,
+}: CountingNumbersProps) {
+  const [starsCount, setStarsCount] = useState<number>(0);
+
+  useEffect(() => {
+    const fetchStarsCount = async () => {
+      try {
+        const response = await fetch(
+          "https://api.github.com/repos/keploy/keploy"
+        );
+        if (response.ok) {
+          const data = await response.json();
+          setStarsCount(data.stargazers_count);
+        } else {
+          console.error("Failed to fetch stars count", response.statusText);
+        }
+      } catch (error) {
+        console.error("Error fetching stars count:", error);
+      }
+    };
+
+    fetchStarsCount();
+  }, []);
+
+  return <p className={className}>{formatStars(starsCount)}</p>;
+}

components/NavItem.tsx

@@ -0,0 +1,14 @@
+
+interface NavItemProps {
+  name: string;
+}
+
+export default function NavItem({ name }: NavItemProps) {
+  return (
+    <div>
+      <h1 className={`font-bold  'text-gray-800' hover:text-primary-300`}>
+        {name}
+      </h1>
+    </div>
+  );
+}

components/header.tsx

@@ -4,6 +4,8 @@ import Link from "next/link";
 import { useEffect, useState } from "react";
 import sideBySideSvg from "../public/images/sidebyside-transparent.svg"
 import { SpringValue, animated } from "@react-spring/web";
+import CountingNumbers from "./CountingNumbers";
+
 const menuItems = [
   { text: "Docs", link: "https://keploy.io/docs" },
   { text: "Tech Blogs", link: "/technology" },
@@ -19,9 +21,10 @@ const formatStars = (num: number) =>
 const WaitListBtn = ({ mobile }: { mobile?: Boolean }) => {
   if (mobile) {
     return (
+      <div className="overflow-hidden p-1 border-opacity-100 relative transition-all  group">
       <Link
         href="https://www.app.keploy.io/signin"
-        className="inline-flex items-center py-2 px-4 rounded  text-gray-200 bg-[#00163d]  font-semibold ml-3"
+        className="btn-sm py-3 text-gray-800 hover:text-primary-400  rounded-md overflow-hidden p-2.5 border-opacity-40 relative transition-all  group"
       >
         <span>Sign In</span>
         <svg
@@ -35,19 +38,24 @@ const WaitListBtn = ({ mobile }: { mobile?: Boolean }) => {
           />
         </svg>
       </Link>
+      </div>
     );
   }
   return (
-    <Link
-      href="https://www.app.keploy.io/signin"
-      className="inline-flex py-2 px-4 rounded leading-[1.375rem] text-gray-200 bg-[#00163d]  hover:text-primary-300 ml-3"
-    >
-      <span>Sign In</span>
-    </Link>
+    <div className="ml-3 border border-primary-400 bg-primary-300 rounded-full overflow-hidden p-1 border-opacity-40 relative transition-all  group">
+              <span className="absolute right-0 -mt-12 h-32 w-8 translate-x-12 rotate-12 bg-gray-100 opacity-60 transition-transform duration-1000 ease-out group-hover:translate-x-[-290%]" />
+              <Link
+                href="https://app.keploy.io/signin"
+                target="_blank"
+                className="btn-sm py-3 text-gray-200  rounded-md overflow-hidden p-2.5 border-opacity-40 relative transition-all  group"
+              >
+                <span>Sign In</span>
+              </Link>
+            </div>
   );
 };
 
-const GithubBtn = () => {
+const GithubBtn = ({ mobile }: { mobile?: Boolean }) => {
   const [stars, setStars] = useState<number>(5412);
 
   useEffect(() => {
@@ -66,31 +74,37 @@ const GithubBtn = () => {
   }, []);
 
   return (
-    <button className="w-full p-2 overflow-hidden border border-orange-500 border-opacity-25 rounded lg:w-auto sm:border-opacity-100">
-      <Link
-        className="flex items-center gap-2 ml-4 text-sm font-extrabold text-orange-500 transition-colors lg:ml-0 hover:text-primary-300"
-        href="https://github.com/keploy/keploy"
-      >
-        <svg
-          className="w-5 h-5"
-          viewBox="0 0 16 16"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <title>Github Logo</title>
-          <path
-            d="M8 .2C3.6.2 0 3.8 0 8c0 3.5 2.3 6.5 5.5 7.6.4.1.5-.2.5-.4V14c-2.2.5-2.7-1-2.7-1-.4-.9-.9-1.2-.9-1.2-.7-.5.1-.5.1-.5.8.1 1.2.8 1.2.8.7 1.3 1.9.9 2.3.7.1-.5.3-.9.5-1.1-1.8-.2-3.6-.9-3.6-4 0-.9.3-1.6.8-2.1-.1-.2-.4-1 .1-2.1 0 0 .7-.2 2.2.8.6-.2 1.3-.3 2-.3s1.4.1 2 .3c1.5-1 2.2-.8 2.2-.8.4 1.1.2 1.9.1 2.1.5.6.8 1.3.8 2.1 0 3.1-1.9 3.7-3.7 3.9.3.4.6.9.6 1.6v2.2c0 .2.1.5.6.4 3.2-1.1 5.5-4.1 5.5-7.6-.1-4.4-3.7-8-8.1-8z"
-            fill="currentColor"
-            fillRule="evenodd"
-          />
-        </svg>
-        <span className="text-gradient-500 opacity-30 hover:text-orange-500">
-          |
-        </span>
-        <span className="flex gap-1 text-base">
-          ⭐️ <p>{formatStars(stars)}</p>
-        </span>
-      </Link>
-    </button>
+    <div className="rounded-full overflow-hidden p-2.5 border-opacity-40 relative transition-all  group lg:hover:border-2 hover:border-primary-400">
+              <span className="absolute right-0 -mt-12 h-32 w-8 translate-x-12 rotate-12 bg-orange-500 opacity-60 transition-transform duration-1000 ease-out lg:group-hover:translate-x-[-400%]" />
+              <Link
+                className="flex items-center gap-2 text-sm text-primary-400 font-extrabold transition-colors hover:text-primary-500"
+                target="_blank"
+                rel="noopener noreferrer"
+                aria-label="Keploy Github Repo"
+                data-radix-collection-item=""
+                href="https://www.github.com/keploy/keploy"
+              >
+                <svg
+                  className={`h-5 w-5 text-gray-700`}
+                  viewBox="0 0 16 16"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <title>Github Logo</title>
+                  <path
+                    d="M8 .2C3.6.2 0 3.8 0 8c0 3.5 2.3 6.5 5.5 7.6.4.1.5-.2.5-.4V14c-2.2.5-2.7-1-2.7-1-.4-.9-.9-1.2-.9-1.2-.7-.5.1-.5.1-.5.8.1 1.2.8 1.2.8.7 1.3 1.9.9 2.3.7.1-.5.3-.9.5-1.1-1.8-.2-3.6-.9-3.6-4 0-.9.3-1.6.8-2.1-.1-.2-.4-1 .1-2.1 0 0 .7-.2 2.2.8.6-.2 1.3-.3 2-.3s1.4.1 2 .3c1.5-1 2.2-.8 2.2-.8.4 1.1.2 1.9.1 2.1.5.6.8 1.3.8 2.1 0 3.1-1.9 3.7-3.7 3.9.3.4.6.9.6 1.6v2.2c0 .2.1.5.6.4 3.2-1.1 5.5-4.1 5.5-7.6-.1-4.4-3.7-8-8.1-8z"
+                    fill="currentColor"
+                    fillRule="evenodd"
+                  />
+                </svg>
+                <span className="text-gradient-500 opacity-30 hover:text-primary-500"> | </span>
+                <span className="text-base flex gap-1">
+                  ⭐
+                </span>
+                <span className="text-base flex gap-1">
+                  <CountingNumbers className={`font bold text-black`} />
+                </span>
+              </Link>
+            </div>
   );
 };
 

package.json

@@ -14,6 +14,7 @@
     "@codemirror/lang-python": "^6.1.6",
     "@codemirror/view": "^6.34.1",
     "@gsap/react": "^2.1.0",
+    "@heroicons/react": "^2.2.0",
     "@lottiefiles/react-lottie-player": "^3.5.3",
     "@react-spring/web": "^9.7.3",
     "@types/node": "^18.6.3",