Merge pull request #354 from HoomanDgtl/main

feat: pricing calculator revamp

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/CTA.astro

@@ -33,7 +33,7 @@ if (pathname.startsWith("/ecosystem/providers")) {
   class={`
   ${
     pathname.startsWith("/community/") ||
-    pathname.startsWith("/gpus") ||
+    pathname.startsWith("/pricing/gpus") ||
     pathname === "/akash-accelerate-2024"
       ? "hidden"
       : ""

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 md:px-4 md:py-2">
           Filter
           <svg
             xmlns="http://www.w3.org/2000/svg"

src/components/gpu-table/gpu-table.tsx

@@ -103,10 +103,10 @@ export const modifyModel = (model: string) => {
   return model === "rtxa6000"
     ? "A6000"
     : model?.includes("rtx")
-    ? model?.replace("rtx", "RTX ").replace("ti", " Ti")
-    : model?.includes("gtx")
-    ? model?.replace("gtx", "GTX ").replace("ti", " Ti")
-    : model;
+      ? model?.replace("rtx", "RTX ").replace("ti", " Ti")
+      : model?.includes("gtx")
+        ? model?.replace("gtx", "GTX ").replace("ti", " Ti")
+        : model;
 };
 
 export const price = (price: number) => {
@@ -376,8 +376,8 @@ export const Tables = ({
                               <HoverCardTrigger className="flex cursor-pointer items-center gap-1">
                                 <p className="flex items-center">
                                   <span
-                                    className="dark:text-[#3 E3E3E] text-base
-                        text-[#D7DBDF] md:text-xs"
+                                    className="text-base text-[#D7DBDF]
+                        dark:text-[#3E3E3E] md:text-xs"
                                   >
                                     Avg:
                                   </span>