fix flags for languages

Updated link for host havoc

.dockerignore

@@ -1 +0,0 @@
-frontend

.github/workflows/release.yml

@@ -1,31 +1,34 @@
 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
+  release:
+    types: [published]
 
 jobs:
   docker:
+    if: "!github.event.release.prerelease"
     runs-on: ubuntu-latest
     steps:
-      -
-        name: Set up QEMU
+      - 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: Set up QEMU
         uses: docker/setup-qemu-action@v3
-      -
-        name: Set up Docker Buildx
+      - name: Set up Docker Buildx
         uses: docker/setup-buildx-action@v3
-      -
-        name: Login to Docker Registry
+        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
+      - name: Build and push
         uses: docker/build-push-action@v5
         with:
           push: true
-          tags: registry.beammp.com/beammp/website:${{ github.ref_name }}
+          tags: ${{ secrets.REGISTRY_URL }}/beammp/website:${{ github.REF_NAME }}, ${{ secrets.REGISTRY_URL }}/beammp/website:latest, ${{ secrets.REGISTRY_URL }}/beammp/website:production

.github/workflows/staging.yml

@@ -1,30 +1,34 @@
-name: Build Docker image and push to staging
+name: Build Docker image and push to prerelease
 
 on:
-  push:
-    branches:
-      - "dev"
+  release:
+    types: [published]
 
 jobs:
   docker:
+    if: github.event.release.prerelease
     runs-on: ubuntu-latest
     steps:
-      -
-        name: Set up QEMU
+      - 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: Set up QEMU
         uses: docker/setup-qemu-action@v3
-      -
-        name: Set up Docker Buildx
+      - name: Set up Docker Buildx
         uses: docker/setup-buildx-action@v3
-      -
-        name: Login to Docker Registry
+        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
+      - name: Build and push
         uses: docker/build-push-action@v5
         with:
           push: true
-          tags: registry.beammp.com/beammp/website:staging
+          tags: ${{ secrets.REGISTRY_URL }}/beammp/website:${{ github.REF_NAME }}, ${{ secrets.REGISTRY_URL }}/beammp/website:latest

.gitignore

@@ -102,3 +102,30 @@ dist
 
 # TernJS port file
 .tern-port
