Add new category in Awesome Remnawave and some fix (#172)

* - add proxy-сlients category
- fix PR link

* fix description

* update preview

* editing description

* - update preview card
- change category miniapp from commerce to misc

* refactor: update Remnawave client titles for clarity, enhance ProjectCard component with HWID support indicator, and improve CategoryNav styles for better layout

docs/awesome-remnawave.mdx

@@ -33,8 +33,11 @@ import RemnavaweBedolagaBotGuide from '/docs/awesome-remnawave/\_install-guides/
         { id: 'commerce', icon: '💰', title: 'Commerce' },
         { id: 'auto-installers', icon: '🚀', title: 'Auto-installers' },
         { id: 'backup-restore', icon: '💾', title: 'Backup & Restore' },
-        { id: 'misc', icon: '🔧', title: 'Misc' }
+        { id: 'misc', icon: '🔧', title: 'Misc' },
+        { id: 'clients', icon: '🖥️', title: 'Clients' }
+
     ]}
+
 />
 
 <CategorySection
@@ -81,20 +84,6 @@ import RemnavaweBedolagaBotGuide from '/docs/awesome-remnawave/\_install-guides/
         }}
         featured={true}
     />
-    <ProjectCard
-        id="remnawave-telegram-mini-app"
-        title="Remnawave Telegram Subscription Mini App"
-        description="This is a Telegram Subscription Mini App that allows users to view their subscriptions directly through Telegram. As a requirement for using the page, the Telegram ID must be set in the user's profile to ensure proper identification and linking of subscriptions."
-        author="maposia"
-        authorLink="https://github.com/maposia"
-        image="/awesome/remnawave-telegram-sub-mini-app.webp"
-        githubRepo="maposia/remnawave-telegram-sub-mini-app"
-        links={{
-            github: 'https://github.com/maposia/remnawave-telegram-sub-mini-app'
-        }}
-    >
-        <RemnavaweTelegramMiniAppGuide />
-    </ProjectCard>
     <ProjectCard
         id="remnawave-tg-shop"
         title="Remnawave TG Shop"
@@ -225,6 +214,20 @@ import RemnavaweBedolagaBotGuide from '/docs/awesome-remnawave/\_install-guides/
     icon="🔧"
     columns={2}
 >
+    <ProjectCard
+        id="remnawave-telegram-mini-app"
+        title="Remnawave Telegram Subscription Mini App"
+        description="This is a Telegram Subscription Mini App that allows users to view their subscriptions directly through Telegram. As a requirement for using the page, the Telegram ID must be set in the user's profile to ensure proper identification and linking of subscriptions."
+        author="maposia"
+        authorLink="https://github.com/maposia"
+        image="/awesome/remnawave-telegram-sub-mini-app.webp"
+        githubRepo="maposia/remnawave-telegram-sub-mini-app"
+        links={{
+            github: 'https://github.com/maposia/remnawave-telegram-sub-mini-app'
+        }}
+    >
+        <RemnavaweTelegramMiniAppGuide />
+    </ProjectCard>
     <ProjectCard
         id="warp-native-installer"
         title="WARP Native Installer"
@@ -250,6 +253,58 @@ import RemnavaweBedolagaBotGuide from '/docs/awesome-remnawave/\_install-guides/
     />
 </CategorySection>
 
+<CategorySection
+    id="clients"
+    title="Clients"
+    description="Proxy clients based on Remnawave functionality"
+    icon="🖥️"
+    columns={2}
+>
+    <ProjectCard
+        id="koala-clash"
+        title="Koala-Clash (fork of Clash Verge Rev)"
+        description="Koala-Clash is a desktop (Windows, Linux, macOS) client for Mihomo. A Clash Meta GUI based on Tauri."
+        author="coolcoala"
+        authorLink="https://github.com/coolcoala"
+        image="/awesome/koalaclash.webp"
+        githubRepo="coolcoala/clash-verge-rev-lite"
+        hwidSupported={true}
+        links={{
+            github: 'https://github.com/coolcoala/clash-verge-rev-lite',
+            telegram: 'https://t.me/+WCL__GOFzZJkYjZi'
+        }}
+    />
+    <ProjectCard
+        id="flclashx"
+        title="FlClashX (fork of FlClash)"
+        description="A fork of the multi-platform (Windows, Android, Linux, macOS) proxy client FlClash based on ClashMeta, simple and easy to use, open source and ad-free."
+        author="pluralplay"
+        authorLink="https://github.com/pluralplay"
+        image="/awesome/flclashx.webp"
+        githubRepo="pluralplay/flclashx"
+        links={{
+            github: 'https://github.com/pluralplay/flclashx',
+            telegram: 'https://t.me/flclashx'
+        }}
+        hwidSupported={true}
+        featured={true}
+    />
+    <ProjectCard
+        id="prizrakbox"
+        title="Prizrak-Box (fork of Pandora-Box)"
+        description="Prizrak-Box is a desktop (Windows, Linux, macOS) client for Mihomo, supporting subscription management and routing rule configuration. 
+        It allows using and overriding routes with custom templates (includes built-in templates relevant for Russia)."
+        author="legiz"
+        authorLink="https://github.com/legiz-ru"
+        image="/awesome/prizrakbox.webp"
+        githubRepo="legiz-ru/Prizrak-Box"
+        hwidSupported={true}
+        links={{
+            github: 'https://github.com/legiz-ru/Prizrak-Box'
+        }}
+    />
+</CategorySection>
+
 ---
 
 ## 🎯 Add Your Project
