Update sync text, theme icons, communities link

Add responsive icons for system theme selection (Smartphone, Tablet, Monitor) in ThemeToggle.vue; add an "Explore Communities" CTA to Home.vue that links to the localized communities page. Reduce the advertised sync update rate from ~100 to ~50 times per second across multiple locale files (en, de, es, it, ru). Also update the English freeroam label/description to "Freeroam & Custom Servers" with details about custom scripts/maps/mods. Note: fr.json contains unresolved merge conflict markers for the sync description and needs manual resolution.
Update logo URL for Iceline Hosting
2026-07-13 02:04:47 +00:00 · 2026-02-21 19:07:30 +00:00 · 2026-01-30 22:00:47 +00:00 · 2026-01-30 21:46:00 +00:00 · 2026-01-30 21:38:33 +00:00 · 2026-01-30 21:37:47 +00:00
40 changed files with 3851 additions and 769 deletions
@@ -0,0 +1,41 @@
+name: Build Docker image and push to release
+
+on:
+  push:
+    # Sequence of patterns matched against refs/tags
+    tags:
+      - "v*" # Push events to matching v*, i.e. v1.0, v20.15.10
+
+jobs:
+  docker:
+    if: 'github.event.release'
+    runs-on: ubuntu-latest
+    steps:
+      - name: Connect to Tailscale
+        uses: tailscale/github-action@v4
+        with:
+          oauth-client-id: ${{ secrets.TS_OAUTH_CLIENT_ID }}
+          oauth-secret: ${{ secrets.TS_OAUTH_SECRET }}
+          tags: tag:ci
+      - name: Install registry CA certificate
+        run: |
+            sudo mkdir -p /etc/docker/certs.d/${{ secrets.REGISTRY_URL }}
+            echo "${{ secrets.REGISTRY_CA_CERT }}" | base64 -d | sudo tee /etc/docker/certs.d/${{ secrets.REGISTRY_URL }}/ca.crt
+
+      - name: Set up QEMU
+        uses: docker/setup-qemu-action@v3
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v3
+        with:
+          driver: docker
+      - name: Login to Docker Registry
+        uses: docker/login-action@v3
+        with:
+          registry: ${{ secrets.REGISTRY_URL }}
+          username: ${{ secrets.REGISTRY_USERNAME }}
+          password: ${{ secrets.REGISTRY_PASSWORD }}
+      - name: Build and push
+        uses: docker/build-push-action@v5
+        with:
+          push: true
+          tags: ${{ secrets.REGISTRY_URL }}/beammp/website:${{ github.REF_NAME }}, ${{ secrets.REGISTRY_URL }}/beammp/website:prod
@@ -0,0 +1,41 @@
+name: Build Docker image and push to release
+
+on:
+  push:
+    # Sequence of patterns matched against refs/tags
+    tags:
+      - "v*" # Push events to matching v*, i.e. v1.0, v20.15.10
+
+jobs:
+  docker:
+    if: 'github.event.prerelease'
+    runs-on: ubuntu-latest
+    steps:
+      - name: Connect to Tailscale
+        uses: tailscale/github-action@v4
+        with:
+          oauth-client-id: ${{ secrets.TS_OAUTH_CLIENT_ID }}
+          oauth-secret: ${{ secrets.TS_OAUTH_SECRET }}
+          tags: tag:ci
+      - name: Install registry CA certificate
+        run: |
+            sudo mkdir -p /etc/docker/certs.d/${{ secrets.REGISTRY_URL }}
+            echo "${{ secrets.REGISTRY_CA_CERT }}" | base64 -d | sudo tee /etc/docker/certs.d/${{ secrets.REGISTRY_URL }}/ca.crt
+
+      - name: Set up QEMU
+        uses: docker/setup-qemu-action@v3
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v3
+        with:
+          driver: docker
+      - name: Login to Docker Registry
+        uses: docker/login-action@v3
+        with:
+          registry: ${{ secrets.REGISTRY_URL }}
+          username: ${{ secrets.REGISTRY_USERNAME }}
+          password: ${{ secrets.REGISTRY_PASSWORD }}
+      - name: Build and push
+        uses: docker/build-push-action@v5
+        with:
+          push: true
+          tags: ${{ secrets.REGISTRY_URL }}/beammp/website:${{ github.REF_NAME }}, ${{ secrets.REGISTRY_URL }}/beammp/website:dev
@@ -0,0 +1,27 @@
+{
+  "cSpell.words": [
+    "beammp",
+    "beammpservers",
+    "beamng",
+    "Deutsch",
+    "Español",
+    "Français",
+    "freeroam",
+    "gridlines",
+    "Italiano",
+    "Lucide",
+    "maxplayers",
+    "modlist",
+    "modstotal",
+    "modstotalsize",
+    "Offroad",
+    "playerslist",
+    "reka",
+    "rels",
+    "roleplay",
+    "sdesc",
+    "sname",
+    "vueuse",
+    "Русский"
+  ]
+}
@@ -1,6 +1,6 @@
-# BeamMP Website (Frontend)
+# BeamMP Website

-This repository is home for the BeamMP website, this is a rebuild of the website from the ground up using Vue+Vite. We are also making use of Tailwindcss v4.
+This repository is home for the BeamMP website. The website features support for translations too now!

 **Tech Stack**
 - **Framework:** Vue 3 (`vue`, `vue-router`)
@@ -59,27 +59,6 @@ Vite will print the local dev URL (usually `http://localhost:5173`).
 - `vite.config.js` – Vite configuration
 - `components.json` – Shadcn-Vue component registry

-## Styling and UI
- **Tailwind CSS 4** is set up via `tailwind.config.js` and imported in `src/style.css`.
- **reka-ui** and shadcn-vue-style patterns are used for accessible, composable UI.
- **lucide-vue-next** provides icons.
-
-## Adding New UI Components (shadcn-vue)
-We’re standardizing on shadcn-vue-compatible components for consistency. Use the CLI to add new components:
-
-```powershell
-npx shadcn-vue@latest add <component>
-
-# examples
-npx shadcn-vue@latest add button
-npx shadcn-vue@latest add navigation-menu
-```
-
-The CLI reads `components.json` and will scaffold files under `src/components/ui/`.
-
-## Routing
-Use `vue-router` for navigation. Keep routes co-located with views and prefer lazy-loaded routes for large pages.
-
 ## Contributing
 We welcome contributions! Here’s how to get started.

@@ -115,15 +94,19 @@ We welcome contributions! Here’s how to get started.
 - Open a PR describing the problem, solution, screenshots if UI changes, and any follow-ups.
 - Link related issues. Keep PRs small; big changes should be split.

-## Environment & Configuration
- Tailwind and Vite are preconfigured. If you need globals, add them in `vite.config.js`.
- For icons, use `lucide-vue-next` and keep icon size consistent via props/classes.
- If adding new pages, prefer code-splitting with dynamic imports.

