Update index.html

Co-Authored-By: Tixx <83774803+WiserTixx@users.noreply.github.com>

.dockerignore

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

.gitignore

@@ -102,3 +102,30 @@ dist
 
 # TernJS port file
 .tern-port
+*.exe
+*.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?

.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
+}

Dockerfile

@@ -1,25 +1,23 @@
-FROM node:18.16.0-alpine3.17
+# Step 1: Build stage
+FROM node:22-alpine3.21 AS build
 
-# Create app directory
 WORKDIR /app
+COPY package*.json ./
+RUN npm ci
+COPY . .
+ENV NODE_ENV=development
+RUN npm run build
 
-RUN apk --no-cache add curl
+# Step 2: Serve stage
+FROM nginx:alpine
 
-# 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
+# Copy built files from the previous stage
+COPY --from=build /app/dist /usr/share/nginx/html
 
-# General Install of Deps
-# RUN npm install
-# If you are building your code for production
-RUN npm ci --only=production
+# Add a custom Nginx configuration
+COPY nginx.conf /etc/nginx/conf.d/default.conf
 
-# Bundle app source
-COPY . /app
+# Expose port 80
+EXPOSE 80
 
-EXPOSE 3599
-
-HEALTHCHECK CMD curl --fail http://localhost:3599/ping || exit 1
-
-CMD [ "node", "index.js" ]
+CMD ["nginx", "-g", "daemon off;"]

README.md

