More work on the homepage. Started inserting text for the landing page containing a play now Button and the FAQ Questions

Also switched out the favicon.

dist/app/Http/Controllers/Web/Homepage/HomepageController.php

@@ -3,12 +3,24 @@
 namespace App\Http\Controllers\Web\Homepage;
 
 use App\Http\Controllers\Controller;
+use Illuminate\Contracts\View\Factory;
+use Illuminate\Contracts\View\View;
+use Illuminate\Foundation\Application;
 
 class HomepageController extends Controller
 {
-    public function index() {
-
-
+    public function index(): Factory|Application|View|\Illuminate\Contracts\Foundation\Application
+    {
         return view('web.home');
     }
+
+    public function download(): Factory|Application|View|\Illuminate\Contracts\Foundation\Application
+    {
+        return view('web.download');
+    }
+
+    public function howToPlay(): Factory|Application|View|\Illuminate\Contracts\Foundation\Application
+    {
+        return view('web.how-to-play');
+    }
 }

dist/resources/css/app.scss

@@ -25,3 +25,7 @@
     border-image: linear-gradient(to right, theme('colors.indigo.600') 10%, transparent) 1;
   }
 }
+
+.weblink {
+  @apply text-web-main filter brightness-[120%] font-semibold;
+}

dist/resources/views/components/icons/chevron.blade.php

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" {{ $attributes }}>
+    <path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5" />
+</svg>

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

@@ -0,0 +1,15 @@
+@props([
+    'headline'
+])
+
+<div x-data="{open: false}" {{ $attributes }}>
+    <x-web.headline class="!text-2xl hover:after:bg-web-main after:transition-colors after:duration-200 cursor-pointer" x-on:click="open = !open" >
+        <div class="flex justify-between">
+            <span>{{ $headline }}</span>
+            <x-icons.chevron class="size-8 transition-transform" x-bind:class="{'rotate-90': !open}"/>
+        </div>
+    </x-web.headline>
+    <div x-show="open" x-transition class="pl-6 -mt-2">
+        {{ $slot }}
+    </div>
+</div>

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

@@ -23,7 +23,7 @@
 
      :class="{
         'w-0': !open,
-        'w-56': open
+        'w-56 max-w-max': open
      }"
 >
     <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"
@@ -53,11 +53,15 @@ class="bg-slate-700 mx-4 p-2 rounded gap-4 flex justify-center outline outline-1
                 x-show="open" x-transition/>
     </div>
     <div class="row-start-2 flex flex-col text-xl gap-4 px-4" x-show="open" x-transition >
-        <x-web.sidebar.button>
+        <x-web.sidebar.button href="{{ route('download') }}">
             <span class="font-bold">Download</span>
         </x-web.sidebar.button>
 
-        <x-web.sidebar.button>
+        <x-web.sidebar.button href="{{ route('how-to-play') }}">
+                <span class="font-bold">How to Play</span>
+        </x-web.sidebar.button>
+
+        <x-web.sidebar.button >
             <span class="font-bold">Credits</span>
         </x-web.sidebar.button>
 

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

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

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

@@ -0,0 +1,5 @@
+<x-layouts.web>
+    <div class="container flex flex-col justify-center items-center mx-auto py-8 px-48">
+        Downlaod Page!
+    </div>
+</x-layouts.web>

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

@@ -1,20 +1,126 @@
 <x-layouts.web>
-    <div class="container flex flex-col justify-center items-center mx-auto py-8">
+    <div class="container flex flex-col justify-center items-center mx-auto py-8 2xl:px-48">
         <img src="{{ asset('img/logos/DG_Rebirth_Logo.png') }}"
              alt="Deathgarden Rebirth Logo"
-             class="max-h-64"
+             class="max-h-96"
         >
-        <x-web.headline class="w-full">
-            Welcome to Deathgarden Rebirth
+        <span class="font-extrabold text-4xl my-10">
+            EVEN DEATH CAN'T STOP US
+        </span>
+
+        <a href="{{ route('download') }}">
+            <x-inputs.button type="button"
+                             class="my-4 !px-10 !py-8 !bg-web-main hover:scale-110 !transition-all !border-web-main">
+            <span class="text-3xl font-bold">
+                PLAY NOW
+            </span>
+            </x-inputs.button>
+        </a>
+
+        <x-web.headline class="w-full mt-16">
+            What is Deathgarden Rebirth?
         </x-web.headline>
+
         <x-web.text>