@@ -263,7 +318,7 @@ Want to showcase your Remnawave-related project? We'd love to see it!
 
 **How to submit:**
 
-1. Open a PR on [GitHub](https://github.com/remnawave/panel/blob/main/docs/awesome-remnawave.md)
+1. Open a PR on [GitHub](https://github.com/remnawave/panel/blob/main/docs/awesome-remnawave.mdx)
 2. Make sure the target branch is `main`
 
 :::tip Making beautiful previews

src/components/CategoryNav/styles.module.css

@@ -1,9 +1,11 @@
 .categoryNav {
-    margin: 3rem 0;
+    margin: 3rem auto;
     padding: 2rem;
     background: var(--ifm-card-background-color);
     border: 1px solid var(--ifm-color-emphasis-200);
     border-radius: 16px;
+    width: fit-content;
+    max-width: 100%;
 }
 
 .navTitle {
@@ -16,8 +18,10 @@
 
 .categories {
     display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+    grid-template-columns: repeat(3, 1fr);
     gap: 1rem;
+    max-width: 800px;
+    margin: 0 auto;
 }
 
 .categoryButton {

src/components/ProjectCard/index.tsx

@@ -13,6 +13,7 @@ interface ProjectCardProps {
     description: string
     featured?: boolean
     githubRepo?: string
+    hwidSupported?: boolean
     id?: string
     image?: string
     links?: {
@@ -34,6 +35,7 @@ export default function ProjectCard({
     links,
     featured = false,
     aiPowered = false,
+    hwidSupported = false,
     githubRepo,
     id,
     children
@@ -72,6 +74,17 @@ export default function ProjectCard({
                             <span>AI</span>
                         </div>
                     )}
+                    {hwidSupported && (
+                        <div
+                            className={styles.hwidBadge}
+                            data-tooltip="This client support sending HWID"
+                        >
+                            <svg fill="currentColor" height="16" viewBox="0 0 16 16" width="16">
+                                <path d="M13.485 1.431a1.473 1.473 0 0 1 2.104 2.062l-7.84 9.801a1.473 1.473 0 0 1-2.12.04L.431 8.138a1.473 1.473 0 0 1 2.084-2.083l4.111 4.112 6.82-8.69a.486.486 0 0 1 .04-.045z" />
+                            </svg>
+                            <span>HWID</span>
+                        </div>
+                    )}
                     {githubRepo && links?.github && (
                         <Link className={styles.starsBadge} to={links.github}>
                             <GitHubStars repo={githubRepo} />

src/components/ProjectCard/styles.module.css

@@ -160,6 +160,102 @@
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
 }
 
+.hwidBadge {
+    display: flex;
+    align-items: center;
+    gap: 0.35rem;
+    padding: 0.4rem 0.75rem;
+    background: #d4edda;
+    color: #155724;
+    border: 1px solid #c3e6cb;
+    border-radius: 6px;
+    font-size: 0.7rem;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+    cursor: help;
+    transition: all 0.2s ease;
+    position: relative;
+}
+
+.hwidBadge::before {
+    content: attr(data-tooltip);
+    position: absolute;
+    bottom: calc(100% + 10px);
+    right: 0;
+    padding: 0.6rem 0.9rem;
+    background: var(--ifm-color-emphasis-900);
+    color: white;
+    border-radius: 6px;
+    font-size: 0.8rem;
+    font-weight: 500;
+    text-transform: none;
+    letter-spacing: normal;
+    white-space: nowrap;
+    opacity: 0;
+    pointer-events: none;
+    transition:
+        opacity 0.2s ease,
+        transform 0.2s ease;
+    transform: translateY(5px);
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
+    z-index: 1000;
+}
+
+.hwidBadge::after {
+    content: '';
+    position: absolute;
+    bottom: calc(100% + 2px);
+    right: 20px;
+    border: 6px solid transparent;
+    border-top-color: var(--ifm-color-emphasis-900);
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity 0.2s ease;
+}
+
+.hwidBadge:hover::before {
+    opacity: 1;
+    transform: translateY(0);
+}
+
+.hwidBadge:hover::after {
+    opacity: 1;
+}
+
+.hwidBadge:hover {
+    background: #c3e6cb;
+    border-color: #b1dfbb;
+    transform: translateY(-1px);
+    box-shadow: 0 2px 8px rgba(21, 87, 36, 0.2);
+}
+
+.hwidBadge svg {
+    width: 13px;
+    height: 13px;
+}
+
+[data-theme='dark'] .hwidBadge::before {
+    background: var(--ifm-color-emphasis-100);
+    color: var(--ifm-color-emphasis-900);
+}
+
+[data-theme='dark'] .hwidBadge::after {
+    border-top-color: var(--ifm-color-emphasis-100);
+}
+
+[data-theme='dark'] .hwidBadge {
+    background: #1e4620;
+    color: #a3d9a5;
+    border-color: #2d5a2f;
+}
+
+[data-theme='dark'] .hwidBadge:hover {
+    background: #2d5a2f;
+    border-color: #3d6a3f;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+}
+
 [data-theme='dark'] .starsBadge {
     background: #2d333b;
     color: white;
@@ -190,6 +286,16 @@
         height: 11px;
     }
 
+    .hwidBadge {
+        padding: 0.3rem 0.55rem;
+        font-size: 0.65rem;
+    }
+
+    .hwidBadge svg {
+        width: 11px;
+        height: 11px;
+    }
+
     .starsBadge {
         padding: 0.3rem 0.55rem;
         font-size: 0.7rem;