+*.zip
+
+# Logs
+frontend/logs
+frontend/*.log
+frontend/npm-debug.log*
+frontend/yarn-debug.log*
+frontend/yarn-error.log*
+frontend/pnpm-debug.log*
+frontend/lerna-debug.log*
+
+frontend/node_modules
+frontend/dist
+frontend/dist-ssr
+frontend/*.local
+
+# Editor directories and files
+frontend/.vscode/*
+frontend/!.vscode/extensions.json
+frontend/.idea
+frontend/.DS_Store
+frontend/*.suo
+frontend/*.ntvs*
+frontend/*.njsproj
+frontend/*.sln
+frontend/*.sw?
+.DS_Store

.prettierignore

@@ -0,0 +1,6 @@
+node_modules
+dist
+*.log
+.DS_Store
+pnpm-lock.yaml
+package-lock.json

.prettierrc

@@ -0,0 +1,11 @@
+{
+  "semi": false,
+  "singleQuote": true,
+  "tabWidth": 2,
+  "useTabs": false,
+  "trailingComma": "es5",
+  "printWidth": 100,
+  "arrowParens": "always",
+  "endOfLine": "lf",
+  "vueIndentScriptAndStyle": false
+}

.vscode/settings.json

@@ -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",
+    "Русский"
+  ]
+}

Dockerfile

@@ -1,25 +1,30 @@
-FROM node:18.16.0-alpine3.17
+# Step 1: Build stage
+FROM node:lts-alpine AS build
 
-# Create app directory
 WORKDIR /app
+COPY package*.json ./
+RUN npm ci
+COPY . .
+ENV NODE_ENV=production
+RUN npm run build
 
-RUN apk --no-cache add curl
+# Step 2: Serve stage
+FROM nginx:stable
 
-# Install app dependencies
-# A wildcard is used to ensure both package.json AND package-lock.json are copied
-# where available (npm@5+)
-COPY package*.json /app
+# Remove default nginx static assets
+RUN rm -rf /usr/share/nginx/html/*
 
-# General Install of Deps
-# RUN npm install
-# If you are building your code for production
-RUN npm ci --only=production
+# Copy built files from the previous stage
+COPY --from=build /app/dist /usr/share/nginx/html
 
-# Bundle app source
-COPY . /app
+# Copy secure nginx configs
+COPY nginx.main.conf /etc/nginx/nginx.conf
+COPY nginx.conf /etc/nginx/conf.d/default.conf
 
-EXPOSE 3599
+# Use non-root user for security
+USER nginx
 
-HEALTHCHECK CMD curl --fail http://localhost:3599/ping || exit 1
+# Expose port 80
+EXPOSE 80
 
-CMD [ "node", "index.js" ]
+CMD ["nginx", "-g", "daemon off;"]

README.md

@@ -1 +1,112 @@
-# BeamMP-Website
+# BeamMP Website
+
+This repository is home for the BeamMP website. The website features support for translations too now!
+
+**Tech Stack**
+- **Framework:** Vue 3 (`vue`, `vue-router`)
+- **Build:** Vite 7 (`vite`, `@vitejs/plugin-vue`)
+- **Styling:** Tailwind CSS 4 + `tailwindcss-animate`, `tailwind-merge`
+- **UI Icons/Utils:** `lucide-vue-next`, `clsx`, `class-variance-authority`
+- **Radix-style Components:** `reka-ui` through `shadcn-vue`
+- **Composable utilities:** `@vueuse/core`
+
+**Theming and Colour Guide**
+- BeamMP Orange `#F36D24`
+- BeamMP Blue `#4470B6`
+- BeamMP Green `#1D9749`
+- Gray `#333333`
+- Black `#000000`
+- White `#FFFFFF`
+
+## Getting Started
+
+Prerequisites:
+- Node.js 22+
+- pnpm, npm, or yarn (examples use npm)
+
+Install dependencies and run the dev server:
+
+```powershell
+# from this folder (repo root)
+npm install
+npm run dev
+```
+
+Build for production and preview locally:
+
+```powershell
+npm run build
+npm run preview
+```
+
+Vite will print the local dev URL (usually `http://localhost:5173`).
+
+## Project Scripts
+- `npm run dev`: Start Vite development server
+- `npm run build`: Production build
+- `npm run preview`: Preview the production build locally
+- `npm run lint`: Lint and auto-fix Vue/JS files with ESLint
+- `npm run format`: Format all source files with Prettier
+
+## Directory Overview
+- `src/` – App source (styles, components, pages, routing)
+	- `src/components/ui/` – UI components (e.g., `button`, `navigation-menu`)
+	- `src/lib/` – Utilities and helpers
+	- `routes/` - vue-router routes
+	- `views/` - Pages of the website
+- `index.html` – Vite HTML entry
+- `tailwind.config.js` – Tailwind configuration
+- `vite.config.js` – Vite configuration
+- `components.json` – Shadcn-Vue component registry
+
+## Contributing
+We welcome contributions! Here’s how to get started.
+
+### 1) Pick an Issue or Open One
+- Browse issues or propose an enhancement/bug. Share context and repro steps.
+
+### 2) Create a Branch
+- Use a descriptive branch name:
+	- `feature/<short-description>`
+	- `fix/<short-description>`
+	- `docs/<short-description>`
+
+### 3) Dev Environment
+- Install deps with `npm install` and run `npm run dev`.
+- Keep changes scoped and focused; avoid drive-by refactors unless agreed.
+
+### 4) Code Style & Patterns
+- **Vue 3 + `<script setup>`** preferred for new components.
+- **Linting**: Run `npm run lint` before committing to catch errors. ESLint is configured for Vue 3 best practices.
+- **Formatting**: Run `npm run format` to auto-format code with Prettier (or use an editor extension).
+- **Type safety**: If/when TypeScript is introduced, prefer explicit props and emits.
+- **Tailwind**: Use utility classes; extract variants with `class-variance-authority` when patterns repeat.
+- **Accessibility**: Prefer accessible primitives (e.g., `reka-ui`) and keyboard support.
+- **File naming**: `PascalCase.vue` for components; avoid one-letter variable names.
+
+### 5) Testing & Checks
+- Run the app locally and verify core flows.
+- Ensure components render on both light/dark themes if relevant.
+- If you add dependencies, update this README and relevant configs.
+
+### 6) Commit & PR
+- Write clear, imperative commit messages, e.g., `feat: add NavigationMenu component`.
+- 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.
+
+
+# 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.
+
+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) |

components.json

@@ -0,0 +1,21 @@
+{
+  "$schema": "https://shadcn-vue.com/schema.json",
+  "style": "new-york",
+  "typescript": false,
+  "tailwind": {
+    "config": "tailwind.config.js",
+    "css": "src/style.css",
+    "baseColor": "gray",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "iconLibrary": "lucide",
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "composables": "@/composables"
+  },
+  "registries": {}
+}

docker-compose.yml

@@ -0,0 +1,8 @@
+services:
+  website:
+    build:
+      dockerfile: Dockerfile
+    container_name: website
+    restart: unless-stopped
+    ports:
+      - "127.0.0.1:3000:80"

eslint.config.js

@@ -0,0 +1,74 @@
+import pluginVue from 'eslint-plugin-vue'
+import js from '@eslint/js'
+import prettier from 'eslint-plugin-prettier'
+import configPrettier from 'eslint-config-prettier'
+
+export default [
+  // Ignore patterns (replaces .eslintignore)
+  {
+    ignores: ['node_modules', 'dist', '*.log', '.DS_Store'],
+  },
+
+  // Base JavaScript config
+  js.configs.recommended,
+
+  // Vue 3 recommended config
+  ...pluginVue.configs['flat/recommended'],
+
+  // Global configuration
+  {
+    plugins: {
+      prettier,
+    },
+    languageOptions: {
+      ecmaVersion: 'latest',
+      sourceType: 'module',
+      globals: {
+        // Browser globals
+        window: 'readonly',
+        document: 'readonly',
+        navigator: 'readonly',
+        console: 'readonly',
+        localStorage: 'readonly',
+        fetch: 'readonly',
+        alert: 'readonly',
+        prompt: 'readonly',
+        getComputedStyle: 'readonly',
+        // Node globals
+        process: 'readonly',
+        __dirname: 'readonly',
+        __filename: 'readonly',
+        module: 'readonly',
+        require: 'readonly',
+      },
+    },
+    rules: {
+      // Prettier integration
+      ...configPrettier.rules,
+      'prettier/prettier': 'error',
+
+      // Vue-specific rules
+      'vue/multi-word-component-names': 'off',
+      'vue/no-v-html': 'warn',
+      'vue/require-default-prop': 'off',
+      'vue/require-prop-types': 'warn',
+      'vue/component-name-in-template-casing': ['error', 'PascalCase'],
+      'vue/html-self-closing': [
+        'error',
+        {
+          html: {
+            void: 'always',
+            normal: 'always',
+            component: 'always',
+          },
+        },
+      ],
+
+      // General JavaScript rules
+      'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
+      'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
+      'prefer-const': 'error',
+      'no-var': 'error',
+    },
+  },
+]

example.env

@@ -1,3 +0,0 @@
-INSTANCES=3
-DEBUG=false
-PORT=3000

index.html

@@ -0,0 +1,735 @@
+<!doctype html>
+<html lang="en" style="overflow-x: hidden;">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/ico+xml" href="/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <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>

index.js

@@ -1,93 +0,0 @@
-#!/usr/bin/env node
-
-/*
- * oooooooooo.                                        ooo        ooooo ooooooooo.   
- * `888'   `Y8b                                       `88.       .888' `888   `Y88. 
- *  888     888  .ooooo.   .oooo.   ooo. .oo.  .oo.    888b     d'888   888   .d88' 
- *  888oooo888' d88' `88b `P  )88b  `888P"Y88bP"Y88b   8 Y88. .P  888   888ooo88P'  
- *  888    `88b 888ooo888  .oP"888   888   888   888   8  `888'   888   888         
- *  888    .88P 888    .o d8(  888   888   888   888   8    Y     888   888         
- * o888bood8P'  `Y8bod8P' `Y888""8o o888o o888o o888o o8o        o888o o888o                                                                                     
- *  ========================================================================
- *  Copyright (c) 2019-2023 BeamMP Ltd. All rights reserved.
- */
-
-require('dotenv').config()
-const pkg = require('./package.json')
-const chalk = require('chalk');
-const cluster = require('cluster');
-
-const error = chalk.bold.keyword('red');
-const warn = chalk.keyword('orange');
-const good = chalk.keyword('lime');
-
-process.on('warning', (warning) => {
-	console.log(warning.stack);
-});
-
-if (cluster.isMaster) {
-
-	const env = process.env.NODE_ENV || 'development'
-
-	console.log('oooooooooo.                                        ooo        ooooo ooooooooo.   ')
-	console.log('`888\'   `Y8b                                       `88.       .888\' `888   `Y88. ')
-	console.log(' 888     888  .ooooo.   .oooo.   ooo. .oo.  .oo.    888b     d\'888   888   .d88\' ')
-	console.log(' 888oooo888\' d88\' `88b `P  )88b  `888P"Y88bP"Y88b   8 Y88. .P  888   888ooo88P\'  ')
-	console.log(' 888    `88b 888ooo888  .oP"888   888   888   888   8  `888\'   888   888         ')
-	console.log(' 888    .88P 888    .o d8(  888   888   888   888   8    Y     888   888         ')
-	console.log('o888bood8P\'  `Y8bod8P\' `Y888""8o o888o o888o o888o o8o        o888o o888o        ')
-	console.log('=================================================================================')
-	console.log('Website v' + pkg.version + ' Copyright (C) 2019-2024 BeamMP Ltd')
-	console.log('')
-	console.log('Running in: ' + env)
-	console.log('Server Time: ' + new Date())
-
-	function start() {
-		process.title = pkg.name + "@" + pkg.version;
-
-
-		if (cluster.isMaster) {
-			console.log(`Master PID: ${process.pid}`)
-			console.log(`Creating ${process.env.INSTANCES} Instances of the Website Backend`)
-			for (let i = 0; i < process.env.INSTANCES; i++) {
-				cluster.fork();
-			}
-			// set console's directory so we can see output from workers
-			console.dir(cluster.workers, { depth: 0 });
-
-			cluster.on('exit', (worker, code) => {
-				// Good exit code is 0 :))
-				// exitedAfterDisconnect ensures that it is not killed by master cluster or manually
-				// if we kill it via .kill or .disconnect it will be set to true
-				// \x1b[XXm represents a color, and [0m represent the end of this 
-				//color in the console ( 0m sets it to white again )
-				if (code !== 0 && !worker.exitedAfterDisconnect) {
-					console.error(`\x1b[34mWorker ${worker.process.pid} crashed... Starting a new worker...\x1b[0m`);
-					const nw = cluster.fork();
-					console.error(`\x1b[32mWorker ${nw.process.pid} will replace him \x1b[0m`);
-				}
-			});
-		} else {
-			console.error('FATAL: This script can only be run as a master process.')
-		}
-	}
-
-	start()
-} else {
-	const ws = require('./src/webserver')
-
-	try {
-		ws.init(function (err) {
-      if (err) {
-        console.error(err)
-        return
-      }
-
-      ws.listen(function () {
-        console.info('BeamMP Website Ready')
-      })
-    })
-	}	catch (e) {
-		throw e;
-	}
-}

