Added some website headline and text components.

Added Exo 2 Font

Also added main accent color for web.

Fixed some more sidebar scrolling issues and made the sidebar now close completely with the button outside.

dist/resources/css/app.scss

@@ -7,6 +7,14 @@
 @import "modal";
 @import "table";
 
+@layer base {
+  @font-face {
+    font-family: 'Exo 2';
+
+    src: url('../fonts/Exo2-VariableFont_wght.ttf');
+  }
+}
+
 .headline {
   @apply text-2xl font-semibold;
 

dist/resources/views/components/layouts/web.blade.php

@@ -1,7 +1,7 @@
 <x-layouts.app>
     <div class="h-screen flex bg-inherit">
         <x-web.sidebar/>
-        <div class="row-span-2 h-full bg-inherit">
+        <div class="row-span-2 h-full w-full px-4 md:px-16 lg:px-32 bg-inherit overflow-x-auto">
             {{ $slot }}
         </div>
     </div>

dist/resources/views/components/web/headline/index.blade.php

@@ -0,0 +1,6 @@
+<h1 {{ $attributes->merge([
+    'class' => "text-3xl font-semibold my-4
+                after:block after:w-full after:content-[''] after:border after:border-t-solid after:[border-image:linear-gradient(to_right,theme('colors.web-main')_10%,transparent)_1]",
+]) }} >
+    {{ $slot }}
+</h1>

dist/resources/views/components/web/sidebar/index.blade.php

@@ -7,7 +7,7 @@
 
 @endphp
 
-<div class="bg-slate-900 grid grid-cols-[auto_1fr] grid-rows-[auto_1fr] overflow-y-auto"
+<div class="bg-slate-900 grid grid-cols-[auto_1fr] grid-rows-[auto_1fr] overflow-x-auto min-w-max transition-all ease-in-out duration-300"
      x-data="{
         open: false,
         toggle() {
@@ -21,13 +21,21 @@
         }
      }"
 
+     :class="{
+        'w-0': !open,
+        'w-56': open
+     }"
 >
-    <div class="row-start-1 my-4 flex flex-col gap-4">
+    <x-inputs.button type="button" class="size-10 flex justify-center items-center hover:!bg-web-main focus:!border-web-main absolute top-4 left-4"
+                     x-on:click="toggle()">
+        <x-icons.bars class="size-6" x-show="!open" />
+        <x-icons.plus class="size-6 rotate-45" x-show="open" />
+    </x-inputs.button>
+    <div class="row-start-1 my-4 flex flex-col gap-4" x-show="open" >
         <div class="flex mx-4 justify-between items-center" >
-            <x-inputs.button type="button" class="size-10 flex justify-center items-center"
+            <x-inputs.button type="button" class="size-10 flex justify-center items-center hover:!bg-web-main focus:!border-web-main opacity-0 pointer-events-none"
                              x-on:click="toggle()">
-                <x-icons.bars class="size-6" x-show="!open" />
-                <x-icons.plus class="size-6 rotate-45" x-show="open" />
+                <x-icons.plus class="size-6 rotate-45"/>
             </x-inputs.button>
 
             <a href="{{ route('homepage') }}" class="">
@@ -64,7 +72,7 @@ class="flex justify-between items-center object-scale-down w-full">
         @auth
             <x-web.sidebar.button
                     href="{{ route('logout') }}"
-                    class="flex justify-between items-center object-scale-down w-full text-rose-500 hover:text-inherit hover:!outline-rose-500 hover:!bg-rose-700">
+                    class="flex justify-between items-center object-scale-down w-full text-web-main hover:text-inherit hover:!outline-web-main hover:!bg-web-main">
                 <span class="font-bold">Logout</span>
                 <x-icons.logout class="max-w-8"/>
             </x-web.sidebar.button>

dist/resources/views/components/web/text/index.blade.php

@@ -0,0 +1,3 @@
+<span {{ $attributes->merge(['class' => 'text-xl w-full my-1']) }}>
+    {{ $slot }}
+</span>

dist/resources/views/web/home.blade.php

@@ -1,3 +1,20 @@
 <x-layouts.web>
-    Deathgarden Rebirth Homepage
+    <div class="container flex flex-col justify-center items-center mx-auto py-8">
+        <img src="{{ asset('img/logos/DG_Rebirth_Logo.png') }}"
+             alt="Deathgarden Rebirth Logo"
+             class="max-h-64"
+        >
+        <x-web.headline class="w-full">
+            Welcome to Deathgarden Rebirth
+        </x-web.headline>
+        <x-web.text>
+            Deathgarden: Rebirth is a multiplayer survival action game where a relentless hunter tracks and eliminates scavengers.
+        </x-web.text>
+        <x-web.text>
+            After five years, the game has been brought back to life by the community and is now playable again, featuring new balance changes for an improved experience.
+        </x-web.text>
+        <x-web.text>
+            Will you join the Bloodharvest and make it to the Enclaves?
+        </x-web.text>
+    </div>
 </x-layouts.web>

dist/tailwind.config.js

@@ -7,7 +7,13 @@ export default {
       './vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php'
   ],
   theme: {
+    fontFamily: {
+      'sans': ['"Exo 2"', 'ui-sans-serif', 'system-ui']
+    },
     extend: {
+      colors: {
+        'web-main': '#b10101',
+      },
       boxShadow: {
         'glow': '0 0 20px 0 rgba(1,1,1,0.3)'
       }

dist/vite.config.js

@@ -1,11 +1,9 @@
 import { defineConfig } from 'vite';
-import vue from "@vitejs/plugin-vue";
 import laravel from 'laravel-vite-plugin';
 import { glob } from 'glob';
 
 export default defineConfig({
     plugins: [
-        vue(),
         laravel({
             input: [
                 'resources/css/app.scss',