Repository: Jeezman/StratumRevolution
Pull request #22: Refactor : Matched navbar to new design 
Author: login: Abhijay007
Created: 2025-04-01T06:16:54Z | Merged: 2025-04-03T09:30:57Z

Fixes : #14 


Diff:
diff --git a/app/src/components/Navigation.tsx b/app/src/components/Navigation.tsx
index 611e36a..155c5a7 100644
--- a/app/src/components/Navigation.tsx
+++ b/app/src/components/Navigation.tsx
@@ -1,15 +1,27 @@
 import { useState } from 'react';
 import { Button } from '@/components/ui/button';
-import { Menu, X, Globe } from 'lucide-react';
+import {
+  Menu,
+  X,
+  Globe,
+  ChevronRight,
+  Pickaxe,
+  Share2,
+  Code,
+  Eye
+} from 'lucide-react';
 import { useTranslation } from 'react-i18next';
 import { motion, AnimatePresence } from 'framer-motion';
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from '@/components/ui/dropdown-menu';
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '@/components/ui/dropdown-menu';
 import { NavLink, useLocation } from 'react-router';
+import {
+  NavigationMenu,
+  NavigationMenuContent,
+  NavigationMenuItem,
+  NavigationMenuLink,
+  NavigationMenuList,
+  NavigationMenuTrigger
+} from '@/components/ui/navigation-menu';
 
 const languages = [
   { code: 'en', name: 'English' },
@@ -23,10 +35,18 @@ export function Navigation() {
   const location = useLocation();
 
   const navLinks = [
-    { to: '/miners', label: t('navigation.miners') },
-    { to: '/pools', label: t('navigation.pools') },
-    { to: '/developers', label: t('navigation.developers') },
-    { to: '/blog', label: 'Blog' },
+    { to: '/about', label: 'About' },
+    {
+      to: '/use-cases',
+      label: 'Use Cases',
+      children: [
+        { to: '/miners', label: 'For Miners', icon: Pickaxe },
+        { to: '/pools', label: 'For Pool Operators', icon: Share2 },
+        { to: '/developers', label: 'For Developers', icon: Code },
+      ]
+    },
+    { to: '/resources', label: 'Resources' },
+    { to: '/specifications', label: 'Specifications' },
   ];
 
   const changeLanguage = (lng: string) => {
@@ -34,16 +54,16 @@ export function Navigation() {
   };
 
   return (
-    <header className="fixed top-0 left-0 right-0 z-50 py-4 backdrop-blur-sm bg-background/80 border-b border-border/40">
+    <header className="fixed top-0 left-0 right-0 z-50 py-4">
       <nav
-        className="container mx-auto px-4"
+        className="container mx-auto px-4 flex justify-center"
         role="navigation"
         aria-label="Main navigation"
       >
-        <div className="flex items-center justify-between">
+        <div className="w-full flex items-center justify-between">
           {/* Logo */}
           <NavLink
-            className="text-foreground focus:outline-none focus:ring-2 focus:ring-cyan-500 rounded-lg p-1"
+            className="text-foreground focus:outline-none focus:ring-2 focus:ring-cyan-500 p-1"
             aria-label="Go to homepage"
             to="/"
           >
@@ -56,22 +76,59 @@ export function Navigation() {
             />
           </NavLink>
 
-          {/* Desktop Navigation */}
-          <div className="hidden md:flex items-center gap-8">
-            {navLinks.map(({ to, label }) => (
-              <NavLink key={to} to={to}>
-                <span
-                  className={`text-sm transition-colors focus:outline-none focus:ring-2 focus:ring-cyan-500 rounded-lg px-2 py-1 ${
-                    location
-                      ? 'text-foreground font-medium'
-                      : 'text-muted-foreground hover:text-foreground'
-                  }`}
-                >
-                  {label}
-                </span>
-              </NavLink>
-            ))}
+          {/* Desktop Navigation - Centered */}
+          <div className="hidden md:block absolute left-1/2 -translate-x-1/2">
+            <div className="bg-[#2F2F2F] backdrop-blur-sm">
+              <NavigationMenu className='h-10'>
+                <NavigationMenuList className="space-x-0 p-1">
+                  {navLinks.map((link) => (
+                    <NavigationMenuItem key={link.to} className="data-[state=open]:bg-[#000]">
+                      {link.children ? (
+                        <>
+                          <NavigationMenuTrigger className="text-gray-300 hover:text-white hover:bg-[#000] data-[state=open]:bg-[#000] data-[active]:bg-[#000]">
+                            {link.label}
+                          </NavigationMenuTrigger>
+                          <NavigationMenuContent>
+                            <ul className="grid w-[480px] p-0">
+                              {link.children.map((child) => (
+                                <li key={child.to} className="w-full">
+                                  <NavLink to={child.to}>
+                                    <div className="text-gray-300 hover:text-white hover:bg-[#000] cursor-pointer px-4 py-4 flex items-center justify-between group border-b border-[#333333] last:border-none">
+                                      <div className="flex items-center gap-3">
+                                        {child.icon && <child.icon className="w-5 h-5" />}
+                                        <span className="text-sm font-normal">
+                                          {child.label}
+                                        </span>
+                                      </div>
+                                      <ChevronRight className="w-4 h-4 opacity-50 group-hover:opacity-100 transition-opacity" />
+                                    </div>
+                                  </NavLink>
+                                </li>
+                              ))}
+                            </ul>
+                          </NavigationMenuContent>
+                        </>
+                      ) : (
+                        <NavigationMenuLink 
+                          asChild 
+                          className="text-gray-300 hover:text-white hover:bg-[#000] px-4 py-2 text-sm font-medium transition-colors focus:bg-[#000] focus:text-white focus:outline-none data-[active]:bg-[#000] data-[state=open]:bg-[#000]"
+                        >
+                          <NavLink to={link.to}>
+                            <span>
+                              {link.label}
+                            </span>
+                          </NavLink>
+                        </NavigationMenuLink>
+                      )}
+                    </NavigationMenuItem>
+                  ))}
+                </NavigationMenuList>
+              </NavigationMenu>
+            </div>
+          </div>
 
+          {/* Right side buttons */}
+          <div className="hidden md:flex items-center gap-4">
             {/* Language Selector */}
             <DropdownMenu>
               <DropdownMenuTrigger asChild>
@@ -85,12 +142,12 @@ export function Navigation() {
                   <span className="sr-only">{t('navigation.language')}</span>
                 </Button>
               </DropdownMenuTrigger>
-              <DropdownMenuContent align="end" className="w-32">
+              <DropdownMenuContent align="end" className="w-32 bg-[#222222] border-none">
                 {languages.map((lang) => (
                   <DropdownMenuItem
                     key={lang.code}
                     onClick={() => changeLanguage(lang.code)}
-                    className="cursor-pointer focus:text-cyan-500"
+                    className="cursor-pointer text-gray-300 hover:text-white hover:bg-[#000] focus:text-white focus:bg-[#000]"
                     role="menuitem"
                   >
                     {lang.name}
@@ -133,24 +190,42 @@ export function Navigation() {
               animate={{ opacity: 1, height: 'auto' }}
               exit={{ opacity: 0, height: 0 }}
               transition={{ duration: 0.2 }}
-              className="md:hidden absolute top-full left-0 right-0 bg-background/95 backdrop-blur-sm border-t border-border"
+              className="md:hidden absolute top-full left-0 right-0 bg-[#222222]/95 backdrop-blur-sm border-t border-[#333333]"
             >
               <div className="flex flex-col gap-4 p-4">
-                {navLinks.map(({ to, label }) => (
-                  <NavLink
-                    className={`text-sm transition-colors focus:outline-none focus:ring-2 focus:ring-cyan-500 rounded-lg px-2 py-1 ${
-                      location
-                        ? 'text-foreground font-medium'
-                        : 'text-muted-foreground hover:text-foreground'
-                    }`}
-                    to={to}
-                  >
-                    <span onClick={() => setIsMenuOpen(false)}>{label}</span>
-                  </NavLink>
+                {navLinks.map(({ to, label, children }) => (
+                  <div key={to}>
+                    <NavLink
+                      className={`text-sm transition-colors focus:outline-none focus:ring-2 focus:ring-cyan-500  px-2 py-1 ${
+                        location
+                          ? 'text-foreground font-medium'
+                          : 'text-muted-foreground hover:text-foreground'
+                      }`}
+                      to={to}
+                    >
+                      <span onClick={() => setIsMenuOpen(false)}>{label}</span>
+                    </NavLink>
+                    
+                    {children && (
+                      <div className="pl-4 mt-2 space-y-2">
+                        {children.map((child) => (
+                          <NavLink
+                            key={child.to}
+                            to={child.to}
+                            className="flex items-center gap-2 text-sm text-muted-foreground hover:text-foreground py-1"
+                            onClick={() => setIsMenuOpen(false)}
+                          >
+                            {child.icon && <child.icon className="w-4 h-4" />}
+                            {child.label}
+                          </NavLink>
+                        ))}
+                      </div>
+                    )}
+                  </div>
                 ))}
 
                 {/* Mobile Language Selector */}
-                <div className="border-t border-border pt-4">
+                <div className="border-t border-[#333333] pt-4">
                   <p
                     className="text-sm text-muted-foreground mb-2"
                     id="mobile-language-label"
@@ -196,4 +271,4 @@ export function Navigation() {
       </nav>
     </header>
   );
-}
+}
\ No newline at end of file
diff --git a/app/src/components/ui/navigation-menu.tsx b/app/src/components/ui/navigation-menu.tsx
new file mode 100644
index 0000000..af20da7
--- /dev/null
+++ b/app/src/components/ui/navigation-menu.tsx
@@ -0,0 +1,128 @@
+import * as React from "react"
+import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu"
+import { cva } from "class-variance-authority"
+import { ChevronDown } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const NavigationMenu = React.forwardRef<
+  React.ElementRef<typeof NavigationMenuPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Root>
+>(({ className, children, ...props }, ref) => (
+  <NavigationMenuPrimitive.Root
+    ref={ref}
+    className={cn(
+      "relative z-10 flex max-w-max flex-1 items-center justify-center",
+      className
+    )}
+    {...props}
+  >
+    {children}
+    <NavigationMenuViewport />
+  </NavigationMenuPrimitive.Root>
+))
+NavigationMenu.displayName = NavigationMenuPrimitive.Root.displayName
+
+const NavigationMenuList = React.forwardRef<
+  React.ElementRef<typeof NavigationMenuPrimitive.List>,
+  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.List>
+>(({ className, ...props }, ref) => (
+  <NavigationMenuPrimitive.List
+    ref={ref}
+    className={cn(
+      "group flex flex-1 list-none items-center justify-center space-x-1",
+      className
+    )}
+    {...props}
+  />
+))
+NavigationMenuList.displayName = NavigationMenuPrimitive.List.displayName
+
+const NavigationMenuItem = NavigationMenuPrimitive.Item
+
+const navigationMenuTriggerStyle = cva(
+  "group inline-flex h-8.5 w-35 items-center justify-center  text-sm font-medium transition-colors hover:bg-[#3F3F3F] hover:text-white focus:bg-[#3F3F3F] focus:text-white focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[active]:bg-[#3F3F3F] data-[state=open]:bg-[#3F3F3F]"
+)
+
+const NavigationMenuTrigger = React.forwardRef<
+  React.ElementRef<typeof NavigationMenuPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Trigger>
+>(({ className, children, ...props }, ref) => (
+  <NavigationMenuPrimitive.Trigger
+    ref={ref}
+    className={cn(navigationMenuTriggerStyle(), "group", className)}
+    {...props}
+  >
+    {children}{" "}
+    <ChevronDown
+      className="relative top-[1px] ml-1 h-3 w-3 transition duration-200 group-data-[state=open]:rotate-180"
+      aria-hidden="true"
+    />
+  </NavigationMenuPrimitive.Trigger>
+))
+NavigationMenuTrigger.displayName = NavigationMenuPrimitive.Trigger.displayName
+
+const NavigationMenuContent = React.forwardRef<
+  React.ElementRef<typeof NavigationMenuPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Content>
+>(({ className, ...props }, ref) => (
+  <NavigationMenuPrimitive.Content
+    ref={ref}
+    className={cn(
+      "left-0 top-0 w-full data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 md:absolute md:w-auto",
+      className
+    )}
+    {...props}
+  />
+))
+NavigationMenuContent.displayName = NavigationMenuPrimitive.Content.displayName
+
+const NavigationMenuLink = NavigationMenuPrimitive.Link
+
+const NavigationMenuViewport = React.forwardRef<
+  React.ElementRef<typeof NavigationMenuPrimitive.Viewport>,
+  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Viewport>
+>(({ className, ...props }, ref) => (
+  <div className={cn("absolute left-0 top-full flex justify-center")}>
+    <NavigationMenuPrimitive.Viewport
+      className={cn(
+        "origin-top-center relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md bg-[#222222] text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 md:w-[var(--radix-navigation-menu-viewport-width)]",
+        className
+      )}
+      ref={ref}
+      {...props}
+    />
+  </div>
+))
+NavigationMenuViewport.displayName =
+  NavigationMenuPrimitive.Viewport.displayName
+
+const NavigationMenuIndicator = React.forwardRef<
+  React.ElementRef<typeof NavigationMenuPrimitive.Indicator>,
+  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Indicator>
+>(({ className, ...props }, ref) => (
+  <NavigationMenuPrimitive.Indicator
+    ref={ref}
+    className={cn(
+      "top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in",
+      className
+    )}
+    {...props}
+  >
+    <div className="relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm bg-border shadow-md" />
+  </NavigationMenuPrimitive.Indicator>
+))
+NavigationMenuIndicator.displayName =
+  NavigationMenuPrimitive.Indicator.displayName
+
+export {
+  navigationMenuTriggerStyle,
+  NavigationMenu,
+  NavigationMenuList,
+  NavigationMenuItem,
+  NavigationMenuContent,
+  NavigationMenuTrigger,
+  NavigationMenuLink,
+  NavigationMenuIndicator,
+  NavigationMenuViewport,
+} 
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index f512c0a..7f4439e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,6 +10,7 @@
       "dependencies": {
         "@radix-ui/react-dialog": "^1.1.6",
         "@radix-ui/react-dropdown-menu": "^2.1.6",
+        "@radix-ui/react-navigation-menu": "^1.2.5",
         "@radix-ui/react-progress": "^1.1.2",
         "@radix-ui/react-slot": "^1.1.2",
         "@react-router/fs-routes": "^7.4.0",
@@ -1701,6 +1702,42 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-navigation-menu": {
+      "version": "1.2.5",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-navigation-menu/-/react-navigation-menu-1.2.5.tgz",
+      "integrity": "sha512-myMHHQUZ3ZLTi8W381/Vu43Ia0NqakkQZ2vzynMmTUtQQ9kNkjzhOwkZC9TAM5R07OZUVIQyHC06f/9JZJpvvA==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.1",
+        "@radix-ui/react-collection": "1.1.2",
+        "@radix-ui/react-compose-refs": "1.1.1",
+        "@radix-ui/react-context": "1.1.1",
+        "@radix-ui/react-direction": "1.1.0",
+        "@radix-ui/react-dismissable-layer": "1.1.5",
+        "@radix-ui/react-id": "1.1.0",
+        "@radix-ui/react-presence": "1.1.2",
+        "@radix-ui/react-primitive": "2.0.2",
+        "@radix-ui/react-use-callback-ref": "1.1.0",
+        "@radix-ui/react-use-controllable-state": "1.1.0",
+        "@radix-ui/react-use-layout-effect": "1.1.0",
+        "@radix-ui/react-use-previous": "1.1.0",
+        "@radix-ui/react-visually-hidden": "1.1.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-popper": {
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-popper/-/react-popper-1.2.2.tgz",
@@ -1943,6 +1980,21 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-use-previous": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-previous/-/react-use-previous-1.1.0.tgz",
+      "integrity": "sha512-Z/e78qg2YFnnXcW88A4JmTtm4ADckLno6F7OXotmkQfeuCVaKuYzqAATPhVzl3delXE7CxIV8shofPn3jPc5Og==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-use-rect": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-use-rect/-/react-use-rect-1.1.0.tgz",
@@ -1979,6 +2031,29 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-visually-hidden": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-visually-hidden/-/react-visually-hidden-1.1.2.tgz",
+      "integrity": "sha512-1SzA4ns2M1aRlvxErqhLHsBHoS5eI5UUcI2awAMgGUp4LoaoWOKYmvqDY2s/tltuPkh3Yk77YF/r3IRj+Amx4Q==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-primitive": "2.0.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/rect": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/@radix-ui/rect/-/rect-1.1.0.tgz",
diff --git a/package.json b/package.json
index 89993af..4b61639 100644
--- a/package.json
+++ b/package.json
@@ -13,6 +13,7 @@
   "dependencies": {
     "@radix-ui/react-dialog": "^1.1.6",
     "@radix-ui/react-dropdown-menu": "^2.1.6",
+    "@radix-ui/react-navigation-menu": "^1.2.5",
     "@radix-ui/react-progress": "^1.1.2",
     "@radix-ui/react-slot": "^1.1.2",
     "@react-router/fs-routes": "^7.4.0",


Reviews:
user: login: pavlenex
state: CHANGES_REQUESTED
author_association: COLLABORATOR
submitted_at: 2025-04-01T08:04:22Z
user: login: Abhijay007
state: COMMENTED
author_association: COLLABORATOR
submitted_at: 2025-04-01T08:11:13Z
user: login: Jeezman
body: Great work so far Abhijay!! I noticed the spacing when the nav is hovered doesn't really match the design. Once this is updated we should be good to go

## Design
![Screenshot 2025-04-01 at 10 50 47](https://github.com/user-attachments/assets/c5ab6f6f-1587-4580-aff6-1ac5f3f19e31)

## Implementation
<img width="573" alt="Screenshot 2025-04-01 at 10 51 33" src="https://github.com/user-attachments/assets/5dab43b9-de8a-4c60-b2e7-38659250b7b0" />


state: CHANGES_REQUESTED
author_association: OWNER
submitted_at: 2025-04-01T09:52:59Z

Review comments:
diff_hunk: @@ -23,27 +35,36 @@ export function Navigation() {
   const location = useLocation();
 
   const navLinks = [
-    { to: '/miners', label: t('navigation.miners') },
-    { to: '/pools', label: t('navigation.pools') },
-    { to: '/developers', label: t('navigation.developers') },
-    { to: '/blog', label: 'Blog' },
+    { to: '/about', label: 'About' },
+    {
+      to: '/use-cases',
+      label: 'Use Cases',
+      children: [
+        { to: '/miners', label: 'For Miners', icon: Pickaxe },
+        { to: '/pools', label: 'For Pool Operators', icon: Share2 },
+        { to: '/developers', label: 'For Developers', icon: Code },
+        { to: '/observers', label: 'For Observers', icon: Eye },
path: app/src/components/Navigation.tsx
user: login: pavlenex
body: We can remove "for observers" from the codebase, it's not needed menu item. Rest LGTM.
created_at: 2025-04-01T08:04:14Z
author_association: COLLABORATOR
diff_hunk: @@ -23,27 +35,36 @@ export function Navigation() {
   const location = useLocation();
 
   const navLinks = [
-    { to: '/miners', label: t('navigation.miners') },
-    { to: '/pools', label: t('navigation.pools') },
-    { to: '/developers', label: t('navigation.developers') },
-    { to: '/blog', label: 'Blog' },
+    { to: '/about', label: 'About' },
+    {
+      to: '/use-cases',
+      label: 'Use Cases',
+      children: [
+        { to: '/miners', label: 'For Miners', icon: Pickaxe },
+        { to: '/pools', label: 'For Pool Operators', icon: Share2 },
+        { to: '/developers', label: 'For Developers', icon: Code },
+        { to: '/observers', label: 'For Observers', icon: Eye },
path: app/src/components/Navigation.tsx
user: login: Abhijay007
body: removed that 
created_at: 2025-04-01T08:11:13Z
author_association: COLLABORATOR

PR comments:
user: login: Abhijay007
created_at: 2025-04-01T08:12:56Z
body: Also, @pavlenex can you please raise/open the issue for the new hero section and share the figma file with me that was shown in the meeting? I will create a PR for that too 
author_association: COLLABORATOR
user: login: Abhijay007
created_at: 2025-04-01T08:14:24Z
body: > Also, @pavlenex can you please raise/open the issue for the new hero section and share the figma file with me that was shown in the meeting? I will create a PR for that too

I got it : 

Prototype Link:
https://www.figma.com/proto/6KPB6bKFiGN9euzLKhFWgV/Prototype-exploration?page-id=0%3A1&node-id=1-15&viewport=273%2C274%2C0.72&t=5dQ2pkwHjFb0K5aM-1&scaling=min-zoom&content-scaling=fixed

Figma Link:
https://www.figma.com/design/6KPB6bKFiGN9euzLKhFWgV/Prototype-exploration?node-id=52-117&t=oNdrHWKR8FHZr2St-1

will open a PR for this this too 
author_association: COLLABORATOR
user: login: Jeezman
created_at: 2025-04-03T09:30:46Z
body: LGMT. Thanks @Abhijay007 
author_association: OWNER