feat: Added style to"star on github" button on landing page (#76)

* feat:style the star on github button Signed-off-by: akshat99812 <[email protected]> * feat/buttonChages Signed-off-by: akshat99812 <[email protected]> --------- Signed-off-by: akshat99812 <[email protected]> Co-authored-by: Neha Gupta <[email protected]>
keploy · Sep 3, 2024 · 470426f · 470426f
1 parent 4dd1202
commit 470426f
Show file tree

Hide file tree

Showing 4 changed files with 51 additions and 31 deletions.
diff --git a/components/ui/header.tsx b/components/ui/header.tsx
@@ -9,6 +9,7 @@ import CountingNumbers from "../utils/countingNumbers";
 import { isTypeOfExpression } from "typescript";
 import NavItemWithSmallDropdown, {DropdowndataInterface,LinkDatainterface} from "@/components/nav/navItemWithSmallDropdown";
 import { PillarPages } from "../utils/resources";
+import { StarIcon } from "@heroicons/react/24/solid";
 export default function Header() {
   const [top, setTop] = useState<boolean>(true);
   const [starsCount, setStarsCount] = useState<number>(1000);
@@ -106,7 +107,10 @@ export default function Header() {
             </ul>
           </nav>
           <div className="header-btn-container flex-grow-0 w-4/12 justify-end hidden lg:flex">
-            <div className="border border-primary-400 rounded-md overflow-hidden p-2.5 border-opacity-40 ">
+          <div className="border border-primary-400 rounded-md overflow-hidden p-2.5 border-opacity-40 relative transition-all  group">
+              {/* Sliding effect span */}
+              <span className="absolute right-0 -mt-12 h-32 w-8 translate-x-12 rotate-12 bg-orange-500 opacity-10 transition-transform duration-1000 ease-out 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"
@@ -127,13 +131,14 @@ export default function Header() {
                     fillRule="evenodd"
                   />
                 </svg>
-                <span className="text-gradient-500 opacity-30 hover:text-primary-500">
-                  {" "}
-                  |
+                <span className="text-gradient-500 opacity-30 hover:text-primary-500"> | </span>
+                <span className="text-base flex gap-1">
+                  <StarIcon className="size-4 text-yellow-300 transition-all duration-300 group-hover:filter group-hover:drop-shadow-[0_0_2px_#FFD700]" />
                 </span>
-                <span className="text-base flex gap-1"> ⭐️ <CountingNumbers className="" /></span>
+                <span className="text-base flex gap-1"> <CountingNumbers className="" /></span>
               </Link>
             </div>
+
             <Link
               href="https://forms.gle/waYcLSASm9dfE9tC9"
               target="_blank"

diff --git a/components/ui/mobile-menu.tsx b/components/ui/mobile-menu.tsx
@@ -8,6 +8,7 @@ import Image from "next/image";
 import { UpIcon } from "../nav/UpIcon";
 import DownIcon from "../nav/DownIcon";
 import { PillarPages } from "../utils/resources";
+import { StarIcon } from "@heroicons/react/24/solid";
 interface MobileMenuProps {
   starsCount: number;
 }
@@ -96,34 +97,37 @@ const MobileMenu: React.FC<MobileMenuProps> = ({ starsCount }) => {
 
           <ul className="px-5 py-2">
             <li>
-              <div className="border border-primary-400 rounded overflow-hidden p-2 border-opacity-25 sm:border-opacity-100">
-                <Link
-                  className="flex items-center ml-4 mt-2 gap-2 text-sm text-primary-400 font-extrabold transition-colors hover:text-primary-300"
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  aria-label="Keploy Github Repo"
-                  data-radix-collection-item=""
-                  href="https://www.github.com/keploy/keploy"
+            <div className="border border-primary-400 rounded-md overflow-hidden p-2.5 border-opacity-40 relative transition-all  group">
+              {/* Sliding effect span */}
+              <span className="absolute right-0 -mt-12 h-32 w-8 translate-x-12 rotate-12 bg-orange-500 opacity-10 transition-transform duration-1000 ease-out 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"
+                  viewBox="0 0 16 16"
+                  xmlns="http://www.w3.org/2000/svg"
                 >
-                  <svg
-                    className="h-5 w-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-primary-500">
-                  {" "}
-                  |
+                  <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">
+                  <StarIcon className="size-4 text-yellow-300 transition-all duration-300 group-hover:filter group-hover:drop-shadow-[0_0_2px_#FFD700]" />
                 </span>
-                  <span className="text-base flex gap-1"> ⭐️ <CountingNumbers start={starsCount} className="" /></span>
-                </Link>
-              </div>
+                <span className="text-base flex gap-1"> <CountingNumbers className="" /></span>
+              </Link>
+            </div>
               {/*<Link href="/privacy-policy" className="font-medium text-gray-600 hover:text-gray-900 px-5 py-3 flex items-center transition duration-150 ease-in-out">Github</Link>*/}
             </li>
             <li>

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -18,6 +18,7 @@
     "@fortawesome/react-fontawesome": "^0.2.0",
     "@gsap/react": "^2.1.0",
     "@headlessui/react": "^1.7.14",
+    "@heroicons/react": "^2.1.5",
     "@lottiefiles/react-lottie-player": "^3.5.3",
     "@mui/icons-material": "^5.15.14",
     "@mui/material": "^5.15.15",