-## FAQ
- “Why Vite?” Fast dev server, optimized builds, and great Vue tooling.
- “Can I use Yarn or pnpm?” Yes—adjust commands accordingly.
- “Design system?” We favor shadcn-vue patterns + Tailwind + reka-ui primitives for consistent UI.
+# Translations
+BeamMP makes an effort to be maintained for multiple languages. 
+The current progress of this sits at: 
+[![gitlocalized ](https://gitlocalize.com/repo/10617/whole_project/badge.svg)](https://gitlocalize.com/repo/10617?utm_source=badge) 
+We use [GitLocalize](https://gitlocalize.com/) for managing this. You can contribute if you wish here: https://gitlocalize.com/repo/10617.

-## License
-Unless otherwise noted in the root repository, this project follows the BeamMP website’s standard license. If clarifications are needed, open an issue and we will update this section.
+The individual language progress is as follows:
+
+| Language              | Badge                                                                                                                           |
+|-----------------------|---------------------------------------------------------------------------------------------------------------------------------|
+| French                | [![gitlocalized ](https://gitlocalize.com/repo/10617/fr/badge.svg)](https://gitlocalize.com/repo/10617/fr?utm_source=badge) |
+| German                | [![gitlocalized ](https://gitlocalize.com/repo/10617/de/badge.svg)](https://gitlocalize.com/repo/10617/de?utm_source=badge) |
+| Italian               | [![gitlocalized ](https://gitlocalize.com/repo/10617/it/badge.svg)](https://gitlocalize.com/repo/10617/it?utm_source=badge) |
+| Russian               | [![gitlocalized ](https://gitlocalize.com/repo/10617/ru/badge.svg)](https://gitlocalize.com/repo/10617/ru?utm_source=badge) |
+| Spanish               | [![gitlocalized ](https://gitlocalize.com/repo/10617/es/badge.svg)](https://gitlocalize.com/repo/10617/es?utm_source=badge) |
@@ -1,13 +1,735 @@
 <!doctype html>
-<html lang="en">
+<html lang="en" style="overflow-x: hidden;">
  <head>
    <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <link rel="icon" type="image/ico+xml" href="/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>BeamMP Website Loading..</title>
+    <title>BeamMP Website</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.js"></script>
+    <noscript>
+      <style>
+      /* NoScript Styling */
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+
+      body {
+        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+        line-height: 1.6;
+        color: #333;
+        background: #f5f5f5;
+      }
+
+      .warning-banner {
+        background: linear-gradient(135deg, #f36d24 0%, #e85d1f 100%);
+        color: white;
+        padding: 1rem;
+        text-align: center;
+        font-weight: 600;
+        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+        position: sticky;
+        top: 0;
+        z-index: 1000;
+      }
+
+      .warning-banner strong {
+        display: block;
+        font-size: 1.1rem;
+        margin-bottom: 0.5rem;
+      }
+
+      .header {
+        background: white;
+        border-bottom: 1px solid #e5e5e5;
+        padding: 1rem 0;
+        position: sticky;
+        top: 94px;
+        z-index: 999;
+        box-shadow: 0 1px 3px rgba(0,0,0,0.1);
+      }
+
+      .header-content {
+        max-width: 1200px;
+        margin: 0 auto;
+        padding: 0 1rem;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        flex-wrap: wrap;
+        gap: 1rem;
+      }
+
+      .logo {
+        height: 64px;
+        width: auto;
+      }
+
+      .nav {
+        display: flex;
+        gap: 0.5rem;
+        flex-wrap: wrap;
+      }
+
+      .nav a {
+        color: #333;
+        text-decoration: none;
+        padding: 0.5rem 1rem;
+        border-radius: 6px;
+        transition: background 0.2s;
+      }
+
+      .nav a:hover {
+        background: #f5f5f5;
+      }
+
+      .hero {
+        background: linear-gradient(to bottom, rgba(0,0,0,0.5), rgba(0,0,0,0.7)), url('/landing-1.jpg') center/cover;
+        color: white;
+        padding: 5rem 1rem;
+        text-align: center;
+      }
+
+      .hero-content {
+        max-width: 900px;
+        margin: 0 auto;
+      }
+
+      .hero h1 {
+        font-size: 3rem;
+        font-weight: bold;
+        margin-bottom: 1rem;
+        line-height: 1.2;
+      }
+
+      .hero p {
+        font-size: 1.5rem;
+        margin-bottom: 2rem;
+        color: #e5e5e5;
+      }
+
+      .cta-buttons {
+        display: flex;
+        gap: 1rem;
+        justify-content: center;
+        flex-wrap: wrap;
+        margin-bottom: 3rem;
+      }
+
+      .btn {
+        display: inline-flex;
+        align-items: center;
+        gap: 0.5rem;
+        padding: 1rem 2rem;
+        border-radius: 8px;
+        text-decoration: none;
+        font-weight: 600;
+        font-size: 1.1rem;
+        transition: transform 0.2s, box-shadow 0.2s;
+      }
+
+      .btn:hover {
+        transform: scale(1.05);
+      }
+
+      .btn-primary {
+        background: linear-gradient(135deg, #f36d24 0%, #dc2626 100%);
+        color: white;
+        box-shadow: 0 4px 12px rgba(243, 109, 36, 0.3);
+      }
+
+      .btn-secondary {
+        background: rgba(255,255,255,0.1);
+        backdrop-filter: blur(10px);
+        border: 1px solid rgba(255,255,255,0.3);
+        color: white;
+      }
+
+      .stats {
+        display: grid;
+        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+        gap: 2rem;
+        max-width: 800px;
+        margin: 0 auto;
+      }
+
+      .stat {
+        text-align: center;
+      }
+
+      .stat-value {
+        font-size: 2.5rem;
+        font-weight: bold;
+        color: #f36d24;
+      }
+
+      .stat-label {
+        color: #e5e5e5;
+        margin-top: 0.5rem;
+      }
+
+      .container {
+        max-width: 1200px;
+        margin: 0 auto;
+        padding: 4rem 1rem;
+      }
+
+      .section {
+        padding: 4rem 1rem;
+      }
+
+      .section-alt {
+        background: white;
+      }
+
+      .section-title {
+        font-size: 2.5rem;
+        font-weight: bold;
+        text-align: center;
+        margin-bottom: 3rem;
+      }
+
+      .grid {
+        display: grid;
+        gap: 1.5rem;
+      }
+
+      .grid-2 {
+        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+      }
+
+      .grid-4 {
+        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+      }
+
+      .card {
+        background: white;
+        border: 1px solid #e5e5e5;
+        border-radius: 12px;
+        padding: 2rem;
+        transition: border-color 0.2s, box-shadow 0.2s;
+      }
+
+      .card:hover {
+        border-color: #4470b6;
+        box-shadow: 0 8px 24px rgba(0,0,0,0.1);
+      }
+
+      .card-icon {
+        width: 48px;
+        height: 48px;
+        margin-bottom: 1rem;
+        color: #f36d24;
+      }
+
+      .card-title {
+        font-size: 1.25rem;
+        font-weight: 600;
+        margin-bottom: 0.75rem;
+      }
+
+      .card-text {
+        color: #666;
+        font-size: 0.95rem;
+      }
+
+      .footer {
+        background: white;
+        border-top: 1px solid #e5e5e5;
+        padding: 2rem 1rem;
+        margin-top: 4rem;
+      }
+
+      .footer-content {
+        max-width: 1200px;
+        margin: 0 auto;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        flex-wrap: wrap;
+        gap: 1.5rem;
+      }
+
+      .social-links {
+        display: flex;
+        gap: 1rem;
+        align-items: center;
+        flex-wrap: wrap;
+      }
+
+      .social-links a {
+        color: #666;
+        transition: color 0.2s;
+      }
+
+      .social-links a:hover {
+        color: #4470b6;
+      }
+
+      .footer-info {
+        text-align: right;
+        color: #666;
+        font-size: 0.85rem;
+      }
+
+      .footer-links {
+        display: flex;
+        gap: 0.75rem;
+        margin-top: 0.5rem;
+      }
+
+      .footer-links a {
+        color: #666;
+        text-decoration: none;
+      }
+
+      .footer-links a:hover {
+        color: #4470b6;
+      }
+
+      .two-column {
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        gap: 3rem;
+        align-items: center;
+      }
+
+      .feature-list {
+        list-style: none;
+      }
+
+      .feature-list li {
+        display: flex;
+        gap: 1rem;
+        margin-bottom: 1.5rem;
+      }
+
+      .feature-bullet {
+        width: 24px;
+        height: 24px;
+        border-radius: 50%;
+        background: rgba(68, 112, 182, 0.2);
+        flex-shrink: 0;
+        margin-top: 4px;
+        position: relative;
+      }
+
+      .feature-bullet::after {
+        content: '';
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        width: 8px;
+        height: 8px;
+        border-radius: 50%;
+        background: #4470b6;
+      }
+
+      .feature-title {
+        font-weight: 600;
+        margin-bottom: 0.25rem;
+      }
+
+      .screenshot {
+        width: 100%;
+        border-radius: 12px;
+        border: 1px solid #e5e5e5;
+        box-shadow: 0 8px 24px rgba(0,0,0,0.15);
+      }
+
+      .cta-section {
+        background: linear-gradient(135deg, #f36d24 0%, #e85d1f 100%);
+        border-radius: 12px;
+        padding: 3rem;
+        text-align: center;
+        color: white;
+        margin: 3rem 0;
+      }
+
+      .cta-section h3 {
+        font-size: 2rem;
+        margin-bottom: 1rem;
+      }
+
+      .cta-section p {
+        font-size: 1.1rem;
+        margin-bottom: 2rem;
+        opacity: 0.95;
+      }
+
+      .btn-white {
+        background: white;
+        color: #f36d24;
+        padding: 1rem 2rem;
+        border-radius: 8px;
+        text-decoration: none;
+        font-weight: 600;
+        display: inline-block;
+        transition: background 0.2s;
+      }
+
+      .btn-white:hover {
+        background: #f5f5f5;
+      }
+
+      @media (max-width: 768px) {
+        .hero h1 {
+          font-size: 2rem;
+        }
+
+        .hero p {
+          font-size: 1.1rem;
+        }
+
+        .two-column {
+          grid-template-columns: 1fr;
+        }
+
+        .footer-content {
+          flex-direction: column;
+          text-align: center;
+        }
+
+        .footer-info {
+          text-align: center;
+        }
+
+        .nav {
+          justify-content: center;
+          width: 100%;
+        }
+
+        .header-content {
+          justify-content: center;
+        }
+      }
+
+      .dropdown {
+        position: relative;
+      }
+
+      .dropdown-content {
+        display: none;
+        position: absolute;
+        background-color: #f9f9f9;
+        min-width: 155px;
+        box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
+        text-align: left;
+        color: black;
+        border-radius: 6px;
+      }
+
+      .dropdown:hover .dropdown-content {
+        display: block;
+      }
+
+      .dropdown-content > div {
+        color: black;
+        border-bottom: solid 1px #e5e5e5;
+      }
+    </style>
+      <!-- Warning Banner -->
+      <div class="warning-banner">
+        <strong>⚠️ JavaScript is Disabled</strong>
+        <span>This is a limited version of the BeamMP website. Please enable JavaScript for the full interactive experience.</span>
+      </div>
+
+      <!-- Header -->
+      <header class="header">
+        <div class="header-content">
+          <img src="/src/assets/BeamMP_blk.png" alt="BeamMP Logo" class="logo">
+          <nav class="nav">
+            <a href="https://forum.beammp.com">Forum</a>
+            <a href="https://docs.beammp.com">Docs</a>
+            <a href="https://github.com/BeamMP/BeamMP">GitHub</a>
+            <a href="https://www.patreon.com/BeamMP">Patreon</a>
+            <a href="https://discord.gg/beammp">Discord</a>
+          </nav>
+        </div>
+      </header>
+
+      <!-- Hero Section -->
+      <section class="hero">
+        <div class="hero-content">
+          <h1>Multiplayer Mod for <em>BeamNG.drive</em></h1>
+          <p>Drive together in the ultimate soft-body physics sandbox</p>
+          
+          <div class="cta-buttons">
+            <a href="/installer/BeamMP_Installer.zip" class="btn btn-primary" download>
+              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-download-icon lucide-download"><path d="M12 15V3"/><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><path d="m7 10 5 5 5-5"/></svg> Download Now
+            </a>
+            <a href="https://forum.beammp.com/c/server-list/13" class="btn btn-secondary">
+              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-server-icon lucide-server"><rect width="20" height="8" x="2" y="2" rx="2" ry="2"/><rect width="20" height="8" x="2" y="14" rx="2" ry="2"/><line x1="6" x2="6.01" y1="6" y2="6"/><line x1="6" x2="6.01" y1="18" y2="18"/></svg> Browse Servers
+            </a>
+          </div>
+
+          <div class="stats">
+            <div class="stat">
+              <div class="stat-value">2,000+</div>
+              <div class="stat-label">Active Players</div>
+            </div>
+            <div class="stat">
+              <div class="stat-value">500+</div>
+              <div class="stat-label">Public Servers</div>
+            </div>
+            <div class="stat">
+              <div class="stat-value">2M+</div>
+              <div class="stat-label">All Servers</div>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      <!-- Features Section -->
+      <section class="section section-alt">
+        <div class="container">
+          <h2 class="section-title">Why Choose BeamMP?</h2>
+          <div class="grid grid-4">
+            <div class="card">
+              <div class="card-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-server-icon lucide-server"><rect width="20" height="8" x="2" y="2" rx="2" ry="2"/><rect width="20" height="8" x="2" y="14" rx="2" ry="2"/><line x1="6" x2="6.01" y1="6" y2="6"/><line x1="6" x2="6.01" y1="18" y2="18"/></svg></div>
+              <h3 class="card-title">Stable Servers</h3>
+              <p class="card-text">Rock-solid server performance with minimal lag and maximum uptime for the best multiplayer experience.</p>
+            </div>
+            <div class="card">
+              <div class="card-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-package-icon lucide-package"><path d="M11 21.73a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73z"/><path d="M12 22V12"/><polyline points="3.29 7 12 12 20.71 7"/><path d="m7.5 4.27 9 5.15"/></svg></div>
+              <h3 class="card-title">BeamNG.drive Required</h3>
+              <p class="card-text">Built specifically for BeamNG.drive, leveraging its incredible soft-body physics engine.</p>
+            </div>
+            <div class="card">
+              <div class="card-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-zap-icon lucide-zap"><path d="M4 14a1 1 0 0 1-.78-1.63l9.9-10.2a.5.5 0 0 1 .86.46l-1.92 6.02A1 1 0 0 0 13 10h7a1 1 0 0 1 .78 1.63l-9.9 10.2a.5.5 0 0 1-.86-.46l1.92-6.02A1 1 0 0 0 11 14z"/></svg></div>
+              <h3 class="card-title">Standalone Client</h3>
+              <p class="card-text">Easy-to-use launcher that manages everything for you - just install and play.</p>
+            </div>
+            <div class="card">
+              <div class="card-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-globe-icon lucide-globe"><circle cx="12" cy="12" r="10"/><path d="M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20"/><path d="M2 12h20"/></svg></div>
+              <h3 class="card-title">Real-time Sync</h3>
+              <p class="card-text">Advanced synchronization technology ensures smooth gameplay with players around the world.</p>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      <!-- Communities Section -->
+      <section class="section">
+        <div class="container">
+          <h2 class="section-title">Join Vibrant Communities</h2>
+          <p style="text-align: center; color: #666; margin-bottom: 3rem; font-size: 1.1rem;">
+            From casual cruising to competitive racing, find your perfect server
+          </p>
+          <div class="grid grid-4">
+            <div class="card">
+              <div class="card-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-rocket-icon lucide-rocket"><path d="M4.5 16.5c-1.5 1.26-2 5-2 5s3.74-.5 5-2c.71-.84.7-2.13-.09-2.91a2.18 2.18 0 0 0-2.91-.09z"/><path d="m12 15-3-3a22 22 0 0 1 2-3.95A12.88 12.88 0 0 1 22 2c0 2.72-.78 7.5-6 11a22.35 22.35 0 0 1-4 2z"/><path d="M9 12H4s.55-3.03 2-4c1.62-1.08 5 0 5 0"/><path d="M12 15v5s3.03-.55 4-2c1.08-1.62 0-5 0-5"/></svg></div>
+              <h3 class="card-title">Racing</h3>
+              <p class="card-text">Compete in high-speed races with custom tracks and competitive leaderboards.</p>
+            </div>
+            <div class="card">
+              <div class="card-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-gamepad2-icon lucide-gamepad-2"><line x1="6" x2="10" y1="11" y2="11"/><line x1="8" x2="8" y1="9" y2="13"/><line x1="15" x2="15.01" y1="12" y2="12"/><line x1="18" x2="18.01" y1="10" y2="10"/><path d="M17.32 5H6.68a4 4 0 0 0-3.978 3.59c-.006.052-.01.101-.017.152C2.604 9.416 2 14.456 2 16a3 3 0 0 0 3 3c1 0 1.5-.5 2-1l1.414-1.414A2 2 0 0 1 9.828 16h4.344a2 2 0 0 1 1.414.586L17 18c.5.5 1 1 2 1a3 3 0 0 0 3-3c0-1.545-.604-6.584-.685-7.258-.007-.05-.011-.1-.017-.151A4 4 0 0 0 17.32 5z"/></svg></div>
+              <h3 class="card-title">Roleplay</h3>
+              <p class="card-text">Immerse yourself in realistic roleplay scenarios with dedicated communities.</p>
+            </div>
+            <div class="card">
+              <div class="card-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-shield-icon lucide-shield"><path d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z"/></svg></div>
+              <h3 class="card-title">Crash & Derby</h3>
+              <p class="card-text">Destruction enthusiasts unite! Experience epic demolition derby events.</p>
+            </div>
+            <div class="card">
+              <div class="card-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-globe-icon lucide-globe"><circle cx="12" cy="12" r="10"/><path d="M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20"/><path d="M2 12h20"/></svg></div>
+              <h3 class="card-title">Freeroam</h3>
+              <p class="card-text">Explore vast maps with friends in relaxed freeroam servers.</p>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      <!-- Server Browser Section -->
+      <section class="section section-alt">
+        <div class="container">
+          <div class="two-column">
+            <div>
+              <h2 style="font-size: 2.5rem; font-weight: bold; margin-bottom: 1.5rem;">Find Your Perfect Server</h2>
+              <p style="font-size: 1.1rem; color: #666; margin-bottom: 2rem;">
+                Browse hundreds of unique servers with different game modes, maps, and communities. There's something for everyone!
+              </p>
+              <ul class="feature-list">
+                <li>
+                  <div class="feature-bullet"></div>
+                  <div>
+                    <div class="feature-title">Custom Game Modes</div>
+                    <div class="card-text">From racing leagues to roleplay servers</div>
+                  </div>
+                </li>
+                <li>
+                  <div class="feature-bullet"></div>
+                  <div>
+                    <div class="feature-title">Active Moderation</div>
+                    <div class="card-text">Safe and welcoming communities</div>
+                  </div>
+                </li>
+                <li>
+                  <div class="feature-bullet"></div>
+                  <div>
+                    <div class="feature-title">Global Network</div>
+                    <div class="card-text">Servers worldwide for the best connection</div>
+                  </div>
+                </li>
+              </ul>
+              <a href="https://forum.beammp.com/c/server-list/13" class="btn btn-primary">
+                Browse All Servers →
+              </a>
+            </div>
+            <div>
+              <img src="/beammpservers.png" alt="BeamMP Server Browser" class="screenshot">
+            </div>
+          </div>
+        </div>
+      </section>
+
+      <!-- Developer Section -->
+      <section class="section">
+        <div class="container">
+          <h2 class="section-title">Built for Developers</h2>
+          <p style="text-align: center; color: #666; margin-bottom: 3rem; font-size: 1.1rem;">
+            Powerful tools and extensive documentation to create your own server experiences
+          </p>
+          <div class="grid grid-4">
+            <div class="card">
+              <div class="card-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-code-icon lucide-code"><path d="m16 18 6-6-6-6"/><path d="m8 6-6 6 6 6"/></svg></div>
+              <h3 class="card-title">Lua Scripting</h3>
+              <p class="card-text">Create custom game modes and server-side mods with our powerful Lua API.</p>
+              <a href="https://docs.beammp.com/scripting/mod-reference/" style="color: #4470b6; font-weight: 600; text-decoration: none;">Learn More →</a>
+            </div>
+            <div class="card">
+              <div class="card-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-book-open-icon lucide-book-open"><path d="M12 7v14"/><path d="M3 18a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h5a4 4 0 0 1 4 4 4 4 0 0 1 4-4h5a1 1 0 0 1 1 1v13a1 1 0 0 1-1 1h-6a3 3 0 0 0-3 3 3 3 0 0 0-3-3z"/></svg></div>
+              <h3 class="card-title">Comprehensive Docs</h3>
+              <p class="card-text">Detailed guides and API references to help you get started quickly.</p>
+              <a href="https://docs.beammp.com" style="color: #4470b6; font-weight: 600; text-decoration: none;">Learn More →</a>
+            </div>
+            <div class="card">
+              <div class="card-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-wrench-icon lucide-wrench"><path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.106-3.105c.32-.322.863-.22.983.218a6 6 0 0 1-8.259 7.057l-7.91 7.91a1 1 0 0 1-2.999-3l7.91-7.91a6 6 0 0 1 7.057-8.259c.438.12.54.662.219.984z"/></svg></div>
+              <h3 class="card-title">Open Source</h3>
+              <p class="card-text">Contribute to the project or learn from our codebase on GitHub.</p>
+              <a href="https://github.com/BeamMP" style="color: #4470b6; font-weight: 600; text-decoration: none;">Learn More →</a>
+            </div>
+          </div>
+
+          <!-- Hosting CTA -->
+          <div class="cta-section">
+            <h3>Ready to Host Your Own Server?</h3>
+            <p>Check out our trusted hosting partners or download the server software to host it yourself.</p>
+            <div class="flex flex-col sm:flex-row gap-4 justify-center pt-4">
+              <a
+                href="https://github.com/BeamMP/BeamMP-Server/releases/latest/download/BeamMP-Server.exe"
+                class="btn-white flex items-center justify-center gap-3 bg-neutral-800 hover:bg-neutral-700 dark:bg-neutral-700 dark:hover:bg-neutral-600 text-white border border-neutral-600 dark:border-neutral-600 px-6 py-3 rounded-lg font-semibold transition-all"
+              >
+                Windows
+                <svg xmlns="http://www.w3.org/2000/svg" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-download-icon lucide-download"><path d="M12 15V3"/><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><path d="m7 10 5 5 5-5"/></svg>
+              </a>
+              <span
+                class="dropdown btn-white flex items-center justify-center gap-3 bg-neutral-800 hover:bg-neutral-700 dark:bg-neutral-700 dark:hover:bg-neutral-600 text-white border border-neutral-600 dark:border-neutral-600 px-6 py-3 rounded-lg font-semibold transition-all"
+              >
+                Linux Builds
+                <div class="dropdown-content">
+                  <div>
+                    <span style="color: #666; font-size: 0.85rem; padding: 0.5rem 1rem; display: block; font-weight: 600;">x86_64</span>
+                  </div>
+                  <div style="padding: 0.5rem 1rem;">
+                    <a href="https://github.com/BeamMP/BeamMP-Server/releases/latest/download/BeamMP-Server.debian.11.x86_64" style="color: #333; text-decoration: none; display: flex; align-items: center; gap: 0.5rem; padding: 0.25rem 0;">
+                      Debian 11
+                      <svg xmlns="http://www.w3.org/2000/svg" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-download-icon lucide-download"><path d="M12 15V3"/><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><path d="m7 10 5 5 5-5"/></svg>
+                    </a>
+                  </div>
+                  <div style="padding: 0.5rem 1rem;">
+                    <a href="https://github.com/BeamMP/BeamMP-Server/releases/latest/download/BeamMP-Server.debian.12.x86_64" style="color: #333; text-decoration: none; display: flex; align-items: center; gap: 0.5rem; padding: 0.25rem 0;">
+                      Debian 12
+                      <svg xmlns="http://www.w3.org/2000/svg" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-download-icon lucide-download"><path d="M12 15V3"/><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><path d="m7 10 5 5 5-5"/></svg>
+                    </a>
+                  </div>
+                  <div style="padding: 0.5rem 1rem;">
+                    <a href="https://github.com/BeamMP/BeamMP-Server/releases/latest/download/BeamMP-Server.ubuntu.22.04.x86_64" style="color: #333; text-decoration: none; display: flex; align-items: center; gap: 0.5rem; padding: 0.25rem 0;">
+                      Ubuntu 22.04
+                      <svg xmlns="http://www.w3.org/2000/svg" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-download-icon lucide-download"><path d="M12 15V3"/><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><path d="m7 10 5 5 5-5"/></svg>
+                    </a>
+                  </div>
+                  <div style="padding: 0.5rem 1rem;">
+                    <a href="https://github.com/BeamMP/BeamMP-Server/releases/latest/download/BeamMP-Server.ubuntu.24.04.x86_64" style="color: #333; text-decoration: none; display: flex; align-items: center; gap: 0.5rem; padding: 0.25rem 0;">
+                      Ubuntu 24.04
+                      <svg xmlns="http://www.w3.org/2000/svg" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-download-icon lucide-download"><path d="M12 15V3"/><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><path d="m7 10 5 5 5-5"/></svg>
+                    </a>
+                  </div>
+                  <div>
+                    <span style="color: #666; font-size: 0.85rem; padding: 0.5rem 1rem; display: block; font-weight: 600;">arm64</span>
+                  </div>
+                  <div style="padding: 0.5rem 1rem;">
+                    <a href="https://github.com/BeamMP/BeamMP-Server/releases/latest/download/BeamMP-Server.debian.11.arm64" style="color: #333; text-decoration: none; display: flex; align-items: center; gap: 0.5rem; padding: 0.25rem 0;">
+                      Debian 11
+                      <svg xmlns="http://www.w3.org/2000/svg" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-download-icon lucide-download"><path d="M12 15V3"/><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><path d="m7 10 5 5 5-5"/></svg>
+                    </a>
+                  </div>
+                  <div style="padding: 0.5rem 1rem;">
+                    <a href="https://github.com/BeamMP/BeamMP-Server/releases/latest/download/BeamMP-Server.debian.12.arm64" style="color: #333; text-decoration: none; display: flex; align-items: center; gap: 0.5rem; padding: 0.25rem 0;">
+                      Debian 12
+                      <svg xmlns="http://www.w3.org/2000/svg" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-download-icon lucide-download"><path d="M12 15V3"/><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><path d="m7 10 5 5 5-5"/></svg>
+                    </a>
+                  </div>
+                  <div style="padding: 0.5rem 1rem;">
+                    <a href="https://github.com/BeamMP/BeamMP-Server/releases/latest/download/BeamMP-Server.ubuntu.22.04.arm64" style="color: #333; text-decoration: none; display: flex; align-items: center; gap: 0.5rem; padding: 0.25rem 0;">
+                      Ubuntu 22.04
+                      <svg xmlns="http://www.w3.org/2000/svg" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-download-icon lucide-download"><path d="M12 15V3"/><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><path d="m7 10 5 5 5-5"/></svg>
+                    </a>
+                  </div>
+                  <div style="padding: 0.5rem 1rem;">
+                    <a href="https://github.com/BeamMP/BeamMP-Server/releases/latest/download/BeamMP-Server.ubuntu.24.04.arm64" style="color: #333; text-decoration: none; display: flex; align-items: center; gap: 0.5rem; padding: 0.25rem 0;">
+                      Ubuntu 24.04
+                      <svg xmlns="http://www.w3.org/2000/svg" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-download-icon lucide-download"><path d="M12 15V3"/><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><path d="m7 10 5 5 5-5"/></svg>
+                    </a>
+                  </div>
+                </div>
+              <span/>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      <!-- Footer -->
+      <footer class="footer">
+        <div class="footer-content">
+          <div class="social-links">
+            <a href="https://github.com/BeamMP" aria-label="GitHub">
+              <svg width="20" height="20" fill="currentColor" viewBox="0 0 24 24"><path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/></svg>
+            </a>
+            <a href="https://discord.gg/beammp" aria-label="Discord">
+              <svg width="20" height="20" fill="currentColor" viewBox="0 0 24 24"><path d="M20.317 4.37a19.791 19.791 0 0 0-4.885-1.515.074.074 0 0 0-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 0 0-5.487 0 12.64 12.64 0 0 0-.617-1.25.077.077 0 0 0-.079-.037A19.736 19.736 0 0 0 3.677 4.37a.07.07 0 0 0-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 0 0 .031.057 19.9 19.9 0 0 0 5.993 3.03.078.078 0 0 0 .084-.028 14.09 14.09 0 0 0 1.226-1.994.076.076 0 0 0-.041-.106 13.107 13.107 0 0 1-1.872-.892.077.077 0 0 1-.008-.128 10.2 10.2 0 0 0 .372-.292.074.074 0 0 1 .077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 0 1 .078.01c.12.098.246.198.373.292a.077.077 0 0 1-.006.127 12.299 12.299 0 0 1-1.873.892.077.077 0 0 0-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 0 0 .084.028 19.839 19.839 0 0 0 6.002-3.03.077.077 0 0 0 .032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 0 0-.031-.03zM8.02 15.33c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.956-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.956 2.418-2.157 2.418zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.955-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.946 2.418-2.157 2.418z"/></svg>
+            </a>
+            <a href="https://www.youtube.com/@beammpofficial" aria-label="YouTube">
+              <svg width="20" height="20" fill="currentColor" viewBox="0 0 24 24"><path d="M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z"/></svg>
+            </a>
+            <a href="https://x.com/beammpofficial" aria-label="X (Twitter)">
+              <svg width="20" height="20" fill="currentColor" viewBox="0 0 24 24"><path d="M18.901 1.153h3.68l-8.04 9.19L24 22.846h-7.406l-5.8-7.584-6.638 7.584H.474l8.6-9.83L0 1.154h7.594l5.243 6.932ZM17.61 20.644h2.039L6.486 3.24H4.298Z"/></svg>
+            </a>
+            <a href="https://www.reddit.com/r/BeamMP" aria-label="Reddit">
+              <svg width="20" height="20" fill="currentColor" viewBox="0 0 24 24"><path d="M12 0A12 12 0 0 0 0 12a12 12 0 0 0 12 12 12 12 0 0 0 12-12A12 12 0 0 0 12 0zm5.01 4.744c.688 0 1.25.561 1.25 1.249a1.25 1.25 0 0 1-2.498.056l-2.597-.547-.8 3.747c1.824.07 3.48.632 4.674 1.488.308-.309.73-.491 1.207-.491.968 0 1.754.786 1.754 1.754 0 .716-.435 1.333-1.01 1.614a3.111 3.111 0 0 1 .042.52c0 2.694-3.13 4.87-7.004 4.87-3.874 0-7.004-2.176-7.004-4.87 0-.183.015-.366.043-.534A1.748 1.748 0 0 1 4.028 12c0-.968.786-1.754 1.754-1.754.463 0 .898.196 1.207.49 1.207-.883 2.878-1.43 4.744-1.487l.885-4.182a.342.342 0 0 1 .14-.197.35.35 0 0 1 .238-.042l2.906.617a1.214 1.214 0 0 1 1.108-.701zM9.25 12C8.561 12 8 12.562 8 13.25c0 .687.561 1.248 1.25 1.248.687 0 1.248-.561 1.248-1.249 0-.688-.561-1.249-1.249-1.249zm5.5 0c-.687 0-1.248.561-1.248 1.25 0 .687.561 1.248 1.249 1.248.688 0 1.249-.561 1.249-1.249 0-.687-.562-1.249-1.25-1.249zm-5.466 3.99a.327.327 0 0 0-.231.094.33.33 0 0 0 0 .463c.842.842 2.484.913 2.961.913.477 0 2.105-.056 2.961-.913a.361.361 0 0 0 .029-.463.33.33 0 0 0-.464 0c-.547.533-1.684.73-2.512.73-.828 0-1.979-.196-2.512-.73a.326.326 0 0 0-.232-.095z"/></svg>
+            </a>
+            <span style="color: #ccc;">|</span>
+            <a href="https://www.patreon.com/BeamMP" style="color: #f96854; font-size: 0.85rem; text-decoration: underline;">
+              Support on Patreon
+            </a>
+          </div>
+
+          <div class="footer-info">
+            <p>&copy; 2019 - 2025 | BeamMP Mod Team All Rights Reserved</p>
+            <div class="footer-links">
+              <a href="https://forum.beammp.com/topic/95/privacy-policy-v1-0">Privacy Policy</a>
+              <span>·</span>
+              <a href="https://forum.beammp.com/topic/94/terms-of-use-v1-0">Terms of Use</a>
+            </div>
+          </div>
+        </div>
+      </footer>
+    </noscript>
  </body>
 </html>
@@ -1,23 +1,24 @@
 {
  "name": "beammp-website",
-  "version": "2.0.0",
+  "version": "2.4.7",
  "lockfileVersion": 3,
  "requires": true,
  "packages": {
    "": {
      "name": "beammp-website",
-      "version": "2.0.0",
+      "version": "2.4.7",
      "dependencies": {
        "@tailwindcss/vite": "^4.1.17",
        "@vueuse/core": "^14.1.0",
        "class-variance-authority": "^0.7.1",
        "clsx": "^2.1.1",
        "lucide-vue-next": "^0.555.0",
-        "reka-ui": "^2.6.0",
+        "reka-ui": "^2.7.0",
        "tailwind-merge": "^3.4.0",
        "tailwindcss": "^4.1.17",
        "tailwindcss-animate": "^1.0.7",
        "vue": "^3.5.25",
+        "vue-i18n": "^11.2.2",
        "vue-router": "^4.6.3"
      },
      "devDependencies": {
@@ -719,6 +720,47 @@
        "@swc/helpers": "^0.5.0"
      }
    },
+    "node_modules/@intlify/core-base": {
+      "version": "11.2.2",
+      "resolved": "https://registry.npmjs.org/@intlify/core-base/-/core-base-11.2.2.tgz",
+      "integrity": "sha512-0mCTBOLKIqFUP3BzwuFW23hYEl9g/wby6uY//AC5hTgQfTsM2srCYF2/hYGp+a5DZ/HIFIgKkLJMzXTt30r0JQ==",
+      "dependencies": {
+        "@intlify/message-compiler": "11.2.2",
+        "@intlify/shared": "11.2.2"
+      },
+      "engines": {
+        "node": ">= 16"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/kazupon"
+      }
+    },
+    "node_modules/@intlify/message-compiler": {
+      "version": "11.2.2",
+      "resolved": "https://registry.npmjs.org/@intlify/message-compiler/-/message-compiler-11.2.2.tgz",
+      "integrity": "sha512-XS2p8Ff5JxWsKhgfld4/MRQzZRQ85drMMPhb7Co6Be4ZOgqJX1DzcZt0IFgGTycgqL8rkYNwgnD443Q+TapOoA==",
+      "dependencies": {
+        "@intlify/shared": "11.2.2",
+        "source-map-js": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 16"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/kazupon"
+      }
+    },
+    "node_modules/@intlify/shared": {
+      "version": "11.2.2",
+      "resolved": "https://registry.npmjs.org/@intlify/shared/-/shared-11.2.2.tgz",
+      "integrity": "sha512-OtCmyFpSXxNu/oET/aN6HtPCbZ01btXVd0f3w00YsHOb13Kverk1jzA2k47pAekM55qbUw421fvPF1yxZ+gicw==",
+      "engines": {
+        "node": ">= 16"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/kazupon"
+      }
+    },
    "node_modules/@jridgewell/gen-mapping": {
      "version": "0.3.13",
      "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.13.tgz",
@@ -2790,9 +2832,9 @@
      }
    },
    "node_modules/reka-ui": {
-      "version": "2.6.0",
-      "resolved": "https://registry.npmjs.org/reka-ui/-/reka-ui-2.6.0.tgz",
-      "integrity": "sha512-NrGMKrABD97l890mFS3TNUzB0BLUfbL3hh0NjcJRIUSUljb288bx3Mzo31nOyUcdiiW0HqFGXJwyCBh9cWgb0w==",
+      "version": "2.7.0",
+      "resolved": "https://registry.npmjs.org/reka-ui/-/reka-ui-2.7.0.tgz",
+      "integrity": "sha512-m+XmxQN2xtFzBP3OAdIafKq7C8OETo2fqfxcIIxYmNN2Ch3r5oAf6yEYCIJg5tL/yJU2mHqF70dCCekUkrAnXA==",
      "dependencies": {
        "@floating-ui/dom": "^1.6.13",
        "@floating-ui/vue": "^1.1.6",
@@ -3178,6 +3220,25 @@
        "eslint": "^8.57.0 || ^9.0.0"
      }
    },
+    "node_modules/vue-i18n": {
+      "version": "11.2.2",
+      "resolved": "https://registry.npmjs.org/vue-i18n/-/vue-i18n-11.2.2.tgz",
+      "integrity": "sha512-ULIKZyRluUPRCZmihVgUvpq8hJTtOqnbGZuv4Lz+byEKZq4mU0g92og414l6f/4ju+L5mORsiUuEPYrAuX2NJg==",
+      "dependencies": {
+        "@intlify/core-base": "11.2.2",
+        "@intlify/shared": "11.2.2",
+        "@vue/devtools-api": "^6.5.0"
+      },
+      "engines": {
+        "node": ">= 16"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/kazupon"
+      },
+      "peerDependencies": {
+        "vue": "^3.0.0"
+      }
+    },
    "node_modules/vue-router": {
      "version": "4.6.3",
      "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-4.6.3.tgz",
@@ -1,7 +1,7 @@
 {
  "name": "beammp-website",
  "private": true,
-  "version": "2.0.0",
+  "version": "2.4.15",
  "type": "module",
  "scripts": {
    "dev": "vite",
@@ -16,11 +16,12 @@
    "class-variance-authority": "^0.7.1",
    "clsx": "^2.1.1",
    "lucide-vue-next": "^0.555.0",
-    "reka-ui": "^2.6.0",
+    "reka-ui": "^2.7.0",
    "tailwind-merge": "^3.4.0",
    "tailwindcss": "^4.1.17",
    "tailwindcss-animate": "^1.0.7",
    "vue": "^3.5.25",
+    "vue-i18n": "^11.2.2",
    "vue-router": "^4.6.3"
  },
  "devDependencies": {
@@ -0,0 +1,86 @@
+[
+  {
+    "name": "Horizon Hosting",
+    "website": "https://hrzn.link/beammp",
+    "from": "$3.34/mo",
+    "logo": "https://hrznhosting.com/assets/logo.svg"
+  },
+  {
+    "name": "RackGenius",
+    "website": "https://rackgeni.us/beammp-plans",
+    "from": "$0.5/mo",
+    "logo": "https://rackgenius.com/rackgenius-logo.png"
+  },
+  {
+    "name": "Connect Hosting",
+    "website": "https://connecthosting.net/beammp",
+    "from": "$1.49/mo",
+    "logo": "https://connecthosting.net/img/logo.webp"
+  },
+  {
+    "name": "Assetto Hosting",
+    "website": "https://assettohosting.com/games/beamng",
+    "from": "$2.30/mo",
+    "logo": "https://assettohosting.com/_next/image?url=https%3A%2F%2Fstrapi.assettohosting.com%2Fuploads%2Flogo_2228c8bbfb.png&w=640&q=100"
+  },
+  {
+    "name": "Zap-Hosting",
+    "website": "https://zap-hosting.com/itsbeammp",
+    "from": "$6.46/mo",
+    "logo": "https://wormhole.ifyouwantmorepower.com/online/assets/beammp/zap-logo.png"
+  },
+  {
+    "name": "HostHavoc",
+    "website": "https://hosthavoc.com",
+    "from": "$3.75/mo",
+    "logo": "https://hosthavoc.com/images/logo.svg"
+  },
+  {
+    "name": "PedalHost",
+    "website": "https://pedal.host",
+    "from": "$1.31/mo",
+    "logo": "https://pedal.host/pedalhost_horizontal_light.svg"
+  },
+  {
+    "name": "Vyper Hosting",
+    "website": "https://vyperhosting.com/r/beammp",
+    "from": "$2.68/mo",
+    "logo": "https://vyperhosting.com/assets/logo.png"
+  },
+  {
+    "name": "BisecHosting",
+    "website": "https://bisecthosting.com/beammp-server-hosting",
+    "from": "$5.99/mo",
+    "logo": "https://www.bisecthosting.com/_ipx/q_100&s_140x46/images/logo-dark-theme.svg"
+  },
+  {
+    "name": "Four Season Hosting",
+    "website": "https://fourseasonshosting.com",
+    "from": "$3.00/mo",
+    "logo": "https://fourseasonshosting.com/_next/image?url=%2Flogo.png&w=256&q=75"
+  },
+  {
+    "name": "Vertuo Hosting",
+    "website": "https://vertuohosting.com",
+    "from": "$1.99/mo",
+    "logo": "https://vertuohosting.com/assets/img/logo.png"
+  },
+  {
+    "name": "Winheberg",
+    "website": "https://winheberg.fr/offres/gaming/beammp",
+    "from": "$2.99/mo",
+    "logo": "https://winheberg.fr/img/logo-white.png"
+  },
+  {
+    "name": "Wabbanode",
+    "website": "https://wabbanode.com/partner/beammp",
+    "from": "$5.96/mo",
+    "logo": "https://wabbanode.com/_nuxt/wabba_logo.UPNIVeXa.webp"
+  },
+  {
+    "name": "Iceline Hosting",
+    "website": "https://iceline-hosting.com/games/beammp",
+    "from": "$3.64/mo",
+    "logo": "https://iceline-hosting.com/_astro/logo.DTnWV5zL_157TDr.webp"
+  }
+]
@@ -1,6 +1,80 @@
 <script setup>
-import { Github, Twitter, Facebook } from 'lucide-vue-next'
-import { RouterLink } from 'vue-router'
+import { Github, Facebook, Instagram, createLucideIcon } from 'lucide-vue-next'
+import { getLocalizedPath } from '@/utils/locale'
+import { RouterLink, useRoute } from 'vue-router'
+
+const route = useRoute()
+
+// Generate localized route
+function localRoute(path) {
+  return getLocalizedPath(path, route.params.locale)
+}
+
+const XIcon = createLucideIcon('X', [
+  [
+    'path',
+    {
+      d: 'M18.901 1.153h3.68l-8.04 9.19L24 22.846h-7.406l-5.8-7.584-6.638 7.584H.474l8.6-9.83L0 1.154h7.594l5.243 6.932ZM17.61 20.644h2.039L6.486 3.24H4.298Z',
+      stroke: 'none',
+      fill: 'currentColor',
+    },
+  ],
+])
+
+const BlueskyIcon = createLucideIcon('Bluesky', [
+  [
+    'path',
+    {
+      d: 'M5.202 2.857C7.954 4.922 10.913 9.11 12 11.358c1.087-2.247 4.046-6.436 6.798-8.501C20.783 1.366 24 .213 24 3.883c0 .732-.42 6.156-.667 7.037-.856 3.061-3.978 3.842-6.755 3.37 4.854.826 6.089 3.562 3.422 6.299-5.065 5.196-7.28-1.304-7.847-2.97-.104-.305-.152-.448-.153-.327 0-.121-.05.022-.153.327-.568 1.666-2.782 8.166-7.847 2.97-2.667-2.737-1.432-5.473 3.422-6.3-2.777.473-5.899-.308-6.755-3.369C.42 10.04 0 4.615 0 3.883c0-3.67 3.217-2.517 5.202-1.026',
+      stroke: 'none',
+      fill: 'currentColor',
+    },
+  ],
+])
+
+const RedditIcon = createLucideIcon('X', [
+  [
+    'path',
+    {
+      d: 'M12 0A12 12 0 0 0 0 12a12 12 0 0 0 12 12 12 12 0 0 0 12-12A12 12 0 0 0 12 0zm5.01 4.744c.688 0 1.25.561 1.25 1.249a1.25 1.25 0 0 1-2.498.056l-2.597-.547-.8 3.747c1.824.07 3.48.632 4.674 1.488.308-.309.73-.491 1.207-.491.968 0 1.754.786 1.754 1.754 0 .716-.435 1.333-1.01 1.614a3.111 3.111 0 0 1 .042.52c0 2.694-3.13 4.87-7.004 4.87-3.874 0-7.004-2.176-7.004-4.87 0-.183.015-.366.043-.534A1.748 1.748 0 0 1 4.028 12c0-.968.786-1.754 1.754-1.754.463 0 .898.196 1.207.49 1.207-.883 2.878-1.43 4.744-1.487l.885-4.182a.342.342 0 0 1 .14-.197.35.35 0 0 1 .238-.042l2.906.617a1.214 1.214 0 0 1 1.108-.701zM9.25 12C8.561 12 8 12.562 8 13.25c0 .687.561 1.248 1.25 1.248.687 0 1.248-.561 1.248-1.249 0-.688-.561-1.249-1.249-1.249zm5.5 0c-.687 0-1.248.561-1.248 1.25 0 .687.561 1.248 1.249 1.248.688 0 1.249-.561 1.249-1.249 0-.687-.562-1.249-1.25-1.249zm-5.466 3.99a.327.327 0 0 0-.231.094.33.33 0 0 0 0 .463c.842.842 2.484.913 2.961.913.477 0 2.105-.056 2.961-.913a.361.361 0 0 0 .029-.463.33.33 0 0 0-.464 0c-.547.533-1.684.73-2.512.73-.828 0-1.979-.196-2.512-.73a.326.326 0 0 0-.232-.095z',
+      stroke: 'none',
+      fill: 'currentColor',
+    },
+  ],
+])
+
+const DiscordIcon = createLucideIcon('Discord', [
+  [
+    'path',
+    {
+      d: 'M20.317 4.37a19.791 19.791 0 0 0-4.885-1.515.074.074 0 0 0-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 0 0-5.487 0 12.64 12.64 0 0 0-.617-1.25.077.077 0 0 0-.079-.037A19.736 19.736 0 0 0 3.677 4.37a.07.07 0 0 0-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 0 0 .031.057 19.9 19.9 0 0 0 5.993 3.03.078.078 0 0 0 .084-.028 14.09 14.09 0 0 0 1.226-1.994.076.076 0 0 0-.041-.106 13.107 13.107 0 0 1-1.872-.892.077.077 0 0 1-.008-.128 10.2 10.2 0 0 0 .372-.292.074.074 0 0 1 .077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 0 1 .078.01c.12.098.246.198.373.292a.077.077 0 0 1-.006.127 12.299 12.299 0 0 1-1.873.892.077.077 0 0 0-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 0 0 .084.028 19.839 19.839 0 0 0 6.002-3.03.077.077 0 0 0 .032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 0 0-.031-.03zM8.02 15.33c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.956-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.956 2.418-2.157 2.418zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.955-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.946 2.418-2.157 2.418z',
+      stroke: 'none',
+      fill: 'currentColor',
+    },
+  ],
+])
+
+const YouTubeIcon = createLucideIcon('YouTube', [
+  [
+    'path',
+    {
+      d: 'M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z',
+      stroke: 'none',
+      fill: 'currentColor',
+    },
+  ],
+])
+
+const TikTokIcon = createLucideIcon('TikTok', [
+  [
+    'path',
+    {
+      d: 'M12.525.02c1.31-.02 2.61-.01 3.91-.02.08 1.53.63 3.09 1.75 4.17 1.12 1.11 2.7 1.62 4.24 1.79v4.03c-1.44-.05-2.89-.35-4.2-.97-.57-.26-1.1-.59-1.62-.93-.01 2.92.01 5.84-.02 8.75-.08 1.4-.54 2.79-1.35 3.94-1.31 1.92-3.58 3.17-5.91 3.21-1.43.08-2.86-.31-4.08-1.03-2.02-1.19-3.44-3.37-3.65-5.71-.02-.5-.03-1-.01-1.49.18-1.9 1.12-3.72 2.58-4.96 1.66-1.44 3.98-2.13 6.15-1.72.02 1.48-.04 2.96-.04 4.44-.99-.32-2.15-.23-3.02.37-.63.41-1.11 1.04-1.36 1.75-.21.51-.15 1.07-.14 1.61.24 1.64 1.82 3.02 3.5 2.87 1.12-.01 2.19-.66 2.77-1.61.19-.33.4-.67.41-1.06.1-1.79.06-3.57.07-5.36.01-4.03-.01-8.05.02-12.07z',
+      stroke: 'none',
+      fill: 'currentColor',
+    },
+  ],
+])
 </script>

 <template>
@@ -9,42 +83,7 @@ import { RouterLink } from 'vue-router'
      <div class="flex flex-col md:flex-row items-center justify-between gap-6">
        <!-- Social Media Links -->
        <div class="flex items-center gap-4">
-          <a
-            href="https://www.reddit.com/r/BeamMP"
-            target="_blank"
-            rel="noopener noreferrer"
-            class="text-neutral-500 hover:text-beammp-blue transition-colors dark:text-neutral-400 dark:hover:text-blue-400"
-            aria-label="Reddit"
-          >
-            <svg
-              class="w-5 h-5"
-              fill="currentColor"
-              viewBox="0 0 24 24"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                d="M12 0A12 12 0 0 0 0 12a12 12 0 0 0 12 12 12 12 0 0 0 12-12A12 12 0 0 0 12 0zm5.01 4.744c.688 0 1.25.561 1.25 1.249a1.25 1.25 0 0 1-2.498.056l-2.597-.547-.8 3.747c1.824.07 3.48.632 4.674 1.488.308-.309.73-.491 1.207-.491.968 0 1.754.786 1.754 1.754 0 .716-.435 1.333-1.01 1.614a3.111 3.111 0 0 1 .042.52c0 2.694-3.13 4.87-7.004 4.87-3.874 0-7.004-2.176-7.004-4.87 0-.183.015-.366.043-.534A1.748 1.748 0 0 1 4.028 12c0-.968.786-1.754 1.754-1.754.463 0 .898.196 1.207.49 1.207-.883 2.878-1.43 4.744-1.487l.885-4.182a.342.342 0 0 1 .14-.197.35.35 0 0 1 .238-.042l2.906.617a1.214 1.214 0 0 1 1.108-.701zM9.25 12C8.561 12 8 12.562 8 13.25c0 .687.561 1.248 1.25 1.248.687 0 1.248-.561 1.248-1.249 0-.688-.561-1.249-1.249-1.249zm5.5 0c-.687 0-1.248.561-1.248 1.25 0 .687.561 1.248 1.249 1.248.688 0 1.249-.561 1.249-1.249 0-.687-.562-1.249-1.25-1.249zm-5.466 3.99a.327.327 0 0 0-.231.094.33.33 0 0 0 0 .463c.842.842 2.484.913 2.961.913.477 0 2.105-.056 2.961-.913a.361.361 0 0 0 .029-.463.33.33 0 0 0-.464 0c-.547.533-1.684.73-2.512.73-.828 0-1.979-.196-2.512-.73a.326.326 0 0 0-.232-.095z"
-              />
-            </svg>
-          </a>
-          <a
-            href="https://twitter.com/BeamMP_Mod_Team"
-            target="_blank"
-            rel="noopener noreferrer"
-            class="text-neutral-500 hover:text-beammp-blue transition-colors dark:text-neutral-400 dark:hover:text-blue-400"
-            aria-label="Twitter"
-          >
-            <Twitter class="w-5 h-5" />
-          </a>
-          <a
-            href="https://www.facebook.com/BeamNGMP"
-            target="_blank"
-            rel="noopener noreferrer"
-            class="text-neutral-500 hover:text-beammp-blue transition-colors dark:text-neutral-400 dark:hover:text-blue-400"
-            aria-label="Facebook"
-          >
-            <Facebook class="w-5 h-5" />
-          </a>
+          <!-- GitHub -->
          <a
            href="https://github.com/BeamMP"
            target="_blank"
@@ -54,6 +93,7 @@ import { RouterLink } from 'vue-router'
          >
            <Github class="w-5 h-5" />
          </a>
+          <!-- Discord -->
          <a
            href="https://discord.gg/beammp"
            target="_blank"
@@ -61,16 +101,77 @@ import { RouterLink } from 'vue-router'
            class="text-neutral-500 hover:text-beammp-blue transition-colors dark:text-neutral-400 dark:hover:text-blue-400"
            aria-label="Discord"
          >
-            <svg
-              class="w-5 h-5"
-              fill="currentColor"
-              viewBox="0 0 24 24"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                d="M20.317 4.37a19.791 19.791 0 0 0-4.885-1.515.074.074 0 0 0-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 0 0-5.487 0 12.64 12.64 0 0 0-.617-1.25.077.077 0 0 0-.079-.037A19.736 19.736 0 0 0 3.677 4.37a.07.07 0 0 0-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 0 0 .031.057 19.9 19.9 0 0 0 5.993 3.03.078.078 0 0 0 .084-.028 14.09 14.09 0 0 0 1.226-1.994.076.076 0 0 0-.041-.106 13.107 13.107 0 0 1-1.872-.892.077.077 0 0 1-.008-.128 10.2 10.2 0 0 0 .372-.292.074.074 0 0 1 .077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 0 1 .078.01c.12.098.246.198.373.292a.077.077 0 0 1-.006.127 12.299 12.299 0 0 1-1.873.892.077.077 0 0 0-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 0 0 .084.028 19.839 19.839 0 0 0 6.002-3.03.077.077 0 0 0 .032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 0 0-.031-.03zM8.02 15.33c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.956-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.956 2.418-2.157 2.418zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.955-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.946 2.418-2.157 2.418z"
-              />
-            </svg>
+            <DiscordIcon class="w-5 h-5" />
+          </a>
+          <!-- YouTube -->
+          <a
+            href="https://www.youtube.com/@beammpofficial"
+            target="_blank"
+            rel="noopener noreferrer"
+            class="text-neutral-500 hover:text-beammp-blue transition-colors dark:text-neutral-400 dark:hover:text-blue-400"
+            aria-label="YouTube"
+          >
+            <YouTubeIcon class="w-5 h-5" />
+          </a>
+          <!-- X -->
+          <a
+            href="https://x.com/beammpofficial"
+            target="_blank"
+            rel="noopener noreferrer"
+            class="text-neutral-500 hover:text-beammp-blue transition-colors dark:text-neutral-400 dark:hover:text-blue-400"
+            aria-label="X"
+          >
+            <XIcon class="w-5 h-5" />
+          </a>
+          <!-- Reddit -->
+          <a
+            href="https://www.reddit.com/r/BeamMP"
+            target="_blank"
+            rel="noopener noreferrer"
+            class="text-neutral-500 hover:text-beammp-blue transition-colors dark:text-neutral-400 dark:hover:text-blue-400"
+            aria-label="Reddit"
+          >
+            <RedditIcon class="w-5 h-5" />
+          </a>
+          <!-- Bluesky -->
+          <a
+            href="https://bsky.app/profile/beammp.com"
+            target="_blank"
+            rel="noopener noreferrer"
+            class="text-neutral-500 hover:text-beammp-blue transition-colors dark:text-neutral-400 dark:hover:text-blue-400"
+            aria-label="Bluesky"
+          >
+            <BlueskyIcon class="w-5 h-5" />
+          </a>
+          <!-- Instagram -->
+          <a
+            href="https://www.instagram.com/beammpofficial"
+            target="_blank"
+            rel="noopener noreferrer"
+            class="text-neutral-500 hover:text-beammp-blue transition-colors dark:text-neutral-400 dark:hover:text-blue-400"
+            aria-label="Instagram"
+          >
+            <Instagram class="w-5 h-5" />
+          </a>
+          <!-- TikTok -->
+          <a
+            href="https://www.tiktok.com/@beammpofficial"
+            target="_blank"
+            rel="noopener noreferrer"
+            class="text-neutral-500 hover:text-beammp-blue transition-colors dark:text-neutral-400 dark:hover:text-blue-400"
+            aria-label="TikTok"
+          >
+            <TikTokIcon class="w-5 h-5" />
+          </a>
+          <!-- Facebook -->
+          <a
+            href="https://www.facebook.com/BeamMPTeam"
+            target="_blank"
+            rel="noopener noreferrer"
+            class="text-neutral-500 hover:text-beammp-blue transition-colors dark:text-neutral-400 dark:hover:text-blue-400"
+            aria-label="Facebook"
+          >
+            <Facebook class="w-5 h-5" />
          </a>
          <span class="hidden md:inline text-neutral-300 dark:text-neutral-600">|</span>
          <a
@@ -79,7 +180,7 @@ import { RouterLink } from 'vue-router'
            rel="noopener noreferrer"
            class="text-xs text-orange-600 hover:text-orange-700 underline-offset-2 hover:underline dark:text-orange-400 dark:hover:text-orange-300"
          >
-            Support on Patreon
+            {{ $t('message.footer.support_on_patreon') }}
          </a>
        </div>

@@ -90,10 +191,10 @@ import { RouterLink } from 'vue-router'
          <p>&copy; 2019 - {{ new Date().getFullYear() }} | BeamMP Mod Team All Rights Reserved</p>
          <div class="flex gap-3">
            <RouterLink
-              to="/about"
+              :to="localRoute('about')"
              class="text-neutral-700 hover:text-beammp-blue transition-colors dark:text-neutral-500 dark:hover:text-blue-400"
            >
-              About
+              {{ $t('message.footer.about') }}
            </RouterLink>
            <span>&middot;</span>
            <a
@@ -102,7 +203,7 @@ import { RouterLink } from 'vue-router'
              rel="noopener noreferrer"
              class="text-neutral-700 hover:text-beammp-blue transition-colors dark:text-neutral-500 dark:hover:text-blue-400"
            >
-              Privacy Policy
+              {{ $t('message.footer.privacy_policy') }}
            </a>
            <span>&middot;</span>
            <a
@@ -111,7 +212,7 @@ import { RouterLink } from 'vue-router'
              rel="noopener noreferrer"
              class="text-neutral-700 hover:text-beammp-blue transition-colors dark:text-neutral-500 dark:hover:text-blue-400"
            >
-              Terms &amp; Conditions
+              {{ $t('message.footer.terms_conditions') }}
            </a>
          </div>
        </div>
@@ -1,6 +1,6 @@
 <script setup>
 import { ref } from 'vue'
-import { RouterLink } from 'vue-router'
+import { RouterLink, useRoute } from 'vue-router'
 import {
  NavigationMenu,
  NavigationMenuItem,
@@ -10,9 +10,12 @@ import {
 } from '@/components/ui/navigation-menu'
 import { cn } from '@/lib/utils'
 import ThemeToggle from '@/components/ThemeToggle.vue'
+import LanguageSelector from '@/components/LanguageSelector.vue'
 import { Menu, X } from 'lucide-vue-next'
+import { getLocalizedPath } from '@/utils/locale'

 const mobileMenuOpen = ref(false)
+const route = useRoute()

 function toggleMobileMenu() {
  mobileMenuOpen.value = !mobileMenuOpen.value
@@ -21,6 +24,11 @@ function toggleMobileMenu() {
 function closeMobileMenu() {
  mobileMenuOpen.value = false
 }
+
+// Generate localized route
+function localRoute(path) {
+  return getLocalizedPath(path, route.params.locale)
+}
 </script>

 <template>
@@ -28,28 +36,34 @@ function closeMobileMenu() {
    class="border-b border-neutral-200 dark:border-neutral-800 bg-white/80 dark:bg-neutral-900/70 backdrop-blur sticky top-0 z-20"
  >
    <nav class="max-w-6xl mx-auto px-4 h-16 flex items-center justify-between">
-      <RouterLink to="/" class="flex items-center gap-2 shrink-0" @click="closeMobileMenu">
-        <!-- Light mode logo -->
-        <img src="/beammp-logo.png" alt="BeamMP Logo" class="h-10 w-auto shrink-0 dark:hidden" />
-        <!-- Dark mode logo -->
+      <RouterLink
+        :to="localRoute('')"
+        class="flex items-center gap-2 shrink-0 mr-4"
+        @click="closeMobileMenu"
+      >
+        <!-- Light mode logo (black) -->
        <img
-          src="/beammp-logo-dark.png"
+          src="/src/assets/BeamMP_blk.png"
          alt="BeamMP Logo"
-          class="h-10 w-auto shrink-0 hidden dark:block"
+          class="h-16 w-auto shrink-0 dark:hidden"
+        />
+        <!-- Dark mode logo (white) -->
+        <img
+          src="/src/assets/BeamMP_wht.png"
+          alt="BeamMP Logo"
+          class="h-16 w-auto shrink-0 hidden dark:block"
        />
      </RouterLink>

      <!-- Desktop Navigation -->
      <!-- Switch to mobile earlier (avoid logo crowding) -->
-      <div class="hidden lg:flex items-center gap-4">
+      <div class="hidden xl:flex items-center gap-4">
        <NavigationMenu>
          <NavigationMenuList>
            <NavigationMenuItem>
              <NavigationMenuLink as-child>
-                <a
-                  href="https://forum.beammp.com"
-                  target="_blank"
-                  rel="noopener noreferrer"
+                <RouterLink
+                  :to="localRoute('communities')"
                  :class="
                    cn(
                      navigationMenuTriggerStyle(),
@@ -57,7 +71,70 @@ function closeMobileMenu() {
                    )
                  "
                >
-                  Forum
+                  {{ $t('message.nav.communities') }}
+                </RouterLink>
+              </NavigationMenuLink>
+            </NavigationMenuItem>
+            <NavigationMenuItem>
+              <NavigationMenuLink as-child>
+                <RouterLink
+                  :to="localRoute('partners')"
+                  :class="
+                    cn(
+                      navigationMenuTriggerStyle(),
+                      'bg-transparent text-neutral-900 hover:bg-neutral-100 hover:text-neutral-900 dark:bg-transparent dark:text-white dark:hover:bg-neutral-800 dark:hover:text-white'
+                    )
+                  "
+                >
+                  {{ $t('message.nav.partners') }}
+                </RouterLink>
+              </NavigationMenuLink>
+            </NavigationMenuItem>
+            <NavigationMenuItem>
+              <NavigationMenuLink as-child>
+                <RouterLink
+                  :to="localRoute('servers')"
+                  :class="
+                    cn(
+                      navigationMenuTriggerStyle(),
+                      'bg-transparent text-neutral-900 hover:bg-neutral-100 hover:text-neutral-900 dark:bg-transparent dark:text-white dark:hover:bg-neutral-800 dark:hover:text-white'
+                    )
+                  "
+                >
+                  {{ $t('message.nav.servers') }}
+                </RouterLink>
+              </NavigationMenuLink>
+            </NavigationMenuItem>
+            <NavigationMenuItem>
+              <NavigationMenuLink as-child>
+                <RouterLink
+                  :to="localRoute('stats')"
+                  :class="
+                    cn(
+                      navigationMenuTriggerStyle(),
+                      'bg-transparent text-neutral-900 hover:bg-neutral-100 hover:text-neutral-900 dark:bg-transparent dark:text-white dark:hover:bg-neutral-800 dark:hover:text-white'
+                    )
+                  "
+                >
+                  {{ $t('message.nav.statistics') }}
+                </RouterLink>
+              </NavigationMenuLink>
+            </NavigationMenuItem>
+            <NavigationMenuItem>
+              <NavigationMenuLink as-child>
+                <a
+                  href="https://forum.beammp.com"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  aria-label="External link"
+                  :class="
+                    cn(
+                      navigationMenuTriggerStyle(),
+                      'bg-transparent text-neutral-900 hover:bg-neutral-100 hover:text-neutral-900 dark:bg-transparent dark:text-white dark:hover:bg-neutral-800 dark:hover:text-white'
+                    )
+                  "
+                >
+                  {{ $t('message.nav.forums') }}
                </a>
              </NavigationMenuLink>
            </NavigationMenuItem>
@@ -67,6 +144,7 @@ function closeMobileMenu() {
                  href="https://docs.beammp.com"
                  target="_blank"
                  rel="noopener noreferrer"
+                  aria-label="External link"
                  :class="
                    cn(
                      navigationMenuTriggerStyle(),
@@ -74,14 +152,17 @@ function closeMobileMenu() {
                    )
                  "
                >
-                  Docs
+                  {{ $t('message.nav.docs') }}
                </a>
              </NavigationMenuLink>
            </NavigationMenuItem>
            <NavigationMenuItem>
              <NavigationMenuLink as-child>
-                <RouterLink
-                  to="/communities"
+                <a
+                  href="https://store.beammp.com"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  aria-label="External link"
                  :class="
                    cn(
                      navigationMenuTriggerStyle(),
@@ -89,38 +170,8 @@ function closeMobileMenu() {
                    )
                  "
                >
-                  Communities
-                </RouterLink>
-              </NavigationMenuLink>
-            </NavigationMenuItem>
-            <NavigationMenuItem>
-              <NavigationMenuLink as-child>
-                <RouterLink
-                  to="/servers"
-                  :class="
-                    cn(
-                      navigationMenuTriggerStyle(),
-                      'bg-transparent text-neutral-900 hover:bg-neutral-100 hover:text-neutral-900 dark:bg-transparent dark:text-white dark:hover:bg-neutral-800 dark:hover:text-white'
-                    )
-                  "
-                >
-                  Servers
-                </RouterLink>
-              </NavigationMenuLink>
-            </NavigationMenuItem>
-            <NavigationMenuItem>
-              <NavigationMenuLink as-child>
-                <RouterLink
-                  to="/stats"
-                  :class="
-                    cn(
-                      navigationMenuTriggerStyle(),
-                      'bg-transparent text-neutral-900 hover:bg-neutral-100 hover:text-neutral-900 dark:bg-transparent dark:text-white dark:hover:bg-neutral-800 dark:hover:text-white'
-                    )
-                  "
-                >
-                  Statistics
-                </RouterLink>
+                  {{ $t('message.nav.store') }}
+                </a>
              </NavigationMenuLink>
            </NavigationMenuItem>
            <NavigationMenuItem>
@@ -129,6 +180,7 @@ function closeMobileMenu() {
                  href="https://github.com/BeamMP/BeamMP"
                  target="_blank"
                  rel="noopener noreferrer"
+                  aria-label="External link"
                  :class="
                    cn(
                      navigationMenuTriggerStyle(),
@@ -136,7 +188,7 @@ function closeMobileMenu() {
                    )
                  "
                >
-                  GitHub
+                  {{ $t('message.nav.github') }}
                </a>
              </NavigationMenuLink>
            </NavigationMenuItem>
@@ -146,6 +198,7 @@ function closeMobileMenu() {
                  href="https://www.patreon.com/BeamMP"
                  target="_blank"
                  rel="noopener noreferrer"
+                  aria-label="External link"
                  :class="
                    cn(
                      navigationMenuTriggerStyle(),
@@ -153,17 +206,21 @@ function closeMobileMenu() {
                    )
                  "
                >
-                  Patreon
+                  {{ $t('message.nav.patreon') }}
                </a>
              </NavigationMenuLink>
            </NavigationMenuItem>
          </NavigationMenuList>
        </NavigationMenu>
-        <ThemeToggle />
+        <div class="flex items-center gap-1 sm:gap-2 flex-shrink-0">
+          <LanguageSelector />
+          <ThemeToggle />
+        </div>
      </div>

      <!-- Mobile Menu Button and Theme Toggle -->
-      <div class="flex lg:hidden items-center gap-2">
+      <div class="flex xl:hidden items-center gap-2">
+        <LanguageSelector />
        <ThemeToggle />
        <button
          class="p-2 text-neutral-900 dark:text-white hover:bg-neutral-100 dark:hover:bg-neutral-800 rounded-md transition-colors"
@@ -187,15 +244,36 @@ function closeMobileMenu() {
    >
      <div
        v-if="mobileMenuOpen"
-        class="md:hidden border-t border-neutral-200 dark:border-neutral-800 bg-white dark:bg-neutral-900"
+        class="xl:hidden border-t border-neutral-200 dark:border-neutral-800 bg-white dark:bg-neutral-900"
      >
        <div class="px-4 py-3 space-y-1">
          <RouterLink
-            to="/about"
+            :to="localRoute('communities')"
            class="block px-4 py-3 text-neutral-900 dark:text-white hover:bg-neutral-100 dark:hover:bg-neutral-800 rounded-md transition-colors"
            @click="closeMobileMenu"
          >
-            About
+            {{ $t('message.nav.communities') }}
+          </RouterLink>
+          <RouterLink
+            :to="localRoute('partners')"
+            class="block px-4 py-3 text-neutral-900 dark:text-white hover:bg-neutral-100 dark:hover:bg-neutral-800 rounded-md transition-colors"
+            @click="closeMobileMenu"
+          >
+            {{ $t('message.nav.partners') }}
+          </RouterLink>
+          <RouterLink
+            :to="localRoute('servers')"
+            class="block px-4 py-3 text-neutral-900 dark:text-white hover:bg-neutral-100 dark:hover:bg-neutral-800 rounded-md transition-colors"
+            @click="closeMobileMenu"
+          >
+            {{ $t('message.nav.servers') }}
+          </RouterLink>
+          <RouterLink
+            :to="localRoute('stats')"
+            class="block px-4 py-3 text-neutral-900 dark:text-white hover:bg-neutral-100 dark:hover:bg-neutral-800 rounded-md transition-colors"
+            @click="closeMobileMenu"
+          >
+            {{ $t('message.nav.statistics') }}
          </RouterLink>
          <a
            href="https://forum.beammp.com"
@@ -204,7 +282,7 @@ function closeMobileMenu() {
            class="block px-4 py-3 text-neutral-900 dark:text-white hover:bg-neutral-100 dark:hover:bg-neutral-800 rounded-md transition-colors"
            @click="closeMobileMenu"
          >
-            Forum
+            {{ $t('message.nav.forums') }}
          </a>
          <a
            href="https://docs.beammp.com"
@@ -213,29 +291,8 @@ function closeMobileMenu() {
            class="block px-4 py-3 text-neutral-900 dark:text-white hover:bg-neutral-100 dark:hover:bg-neutral-800 rounded-md transition-colors"
            @click="closeMobileMenu"
          >
-            Docs
+            {{ $t('message.nav.docs') }}
          </a>
-          <RouterLink
-            to="/communities"
-            class="block px-4 py-3 text-neutral-900 dark:text-white hover:bg-neutral-100 dark:hover:bg-neutral-800 rounded-md transition-colors"
-            @click="closeMobileMenu"
-          >
-            Communities
-          </RouterLink>
-          <RouterLink
-            to="/servers"
-            class="block px-4 py-3 text-neutral-900 dark:text-white hover:bg-neutral-100 dark:hover:bg-neutral-800 rounded-md transition-colors"
-            @click="closeMobileMenu"
-          >
-            Servers
-          </RouterLink>
-          <RouterLink
-            to="/stats"
-            class="block px-4 py-3 text-neutral-900 dark:text-white hover:bg-neutral-100 dark:hover:bg-neutral-800 rounded-md transition-colors"
-            @click="closeMobileMenu"
-          >
-            Statistics
-          </RouterLink>
          <a
            href="https://github.com/BeamMP/BeamMP"
            target="_blank"
@@ -243,7 +300,7 @@ function closeMobileMenu() {
            class="block px-4 py-3 text-neutral-900 dark:text-white hover:bg-neutral-100 dark:hover:bg-neutral-800 rounded-md transition-colors"
            @click="closeMobileMenu"
          >
-            GitHub
+            {{ $t('message.nav.github') }}
          </a>
          <a
            href="https://www.patreon.com/BeamMP"
@@ -252,7 +309,7 @@ function closeMobileMenu() {
            class="block px-4 py-3 text-neutral-900 dark:text-white hover:bg-neutral-100 dark:hover:bg-neutral-800 rounded-md transition-colors"
            @click="closeMobileMenu"
          >
-            Patreon
+            {{ $t('message.nav.patreon') }}
          </a>
        </div>
      </div>
@@ -0,0 +1,95 @@
+<script setup>
+import { ref, onMounted } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useRouter, useRoute } from 'vue-router'
+import { LANGUAGES, loadLocaleMessages } from '@/i18n'
+import { switchLocale, getCurrentLocale } from '@/utils/locale'
+import { ChevronDown } from 'lucide-vue-next'
+
+const { locale } = useI18n()
+const router = useRouter()
+const route = useRoute()
+const isOpen = ref(false)
+
+const currentLanguage = () => {
+  return LANGUAGES[locale.value] || LANGUAGES['en']
+}
+
+const selectLanguage = async (langCode) => {
+  // Load messages dynamically before switching
+  try {
+    await loadLocaleMessages(window.i18n, langCode)
+  } catch (e) {
+    // Fallback if dynamic import fails
+    console.warn('Failed to load locale messages for', langCode, e)
+  }
+  locale.value = langCode
+  localStorage.setItem('lang', langCode)
+  isOpen.value = false
+
+  // Navigate to the new locale route
+  const currentPath = route.fullPath
+  const newPath = switchLocale(langCode, currentPath)
+  router.push(newPath)
+}
+
+const toggleDropdown = () => {
+  isOpen.value = !isOpen.value
+}
+
+onMounted(async () => {
+  const saved = localStorage.getItem('lang') || getCurrentLocale()
+  if (saved && saved !== locale.value) {
+    try {
+      await loadLocaleMessages(window.i18n, saved)
+      locale.value = saved
+    } catch (e) {
+      console.warn('Failed to hydrate saved locale', saved, e)
+    }
+  }
+})
+</script>
+
+<template>
+  <div class="relative">
+    <button
+      class="flex items-center gap-2 px-3 py-2 rounded-lg bg-neutral-200 dark:bg-neutral-800/50 hover:bg-neutral-300 dark:hover:bg-neutral-800 transition-colors text-neutral-900 dark:text-white text-sm font-medium"
+      style="height: 40px"
+      :aria-expanded="isOpen"
+      :aria-label="$t('message.nav.language')"
+      @click="toggleDropdown"
+    >
+      <img
+        :src="`/flags/${currentLanguage().flag}.png`"
+        :alt="currentLanguage().name"
+        class="w-5 h-4 rounded-sm"
+      />
+      <span class="hidden sm:inline">{{ currentLanguage().name }}</span>
+      <ChevronDown class="w-4 h-4 transition-transform" :class="{ 'rotate-180': isOpen }" />
+    </button>
+
+    <!-- Dropdown menu -->
+    <div
+      v-if="isOpen"
+      class="absolute right-0 mt-2 w-48 bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-lg shadow-lg z-50"
+    >
+      <div class="py-1">
+        <button
+          v-for="(lang, code) in LANGUAGES"
+          :key="code"
+          :class="[
+            'w-full px-4 py-2 flex items-center gap-3 text-sm transition-colors',
+            locale === code
+              ? 'bg-neutral-100 dark:bg-neutral-800 text-neutral-900 dark:text-white'
+              : 'text-neutral-700 dark:text-neutral-300 hover:bg-neutral-50 dark:hover:bg-neutral-800/70',
+          ]"
+          @click="selectLanguage(code)"
+        >
+          <img :src="`/flags/${lang.flag}.png`" :alt="lang.name" class="w-5 h-4 rounded-sm" />
+          <span>{{ lang.name }}</span>
+          <span v-if="locale === code" class="ml-auto text-neutral-500">✓</span>
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
@@ -1,6 +1,6 @@
 <script setup>
 import { ref, onMounted } from 'vue'
-import { Sun, Moon, Monitor } from 'lucide-vue-next'
+import { Sun, Moon, Monitor, Smartphone, Tablet } from 'lucide-vue-next'

 const theme = ref('system')

@@ -45,7 +45,7 @@ onMounted(() => {
          ? 'bg-white shadow-sm text-neutral-900 dark:bg-neutral-700 dark:text-white'
          : 'text-neutral-600 hover:text-neutral-900 dark:text-neutral-400 dark:hover:text-neutral-200',
      ]"
-      title="Light mode"
+      :title="$t('message.theme.light')"
      @click="setTheme('light')"
    >
      <Sun class="w-4 h-4" />
@@ -57,10 +57,12 @@ onMounted(() => {
          ? 'bg-white shadow-sm text-neutral-900 dark:bg-neutral-700 dark:text-white'
          : 'text-neutral-600 hover:text-neutral-900 dark:text-neutral-400 dark:hover:text-neutral-200',
      ]"
-      title="System theme"
+      :title="$t('message.theme.system')"
      @click="setTheme('system')"
    >
-      <Monitor class="w-4 h-4" />
+      <Smartphone class="w-4 h-4 md:hidden" />
+      <Tablet class="w-4 h-4 hidden md:block lg:hidden" />
+      <Monitor class="w-4 h-4 hidden lg:block" />
    </button>
    <button
      :class="[
@@ -69,7 +71,7 @@ onMounted(() => {
          ? 'bg-white shadow-sm text-neutral-900 dark:bg-neutral-700 dark:text-white'
          : 'text-neutral-600 hover:text-neutral-900 dark:text-neutral-400 dark:hover:text-neutral-200',
      ]"
-      title="Dark mode"
+      :title="$t('message.theme.dark')"
      @click="setTheme('dark')"
    >
      <Moon class="w-4 h-4" />
@@ -0,0 +1,42 @@
+<script setup>
+import { reactiveOmit } from "@vueuse/core";
+import { Check } from "lucide-vue-next";
+import { CheckboxIndicator, CheckboxRoot, useForwardPropsEmits } from "reka-ui";
+import { cn } from "@/lib/utils";
+
+const props = defineProps({
+  defaultValue: { type: [Boolean, String], required: false },
+  modelValue: { type: [Boolean, String, null], required: false },
+  disabled: { type: Boolean, required: false },
+  value: { type: null, required: false },
+  id: { type: String, required: false },
+  asChild: { type: Boolean, required: false },
+  as: { type: null, required: false },
+  name: { type: String, required: false },
+  required: { type: Boolean, required: false },
+  class: { type: null, required: false },
+});
+const emits = defineEmits(["update:modelValue"]);
+
+const delegatedProps = reactiveOmit(props, "class");
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
+</script>
+
+<template>
+  <CheckboxRoot
+    v-bind="forwarded"
+    :class="
+      cn(
+        'grid place-content-center peer h-4 w-4 shrink-0 rounded-sm border border-primary shadow focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground',
+        props.class,
+      )
+    "
+  >
+    <CheckboxIndicator class="grid place-content-center text-current">
+      <slot>
+        <Check class="h-4 w-4" />
+      </slot>
+    </CheckboxIndicator>
+  </CheckboxRoot>
+</template>
@@ -0,0 +1 @@
+export { default as Checkbox } from "./Checkbox.vue";
@@ -0,0 +1,47 @@
+import { nextTick } from 'vue'
+import { createI18n } from 'vue-i18n'
+
+export const SUPPORT_LOCALES = ['en', 'es', 'fr', 'de', 'it', 'ru']
+
+export const LANGUAGES = {
+  en: { name: 'English', code: 'en', flag: 'gb' },
+  es: { name: 'Español', code: 'es', flag: 'es' },
+  fr: { name: 'Français', code: 'fr', flag: 'fr' },
+  de: { name: 'Deutsch', code: 'de', flag: 'de' },
+  it: { name: 'Italiano', code: 'it', flag: 'it' },
+  ru: { name: 'Русский', code: 'ru', flag: 'ru' },
+}
+
+export function setupI18n(options = { locale: 'en' }) {
+  const i18n = createI18n(options)
+  setI18nLanguage(i18n, options.locale)
+  return i18n
+}
+
+export function setI18nLanguage(i18n, locale) {
+  if (i18n.mode === 'legacy') {
+    i18n.global.locale = locale
+  } else {
+    i18n.global.locale.value = locale
+  }
+  /**
+   * NOTE:
+   * If you need to specify the language setting for headers, such as the `fetch` API, set it here.
+   * The following is an example for axios.
+   *
+   * axios.defaults.headers.common['Accept-Language'] = locale
+   */
+  document.querySelector('html').setAttribute('lang', locale)
+}
+
+export async function loadLocaleMessages(i18n, locale) {
+  // load locale messages with dynamic import
+  const messages = await import(
+    /* webpackChunkName: "locale-[request]" */ `./locales/${locale}.json`
+  )
+
+  // set locale and locale message
+  i18n.global.setLocaleMessage(locale, messages.default)
+
+  return nextTick()
+}
@@ -0,0 +1,277 @@
+{
+  "message": {
+    "theme": {
+      "light": "Heller Modus",
+      "dark": "Dunkler Modus",
+      "system": "System"
+    },
+    "nav": {
+      "home": "Startseite",
+      "forums": "Forum",
+      "docs": "Docs",
+      "communities": "Communities",
+      "partners": "Partners",
+      "servers": "Server",
+      "statistics": "Statistiken",
+      "github": "GitHub",
+      "patreon": "Patreon",
+      "language": "Sprache auswählen",
+      "theme": {
+        "light": "Helles Theme",
+        "dark": "Dunkles Theme",
+        "system": "System-Theme"
+      }
+    },
+    "footer": {
+      "support_on_patreon": "Unterstütze uns auf Patreon",
+      "about": "Über uns",
+      "privacy_policy": "Datenschutzerklärung",
+      "terms_conditions": "AGB"
+    },
+    "404": {
+      "title": "Seite nicht gefunden",
+      "description": "Die angeforderte Seite existiert nicht. Sie wurde möglicherweise verschoben oder gelöscht.",
+      "return_home": "Zur Startseite"
+    },
+    "home": {
+      "hero": {
+        "title": "Multiplayer für BeamNG.drive",
+        "subtitle": "Erlebe die beste Soft-Body-Physik mit Freunden. Rennen, Roleplay oder entspanntes Cruisen zusammen.",
+        "download_now": "Jetzt herunterladen",
+        "browse_servers": "Server durchsuchen"
+      },
+      "metrics": {
+        "active_players": "Aktive Spieler",
+        "players_online": "Spieler online",
+        "public_servers": "Öffentliche Server",
+        "all_servers": "Alle Server"
+      },
+      "why_beammp": "Warum BeamMP?",
+      "features": {
+        "stable_servers": {
+          "title": "Stabile Server",
+          "description": "BeamMP ermöglicht stabile Server mit einer Vielzahl von weltweit verteilten Instanzen."
+        },
+        "beamng": {
+          "title": "BeamNG.drive",
+          "description": "BeamMP nutzt dieselben Karten, Fahrzeuge und Mods – du musst nichts Neues lernen!"
+        },
+        "standalone": {
+          "title": "Eigenständig",
+          "description": "BeamMP verändert deine Originalinstallation nicht – spiele Singleplayer oder Multiplayer."
+        },
+        "sync": {
+          "title": "Synchronisationsqualität",
+          "description": "BeamMP aktualisiert die Position deines Fahrzeugs ~50 Mal pro Sekunde für ein flüssiges Erlebnis."
+        }
+      },
+      "communities": {
+        "join": "Werde Teil einer lebendigen Community",
+        "description": "Entdecke vielfältige Spielerlebnisse auf hunderten einzigartigen Servern",
+        "racing": {
+          "name": "Renn-Communities",
+          "description": "Wettbewerbsligen und Zeitrennen mit Spielern weltweit"
+        },
+        "roleplay": {
+          "name": "Roleplay-Server",
+          "description": "Immersive Erlebnisse von Polizeiverfolgungen bis zu Lieferdiensten"
+        },
+        "crash": {
+          "name": "Crash & Derby",
+          "description": "Demolition-Derbys und zerstörungsfokussierte Spielmodi"
+        },
+        "freeroam": {
+          "name": "Freies Fahren",
+          "description": "Entspannte Multiplayer-Sessions zum Erkunden der Karten mit Freunden"
+        }
+      },
+      "find": {
+        "title": "Finde deinen perfekten Server",
+        "description": "Durchsuche hunderte aktive Server mit unterschiedlichen Spielmodi, Mods und Communities. Von Wettbewerbsrennen bis zum freien Fahren – für jeden ist etwas dabei.",
+        "points": {
+          "custom": "Eigene Spielmodi",
+          "custom_desc": "Einzigartige Erfahrungen aus der Community",
+          "moderation": "Aktive Moderation",
+          "moderation_desc": "Sichere und freundliche Spielumgebung",
+          "global": "Globales Netzwerk",
+          "global_desc": "Weltweit verteilte Server für geringe Latenz"
+        },
+        "browse_all_servers": "Alle Server anzeigen"
+      },
+      "devFeatures": {
+        "title": "Für Entwickler gemacht",
+        "description": "Erstelle Spielmodi, hoste deinen eigenen Server und trage zum Projekt bei",
+        "lua": {
+          "title": "Lua-API",
+          "description": "Leistungsstarkes Server-Scripting mit Lua für individuelle Features"
+        },
+        "docs": {
+          "title": "Dokumentation",
+          "description": "Umfangreiche Anleitungen und API-Referenzen für die Serverentwicklung"
+        },
+        "openSource": {
+          "title": "Open Source",
+          "description": "Community-getriebene Entwicklung mit Code auf GitHub"
+        },
+        "learn_more": "Mehr erfahren",
+        "host": {
+          "title": "Bereit, deinen eigenen Server zu hosten?",
+          "description": "Lade die Serverdateien herunter und erschaffe deine eigene BeamMP-Erfahrung",
+          "windows": "Windows-Server",
+          "linux": "Linux Builds",
+          "partners": {
+            "description": "Starte schnell mit unseren vertrauenswürdigen Hosting-Partnern - problemlose Einrichtung, 24/7 Support und optimierte Leistung.",
+            "view_partners": "Hosting-Partner ansehen"
+          },
+          "self_host": {
+            "title": "Oder selbst hosten"
+          }
+        }
+      },
+      "faq": {
+        "title": "Häufige Fragen",
+        "0": {
+          "question": "Die Serverliste wird nicht angezeigt!",
+          "answer": "Starte BeamMP neu – das passiert manchmal. Falls das nicht hilft, erstelle ein Thema im Forum oder nutze den Support-Kanal auf Discord."
+        },
+        "1": {
+          "question": "Wie öffne ich ein Ticket, wenn etwas nicht funktioniert?",
+          "answer": "Sieh dir den Kanal #how-to-use auf Discord und im Forum an. Beschreibe genau, was du getan hast, damit der Support schnell und effektiv helfen kann."
+        },
+        "2": {
+          "question": "Hilfe! Ich erhalte Fehlercodes",
+          "answer": "Besuche unser Forum und prüfe, ob jemand das Problem bereits hatte. Oft gibt es dort Lösungen in den Antworten. Alternativ: unser Discord, wo der Großteil der Community ist."
+        },
+        "3": {
+          "question": "Funktioniert das mit piratischen Versionen von BeamNG.drive?",
+          "answer": "Wir wissen es nicht und bieten keinen Support für nicht legale Kopien."
+        },
+        "4": {
+          "question": "Wie hoste ich einen Server?",
+          "answer": "Die nötigen Serverdateien findest du oben auf dieser Seite unter dem Client-Download. Eine Authentifizierungsschlüssel (Keymaster) ist erforderlich. Mehr Infos in unserer Wiki."
+        },
+        "5": {
+          "question": "Kann ich Mods verwenden?",
+          "answer": "Mods werden unterstützt. Sie werden auf dem Server installiert. Siehe unsere Wiki für Details."
+        }
+      },
+      "stats": {
+        "active_players": "Aktive Spieler",
+        "global_servers": "Globale Server",
+        "total_downloads": "Gesamte Downloads"
+      }
+    },
+    "communities": {
+      "title": "Communities",
+      "description": "Entdecke florierende Communities rund um BeamMP. Von Wettbewerbsrennen bis zu entspannten Freifahrten – finde deine Gruppe.",
+      "starting": {
+        "title": "Eigene Community starten?",
+        "description": "Hoste deinen BeamMP-Server und baue eine Community um deine Lieblingsmodi auf",
+        "setup_guide": "Server-Einrichtungsleitfaden",
+        "join_discord": "Discord beitreten"
+      }
+    },
+    "partners": {
+      "title": "Hosting-Partner",
+      "description": "Wähle aus unseren vertrauenswürdigen Hosting-Partnern. Einfache Einrichtung, optimierte Leistung und Support, damit dein BeamMP-Server reibungslos läuft.",
+      "from_price": "Ab {price}",
+      "visit_website": "Website besuchen",
+      "error_loading": "Partner konnten nicht geladen werden"
+    },
+    "servers": {
+      "title": "Server",
+      "description": "Durchsuche und trete BeamMP-Servern weltweit bei. Finde deine Lieblingsspielmodi, Communities und Erlebnisse an einem Ort.",
+      "show_only": "Nur anzeigen:",
+      "loading_servers": "Lade Server…",
+      "server_count": "0 Server | 1 Server | {count} Server",
+      "players_found": "0 Spieler | 1 Spieler | {count} Spieler",
+      "filters": {
+        "hide_empty": "Leere verbergen",
+        "hide_full": "Volle verbergen",
+        "search": "Server suchen…",
+        "hide_password": "Passwortgeschützte verbergen",
+        "show_official": "Offiziell",
+        "show_partner": "Partner",
+        "show_featured": "Empfohlen"
+      },
+      "table_headers": {
+        "location": "Standort",
+        "name": "Servername",
+        "map": "Karte",
+        "players": "Spieler",
+        "mods": "Mods",
+        "status": "Status"
+      }
+    },
+    "statistics": {
+      "title": "Statistiken",
+      "description": "Live-Metriken aktiver Server und eine Zeitlinie des Spielervolumens. Releases können im Diagramm markiert werden.",
+      "loading": "Lade…",
+      "peak": "Peak: {count}",
+      "current_players": "Aktuelle Spieler",
+      "current_servers": "Aktuelle Server",
+      "avg_players_per_server": "Ø Spieler/Server",
+      "official_servers": "Offizielle Server",
+      "partner_servers": "Partner-Server",
+      "player_volume": "Spielervolumen über Zeit",
+      "hint": "Release-Markierungen sind orange vertikale Linien (z. B. v3.0.0, v4.0.0). Bewege die Maus für Details.",
+      "server_volume": "Servervolumen über Zeit",
+      "server_hint": "Die Serveranzahl folgt ähnlichen Trends. Markierungen zeigen große Versionen."
+    },
+    "about": {
+      "title": "Über BeamMP",
+      "description": "BeamMP bringt Multiplayer zu BeamNG.drive. Es ist von und für die Community gebaut und fokussiert Stabilität, Leistung und ein authentisches Fahrerlebnis mit Freunden.",
+      "note": {
+        "title": "Ein Wort vom Erfinder",
+        "content": "BeamMP begann mit einer einfachen Idee: Ich möchte BeamNG.drive mit meinen Brüdern spielen. Aus einem Experiment wurde schnell ein Community-Projekt mit Fokus auf Multiplayer und Spaß. Uns liegt die beste Erfahrung und einfacher Einstieg am Herzen. Das Projekt ist für Beiträge aller Levels offen. Ob Code, Moderation, Szenarien oder Hilfe bei der Einrichtung – alles trägt dazu bei, dass BeamMP gedeiht. Danke, dass du dabei bist und etwas Besonderes mit aufbaust."
+      },
+      "provides": {
+        "title": "Was BeamMP bietet",
+        "points": {
+          "0": "Multiplayer-Sessions für BeamNG.drive mit Server-Browser und Filtern",
+          "1": "Moderationswerkzeuge und Konfigurationsoptionen serverseitig",
+          "2": "Mod-Support mit Schutz für bezahlte Inhalte",
+          "3": "Aktive Community-Kanäle (Forum, Discord) für Hilfe und Zusammenarbeit"
+        }
+      },
+      "project": {
+        "title": "Projektwerte",
+        "points": {
+          "0": "Community zuerst: Entscheidungen basieren auf realen Bedürfnissen",
+          "1": "Zuverlässigkeit: Stabilität, Sync-Fidelity und Performance im Fokus",
+          "2": "Offenheit: Beiträge, Feedback und Transparenz willkommen",
+          "3": "Sicherheit: Fair Play und respektvolle Interaktionen"
+        }
+      },
+      "get_involved": {
+        "title": "Mitmachen",
+        "description": "Viele Wege zur Teilnahme – Diskussionen, Issues, Code oder finanzielle Unterstützung via",
+        "patreon": "Patreon",
+        "forum": "Forum",
+        "docs": "Docs",
+        "github": "GitHub",
+        "discord": "Discord"
+      },
+      "funding": {
+        "title": "Finanzierung & Nachhaltigkeit",
+        "description": "BeamMP lebt von Community-Support. Spenden decken Infrastruktur, Bandbreite, Tools und Entwicklungszeit. Wenn dir das Projekt gefällt, unterstütze uns gern.",
+        "patreon": "Unterstütze uns auf Patreon",
+        "learn": "Mehr auf GitHub erfahren"
+      },
+      "credits": {
+        "title": "Credits & Danksagungen",
+        "description": "BeamMP wird vom Mod-Team und großartigen Community-Beiträgen gepflegt. Danke an Serverbetreiber, Mod-Ersteller, Tester und alle, die Issues melden – eure Zeit und Leidenschaft treiben das Projekt voran.",
+        "desc_2": "Besonderer Dank an die BeamNG.drive-Entwickler für diese fantastische Plattform, die Multiplayer ermöglicht.",
+        "desc_3": "Ebenso herzlicher Dank an folgende aktuelle und ehemalige Community-Mitglieder für ihre bedeutenden Beiträge über die Jahre:",
+        "mentions": {
+          "0": "Jojos38 (Mitgründer) – frühe Arbeiten an der Gestaltung, um die Idee zu realisieren",
+          "1": "Jetta (jetta.cat) – Design und Erstellung des Logos",
+          "2": "Anonymous275 & Lionkor – Wiederaufbau des Projekts in C++",
+          "3": "Tixx – erhebliche Beiträge im gesamten Code",
+          "4": "Und viele mehr – danke an alle, die in irgendeiner Form beigetragen haben!"
+        },
+        "thank_you": "Gemeinsam bauen wir etwas Besonderes. Danke, dass du Teil der BeamMP-Community bist!"
+      }
+    }
+  }
+}
@@ -0,0 +1,284 @@
+{
+  "message": {
+    "theme": {
+      "light": "Light mode",
+      "dark": "Dark mode",
+      "system": "System"
+    },
+    "nav": {
+      "home": "Home",
+      "forums": "Forums",
+      "docs": "Docs",
+      "communities": "Communities",
+      "partners": "Hosting Partners",
+      "servers": "Servers",
+      "statistics": "Statistics",
+      "store": "Merch Store",
+      "github": "GitHub",
+      "patreon": "Patreon",
+      "language": "Select Language",
+      "theme": {
+        "light": "Light Theme",
+        "dark": "Dark Theme",
+        "system": "System Theme"
+      }
+    },
+    "footer": {
+      "support_on_patreon": "Support us on Patreon",
+      "about": "About",
+      "privacy_policy": "Privacy Policy",
+      "terms_conditions": "Terms & Conditions"
+    },
+    "404": {
+      "title": "Page Not Found",
+      "description": "The page you requested doesn’t exist. It may have been moved or removed.",
+      "return_home": "Return Home"
+    },
+    "home": {
+      "hero": {
+        "title": "Multiplayer for BeamNG.Drive",
+        "subtitle": "Experience the ultimate soft-body physics with friends. Race, roleplay, or just cruise together.",
+        "download_now": "Download Now",
+        "browse_servers": "Browse Servers"
+      },
+      "metrics": {
+        "active_players": "Active Players",
+        "players_online": "Players Online",
+        "public_servers": "Public Servers",
+        "all_servers": "All Servers"
+      },
+      "why_beammp": "Why BeamMP?",
+      "features": {
+        "stable_servers": {
+          "title": "Stable Servers",
+          "description": "BeamMP allows for a stable environment, with a variety of servers located across the globe."
+        },
+        "beamng": {
+          "title": "BeamNG.drive",
+          "description": "BeamMP uses the same maps, vehicles & mods so you don't need to learn anything new!"
+        },
+        "standalone": {
+          "title": "Standalone",
+          "description": "BeamMP doesn't modify your original installation, so you can play either singleplayer or multiplayer."
+        },
+        "sync": {
+          "title": "Sync Quality",
+          "description": "BeamMP updates your vehicle position ~50 times per second, allowing for a smooth overall experience."
+        }
+      },
+      "communities": {
+        "join": "Join a Thriving Community",
+        "description": "Discover diverse gameplay experiences across thousands of unique servers",
+        "racing": {
+          "name": "Racing Communities",
+          "description": "Competitive racing leagues and time trials with players worldwide"
+        },
+        "roleplay": {
+          "name": "Roleplay Servers",
+          "description": "Immersive roleplay experiences from police chases to delivery services"
+        },
+        "crash": {
+          "name": "Crash & Derby",
+          "description": "Demolition derbies and destruction-focused gameplay modes"
+        },
+        "freeroam": {
+          "name": "Freeroam & Custom Servers",
+          "description": "Explore open-world servers or build your own with custom scripts, maps, and mods."
+        }
+      },
+      "find": {
+        "title": "Find Your Perfect Server",
+        "description": "Browse hundreds of active servers with different game modes, mods, and communities. From competitive racing to casual free roam, there's something for everyone.",
+        "points": {
+          "custom": "Custom Game Modes",
+          "custom_desc": "Unique experiences created by the community",
+          "moderation": "Active Moderation",
+          "moderation_desc": "Safe and friendly gaming environment",
+          "global": "Global Network",
+          "global_desc": "Servers located worldwide for low latency"
+        },
+        "browse_all_servers": "Browse All Servers"
+      },
+      "devFeatures": {
+        "title": "Built for Developers",
+        "description": "Create custom game modes, host your own server, and contribute to the project",
+        "lua": {
+          "title": "Lua API",
+          "description": "Powerful server-side Lua scripting for custom game modes and features"
+        },
+        "docs": {
+          "title": "Documentation",
+          "description": "Comprehensive guides and API references for server development"
+        },
+        "openSource": {
+          "title": "Open Source",
+          "description": "Community-driven development with source available on GitHub"
+        },
+        "learn_more": "Learn More",
+        "host": {
+          "title": "Ready to Host Your Own Server?",
+          "description": "Download the server files and create your own unique BeamMP experience",
+          "windows": "Windows Server",
+          "linux": "Linux Builds",
+          "partners": {
+            "description": "Get started quickly with our trusted hosting partners - hassle-free setup, 24/7 support, and optimized performance.",
+            "view_partners": "View Hosting Partners"
+          },
+          "self_host": {
+            "title": "Or Host It Yourself"
+          }
+        }
+      },
+      "faq": {
+        "title": "Frequently Asked Questions",
+        "0": {
+          "question": "The server list is not showing up!",
+          "answer":
+            "Try restarting BeamMP as this can sometimes happen. If this fails to fix your issue please create a topic on our forum or visit the support channel on our discord."
+        },
+        "1": {
+          "question": "How do I open a ticket in case something doesn't work or I have questions?",
+          "answer":
+            "Please check the #how-to-use channel in Discord and on our forum. Please give an accurate description of what you have done so the support team will help you in a fast and effective way."
+        },
+        "2": {
+          "question": "Help! I'm getting error codes",
+          "answer":
+            "Please head over to our forum and see if anyone has had the issue before. It is likely that someone else has at some point and therefore there will also probably be a solution posted with it too in the replies. Alternatively visit our discord where the larger portion of community is currently based."
+        },
+        "3": {
+          "question": "Does this work with pirated versions of BeamNG.drive?",
+          "answer":
+            "We don't know if it works with pirated versions of BeamNG.drive, but we will not provide any support to non legit copies of the game. Nor will we change to support it."
+        },
+        "4": {
+          "question": "How do I host a server?",
+          "answer":
+            "The server files required for hosting your own server can be found at the top of this page below the client download. You will also require an authentication key which can be found from keymaster. Further information around the setup can be found on our docs."
+        },
+        "5": {
+          "question": "Can I use mods?",
+          "answer":
+            "Mods are supported. These are installed on the server. See our docs for more information."
+        }
+      },
+      "stats": {
+        "active_players": "Active Players",
+        "global_servers": "Global Servers",
+        "total_downloads": "Total Downloads"
+      }
+    },
+    "communities": {
+      "title": "Communities",
+      "description": "Discover thriving communities built around BeamMP. From competitive racing leagues to casual free roam sessions, find your perfect group to play with.",
+      "starting": {
+        "title": "Want to Start Your Own Community?",
+        "description": "Host your own BeamMP server and build a community around your favorite game modes",
+        "setup_guide": "Server Setup Guide",
+        "join_discord": "Join Our Discord"
+      }
+    },
+    "partners": {
+      "title": "Hosting Partners",
+      "description": "Choose from our trusted hosting partners. Simple setup, optimized performance, and support to keep your BeamMP server running smoothly.",
+      "from_price": "From {price}",
+      "visit_website": "Visit Website",
+      "error_loading": "Unable to fetch partners"
+    },
+    "servers": {
+      "title": "Servers",
+      "description": "Browse and join BeamMP servers from around the world. Find your favorite game modes, communities, and experiences all in one place.",
+      "show_only": "Show Only:",
+      "loading_servers": "Loading servers...",
+      "server_count": "0 servers found | 1 server found | {count} servers found",
+      "players_found": "0 players | 1 player | {count} players",
+      "filters": {
+        "hide_empty": "Hide Empty",
+        "hide_full": "Hide Full",
+        "search": "Search Servers...",
+        "hide_password": "Hide Password Protected",
+        "show_official": "Official",
+        "show_partner": "Partner",
+        "show_featured": "Featured"
+      },
+      "table_headers": {
+        "location": "Location",
+        "name": "Server Name",
+        "map": "Map",
+        "players": "Players",
+        "mods": "Mods",
+        "status": "Status"
+      }
+    },
+    "statistics": {
+      "title": "Statistics",
+      "description": "Live snapshot metrics from active servers and a player volume timeline. Releases can be annotated on the chart.",
+      "loading": "Loading…",
+      "peak": "Peak: {count}",
+      "current_players": "Current Players",
+      "current_servers": "Current Servers",
+      "avg_players_per_server": "AVG Players / Server",
+      "official_servers": "Official Servers",
+      "partner_servers": "Partner Servers",
+      "player_volume": "Player Volume Over Time",
+      "hint": "Release markers are shown as orange vertical lines (e.g., v3.0.0, v4.0.0). Hover over data points for details.",
+      "server_volume": "Server Volume Over Time",
+      "server_hint": "Server count follows similar trends. Release markers indicate major version launches."
+    },
+    "about":{
+      "title": "About BeamMP",
+      "description": "BeamMP brings multiplayer to BeamNG.drive. It’s built by and for the community, focusing on stability, performance, and an authentic driving experience shared with friends.",
+      "note": {
+        "title": "A Note from the Creator",
+        "content": "BeamMP started with a simple idea: I want to play BeamNG.drive with my brothers. What began as an experiment quickly grew into a community-driven project focused on implementing multiplayer, and fun. We care deeply about trying to provide the best experience possible, and making it easy for players to hop in and enjoy driving together. The project is open to contributors of all skill levels. Whether you write code, moderate a server, design scenarios, or help others get set up—your efforts are part of what makes BeamMP thrive. Thank you for being here and helping us build something special."
+      },
+      "provides": {
+        "title": "What BeamMP Provides",
+        "points": {
+          "0": "Multiplayer sessions for BeamNG.drive with server browser and filters",
+          "1": "Server-side moderation tools and configuration options",
+          "2": "Mod support with protection for paid content",
+          "3": "Active community channels (Forum, Discord) for help and collaboration"
+        }
+      },
+      "project": {
+        "title": "Project Values",
+        "points": {
+          "0": "Community-first: decisions guided by real player/server needs",
+          "1": "Reliability: prioritizing stability, sync fidelity, and performance where possible",
+          "2": "Openness: welcoming contributions, feedback, and transparency",
+          "3": "Safety: promoting fair play and respectful interactions"
+        }
+      },
+      "get_involved": {
+        "title": "Get Involved",
+        "description": "There are many ways to participate—join discussions, report issues, contribute code, or help to support the project financially via",
+        "patreon": "Patreon",
+        "forum": "Forums",
+        "docs": "Docs",
+        "github": "GitHub",
+        "discord": "Discord"
+      },
+      "funding": {
+        "title": "Funding & Sustainability",
+        "description": "BeamMP relies on community support. Donations help cover infrastructure, bandwidth, tooling, and development time. If you value the project and want to help it grow, please consider supporting us.",
+        "patreon": "Support us on Patreon",
+        "learn": "Learn more on GitHub"
+      },
+      "credits": {
+        "title": "Credits & Acknowledgements",
+        "description": "BeamMP is maintained by the Mod Team and an incredible group of community contributors. We’d also like to thank server owners, mod creators, testers, and everyone reporting issues—your time and passion keep the project moving forward.",
+        "desc_2": "Special thanks to the BeamNG.drive developers for creating such an amazing platform that makes multiplayer possible.",
+        "desc_3": "Also a heartfelt thank you to the following current and former community members for their significant contributions to BeamMP over the years:",
+        "mentions": {
+          "0": "Jojos38 (Co-Founder) - for their work early on with designing everything to help make the idea become a reality",
+          "1": "Jetta (jetta.cat) - for the logo design and creation.",
+          "2": "Anonymous275 & Lionkor - for their work in rebuilding the project in C++.",
+          "3": "Tixx - for their considerable contributions across the project codebase.",
+          "4": "And many more—thank you to everyone who has contributed in any way!"
+        },
+        "thank_you": "Together, we’re building something special. Thank you for being part of the BeamMP community!"
+      }
+    }
+  }
+}
@@ -0,0 +1,277 @@
+{
+  "message": {
+    "theme": {
+      "light": "Modo claro",
+      "dark": "Modo oscuro",
+      "system": "Sistema"
+    },
+    "nav": {
+      "home": "Inicio",
+      "forums": "Foros",
+      "docs": "Docs",
+      "communities": "Comunidades",
+      "partners": "Socios",
+      "servers": "Servidores",
+      "statistics": "Estadísticas",
+      "github": "GitHub",
+      "patreon": "Patreon",
+      "language": "Seleccionar idioma",
+      "theme": {
+        "light": "Tema claro",
+        "dark": "Tema oscuro",
+        "system": "Tema del sistema"
+      }
+    },
+    "footer": {
+      "support_on_patreon": "Apóyanos en Patreon",
+      "about": "Acerca de",
+      "privacy_policy": "Política de privacidad",
+      "terms_conditions": "Términos y condiciones"
+    },
+    "404": {
+      "title": "Página no encontrada",
+      "description": "La página solicitada no existe. Puede que se haya movido o eliminado.",
+      "return_home": "Volver al inicio"
+    },
+    "home": {
+      "hero": {
+        "title": "Multijugador para BeamNG.drive",
+        "subtitle": "Vive la mejor física de cuerpos blandos con amigos. Compite, haz roleplay o simplemente pasea juntos.",
+        "download_now": "Descargar ahora",
+        "browse_servers": "Explorar servidores"
+      },
+      "metrics": {
+        "active_players": "Jugadores activos",
+        "players_online": "Jugadores en línea",
+        "public_servers": "Servidores públicos",
+        "all_servers": "Todos los servidores"
+      },
+      "why_beammp": "¿Por qué BeamMP?",
+      "features": {
+        "stable_servers": {
+          "title": "Servidores estables",
+          "description": "BeamMP permite servidores estables, con una variedad de servidores ubicados en todo el mundo."
+        },
+        "beamng": {
+          "title": "BeamNG.drive",
+          "description": "BeamMP utiliza los mismos mapas, vehículos y mods, ¡así que no necesitas aprender nada nuevo!"
+        },
+        "standalone": {
+          "title": "Independiente",
+          "description": "BeamMP no modifica tu instalación original, por lo que puedes jugar en un jugador o multijugador."
+        },
+        "sync": {
+          "title": "Calidad de sincronización",
+          "description": "BeamMP actualiza la posición de tu vehículo ~50 veces por segundo, permitiendo una experiencia fluida."
+        }
+      },
+      "communities": {
+        "join": "Únete a una comunidad próspera",
+        "description": "Descubre experiencias de juego diversas en cientos de servidores únicos",
+        "racing": {
+          "name": "Comunidades de carreras",
+          "description": "Ligas competitivas y contrarreloj con jugadores de todo el mundo"
+        },
+        "roleplay": {
+          "name": "Servidores de roleplay",
+          "description": "Experiencias inmersivas desde persecuciones policiales hasta servicios de reparto"
+        },
+        "crash": {
+          "name": "Choque y derby",
+          "description": "Derbis de demolición y modos centrados en la destrucción"
+        },
+        "freeroam": {
+          "name": "Libre",
+          "description": "Sesiones multijugador informales explorando mapas con amigos"
+        }
+      },
+      "find": {
+        "title": "Encuentra tu servidor perfecto",
+        "description": "Explora cientos de servidores activos con distintos modos de juego, mods y comunidades. Desde carreras competitivas hasta paseos casuales: hay algo para todos.",
+        "points": {
+          "custom": "Modos de juego personalizados",
+          "custom_desc": "Experiencias únicas creadas por la comunidad",
+          "moderation": "Moderación activa",
+          "moderation_desc": "Entorno de juego seguro y amistoso",
+          "global": "Red global",
+          "global_desc": "Servidores repartidos por el mundo para baja latencia"
+        },
+        "browse_all_servers": "Explorar todos los servidores"
+      },
+      "devFeatures": {
+        "title": "Pensado para desarrolladores",
+        "description": "Crea modos de juego, aloja tu propio servidor y contribuye al proyecto",
+        "lua": {
+          "title": "API Lua",
+          "description": "Potente scripting con Lua en servidor para modos y funciones personalizadas"
+        },
+        "docs": {
+          "title": "Documentación",
+          "description": "Guías completas y referencias de API para desarrollo de servidores"
+        },
+        "openSource": {
+          "title": "Código abierto",
+          "description": "Desarrollo impulsado por la comunidad con código disponible en GitHub"
+        },
+        "learn_more": "Más información",
+        "host": {
+          "title": "¿Listo para alojar tu propio servidor?",
+          "description": "Descarga los archivos del servidor y crea tu experiencia única en BeamMP",
+          "windows": "Servidor Windows",
+          "linux": "Compilaciones Linux",
+          "partners": {
+            "description": "Comienza rápidamente con nuestros socios de hosting de confianza - configuración sin complicaciones, soporte 24/7 y rendimiento optimizado.",
+            "view_partners": "Ver socios de hosting"
+          },
+          "self_host": {
+            "title": "O alójalo tú mismo"
+          }
+        }
+      },
+      "faq": {
+        "title": "Preguntas frecuentes",
+        "0": {
+          "question": "¡La lista de servidores no aparece!",
+          "answer": "Intenta reiniciar BeamMP; a veces sucede. Si no se soluciona, crea un tema en el foro o visita el canal de soporte en Discord."
+        },
+        "1": {
+          "question": "¿Cómo abro un ticket si algo no funciona o tengo dudas?",
+          "answer": "Consulta el canal #how-to-use en Discord y en el foro. Describe con precisión lo que has hecho para que el equipo de soporte pueda ayudarte de forma rápida y efectiva."
+        },
+        "2": {
+          "question": "¡Ayuda! Estoy recibiendo códigos de error",
+          "answer": "Visita nuestro foro y comprueba si alguien ha tenido el mismo problema. Probablemente haya una solución publicada en las respuestas. También puedes visitar nuestro Discord, donde se encuentra gran parte de la comunidad."
+        },
+        "3": {
+          "question": "¿Funciona con versiones pirateadas de BeamNG.drive?",
+          "answer": "No sabemos si funciona con versiones pirateadas de BeamNG.drive, y no proporcionaremos soporte para copias no legítimas. Tampoco cambiaremos para soportarlas."
+        },
+        "4": {
+          "question": "¿Cómo alojo un servidor?",
+          "answer": "Los archivos necesarios para alojar tu servidor se encuentran al inicio de esta página, debajo de la descarga del cliente. También necesitarás una clave de autenticación de Keymaster. Más información en nuestra wiki."
+        },
+        "5": {
+          "question": "¿Puedo usar mods?",
+          "answer": "Los mods están soportados. Se instalan en el servidor. Consulta la wiki para más información."
+        }
+      },
+      "stats": {
+        "active_players": "Jugadores activos",
+        "global_servers": "Servidores globales",
+        "total_downloads": "Descargas totales"
+      }
+    },
+    "communities": {
+      "title": "Comunidades",
+      "description": "Descubre comunidades prósperas construidas alrededor de BeamMP. Desde ligas competitivas hasta sesiones casuales, encuentra tu grupo ideal.",
+      "starting": {
+        "title": "¿Quieres iniciar tu propia comunidad?",
+        "description": "Aloja tu servidor de BeamMP y crea una comunidad alrededor de tus modos favoritos",
+        "setup_guide": "Guía de configuración del servidor",
+        "join_discord": "Unirte a Discord"
+      }
+    },
+    "partners": {
+      "title": "Socios de alojamiento",
+      "description": "Elige entre nuestros socios de alojamiento de confianza. Configuración sencilla, rendimiento optimizado y soporte para mantener tu servidor BeamMP funcionando sin problemas.",
+      "from_price": "Desde {price}",
+      "visit_website": "Visitar sitio web",
+      "error_loading": "No se pudieron cargar los socios"
+    },
+    "servers": {
+      "title": "Servidores",
+      "description": "Explora y únete a servidores de BeamMP en todo el mundo. Encuentra tus modos de juego, comunidades y experiencias favoritas en un solo lugar.",
+      "show_only": "Mostrar solo:",
+      "loading_servers": "Cargando servidores…",
+      "server_count": "0 servidores | 1 servidor | {count} servidores",
+      "players_found": "0 jugadores | 1 jugador | {count} jugadores",
+      "filters": {
+        "hide_empty": "Ocultar vacíos",
+        "hide_full": "Ocultar llenos",
+        "search": "Buscar servidores…",
+        "hide_password": "Ocultar protegidos por contraseña",
+        "show_official": "Oficial",
+        "show_partner": "Socio",
+        "show_featured": "Destacado"
+      },
+      "table_headers": {
+        "location": "Ubicación",
+        "name": "Nombre del servidor",
+        "map": "Mapa",
+        "players": "Jugadores",
+        "mods": "Mods",
+        "status": "Estado"
+      }
+    },
+    "statistics": {
+      "title": "Estadísticas",
+      "description": "Métricas en tiempo real de servidores activos y una cronología de volumen de jugadores. Las versiones se pueden anotar en el gráfico.",
+      "loading": "Cargando…",
+      "peak": "Pico: {count}",
+      "current_players": "Jugadores actuales",
+      "current_servers": "Servidores actuales",
+      "avg_players_per_server": "Promedio jugadores/servidor",
+      "official_servers": "Servidores oficiales",
+      "partner_servers": "Servidores socios",
+      "player_volume": "Volumen de jugadores a lo largo del tiempo",
+      "hint": "Los marcadores de lanzamiento se muestran como líneas verticales naranjas (p. ej., v3.0.0, v4.0.0). Pasa el cursor para detalles.",
+      "server_volume": "Volumen de servidores a lo largo del tiempo",
+      "server_hint": "El conteo de servidores sigue tendencias similares. Los marcadores indican lanzamientos de versiones mayores."
+    },
+    "about": {
+      "title": "Acerca de BeamMP",
+      "description": "BeamMP lleva el multijugador a BeamNG.drive. Está construido por y para la comunidad, centrado en estabilidad, rendimiento y una experiencia de conducción auténtica compartida con amigos.",
+      "note": {
+        "title": "Una nota del creador",
+        "content": "BeamMP comenzó con una idea simple: quiero jugar BeamNG.drive con mis hermanos. Lo que empezó como un experimento creció rápidamente en un proyecto impulsado por la comunidad enfocado en implementar multijugador y diversión. Nos importa ofrecer la mejor experiencia posible y facilitar que los jugadores se unan y disfruten juntos. El proyecto está abierto a contribuciones de todos los niveles. Ya sea que escribas código, moderes un servidor, diseñes escenarios o ayudes a otros a configurarse, tus esfuerzos hacen que BeamMP prospere. Gracias por estar aquí y ayudarnos a construir algo especial."
+      },
+      "provides": {
+        "title": "Qué ofrece BeamMP",
+        "points": {
+          "0": "Sesiones multijugador para BeamNG.drive con navegador de servidores y filtros",
+          "1": "Herramientas de moderación del lado del servidor y opciones de configuración",
+          "2": "Soporte de mods con protección para contenido de pago",
+          "3": "Canales comunitarios activos (Foro, Discord) para ayuda y colaboración"
+        }
+      },
+      "project": {
+        "title": "Valores del proyecto",
+        "points": {
+          "0": "Comunidad primero: decisiones guiadas por necesidades reales de jugadores/servidores",
+          "1": "Fiabilidad: priorizar estabilidad, fidelidad de sincronización y rendimiento cuando sea posible",
+          "2": "Apertura: dar la bienvenida a contribuciones, feedback y transparencia",
+          "3": "Seguridad: promover juego justo y relaciones respetuosas"
+        }
+      },
+      "get_involved": {
+        "title": "Participa",
+        "description": "Hay muchas formas de contribuir: únete a discusiones, reporta problemas, contribuye código o ayuda a apoyar el proyecto económicamente vía",
+        "patreon": "Patreon",
+        "forum": "Foros",
+        "docs": "Docs",
+        "github": "GitHub",
+        "discord": "Discord"
+      },
+      "funding": {
+        "title": "Financiación y sostenibilidad",
+        "description": "BeamMP depende del apoyo de la comunidad. Las donaciones ayudan a cubrir infraestructura, ancho de banda, herramientas y tiempo de desarrollo. Si valoras el proyecto y quieres ayudar a que crezca, por favor considera apoyarnos.",
+        "patreon": "Apóyanos en Patreon",
+        "learn": "Más información en GitHub"
+      },
+      "credits": {
+        "title": "Créditos y agradecimientos",
+        "description": "BeamMP es mantenido por el equipo de moderación y un grupo increíble de colaboradores de la comunidad. También queremos agradecer a propietarios de servidores, creadores de mods, testers y a todos los que reportan problemas: su tiempo y pasión mantienen el proyecto avanzando.",
+        "desc_2": "Agradecimientos especiales a los desarrolladores de BeamNG.drive por crear una plataforma increíble que hace posible el multijugador.",
+        "desc_3": "También un sincero agradecimiento a los siguientes miembros actuales y anteriores de la comunidad por sus contribuciones significativas a BeamMP a lo largo de los años:",
+        "mentions": {
+          "0": "Jojos38 (Co-Fundador) - por su trabajo temprano diseñando todo para ayudar a hacer realidad la idea",
+          "1": "Jetta (jetta.cat) - por el diseño y creación del logo.",
+          "2": "Anonymous275 y Lionkor - por su trabajo reconstruyendo el proyecto en C++.",
+          "3": "Tixx - por sus considerables contribuciones en todo el código del proyecto.",
+          "4": "Y muchos más — ¡gracias a todos los que han contribuido de cualquier manera!"
+        },
+        "thank_you": "Juntos estamos construyendo algo especial. ¡Gracias por ser parte de la comunidad BeamMP!"
+      }
+    }
+  }
+}
@@ -0,0 +1,277 @@
+{
+  "message": {
+    "theme": {
+      "light": "Mode clair",
+      "dark": "Mode sombre",
+      "system": "Système"
+    },
+    "nav": {
+      "home": "Accueil",
+      "forums": "Forums",
+      "docs": "Docs",
+      "communities": "Communautés",
+      "partners": "Partenaires",
+      "servers": "Serveurs",
+      "statistics": "Statistiques",
+      "github": "GitHub",
+      "patreon": "Patreon",
+      "language": "Choisir la langue",
+      "theme": {
+        "light": "Thème clair",
+        "dark": "Thème sombre",
+        "system": "Thème système"
+      }
+    },
+    "footer": {
+      "support_on_patreon": "Soutenez-nous sur notre Patreon",
+      "about": "À propos",
+      "privacy_policy": "Politique de confidentialité",
+      "terms_conditions": "Conditions générales"
+    },
+    "404": {
+      "title": "Page introuvable",
+      "description": "La page demandée n'existe pas. Elle a peut-être été déplacée ou supprimée.",
+      "return_home": "Retour à l'accueil"
+    },
+    "home": {
+      "hero": {
+        "title": "Multijoueur pour BeamNG.drive",
+        "subtitle": "Amusez-vous avec vos amis comme jamais. Courses, roleplay ou simples balades : tout est possible avec BeamMP !",
+        "download_now": "Télécharger",
+        "browse_servers": "Parcourir les serveurs"
+      },
+      "metrics": {
+        "active_players": "Joueurs actifs",
+        "players_online": "Joueurs en ligne",
+        "public_servers": "Serveurs publics",
+        "all_servers": "Tous les serveurs"
+      },
+      "why_beammp": "Pourquoi BeamMP ?",
+      "features": {
+        "stable_servers": {
+          "title": "Serveurs stables",
+          "description": "BeamMP offre des serveurs stables et une grande variété de mondes à explorer partout dans le monde."
+        },
+        "beamng": {
+          "title": "BeamNG.drive",
+          "description": "Les mêmes cartes, véhicules et mods que vous connaissez — BeamMP rend la transition simple et rapide !"
+        },
+        "standalone": {
+          "title": "Indépendant",
+          "description": "BeamMP préserve votre jeu original et vous permet de jouer en solo ou avec des amis."
+        },
+        "sync": {
+          "title": "Qualité de synchronisation",
+          "description": "BeamMP met à jour la position de votre véhicule ~50 fois par seconde pour une expérience fluide."
+        }
+      },
+      "communities": {
+        "join": "Rejoignez une communauté dynamique",
+        "description": "Découvrez des expériences variées sur des centaines de serveurs uniques",
+        "racing": {
+          "name": "Communautés de course",
+          "description": "Ligues compétitives et contre-la-montre avec des joueurs du monde entier"
+        },
+        "roleplay": {
+          "name": "Serveurs roleplay",
+          "description": "Des expériences immersives variées, des interventions de police aux services de livraison."
+        },
+        "crash": {
+          "name": "Crash & derby",
+          "description": "Destruction et démolition comme modes de jeu"
+        },
+        "freeroam": {
+          "name": "Libre",
+          "description": "Sessions multijoueurs décontractées pour explorer les cartes avec des amis"
+        }
+      },
+      "find": {
+        "title": "Trouvez votre serveur idéal",
+        "description": "Parcourez des centaines de serveurs actifs avec différents modes, mods et communautés. De la course compétitive à la balade, il y en a pour tous.",
+        "points": {
+          "custom": "Modes de jeu personnalisés",
+          "custom_desc": "Expériences uniques créées par la communauté",
+          "moderation": "Modération active",
+          "moderation_desc": "Un environnement de jeu sûr et convivial",
+          "global": "Réseau mondial",
+          "global_desc": "Serveurs mondiaux, latence minimale"
+        },
+        "browse_all_servers": "Parcourir tous les serveurs"
+      },
+      "devFeatures": {
+        "title": "Conçu pour les développeurs",
+        "description": "Créez des modes de jeu, hébergez votre serveur et contribuez au projet",
+        "lua": {
+          "title": "API Lua",
+          "description": "Puissant scrip côté serveur en Lua pour des fonctionnalités personnalisées"
+        },
+        "docs": {
+          "title": "Documentation",
+          "description": "Guides complets et références API pour le développement de serveurs"
+        },
+        "openSource": {
+          "title": "Open source",
+          "description": "Développement communautaire avec le code open source sur GitHub"
+        },
+        "learn_more": "En savoir plus",
+        "host": {
+          "title": "Prêt à héberger votre propre serveur ?",
+          "description": "Téléchargez les fichiers serveur et créez votre expérience BeamMP unique",
+          "windows": "Serveur Windows",
+          "linux": "Versions Linux",
+          "partners": {
+            "description": "Démarrez rapidement avec nos partenaires d'hébergement de confiance - configuration sans tracas, support 24/7 et performances optimisées.",
+            "view_partners": "Voir les partenaires d'hébergement"
+          },
+          "self_host": {
+            "title": "Ou hébergez-le vous-même"
+          }
+        }
+      },
+      "faq": {
+        "title": "Foire aux questions",
+        "0": {
+          "question": "La liste des serveurs n'apparaît pas !",
+          "answer": "Essayez de redémarrer BeamMP. Si le problème persiste, créez un post sur notre forum ou ouvrez un ticket d’assistance sur notre serveur Discord."
+        },
+        "1": {
+          "question": "Comment ouvrir un ticket si quelque chose ne fonctionne pas ?",
+          "answer": "Consultez le canal #how-to-use sur Discord ainsi que le forum. Décrivez précisément les actions effectuées afin que l’équipe support puisse vous aider rapidement et efficacement."
+        },
+        "2": {
+          "question": "À l'aide ! Je reçois des codes d'erreur",
+          "answer": "Rendez-vous sur le forum pour voir si quelqu'un a déjà eu le problème et sa solution. Vous pouvez aussi rejoindre notre Discord, où se trouve la majorité de la communauté."
+        },
+        "3": {
+          "question": "Est-ce compatible avec des versions piratées de BeamNG.drive ?",
+          "answer": "Les versions piratées de BeamNG.drive ne sont pas prises en charge et ne bénéficieront d’aucun support."
+        },
+        "4": {
+          "question": "Comment héberger un serveur ?",
+          "answer": "Les fichiers nécessaires pour héberger un serveur se trouvent en haut de cette page, sous le téléchargement du client. Une clé d'authentification de Keymaster est requise. Plus d'informations sur notre wiki."
+        },
+        "5": {
+          "question": "Puis-je utiliser des mods ?",
+          "answer": "Les mods sont pris en charge. Ils sont installés côté serveur. Consultez le wiki pour plus d'informations."
+        }
+      },
+      "stats": {
+        "active_players": "Joueurs actifs",
+        "global_servers": "Serveurs mondiaux",
+        "total_downloads": "Téléchargements totaux"
+      }
+    },
+    "communities": {
+      "title": "Communautés",
+      "description": "Découvrez des communautés florissantes autour de BeamMP. Des ligues de course compétitives aux sessions libres, trouvez votre groupe idéal.",
+      "starting": {
+        "title": "Envie de créer votre communauté ?",
+        "description": "Hébergez votre serveur BeamMP et bâtissez une communauté autour de vos modes favoris",
+        "setup_guide": "Guide de configuration du serveur",
+        "join_discord": "Rejoindre notre Discord"
+      }
+    },
+    "partners": {
+      "title": "Partenaires d’hébergement",
+      "description": "Choisissez parmi nos partenaires d’hébergement de confiance. Configuration simple, performances optimisées et support pour que votre serveur BeamMP fonctionne sans interruption.",
+      "from_price": "À partir de {price}",
+      "visit_website": "Visiter le site",
+      "error_loading": "Impossible de charger les partenaires"
+    },
+    "servers": {
+      "title": "Serveurs",
+      "description": "Parcourez et rejoignez des serveurs BeamMP dans le monde entier. Retrouvez vos modes de jeu, communautés et expériences préférés au même endroit.",
+      "show_only": "Afficher seulement :",
+      "loading_servers": "Chargement des serveurs…",
+      "server_count": "0 serveur | 1 serveur | {count} serveurs",
+      "players_found": "0 joueur | 1 joueur | {count} joueurs",
+      "filters": {
+        "hide_empty": "Masquer vides",
+        "hide_full": "Masquer pleins",
+        "search": "Rechercher des serveurs…",
+        "hide_password": "Masquer protégés par mot de passe",
+        "show_official": "Officiel",
+        "show_partner": "Partenaire",
+        "show_featured": "À la une"
+      },
+      "table_headers": {
+        "location": "Localisation",
+        "name": "Nom du serveur",
+        "map": "Carte",
+        "players": "Joueurs",
+        "mods": "Mods",
+        "status": "Statut"
+      }
+    },
+    "statistics": {
+      "title": "Statistiques",
+      "description": "Instantané en direct des métriques des serveurs et chronologie du volume de joueurs. Les versions peuvent être annotées sur le graphique.",
+      "loading": "Chargement…",
+      "peak": "Pic : {count}",
+      "current_players": "Joueurs actuels",
+      "current_servers": "Serveurs actuels",
+      "avg_players_per_server": "Moy. joueurs/serveur",
+      "official_servers": "Serveurs officiels",
+      "partner_servers": "Serveurs partenaires",
+      "player_volume": "Volume de joueurs dans le temps",
+      "hint": "Les marqueurs de version sont des lignes verticales orange (ex. v3.0.0, v4.0.0). Survolez les points pour les détails.",
+      "server_volume": "Volume de serveurs dans le temps",
+      "server_hint": "Le nombre de serveurs suit des tendances similaires. Les marqueurs indiquent les sorties majeures."
+    },
+    "about": {
+      "title": "À propos de BeamMP",
+      "description": "BeamMP apporte le multijoueur à BeamNG.drive. Construit par et pour la communauté, il met l'accent sur la stabilité, la performance et une expérience authentique partagée avec des amis.",
+      "note": {
+        "title": "Un mot du créateur",
+        "content": "BeamMP a commencé avec une idée simple : jouer à BeamNG.drive avec mes frères. Ce qui a commencé comme une expérience est vite devenu un projet communautaire axé sur le multijoueur et le plaisir. Nous voulons offrir la meilleure expérience possible et faciliter l'accès pour jouer ensemble. Le projet est ouvert à tous les niveaux de contribution. Code, modération, scénarios ou aide à la configuration — tout compte pour faire vivre BeamMP. Merci d'être là et d'aider à construire quelque chose de spécial."
+      },
+      "provides": {
+        "title": "Ce que propose BeamMP",
+        "points": {
+          "0": "Sessions multijoueurs pour BeamNG.drive avec navigateur de serveurs et filtres",
+          "1": "Outils de modération côté serveur et options de configuration",
+          "2": "Support des mods avec protection du contenu payant",
+          "3": "Canaux communautaires actifs (Forum, Discord) pour l'aide et la collaboration"
+        }
+      },
+      "project": {
+        "title": "Valeurs du projet",
+        "points": {
+          "0": "Communauté d'abord : décisions guidées par les besoins réels",
+          "1": "Fiabilité : priorité à la stabilité, la synchronisation et la performance",
+          "2": "Ouverture : contributions, retours et transparence bienvenus",
+          "3": "Sécurité : jeu équitable et interactions respectueuses"
+        }
+      },
+      "get_involved": {
+        "title": "Participer",
+        "description": "Participez de multiples façons — discussions, signalement, code, ou soutien financier via notre",
+        "patreon": "Patreon",
+        "forum": "Forums",
+        "docs": "Docs",
+        "github": "GitHub",
+        "discord": "Discord"
+      },
+      "funding": {
+        "title": "Financement et durabilité",
+        "description": "BeamMP repose sur le soutien de la communauté. Les dons couvrent l'infrastructure, la bande passante, les outils et le temps de développement. Si vous appréciez le projet, pensez à nous soutenir via notre Patreon ou en visitant notre Merch !",
+        "patreon": "Soutenez-nous sur Patreon",
+        "learn": "En savoir plus sur GitHub"
+      },
+      "credits": {
+        "title": "Crédits et remerciements",
+        "description": "BeamMP est maintenu par l'équipe de modération et une incroyable communauté de contributeurs. Merci aux propriétaires de serveurs, créateurs de mods, testeurs et à tous ceux qui signalent des problèmes : votre passion fait avancer le projet.",
+        "desc_2": "Merci aux développeurs de BeamNG.drive pour cette plateforme incroyable qui rend le multijoueur possible.",
+        "desc_3": "Merci également aux membres suivants (actuels et anciens) pour leurs contributions significatives au fil des années :",
+        "mentions": {
+          "0": "Jojos38 (cofondateur) — travail précoce sur la conception pour réaliser l'idée",
+          "1": "Jetta (jetta.cat) — conception et création du logo",
+          "2": "Anonymous275 et Lionkor — reconstruction du projet en C++",
+          "3": "Tixx — contributions importantes à travers le code du projet",
+          "4": "Et bien d'autres — merci à tous pour vos contributions !"
+        },
+        "thank_you": "Ensemble, nous construisons quelque chose de spécial. Merci de faire partie de la communauté BeamMP !"
+      }
+    }
+  }
+}
@@ -0,0 +1,277 @@
+{
+  "message": {
+    "theme": {
+      "light": "Modalità chiara",
+      "dark": "Modalità scura",
+      "system": "Sistema"
+    },
+    "nav": {
+      "home": "Home",
+      "forums": "Forum",
+      "docs": "Docs",
+      "communities": "Community",
+      "partners": "Partner",
+      "servers": "Server",
+      "statistics": "Statistiche",
+      "github": "GitHub",
+      "patreon": "Patreon",
+      "language": "Seleziona lingua",
+      "theme": {
+        "light": "Tema chiaro",
+        "dark": "Tema scuro",
+        "system": "Tema di sistema"
+      }
+    },
+    "footer": {
+      "support_on_patreon": "Supportaci su Patreon",
+      "about": "Informazioni",
+      "privacy_policy": "Privacy",
+      "terms_conditions": "Termini e condizioni"
+    },
+    "404": {
+      "title": "Pagina non trovata",
+      "description": "La pagina richiesta non esiste. Potrebbe essere stata spostata o rimossa.",
+      "return_home": "Torna alla Home"
+    },
+    "home": {
+      "hero": {
+        "title": "Multiplayer per BeamNG.drive",
+        "subtitle": "Vivi la fisica soft-body con gli amici. Gareggia, fai roleplay o semplicemente guida insieme.",
+        "download_now": "Scarica ora",
+        "browse_servers": "Sfoglia i server"
+      },
+      "metrics": {
+        "active_players": "Giocatori attivi",
+        "players_online": "Giocatori online",
+        "public_servers": "Server pubblici",
+        "all_servers": "Tutti i server"
+      },
+      "why_beammp": "Perché BeamMP?",
+      "features": {
+        "stable_servers": {
+          "title": "Server stabili",
+          "description": "BeamMP consente server stabili, con una varietà di istanze in tutto il mondo."
+        },
+        "beamng": {
+          "title": "BeamNG.drive",
+          "description": "BeamMP utilizza le stesse mappe, veicoli e mod — non devi imparare nulla di nuovo!"
+        },
+        "standalone": {
+          "title": "Indipendente",
+          "description": "BeamMP non modifica l'installazione originale, puoi giocare in singleplayer o multiplayer."
+        },
+        "sync": {
+          "title": "Qualità di sincronizzazione",
+          "description": "BeamMP aggiorna la posizione del veicolo ~50 volte al secondo, offrendo un'esperienza fluida."
+        }
+      },
+      "communities": {
+        "join": "Unisciti a una community fiorente",
+        "description": "Scopri esperienze di gioco diverse su centinaia di server unici",
+        "racing": {
+          "name": "Community di corse",
+          "description": "Leghe competitive e prove a tempo con giocatori da tutto il mondo"
+        },
+        "roleplay": {
+          "name": "Server roleplay",
+          "description": "Esperienze immersive: inseguimenti, consegne e altro"
+        },
+        "crash": {
+          "name": "Crash & derby",
+          "description": "Demolition derby e modalità incentrate sulla distruzione"
+        },
+        "freeroam": {
+          "name": "Libera esplorazione",
+          "description": "Sessioni multiplayer casual per esplorare le mappe con gli amici"
+        }
+      },
+      "find": {
+        "title": "Trova il server perfetto",
+        "description": "Sfoglia centinaia di server attivi con modalità, mod e community diverse. Dalle corse competitive alla guida casual: c'è qualcosa per tutti.",
+        "points": {
+          "custom": "Modalità personalizzate",
+          "custom_desc": "Esperienze uniche create dalla community",
+          "moderation": "Moderazione attiva",
+          "moderation_desc": "Ambiente di gioco sicuro e amichevole",
+          "global": "Rete globale",
+          "global_desc": "Server nel mondo per bassa latenza"
+        },
+        "browse_all_servers": "Sfoglia tutti i server"
+      },
+      "devFeatures": {
+        "title": "Pensato per gli sviluppatori",
+        "description": "Crea modalità di gioco, ospita il tuo server e contribuisci al progetto",
+        "lua": {
+          "title": "API Lua",
+          "description": "Potente scripting lato server in Lua per funzionalità personalizzate"
+        },
+        "docs": {
+          "title": "Documentazione",
+          "description": "Guide complete e riferimenti API per lo sviluppo del server"
+        },
+        "openSource": {
+          "title": "Open source",
+          "description": "Sviluppo guidato dalla community con codice su GitHub"
+        },
+        "learn_more": "Scopri di più",
+        "host": {
+          "title": "Pronto a ospitare il tuo server?",
+          "description": "Scarica i file del server e crea la tua esperienza unica su BeamMP",
+          "windows": "Server Windows",
+          "linux": "Build Linux",
+          "partners": {
+            "description": "Inizia rapidamente con i nostri partner di hosting affidabili - configurazione semplice, supporto 24/7 e prestazioni ottimizzate.",
+            "view_partners": "Visualizza partner di hosting"
+          },
+          "self_host": {
+            "title": "O ospitalo tu stesso"
+          }
+        }
+      },
+      "faq": {
+        "title": "Domande frequenti",
+        "0": {
+          "question": "La lista dei server non appare!",
+          "answer": "Prova a riavviare BeamMP. Se non funziona, crea un topic sul forum o usa il canale supporto su Discord."
+        },
+        "1": {
+          "question": "Come apro un ticket se qualcosa non funziona?",
+          "answer": "Controlla il canale #how-to-use su Discord e sul forum. Descrivi accuratamente cosa hai fatto per ricevere assistenza rapida ed efficace."
+        },
+        "2": {
+          "question": "Aiuto! Ricevo codici di errore",
+          "answer": "Vai sul forum per vedere se qualcuno ha già avuto il problema e la soluzione. In alternativa, unisciti al nostro Discord, dove è presente gran parte della community."
+        },
+        "3": {
+          "question": "Funziona con versioni piratate di BeamNG.drive?",
+          "answer": "Non sappiamo se funziona e non forniremo supporto per copie non legittime."
+        },
+        "4": {
+          "question": "Come posso ospitare un server?",
+          "answer": "I file necessari si trovano in cima a questa pagina sotto il download del client. È richiesta una chiave di autenticazione da Keymaster. Maggiori informazioni sulla wiki."
+        },
+        "5": {
+          "question": "Posso usare i mod?",
+          "answer": "I mod sono supportati. Si installano sul server. Vedi la wiki per maggiori dettagli."
+        }
+      },
+      "stats": {
+        "active_players": "Giocatori attivi",
+        "global_servers": "Server globali",
+        "total_downloads": "Download totali"
+      }
+    },
+    "communities": {
+      "title": "Community",
+      "description": "Scopri community fiorenti costruite attorno a BeamMP. Dalle leghe competitive alle sessioni casual: trova il tuo gruppo.",
+      "starting": {
+        "title": "Vuoi avviare la tua community?",
+        "description": "Ospita un server BeamMP e costruisci una community attorno alle tue modalità preferite",
+        "setup_guide": "Guida di configurazione server",
+        "join_discord": "Unisciti a Discord"
+      }
+    },
+    "partners": {
+      "title": "Partner di hosting",
+      "description": "Scegli tra i nostri partner di hosting di fiducia. Configurazione semplice, prestazioni ottimizzate e supporto per mantenere il tuo server BeamMP sempre operativo.",
+      "from_price": "Da {price}",
+      "visit_website": "Visita il sito",
+      "error_loading": "Impossibile caricare i partner"
+    },
+    "servers": {
+      "title": "Server",
+      "description": "Sfoglia e unisciti ai server di BeamMP in tutto il mondo. Trova modalità, community ed esperienze preferite in un unico posto.",
+      "show_only": "Mostra solo:",
+      "loading_servers": "Caricamento server…",
+      "server_count": "0 server | 1 server | {count} server",
+      "players_found": "0 giocatore | 1 giocatore | {count} giocatori",
+      "filters": {
+        "hide_empty": "Nascondi vuoti",
+        "hide_full": "Nascondi pieni",
+        "search": "Cerca server…",
+        "hide_password": "Nascondi protetti da password",
+        "show_official": "Ufficiale",
+        "show_partner": "Partner",
+        "show_featured": "In evidenza"
+      },
+      "table_headers": {
+        "location": "Posizione",
+        "name": "Nome server",
+        "map": "Mappa",
+        "players": "Giocatori",
+        "mods": "Mod",
+        "status": "Stato"
+      }
+    },
+    "statistics": {
+      "title": "Statistiche",
+      "description": "Metriche in tempo reale dai server attivi e cronologia del volume giocatori. Le release possono essere annotate nel grafico.",
+      "loading": "Caricamento…",
+      "peak": "Picco: {count}",
+      "current_players": "Giocatori attuali",
+      "current_servers": "Server attuali",
+      "avg_players_per_server": "Media giocatori/server",
+      "official_servers": "Server ufficiali",
+      "partner_servers": "Server partner",
+      "player_volume": "Volume giocatori nel tempo",
+      "hint": "I marker delle release sono linee verticali arancioni (es. v3.0.0, v4.0.0). Passa sopra per dettagli.",
+      "server_volume": "Volume server nel tempo",
+      "server_hint": "Il conteggio dei server segue trend simili. I marker indicano versioni maggiori."
+    },
+    "about": {
+      "title": "Informazioni su BeamMP",
+      "description": "BeamMP porta il multiplayer su BeamNG.drive. Costruito dalla community e per la community, punta su stabilità, prestazioni ed esperienza di guida autentica con gli amici.",
+      "note": {
+        "title": "Una nota dal creatore",
+        "content": "BeamMP è nato da un'idea semplice: voglio giocare a BeamNG.drive con i miei fratelli. Da esperimento è diventato rapidamente un progetto guidato dalla community, focalizzato su multiplayer e divertimento. Ci teniamo a offrire la migliore esperienza e rendere facile giocare insieme. Il progetto è aperto a contributi di tutti i livelli. Codice, moderazione, scenari o aiuto nella configurazione — tutto aiuta BeamMP a crescere. Grazie per essere qui e aiutare a costruire qualcosa di speciale."
+      },
+      "provides": {
+        "title": "Cosa offre BeamMP",
+        "points": {
+          "0": "Sessioni multiplayer per BeamNG.drive con browser dei server e filtri",
+          "1": "Strumenti di moderazione lato server e opzioni di configurazione",
+          "2": "Supporto ai mod con protezione per contenuti a pagamento",
+          "3": "Canali community attivi (Forum, Discord) per aiuto e collaborazione"
+        }
+      },
+      "project": {
+        "title": "Valori del progetto",
+        "points": {
+          "0": "Community al primo posto: decisioni basate su bisogni reali",
+          "1": "Affidabilità: priorità a stabilità, sincronizzazione e prestazioni",
+          "2": "Apertura: contributi, feedback e trasparenza benvenuti",
+          "3": "Sicurezza: fair play e interazioni rispettose"
+        }
+      },
+      "get_involved": {
+        "title": "Partecipa",
+        "description": "Partecipa in molti modi — discussioni, segnalazioni, codice o supporto economico via",
+        "patreon": "Patreon",
+        "forum": "Forum",
+        "docs": "Docs",
+        "github": "GitHub",
+        "discord": "Discord"
+      },
+      "funding": {
+        "title": "Finanziamento e sostenibilità",
+        "description": "BeamMP si basa sul supporto della community. Le donazioni coprono infrastruttura, banda, strumenti e tempo di sviluppo. Se apprezzi il progetto, considera di supportarci.",
+        "patreon": "Supportaci su Patreon",
+        "learn": "Scopri di più su GitHub"
+      },
+      "credits": {
+        "title": "Crediti e ringraziamenti",
+        "description": "BeamMP è mantenuto dal Mod Team e da una straordinaria comunità di collaboratori. Grazie ai proprietari di server, creatori di mod, tester e a chi segnala problemi: la vostra passione fa avanzare il progetto.",
+        "desc_2": "Grazie agli sviluppatori di BeamNG.drive per l'incredibile piattaforma che rende possibile il multiplayer.",
+        "desc_3": "Un sentito ringraziamento anche ai seguenti membri della community (attuali ed ex) per i contributi significativi nel corso degli anni:",
+        "mentions": {
+          "0": "Jojos38 (co-fondatore) — lavoro iniziale di progettazione per realizzare l'idea",
+          "1": "Jetta (jetta.cat) — design e creazione del logo",
+          "2": "Anonymous275 e Lionkor — ricostruzione del progetto in C++",
+          "3": "Tixx — contributi considerevoli in tutto il codice del progetto",
+          "4": "E molti altri — grazie a tutti per ogni contributo!"
+        },
+        "thank_you": "Insieme stiamo costruendo qualcosa di speciale. Grazie per far parte della community BeamMP!"
+      }
+    }
+  }
+}
@@ -0,0 +1,277 @@
+{
+  "message": {
+    "theme": {
+      "light": "Светлая тема",
+      "dark": "Тёмная тема",
+      "system": "Системная"
+    },
+    "nav": {
+      "home": "Главная",
+      "forums": "Форум",
+      "docs": "Документация",
+      "communities": "Сообщества",
+      "partners": "Партнёры",
+      "servers": "Серверы",
+      "statistics": "Статистика",
+      "github": "GitHub",
+      "patreon": "Patreon",
+      "language": "Выбрать язык",
+      "theme": {
+        "light": "Светлая тема",
+        "dark": "Тёмная тема",
+        "system": "Системная тема"
+      }
+    },
+    "footer": {
+      "support_on_patreon": "Поддержите нас на Patreon",
+      "about": "О проекте",
+      "privacy_policy": "Политика конфиденциальности",
+      "terms_conditions": "Условия использования"
+    },
+    "404": {
+      "title": "Страница не найдена",
+      "description": "Запрошенная страница не существует. Возможно, она была перемещена или удалена.",
+      "return_home": "Вернуться на главную"
+    },
+    "home": {
+      "hero": {
+        "title": "Мультиплеер для BeamNG.drive",
+        "subtitle": "Оцените передовую soft-body физику вместе с друзьями. Гонки, ролевые режимы или просто совместные поездки.",
+        "download_now": "Скачать",
+        "browse_servers": "Просмотреть серверы"
+      },
+      "metrics": {
+        "active_players": "Активные игроки",
+        "players_online": "Игроки онлайн",
+        "public_servers": "Публичные серверы",
+        "all_servers": "Все серверы"
+      },
+      "why_beammp": "Почему BeamMP?",
+      "features": {
+        "stable_servers": {
+          "title": "Стабильные серверы",
+          "description": "BeamMP обеспечивает стабильную работу серверов, расположенных по всему миру."
+        },
+        "beamng": {
+          "title": "BeamNG.drive",
+          "description": "BeamMP использует те же карты, транспорт и моды — вам не нужно заново учиться!"
+        },
+        "standalone": {
+          "title": "Автономность",
+          "description": "BeamMP не изменяет исходную установку — можно играть в одиночном и мультиплеерном режимах."
+        },
+        "sync": {
+          "title": "Качество синхронизации",
+          "description": "BeamMP обновляет позицию вашего автомобиля ~50 раз в секунду, обеспечивая плавный игровой процесс."
+        }
+      },
+      "communities": {
+        "join": "Присоединяйтесь к активному сообществу",
+        "description": "Откройте для себя разнообразные режимы на сотнях уникальных серверов",
+        "racing": {
+          "name": "Гоночные сообщества",
+          "description": "Соревновательные лиги и тайм-аттак с игроками по всему миру"
+        },
+        "roleplay": {
+          "name": "Ролевые серверы",
+          "description": "Иммерсивные режимы — от полицейских погонь до служб доставки"
+        },
+        "crash": {
+          "name": "Crash и дерби",
+          "description": "Дерби на выживание и режимы, ориентированные на разрушения"
+        },
+        "freeroam": {
+          "name": "Свободная езда",
+          "description": "Непринуждённые совместные сессии для исследования карт с друзьями"
+        }
+      },
+      "find": {
+        "title": "Найдите идеальный сервер",
+        "description": "Просматривайте сотни активных серверов с разными режимами, модами и сообществами. От соревновательных гонок до спокойных поездок — каждый найдёт что-то своё.",
+        "points": {
+          "custom": "Пользовательские режимы",
+          "custom_desc": "Уникальные сценарии от сообщества",
+          "moderation": "Активная модерация",
+          "moderation_desc": "Безопасная и дружелюбная среда",
+          "global": "Глобальная сеть",
+          "global_desc": "Серверы по всему миру для низкой задержки"
+        },
+        "browse_all_servers": "Все серверы"
+      },
+      "devFeatures": {
+        "title": "Для разработчиков",
+        "description": "Создавайте режимы, размещайте свой сервер и вносите вклад в проект",
+        "lua": {
+          "title": "Lua API",
+          "description": "Мощный серверный скриптинг на Lua для кастомных режимов и функций"
+        },
+        "docs": {
+          "title": "Документация",
+          "description": "Подробные руководства и API-справочники по серверной разработке"
+        },
+        "openSource": {
+          "title": "Открытый исходный код",
+          "description": "Разработка, управляемая сообществом, с исходниками на GitHub"
+        },
+        "learn_more": "Подробнее",
+        "host": {
+          "title": "Готовы разместить свой сервер?",
+          "description": "Скачайте серверные файлы и создайте уникальный опыт в BeamMP",
+          "windows": "Windows-сервер",
+          "linux": "Linux-сборки",
+          "partners": {
+            "description": "Быстро начните работу с нашими надежными хостинг-партнерами - простая настройка, поддержка 24/7 и оптимизированная производительность.",
+            "view_partners": "Посмотреть хостинг-партнеров"
+          },
+          "self_host": {
+            "title": "Или разместите самостоятельно"
+          }
+        }
+      },
+      "faq": {
+        "title": "Часто задаваемые вопросы",
+        "0": {
+          "question": "Список серверов не отображается!",
+          "answer": "Попробуйте перезапустить BeamMP — такое иногда случается. Если не помогло, создайте тему на форуме или обратитесь в канал поддержки в Discord."
+        },
+        "1": {
+          "question": "Как открыть тикет, если что-то не работает?",
+          "answer": "Посетите канал #how-to-use в Discord и наш форум. Подробно опишите свои действия, чтобы команда поддержки могла помочь быстро и эффективно."
+        },
+        "2": {
+          "question": "Помогите! Появляются коды ошибок",
+          "answer": "Загляните на форум — скорее всего, кто-то уже сталкивался с этим и опубликовал решение. Также загляните в наш Discord, где собрана основная часть сообщества."
+        },
+        "3": {
+          "question": "Работает ли с пиратскими версиями BeamNG.drive?",
+          "answer": "Мы не знаем, работает ли с пиратскими версиями BeamNG.drive, и не будем предоставлять поддержку для нелегальных копий."
+        },
+        "4": {
+          "question": "Как разместить сервер?",
+          "answer": "Необходимые файлы сервера находятся вверху этой страницы, под загрузкой клиента. Также потребуется ключ аутентификации от Keymaster. Подробнее — в нашей вики."
+        },
+        "5": {
+          "question": "Можно ли использовать моды?",
+          "answer": "Моды поддерживаются. Они устанавливаются на сервере. Подробнее — в вики."
+        }
+      },
+      "stats": {
+        "active_players": "Активные игроки",
+        "global_servers": "Глобальные серверы",
+        "total_downloads": "Всего загрузок"
+      }
+    },
+    "communities": {
+      "title": "Сообщества",
+      "description": "Откройте для себя развивающиеся сообщества вокруг BeamMP. От соревнований до свободных сессий — найдите свою компанию.",
+      "starting": {
+        "title": "Хотите создать своё сообщество?",
+        "description": "Разместите свой сервер BeamMP и создайте сообщество вокруг любимых режимов",
+        "setup_guide": "Руководство по настройке сервера",
+        "join_discord": "Вступить в Discord"
+      }
+    },
+    "partners": {
+      "title": "Партнёры по хостингу",
+      "description": "Выберите из наших надёжных хостинг‑партнёров. Простая настройка, оптимизированная производительность и поддержка, чтобы ваш сервер BeamMP работал стабильно.",
+      "from_price": "От {price}",
+      "visit_website": "Перейти на сайт",
+      "error_loading": "Не удалось загрузить партнёров"
+    },
+    "servers": {
+      "title": "Серверы",
+      "description": "Просматривайте и присоединяйтесь к серверам BeamMP по всему миру. Найдите любимые режимы, сообщества и впечатления в одном месте.",
+      "show_only": "Показать только:",
+      "loading_servers": "Загрузка серверов…",
+      "server_count": "0 серверов | 1 сервер | {count} серверов",
+      "players_found": "0 игроков | 1 игрок | {count} игроков",
+      "filters": {
+        "hide_empty": "Скрыть пустые",
+        "hide_full": "Скрыть заполненные",
+        "search": "Поиск серверов…",
+        "hide_password": "Скрыть с паролем",
+        "show_official": "Официальные",
+        "show_partner": "Партнёрские",
+        "show_featured": "Избранные"
+      },
+      "table_headers": {
+        "location": "Местоположение",
+        "name": "Название сервера",
+        "map": "Карта",
+        "players": "Игроки",
+        "mods": "Моды",
+        "status": "Статус"
+      }
+    },
+    "statistics": {
+      "title": "Статистика",
+      "description": "Онлайн-снимок метрик активных серверов и график объёма игроков. На графике можно отмечать релизы.",
+      "loading": "Загрузка…",
+      "peak": "Пик: {count}",
+      "current_players": "Текущие игроки",
+      "current_servers": "Текущие серверы",
+      "avg_players_per_server": "Средн. игроков/сервер",
+      "official_servers": "Официальные серверы",
+      "partner_servers": "Партнёрские серверы",
+      "player_volume": "Объём игроков во времени",
+      "hint": "Маркеры релизов — вертикальные оранжевые линии (например, v3.0.0, v4.0.0). Наведите курсор для деталей.",
+      "server_volume": "Объём серверов во времени",
+      "server_hint": "Число серверов следует похожим трендам. Маркеры обозначают крупные релизы."
+    },
+    "about": {
+      "title": "О BeamMP",
+      "description": "BeamMP добавляет мультиплеер в BeamNG.drive. Создано сообществом и для сообщества, с упором на стабильность, производительность и аутентичный опыт вождения с друзьями.",
+      "note": {
+        "title": "Слово от создателя",
+        "content": "BeamMP начался с простой идеи: хочу играть в BeamNG.drive с братьями. То, что начиналось как эксперимент, быстро выросло в проект сообщества, ориентированный на мультиплеер и удовольствие. Мы стремимся обеспечить лучший возможный опыт и сделать вход максимально простым. Проект открыт для вкладов любого уровня. Код, модерация, сценарии или помощь другим — всё это помогает BeamMP расти. Спасибо, что вы с нами и помогаете строить нечто особенное."
+      },
+      "provides": {
+        "title": "Что предлагает BeamMP",
+        "points": {
+          "0": "Мультиплеерные сессии для BeamNG.drive с браузером серверов и фильтрами",
+          "1": "Серверные инструменты модерации и параметры конфигурации",
+          "2": "Поддержка модов с защитой платного контента",
+          "3": "Активные каналы сообщества (форум, Discord) для помощи и сотрудничества"
+        }
+      },
+      "project": {
+        "title": "Ценности проекта",
+        "points": {
+          "0": "Сообщество прежде всего: решения на основе реальных потребностей",
+          "1": "Надёжность: приоритет стабильности, синхронизации и производительности",
+          "2": "Открытость: приветствуем вклад, обратную связь и прозрачность",
+          "3": "Безопасность: честная игра и уважительное общение"
+        }
+      },
+      "get_involved": {
+        "title": "Присоединяйтесь",
+        "description": "Есть много способов участвовать — обсуждения, отчёты, код или поддержка финансово через",
+        "patreon": "Patreon",
+        "forum": "Форум",
+        "docs": "Docs",
+        "github": "GitHub",
+        "discord": "Discord"
+      },
+      "funding": {
+        "title": "Финансирование и устойчивость",
+        "description": "BeamMP опирается на поддержку сообщества. Пожертвования помогают покрыть инфраструктуру, трафик, инструменты и время разработки. Если цените проект — пожалуйста, поддержите нас.",
+        "patreon": "Поддержите нас на Patreon",
+        "learn": "Подробнее на GitHub"
+      },
+      "credits": {
+        "title": "Благодарности",
+        "description": "BeamMP поддерживается модераторами и замечательными участниками сообщества. Спасибо владельцам серверов, авторам модов, тестерам и всем, кто сообщают о проблемах — ваша страсть двигает проект вперёд.",
+        "desc_2": "Особая благодарность разработчикам BeamNG.drive за потрясающую платформу, которая делает мультиплеер возможным.",
+        "desc_3": "Также благодарим следующих текущих и бывших участников сообщества за значимый вклад на протяжении лет:",
+        "mentions": {
+          "0": "Jojos38 (сооснователь) — ранние работы по дизайну для реализации идеи",
+          "1": "Jetta (jetta.cat) — дизайн и создание логотипа",
+          "2": "Anonymous275 и Lionkor — переработка проекта на C++",
+          "3": "Tixx — существенный вклад во всём коде",
+          "4": "И многие другие — спасибо всем за любой вклад!"
+        },
+        "thank_you": "Вместе мы строим нечто особенное. Спасибо, что вы — часть сообщества BeamMP!"
+      }
+    }
+  }
+}
@@ -1,6 +1,25 @@
 import { createApp } from 'vue'
+//import { createI18n } from 'vue-i18n'
+import { setupI18n } from './i18n'
 import App from './App.vue'
-import router from './routes'
 import './style.css'

-createApp(App).use(router).mount('#app')
+//const i18n = createI18n({
+const initialLocale = localStorage.getItem('lang') || 'en'
+const i18n = setupI18n({
+  legacy: false,
+  locale: initialLocale,
+  fallbackLocale: 'en',
+  messages: {
+    en: await import('./locales/en.json'),
+    //fr: () => import('./locales/fr.json'),
+    //es: () => import('./locales/es.json'),
+  },
+})
+
+window.i18n = i18n
+window.locale = i18n.global.locale
+
+import router from './routes'
+
+createApp(App).use(i18n).use(router).mount('#app')
@@ -1,9 +1,12 @@
+import { loadLocaleMessages, setI18nLanguage, SUPPORT_LOCALES } from '@/i18n'
 import { createRouter, createWebHistory } from 'vue-router'
 import NotFound from '@/views/NotFound.vue'
+import { RouterView } from 'vue-router'

-const routes = [
+// Base routes without locale prefix
+const baseRoutes = [
  {
-    path: '/',
+    path: '',
    name: 'Home',
    component: () => import('@/views/Home.vue'),
    meta: {
@@ -13,7 +16,7 @@ const routes = [
    },
  },
  {
-    path: '/about',
+    path: 'about',
    name: 'About',
    component: () => import('@/views/About.vue'),
    meta: {
@@ -22,18 +25,8 @@ const routes = [
      requiresAuth: false,
    },
  },
-  /*{
-    path: '/contact',
-    name: 'Contact',
-    component: Contact,
-    meta: {
-      title: 'Contact - BeamMP',
-      description: 'Get in touch with us',
-      requiresAuth: false
-    }
-  },*/
  {
-    path: '/communities',
+    path: 'communities',
    name: 'Communities',
    component: () => import('@/views/Communities.vue'),
    meta: {
@@ -43,7 +36,7 @@ const routes = [
    },
  },
  {
-    path: '/servers',
+    path: 'servers',
    name: 'Servers',
    component: () => import('@/views/Servers.vue'),
    meta: {
@@ -53,7 +46,7 @@ const routes = [
    },
  },
  {
-    path: '/stats',
+    path: 'stats',
    name: 'Statistics',
    component: () => import('@/views/Statistics.vue'),
    meta: {
@@ -62,6 +55,38 @@ const routes = [
      requiresAuth: false,
    },
  },
+  {
+    path: 'partners',
+    name: 'Partners',
+    component: () => import('@/views/Partners.vue'),
+    meta: {
+      title: 'Partners - BeamMP',
+      description: 'Explore trusted hosting partners for BeamMP servers',
+      requiresAuth: false,
+    },
+  },
+]
+
+const routes = [
+  {
+    path: `/:locale(${SUPPORT_LOCALES.join('|')})`,
+    component: RouterView,
+    beforeEnter: (to) => {
+      console.log('Entering locale route:', to.params.locale)
+      // Validate locale
+      if (!SUPPORT_LOCALES.includes(to.params.locale)) {
+        return false
+      }
+    },
+    children: baseRoutes,
+  },
+  {
+    path: '/',
+    redirect: () => {
+      const locale = localStorage.getItem('lang') || 'en'
+      return `/${locale}`
+    },
+  },
  {
    path: '/:pathMatch(.*)*',
    name: 'NotFound',
@@ -79,8 +104,28 @@ const router = createRouter({
  routes,
 })

-// Global navigation guard for meta data
-router.beforeEach((to, from, next) => {
+// Global navigation guard for meta data and locale
+router.beforeEach(async (to, from, next) => {
+  const paramsLocale = to.params.locale || 'en'
+  const i18n = window.i18n
+
+  // Ensure i18n is available
+  if (!i18n) {
+    next()
+    return
+  }
+
+  // load locale messages
+  if (!i18n.global.availableLocales.includes(paramsLocale)) {
+    await loadLocaleMessages(i18n, paramsLocale)
+  }
+
+  // set i18n language
+  setI18nLanguage(i18n, paramsLocale)
+
+  // Store current locale in localStorage
+  localStorage.setItem('lang', paramsLocale)
+
  // Set page title
  document.title = to.meta.title || 'BeamMP'

@@ -5,6 +5,15 @@

@custom-variant dark (&:is(.dark *));

+@theme {
+  --color-beammp-orange: #F36D24;
+  --color-beammp-white: #FFFFFF;
+  --color-beammp-black: #000000;
+  --color-beammp-gray: #333333;
+  --color-beammp-green: #1D9749;
+  --color-beammp-blue: #4470B6;
+}
+
@theme inline {
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
@@ -0,0 +1,42 @@
+/**
+ * Get the current locale from localStorage or window.i18n
+ * @returns {string} The current locale code
+ */
+export function getCurrentLocale() {
+  if (window.i18n) {
+    const locale = window.i18n.global.locale
+    return locale.value || locale
+  }
+  return localStorage.getItem('lang') || 'en'
+}
+
+/**
+ * Generate a localized route path
+ * @param {string} route - The route name or path (without leading slash)
+ * @param {string} locale - Optional locale override
+ * @returns {string} The full path including locale
+ */
+export function getLocalizedPath(route, locale = null) {
+  const currentLocale = locale || getCurrentLocale()
+  const path = route.startsWith('/') ? route.slice(1) : route
+  return `/${currentLocale}/${path}`.replace(/\/+/g, '/')
+}
+
+/**
+ * Create a redirect to the current route in a different locale
+ * @param {string} newLocale - The new locale to switch to
+ * @param {string} currentPath - The current route path (can include locale and query params)
+ * @returns {string} The new path with the different locale
+ */
+export function switchLocale(newLocale, currentPath) {
+  // Split path from query string
+  const [pathOnly] = currentPath.split('?')
+  
+  // Remove locale from the beginning: /en/servers -> /servers, /en/ -> /
+  const pathWithoutLocale = pathOnly.replace(/^\/[a-z]{2}(?:\/|$)/, '/')
+  
+  // Remove trailing slashes and ensure we have the right format
+  const cleanPath = pathWithoutLocale.replace(/\/+/g, '/').replace(/\/$/, '') || ''
+  
+  return `/${newLocale}${cleanPath}`.replace(/\/+/g, '/')
+}
@@ -5,11 +5,10 @@
    <!-- Page Title -->
    <div class="mb-8">
      <h1 class="text-4xl font-extrabold tracking-tight text-neutral-900 dark:text-white">
-        About BeamMP
+        {{ $t('message.about.title') }}
      </h1>
      <p class="mt-3 text-neutral-600 dark:text-neutral-300 max-w-2xl">
-        BeamMP brings multiplayer to BeamNG.drive. It’s built by and for the community, focusing on
-        stability, performance, and an authentic driving experience shared with friends.
+        {{ $t('message.about.description') }}
      </p>
    </div>

@@ -18,19 +17,11 @@
      class="rounded-lg border border-neutral-200 dark:border-neutral-800 bg-white/70 dark:bg-neutral-900/60 p-6 mb-10"
    >
      <h2 class="text-2xl font-semibold text-neutral-900 dark:text-white mb-4">
-        A Note from the Creator
+        {{ $t('message.about.note.title') }}
      </h2>
      <div class="prose prose-neutral dark:prose-invert max-w-none">
        <p>
-          BeamMP started with a simple idea: I want to play BeamNG.drive with my brothers. What
-          began as an experiment quickly grew into a community-driven project focused on
-          implementing multiplayer, and fun. We care deeply about trying to provide the best
-          experience possible, and making it easy for players to hop in and enjoy driving together.
-        </p>
-        <p>
-          The project is open to contributors of all skill levels. Whether you write code, moderate
-          a server, design scenarios, or help others get set up—your efforts are part of what makes
-          BeamMP thrive. Thank you for being here and helping us build something special.
+          {{ $t('message.about.note.content') }}
        </p>
      </div>
    </div>
@@ -39,40 +30,41 @@
    <div class="grid gap-8 md:grid-cols-2 mb-10">
      <div class="rounded-lg border border-neutral-200 dark:border-neutral-800 p-6">
        <h3 class="text-xl font-semibold text-neutral-900 dark:text-white mb-3">
-          What BeamMP Provides
+          {{ $t('message.about.provides.title') }}
        </h3>
        <ul class="space-y-2 text-neutral-700 dark:text-neutral-300">
-          <li>Multiplayer sessions for BeamNG.drive with server browser and filters</li>
-          <li>Server-side moderation tools and configuration options</li>
-          <li>Mod support with protection for paid content</li>
-          <li>Active community channels (Forum, Discord) for help and collaboration</li>
+          <li>{{ $t('message.about.provides.points.0') }}</li>
+          <li>{{ $t('message.about.provides.points.1') }}</li>
+          <li>{{ $t('message.about.provides.points.2') }}</li>
+          <li>{{ $t('message.about.provides.points.3') }}</li>
        </ul>
      </div>
      <div class="rounded-lg border border-neutral-200 dark:border-neutral-800 p-6">
-        <h3 class="text-xl font-semibold text-neutral-900 dark:text-white mb-3">Project Values</h3>
+        <h3 class="text-xl font-semibold text-neutral-900 dark:text-white mb-3">
+          {{ $t('message.about.project.title') }}
+        </h3>
        <ul class="space-y-2 text-neutral-700 dark:text-neutral-300">
-          <li>Community-first: decisions guided by real player/server needs</li>
-          <li>
-            Reliability: prioritizing stability, sync fidelity, and performance where possible
-          </li>
-          <li>Openness: welcoming contributions, feedback, and transparency</li>
-          <li>Safety: promoting fair play and respectful interactions</li>
+          <li>{{ $t('message.about.project.points.0') }}</li>
+          <li>{{ $t('message.about.project.points.1') }}</li>
+          <li>{{ $t('message.about.project.points.2') }}</li>
+          <li>{{ $t('message.about.project.points.3') }}</li>
        </ul>
      </div>
    </div>

    <!-- How to Get Involved -->
    <div class="rounded-lg border border-neutral-200 dark:border-neutral-800 p-6 mb-10">
-      <h3 class="text-xl font-semibold text-neutral-900 dark:text-white mb-3">Get Involved</h3>
+      <h3 class="text-xl font-semibold text-neutral-900 dark:text-white mb-3">
+        {{ $t('message.about.get_involved.title') }}
+      </h3>
      <p class="text-neutral-700 dark:text-neutral-300 mb-4">
-        There are many ways to participate—join discussions, report issues, contribute code, or help
-        to support the project financially via
+        {{ $t('message.about.get_involved.description') }}
        <a
          href="https://www.patreon.com/BeamMP"
          target="_blank"
          rel="noopener noreferrer"
          class="text-orange-500 hover:underline"
-          >Patreon</a
+          >{{ $t('message.about.get_involved.patreon') }}</a
        >.
      </p>
      <div class="flex flex-wrap gap-3">
@@ -81,28 +73,28 @@
          target="_blank"
          rel="noopener noreferrer"
          class="px-4 py-2 rounded-md bg-neutral-100 hover:bg-neutral-200 text-neutral-900 dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700 transition-colors"
-          >Forum</a
+          >{{ $t('message.about.get_involved.forum') }}</a
        >
        <a
          href="https://docs.beammp.com"
          target="_blank"
          rel="noopener noreferrer"
          class="px-4 py-2 rounded-md bg-neutral-100 hover:bg-neutral-200 text-neutral-900 dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700 transition-colors"
-          >Docs</a
+          >{{ $t('message.about.get_involved.docs') }}</a
        >
        <a
          href="https://github.com/BeamMP/BeamMP"
          target="_blank"
          rel="noopener noreferrer"
          class="px-4 py-2 rounded-md bg-neutral-100 hover:bg-neutral-200 text-neutral-900 dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700 transition-colors"
-          >GitHub</a
+          >{{ $t('message.about.get_involved.github') }}</a
        >
        <a
          href="https://discord.gg/beammp"
          target="_blank"
          rel="noopener noreferrer"
          class="px-4 py-2 rounded-md bg-neutral-100 hover:bg-neutral-200 text-neutral-900 dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700 transition-colors"
-          >Discord</a
+          >{{ $t('message.about.get_involved.discord') }}</a
        >
        <a
          href="https://www.patreon.com/BeamMP"
@@ -110,7 +102,7 @@
          rel="noopener noreferrer"
          class="px-4 py-2 rounded-md bg-orange-500 text-white hover:bg-orange-600 transition-colors"
        >
-          Patreon
+          {{ $t('message.about.get_involved.patreon') }}
        </a>
      </div>
    </div>
@@ -118,12 +110,10 @@
    <!-- Funding & Sustainability -->
    <div class="rounded-lg border border-neutral-200 dark:border-neutral-800 p-6 mb-10">
      <h3 class="text-xl font-semibold text-neutral-900 dark:text-white mb-3">
-        Funding &amp; Sustainability
+        {{ $t('message.about.funding.title') }}
      </h3>
      <p class="text-neutral-700 dark:text-neutral-300 mb-4">
-        BeamMP relies on community support. Donations help cover infrastructure, bandwidth, tooling,
-        and development time. If you value the project and want to help it grow, please consider
-        supporting us.
+        {{ $t('message.about.funding.description') }}
      </p>
      <div class="flex flex-wrap gap-3">
        <a
@@ -132,7 +122,7 @@
          rel="noopener noreferrer"
          class="px-4 py-2 rounded-md bg-orange-500 text-white hover:bg-orange-600 transition-colors"
        >
-          Support on Patreon
+          {{ $t('message.about.funding.patreon') }}
        </a>
        <a
          href="https://github.com/BeamMP/BeamMP"
@@ -140,7 +130,7 @@
          rel="noopener noreferrer"
          class="px-4 py-2 rounded-md bg-neutral-100 hover:bg-neutral-200 text-neutral-900 dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700 transition-colors"
        >
-          Learn more on GitHub
+          {{ $t('message.about.funding.learn') }}
        </a>
      </div>
    </div>
@@ -148,34 +138,26 @@
    <!-- Credits & Acknowledgements -->
    <div class="rounded-lg border border-neutral-200 dark:border-neutral-800 p-6">
      <h3 class="text-xl font-semibold text-neutral-900 dark:text-white mb-3">
-        Credits &amp; Acknowledgements
+        {{ $t('message.about.credits.title') }}
      </h3>
      <p class="text-neutral-700 dark:text-neutral-300">
-        BeamMP is maintained by the Mod Team and an incredible group of community contributors. We’d
-        also like to thank server owners, mod creators, testers, and everyone reporting issues—your
-        time and passion keep the project moving forward.
+        {{ $t('message.about.credits.description') }}
      </p>
      <p class="text-neutral-700 dark:text-neutral-300 mt-4">
-        Special thanks to the BeamNG.drive developers for creating such an amazing platform that
-        makes projects like BeamMP possible in the first place.
+        {{ $t('message.about.credits.desc_2') }}
      </p>
      <p class="text-neutral-700 dark:text-neutral-300 mt-4">
-        Also a heartfelt thank you to the following current and former community members for their
-        significant contributions to BeamMP over the years:
+        {{ $t('message.about.credits.desc_3') }}
      </p>
      <ul class="list-disc list-inside text-neutral-700 dark:text-neutral-300 mt-2 space-y-1">
-        <li>
-          Jojos38 (Co-Founder) - for their work early on with designing everything to help make the
-          idea become a reality
-        </li>
-        <li>Jetta (jetta.cat) - for the logo design and creation.</li>
-        <li>Anonymous275 & Lionkor - for their work in rebuilding the project in C++.</li>
-        <li>Tixx - for their considerable contributions across the project codebase.</li>
-        <li>And many others!</li>
+        <li>{{ $t('message.about.credits.mentions.0') }}</li>
+        <li>{{ $t('message.about.credits.mentions.1') }}</li>
+        <li>{{ $t('message.about.credits.mentions.2') }}</li>
+        <li>{{ $t('message.about.credits.mentions.3') }}</li>
+        <li>{{ $t('message.about.credits.mentions.4') }}</li>
      </ul>
      <p class="text-neutral-700 dark:text-neutral-300 mt-4">
-        Together, we’re building something special. Thank you for being part of the BeamMP
-        community!
+        {{ $t('message.about.credits.thank_you') }}
      </p>
    </div>
  </section>
@@ -1,7 +1,8 @@
 <script setup>
+import { computed } from 'vue'
 import { ExternalLink, Users, Trophy, Gamepad2, Shield, MapPin } from 'lucide-vue-next'

-const communities = [
+const communities = computed(() => [
  {
    name: 'BeamMP Racing League',
    description:
@@ -121,7 +122,7 @@ const communities = [
    },
    color: 'from-amber-600 to-yellow-600',
  },
-]
+])
 </script>

 <template>
@@ -129,11 +130,10 @@ const communities = [
    <!-- Page Header -->
    <section class="text-center space-y-4">
      <h1 class="text-5xl md:text-6xl font-bold">
-        <span class="text-beammp-orange">BeamMP</span> Communities
+        {{ $t('message.communities.title') }}
      </h1>
      <p class="text-xl text-neutral-600 dark:text-neutral-400 max-w-3xl mx-auto">
-        Discover thriving communities built around BeamMP. From competitive racing leagues to casual
-        free roam sessions, find your perfect group to play with.
+        {{ $t('message.communities.description') }}
      </p>
    </section>

@@ -251,9 +251,9 @@ const communities = [
    <!-- CTA Section -->
    <section class="text-center py-16 bg-neutral-50 dark:bg-neutral-900/30 -mx-4 px-4 rounded-xl">
      <div class="max-w-2xl mx-auto space-y-6">
-        <h2 class="text-3xl md:text-4xl font-bold">Want to Start Your Own Community?</h2>
+        <h2 class="text-3xl md:text-4xl font-bold">{{ $t('message.communities.starting.title') }}</h2>
        <p class="text-lg text-neutral-600 dark:text-neutral-400">
-          Host your own BeamMP server and build a community around your favorite game modes
+          {{ $t('message.communities.starting.description') }}
        </p>
        <div class="flex flex-col sm:flex-row gap-4 justify-center pt-4">
          <a
@@ -263,7 +263,7 @@ const communities = [
            class="inline-flex items-center gap-2 bg-beammp-orange hover:bg-beammp-orange/90 text-white px-6 py-3 rounded-lg font-semibold transition-colors"
          >
            <component :is="Shield" class="w-5 h-5" />
-            Server Setup Guide
+            {{ $t('message.communities.starting.setup_guide') }}
          </a>
          <a
            href="https://discord.gg/beammp"
@@ -272,7 +272,7 @@ const communities = [
            class="inline-flex items-center gap-2 bg-neutral-700 hover:bg-neutral-600 text-white px-6 py-3 rounded-lg font-semibold transition-colors"
          >
            <Users class="w-5 h-5" />
-            Join Our Discord
+            {{ $t('message.communities.starting.join_discord') }}
          </a>
        </div>
      </div>
@@ -4,32 +4,25 @@ import { RouterLink } from 'vue-router'

 <template>
  <section class="min-h-[60vh] flex items-center justify-center">
-    <div
-      class="text-center px-6 py-10 sm:px-8 sm:py-12 rounded-xl border border-neutral-200/30 bg-white/60 dark:bg-neutral-900/60 backdrop-blur-md shadow-sm space-y-4"
-    >
+    <div class="text-center px-6 py-10 sm:px-8 sm:py-12 rounded-xl border border-neutral-200/30 bg-white/60 dark:bg-neutral-900/60 backdrop-blur-md shadow-sm space-y-4">
      <div class="flex items-center justify-center gap-3">
-        <span
-          class="inline-flex items-center justify-center rounded-full bg-orange-600/10 text-orange-600 dark:text-orange-400 w-12 h-12 text-xl font-bold"
-          >404</span
-        >
-        <h1 class="text-2xl sm:text-3xl font-bold tracking-tight">Page Not Found</h1>
+        <span class="inline-flex items-center justify-center rounded-full bg-orange-600/10 text-orange-600 dark:text-orange-400 w-12 h-12 text-xl font-bold">404</span>
+        <h1 class="text-2xl sm:text-3xl font-bold tracking-tight">{{ $t("message.404.title") }}</h1>
      </div>
-
+      
      <p class="text-neutral-600 dark:text-neutral-300 max-w-prose mx-auto">
-        The page you requested doesn’t exist. It may have been moved or removed.
+        {{ $t("message.404.description") }}
      </p>
      <div class="flex flex-wrap items-center justify-center gap-3 pt-2">
        <RouterLink
          to="/"
-          class="inline-flex px-4 py-2 rounded-md bg-orange-600 hover:bg-orange-500 text-white text-sm font-medium"
-        >
-          Return Home
+          class="inline-flex px-4 py-2 rounded-md bg-orange-600 hover:bg-orange-500 text-white text-sm font-medium">
+          {{ $t("message.404.return_home") }}
        </RouterLink>
        <RouterLink
          to="/servers"
-          class="inline-flex px-4 py-2 rounded-md border border-neutral-300/60 dark:border-neutral-700/60 text-sm font-medium text-neutral-800 dark:text-neutral-200 hover:bg-neutral-100 dark:hover:bg-neutral-800"
-        >
-          Browse Servers
+          class="inline-flex px-4 py-2 rounded-md border border-neutral-300/60 dark:border-neutral-700/60 text-sm font-medium text-neutral-800 dark:text-neutral-200 hover:bg-neutral-100 dark:hover:bg-neutral-800">
+          {{ $t("message.home.hero.browse_servers") }}
        </RouterLink>
      </div>
    </div>
@@ -0,0 +1,104 @@
+<script setup>
+import { ref, onMounted } from 'vue'
+
+const partners = ref([])
+const loading = ref(true)
+const error = ref(null)
+
+async function loadPartners() {
+  try {
+    const res = await fetch('/partners.json', { cache: 'no-store' })
+    if (!res.ok) throw new Error(`Failed to load partners (${res.status})`)
+    const data = await res.json()
+    const partnersArray = Array.isArray(data) ? data : []
+    
+    // Create a seed based on the current date (YYYY-MM-DD)
+    const today = new Date().toISOString().split('T')[0]
+    const seed = today.split('-').reduce((acc, val) => acc + parseInt(val), 0)
+    
+    // Simple seeded shuffle using the date as seed
+    const shuffled = [...partnersArray]
+    for (let i = shuffled.length - 1; i > 0; i--) {
+      const j = Math.floor(((seed * (i + 1) * 9301 + 49297) % 233280) / 233280 * (i + 1))
+      ;[shuffled[i], shuffled[j]] = [shuffled[j], shuffled[i]]
+    }
+    
+    partners.value = shuffled
+  } catch (e) {
+    error.value = e.message || 'Unable to fetch partners'
+  } finally {
+    loading.value = false
+  }
+}
+
+onMounted(loadPartners)
+</script>
+
+<template>
+  <section class="py-16 px-4">
+    <div class="max-w-6xl mx-auto">
+      <div class="text-center mb-12">
+        <h1 class="text-4xl font-bold">{{ $t('message.partners.title') }}</h1>
+        <p class="text-neutral-600 dark:text-neutral-400 max-w-2xl mx-auto">
+          {{ $t('message.partners.description') }}
+        </p>
+      </div>
+
+      <!-- Loading State -->
+      <div v-if="loading" class="grid sm:grid-cols-2 lg:grid-cols-3 gap-6">
+        <div
+          v-for="n in 6"
+          :key="n"
+          class="rounded-xl border border-neutral-200 dark:border-neutral-800 p-6 bg-white/70 dark:bg-neutral-900/50 animate-pulse"
+        >
+          <div class="h-16 bg-neutral-200 dark:bg-neutral-800 rounded mb-4" />
+          <div class="h-5 bg-neutral-200 dark:bg-neutral-800 rounded w-2/3 mb-2" />
+          <div class="h-4 bg-neutral-200 dark:bg-neutral-800 rounded w-1/3" />
+          <div class="h-9 bg-neutral-200 dark:bg-neutral-800 rounded w-full mt-6" />
+        </div>
+      </div>
+
+      <!-- Error State -->
+      <div v-else-if="error" class="text-center">
+        <p class="text-red-600 dark:text-red-400">{{ $t('message.partners.error_loading') }}</p>
+      </div>
+
+      <!-- Partners Grid -->
+      <div v-else class="grid sm:grid-cols-2 lg:grid-cols-3 gap-6">
+        <div
+          v-for="(p, idx) in partners"
+          :key="idx"
+          class="shadow-md hover:-translate-y-1 duration-150 group rounded-xl border border-neutral-200 dark:border-neutral-800 dark:bg-neutral-900/50 hover:border-beammp-orange dark:hover:border-beammp-orange hover:shadow-xl transition-all"
+        >
+          <div class="flex items-center justify-center min-h-16 mb-4 p-6 bg-neutral-900/80 border-b border-beammp-orange border-b-2 rounded-t-xl" style="height: 114px;">
+            <img :src="p.logo" :alt="p.name" class="max-h-16 object-contain" />
+          </div>
+          <div class="p-6">
+            <div class="space-y-1">
+              <h3 class="text-xl text-neutral-900 dark:text-white font-semibold">{{ p.name }}</h3>
+              <p class="text-sm text-neutral-600 dark:text-neutral-400">
+                {{ $t('message.partners.from_price', { price: p.from }) }}
+              </p>
+            </div>
+            <a
+              :href="p.website"
+              target="_blank"
+              rel="noopener noreferrer"
+              class="mt-6 inline-flex items-center justify-center gap-2 w-full bg-beammp-orange hover:bg-beammp-orange/90 text-white px-4 py-2 rounded-lg font-semibold transition-colors dark:bg-beammp-orange dark:hover:bg-beammp-orange/90"
+            >
+              {{ $t('message.partners.visit_website') }}
+              <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  stroke-width="2"
+                  d="M9 5l7 7-7 7"
+                />
+              </svg>
+            </a>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+</template>
@@ -1,8 +1,8 @@
 <template>
  <div class="servers-container">
    <div class="servers-header">
-      <h1 class="servers-title">BeamMP Servers</h1>
-      <p class="servers-subtitle">Join thousands of players in multiplayer BeamNG.drive</p>
+      <h1 class="text-4xl font-bold">{{ $t('message.servers.title') }}</h1>
+      <p class="text-base servers-subtitle text-neutral-600 dark:text-neutral-400">{{ $t('message.servers.description') }}</p>
    </div>

    <div class="servers-filters">
@@ -10,59 +10,59 @@
        <input
          v-model="searchQuery"
          type="text"
-          placeholder="Search servers..."
+          :placeholder="$t('message.servers.filters.search')"
          class="search-input"
        />
      </div>

      <div class="filter-group">
-        <label class="filter-label">
+        <label class="filter-label text-neutral-600 dark:text-neutral-400">
          <input v-model="filters.hideEmpty" type="checkbox" />
-          Hide Empty
+          {{ $t('message.servers.filters.hide_empty') }}
        </label>
-        <label class="filter-label">
+        <label class="filter-label text-neutral-600 dark:text-neutral-400">
          <input v-model="filters.hideFull" type="checkbox" />
-          Hide Full
+          {{ $t('message.servers.filters.hide_full') }}
        </label>
-        <label class="filter-label">
+        <!--<label class="filter-label">
          <input v-model="filters.hidePassword" type="checkbox" />
-          Hide Password
-        </label>
+          {{ $t('message.servers.filters.hide_password') }}
+        </label>-->
      </div>

      <div class="filter-group">
-        <span class="filter-heading">Show only:</span>
-        <label class="filter-label">
+        <span class="filter-heading">{{ $t('message.servers.show_only') }}</span>
+        <label class="filter-label text-neutral-600 dark:text-neutral-400">
          <input v-model="filters.official" type="checkbox" />
-          Official
+          {{ $t('message.servers.filters.show_official') }}
        </label>
-        <label class="filter-label">
+        <label class="filter-label text-neutral-600 dark:text-neutral-400">
          <input v-model="filters.partner" type="checkbox" />
-          Partner
+          {{ $t('message.servers.filters.show_partner') }}
        </label>
-        <label class="filter-label">
+        <label class="filter-label text-neutral-600 dark:text-neutral-400">
          <input v-model="filters.featured" type="checkbox" />
-          Featured
+          {{ $t('message.servers.filters.show_featured') }}
        </label>
      </div>

      <div class="server-count">
-        {{ filteredServers.length }} servers found ({{ totalPlayers }} players online)
+        {{ $t('message.servers.server_count', { count: filteredServers.length }) }} ({{ $t('message.servers.players_found', { count: totalPlayers }) }})
      </div>
    </div>

-    <div v-if="loading" class="loading">Loading servers...</div>
+    <div v-if="loading" class="loading">{{ $t('message.servers.loading_servers') }}</div>
    <div v-else-if="error" class="error">{{ error }}</div>
    <div v-else class="table-wrapper">
      <table class="servers-table">
        <thead>
          <tr>
-            <th class="col-location">Location</th>
-            <th class="col-name">Server Name</th>
-            <th class="col-map">Map</th>
-            <th class="col-players">Players</th>
-            <th class="col-mods">Mods</th>
-            <th class="col-status">Status</th>
+            <th class="col-location">{{ $t('message.servers.table_headers.location') }}</th>
+            <th class="col-name">{{ $t('message.servers.table_headers.name') }}</th>
+            <th class="col-map">{{ $t('message.servers.table_headers.map') }}</th>
+            <th class="col-players">{{ $t('message.servers.table_headers.players') }}</th>
+            <th class="col-mods">{{ $t('message.servers.table_headers.mods') }}</th>
+            <th class="col-status">{{ $t('message.servers.table_headers.status') }}</th>
          </tr>
        </thead>
        <tbody>
@@ -216,6 +216,7 @@

 <script setup>
 import { ref, computed, onMounted } from 'vue'
+import { useI18n } from 'vue-i18n'

 const servers = ref([])
 const loading = ref(true)
@@ -232,10 +233,19 @@ const filters = ref({
  featured: false,
 })

+const { locale } = useI18n()
+const regionDisplay = computed(() => {
+  try {
+    return new Intl.DisplayNames([locale.value], { type: 'region' })
+  } catch {
+    return new Intl.DisplayNames(['en'], { type: 'region' })
+  }
+})
+
 onMounted(async () => {
  try {
    const response = await fetch('/servers.json')
-    //const response = await fetch('https://backend.beammp.com/servers-info');
+    //const response = await fetch('https://backend.beammp.com/servers-info')
    console.log(response)
    if (!response.ok) throw new Error('Failed to fetch servers')
    const data = await response.json()
@@ -400,256 +410,10 @@ function formatBytes(bytes) {
  return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i]
 }

-const isoCountries = {
-  AF: 'Afghanistan',
-  AX: 'Aland Islands',
-  AL: 'Albania',
-  DZ: 'Algeria',
-  AS: 'American Samoa',
-  AD: 'Andorra',
-  AO: 'Angola',
-  AI: 'Anguilla',
-  AQ: 'Antarctica',
-  AG: 'Antigua And Barbuda',
-  AR: 'Argentina',
-  AM: 'Armenia',
-  AW: 'Aruba',
-  AU: 'Australia',
-  AT: 'Austria',
-  AZ: 'Azerbaijan',
-  BS: 'Bahamas',
-  BH: 'Bahrain',
-  BD: 'Bangladesh',
-  BB: 'Barbados',
-  BY: 'Belarus',
-  BE: 'Belgium',
-  BZ: 'Belize',
-  BJ: 'Benin',
-  BM: 'Bermuda',
-  BT: 'Bhutan',
-  BO: 'Bolivia',
-  BA: 'Bosnia And Herzegovina',
-  BW: 'Botswana',
-  BV: 'Bouvet Island',
-  BR: 'Brazil',
-  IO: 'British Indian Ocean Territory',
-  BN: 'Brunei Darussalam',
-  BG: 'Bulgaria',
-  BF: 'Burkina Faso',
-  BI: 'Burundi',
-  KH: 'Cambodia',
-  CM: 'Cameroon',
-  CA: 'Canada',
-  CV: 'Cape Verde',
-  KY: 'Cayman Islands',
-  CF: 'Central African Republic',
-  TD: 'Chad',
-  CL: 'Chile',
-  CN: 'China',
-  CX: 'Christmas Island',
-  CC: 'Cocos (Keeling) Islands',
-  CO: 'Colombia',
-  KM: 'Comoros',
-  CG: 'Congo',
-  CD: 'Congo, Democratic Republic',
-  CK: 'Cook Islands',
-  CR: 'Costa Rica',
-  CI: "Cote D'Ivoire",
-  HR: 'Croatia',
-  CU: 'Cuba',
-  CY: 'Cyprus',
-  CZ: 'Czech Republic',
-  DK: 'Denmark',
-  DJ: 'Djibouti',
-  DM: 'Dominica',
-  DO: 'Dominican Republic',
-  EC: 'Ecuador',
-  EG: 'Egypt',
-  SV: 'El Salvador',
-  GQ: 'Equatorial Guinea',
-  ER: 'Eritrea',
-  EE: 'Estonia',
-  ET: 'Ethiopia',
-  FK: 'Falkland Islands (Malvinas)',
-  FO: 'Faroe Islands',
-  FJ: 'Fiji',
-  FI: 'Finland',
-  FR: 'France',
-  GF: 'French Guiana',
-  PF: 'French Polynesia',
-  TF: 'French Southern Territories',
-  GA: 'Gabon',
-  GM: 'Gambia',
-  GE: 'Georgia',
-  DE: 'Germany',
-  GH: 'Ghana',
-  GI: 'Gibraltar',
-  GR: 'Greece',
-  GL: 'Greenland',
-  GD: 'Grenada',
-  GP: 'Guadeloupe',
-  GU: 'Guam',
-  GT: 'Guatemala',
-  GG: 'Guernsey',
-  GN: 'Guinea',
-  GW: 'Guinea-Bissau',
-  GY: 'Guyana',
-  HT: 'Haiti',
-  HM: 'Heard Island & Mcdonald Islands',
-  VA: 'Holy See (Vatican City State)',
-  HN: 'Honduras',
-  HK: 'Hong Kong',
-  HU: 'Hungary',
-  IS: 'Iceland',
-  IN: 'India',
-  ID: 'Indonesia',
-  IR: 'Iran, Islamic Republic Of',
-  IQ: 'Iraq',
-  IE: 'Ireland',
-  IM: 'Isle Of Man',
-  IL: 'Israel',
-  IT: 'Italy',
-  JM: 'Jamaica',
-  JP: 'Japan',
-  JE: 'Jersey',
-  JO: 'Jordan',
-  KZ: 'Kazakhstan',
-  KE: 'Kenya',
-  KI: 'Kiribati',
-  KR: 'Korea',
-  KW: 'Kuwait',
-  KG: 'Kyrgyzstan',
-  LA: "Lao People's Democratic Republic",
-  LV: 'Latvia',
-  LB: 'Lebanon',
-  LS: 'Lesotho',
-  LR: 'Liberia',
-  LY: 'Libyan Arab Jamahiriya',
-  LI: 'Liechtenstein',
-  LT: 'Lithuania',
-  LU: 'Luxembourg',
-  MO: 'Macao',
-  MK: 'Macedonia',
-  MG: 'Madagascar',
-  MW: 'Malawi',
-  MY: 'Malaysia',
-  MV: 'Maldives',
-  ML: 'Mali',
-  MT: 'Malta',
-  MH: 'Marshall Islands',
-  MQ: 'Martinique',
-  MR: 'Mauritania',
-  MU: 'Mauritius',
-  YT: 'Mayotte',
-  MX: 'Mexico',
-  FM: 'Micronesia, Federated States Of',
-  MD: 'Moldova',
-  MC: 'Monaco',
-  MN: 'Mongolia',
-  ME: 'Montenegro',
-  MS: 'Montserrat',
-  MA: 'Morocco',
-  MZ: 'Mozambique',
-  MM: 'Myanmar',
-  NA: 'Namibia',
-  NR: 'Nauru',
-  NP: 'Nepal',
-  NL: 'Netherlands',
-  AN: 'Netherlands Antilles',
-  NC: 'New Caledonia',
-  NZ: 'New Zealand',
-  NI: 'Nicaragua',
-  NE: 'Niger',
-  NG: 'Nigeria',
-  NU: 'Niue',
-  NF: 'Norfolk Island',
-  MP: 'Northern Mariana Islands',
-  NO: 'Norway',
-  OM: 'Oman',
-  PK: 'Pakistan',
-  PW: 'Palau',
-  PS: 'Palestinian Territory, Occupied',
-  PA: 'Panama',
-  PG: 'Papua New Guinea',
-  PY: 'Paraguay',
-  PE: 'Peru',
-  PH: 'Philippines',
-  PN: 'Pitcairn',
-  PL: 'Poland',
-  PT: 'Portugal',
-  PR: 'Puerto Rico',
-  QA: 'Qatar',
-  RE: 'Reunion',
-  RO: 'Romania',
-  RU: 'Russian Federation',
-  RW: 'Rwanda',
-  BL: 'Saint Barthelemy',
-  SH: 'Saint Helena',
-  KN: 'Saint Kitts And Nevis',
-  LC: 'Saint Lucia',
-  MF: 'Saint Martin',
-  PM: 'Saint Pierre And Miquelon',
-  VC: 'Saint Vincent And Grenadines',
-  WS: 'Samoa',
-  SM: 'San Marino',
-  ST: 'Sao Tome And Principe',
-  SA: 'Saudi Arabia',
-  SN: 'Senegal',
-  RS: 'Serbia',
-  SC: 'Seychelles',
-  SL: 'Sierra Leone',
-  SG: 'Singapore',
-  SK: 'Slovakia',
-  SI: 'Slovenia',
-  SB: 'Solomon Islands',
-  SO: 'Somalia',
-  ZA: 'South Africa',
-  GS: 'South Georgia And Sandwich Isl.',
-  ES: 'Spain',
-  LK: 'Sri Lanka',
-  SD: 'Sudan',
-  SR: 'Suriname',
-  SJ: 'Svalbard And Jan Mayen',
-  SZ: 'Swaziland',
-  SE: 'Sweden',
-  CH: 'Switzerland',
-  SY: 'Syrian Arab Republic',
-  TW: 'Taiwan',
-  TJ: 'Tajikistan',
-  TZ: 'Tanzania',
-  TH: 'Thailand',
-  TL: 'Timor-Leste',
-  TG: 'Togo',
-  TK: 'Tokelau',
-  TO: 'Tonga',
-  TT: 'Trinidad And Tobago',
-  TN: 'Tunisia',
-  TR: 'Turkey',
-  TM: 'Turkmenistan',
-  TC: 'Turks And Caicos Islands',
-  TV: 'Tuvalu',
-  UG: 'Uganda',
-  UA: 'Ukraine',
-  AE: 'United Arab Emirates',
-  GB: 'United Kingdom',
-  US: 'United States',
-  UM: 'United States Outlying Islands',
-  UY: 'Uruguay',
-  UZ: 'Uzbekistan',
-  VU: 'Vanuatu',
-  VE: 'Venezuela',
-  VN: 'Viet Nam',
-  VG: 'Virgin Islands, British',
-  VI: 'Virgin Islands, U.S.',
-  WF: 'Wallis And Futuna',
-  EH: 'Western Sahara',
-  YE: 'Yemen',
-  ZM: 'Zambia',
-  ZW: 'Zimbabwe',
-}
-
 function getCountryName(code) {
-  return isoCountries[code] || code
+  if (!code) return ''
+  const name = regionDisplay.value.of(code)
+  return name || code
 }

 function getCountryFlag(code) {
@@ -685,13 +449,6 @@ function joinServer(server) {
  margin-bottom: 40px;
 }

-.servers-title {
-  font-size: 2.5rem;
-  font-weight: 700;
-  margin: 0 0 10px 0;
-  color: var(--text-color, #1a1a1a);
-}
-
 .servers-subtitle {
  font-size: 1.1rem;
  color: var(--text-muted, #666);
@@ -699,15 +456,17 @@ function joinServer(server) {
 }

 .servers-filters {
-  background: var(--card-bg, #f9f9f9);
-  border: 1px solid var(--border-color, #e0e0e0);
-  border-radius: 8px;
-  padding: 20px;
+  background: var(--filters-bg);
+  border: 1px solid var(--filters-border);
+  border-radius: 12px;
+  padding: 24px;
  margin-bottom: 30px;
+  box-shadow: var(--filters-shadow);
+  backdrop-filter: blur(10px);
 }

 .filter-group {
-  margin-bottom: 15px;
+  margin-bottom: 20px;
 }

 .filter-group:last-child {
@@ -718,30 +477,86 @@ function joinServer(server) {
  width: 100%;
  padding: 12px 16px;
  font-size: 1rem;
-  border: 1px solid var(--border-color, #d0d0d0);
-  border-radius: 6px;
+  border: 2px solid var(--border-color, #e0e0e0);
+  border-radius: 8px;
  background: var(--input-bg, #fff);
  color: var(--text-color, #1a1a1a);
-  transition: border-color 0.2s;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  font-weight: 500;
 }

 .search-input:focus {
  outline: none;
-  border-color: var(--primary-color, #5d9cec);
+  border-color: #ff6a00;
+  box-shadow: 0 0 0 3px rgba(255, 106, 0, 0.1);
+}
+
+.search-input::placeholder {
+  color: var(--placeholder-color, var(--text-muted, #999));
+}
+
+.filter-heading {
+  display: block;
+  margin-bottom: 12px;
+  font-size: 0.9rem;
+  font-weight: 600;
+  color: var(--text-color, #1a1a1a);
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  opacity: 0.7;
 }

 .filter-label {
  display: inline-flex;
  align-items: center;
-  margin-right: 20px;
+  margin-right: 24px;
+  margin-bottom: 12px;
  font-size: 0.95rem;
  cursor: pointer;
-  color: var(--text-color, #1a1a1a);
+  font-weight: 500;
+  transition: all 0.2s ease;
+}
+
+.filter-label:hover {
+  color: #ff6a00;
 }

 .filter-label input[type='checkbox'] {
-  margin-right: 6px;
+  appearance: none;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  width: 20px;
+  height: 20px;
+  margin-right: 10px;
  cursor: pointer;
+  border: 2px solid var(--checkbox-border, #d0d0d0);
+  border-radius: 6px;
+  background: var(--checkbox-bg, #fff);
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  flex-shrink: 0;
+  position: relative;
+}
+
+.filter-label input[type='checkbox']:hover {
+  border-color: #ff6a00;
+  box-shadow: 0 0 0 3px var(--checkbox-hover-shadow, rgba(255, 106, 0, 0.1));
+}
+
+.filter-label input[type='checkbox']:checked {
+  background: linear-gradient(135deg, #ff6a00 0%, #ff8c26 100%);
+  border-color: #ff6a00;
+  box-shadow: 0 2px 8px rgba(255, 106, 0, 0.3);
+}
+
+.filter-label input[type='checkbox']:checked::after {
+  content: '✓';
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  color: white;
+  font-weight: bold;
+  font-size: 12px;
 }

 .server-count {
@@ -1130,20 +945,27 @@ function joinServer(server) {
  color: var(--text-muted, #666);
 }

-/* Dark mode support */
+:global(.dark) .servers-container,
@media (prefers-color-scheme: dark) {
  .servers-container {
    --text-color: #e0e0e0;
-    --text-muted: #999;
+    --text-muted: #999999;
    --card-bg: #2a2a2a;
    --border-color: #404040;
    --input-bg: #1a1a1a;
    --tag-bg: #404040;
    --primary-color: #5d9cec;
    --header-bg: #1f1f1f;
-    --hover-bg: #333;
+    --hover-bg: #333333;
    --active-bg: #2a3f5f;
    --details-bg: #252525;
+    --filters-bg: linear-gradient(135deg, rgba(30, 30, 30, 0.95) 0%, rgba(20, 20, 20, 0.98) 100%);
+    --filters-border: rgba(255, 106, 0, 0.2);
+    --filters-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+    --checkbox-bg: rgba(255, 255, 255, 0.05);
+    --checkbox-border: rgba(255, 255, 255, 0.15);
+    --checkbox-hover-shadow: rgba(255, 106, 0, 0.15);
+    --placeholder-color: #666666;
  }
 }

@@ -1153,14 +975,6 @@ function joinServer(server) {
    padding: 15px;
  }

-  .servers-title {
-    font-size: 2rem;
-  }
-
-  .servers-subtitle {
-    font-size: 1rem;
-  }
-
  .servers-filters {
    padding: 15px;
  }
@@ -1199,3 +1013,23 @@ function joinServer(server) {
  }
 }
 </style>
+  
+    /* Light theme defaults */
+    --text-color: #1a1a1a;
+    --text-muted: #666666;
+    --card-bg: #ffffff;
+    --border-color: #e0e0e0;
+    --input-bg: #ffffff;
+    --tag-bg: #e8e8e8;
+    --primary-color: #5d9cec;
+    --header-bg: #f5f5f5;
+    --hover-bg: #f9f9f9;
+    --active-bg: #f0f7ff;
+    --details-bg: #fafafa;
+    --filters-bg: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(249, 249, 249, 0.95) 100%);
+    --filters-border: var(--border-color, #e0e0e0);
+    --filters-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
+    --checkbox-bg: #ffffff;
+    --checkbox-border: #d0d0d0;
+    --checkbox-hover-shadow: rgba(255, 106, 0, 0.1);
+    --placeholder-color: var(--text-muted, #999999);
@@ -7,6 +7,8 @@ const servers = ref([])

 // Backend endpoints (use null to fall back to synthetic data)
 const STATS_ENDPOINT = null // e.g., 'https://backend.beammp.com/stats-timeseries'
+const MOD_RELEASES_ENDPOINT = 'https://api.github.com/repos/BeamMP/BeamMP/releases' // e.g., 'https://backend.beammp.com/releases'
+const SERVER_RELEASES_ENDPOINT = 'https://api.github.com/repos/BeamMP/BeamMP-Server/releases' // e.g., 'https://backend.beammp.com/server-releases'

 // All-time high tracking
 const peakPlayers = ref(0)
@@ -33,14 +35,52 @@ const selectedRangeKey = ref('7d')
 const selectedRange = computed(() => ranges.find((r) => r.key === selectedRangeKey.value))

 // Release markers (fill with real dates/labels as desired)
-const releases = ref([
-  { date: '2025-11-24', label: 'v4.0.0' },
-  { date: '2025-11-27', label: 'v4.1.0' },
-  { date: '2025-11-29', label: 'v4.2.0' },
+const mod_releases = ref([
+  //{ date: '2025-11-24', label: 'v4.0.0' },
+  //{ date: '2025-11-27', label: 'v4.1.0' },
+  //{ date: '2025-11-29', label: 'v4.2.0' },
+])
+
+const server_releases = ref([
+  //{ date: '2025-11-25', label: 'v4.0.0' },
+  //{ date: '2025-11-28', label: 'v4.1.0' },
+  //{ date: '2025-11-30', label: 'v4.2.0' },
 ])

 // Load time-series from backend or generate synthetic
 async function loadTimeSeries(points, stepHours) {
+  if (MOD_RELEASES_ENDPOINT) {
+    try {
+      const res = await fetch(MOD_RELEASES_ENDPOINT)
+      if (res.ok) {
+        const r = await res.json()
+        r.forEach((rel) => {
+          const existing = mod_releases.value.find((e) => e.label === rel.tag_name)
+          if (!existing) {
+            mod_releases.value.push({ date: rel.published_at, label: rel.tag_name })
+          }
+        })
+      }
+    } catch (e) {
+      console.error('Failed to load releases:', e)
+    }
+  }
+  if (SERVER_RELEASES_ENDPOINT) {
+    try {
+      const res = await fetch(SERVER_RELEASES_ENDPOINT)
+      if (res.ok) {
+        const r = await res.json()
+        r.forEach((rel) => {
+          const existing = server_releases.value.find((e) => e.label === rel.tag_name)
+          if (!existing) {
+            server_releases.value.push({ date: rel.published_at, label: rel.tag_name })
+          }
+        })
+      }
+    } catch (e) {
+      console.error('Failed to load releases:', e)
+    }
+  }
  if (STATS_ENDPOINT) {
    try {
      const res = await fetch(STATS_ENDPOINT)
@@ -256,7 +296,7 @@ function drawPlayers() {
  ctx.strokeStyle = 'rgba(255,106,0,0.8)'
  ctx.fillStyle = 'rgba(255,106,0,0.9)'
  ctx.lineWidth = 1
-  const rels = (releases.value || [])
+  const rels = (mod_releases.value || [])
    .map((r) => ({ ...r, time: new Date(r.date).getTime() }))
    .filter((r) => !isNaN(r.time) && r.time >= minT && r.time <= maxT)
  releaseMarkersPlayers = []
@@ -380,7 +420,7 @@ function drawServers() {
  ctx.strokeStyle = 'rgba(255,106,0,0.8)'
  ctx.fillStyle = 'rgba(255,106,0,0.9)'
  ctx.lineWidth = 1
-  const rels = (releases.value || [])
+  const rels = (server_releases.value || [])
    .map((r) => ({ ...r, time: new Date(r.date).getTime() }))
    .filter((r) => !isNaN(r.time) && r.time >= minT && r.time <= maxT)
  releaseMarkersServers = []
@@ -525,16 +565,15 @@ function onLeaveServers() {
  <section class="max-w-6xl mx-auto px-4 py-10">
    <div class="mb-8">
      <h1 class="text-4xl font-extrabold tracking-tight text-neutral-900 dark:text-white">
-        BeamMP Statistics
+        {{ $t('message.statistics.title') }}
      </h1>
      <p class="mt-3 text-neutral-600 dark:text-neutral-300 max-w-2xl">
-        Live snapshot metrics from active servers and a player volume timeline. Releases can be
-        annotated on the chart.
+        {{ $t('message.statistics.description') }}
      </p>
    </div>

    <div v-if="loading" class="py-16 text-center text-neutral-600 dark:text-neutral-300">
-      Loading…
+      {{ $t('message.statistics.loading') }}
    </div>
    <div v-else-if="error" class="py-16 text-center text-red-600">{{ error }}</div>

@@ -545,29 +584,29 @@ function onLeaveServers() {
          class="rounded-lg border border-neutral-200 dark:border-neutral-800 p-4 bg-white/70 dark:bg-neutral-900/60"
        >
          <div class="text-xs uppercase tracking-wide text-neutral-500 dark:text-neutral-400">
-            Current Players
+            {{ $t('message.statistics.current_players') }}
          </div>
          <div class="mt-1 text-3xl font-semibold">{{ totalPlayers }}</div>
          <div class="mt-1 text-xs text-neutral-500 dark:text-neutral-400">
-            Peak: {{ peakPlayers }}
+            {{ $t('message.statistics.peak', { count: peakPlayers }) }}
          </div>
        </div>
        <div
          class="rounded-lg border border-neutral-200 dark:border-neutral-800 p-4 bg-white/70 dark:bg-neutral-900/60"
        >
          <div class="text-xs uppercase tracking-wide text-neutral-500 dark:text-neutral-400">
-            Current Servers
+            {{ $t('message.statistics.current_servers') }}
          </div>
          <div class="mt-1 text-3xl font-semibold">{{ serverCount }}</div>
          <div class="mt-1 text-xs text-neutral-500 dark:text-neutral-400">
-            Peak: {{ peakServers }}
+            {{ $t('message.statistics.peak', { count: peakServers }) }}
          </div>
        </div>
        <div
          class="rounded-lg border border-neutral-200 dark:border-neutral-800 p-4 bg-white/70 dark:bg-neutral-900/60"
        >
          <div class="text-xs uppercase tracking-wide text-neutral-500 dark:text-neutral-400">
-            Avg Players / Server
+            {{ $t('message.statistics.avg_players_per_server') }}
          </div>
          <div class="mt-1 text-3xl font-semibold">{{ avgPlayers }}</div>
        </div>
@@ -579,7 +618,7 @@ function onLeaveServers() {
          class="rounded-lg border border-neutral-200 dark:border-neutral-800 p-3 bg-white/70 dark:bg-neutral-900/60"
        >
          <div class="text-xs uppercase tracking-wide text-neutral-500 dark:text-neutral-400">
-            Official Servers
+            {{ $t('message.statistics.official_servers') }}
          </div>
          <div class="mt-1 text-2xl font-semibold">{{ officialCount }}</div>
        </div>
@@ -587,7 +626,7 @@ function onLeaveServers() {
          class="rounded-lg border border-neutral-200 dark:border-neutral-800 p-3 bg-white/70 dark:bg-neutral-900/60"
        >
          <div class="text-xs uppercase tracking-wide text-neutral-500 dark:text-neutral-400">
-            Partner Servers
+            {{ $t('message.statistics.partner_servers') }}
          </div>
          <div class="mt-1 text-2xl font-semibold">{{ partnerCount }}</div>
        </div>
@@ -598,7 +637,7 @@ function onLeaveServers() {
        class="rounded-lg border border-neutral-200 dark:border-neutral-800 p-4 bg-white/70 dark:bg-neutral-900/60"
      >
        <div class="flex items-center justify-between gap-4 mb-3">
-          <h2 class="text-lg font-semibold">Player Volume Over Time</h2>
+          <h2 class="text-lg font-semibold">{{ $t('message.statistics.player_volume') }}</h2>
          <div class="flex items-center gap-2">
            <button
              v-for="r in ranges"
@@ -646,8 +685,7 @@ function onLeaveServers() {
          </div>
        </div>
        <p class="mt-2 text-xs text-neutral-500 dark:text-neutral-400">
-          Release markers are shown as orange vertical lines (e.g., v3.0.0, v4.0.0). Hover over data
-          points for details.
+          {{ $t('message.statistics.hint') }}
        </p>
      </div>

@@ -656,7 +694,7 @@ function onLeaveServers() {
        class="rounded-lg border border-neutral-200 dark:border-neutral-800 p-4 bg-white/70 dark:bg-neutral-900/60"
      >
        <div class="flex items-center justify-between gap-4 mb-3">
-          <h2 class="text-lg font-semibold">Server Count Over Time</h2>
+          <h2 class="text-lg font-semibold">{{ $t('message.statistics.server_volume') }}</h2>
        </div>
        <div class="relative">
          <canvas
@@ -689,7 +727,7 @@ function onLeaveServers() {
          </div>
        </div>
        <p class="mt-2 text-xs text-neutral-500 dark:text-neutral-400">
-          Server count follows similar trends. Release markers indicate major version launches.
+          {{ $t('message.statistics.server_hint') }}
        </p>
      </div>
    </div>
@@ -5,24 +5,12 @@ export default {
  theme: {
    extend: {
      colors: {
-        'beammp-orange': {
-          DEFAULT: '#F36D24', // Base color
-        },
-        'beammp-white': {
-          DEFAULT: '#FFFFFF', // Base color
-        },
-        'beammp-black': {
-          DEFAULT: '#000000', // Base color
-        },
-        'beammp-gray': {
-          DEFAULT: '#333333', // Base color
-        },
-        'beammp-green': {
-          DEFAULT: '#1D9749', // Base color
-        },
-        'beammp-blue': {
-          DEFAULT: '#4470B6', // Base color
-        },
+        'beammp-orange': '#F36D24',
+        'beammp-white': '#FFFFFF',
+        'beammp-black': '#000000',
+        'beammp-gray': '#333333',
+        'beammp-green': '#1D9749',
+        'beammp-blue': '#4470B6',
      },
    },
  },
@@ -11,7 +11,4 @@ export default defineConfig({
      '@': path.resolve(__dirname, './src'),
    },
  },
-  server: {
-    port: 3000,
-  },
 })
Author	SHA1	Message	Date
Starystars67	4331a58e50	Update sync text, theme icons, communities link Add responsive icons for system theme selection (Smartphone, Tablet, Monitor) in ThemeToggle.vue; add an "Explore Communities" CTA to Home.vue that links to the localized communities page. Reduce the advertised sync update rate from ~100 to ~50 times per second across multiple locale files (en, de, es, it, ru). Also update the English freeroam label/description to "Freeroam & Custom Servers" with details about custom scripts/maps/mods. Note: fr.json contains unresolved merge conflict markers for the sync description and needs manual resolution.	2026-02-21 19:07:30 +00:00
Starystars67	214ccd10d1	Update logo URL for Iceline Hosting	2026-01-30 22:00:47 +00:00
3v.	c6fb3331c2	Update localisation for French language	2026-01-30 21:46:00 +00:00
Starystars67	391c8bc14e	Change Docker tag from 'latest' to 'prod'	2026-01-30 21:38:33 +00:00
Starystars67	84d63cb84d	Add condition for prerelease in staging workflow	2026-01-30 21:37:47 +00:00
Starystars67	e95c68165a	Update release workflow for Docker registry integration	2026-01-30 21:37:08 +00:00
Starystars67	070e31dbec	Update staging workflow for Docker image release	2026-01-30 21:32:58 +00:00
Starystars67	c9fc193aa3	change wording	2025-12-31 15:08:57 +00:00
Starystars67	e7f80d83a6	update server list image + bump version number	2025-12-31 13:02:38 +00:00
Starystars67	9d9c10179c	fix: nav not opening on screen sizes between md and xl	2025-12-31 12:51:50 +00:00
Starystars67	e2a1b4a598	fix: white fade on hero image + update landing image + HQ loader after.	2025-12-31 12:49:10 +00:00
Starystars67	ca7b7e9d1b	minor style changes	2025-12-29 23:36:46 +00:00
Starystars67	7e53a63455	Correct servers page for darkmode & improve some wording.	2025-12-29 22:37:55 +00:00
Starystars67	f2aec71b6e	adjust color for partners on light mode	2025-12-29 19:47:43 +00:00
Starystars67	c317aa4e37	Add Initial Iceline Hosting partner	2025-12-29 19:08:11 +00:00
Starystars67	df371568c7	add GH release points to timeline & fix padding of nav and logo	2025-12-29 18:52:34 +00:00
Starystars67	6ed1bf7352	fixes: various bits fixed / improved based on fedback	2025-12-29 16:16:17 +00:00
Starystars67	31a179bc45	Update README.md	2025-12-24 13:08:35 +00:00
Starystars67	cf3c13c303	Update README.md	2025-12-24 13:07:48 +00:00
Starystars67	476211b220	Update Wabbanode Link	2025-12-24 11:49:54 +00:00
Starystars67	625e5fd596	fix another link	2025-12-23 14:33:23 +00:00
Starystars67	7f8633ab09	other small fixes	2025-12-23 14:24:11 +00:00
Starystars67	176b5c2934	Fix small link issue	2025-12-23 14:19:54 +00:00
Starystars67	cf53167cec	Forgot to bump version	2025-12-23 14:08:10 +00:00
Starystars67	171bb3f018	Update Linux Builds	2025-12-23 14:06:44 +00:00
Starystars67	6e6470086e	Update Zap-Hosting Link	2025-12-23 14:06:35 +00:00
Starystars67	b171d836ad	Update Zap-Hosting Logo	2025-12-23 13:55:39 +00:00
Starystars67	f3315d443f	Add Wabbanode	2025-12-23 13:18:36 +00:00
Starystars67	c09b0cc69f	randomise partners list using date as the seed	2025-12-23 13:00:33 +00:00
Starystars67	88a3f10192	minor fixes	2025-12-23 12:52:44 +00:00
Starystars67	952d35535f	Correct Zap-Hosting spelling	2025-12-23 12:33:43 +00:00
Starystars67	600123dd8b	Add noscript site as well	2025-12-23 12:21:44 +00:00
Starystars67	b3d6f59aaf	Lots of changes & improvements	2025-12-23 11:51:13 +00:00
Starystars67	07a84f25d5	Fix language selection to persist between pages and allow for sharing of specfic pages in chosen lang	2025-12-20 17:28:21 +00:00
Starystars67	f3269d0bee	minor clean up and attempt to fix coloring	2025-12-20 02:34:26 +00:00
Starystars67	cdbf8f991c	temp noscript addition	2025-12-20 02:26:44 +00:00
Starystars67	04fb9ba50f	stop x scroll..	2025-12-20 02:16:32 +00:00
Starystars67	2d83ba9dfd	fix height to match theme toggle	2025-12-20 02:13:41 +00:00
Starystars67	c0a10c4710	Fix socials and linux icon	2025-12-20 02:09:12 +00:00
Starystars67	1e8489018d	missed detail	2025-12-20 01:42:52 +00:00
Starystars67	ab6c93791f	Update package.json	2025-12-20 01:22:09 +00:00
Starystars67	acc1377bbb	Add initial templates for additional languages Co-Authored-By: Tixx <83774803+WiserTixx@users.noreply.github.com>	2025-12-20 01:20:03 +00:00
Starystars67	3873388b48	Added i18n Translation Support Co-Authored-By: Tixx <83774803+WiserTixx@users.noreply.github.com>	2025-12-20 00:28:36 +00:00
Starystars67	0d4d34634a	put correct servers address.	2025-11-30 17:41:15 +00:00
Starystars67	d5b7c52641	various changes	2025-11-30 17:39:52 +00:00
Starystars67	9c85fb2f10	Add GH actions files.	2025-11-30 16:08:36 +00:00
				`@@ -0,0 +1 @@`
				`export { default as Checkbox } from "./Checkbox.vue";`