jsconfig.json

@@ -0,0 +1,8 @@
+{
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  }
+}

nginx.conf

@@ -0,0 +1,47 @@
+server {
+    listen 80;
+
+    server_name _;
+    server_tokens off;
+
+    root /usr/share/nginx/html;
+
+    index index.html;
+
+    # Baseline security hardening for a static SPA.
+    # NOTE: add_header directives are NOT inherited by child location blocks that
+    # define their own add_header. To avoid silently dropping security headers,
+    # use the `expires` directive (not add_header Cache-Control) in location blocks.
+    add_header X-Frame-Options "DENY" always;
+    add_header X-Content-Type-Options "nosniff" always;
+    add_header Referrer-Policy "strict-origin-when-cross-origin" always;
+    add_header Permissions-Policy "camera=(), microphone=(), geolocation=()" always;
+    add_header Content-Security-Policy "default-src 'self'; img-src 'self' data: https:; script-src 'self'; style-src 'self' 'unsafe-inline'; font-src 'self' data:; connect-src 'self' https://backend.beammp.com; object-src 'none'; base-uri 'self'; frame-ancestors 'none'" always;
+
+    # Installer directory: serve files directly; return 404 for anything missing.
+    location ^~ /installer/ {
+        try_files $uri =404;
+    }
+
+    # Vite-hashed assets (JS, CSS, fonts, images): serve directly with a long cache.
+    # These files have content hashes in their names so stale cache is never an issue.
+    # Return 404 if a file is genuinely missing rather than silently serving index.html.
+    location ~* \.(js|css|woff2?|ttf|eot|svg|webp|avif|png|jpg|jpeg|gif|ico|map)$ {
+        try_files $uri =404;
+        expires 1y;
+        access_log off;
+    }
+
+    # Data / download files: serve directly, no client-side cache, 404 if missing.
+    location ~* \.(json|txt|exe|zip)$ {
+        try_files $uri =404;
+        expires -1;
+        access_log off;
+    }
+
+    # SPA fallback: all other paths go to index.html so Vue Router can render the
+    # correct view (including the NotFound page for unknown routes).
+    location / {
+        try_files $uri /index.html;
+    }
+}

