Start of what will be the catalog.

web/app/Http/Controllers/Web/ShopController.php

@@ -0,0 +1,14 @@
+<?php
+
+namespace App\Http\Controllers\Web;
+
+use App\Http\Controllers\Controller;
+use Illuminate\Http\Request;
+
+class ShopController extends Controller
+{
+	public function index()
+	{
+		return view('web.shop.index');
+	}
+}

web/app/Models/asset.php

@@ -0,0 +1,11 @@
+<?php
+
+namespace App\Models;
+
+use Illuminate\Database\Eloquent\Factories\HasFactory;
+use Illuminate\Database\Eloquent\Model;
+
+class asset extends Model
+{
+    use HasFactory;
+}

web/database/migrations/2022_06_05_140351_create_assets_table.php

@@ -0,0 +1,31 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    /**
+     * Run the migrations.
+     *
+     * @return void
+     */
+    public function up()
+    {
+        Schema::create('assets', function (Blueprint $table) {
+            $table->id();
+            $table->timestamps();
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     *
+     * @return void
+     */
+    public function down()
+    {
+        Schema::dropIfExists('assets');
+    }
+};

web/resources/sass/Graphictoria.scss

@@ -32,6 +32,53 @@ img.twemoji {
 	//vertical-align: -0.1em;
 }
 
+// Shop
+
+.graphictoria-item-card {
+	text-decoration: none!important;
+	font-weight: 400!important;
+	display: inline-block;
+	padding: 0;
+	
+	flex: 0 0 auto;
+    width: 33.33333333%;
+	
+	@media (min-width: 768px) {
+		flex: 0 0 auto;
+		width: 25%;
+	}
+	
+	@media (min-width: 992px) {
+		flex: 0 0 auto;
+		width: 16.66666667%;
+	}
+	
+	@media (min-width: 1400px) {
+		flex: 0 0 auto;
+		width: 11.1111111%;
+	}
+}
+
+.graphictoria-item-card > span > img {
+	background: url("/Images/Item-Image-Vignette.png");
+	background-size: cover;
+}
+
+.graphictoria-catalog-overlay {
+	position: absolute;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+    display: flex;
+    background: rgb(40 40 40 / 12%);
+	z-index: 10;
+}
+
+.graphictoria-catalog-overlay > .gtoria-loader {
+	margin: auto;
+}
+
 // Maintenance
 
 .gtoria-maintenance-background {

web/resources/views/web/shop/index.blade.php

@@ -0,0 +1,36 @@
+@extends('layouts.app')
+
+@section('title', 'Shop')
+
+@section('content')
+<div class="container my-2">
+	<div class="row">
+		<div class="col d-flex">
+			<h4 class="my-auto">Shop</h4>
+		</div>
+		<div class="col-lg-5 my-2 my-lg-0 mb-lg-2 d-flex">
+			<button class="btn btn-secondary me-2"><i class="fa-solid fa-gear"></i></button>
+			<div class="input-group">
+				<input type="text" class="form-control d-lg-flex" placeholder="Item name" />
+				<button class="btn btn-primary">Search</button>
+			</div>
+		</div>
+	</div>
+	<div class="card p-3">
+		<div class="graphictoria-catalog-overlay">
+			<x-loader />
+		</div>
+		<div>
+			<a class="graphictoria-item-card" href="#">
+				<span class="card m-2">
+					<img class="img-fluid" src="{{ asset('images/testing/hat.png') }}" />
+					<div class="p-2">
+						<p>Test hat</p>
+						<p class="text-muted">Free</p>
+					</div>
+				</span>
+			</a>
+		</div>
+	</div>
+</div>
+@endsection

web/routes/web.php

@@ -5,6 +5,10 @@ Route::group(['as' => 'home.'], function() {
 	Route::get('/my/dashboard', 'HomeController@dashboard')->name('dashboard')->middleware('auth');
 });
 
+Route::group(['as' => 'shop.', 'prefix' => 'shop'], function() {
+	Route::get('/', 'ShopController@index')->name('index');
+});
+
 Route::group(['as' => 'auth.', 'namespace' => 'Auth'], function() {
 	Route::group(['as' => 'protection.', 'prefix' => 'request-blocked'], function() {
 		Route::get('/', 'DoubleSessionBlockController@index')->name('index');