Add resource images and multi-badge support

Add static images and show them in docs (msk_enginetoggle, msk_handcuffs, msk_vehiclekeys). Update homepage resources: change badge -> badges array, render multiple badges in ResourceCard with new .cardBadges styles, and add entries for MSK Handcuffs and MSK VehicleKeys. Also tweak color palette variables in src/css/custom.css and adjust a few resource details/links on the index page for improved visuals and metadata.

Author: Musiker15

docs/msk_enginetoggle/index.md

@@ -3,7 +3,7 @@ title: MSK EngineToggle
 sidebar_position: 1
 ---
 
-# MSK EngineToggle
+![MSK EngineToggle](/img/msk_enginetoggle.png)
 
 [GitHub Download](https://github.com/MSK-Scripts/msk_enginetoggle) | [CFX Post](https://forum.cfx.re/t/msk-enginetoggle-toggle-engine-on-off/4793840)
 

docs/msk_handcuffs/index.md

@@ -3,7 +3,7 @@ title: MSK Handcuffs
 sidebar_position: 1
 ---
 
-# MSK Handcuffs
+![MSK Handcuffs](/img/msk_handcuffs.png)
 
 [**Tebex [11.99€ inkl. MwSt.]**](https://www.msk-scripts.de/category/encrypted) — _~80% encrypted_  
 [**Tebex [23.99€ inkl. MwSt.]**](https://www.msk-scripts.de/category/open-clientside) — _~10% encrypted_

docs/msk_vehiclekeys/index.md

@@ -3,7 +3,7 @@ title: MSK VehicleKeys
 sidebar_position: 1
 ---
 
-# MSK VehicleKeys
+![MSK VehicleKeys](/img/msk_vehiclekeys.png)
 
 [**Tebex [18.99€ inkl. MwSt.]**](https://www.msk-scripts.de/category/encrypted) — _~80% encrypted_  
 [**Tebex [37.99€ inkl. MwSt.]**](https://www.msk-scripts.de/category/source-code) — _~10% encrypted_

src/css/custom.css

@@ -6,25 +6,25 @@
 
 /* You can override the default Infima variables here. */
 :root {
-  --ifm-color-primary: #2e8555;
-  --ifm-color-primary-dark: #29784c;
-  --ifm-color-primary-darker: #277148;
-  --ifm-color-primary-darkest: #205d3b;
-  --ifm-color-primary-light: #33925d;
-  --ifm-color-primary-lighter: #359962;
-  --ifm-color-primary-lightest: #3cad6e;
+  --ifm-color-primary: #26700a;
+  --ifm-color-primary-dark: #206208;
+  --ifm-color-primary-darker: #1c5907;
+  --ifm-color-primary-darkest: #154205;
+  --ifm-color-primary-light: #2d800c;
+  --ifm-color-primary-lighter: #33910e;
+  --ifm-color-primary-lightest: #3da811;
   --ifm-code-font-size: 95%;
   --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
 }
 
 /* For readability concerns, you should choose a lighter palette in dark mode. */
 [data-theme='dark'] {
-  --ifm-color-primary: #25c2a0;
-  --ifm-color-primary-dark: #21af90;
-  --ifm-color-primary-darker: #1fa588;
-  --ifm-color-primary-darkest: #1a8870;
-  --ifm-color-primary-light: #29d5b0;
-  --ifm-color-primary-lighter: #32d8b4;
-  --ifm-color-primary-lightest: #4fddbf;
+  --ifm-color-primary: #42a016;
+  --ifm-color-primary-dark: #3a8e13;
+  --ifm-color-primary-darker: #358211;
+  --ifm-color-primary-darkest: #29650d;
+  --ifm-color-primary-light: #4db11a;
+  --ifm-color-primary-lighter: #57c01e;
+  --ifm-color-primary-lightest: #68d029;
   --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
 }

src/pages/index.module.css

@@ -136,6 +136,13 @@
   margin: 0;
 }
 
+.cardBadges {
+  display: flex;
+  gap: 0.35rem;
+  flex-wrap: wrap;
+  align-items: center;
+}
+
 .cardBadge {
   font-size: 0.7rem;
   font-weight: 600;

src/pages/index.tsx

@@ -45,7 +45,7 @@ type Resource = {
   title: string;
   image: string;
   description: string;
-  badge: string;
+  badges: string[];
   to: string;
   features: string[];
 };
@@ -54,24 +54,42 @@ const resources: Resource[] = [
   {
     title: 'Discord Ticketbot',
     image: '/img/discord_ticketbot_banner.png',
-    badge: 'Javascript',
+    badges: ['Javascript'],
     description:
-      'A feature-rich inventory system with support for stashes, trunks, gloveboxes, shops, crafting and more.',
+      'A Dicord ticketbot, allowing players to create support tickets directly from Discord.',
     to: '/docs/discord_ticketbot/getting-started',
-    features: ['Events', 'Exports', 'Event Handler'],
+    features: ['Installation', 'Configuration'],
   },
   {
     title: 'MSK Core',
     image: '/img/logo.png',
-    badge: 'Standalone',
+    badges: ['Standalone'],
     description:
       'Our core library for our resources, providing common utilities, and more.',
-    to: '/docs/msk_core/getting-started',
-    features: ['Events', 'Exports'],
+    to: '/docs/msk_core/',
+    features: ['Client', 'Shared', 'Server'],
+  },
+  {
+    title: 'MSK Handcuffs',
+    image: '/img/msk_handcuffs.png',
+    badges: ['ESX', 'QBCore'],
+    description:
+      'A handcuff resource, allowing you to restrain players with various options and features.',
+    to: '/docs/msk_handcuffs/',
+    features: ['Events', 'Exports', 'Event Handler'],
+  },
+  {
+    title: 'MSK Vehiclekeys',
+    image: '/img/msk_vehiclekeys.png',
+    badges: ['ESX', 'QBCore'],
+    description:
+      'A vehicle key management resource, allowing you to manage vehicle keys with various options and features.',
+    to: '/docs/msk_vehiclekeys/',
+    features: ['Exports'],
   },
 ];
 
-function ResourceCard({ title, image, badge, description, to, features }: Resource) {
+function ResourceCard({ title, image, badges, description, to, features }: Resource) {
   return (
     <div className={styles.card}>
       <div className={styles.cardImage}>
@@ -82,7 +100,11 @@ function ResourceCard({ title, image, badge, description, to, features }: Resour
           <Heading as="h2" className={styles.cardTitle}>
             {title}
           </Heading>
-          <span className={styles.cardBadge}>{badge}</span>
+          <div className={styles.cardBadges}>
+            {badges.map((b) => (
+              <span key={b} className={styles.cardBadge}>{b}</span>
+            ))}
+          </div>
         </div>
         <p className={styles.cardDescription}>{description}</p>
         <div className={styles.cardTags}>