nginx.main.conf

@@ -0,0 +1,27 @@
+worker_processes auto;
+pid /tmp/nginx.pid;
+error_log /tmp/error.log warn;
+
+events {
+    worker_connections 1024;
+}
+
+http {
+    include       /etc/nginx/mime.types;
+    default_type  application/octet-stream;
+
+    access_log /tmp/access.log;
+
+    sendfile on;
+    keepalive_timeout 65;
+    server_tokens off;
+
+    # Redefine temp paths to writable tmpfs locations
+    client_body_temp_path /tmp/client_temp;
+    proxy_temp_path       /tmp/proxy_temp;
+    fastcgi_temp_path     /tmp/fastcgi_temp;
+    uwsgi_temp_path       /tmp/uwsgi_temp;
+    scgi_temp_path        /tmp/scgi_temp;
+
+    include /etc/nginx/conf.d/*.conf;
+}

package.json

@@ -1,29 +1,38 @@
 {
   "name": "beammp-website",
-  "version": "1.1.1",
-  "description": "BeamMP Website",
-  "main": "index.js",
+  "private": true,
+  "version": "2.4.20",
+  "type": "module",
   "scripts": {
-    "docker-build": "docker build -t 192.168.100.6:5000/beammp/website:latest -t 192.168.100.6:5000/beammp/website:1.1.1 .",
-    "docker-push": "docker push 192.168.100.6:5000/beammp/website:latest"
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview",
+    "lint": "eslint . --fix",
+    "format": "prettier --write \"src/**/*.{js,vue,css,json}\""
   },
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/BeamMP/BeamMP-Website.git"
-  },
-  "author": "",
-  "license": "ISC",
-  "bugs": {
-    "url": "https://github.com/BeamMP/BeamMP-Website/issues"
-  },
-  "homepage": "https://github.com/BeamMP/BeamMP-Website#readme",
   "dependencies": {
-    "body-parser": "^1.19.0",
-    "chalk": "^3.0.0",
-    "dotenv": "^16.0.3",
-    "ejs": "^3.0.1",
-    "express": "^4.17.1",
-    "helmet": "^6.1.5",
-    "morgan": "^1.10.0"
+    "@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.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": {
+    "@vitejs/plugin-vue": "^6.0.2",
+    "@vue/eslint-config-prettier": "^10.2.0",
+    "eslint": "^9.39.1",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-prettier": "^5.5.4",
+    "eslint-plugin-vue": "^10.6.2",
+    "prettier": "^3.7.3",
+    "tw-animate-css": "^1.4.0",
+    "vite": "^7.2.4"
   }
-}
+}