Updated UI of blog-website navbar to match main site theme

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 { StarIcon } from "@heroicons/react/24/solid";
+import CountingNumbers from "../utils/countingNumbers";
 const menuItems = [
   { text: "Docs", link: "https://keploy.io/docs" },
   { text: "Tech Blogs", link: "/technology" },
@@ -16,46 +18,44 @@ const formatStars = (num: number) =>
       maximumFractionDigits: 1,
     }).format(num);
 
-const WaitListBtn = ({ mobile }: { mobile?: Boolean }) => {
-  if (mobile) {
-    return (
-      <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"
-      >
-        <span>Sign In</span>
-        <svg
-          className="w-3 h-3 ml-2 -mr-1 fill-current hover:text-primary-300 shrink-0"
-          viewBox="0 0 12 12"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path
-            d="M11.707 5.293L7 .586 5.586 2l3 3H0v2h8.586l-3 3L7 11.414l4.707-4.707a1 1 0 000-1.414z"
-            fillRule="nonzero"
-          />
-        </svg>
-      </Link>
-    );
-  }
-  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>
-  );
-};
-
+    const WaitListBtn = ({ mobile }: { mobile?: Boolean }) => {
+      if (mobile) {
+        return (
+          <Link
+            href="https://app.keploy.io/signin"
+            target="_blank"
+            className="inline-flex items-center p-3 text-xl rounded-3xl text-white bg-primary-300 ring-2 ring-primary-300 font-semibold hover:bg-orange-500">
+            <span>Sign In </span>
+            <svg
+              className="w-3 h-3 ml-2 -mr-1 fill-current hover:text-primary-300 shrink-0"
+              viewBox="0 0 12 12"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M11.707 5.293L7 .586 5.586 2l3 3H0v2h8.586l-3 3L7 11.414l4.707-4.707a1 1 0 000-1.414z"
+                fillRule="nonzero"
+              />
+            </svg>
+          </Link>
+        );
+      }
+      return (
+        <Link
+  href="https://app.keploy.io/signin"
+  target="_blank"
+  className="py-1.5 px-6 rounded-full text-white text-lg font-semibold bg-gradient-to-r from-orange-500 to-red-500 shadow-md transition-all duration-300 text-center flex items-center justify-center hover:bg-gradient-to-l"
+>
+  <span>Sign In</span>
+</Link>
+      );
+    };
 const GithubBtn = () => {
   const [stars, setStars] = useState<number>(5412);
 
   useEffect(() => {
     const init = async () => {
       try {
-        const response = await fetch(
-          "https://api.github.com/repos/keploy/keploy"
-        );
+        const response = await fetch("https://api.github.com/repos/keploy/keploy");
         const data = await response.json();
         setStars(data.stargazers_count);
       } catch (err) {
@@ -64,33 +64,32 @@ const GithubBtn = () => {
     };
     init();
   }, []);
-
-  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"
+return (
+  <div className="relative overflow-hidden rounded-full transition-all duration-500 group">
+<div className="rounded-full px-5 py-1.5 border-2 border-transparent transition-all duration-500 group-hover:bg-[#FCEFE5] group-hover:border-[#f5a26f] group-hover:border-opacity-70">
+<span className="absolute -left-10 top-0 h-full w-20 bg-gradient-to-r from-transparent via-orange-400 to-transparent opacity-0 transition-transform duration-700 ease-out group-hover:translate-x-[200%] group-hover:opacity-40" />
+    <Link
+  className="flex items-center gap-1.5 text-sm font-extrabold transition-colors duration-500 group-hover:text-black"
+  rel="noopener noreferrer"
+        aria-label="Keploy Github Repo"
         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>
+        <svg className="h-6 w-6 text-black transition-none" 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 className="text-base font-medium flex gap-1 group-hover:text-orange-500 transition-colors duration-500">
+          <StarIcon className="size-4 text-yellow-300 transition-all duration-300 group-hover:filter group-hover:drop-shadow-[0_0_2px_#FFD700]" />
+          <CountingNumbers className="" />
         </span>
       </Link>
-    </button>
+    </div>
+    </div>
   );
 };
 
@@ -124,24 +123,23 @@ export default function Header({
       <header className="fixed z-30 w-full transition duration-300 ease-in-out bg-neutral-100 md:bg-opacity-90 ">
         <div className="max-w-6xl px-5 mx-auto sm:px-6">
           <div className="flex items-center justify-between h-16 md:h-20">
-            <div className="flex-grow-0 w-2/12 mr-4 shrink-0">
-              <Link href={"https://keploy.io/"}>
+          <div className="shrink-0">             <Link href={"https://keploy.io/"}>
                 <Image
                   src={sideBySideSvg}
                   alt="Keploy Logo"
-                  className="w-auto h-10"
+                  className="w-auto h-10 -mt-2"
                 />
               </Link>
             </div>
-            <nav className="flex-grow-0 hidden w-6/12 lg:flex ">
-              <ul className="flex flex-wrap items-center justify-end grow">
+            <nav className="hidden lg:flex ml-8">
+            <ul className="flex items-center space-x-2">
                 {menuItems.map((item, index) => {
                   return (
                     <li key={index}>
                       <Link
                         href={item.link}
-                        className="flex items-center flex-grow-0 px-5 py-3 font-medium text-gray-600 transition duration-150 ease-in-out hover:text-primary-300 lg:flex"
-                      >
+                        className="flex items-center px-5 py-5 font-medium text-gray-700 transition-colors duration-200 hover:text-black"
+                        >
                         {item.text}
                       </Link>
                     </li>
@@ -150,11 +148,15 @@ export default function Header({
               </ul>
             </nav>
 
-            <div className="justify-end flex-1 hidden header-btn-container lg:flex">
-              <GithubBtn />
+            <div className="justify-end flex-1 hidden header-btn-container lg:gap-4 lg:flex pt-3.5 ">
+                <GithubBtn />
               <WaitListBtn />
             </div>
-            <div className="flex lg:hidden">
+            <div className="flex items-center lg:hidden">
+              <div className="flex items-center space-x-4 mr-4">
+              <GithubBtn />
+              <WaitListBtn />
+              </div>
               <button
                 onClick={toggleMenuHandler}
                 className={toggleMenu ? "hamburger active" : "hamburger "}
@@ -167,24 +169,20 @@ export default function Header({
                 {toggleMenu ? (
                   <nav className="absolute left-0 z-20 flex-grow-0 w-full h-screen pb-16 overflow-scroll translate-y-0 bg-white opacity-100 top-full">
                     <ul className="px-5 py-2">
-                      <li>
-                        <GithubBtn />
-                      </li>
+
                       {menuItems.map((item, index) => {
                         return (
                           <li key={index}>
                             <Link
                               href={item.link}
-                              className="flex items-center px-5 py-3 font-medium text-gray-600 transition duration-150 ease-in-out hover:text-primary-300"
-                            >
+                              className="flex items-center px-5 py-5 font-medium text-gray-700 transition-colors duration-200 hover:text-black"
+                              >
                               {item.text}
                             </Link>
                           </li>
                         );
                       })}
-                      <li>
-                        <WaitListBtn mobile={true} />
-                      </li>
+
                     </ul>
                   </nav>
                 ) : null}
@@ -207,4 +205,4 @@ export default function Header({
       </header>
     </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",

styles/index.css

@@ -222,4 +222,6 @@ pre {
 td{
   border: solid 1px black;
   padding: 5px;
-}
+}
+
+

utils/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>;
+}