Refactor documentation layout and styles

- Updated the index page to improve text formatting and structure.
- Enhanced feature sections with consistent styling and updated icons.
- Modified quick start guide for better clarity and visual appeal.
- Adjusted footer links for consistent styling.
- Updated navigation links to reflect new color scheme.
- Added new color definitions in Vite configuration for better theme support.

resources/css/app.css

@@ -9,6 +9,35 @@
     --font-sans: 'Instrument Sans', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
         'Segoe UI Symbol', 'Noto Color Emoji';
 
+    --color-gta-dark: #1a1a1a;
+    --color-gta-light: #f8fafc;
+    --color-gta-orange: #f57c00;
+    --color-gta-cyan: #1de9b6;
+    --color-gta-gray: #334155;
+    --color-gta-indigo: #3b82f6;
+
+    --color-gray-50: #f8fafc;
+    --color-gray-100: #f1f5f9;
+    --color-gray-200: #e2e8f0;
+    --color-gray-300: #cbd5e1;
+    --color-gray-400: #94a3b8;
+    --color-gray-500: #64748b;
+    --color-gray-600: #475569;
+    --color-gray-700: #334155;
+    --color-gray-800: #1e293b;
+    --color-gray-900: #0f172a;
+
+    --color-indigo-50: #fff7ed;
+    --color-indigo-100: #ffedd5;
+    --color-indigo-200: #fed7aa;
+    --color-indigo-300: #fdba74;
+    --color-indigo-400: #fb923c;
+    --color-indigo-500: #f57c00;
+    --color-indigo-600: #ea580c;
+    --color-indigo-700: #c2410c;
+    --color-indigo-800: #9a3412;
+    --color-indigo-900: #7c2d12;
+
     --animate-fade-in: fade-in 0.3s ease-in-out;
 
     @keyframes fade-in {
@@ -22,3 +51,75 @@
         }
     }
 }
+
+@layer base {
+    :root {
+        color-scheme: light dark;
+    }
+
+    body {
+        @apply bg-gray-50 text-gray-900 dark:bg-gray-900 dark:text-gray-100;
+    }
+}
+
+@layer utilities {
+    .text-gta-neon {
+        color: var(--color-gta-cyan);
+    }
+
+    .text-gta-orange {
+        color: var(--color-gta-orange);
+    }
+
+    .bg-gta-neon {
+        background-color: var(--color-gta-cyan);
+    }
+
+    .bg-gta-orange {
+        background-color: var(--color-gta-orange);
+    }
+
+    .border-gta-neon {
+        border-color: var(--color-gta-cyan);
+    }
+
+    .border-gta-orange {
+        border-color: var(--color-gta-orange);
+    }
+}
+
+@layer components {
+    .link-gta {
+        color: var(--color-gta-cyan);
+        transition: color 0.2s ease-in-out;
+    }
+
+    .link-gta:hover {
+        color: #6ee7b7;
+    }
+
+    .btn-gta-primary {
+        background-color: var(--color-gta-orange);
+        color: #ffffff;
+        border-radius: 0.5rem;
+        font-weight: 600;
+        transition: all 0.2s ease-in-out;
+    }
+
+    .btn-gta-primary:hover {
+        background-color: #ea580c;
+    }
+
+    .btn-gta-secondary {
+        background-color: transparent;
+        color: var(--color-gta-cyan);
+        border: 1px solid var(--color-gta-cyan);
+        border-radius: 0.5rem;
+        font-weight: 600;
+        transition: all 0.2s ease-in-out;
+    }
+
+    .btn-gta-secondary:hover {
+        background-color: color-mix(in oklab, var(--color-gta-cyan) 16%, transparent);
+    }
+}

resources/js/app.js