-            Deathgarden: Rebirth is a multiplayer survival action game where a relentless hunter tracks and eliminates scavengers.
+            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.
+            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 class="mt-8 font-semibold">
+            To learn more how to survive or kill Scavengers inside the Deathgarden, visit our „How To“ page!
         </x-web.text>
+
+        <div class="h-56 mt-8 w-full bg-cover bg-[center_40%]"
+             style="background-image: url('{{ asset('img/backgrounds/background_blur.png') }}')">
+        </div>
+
+        <x-web.headline class="w-full mt-12">
+            Frequently Asked Questions
+        </x-web.headline>
+
+        <x-web.accordeon headline="How can I play Deathgarden: Rebirth?" class="w-full">
+            <x-web.text>
+                To play Deathgarden: Rebirth, you'll need to download the official launcher, which ensures you
+                have the latest updates. For more information, click <a href="{{ route('download') }}" class="weblink">
+                    here
+                </a>.
+            </x-web.text>
+        </x-web.accordeon>
+
+        <x-web.accordeon headline="Does it cost money to play Deathgarden: Rebirth?" class="w-full">
+            <x-web.text>
+                No, the game and the Rebirth mod are completely free!
+            </x-web.text>
+        </x-web.accordeon>
+
+        <x-web.accordeon headline="What personal information is saved?" class="w-full">
+            <x-web.text>
+                To launch Deathgarden: Rebirth, we need to create a user account in our database using some
+                public information from your Steam account.
+            </x-web.text>
+            <x-web.text class="my-2">
+                We only save your SteamID64, Steam profile
+                picture, and current username. This information is stored on a secure server with restricted
+                access. If you'd like to delete your data and player account, please email us at
+                contact@playdeathgarden.live.
+            </x-web.text>
+            <x-web.text>
+                If you'd like to delete your data and player account, please email us at
+                <a href="mailto:contact@playdeathgarden.live" class="weblink">
+                    contact@playdeathgarden.live
+                </a>.
+            </x-web.text>
+        </x-web.accordeon>
+
+        <x-web.accordeon headline="This is cool! Can we donate money to the project?" class="w-full">
+            <x-web.text>
+                Due to legal restrictions, we cannot accept any donations. However, you can support us by
+                sharing the project with your friends and others!
+            </x-web.text>
+        </x-web.accordeon>
+
+        <x-web.accordeon headline="I’m a programmer. Can I view and submit updates to the backend?" class="w-full">
+            <x-web.text>
+                The backend has a public repository on GitHub. If you find any bugs or want to contribute to
+                certain features, you can submit a pull request.
+            </x-web.text>
+            <x-web.text>
+                Our programming team will review it, and if your
+                contribution is added, you’ll be credited on our credits page!
+            </x-web.text>
+        </x-web.accordeon>
+
+        <x-web.accordeon headline="I’m an Unreal Engine mod creator. Can I create mods and use them in-game?" class="w-full">
+            <x-web.text>
+                Using self-created mods is against our Terms of Service. However, if you have cool ideas, you
+                can submit a detailed description of your mod and its functionality.
+            </x-web.text>
+            <x-web.text>
+                Once our mod creation
+                team reviews it, we may add it to the official supported mod list, with you credited as the
+                creator!
+            </x-web.text>
+        </x-web.accordeon>
+
+        <x-web.accordeon headline="I’m a content creator and want to support the game." class="w-full">
+            <x-web.text>
+                That’s awesome! We’re always looking for content creators to promote the game through their
+                social media or streaming channels.
+            </x-web.text>
+            <x-web.text>
+                Please send a brief introduction and your social/streaming
+                links to <a href="mailto:contact@playdeathgarden.live" class="weblink">
+                    contact@playdeathgarden.live
+                </a>.
+                Our content creator partners receive in-game goodies
+                and occasional promotion in the in-game news section!
+            </x-web.text>
+        </x-web.accordeon>
     </div>
 </x-layouts.web>

dist/resources/views/web/how-to-play.blade.php

@@ -0,0 +1,5 @@
+<x-layouts.web>
+    <div class="container flex flex-col justify-center items-center mx-auto py-8 px-48">
+        HOW TO PAGE!
+    </div>
+</x-layouts.web>

dist/routes/web.php

@@ -35,6 +35,8 @@
 
 Route::get('{catalogVersion}/catalog', [CatalogController::class, 'getCatalog']);
 
+Route::get('download', [HomepageController::class, 'download'])->name('download');
+Route::get('how-to-play', [HomepageController::class, 'howToPlay'])->name('how-to-play');
 Route::get('/', [HomepageController::class, 'index'])->name('homepage');
 
 Route::middleware('verify_migration_key')->get('/migrate-database', function () {