@@ -1 +1,129 @@
-# BeamMP-Website
+# BeamMP Website (Frontend)
+
+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.
+
+**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
+
+## 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.
+
+### 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.
+
+## 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.
+
+## 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.

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": {}
+}

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,560 @@
+<!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 - Multiplayer for BeamNG.drive</title>
+  <meta name="description"
+    content="BeamMP is a multiplayer mod for BeamNG.drive. Join thousands of players online and experience BeamNG.drive with friends!">
+
+</head>
+
+<body>
+  <!-- Vue App Container (shown when JS is enabled) -->
+  <div id="app"></div>
+
+  <!-- No-JS Fallback (shown when JS is disabled) -->
+  <noscript>
+    <style>
+      /* CSS Variables for Light/Dark Theme */
+      :root {
+        --bg-primary: #ffffff;
+        --bg-secondary: #f5f5f5;
+        --text-primary: #1a1a1a;
+        --text-secondary: #666666;
+        --border-color: #e5e5e5;
+        --beammp-blue: #4470B6;
+        --beammp-orange: #F36D24;
+      }
+
+      @media (prefers-color-scheme: dark) {
+        :root {
+          --bg-primary: #1a1a1a;
+          --bg-secondary: #2a2a2a;
+          --text-primary: #ffffff;
+          --text-secondary: #a0a0a0;
+          --border-color: rgba(255, 255, 255, 0.1);
+        }
+      }
+
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+
+      body {
+        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
+        background-color: var(--bg-primary);
+        color: var(--text-primary);
+        line-height: 1.6;
+        min-height: 100vh;
+        display: flex;
+        flex-direction: column;
+      }
+
+      .container {
+        max-width: 1200px;
+        margin: 0 auto;
+        padding: 0 1rem;
+      }
+
+      /* Header/Navigation */
+      header {
+        border-bottom: 1px solid var(--border-color);
+        background-color: var(--bg-primary);
+        position: sticky;
+        top: 0;
+        z-index: 100;
+        backdrop-filter: blur(10px);
+      }
+
+      nav {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        height: 4rem;
+        max-width: 1200px;
+        margin: 0 auto;
+        padding: 0 1rem;
+      }
+
+      .logo img {
+        height: 4rem;
+        width: auto;
+      }
+
+      @media (prefers-color-scheme: dark) {
+        .logo-light {
+          display: none;
+        }
+
+        .logo-dark {
+          display: block;
+        }
+      }
+
+      @media (prefers-color-scheme: light) {
+        .logo-light {
+          display: block;
+        }
+
+        .logo-dark {
+          display: none;
+        }
+      }
+
+      .nav-links {
+        display: flex;
+        gap: 1.5rem;
+        list-style: none;
+        flex-wrap: wrap;
+        align-items: center;
+      }
+
+      .nav-links a {
+        color: var(--text-primary);
+        text-decoration: none;
+        padding: 0.5rem 1rem;
+        border-radius: 0.375rem;
+        transition: background-color 0.2s;
+      }
+
+      .nav-links a:hover {
+        background-color: var(--bg-secondary);
+      }
+
+      /* Hero Section */
+      .hero {
+        text-align: center;
+        padding: 4rem 1rem;
+        background: linear-gradient(135deg, var(--beammp-blue) 0%, var(--beammp-orange) 100%);
+        color: white;
+      }
+
+      .hero h1 {
+        font-size: 3rem;
+        font-weight: 800;
+        margin-bottom: 1rem;
+      }
+
+      .hero p {
+        font-size: 1.25rem;
+        margin-bottom: 2rem;
+        opacity: 0.95;
+      }
+
+      .cta-button {
+        display: inline-block;
+        background-color: white;
+        color: var(--beammp-blue);
+        padding: 0.875rem 2rem;
+        border-radius: 0.5rem;
+        text-decoration: none;
+        font-weight: 600;
+        transition: transform 0.2s, box-shadow 0.2s;
+      }
+
+      .cta-button:hover {
+        transform: translateY(-2px);
+        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
+      }
+
+      /* Stats Section */
+      .stats {
+        display: grid;
+        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+        gap: 2rem;
+        padding: 3rem 1rem;
+        background-color: var(--bg-secondary);
+      }
+
+      .stat-card {
+        text-align: center;
+        padding: 2rem;
+        background-color: var(--bg-primary);
+        border-radius: 0.5rem;
+        border: 1px solid var(--border-color);
+      }
+
+      .stat-number {
+        font-size: 2.5rem;
+        font-weight: 700;
+        color: var(--beammp-blue);
+        margin-bottom: 0.5rem;
+      }
+
+      .stat-label {
+        color: var(--text-secondary);
+        font-size: 1rem;
+      }
+
+      /* Features Section */
+      .features {
+        padding: 4rem 1rem;
+      }
+
+      .section-title {
+        text-align: center;
+        font-size: 2.5rem;
+        font-weight: 700;
+        margin-bottom: 3rem;
+      }
+
+      .features-grid {
+        display: grid;
+        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+        gap: 2rem;
+      }
+
+      .feature-card {
+        padding: 2rem;
+        border: 1px solid var(--border-color);
+        border-radius: 0.5rem;
+        background-color: var(--bg-primary);
+      }
+
+      .feature-icon {
+        width: 3rem;
+        height: 3rem;
+        margin-bottom: 1rem;
+        color: var(--beammp-blue);
+      }
+
+      .feature-title {
+        font-size: 1.25rem;
+        font-weight: 600;
+        margin-bottom: 0.75rem;
+      }
+
+      .feature-description {
+        color: var(--text-secondary);
+      }
+
+      /* Info Section */
+      .info {
+        padding: 4rem 1rem;
+        background-color: var(--bg-secondary);
+      }
+
+      .info-content {
+        max-width: 800px;
+        margin: 0 auto;
+        text-align: center;
+      }
+
+      .info-content h2 {
+        font-size: 2rem;
+        margin-bottom: 1.5rem;
+      }
+
+      .info-content p {
+        font-size: 1.125rem;
+        color: var(--text-secondary);
+        margin-bottom: 2rem;
+      }
+
+      .button-group {
+        display: flex;
+        gap: 1rem;
+        justify-content: center;
+        flex-wrap: wrap;
+      }
+
+      .button {
+        padding: 0.75rem 1.5rem;
+        border-radius: 0.5rem;
+        text-decoration: none;
+        font-weight: 500;
+        transition: transform 0.2s;
+      }
+
+      .button-primary {
+        background-color: var(--beammp-blue);
+        color: white;
+      }
+
+      .button-secondary {
+        background-color: var(--bg-primary);
+        color: var(--text-primary);
+        border: 1px solid var(--border-color);
+      }
+
+      .button:hover {
+        transform: translateY(-2px);
+      }
+
+      /* Footer */
+      footer {
+        margin-top: auto;
+        padding: 2rem 1rem;
+        border-top: 1px solid var(--border-color);
+        background-color: var(--bg-primary);
+      }
+
+      .footer-content {
+        max-width: 1200px;
+        margin: 0 auto;
+        display: flex;
+        flex-direction: column;
+        gap: 2rem;
+      }
+
+      .social-links {
+        display: flex;
+        gap: 1rem;
+        justify-content: center;
+        flex-wrap: wrap;
+        align-items: center;
+      }
+
+      .social-link {
+        color: var(--text-secondary);
+        transition: color 0.2s;
+        text-decoration: none;
+      }
+
+      .social-link:hover {
+        color: var(--beammp-blue);
+      }
+
+      .footer-legal {
+        text-align: center;
+        color: var(--text-secondary);
+        font-size: 0.875rem;
+      }
+
+      .footer-links {
+        display: flex;
+        gap: 1rem;
+        justify-content: center;
+        flex-wrap: wrap;
+      }
+
+      .footer-links a {
+        color: var(--text-secondary);
+        text-decoration: none;
+      }
+
+      .footer-links a:hover {
+        color: var(--beammp-blue);
+      }
+
+      /* Responsive */
+      @media (max-width: 768px) {
+        .hero h1 {
+          font-size: 2rem;
+        }
+
+        .hero p {
+          font-size: 1rem;
+        }
+
+        .nav-links {
+          display: none;
+        }
+
+        .section-title {
+          font-size: 2rem;
+        }
+      }
+
+      /* JS Warning */
+      .js-notice {
+        background-color: #fff3cd;
+        color: #856404;
+        padding: 1rem;
+        text-align: center;
+        font-weight: 500;
+      }
+
+      @media (prefers-color-scheme: dark) {
+        .js-notice {
+          background-color: #664d03;
+          color: #ffecb5;
+        }
+      }
+
+      /* Hide noscript content when JS loads */
+      .noscript-page {
+        display: block;
+      }
+
+      /* SVG Icons */
+      .icon {
+        width: 1.5rem;
+        height: 1.5rem;
+        display: inline-block;
+        vertical-align: middle;
+      }
+    </style>
+
+    <div class="noscript-page">
+      <!-- Header -->
+      <header>
+        <nav>
+          <a href="/" class="logo">
+            <img src="/src/assets/BeamMP_blk.png" alt="BeamMP Logo" class="logo-light">
+            <img src="/src/assets/BeamMP_wht.png" alt="BeamMP Logo" class="logo-dark">
+          </a>
+          <ul class="nav-links">
+            <li><a href="https://forum.beammp.com">Forums</a></li>
+            <li><a href="https://docs.beammp.com">Docs</a></li>
+            <li><a href="https://github.com/BeamMP/BeamMP">GitHub</a></li>
+            <li><a href="https://www.patreon.com/BeamMP">Patreon</a></li>
+          </ul>
+        </nav>
+      </header>
+
+      <!-- JS Notice -->
+      <div class="js-notice">
+        ⚠️ JavaScript is disabled. For the best experience, please enable JavaScript in your browser.
+      </div>
+
+      <!-- Hero Section -->
+      <section class="hero">
+        <div class="container">
+          <h1>BeamMP</h1>
+          <p>Multiplayer for BeamNG.drive</p>
+          <a href="https://github.com/BeamMP/BeamMP/releases" class="cta-button">
+            Download Now
+          </a>
+        </div>
+      </section>
+
+      <!-- Stats Section -->
+      <section class="container stats">
+        <div class="stat-card">
+          <div class="stat-number">2000+</div>
+          <div class="stat-label">Online Players</div>
+        </div>
+        <div class="stat-card">
+          <div class="stat-number">3000+</div>
+          <div class="stat-label">Active Servers</div>
+        </div>
+        <div class="stat-card">
+          <div class="stat-number">100%</div>
+          <div class="stat-label">Certified Fun!</div>
+        </div>
+      </section>
+
+      <!-- Features Section -->
+      <section class="features">
+        <div class="container">
+          <h2 class="section-title">Why Choose BeamMP?</h2>
+          <div class="features-grid">
+            <div class="feature-card">
+              <div class="feature-icon">
+                <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none"
+                  stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                  <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="feature-title">Stable & Reliable</h3>
+              <p class="feature-description">Enjoy smooth multiplayer gameplay with our optimized server infrastructure.
+              </p>
+            </div>
+            <div class="feature-card">
+              <div class="feature-icon">
+                <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none"
+                  stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                  <path d="M20.2 7.8l-7.7 7.7-4-4-5.7 5.7" />
+                  <path d="M15 7h6v6" />
+                </svg>
+              </div>
+              <h3 class="feature-title">Easy to Use</h3>
+              <p class="feature-description">Simple installation and setup process. Get playing within minutes!</p>
+            </div>
+            <div class="feature-card">
+              <div class="feature-icon">
+                <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none"
+                  stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                  <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="feature-title">Global Community</h3>
+              <p class="feature-description">Join thousands of players worldwide in various game modes and communities.
+              </p>
+            </div>
+            <div class="feature-card">
+              <div class="feature-icon">
+                <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none"
+                  stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                  <polyline points="16 18 22 12 16 6" />
+                  <polyline points="8 6 2 12 8 18" />
+                </svg>
+              </div>
+              <h3 class="feature-title">Mod Support</h3>
+              <p class="feature-description">Create custom servers with Lua scripting and mod support.</p>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      <!-- Info Section -->
+      <section class="info">
+        <div class="container">
+          <div class="info-content">
+            <h2>Get Started Today</h2>
+            <p>BeamMP is completely free and open source. Download the mod, join a server, and start playing with
+              friends!</p>
+            <div class="button-group">
+              <a href="https://github.com/BeamMP/BeamMP/releases" class="button button-primary">Download</a>
+              <a href="https://docs.beammp.com" class="button button-secondary">Documentation</a>
+              <a href="https://forum.beammp.com" class="button button-secondary">Forums</a>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      <!-- Footer -->
+      <footer>
+        <div class="footer-content">
+          <div class="social-links">
+            <a href="https://github.com/BeamMP" class="social-link" aria-label="GitHub">GitHub</a>
+            <span>•</span>
+            <a href="https://discord.gg/beammp" class="social-link" aria-label="Discord">Discord</a>
+            <span>•</span>
+            <a href="https://www.youtube.com/@beammpofficial" class="social-link" aria-label="YouTube">YouTube</a>
+            <span>•</span>
+            <a href="https://x.com/beammpofficial" class="social-link" aria-label="X">X</a>
+            <span>•</span>
+            <a href="https://www.reddit.com/r/BeamMP" class="social-link" aria-label="Reddit">Reddit</a>
+            <span>•</span>
+            <a href="https://www.patreon.com/BeamMP" class="social-link" style="color: var(--beammp-orange);">Support on
+              Patreon</a>
+          </div>
+          <div class="footer-legal">
+            <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>
+    </div>
+  </noscript>
+
+  <!-- Vue.js Application Script -->
+  <script type="module" src="/src/main.js"></script>
+
+  <!-- Hide noscript content when JS is available -->
+  <script>
+    // Hide noscript content as soon as JS executes
+    document.addEventListener('DOMContentLoaded', function () {
+      const noscriptDivs = document.querySelectorAll('.noscript-page');
+      noscriptDivs.forEach(div => div.style.display = 'none');
+    });
+  </script>
+</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,22 @@
+server {
+    listen 80;
+
+    server_name _;
+
+    root /usr/share/nginx/html;
+
+    index index.html;
+
+    location / {
+        # SPA fallback: serve index.html for non-file routes so Vue Router can render NotFound
+        try_files $uri $uri/ /index.html;
+    }
+
+    # Let real 404s for assets return 404s; Vue handles route-level 404 via the SPA fallback above.
+
+    location /static/ {
+        # Serve static files directly
+        expires max;
+        access_log off;
+    }
+}

package.json

@@ -1,29 +1,38 @@
 {
   "name": "beammp-website",
-  "version": "1.1.1",
-  "description": "BeamMP Website",
-  "main": "index.js",
+  "private": true,
+  "version": "2.1.0",
+  "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.6.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"
   }
 }