@@ -48,13 +48,13 @@ document.addEventListener('DOMContentLoaded', () => {
 
             // Remove active class from all buttons
             tabButtons.forEach(btn => {
-                btn.classList.remove('active', 'border-indigo-500', 'text-indigo-600', 'dark:text-indigo-400');
+                btn.classList.remove('active', 'border-gta-orange', 'text-gta-orange');
                 btn.classList.add('border-transparent', 'text-gray-500', 'dark:text-gray-400');
             });
 
             // Add active class to clicked button
             this.classList.remove('border-transparent', 'text-gray-500', 'dark:text-gray-400');
-            this.classList.add('active', 'border-indigo-500', 'text-indigo-600', 'dark:text-indigo-400');
+            this.classList.add('active', 'border-gta-orange', 'text-gta-orange');
 
             // Hide all tab contents
             tabContents.forEach(content => {

resources/views/docs/documentation.blade.php

@@ -21,12 +21,12 @@
                 <div class="border-b border-gray-200 dark:border-gray-700 mb-6">
                     <nav class="-mb-px flex space-x-8">
                         <button data-tab="remote"
-                            class="transition-all duration-200 ease-in-out active border-b-2 border-indigo-500 py-4 px-1 text-center text-sm font-medium text-indigo-600 dark:text-indigo-400">
+                            class="transition-all duration-200 ease-in-out active border-b-2 border-gta-orange py-4 px-1 text-center text-sm font-medium text-gta-orange">
                             <span class="flex items-center">
                                 <span class="mr-2">🌐</span>
                                 Remote Server
                                 <span
-                                    class="ml-2 inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-indigo-100 dark:bg-indigo-900 text-indigo-800 dark:text-indigo-200">
+                                    class="ml-2 inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 dark:bg-gray-700 border border-gta-orange text-gta-orange">
                                     Recommended
                                 </span>
                             </span>
@@ -45,7 +45,7 @@
                 <div class="tab-content-container">
                     <!-- Remote Server Option -->
                     <div data-tab-content="remote" class="animate-fade-in active">
-                        <div class="bg-indigo-50 dark:bg-indigo-900/20 border-l-4 border-indigo-500 p-6">
+                        <div class="bg-gray-100 dark:bg-gray-700/30 border-l-4 border-gta-orange p-6">
                             <p class="text-gray-700 dark:text-gray-300 mb-4">
                                 <strong>Easy setup!</strong> Connect to a hosted MCP server. This is the easiest option and
                                 works from anywhere without any local setup.
@@ -65,13 +65,13 @@
                             <p class="text-gray-700 dark:text-gray-300 mb-3">Add this configuration (replace with your
                                 actual
                                 server URL):</p>
-                            <pre class="bg-gray-900 text-gray-100 rounded p-4 overflow-x-auto"><code>{
-                  "mcpServers": {
-                    "fivem": {
-                      "url": "https://your-domain.com/fivem"
-                    }
-                  }
-                }</code></pre>
+                            <pre class="bg-gray-900 text-gray-100 rounded p-4 overflow-x-auto"><code>@verbatim{
+    "mcpServers": {
+        "fivem": {
+            "url": "https://your-domain.com/fivem"
+        }
+    }
+}@endverbatim</code></pre>
                         </div>
 
                         <div class="mt-6">
@@ -88,15 +88,15 @@
                                 </li>
                             </ul>
 
-                            <pre class="bg-gray-900 text-gray-100 rounded p-4 overflow-x-auto"><code>{
-                  "mcp": {
-                    "servers": {
-                      "fivem": {
-                        "url": "https://your-domain.com/fivem"
-                      }
-                    }
-                  }
-                }</code></pre>
+                            <pre class="bg-gray-900 text-gray-100 rounded p-4 overflow-x-auto"><code>@verbatim{
+    "mcp": {
+        "servers": {
+            "fivem": {
+                "url": "https://your-domain.com/fivem"
+            }
+        }
+    }
+}@endverbatim</code></pre>
                         </div>
                     </div>
 
@@ -110,18 +110,18 @@
 
                             <h4 class="font-semibold text-gray-900 dark:text-white mb-2">Claude Desktop Configuration:</h4>
                             <p class="text-gray-700 dark:text-gray-300 mb-3">Edit your configuration file and add:</p>
-                            <pre class="bg-gray-900 text-gray-100 rounded p-4 overflow-x-auto mb-4"><code>{
-                  "mcpServers": {
-                    "fivem": {
-                      "command": "/path/to/php",
-                      "args": [
-                        "/path/to/fivem-mcp/artisan",
-                        "mcp:start",
-                        "fivem"
-                      ]
-                    }
-                  }
-                }</code></pre>
+                            <pre class="bg-gray-900 text-gray-100 rounded p-4 overflow-x-auto mb-4"><code>@verbatim{
+    "mcpServers": {
+        "fivem": {
+            "command": "/path/to/php",
+            "args": [
+            "/path/to/fivem-mcp/artisan",
+            "mcp:start",
+            "fivem"
+            ]
+        }
+    }
+}@endverbatim</code></pre>
 
                             <h4 class="font-semibold text-gray-900 dark:text-white mb-2">Command Line Usage:</h4>
                             <p class="text-gray-700 dark:text-gray-300 mb-3">For any MCP-compatible client:</p>
@@ -135,30 +135,30 @@
                                 <code
                                     class="bg-gray-100 dark:bg-gray-700 text-gray-900 dark:text-gray-100 px-2 py-1 rounded text-sm">settings.json</code>:
                             </p>
-                            <pre class="bg-gray-900 text-gray-100 rounded p-4 overflow-x-auto"><code>{
-                                              "mcp": {
-                                                "servers": {
-                                                  "fivem": {
-                                                    "command": "php",
-                                                    "args": ["artisan", "mcp:start", "fivem"],
-                                                    "cwd": "/path/to/fivem-mcp"
-                                                  }
-                                                }
-                                              }
-                                            }</code></pre>
+                            <pre class="bg-gray-900 text-gray-100 rounded p-4 overflow-x-auto"><code>@verbatim{
+    "mcp": {
+        "servers": {
+            "fivem": {
+                "command": "php",
+                "args": ["artisan", "mcp:start", "fivem"],
+                "cwd": "/path/to/fivem-mcp"
+            }
+        }
+    }
+}@endverbatim</code></pre>
 
                             <p class="text-gray-700 dark:text-gray-300 mb-3 mt-4"><strong>Or use the full PHP path:</strong>
                             </p>
-                            <pre class="bg-gray-900 text-gray-100 rounded p-4 overflow-x-auto"><code>{
-                "mcp": {
-                    "servers": {
-                        "fivem": {
-                            "command": "/path/to/php",
-                            "args": ["/path/to/fivem-mcp/artisan", "mcp:start", "fivem"]
-                        }
-                    }
-                }
-            }</code></pre>
+                            <pre class="bg-gray-900 text-gray-100 rounded p-4 overflow-x-auto"><code>@verbatim{
+    "mcp": {
+        "servers": {
+            "fivem": {
+                "command": "/path/to/php",
+                "args": ["/path/to/fivem-mcp/artisan", "mcp:start", "fivem"]
+            }
+        }
+    }
+}@endverbatim</code></pre>
                         </div>
                     </div>
                 </div>
@@ -188,22 +188,20 @@
                 @foreach ($groupedTools as $category => $categoryTools)
                     <div class="mb-8">
                         <h3 class="text-xl font-bold text-gray-800 dark:text-gray-200 mb-4 flex items-center">
-                            <span class="inline-block w-1 h-6 bg-indigo-500 mr-3"></span>
+                            <span class="inline-block w-1 h-6 bg-gta-orange mr-3"></span>
                             {{ $category }} Tools
                             <span
                                 class="ml-3 text-sm font-normal text-gray-500 dark:text-gray-400">({{ count($categoryTools) }})</span>
                         </h3>
 
                         @foreach ($categoryTools as $index => $tool)
-                            <div class="mb-6 border-l-4 border-indigo-500 pl-6">
+                            <div class="mb-6 border-l-4 border-gta-orange pl-6">
                                 <h4 class="text-lg font-semibold text-gray-900 dark:text-white mb-2">{{ $tool['name'] }}</h4>
                                 <p class="text-gray-700 dark:text-gray-300">{{ $tool['description'] }}</p>
                             </div>
                         @endforeach
                     </div>
                 @endforeach
-
-
             </section>
 
             <!-- Available Resources -->
@@ -268,41 +266,42 @@
                         class="bg-gray-100 dark:bg-gray-700 text-gray-900 dark:text-gray-100 px-2 py-1 rounded text-sm">app/Mcp/Tools/</code>:
                 </p>
 
-                <pre class="bg-gray-900 text-gray-100 rounded p-4 overflow-x-auto mb-4"><code>&lt;?php
+                <pre class="bg-gray-900 text-gray-100 rounded p-4 overflow-x-auto mb-4"><code>@verbatim&lt;?php
 
-                                            namespace App\Mcp\Tools;
+namespace App\Mcp\Tools;
 
-                                            use Illuminate\Contracts\JsonSchema\JsonSchema;
-                                            use Laravel\Mcp\Request;
-                                            use Laravel\Mcp\Response;
-                                            use Laravel\Mcp\Server\Attributes\Description;
-                                            use Laravel\Mcp\Server\Tool;
+use Illuminate\Contracts\JsonSchema\JsonSchema;
+use Laravel\Mcp\Request;
+use Laravel\Mcp\Response;
+use Laravel\Mcp\Server\Attributes\Description;
+use Laravel\Mcp\Server\Tool;
 
-                                            #[Description('Your tool description')]
-                                            class YourTool extends Tool
-                                            {
-                                                public function handle(Request $request): Response
-                                                {
-                                                    // Tool logic here
-                                                    return Response::text('Result');
-                                                }
+#[Description('Your tool description')]
+class YourTool extends Tool
+{
+    public function handle(Request $request): Response
+    {
+        // Tool logic here
+        return Response::text('Result');
+    }
 
-                                                public function schema(JsonSchema $schema): array
-                                                {
-                                                    return [
-                                                        'param' => $schema->string()->required(),
-                                                    ];
-                                                }
-                                            }</code></pre>
+    public function schema(JsonSchema $schema): array
+    {
+        return [
+            'param' => $schema->string()->required(),
+        ];
+    }
+}
+@endverbatim</code></pre>
 
                 <p class="text-gray-700 dark:text-gray-300 mb-4">2. Register the tool in <code
                         class="bg-gray-100 dark:bg-gray-700 text-gray-900 dark:text-gray-100 px-2 py-1 rounded text-sm">app/Mcp/Servers/FiveMServer.php</code>:
                 </p>
 
-                <pre class="bg-gray-900 text-gray-100 rounded p-4 overflow-x-auto mb-4"><code>protected array $tools = [
-                                                // ... existing tools
-                                                \App\Mcp\Tools\YourTool::class,
-                                            ];</code></pre>
+                <pre class="bg-gray-900 text-gray-100 rounded p-4 overflow-x-auto mb-4"><code>@verbatimprotected array $tools = [
+    // ... existing tools
+    \App\Mcp\Tools\YourTool::class,
+];@endverbatim</code></pre>
 
                 <h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-3 mt-6">Code Formatting</h3>
                 <p class="text-gray-700 dark:text-gray-300 mb-4">Format code with Laravel Pint:</p>
@@ -327,25 +326,19 @@
             <section class="mb-12">
                 <h2 class="text-2xl font-bold text-gray-900 dark:text-white mb-4">Resources</h2>
                 <ul class="list-disc list-inside text-gray-700 dark:text-gray-300 space-y-2 ml-4">
-                    <li><a href="https://docs.fivem.net/docs/"
-                            class="text-indigo-600 dark:text-indigo-400 hover:text-indigo-500 dark:hover:text-indigo-300">FiveM
+                    <li><a href="https://docs.fivem.net/docs/" class="link-gta">FiveM
                             Documentation</a></li>
-                    <li><a href="https://docs.fivem.net/natives/"
-                            class="text-indigo-600 dark:text-indigo-400 hover:text-indigo-500 dark:hover:text-indigo-300">FiveM
+                    <li><a href="https://docs.fivem.net/natives/" class="link-gta">FiveM
                             Natives Reference</a></li>
-                    <li><a href="https://coxdocs.dev/"
-                            class="text-indigo-600 dark:text-indigo-400 hover:text-indigo-500 dark:hover:text-indigo-300">COX
+                    <li><a href="https://coxdocs.dev/" class="link-gta">COX
                             MySQL
                             Documentation</a> - Required
                         for database operations</li>
-                    <li><a href="https://docs.qbcore.org/"
-                            class="text-indigo-600 dark:text-indigo-400 hover:text-indigo-500 dark:hover:text-indigo-300">QBCore
+                    <li><a href="https://docs.qbcore.org/" class="link-gta">QBCore
                             Documentation</a></li>
-                    <li><a href="https://laravel.com/docs/mcp"
-                            class="text-indigo-600 dark:text-indigo-400 hover:text-indigo-500 dark:hover:text-indigo-300">Laravel
+                    <li><a href="https://laravel.com/docs/mcp" class="link-gta">Laravel
                             MCP Documentation</a></li>
-                    <li><a href="https://modelcontextprotocol.io/"
-                            class="text-indigo-600 dark:text-indigo-400 hover:text-indigo-500 dark:hover:text-indigo-300">Model
+                    <li><a href="https://modelcontextprotocol.io/" class="link-gta">Model
                             Context Protocol</a></li>
                 </ul>
             </section>

resources/views/docs/index.blade.php

@@ -10,223 +10,225 @@
                 FiveM Development MCP Server
             </h1>
             <p class="mt-5 max-w-xl mx-auto text-xl text-gray-500 dark:text-gray-400">
-                A comprehensive Model Context Protocol server for FiveM development with 5 tools, 3 resources, and 5 prompts.
+                A comprehensive Model Context Protocol server for FiveM development with 5 tools, 3 resources, and 5
+                prompts.
             </p>
-            </div>
+        </div>
 
-            <!-- Features Grid -->
-            <div class="mt-12">
-                <h2 class="text-3xl font-extrabold text-gray-900 dark:text-white mb-8">Features</h2>
-                <div class="grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-3">
-                    <!-- Documentation Search -->
-                    <div class="bg-white dark:bg-gray-800 overflow-hidden shadow rounded-lg">
-                        <div class="px-4 py-5 sm:p-6">
-                            <div class="flex items-center">
-                                <div class="shrink-0 bg-indigo-500 rounded-md p-3">
-                                    <svg class="h-6 w-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                                            d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
-                                    </svg>
-                                </div>
-                                <div class="ml-5">
-                                    <h3 class="text-lg font-medium text-gray-900 dark:text-white">Documentation Search</h3>
-                                </div>
+        <!-- Features Grid -->
+        <div class="mt-12">
+            <h2 class="text-3xl font-extrabold text-gray-900 dark:text-white mb-8">Features</h2>
+            <div class="grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-3">
+                <!-- Documentation Search -->
+                <div class="bg-white dark:bg-gray-800 overflow-hidden shadow rounded-lg">
+                    <div class="px-4 py-5 sm:p-6">
+                        <div class="flex items-center">
+                            <div class="shrink-0 bg-gta-orange rounded-md p-3">
+                                <svg class="h-6 w-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                        d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
+                                </svg>
                             </div>
-                            <div class="mt-4">
-                                <p class="text-sm text-gray-500 dark:text-gray-400">
-                                    Search FiveM documentation by topic and category. Get direct links to relevant documentation.
-                                </p>
+                            <div class="ml-5">
+                                <h3 class="text-lg font-medium text-gray-900 dark:text-white">Documentation Search</h3>
                             </div>
                         </div>
-                    </div>
-
-                    <!-- Native Functions -->
-                    <div class="bg-white dark:bg-gray-800 overflow-hidden shadow rounded-lg">
-                        <div class="px-4 py-5 sm:p-6">
-                            <div class="flex items-center">
-                                <div class="shrink-0 bg-indigo-500 rounded-md p-3">
-                                    <svg class="h-6 w-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                                            d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4"></path>
-                                    </svg>
-                                </div>
-                                <div class="ml-5">
-                                    <h3 class="text-lg font-medium text-gray-900 dark:text-white">Native Functions</h3>
-                                </div>
-                            </div>
-                            <div class="mt-4">
-                                <p class="text-sm text-gray-500 dark:text-gray-400">
-                                    Look up GTA5/FiveM native functions with signatures, parameters, and code examples.
-                                </p>
-                            </div>
+                        <div class="mt-4">
+                            <p class="text-sm text-gray-500 dark:text-gray-400">
+                                Search FiveM documentation by topic and category. Get direct links to relevant
+                                documentation.
+                            </p>
                         </div>
                     </div>
+                </div>
 
-                    <!-- Manifest Generator -->
-                    <div class="bg-white dark:bg-gray-800 overflow-hidden shadow rounded-lg">
-                        <div class="px-4 py-5 sm:p-6">
-                            <div class="flex items-center">
-                                <div class="shrink-0 bg-indigo-500 rounded-md p-3">
-                                    <svg class="h-6 w-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                                            d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z">
-                                        </path>
-                                    </svg>
-                                </div>
-                                <div class="ml-5">
-                                    <h3 class="text-lg font-medium text-gray-900 dark:text-white">Manifest Generator</h3>
-                                </div>
+                <!-- Native Functions -->
+                <div class="bg-white dark:bg-gray-800 overflow-hidden shadow rounded-lg">
+                    <div class="px-4 py-5 sm:p-6">
+                        <div class="flex items-center">
+                            <div class="shrink-0 bg-gta-orange rounded-md p-3">
+                                <svg class="h-6 w-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                        d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4"></path>
+                                </svg>
                             </div>
-                            <div class="mt-4">
-                                <p class="text-sm text-gray-500 dark:text-gray-400">
-                                    Generate fxmanifest.lua files automatically for any framework and scripting language.
-                                </p>
+                            <div class="ml-5">
+                                <h3 class="text-lg font-medium text-gray-900 dark:text-white">Native Functions</h3>
                             </div>
                         </div>
-                    </div>
-
-                    <!-- Event Reference -->
-                    <div class="bg-white dark:bg-gray-800 overflow-hidden shadow rounded-lg">
-                        <div class="px-4 py-5 sm:p-6">
-                            <div class="flex items-center">
-                                <div class="shrink-0 bg-indigo-500 rounded-md p-3">
-                                    <svg class="h-6 w-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                                            d="M13 10V3L4 14h7v7l9-11h-7z"></path>
-                                    </svg>
-                                </div>
-                                <div class="ml-5">
-                                    <h3 class="text-lg font-medium text-gray-900 dark:text-white">Event Reference</h3>
-                                </div>
-                            </div>
-                            <div class="mt-4">
-                                <p class="text-sm text-gray-500 dark:text-gray-400">
-                                    Complete database of FiveM events including core, ESX, and QBCore events with examples.
-                                </p>
-                            </div>
+                        <div class="mt-4">
+                            <p class="text-sm text-gray-500 dark:text-gray-400">
+                                Look up GTA5/FiveM native functions with signatures, parameters, and code examples.
+                            </p>
                         </div>
                     </div>
+                </div>
 
-                    <!-- Boilerplate Generator -->
-                    <div class="bg-white dark:bg-gray-800 overflow-hidden shadow rounded-lg">
-                        <div class="px-4 py-5 sm:p-6">
-                            <div class="flex items-center">
-                                <div class="shrink-0 bg-indigo-500 rounded-md p-3">
-                                    <svg class="h-6 w-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                                            d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zM4 13a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H5a1 1 0 01-1-1v-6zM16 13a1 1 0 011-1h2a1 1 0 011 1v6a1 1 0 01-1 1h-2a1 1 0 01-1-1v-6z">
-                                        </path>
-                                    </svg>
-                                </div>
-                                <div class="ml-5">
-                                    <h3 class="text-lg font-medium text-gray-900 dark:text-white">Boilerplate Generator</h3>
-                                </div>
+                <!-- Manifest Generator -->
+                <div class="bg-white dark:bg-gray-800 overflow-hidden shadow rounded-lg">
+                    <div class="px-4 py-5 sm:p-6">
+                        <div class="flex items-center">
+                            <div class="shrink-0 bg-gta-orange rounded-md p-3">
+                                <svg class="h-6 w-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                        d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z">
+                                    </path>
+                                </svg>
                             </div>
-                            <div class="mt-4">
-                                <p class="text-sm text-gray-500 dark:text-gray-400">
-                                    Generate complete resource structures with client, server, config, and optional NUI files.
-                                </p>
+                            <div class="ml-5">
+                                <h3 class="text-lg font-medium text-gray-900 dark:text-white">Manifest Generator</h3>
                             </div>
                         </div>
+                        <div class="mt-4">
+                            <p class="text-sm text-gray-500 dark:text-gray-400">
+                                Generate fxmanifest.lua files automatically for any framework and scripting language.
+                            </p>
+                        </div>
                     </div>
+                </div>
 
-                    <!-- Framework Support -->
-                    <div class="bg-white dark:bg-gray-800 overflow-hidden shadow rounded-lg">
-                        <div class="px-4 py-5 sm:p-6">
-                            <div class="flex items-center">
-                                <div class="shrink-0 bg-indigo-500 rounded-md p-3">
-                                    <svg class="h-6 w-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                                            d="M9 3v2m6-2v2M9 19v2m6-2v2M5 9H3m2 6H3m18-6h-2m2 6h-2M7 19h10a2 2 0 002-2V7a2 2 0 00-2-2H7a2 2 0 00-2 2v10a2 2 0 002 2zM9 9h6v6H9V9z">
-                                        </path>
-                                    </svg>
-                                </div>
-                                <div class="ml-5">
-                                    <h3 class="text-lg font-medium text-gray-900 dark:text-white">Framework Support</h3>
-                                </div>
+                <!-- Event Reference -->
+                <div class="bg-white dark:bg-gray-800 overflow-hidden shadow rounded-lg">
+                    <div class="px-4 py-5 sm:p-6">
+                        <div class="flex items-center">
+                            <div class="shrink-0 bg-gta-orange rounded-md p-3">
+                                <svg class="h-6 w-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                        d="M13 10V3L4 14h7v7l9-11h-7z"></path>
+                                </svg>
                             </div>
-                            <div class="mt-4">
-                                <p class="text-sm text-gray-500 dark:text-gray-400">
-                                    Full support for Standalone, ESX, and QBCore frameworks in both Lua and JavaScript.
-                                </p>
+                            <div class="ml-5">
+                                <h3 class="text-lg font-medium text-gray-900 dark:text-white">Event Reference</h3>
                             </div>
                         </div>
+                        <div class="mt-4">
+                            <p class="text-sm text-gray-500 dark:text-gray-400">
+                                Complete database of FiveM events including core, ESX, and QBCore events with examples.
+                            </p>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Boilerplate Generator -->
+                <div class="bg-white dark:bg-gray-800 overflow-hidden shadow rounded-lg">
+                    <div class="px-4 py-5 sm:p-6">
+                        <div class="flex items-center">
+                            <div class="shrink-0 bg-gta-orange rounded-md p-3">
+                                <svg class="h-6 w-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                        d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zM4 13a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H5a1 1 0 01-1-1v-6zM16 13a1 1 0 011-1h2a1 1 0 011 1v6a1 1 0 01-1 1h-2a1 1 0 01-1-1v-6z">
+                                    </path>
+                                </svg>
+                            </div>
+                            <div class="ml-5">
+                                <h3 class="text-lg font-medium text-gray-900 dark:text-white">Boilerplate Generator</h3>
+                            </div>
+                        </div>
+                        <div class="mt-4">
+                            <p class="text-sm text-gray-500 dark:text-gray-400">
+                                Generate complete resource structures with client, server, config, and optional NUI files.
+                            </p>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Framework Support -->
+                <div class="bg-white dark:bg-gray-800 overflow-hidden shadow rounded-lg">
+                    <div class="px-4 py-5 sm:p-6">
+                        <div class="flex items-center">
+                            <div class="shrink-0 bg-gta-orange rounded-md p-3">
+                                <svg class="h-6 w-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                        d="M9 3v2m6-2v2M9 19v2m6-2v2M5 9H3m2 6H3m18-6h-2m2 6h-2M7 19h10a2 2 0 002-2V7a2 2 0 00-2-2H7a2 2 0 00-2 2v10a2 2 0 002 2zM9 9h6v6H9V9z">
+                                    </path>
+                                </svg>
+                            </div>
+                            <div class="ml-5">
+                                <h3 class="text-lg font-medium text-gray-900 dark:text-white">Framework Support</h3>
+                            </div>
+                        </div>
+                        <div class="mt-4">
+                            <p class="text-sm text-gray-500 dark:text-gray-400">
+                                Full support for Standalone, ESX, and QBCore frameworks in both Lua and JavaScript.
+                            </p>
+                        </div>
                     </div>
                 </div>
             </div>
+        </div>
 
-            <!-- Quick Actions -->
-            <div class="mt-16 bg-indigo-700 dark:bg-indigo-900 rounded-lg shadow-xl overflow-hidden">
-                <div class="px-6 py-12 sm:px-12">
-                    <div class="text-center">
-                        <h2 class="text-3xl font-extrabold text-white">Ready to get started?</h2>
-                        <p class="mt-4 text-lg text-indigo-100 dark:text-indigo-200">
-                            Set up the MCP server in just 5 minutes with our quick start guide.
-                        </p>
-                        <div class="mt-8 flex justify-center space-x-4">
-                            <a href="{{ route('docs.quickstart') }}"
-                                class="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md text-indigo-700 bg-white hover:bg-indigo-50 dark:text-indigo-900 dark:bg-white dark:hover:bg-gray-100">
-                                Quick Start Guide
-                            </a>
-                            <a href="{{ route('docs.documentation') }}"
-                                class="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md text-white bg-indigo-500 hover:bg-indigo-600 dark:bg-indigo-600 dark:hover:bg-indigo-700">
-                                Full Documentation
-                            </a>
-                        </div>
+        <!-- Quick Actions -->
+        <div class="mt-16 bg-gray-900 dark:bg-black border border-gta-orange rounded-lg shadow-xl overflow-hidden">
+            <div class="px-6 py-12 sm:px-12">
+                <div class="text-center">
+                    <h2 class="text-3xl font-extrabold text-white">Ready to get started?</h2>
+                    <p class="mt-4 text-lg text-gray-200 dark:text-gray-300">
+                        Set up the MCP server in just 5 minutes with our quick start guide.
+                    </p>
+                    <div class="mt-8 flex justify-center space-x-4">
+                        <a href="{{ route('docs.quickstart') }}"
+                            class="btn-gta-secondary inline-flex items-center px-6 py-3 text-base">
+                            Quick Start Guide
+                        </a>
+                        <a href="{{ route('docs.documentation') }}"
+                            class="btn-gta-primary inline-flex items-center px-6 py-3 text-base">
+                            Full Documentation
+                        </a>
                     </div>
                 </div>
             </div>
+        </div>
 
-            <!-- Resources -->
-            <div class="mt-16">
-                <h2 class="text-3xl font-extrabold text-gray-900 dark:text-white mb-8">Resources</h2>
-                <div class="grid grid-cols-1 gap-6 sm:grid-cols-2">
-                    <div class="bg-white dark:bg-gray-800 shadow rounded-lg p-6">
-                        <h3 class="text-lg font-medium text-gray-900 dark:text-white mb-4">MCP Server Configuration</h3>
-                        <p class="text-sm text-gray-500 dark:text-gray-400 mb-4">
-                            To connect to the FiveM MCP server, use the following configuration in your MCP client:
-                        </p>
-                        <pre
-                            class="bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-gray-100 rounded p-4 text-sm overflow-x-auto"><code>{
+        <!-- Resources -->
+        <div class="mt-16">
+            <h2 class="text-3xl font-extrabold text-gray-900 dark:text-white mb-8">Resources</h2>
+            <div class="grid grid-cols-1 gap-6 sm:grid-cols-2">
+                <div class="bg-white dark:bg-gray-800 shadow rounded-lg p-6">
+                    <h3 class="text-lg font-medium text-gray-900 dark:text-white mb-4">MCP Server Configuration</h3>
+                    <p class="text-sm text-gray-500 dark:text-gray-400 mb-4">
+                        To connect to the FiveM MCP server, use the following configuration in your MCP client:
+                    </p>
+                    <pre
+                        class="bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-gray-100 rounded p-4 text-sm overflow-x-auto"><code>@verbatim{
     "servers": {
-    "fivem": {
-        "url": "{{ route('fivem') }}",
-        "type": "http"
+        "fivem": {
+            "url": "{{ route('fivem') }}",
+            "type": "http"
+        }
     }
-    }
-}</code></pre>
-                    </div>
-                    <div class="bg-white dark:bg-gray-800 shadow rounded-lg p-6">
-                        <h3 class="text-lg font-medium text-gray-900 dark:text-white mb-4">External Links</h3>
-                        <ul class="space-y-2 text-sm">
-                            <li>
-                                <a href="https://docs.fivem.net/docs/"
-                                    class="text-indigo-600 dark:text-indigo-400 hover:text-indigo-500 dark:hover:text-indigo-300">FiveM
+}@endverbatim</code></pre>
+                </div>
+                <div class="bg-white dark:bg-gray-800 shadow rounded-lg p-6">
+                    <h3 class="text-lg font-medium text-gray-900 dark:text-white mb-4">External Links</h3>
+                    <ul class="space-y-2 text-sm">
+                        <li>
+                            <a href="https://docs.fivem.net/docs/"
+                                    class="link-gta">FiveM
                                     Documentation</a>
                             </li>
                             <li>
                                 <a href="https://docs.fivem.net/natives/"
-                                    class="text-indigo-600 dark:text-indigo-400 hover:text-indigo-500 dark:hover:text-indigo-300">FiveM
+                                    class="link-gta">FiveM
                                     Natives Reference</a>
                             </li>
                             <li>
                                 <a href="https://docs.qbcore.org/"
-                                    class="text-indigo-600 dark:text-indigo-400 hover:text-indigo-500 dark:hover:text-indigo-300">QBCore
+                                    class="link-gta">QBCore
                                     Documentation</a>
                             </li>
                             <li>
                                 <a href="https://coxdocs.dev/"
-                                    class="text-indigo-600 dark:text-indigo-400 hover:text-indigo-500 dark:hover:text-indigo-300">COX
+                                    class="link-gta">COX
                                     MySQL Documentation</a>
                             </li>
                             <li>
                                 <a href="https://laravel.com/docs/mcp"
-                                    class="text-indigo-600 dark:text-indigo-400 hover:text-indigo-500 dark:hover:text-indigo-300">Laravel
+                                    class="link-gta">Laravel
                                     MCP Documentation</a>
                             </li>
                             <li>
                                 <a href="https://modelcontextprotocol.io/"
-                                    class="text-indigo-600 dark:text-indigo-400 hover:text-indigo-500 dark:hover:text-indigo-300">Model
+                                    class="link-gta">Model
                                     Context Protocol</a>
                         </li>
                     </ul>

resources/views/docs/quickstart.blade.php

@@ -30,12 +30,12 @@
                 <div class="border-b border-gray-200 dark:border-gray-700 mb-6">
                     <nav class="-mb-px flex space-x-8">
                         <button data-tab="remote"
-                            class="transition-all duration-200 ease-in-out active border-b-2 border-indigo-500 py-4 px-1 text-center text-sm font-medium text-indigo-600 dark:text-indigo-400">
+                            class="transition-all duration-200 ease-in-out active border-b-2 border-gta-orange py-4 px-1 text-center text-sm font-medium text-gta-orange">
                             <span class="flex items-center">
                                 <span class="mr-2">🌐</span>
                                 Remote Server
                                 <span
-                                    class="ml-2 inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-indigo-100 dark:bg-indigo-900 text-indigo-800 dark:text-indigo-200">
+                                    class="ml-2 inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 dark:bg-gray-700 border border-gta-orange text-gta-orange">
                                     Recommended
                                 </span>
                             </span>
@@ -54,8 +54,8 @@
                 <div class="tab-content-container">
                     <!-- Remote Setup Tab -->
                     <div data-tab-content="remote" class="animate-fade-in active">
-                        <div class="bg-indigo-50 dark:bg-indigo-900/20 border-l-4 border-indigo-500 p-4 mb-6">
-                            <p class="text-sm text-indigo-800 dark:text-indigo-200">
+                        <div class="bg-gray-100 dark:bg-gray-700/30 border-l-4 border-gta-orange p-4 mb-6">
+                            <p class="text-sm text-gray-800 dark:text-gray-200">
                                 <strong>Easy setup!</strong> Connect to a hosted MCP server. Works from anywhere without any
                                 local
                                 installation.
@@ -99,41 +99,41 @@
                             <p class="text-gray-700 dark:text-gray-300 mb-3">Add this configuration (replace the URL with
                                 your actual server URL):
                             </p>
-                            <pre class="bg-gray-900 text-gray-100 rounded p-4 overflow-x-auto"><code>{
-            "mcpServers": {
-                "fivem": {
-                    "url": "https://your-domain.com/fivem"
-                }
-            }
-        }</code></pre>
+                            <pre class="bg-gray-900 text-gray-100 rounded p-4 overflow-x-auto"><code>@verbatim{
+    "mcpServers": {
+        "fivem": {
+            "url": "https://your-domain.com/fivem"
+        }
+    }
+}@endverbatim</code></pre>
 
-                            <p class="text-gray-700 mb-3 mt-6"><strong>For VSCode (Cline Extension):</strong></p>
-                            <p class="text-gray-700 mb-3">Edit your VSCode <code
-                                    class="bg-gray-100 px-2 py-1 rounded text-sm">settings.json</code>:
+                            <p class="text-gray-700 dark:text-gray-300 mb-3 mt-6"><strong>For VSCode (Cline Extension):</strong></p>
+                            <p class="text-gray-700 dark:text-gray-300 mb-3">Edit your VSCode <code
+                                    class="bg-gray-100 dark:bg-gray-700 text-gray-900 dark:text-gray-100 px-2 py-1 rounded text-sm">settings.json</code>:
                             </p>
-                            <pre class="bg-gray-900 text-gray-100 rounded p-4 overflow-x-auto"><code>{
-                "mcp": {
-                "servers": {
-                    "fivem": {
-                        "url": "https://your-domain.com/fivem"
-                    }
-                }
+                            <pre class="bg-gray-900 text-gray-100 rounded p-4 overflow-x-auto"><code>@verbatim{
+    "mcp": {
+        "servers": {
+            "fivem": {
+                "url": "https://your-domain.com/fivem"
             }
-        }</code></pre>
+        }
+    }
+}@endverbatim</code></pre>
                         </div>
 
                         <!-- Step 3 -->
                         <div class="mb-6">
-                            <h3 class="text-xl font-semibold text-gray-900 mb-3">3. Restart Claude Desktop</h3>
-                            <p class="text-gray-700">
+                            <h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-3">3. Restart Claude Desktop</h3>
+                            <p class="text-gray-700 dark:text-gray-300">
                                 Completely quit and restart Claude Desktop for changes to take effect.
                             </p>
                         </div>
 
                         <!-- Step 4 -->
                         <div class="mb-6">
-                            <h3 class="text-xl font-semibold text-gray-900 mb-3">4. Verify Connection</h3>
-                            <p class="text-gray-700">
+                            <h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-3">4. Verify Connection</h3>
+                            <p class="text-gray-700 dark:text-gray-300">
                                 In Claude Desktop, you should see a small 🔌 icon or indication that the FiveM MCP server is
                                 connected.
                             </p>
@@ -189,63 +189,63 @@
                             </ul>
 
                             <p class="text-gray-700 dark:text-gray-300 mb-3">Add this configuration:</p>
-                            <pre class="bg-gray-900 text-gray-100 rounded p-4 overflow-x-auto mb-4"><code>{
-            "mcpServers": {
-                "fivem": {
-                    "command": "php",
-                    "args": [
-                        "artisan",
-                        "mcp:start",
-                        "fivem"
-                    ],
-                    "cwd": "/path/to/fivem-mcp"
-                }
-            }
-        }</code></pre>
+                            <pre class="bg-gray-900 text-gray-100 rounded p-4 overflow-x-auto mb-4"><code>@verbatim{
+    "mcpServers": {
+        "fivem": {
+            "command": "php",
+            "args": [
+                "artisan",
+                "mcp:start",
+                "fivem"
+            ],
+            "cwd": "/path/to/fivem-mcp"
+        }
+    }
+}@endverbatim</code></pre>
 
                             <p class="text-gray-700 dark:text-gray-300 mb-3"><strong>Or use the full PHP path (e.g., for
                                     Herd):</strong></p>
-                            <pre class="bg-gray-900 text-gray-100 rounded p-4 overflow-x-auto"><code>{
-            "mcpServers": {
-                "fivem": {
-                    "command": "/path/to/php",
-                    "args": [
-                        "/path/to/fivem-mcp/artisan",
-                        "mcp:start",
-                        "fivem"
-                    ]
-                }
-            }
-        }</code></pre>
+                            <pre class="bg-gray-900 text-gray-100 rounded p-4 overflow-x-auto"><code>@verbatim{
+    "mcpServers": {
+        "fivem": {
+            "command": "/path/to/php",
+            "args": [
+                "/path/to/fivem-mcp/artisan",
+                "mcp:start",
+                "fivem"
+            ]
+        }
+    }
+}@endverbatim</code></pre>
 
                             <p class="text-gray-700 dark:text-gray-300 mb-3 mt-6"><strong>For VSCode (Cline
                                     Extension):</strong></p>
                             <p class="text-gray-700 dark:text-gray-300 mb-3">Edit your VSCode <code
                                     class="bg-gray-100 dark:bg-gray-700 text-gray-900 dark:text-gray-100 px-2 py-1 rounded text-sm">settings.json</code>:
                             </p>
-                            <pre class="bg-gray-900 text-gray-100 rounded p-4 overflow-x-auto mb-4"><code>{
-            "mcp": {
-                "servers": {
-                    "fivem": {
-                        "command": "php",
-                        "args": ["artisan", "mcp:start", "fivem"],
-                        "cwd": "/path/to/fivem-mcp"
-                    }
-                }
+                            <pre class="bg-gray-900 text-gray-100 rounded p-4 overflow-x-auto mb-4"><code>@verbatim{
+    "mcp": {
+        "servers": {
+            "fivem": {
+                "command": "php",
+                "args": ["artisan", "mcp:start", "fivem"],
+                "cwd": "/path/to/fivem-mcp"
             }
-        }</code></pre>
+        }
+    }
+}@endverbatim</code></pre>
 
                             <p class="text-gray-700 dark:text-gray-300 mb-3"><strong>Or with full paths:</strong></p>
-                            <pre class="bg-gray-900 text-gray-100 rounded p-4 overflow-x-auto"><code>{
-            "mcp": {
-                "servers": {
-                    "fivem": {
-                        "command": "/path/to/php",
-                        "args": ["/path/to/fivem-mcp/artisan", "mcp:start", "fivem"]
-                    }
-                }
+                            <pre class="bg-gray-900 text-gray-100 rounded p-4 overflow-x-auto"><code>@verbatim{
+    "mcp": {
+        "servers": {
+            "fivem": {
+                "command": "/path/to/php",
+                "args": ["/path/to/fivem-mcp/artisan", "mcp:start", "fivem"]
             }
-        }</code></pre>
+        }
+    }
+}@endverbatim</code></pre>
                         </div>
 
                         <!-- Step 3 -->
@@ -275,31 +275,31 @@
                 <p class="text-gray-700 dark:text-gray-300 mb-4">Once connected, try these prompts in Claude:</p>
 
                 <div class="space-y-4">
-                    <div class="border-l-4 border-indigo-500 pl-4">
+                    <div class="border-l-4 border-gta-orange pl-4">
                         <h4 class="font-semibold text-gray-900 dark:text-white mb-2">Example 1: Search Documentation</h4>
                         <pre
                             class="bg-gray-100 dark:bg-gray-700 text-gray-900 dark:text-gray-100 rounded p-3 text-sm"><code>Search FiveM docs for "state bags"</code></pre>
                     </div>
 
-                    <div class="border-l-4 border-indigo-500 pl-4">
+                    <div class="border-l-4 border-gta-orange pl-4">
                         <h4 class="font-semibold text-gray-900 dark:text-white mb-2">Example 2: Look Up a Native</h4>
                         <pre
                             class="bg-gray-100 dark:bg-gray-700 text-gray-900 dark:text-gray-100 rounded p-3 text-sm"><code>What does the GetPlayerPed native function do? Show me an example.</code></pre>
                     </div>
 
-                    <div class="border-l-4 border-indigo-500 pl-4">
+                    <div class="border-l-4 border-gta-orange pl-4">
                         <h4 class="font-semibold text-gray-900 dark:text-white mb-2">Example 3: Generate a Manifest</h4>
                         <pre
                             class="bg-gray-100 dark:bg-gray-700 text-gray-900 dark:text-gray-100 rounded p-3 text-sm"><code>Generate a fxmanifest.lua for my resource called "vehicle-shop" using ESX framework</code></pre>
                     </div>
 
-                    <div class="border-l-4 border-indigo-500 pl-4">
+                    <div class="border-l-4 border-gta-orange pl-4">
                         <h4 class="font-semibold text-gray-900 dark:text-white mb-2">Example 4: List Events</h4>
                         <pre
                             class="bg-gray-100 dark:bg-gray-700 text-gray-900 dark:text-gray-100 rounded p-3 text-sm"><code>Show me all FiveM core server events</code></pre>
                     </div>
 
-                    <div class="border-l-4 border-indigo-500 pl-4">
+                    <div class="border-l-4 border-gta-orange pl-4">
                         <h4 class="font-semibold text-gray-900 dark:text-white mb-2">Example 5: Create Boilerplate</h4>
                         <pre
                             class="bg-gray-100 dark:bg-gray-700 text-gray-900 dark:text-gray-100 rounded p-3 text-sm"><code>Create a complete resource structure for a QBCore script called "bank-heist" with NUI</code></pre>
@@ -316,14 +316,14 @@
                     <ol class="list-decimal list-inside text-gray-700 dark:text-gray-300 space-y-3 ml-4">
                         <li>
                             <strong>Check PHP Path:</strong> Make sure the PHP path in your config is correct
-                            <pre class="bg-gray-900 text-gray-100 rounded p-3 mt-2 overflow-x-auto"><code>which php
-                                    # or for Herd:
-                                    ls -la "~/Library/Application Support/Herd/bin/"</code></pre>
+                            <pre class="bg-gray-900 text-gray-100 rounded p-3 mt-2 overflow-x-auto"><code>@verbatimwhich php
+# or for Herd:
+ls -la "~/Library/Application Support/Herd/bin/"@endverbatim</code></pre>
                         </li>
                         <li>
                             <strong>Test Manually:</strong> Run the server command directly
-                            <pre class="bg-gray-900 text-gray-100 rounded p-3 mt-2 overflow-x-auto"><code>cd /path/to/fivem-mcp
-                                    php artisan mcp:start fivem</code></pre>
+                            <pre class="bg-gray-900 text-gray-100 rounded p-3 mt-2 overflow-x-auto"><code>@verbatimcd /path/to/fivem-mcp
+php artisan mcp:start fivem@endverbatim</code></pre>
                         </li>
                         <li>
                             <strong>Check Logs:</strong> Look at Claude Desktop logs
@@ -340,8 +340,8 @@
                 <div class="mb-6">
                     <h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-3">Permission Issues</h3>
                     <p class="text-gray-700 dark:text-gray-300 mb-3">If you get permission errors:</p>
-                    <pre class="bg-gray-900 text-gray-100 rounded p-4 overflow-x-auto"><code>cd /path/to/fivem-mcp
-                                    chmod +x artisan</code></pre>
+                    <pre class="bg-gray-900 text-gray-100 rounded p-4 overflow-x-auto"><code>@verbatimcd /path/to/fivem-mcp
+chmod +x artisan@endverbatim</code></pre>
                 </div>
 
                 <div class="mb-6">
@@ -357,7 +357,7 @@
                 <h2 class="text-2xl font-bold text-gray-900 dark:text-white mb-4">Next Steps</h2>
                 <ul class="list-disc list-inside text-gray-700 dark:text-gray-300 space-y-2 ml-4">
                     <li><a href="{{ route('docs.documentation') }}"
-                            class="text-indigo-600 dark:text-indigo-400 hover:text-indigo-500 dark:hover:text-indigo-300">Read
+                            class="link-gta">Read
                             the full
                             documentation</a></li>
                     <li>Explore all 5 tools in the MCP Inspector</li>
@@ -372,11 +372,11 @@
                 <p class="text-gray-700 dark:text-gray-300 mb-3">For issues:</p>
                 <ol class="list-decimal list-inside text-gray-700 dark:text-gray-300 space-y-2 ml-4">
                     <li>Check <a href="https://laravel.com/docs/mcp"
-                            class="text-indigo-600 dark:text-indigo-400 hover:text-indigo-500 dark:hover:text-indigo-300">Laravel
+                        class="link-gta">Laravel
                             MCP
                             Documentation</a></li>
                     <li>Check <a href="https://docs.fivem.net/"
-                            class="text-indigo-600 dark:text-indigo-400 hover:text-indigo-500 dark:hover:text-indigo-300">FiveM
+                        class="link-gta">FiveM
                             Documentation</a></li>
                     <li>Review server logs</li>
                     <li>Open a GitHub issue</li>

resources/views/layouts/partials/footer.blade.php

@@ -2,10 +2,10 @@
     <div class="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
         <p class="text-center text-sm text-gray-500 dark:text-gray-400">
             Built with <a href="https://laravel.com/docs/mcp"
-                class="text-indigo-600 dark:text-indigo-400 hover:text-indigo-500 dark:hover:text-indigo-300">Laravel
+                class="link-gta">Laravel
                 MCP</a>
             for <a href="https://docs.fivem.net"
-                class="text-indigo-600 dark:text-indigo-400 hover:text-indigo-500 dark:hover:text-indigo-300">FiveM</a>
+                class="link-gta">FiveM</a>
             development
         </p>
     </div>

resources/views/layouts/partials/navigation.blade.php

@@ -7,15 +7,15 @@
                 </div>
                 <div class="hidden sm:ml-6 sm:flex sm:space-x-8">
                     <a href="{{ route('docs.index') }}"
-                        class="{{ request()->routeIs('docs.index') ? 'border-indigo-500 text-gray-900 dark:text-white' : 'border-transparent text-gray-500 dark:text-gray-400 hover:border-gray-300 dark:hover:border-gray-600 hover:text-gray-700 dark:hover:text-gray-300' }} inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">
+                        class="{{ request()->routeIs('docs.index') ? 'border-gta-orange text-gray-900 dark:text-white' : 'border-transparent text-gray-500 dark:text-gray-400 hover:border-gray-300 dark:hover:border-gray-600 hover:text-gray-700 dark:hover:text-gray-300' }} inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">
                         Home
                     </a>
                     <a href="{{ route('docs.quickstart') }}"
-                        class="{{ request()->routeIs('docs.quickstart') ? 'border-indigo-500 text-gray-900 dark:text-white' : 'border-transparent text-gray-500 dark:text-gray-400 hover:border-gray-300 dark:hover:border-gray-600 hover:text-gray-700 dark:hover:text-gray-300' }} inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">
+                        class="{{ request()->routeIs('docs.quickstart') ? 'border-gta-orange text-gray-900 dark:text-white' : 'border-transparent text-gray-500 dark:text-gray-400 hover:border-gray-300 dark:hover:border-gray-600 hover:text-gray-700 dark:hover:text-gray-300' }} inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">
                         Quick Start
                     </a>
                     <a href="{{ route('docs.documentation') }}"
-                        class="{{ request()->routeIs('docs.documentation') ? 'border-indigo-500 text-gray-900 dark:text-white' : 'border-transparent text-gray-500 dark:text-gray-400 hover:border-gray-300 dark:hover:border-gray-600 hover:text-gray-700 dark:hover:text-gray-300' }} inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">
+                        class="{{ request()->routeIs('docs.documentation') ? 'border-gta-orange text-gray-900 dark:text-white' : 'border-transparent text-gray-500 dark:text-gray-400 hover:border-gray-300 dark:hover:border-gray-600 hover:text-gray-700 dark:hover:text-gray-300' }} inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">
                         Documentation
                     </a>
                 </div>

vite.config.js

@@ -19,6 +19,42 @@ export default defineConfig({
                             cyan: '#1de9b6',
                             gray: '#334155',
                             indigo: '#3b82f6',
+                            slate: {
+                                50: '#f8fafc',
+                                100: '#f1f5f9',
+                                200: '#e2e8f0',
+                                300: '#cbd5e1',
+                                400: '#94a3b8',
+                                500: '#64748b',
+                                600: '#475569',
+                                700: '#334155',
+                                800: '#1e293b',
+                                900: '#0f172a',
+                            },
+                            accent: {
+                                50: '#fff7ed',
+                                100: '#ffedd5',
+                                200: '#fed7aa',
+                                300: '#fdba74',
+                                400: '#fb923c',
+                                500: '#f57c00',
+                                600: '#ea580c',
+                                700: '#c2410c',
+                                800: '#9a3412',
+                                900: '#7c2d12',
+                            },
+                            neon: {
+                                50: '#ecfdf5',
+                                100: '#d1fae5',
+                                200: '#a7f3d0',
+                                300: '#6ee7b7',
+                                400: '#34d399',
+                                500: '#1de9b6',
+                                600: '#10b981',
+                                700: '#059669',
+                                800: '#047857',
+                                900: '#065f46',
+                            },
                         },
                     },
                 },