feat: add new gpu pricing page

package.json

@@ -25,12 +25,18 @@
     "@radix-ui/react-collapsible": "^1.0.3",
     "@radix-ui/react-dropdown-menu": "^2.0.6",
     "@radix-ui/react-hover-card": "^1.0.7",
+    "@radix-ui/react-label": "^2.1.0",
     "@radix-ui/react-popover": "^1.0.7",
-    "@radix-ui/react-slider": "^1.1.2",
+    "@radix-ui/react-progress": "^1.1.0",
+    "@radix-ui/react-select": "^2.1.1",
+    "@radix-ui/react-slider": "^1.2.0",
+    "@radix-ui/react-slot": "^1.1.0",
     "@radix-ui/react-switch": "^1.0.3",
+    "@radix-ui/react-tabs": "^1.1.0",
     "@tailwindcss/typography": "^0.5.10",
     "@tanstack/react-query": "^4.29.7",
     "@tanstack/react-query-devtools": "^4.32.6",
+    "@types/lodash": "^4.17.7",
     "@types/react": "^18.0.21",
     "@types/react-dom": "^18.0.6",
     "astro": "^4.0.7",
@@ -41,6 +47,7 @@
     "clsx": "^2.0.0",
     "fuse.js": "^6.6.2",
     "hastscript": "^8.0.0",
+    "lodash": "^4.17.21",
     "lucide-react": "^0.279.0",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
@@ -55,6 +62,7 @@
     "swiper": "10.2.0",
     "tailwind-merge": "^1.14.0",
     "tailwindcss": "^3.0.24",
+    "tailwindcss-animate": "^1.0.7",
     "unist-util-remove": "^4.0.0",
     "unist-util-visit": "^5.0.0",
     "zustand": "^4.5.2"

src/components/gpu-table/filter.tsx

@@ -143,7 +143,7 @@ export default function Filter({
   return (
     <Popover as="div" className="relative inline-block text-left">
       <div>
-        <Popover.Button className="inline-flex w-full items-center justify-center gap-x-1.5 rounded-md border bg-background2 px-4 py-2 text-sm font-medium text-textGray shadow-sm">
+        <Popover.Button className="inline-flex w-full items-center justify-center gap-x-1.5 rounded-md border bg-background2 px-3 py-1.5 text-sm font-medium text-textGray shadow-sm">
           Filter
           <svg
             xmlns="http://www.w3.org/2000/svg"

src/components/header/hamburger-menu.tsx

@@ -30,11 +30,11 @@ const navigation = [
     name: "Development",
     href: "/development/welcome/",
   },
-  { name: "Ecosystem", href: "/ecosystem/showcase/latest" },
+  { name: "Ecosystem", href: "/ecosystem/showcase/latest/" },
   { name: "Community", href: "/community/akash-insiders/" },
   { name: "Blog", href: "/blog" },
   { name: "Docs", href: "/docs" },
-  { name: "GPU Pricing", href: "/gpus" },
+  { name: "Pricing & Earnings", href: "/pricing/" },
 ];
 
 export default function HamburgerMenu({

src/components/header/header.astro

@@ -6,6 +6,7 @@ import SunIcon from "@/assets/icons/sun.svg";
 // Import required components
 import Logo from "@/components/ui/logo.astro";
 import NavLink from "@/components/header/nav-link.astro";
+import { Badge } from "@/components/ui/badge";
 import { Image } from "astro:assets";
 import HamburgerMenu from "./hamburger-menu";
 import PopOverNavItem from "./popover-nav-item";
@@ -72,9 +73,17 @@ ${disableSticky ? "" : "sticky top-0 z-[30]"}
           Ecosystem
         </NavLink>
 
-        <NavLink href="/blog" currentPath={pathname}>Blog</NavLink>
-        <NavLink href="/docs" currentPath={pathname}>Docs</NavLink>
-        <NavLink href="/gpus" currentPath={pathname}>GPU Pricing</NavLink>
+        <NavLink href="/blog/" currentPath={pathname}>Blog</NavLink>
+        <NavLink href="/docs/" currentPath={pathname}>Docs</NavLink>
+        <NavLink href="/pricing/" currentPath={pathname}>
+          <div class="flex items-center gap-1">
+            <span class="text-sm font-medium">Pricing & Earnings</span>
+            <span
+              class="inline-flex items-center rounded-full bg-pink-50 dark:bg-background px-2 py-1 text-xs font-medium text-[#FF414C] ring-1 ring-inset ring-[#FF414C]"
+              >New GPUs</span
+            >
+          </div>
+        </NavLink>
       </div>
     </div>