first commit

2025-10-28 12:22:14 +01:00 · 2025-08-24 16:39:28 +02:00
commit 15f123070c
25 changed files with 3070 additions and 0 deletions
--- a/.eslintrc.cjs
+++ b/.eslintrc.cjs
@@ -0,0 +1,18 @@
+module.exports = {
+  root: true,
+  env: { browser: true, es2020: true },
+  extends: [
+    'eslint:recommended',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:react-hooks/recommended',
+  ],
+  ignorePatterns: ['dist', '.eslintrc.cjs'],
+  parser: '@typescript-eslint/parser',
+  plugins: ['react-refresh'],
+  rules: {
+    'react-refresh/only-export-components': [
+      'warn',
+      { allowConstantExport: true },
+    ],
+  },
+}
--- a/.gitignore
+++ b/.gitignore
@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
--- a/README.md
+++ b/README.md
@@ -0,0 +1,13 @@
+# TealFire Website
+
+This is the source code for the [TealFire]("https://tealfire.de") website.
+
+> Automatically deployed to [tealfire.de]("https://tealfire.de") on push to `main` branch. With GitHub Actions.
+
+## Setup
+
+1. Clone repository
+2. Install dependencies: `npm install`
+3. Start development server: `npm run dev`
+
+> NodeJS 18.0.0 or higher is recommended.
--- a/index.html
+++ b/index.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="UTF-8" />
+		<link rel="icon" type="image/svg+xml" href="/logo.svg" />
+		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+		<meta name="description" content="Website of the TealFire community" />
+		<meta name="keywords" content="TealFire, TeamSpeak" />
+		<meta name="author" content="DerTyp7" />
+		<meta name="robots" content="index, follow" />
+		<title>TealFire</title>
+	</head>
+	<body>
+		<div id="root"></div>
+		<script type="module" src="/src/main.tsx"></script>
+		<script language="javascript">
+			(function () {
+				var c = document.createElement("script"),
+					s = document.getElementsByTagName("script")[0];
+				c.type = "text/javascript";
+				c.async = true;
+				c.src = "https://ts3index.com/viewer/script.js";
+				s.parentNode.insertBefore(c, s);
+			})();
+		</script>
+	</body>
+</html>
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -0,0 +1,29 @@
+{
+	"name": "tealfire-website",
+	"private": false,
+	"version": "0.0.0",
+	"type": "module",
+	"scripts": {
+		"dev": "vite",
+		"build": "tsc && vite build",
+		"lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+		"preview": "vite preview"
+	},
+	"dependencies": {
+		"react": "^18.2.0",
+		"react-dom": "^18.2.0",
+		"sass": "^1.69.3"
+	},
+	"devDependencies": {
+		"@types/react": "^18.2.15",
+		"@types/react-dom": "^18.2.7",
+		"@typescript-eslint/eslint-plugin": "^6.0.0",
+		"@typescript-eslint/parser": "^6.0.0",
+		"@vitejs/plugin-react-swc": "^3.3.2",
+		"eslint": "^8.45.0",
+		"eslint-plugin-react-hooks": "^4.6.0",
+		"eslint-plugin-react-refresh": "^0.4.3",
+		"typescript": "^5.0.2",
+		"vite": "^4.4.5"
+	}
+}
--- a/public/about-background.svg
+++ b/public/about-background.svg
@@ -0,0 +1 @@
+<svg id="visual" viewBox="0 0 960 540" width="960" height="540" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"><path d="M496 540L471 540L471 463L305 463L305 386L438 386L438 309L381 309L381 231L393 231L393 154L468 154L468 77L341 77L341 0L960 0L960 77L960 77L960 154L960 154L960 231L960 231L960 309L960 309L960 386L960 386L960 463L960 463L960 540L960 540Z" fill="#44be9d"></path><path d="M516 540L475 540L475 463L582 463L582 386L432 386L432 309L475 309L475 231L555 231L555 154L493 154L493 77L582 77L582 0L960 0L960 77L960 77L960 154L960 154L960 231L960 231L960 309L960 309L960 386L960 386L960 463L960 463L960 540L960 540Z" fill="#31ae98"></path><path d="M611 540L536 540L536 463L647 463L647 386L675 386L675 309L653 309L653 231L535 231L535 154L606 154L606 77L550 77L550 0L960 0L960 77L960 77L960 154L960 154L960 231L960 231L960 309L960 309L960 386L960 386L960 463L960 463L960 540L960 540Z" fill="#1f9f91"></path><path d="M654 540L679 540L679 463L702 463L702 386L771 386L771 309L697 309L697 231L690 231L690 154L731 154L731 77L762 77L762 0L960 0L960 77L960 77L960 154L960 154L960 231L960 231L960 309L960 309L960 386L960 386L960 463L960 463L960 540L960 540Z" fill="#0d8f89"></path><path d="M846 540L874 540L874 463L771 463L771 386L833 386L833 309L806 309L806 231L880 231L880 154L836 154L836 77L796 77L796 0L960 0L960 77L960 77L960 154L960 154L960 231L960 231L960 309L960 309L960 386L960 386L960 463L960 463L960 540L960 540Z" fill="#008080"></path></svg>
--- a/public/logo.svg
+++ b/public/logo.svg
@@ -0,0 +1,23 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
+ "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
+<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
+ width="307.000000pt" height="339.000000pt" viewBox="0 0 307.000000 339.000000"
+ preserveAspectRatio="xMidYMid meet">
+
+<g transform="translate(0.000000,339.000000) scale(0.100000,-0.100000)"
+fill="#008080" stroke="none">
+<path d="M1297 3382 c-3 -4 -7 -61 -11 -127 -20 -341 -120 -616 -370 -1010
+-158 -251 -306 -436 -331 -415 -7 6 -18 52 -24 103 -22 170 -77 377 -101 377
+-5 0 -21 -38 -35 -86 -27 -89 -79 -213 -212 -504 -201 -438 -244 -657 -180
+-901 52 -198 102 -290 232 -427 137 -145 345 -310 474 -376 l34 -18 -5 24 c-3
+12 -18 63 -32 113 -64 213 -19 418 154 701 106 173 164 314 194 474 16 82 30
+120 45 120 13 0 55 -59 94 -131 45 -83 81 -198 102 -329 9 -57 18 -106 20
+-108 7 -7 122 231 144 298 34 104 49 202 63 403 6 103 15 186 20 185 4 -2 79
+-72 167 -155 257 -247 392 -414 501 -625 97 -187 102 -205 107 -413 6 -223 -1
+-265 -73 -418 -31 -65 -53 -121 -50 -124 7 -7 188 122 295 212 210 176 368
+383 455 598 149 370 117 760 -98 1193 -110 220 -245 417 -434 633 l-39 45 -7
+-183 c-5 -106 -14 -203 -22 -230 -14 -46 -80 -144 -99 -145 -14 -1 -59 92
+-101 209 -121 342 -331 651 -579 854 -130 107 -287 203 -298 183z"/>
+</g>
+</svg>
--- a/public/stacked-waves.svg
+++ b/public/stacked-waves.svg
@@ -0,0 +1 @@
+<svg id="visual" viewBox="0 0 960 540" width="960" height="540" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"><path d="M0 71L32 63.8C64 56.7 128 42.3 192 37.8C256 33.3 320 38.7 384 46.8C448 55 512 66 576 68.7C640 71.3 704 65.7 768 64.7C832 63.7 896 67.3 928 69.2L960 71L960 0L928 0C896 0 832 0 768 0C704 0 640 0 576 0C512 0 448 0 384 0C320 0 256 0 192 0C128 0 64 0 32 0L0 0Z" fill="#102226"></path><path d="M0 158L32 164.2C64 170.3 128 182.7 192 190.7C256 198.7 320 202.3 384 197C448 191.7 512 177.3 576 172.8C640 168.3 704 173.7 768 176.3C832 179 896 179 928 179L960 179L960 69L928 67.2C896 65.3 832 61.7 768 62.7C704 63.7 640 69.3 576 66.7C512 64 448 53 384 44.8C320 36.7 256 31.3 192 35.8C128 40.3 64 54.7 32 61.8L0 69Z" fill="#10262a"></path><path d="M0 314L32 316.7C64 319.3 128 324.7 192 318.3C256 312 320 294 384 287.8C448 281.7 512 287.3 576 285.7C640 284 704 275 768 288.5C832 302 896 338 928 356L960 374L960 177L928 177C896 177 832 177 768 174.3C704 171.7 640 166.3 576 170.8C512 175.3 448 189.7 384 195C320 200.3 256 196.7 192 188.7C128 180.7 64 168.3 32 162.2L0 156Z" fill="#11292e"></path><path d="M0 363L32 372.8C64 382.7 128 402.3 192 405C256 407.7 320 393.3 384 389.8C448 386.3 512 393.7 576 389.2C640 384.7 704 368.3 768 375.5C832 382.7 896 413.3 928 428.7L960 444L960 372L928 354C896 336 832 300 768 286.5C704 273 640 282 576 283.7C512 285.3 448 279.7 384 285.8C320 292 256 310 192 316.3C128 322.7 64 317.3 32 314.7L0 312Z" fill="#112d32"></path><path d="M0 422L32 425.7C64 429.3 128 436.7 192 433.2C256 429.7 320 415.3 384 411.7C448 408 512 415 576 418.5C640 422 704 422 768 429.2C832 436.3 896 450.7 928 457.8L960 465L960 442L928 426.7C896 411.3 832 380.7 768 373.5C704 366.3 640 382.7 576 387.2C512 391.7 448 384.3 384 387.8C320 391.3 256 405.7 192 403C128 400.3 64 380.7 32 370.8L0 361Z" fill="#193b41"></path><path d="M0 503L32 503C64 503 128 503 192 504.8C256 506.7 320 510.3 384 512.2C448 514 512 514 576 509.5C640 505 704 496 768 496C832 496 896 505 928 509.5L960 514L960 463L928 455.8C896 448.7 832 434.3 768 427.2C704 420 640 420 576 416.5C512 413 448 406 384 409.7C320 413.3 256 427.7 192 431.2C128 434.7 64 427.3 32 423.7L0 420Z" fill="#214950"></path><path d="M0 541L32 541C64 541 128 541 192 541C256 541 320 541 384 541C448 541 512 541 576 541C640 541 704 541 768 541C832 541 896 541 928 541L960 541L960 512L928 507.5C896 503 832 494 768 494C704 494 640 503 576 507.5C512 512 448 512 384 510.2C320 508.3 256 504.7 192 502.8C128 501 64 501 32 501L0 501Z" fill="#295860"></path></svg>
--- a/public/vite.svg
+++ b/public/vite.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -0,0 +1,12 @@
+import "@styles/App.scss";
+import About from "@components/About";
+import TeamSpeak from "./components/TeamSpeak";
+
+export default function App() {
+	return (
+		<div className="app">
+			<About />
+			<TeamSpeak />
+		</div>
+	);
+}
--- a/src/assets/react.svg
+++ b/src/assets/react.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>
--- a/src/components/About.tsx
+++ b/src/components/About.tsx
@@ -0,0 +1,34 @@
+import "@styles/About.scss";
+
+export default function About() {
+	return (
+		<div className="about">
+			<div className="brand">
+				<div>
+					<img src="/logo.svg" alt="TealFire Logo" />
+					<h1>TealFire</h1>
+				</div>
+				<h2>Community</h2>
+			</div>
+
+			<div
+				className="scrollDown"
+				onClick={() => {
+					window.scrollTo({
+						top: document.body.scrollHeight,
+						behavior: "smooth",
+					});
+				}}
+			>
+				<svg viewBox="0 0 330 330">
+					<path
+						id="XMLID_225_"
+						d="M325.607,79.393c-5.857-5.857-15.355-5.858-21.213,0.001l-139.39,139.393L25.607,79.393
+	c-5.857-5.857-15.355-5.858-21.213,0.001c-5.858,5.858-5.858,15.355,0,21.213l150.004,150c2.813,2.813,6.628,4.393,10.606,4.393
+	s7.794-1.581,10.606-4.394l149.996-150C331.465,94.749,331.465,85.251,325.607,79.393z"
+					/>
+				</svg>
+			</div>
+		</div>
+	);
+}
--- a/src/components/TeamSpeak.tsx
+++ b/src/components/TeamSpeak.tsx
@@ -0,0 +1,24 @@
+import "@styles/TeamSpeak.scss";
+import TsViewer from "./TsViewer";
+
+export default function TeamSpeak() {
+	return (
+		<div className="teamspeak">
+			<h1 id="teamspeak">TeamSpeak</h1>
+			<div className="text">
+				<p>
+					<span>TealFire</span> is a <span>community</span> based around&nbsp;
+					<span>TeamSpeak</span> since <span>2016</span>.
+				</p>
+				<button
+					onClick={() => {
+						window.open("ts3server://tealfire.de", "_self");
+					}}
+				>
+					Open In TeamSpeak
+				</button>
+			</div>
+			<TsViewer />
+		</div>
+	);
+}
--- a/src/components/TsViewer.tsx
+++ b/src/components/TsViewer.tsx
@@ -0,0 +1,31 @@
+import "@styles/TsViewer.scss";
+
+export default function TsViewer() {
+	return (
+		<div className="tsViewer">
+			<a
+				className="ts3index-stats"
+				href="https://ts3index.com/?page=server&id=299798"
+				target="_blank"
+			>
+				<img
+					src="https://ts3index.com/banner/s012_299798.png"
+					alt="TS3index.com"
+				/>
+			</a>
+			<div
+				className="ts3index-viewer"
+				data-serverid="299798"
+				data-style="icons=ts5&colorpack=default&clientc=EDEDED&clientb&clickable"
+			>
+				<a href="/">
+					Viewer couldn't be loaded. <br />
+					Wait a minute and reload the page.
+				</a>
+				<br />
+				<br />
+				<a href="https://ts3index.com/?page=server&id=299798">Ts3Index</a>
+			</div>
+		</div>
+	);
+}
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -0,0 +1,10 @@
+import React from "react";
+import ReactDOM from "react-dom/client";
+import App from "./App.tsx";
+import "@styles/index.scss";
+
+ReactDOM.createRoot(document.getElementById("root")!).render(
+	<React.StrictMode>
+		<App />
+	</React.StrictMode>
+);
--- a/src/styles/About.scss
+++ b/src/styles/About.scss
@@ -0,0 +1,93 @@
+.about {
+	display: flex;
+	flex-direction: column;
+	align-items: flex-start;
+	justify-content: center;
+	width: 100%;
+	height: 100vh;
+	background-image: url("/about-background.svg");
+	background-size: cover;
+	background-repeat: no-repeat;
+	background-position: center;
+	background-color: #102226;
+
+	.brand {
+		display: flex;
+		flex-direction: column;
+		align-items: flex-end;
+		div {
+			display: flex;
+			flex-direction: row;
+			align-items: center;
+			justify-content: center;
+			padding: 0 20px;
+			img {
+				width: 10rem;
+				margin-right: 1rem;
+				filter: drop-shadow(0 0 10px #0000002d);
+			}
+
+			h1 {
+				font-size: 5rem;
+				font-weight: 750;
+				color: #fff;
+				text-shadow: 0 0 10px #0000005e;
+			}
+		}
+
+		h2 {
+			margin-top: -50px;
+			text-shadow: 0 0 10px #0000005e;
+			margin-right: 60px;
+		}
+	}
+
+	.scrollDown {
+		position: absolute;
+		background-color: rgb(0, 0, 0);
+		bottom: 20px;
+		left: 50%;
+		transform: translateX(-50%);
+		box-shadow: 0 0 10px #0000009a;
+		width: 50px;
+		height: 50px;
+		border-radius: 50%;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		cursor: pointer;
+		transition: all 0.1s ease-in-out;
+		&:hover {
+			transform: translateX(-50%) scale(1.2);
+		}
+
+		svg {
+			width: 30px;
+			height: 30px;
+			fill: #fff;
+		}
+	}
+
+	@media (max-width: 1150px) {
+		align-items: center;
+	}
+
+	@media (max-width: 850px) {
+		.brand {
+			div {
+				img {
+					width: 5rem;
+				}
+
+				h1 {
+					font-size: 3rem;
+				}
+			}
+			h2 {
+				font-size: 1rem;
+				margin-top: -20px;
+				margin-right: 60px;
+			}
+		}
+	}
+}
--- a/src/styles/App.scss
+++ b/src/styles/App.scss
--- a/src/styles/TeamSpeak.scss
+++ b/src/styles/TeamSpeak.scss
@@ -0,0 +1,89 @@
+.teamspeak {
+	height: 100vh;
+	width: 100%;
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	justify-content: space-between;
+	padding: 0px 50px;
+	background-image: url("/stacked-waves.svg");
+	background-size: cover;
+	background-repeat: no-repeat;
+	background-position: 0 -40px;
+
+	h1 {
+		font-size: 3.5rem;
+		font-weight: 700;
+		color: #fff;
+		text-shadow: 0 0 10px #000;
+	}
+
+	.text {
+		padding: 0px 20px;
+		flex: 1;
+		text-align: center;
+
+		p {
+			color: #fff;
+			text-shadow: 0 0 10px #000;
+			font-size: 1.5rem;
+			font-weight: 500;
+			span {
+				color: #6ff7a8;
+				text-shadow: 0 0 10px #000;
+				font-size: 1.5rem;
+				font-weight: 700;
+			}
+		}
+
+		button {
+			margin-top: 20px;
+			border: 3px solid #6ff7a8;
+			padding: 10px 20px;
+			border-radius: 10px;
+			background-color: transparent;
+			box-shadow: 0 0 10px #00000046;
+			transition: all 0.1s ease-in-out;
+			animation-duration: 1s;
+			animation-fill-mode: forwards;
+			font-weight: 750;
+			cursor: pointer;
+
+			&:hover {
+				animation-name: pulse;
+				background-color: #739b832f;
+				font-weight: 750;
+			}
+
+			// pulse animation
+			@keyframes pulse {
+				0% {
+					transform: scale(1);
+					box-shadow: 0 0 0 0 rgba(111, 247, 168, 0.7);
+				}
+
+				70% {
+					transform: scale(1.05);
+					box-shadow: 0 0 0 10px rgba(111, 247, 168, 0);
+				}
+
+				100% {
+					transform: scale(1.05);
+					box-shadow: 0 0 0 0 rgba(111, 247, 168, 0);
+				}
+			}
+		}
+	}
+
+	@media (max-width: 1200px) {
+		flex-direction: column;
+		justify-content: center;
+		align-items: center;
+		padding: 0px 20px;
+		gap: 40px;
+
+		h1 {
+			font-size: 2.5rem;
+		}
+	}
+}
--- a/src/styles/TsViewer.scss
+++ b/src/styles/TsViewer.scss
@@ -0,0 +1,19 @@
+.tsViewer {
+	width: 468px;
+	overflow: hidden;
+	box-shadow: 0 0 10px #00000031;
+	.ts3index-viewer {
+		border-radius: 5px;
+		height: 700px;
+		overflow: auto;
+	}
+
+	@media (max-width: 850px) {
+		width: 100%;
+	}
+	@media (max-width: 550px) {
+		.ts3index-stats {
+			display: none !important;
+		}
+	}
+}
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -0,0 +1,33 @@
+@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap");
+
+:root {
+	font-family: roboto, sans-serif;
+	line-height: 1.5;
+	font-weight: 400;
+
+	color: rgba(255, 255, 255, 0.87);
+	background-color: #295860;
+
+	font-synthesis: none;
+	text-rendering: optimizeLegibility;
+	-webkit-font-smoothing: antialiased;
+	-webkit-overflow-scrolling: touch;
+	-moz-osx-font-smoothing: grayscale;
+	-webkit-text-size-adjust: 100%;
+
+	scroll-behavior: smooth;
+}
+
+* {
+	box-sizing: border-box;
+	margin: 0;
+	padding: 0;
+}
+button {
+	color: rgba(255, 255, 255, 0.87);
+}
+
+html,
+body {
+	width: 100%;
+}
--- a/src/vite-env.d.ts
+++ b/src/vite-env.d.ts
@@ -0,0 +1 @@
+/// <reference types="vite/client" />
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -0,0 +1,33 @@
+{
+	"compilerOptions": {
+		"target": "ES2020",
+		"useDefineForClassFields": true,
+		"lib": ["ES2020", "DOM", "DOM.Iterable"],
+		"module": "ESNext",
+		"skipLibCheck": true,
+
+		/* Bundler mode */
+		"moduleResolution": "bundler",
+		"allowImportingTsExtensions": true,
+		"resolveJsonModule": true,
+		"isolatedModules": true,
+		"noEmit": true,
+		"jsx": "react-jsx",
+
+		/* Linting */
+		"strict": true,
+		"noUnusedLocals": true,
+		"noUnusedParameters": true,
+		"noFallthroughCasesInSwitch": true,
+
+		/* Aliases */
+		"baseUrl": "./",
+		"paths": {
+			"@/*": ["src/*"],
+			"@styles/*": ["src/styles/*"],
+			"@components/*": ["src/components/*"]
+		}
+	},
+	"include": ["src"],
+	"references": [{ "path": "./tsconfig.node.json" }]
+}
--- a/tsconfig.node.json
+++ b/tsconfig.node.json
@@ -0,0 +1,10 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "skipLibCheck": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "allowSyntheticDefaultImports": true
+  },
+  "include": ["vite.config.ts"]
+}
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -0,0 +1,15 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react-swc'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [react()],
+  // aliases
+  resolve: {
+    alias: {
+      '@': '/src',
+      '@styles': '/src/styles',
+      '@components': '/src/components',
+    },
+  },
+})
				`@@ -0,0 +1 @@`
				<svg id="visual" viewBox="0 0 960 540" width="960" height="540" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"><path d="M496 540L471 540L471 463L305 463L305 386L438 386L438 309L381 309L381 231L393 231L393 154L468 154L468 77L341 77L341 0L960 0L960 77L960 77L960 154L960 154L960 231L960 231L960 309L960 309L960 386L960 386L960 463L960 463L960 540L960 540Z" fill="#44be9d"></path><path d="M516 540L475 540L475 463L582 463L582 386L432 386L432 309L475 309L475 231L555 231L555 154L493 154L493 77L582 77L582 0L960 0L960 77L960 77L960 154L960 154L960 231L960 231L960 309L960 309L960 386L960 386L960 463L960 463L960 540L960 540Z" fill="#31ae98"></path><path d="M611 540L536 540L536 463L647 463L647 386L675 386L675 309L653 309L653 231L535 231L535 154L606 154L606 77L550 77L550 0L960 0L960 77L960 77L960 154L960 154L960 231L960 231L960 309L960 309L960 386L960 386L960 463L960 463L960 540L960 540Z" fill="#1f9f91"></path><path d="M654 540L679 540L679 463L702 463L702 386L771 386L771 309L697 309L697 231L690 231L690 154L731 154L731 77L762 77L762 0L960 0L960 77L960 77L960 154L960 154L960 231L960 231L960 309L960 309L960 386L960 386L960 463L960 463L960 540L960 540Z" fill="#0d8f89"></path><path d="M846 540L874 540L874 463L771 463L771 386L833 386L833 309L806 309L806 231L880 231L880 154L836 154L836 77L796 77L796 0L960 0L960 77L960 77L960 154L960 154L960 231L960 231L960 309L960 309L960 386L960 386L960 463L960 463L960 540L960 540Z" fill="#008080"></path></svg>
				`@@ -0,0 +1 @@`
				<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>