From 2cdd712136ff0017c52bccb73ef0afba2a673a6f Mon Sep 17 00:00:00 2001
From: Kamil Piech <kamil.piech@blumilk.pl>
Date: Thu, 9 Nov 2023 13:43:46 +0100
Subject: [PATCH] #35 - main page management (#68)

* #34 - general settings added

* #34 - js lint fix

* #34 - cr fix

* #34 - added one more test

* #34 - validation fixes

* - main page sections update feature

* #35 - added some updates

* #35 - section ordering fixes

* #35 - added typography for tailwind

* #35 - lintf
---
 app/Enums/SectionType.php                     |  19 ++
 .../Dashboard/SectionController.php           |  54 +++
 .../Dashboard/SectionSettingsController.php   |  28 ++
 .../Controllers/Public/HomeController.php     |  36 +-
 app/Http/Requests/SectionRequest.php          |  21 ++
 app/Models/Section.php                        |  54 +++
 app/Models/SectionSettings.php                |  38 +++
 database/factories/SectionFactory.php         |  38 +++
 database/factories/SectionSettingsFactory.php |  20 ++
 ...8_193906_create_section_settings_table.php |  26 ++
 ...023_10_18_193906_create_sections_table.php |  25 ++
 database/seeders/DatabaseSeeder.php           |  10 +
 lang/pl.json                                  |   4 +-
 lang/pl/validation.php                        |   4 +-
 package-lock.json                             |   6 +
 package.json                                  |   1 +
 resources/js/Layouts/DashboardLayout.vue      |   2 +
 resources/js/Pages/Dashboard/Section/Show.vue | 311 ++++++++++++++++++
 resources/js/Pages/Public/Home.vue            |  31 +-
 routes/web.php                                |   9 +
 tailwind.config.js                            |   1 +
 tests/Feature/ExampleTest.php                 |   2 +
 tests/Feature/SectionsTest.php                | 152 +++++++++
 tests/Feature/SettingsTest.php                |   2 +-
 24 files changed, 845 insertions(+), 49 deletions(-)
 create mode 100644 app/Enums/SectionType.php
 create mode 100644 app/Http/Controllers/Dashboard/SectionController.php
 create mode 100644 app/Http/Controllers/Dashboard/SectionSettingsController.php
 create mode 100644 app/Http/Requests/SectionRequest.php
 create mode 100644 app/Models/Section.php
 create mode 100644 app/Models/SectionSettings.php
 create mode 100644 database/factories/SectionFactory.php
 create mode 100644 database/factories/SectionSettingsFactory.php
 create mode 100644 database/migrations/2023_10_18_193906_create_section_settings_table.php
 create mode 100644 database/migrations/2023_10_18_193906_create_sections_table.php
 create mode 100644 resources/js/Pages/Dashboard/Section/Show.vue
 create mode 100644 tests/Feature/SectionsTest.php

diff --git a/app/Enums/SectionType.php b/app/Enums/SectionType.php
new file mode 100644
index 0000000..2071647
--- /dev/null
+++ b/app/Enums/SectionType.php
@@ -0,0 +1,19 @@
+<?php
+
+declare(strict_types=1);
+
+namespace App\Enums;
+
+enum SectionType: string
+{
+    case About = "about";
+    case Counter = "counter";
+
+    public static function labels(): array
+    {
+        return [
+            "about" => __("About"),
+            "counter" => __("Counters"),
+        ];
+    }
+}
diff --git a/app/Http/Controllers/Dashboard/SectionController.php b/app/Http/Controllers/Dashboard/SectionController.php
new file mode 100644
index 0000000..0ce7e82
--- /dev/null
+++ b/app/Http/Controllers/Dashboard/SectionController.php
@@ -0,0 +1,54 @@
+<?php
+
+declare(strict_types=1);
+
+namespace App\Http\Controllers\Dashboard;
+
+use App\Enums\SectionType;
+use App\Http\Controllers\Controller;
+use App\Http\Requests\SectionRequest;
+use App\Models\Section;
+use App\Models\SectionSettings;
+use Illuminate\Http\RedirectResponse;
+use Inertia\Response;
+use Spatie\LaravelOptions\Options;
+
+class SectionController extends Controller
+{
+    public function show(): Response
+    {
+        return inertia("Dashboard/Section/Show", [
+            "sectionTypes" => Options::forEnum(SectionType::class)->toArray(),
+            "sectionSettings" => SectionSettings::query()->first(),
+            "about" => Section::query()->about()->orderBy("created_at")->get(),
+            "counters" => Section::query()->counter()->orderBy("created_at")->get(),
+        ]);
+    }
+
+    public function store(SectionRequest $request): RedirectResponse
+    {
+        Section::query()->create($request->validated());
+
+        return redirect()
+            ->back()
+            ->with("success", "Dodano sekcję");
+    }
+
+    public function update(SectionRequest $request, Section $section): RedirectResponse
+    {
+        $section->update($request->validated());
+
+        return redirect()
+            ->back()
+            ->with("success", "Zaktualizowano sekcję");
+    }
+
+    public function destroy(Section $section): RedirectResponse
+    {
+        $section->delete();
+
+        return redirect()
+            ->back()
+            ->with("success", "Usunięto sekcję");
+    }
+}
diff --git a/app/Http/Controllers/Dashboard/SectionSettingsController.php b/app/Http/Controllers/Dashboard/SectionSettingsController.php
new file mode 100644
index 0000000..3adbedf
--- /dev/null
+++ b/app/Http/Controllers/Dashboard/SectionSettingsController.php
@@ -0,0 +1,28 @@
+<?php
+
+declare(strict_types=1);
+
+namespace App\Http\Controllers\Dashboard;
+
+use App\Http\Controllers\Controller;
+use App\Models\SectionSettings;
+use Illuminate\Http\RedirectResponse;
+use Illuminate\Http\Request;
+
+class SectionSettingsController extends Controller
+{
+    public function __invoke(Request $request): RedirectResponse
+    {
+        SectionSettings::query()->first()
+            ->update([
+                "banner_enabled" => $request->boolean("banner_enabled"),
+                "about_enabled" => $request->boolean("about_enabled"),
+                "counters_enabled" => $request->boolean("counters_enabled"),
+                "contact_enabled" => $request->boolean("contact_enabled"),
+            ]);
+
+        return redirect()
+            ->back()
+            ->with("success", "Zaktualizowano ustawienia sekcji");
+    }
+}
diff --git a/app/Http/Controllers/Public/HomeController.php b/app/Http/Controllers/Public/HomeController.php
index b7d6384..43b101e 100644
--- a/app/Http/Controllers/Public/HomeController.php
+++ b/app/Http/Controllers/Public/HomeController.php
@@ -5,6 +5,8 @@
 namespace App\Http\Controllers\Public;
 
 use App\Http\Controllers\Controller;
+use App\Models\Section;
+use App\Models\SectionSettings;
 use App\Models\Setting;
 use Inertia\Response;
 
@@ -14,6 +16,8 @@ public function __invoke(): Response
     {
         /** @var Setting $settings */
         $settings = Setting::query()->first();
+        /** @var SectionSettings $sectionSettings */
+        $sectionSettings = SectionSettings::query()->first();
 
         return inertia("Public/Home", [
             "title" => $settings->teacher_titles,
@@ -22,35 +26,9 @@ public function __invoke(): Response
             "department" => $settings->department_name,
             "university" => $settings->university_name,
             "universityLogo" => "https://irg2023.collegiumwitelona.pl/assets/logos/cwup.png",
-            "sections" => [
-                [
-                    "header" => "Naukowo",
-                    "paragraphs" => [
-                        "Ukończyłem studia inżynierskie i magisterskie na kierunku Automatyka i Robotyka na Wydziale Elektroniki Politechniki Wrocławskiej. Specjalizowałem się, kolejno na studiach pierwszego i drugiego stopnia, w systemach informatycznych w automatyce oraz technologiach informacyjnych w systemach automatyki.",
-                        "Od pierwszej połowy 2016 roku prowadzę zawodowe praktyki dla studentów i uczę praktycznie programowania w ramach różnych projektów. W 2017 można było usłyszeć mój wykład w ramach Otwartych Seminariów Naukowych. Od 2017 pracuję jako nauczyciel akademicki na Wydziale Nauk Technicznych i Ekonomicznych Collegium Witelona Uczelnia Państwowa, dawniej Państwowej Wyższej Szkoły Zawodowej im. Witelona w Legnicy.",
-                    ],
-                ],
-                [
-                    "header" => "Zawodowo",
-                    "paragraphs" => [
-                        "Od 2014 roku pracuję jako programista. Zaczynałem jako młodszy programista PHP w małym wrocławskim software housie, gdzie pod bacznym okiem specjalistów nauczyłem się realistycznego i praktycznego podejścia do zawodu. Później pracowałem w projektach dla międzynarodowych korporacji, firm z sektora MŚP oraz startupów. Od 2020 roku jestem dyrektorem ds. technologii w software housie Blumilk.",
-                        "Zawsze gdy moge wybrać, programuję w PHP - najchętniej w najnowszej wersji oraz przede wszystkim w Laravelu. Mam zawodowe doświadczenie w pracy z przeróżnymi frameworkami JavaScriptu, Pythonem oraz C#.",
-                    ],
-                ],
-                [
-                    "header" => "Prywatnie",
-                    "paragraphs" => [
-                        "Urodziłem się i mieszkam od urodzenia w Legnicy (choć miałem w tym pięcioletnią przerwę na mieszkanie i studiowanie we Wrocławiu). W wolnym czasie lubię siedzieć nad książkami wszelkiego gatunku, śledzić przeróżne seriale oraz jeździć po legnickich i okolicznych drogach rowerowych.",
-                        "Ponadto jestem piwowarem domowym, więc warzę w domu własnoręcznie piwo, jestem zapalonym fanem Gwiezdnych wojen, a także - a jakżeby inaczej! - programuję najróżniejsze rzeczy w najróżniejszych technologiach w najróżniejszym celu.",
-                    ],
-                ],
-            ],
-            "counters" => [
-                ["id" => 1, "name" => "lat prowadzenia zajęć dydaktycznych na uczelni", "value" => 7],
-                ["id" => 2, "name" => "kursów prowadzonych w tym semestrze", "value" => 5],
-                ["id" => 3, "name" => "studentów na wykładach i innych zajęciach", "value" => 345],
-                ["id" => 4, "name" => "średnia ocena wystawiona przez studentów w ankiecie nt. jakości kształcenia", "value" => 4.93],
-            ],
+            "sectionSettings" => $sectionSettings,
+            "about" => $sectionSettings->about_enabled ? Section::query()->about()->orderBy("created_at")->get() : [],
+            "counters" => $sectionSettings->counters_enabled ? Section::query()->counter()->orderBy("created_at")->get() : [],
         ]);
     }
 }
diff --git a/app/Http/Requests/SectionRequest.php b/app/Http/Requests/SectionRequest.php
new file mode 100644
index 0000000..254ae58
--- /dev/null
+++ b/app/Http/Requests/SectionRequest.php
@@ -0,0 +1,21 @@
+<?php
+
+declare(strict_types=1);
+
+namespace App\Http\Requests;
+
+use App\Enums\SectionType;
+use Illuminate\Foundation\Http\FormRequest;
+use Illuminate\Validation\Rules\Enum;
+
+class SectionRequest extends FormRequest
+{
+    public function rules(): array
+    {
+        return [
+            "title" => ["required", "max:255"],
+            "value" => ["required", "max:65000"],
+            "type" => ["required", new Enum(SectionType::class)],
+        ];
+    }
+}
diff --git a/app/Models/Section.php b/app/Models/Section.php
new file mode 100644
index 0000000..1ddb79c
--- /dev/null
+++ b/app/Models/Section.php
@@ -0,0 +1,54 @@
+<?php
+
+declare(strict_types=1);
+
+namespace App\Models;
+
+use App\Enums\SectionType;
+use Carbon\Carbon;
+use Illuminate\Database\Eloquent\Builder;
+use Illuminate\Database\Eloquent\Casts\Attribute;
+use Illuminate\Database\Eloquent\Concerns\HasUlids;
+use Illuminate\Database\Eloquent\Factories\HasFactory;
+use Illuminate\Database\Eloquent\Model;
+use Stevebauman\Purify\Facades\Purify;
+
+/**
+ * @property string $id
+ * @property string $title
+ * @property string $value
+ * @property SectionType $type
+ * @property Carbon $created_at
+ * @property Carbon $updated_at
+ */
+class Section extends Model
+{
+    use HasFactory;
+    use HasUlids;
+
+    protected $fillable = [
+        "title",
+        "value",
+        "type",
+    ];
+    protected $casts = [
+        "type" => SectionType::class,
+    ];
+
+    public function scopeCounter(Builder $query): Builder
+    {
+        return $query->where("type", SectionType::Counter->value);
+    }
+
+    public function scopeAbout(Builder $query): Builder
+    {
+        return $query->where("type", SectionType::About->value);
+    }
+
+    protected function value(): Attribute
+    {
+        return Attribute::make(
+            set: fn(?string $value): string => Purify::clean($value),
+        );
+    }
+}
diff --git a/app/Models/SectionSettings.php b/app/Models/SectionSettings.php
new file mode 100644
index 0000000..362975c
--- /dev/null
+++ b/app/Models/SectionSettings.php
@@ -0,0 +1,38 @@
+<?php
+
+declare(strict_types=1);
+
+namespace App\Models;
+
+use Carbon\Carbon;
+use Illuminate\Database\Eloquent\Concerns\HasUlids;
+use Illuminate\Database\Eloquent\Factories\HasFactory;
+use Illuminate\Database\Eloquent\Model;
+
+/**
+ * @property string $id
+ * @property bool $banner_enabled
+ * @property bool $about_enabled
+ * @property bool $counters_enabled
+ * @property bool $contact_enabled
+ * @property Carbon $created_at
+ * @property Carbon $updated_at
+ */
+class SectionSettings extends Model
+{
+    use HasUlids;
+    use HasFactory;
+
+    protected $fillable = [
+        "banner_enabled",
+        "about_enabled",
+        "counters_enabled",
+        "contact_enabled",
+    ];
+    protected $casts = [
+        "banner_enabled" => "boolean",
+        "about_enabled" => "boolean",
+        "counters_enabled" => "boolean",
+        "contact_enabled" => "boolean",
+    ];
+}
diff --git a/database/factories/SectionFactory.php b/database/factories/SectionFactory.php
new file mode 100644
index 0000000..c66e6b1
--- /dev/null
+++ b/database/factories/SectionFactory.php
@@ -0,0 +1,38 @@
+<?php
+
+declare(strict_types=1);
+
+namespace Database\Factories;
+
+use App\Enums\SectionType;
+use Illuminate\Database\Eloquent\Factories\Factory;
+
+class SectionFactory extends Factory
+{
+    public function definition(): array
+    {
+        return [
+            "title" => fake()->text(20),
+            "value" => fake()->text(300),
+            "type" => fake()->randomElement(SectionType::cases())->value,
+        ];
+    }
+
+    public function counter(): static
+    {
+        return $this->state(fn(array $attributes): array => [
+            "title" => fake()->numberBetween(1, 100),
+            "value" => fake()->text(30),
+            "type" => SectionType::Counter->value,
+        ]);
+    }
+
+    public function about(): static
+    {
+        return $this->state(fn(array $attributes): array => [
+            "title" => fake()->text(30),
+            "value" => fake()->text(300),
+            "type" => SectionType::About->value,
+        ]);
+    }
+}
diff --git a/database/factories/SectionSettingsFactory.php b/database/factories/SectionSettingsFactory.php
new file mode 100644
index 0000000..79e254d
--- /dev/null
+++ b/database/factories/SectionSettingsFactory.php
@@ -0,0 +1,20 @@
+<?php
+
+declare(strict_types=1);
+
+namespace Database\Factories;
+
+use Illuminate\Database\Eloquent\Factories\Factory;
+
+class SectionSettingsFactory extends Factory
+{
+    public function definition(): array
+    {
+        return [
+            "banner_enabled" => fake()->boolean,
+            "about_enabled" => fake()->boolean,
+            "counters_enabled" => fake()->boolean,
+            "contact_enabled" => fake()->boolean,
+        ];
+    }
+}
diff --git a/database/migrations/2023_10_18_193906_create_section_settings_table.php b/database/migrations/2023_10_18_193906_create_section_settings_table.php
new file mode 100644
index 0000000..b995a11
--- /dev/null
+++ b/database/migrations/2023_10_18_193906_create_section_settings_table.php
@@ -0,0 +1,26 @@
+<?php
+
+declare(strict_types=1);
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class() extends Migration {
+    public function up(): void
+    {
+        Schema::create("section_settings", function (Blueprint $table): void {
+            $table->ulid("id")->primary();
+            $table->boolean("banner_enabled");
+            $table->boolean("about_enabled");
+            $table->boolean("counters_enabled");
+            $table->boolean("contact_enabled");
+            $table->timestamps();
+        });
+    }
+
+    public function down(): void
+    {
+        Schema::dropIfExists("section_settings");
+    }
+};
diff --git a/database/migrations/2023_10_18_193906_create_sections_table.php b/database/migrations/2023_10_18_193906_create_sections_table.php
new file mode 100644
index 0000000..f641b62
--- /dev/null
+++ b/database/migrations/2023_10_18_193906_create_sections_table.php
@@ -0,0 +1,25 @@
+<?php
+
+declare(strict_types=1);
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class() extends Migration {
+    public function up(): void
+    {
+        Schema::create("sections", function (Blueprint $table): void {
+            $table->ulid("id")->primary();
+            $table->string("title");
+            $table->text("value");
+            $table->string("type");
+            $table->timestamps();
+        });
+    }
+
+    public function down(): void
+    {
+        Schema::dropIfExists("sections");
+    }
+};
diff --git a/database/seeders/DatabaseSeeder.php b/database/seeders/DatabaseSeeder.php
index c79e71d..2d3fd79 100644
--- a/database/seeders/DatabaseSeeder.php
+++ b/database/seeders/DatabaseSeeder.php
@@ -4,6 +4,8 @@
 
 namespace Database\Seeders;
 
+use App\Models\Section;
+use App\Models\SectionSettings;
 use App\Models\Setting;
 use App\Models\User;
 use Illuminate\Database\Seeder;
@@ -14,5 +16,13 @@ public function run(): void
     {
         User::factory()->create(["email" => "admin@example.com"]);
         Setting::factory()->create();
+        Section::factory(4)->counter()->create();
+        Section::factory(3)->about()->create();
+        SectionSettings::query()->create([
+            "banner_enabled" => true,
+            "about_enabled" => true,
+            "counters_enabled" => true,
+            "contact_enabled" => true,
+        ]);
     }
 }
diff --git a/lang/pl.json b/lang/pl.json
index a7ad0e7..9441967 100644
--- a/lang/pl.json
+++ b/lang/pl.json
@@ -7,5 +7,7 @@
     "project": "projekt",
     "stationary": "stacjonarny",
     "part-time": "niestacjonarny",
-    "study and work": "ucz się i pracuj"
+    "study and work": "ucz się i pracuj",
+    "About": "O mnie",
+    "Counters": "Liczniki"
 }
diff --git a/lang/pl/validation.php b/lang/pl/validation.php
index b066404..b6a0194 100644
--- a/lang/pl/validation.php
+++ b/lang/pl/validation.php
@@ -123,11 +123,13 @@
         "index_number" => "numer indeksu",
         "abbreviation" => "skrótowiec",
         "form" => "tryb studiów",
-        "type" => "typ zajęć",
+        "type" => "typ",
         "teacher_name" => "imię i nazwisko nauczyciela",
         "teacher_email" => "adres e-mail nauczyciela",
         "teacher_titles" => "tytuły/stopnie naukowe nauczyciela",
         "university_name" => "nazwa uczelni",
         "department_name" => "nazwa wydziału",
+        "title" => "tytuł",
+        "value" => "opis",
     ],
 ];
diff --git a/package-lock.json b/package-lock.json
index afa685a..af83d13 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -14,6 +14,7 @@
                 "@tailwindcss/forms": "^0.5.6",
                 "@tailwindcss/typography": "^0.5.10",
                 "axios": "^1.5.0",
+                "dompurify": "^3.0.6",
                 "laravel-vite-plugin": "^0.8.0",
                 "lodash": "^4.17.21",
                 "primevue": "^3.35.0",
@@ -1477,6 +1478,11 @@
                 "node": ">=6.0.0"
             }
         },
+        "node_modules/dompurify": {
+            "version": "3.0.6",
+            "resolved": "https://registry.npmjs.org/dompurify/-/dompurify-3.0.6.tgz",
+            "integrity": "sha512-ilkD8YEnnGh1zJ240uJsW7AzE+2qpbOUYjacomn3AvJ6J4JhKGSZ2nh4wUIXPZrEPppaCLx5jFe8T89Rk8tQ7w=="
+        },
         "node_modules/electron-to-chromium": {
             "version": "1.4.539",
             "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.539.tgz",
diff --git a/package.json b/package.json
index fb6a45c..78a4d97 100644
--- a/package.json
+++ b/package.json
@@ -16,6 +16,7 @@
         "@tailwindcss/forms": "^0.5.6",
         "@tailwindcss/typography": "^0.5.10",
         "axios": "^1.5.0",
+        "dompurify": "^3.0.6",
         "laravel-vite-plugin": "^0.8.0",
         "lodash": "^4.17.21",
         "primevue": "^3.35.0",
diff --git a/resources/js/Layouts/DashboardLayout.vue b/resources/js/Layouts/DashboardLayout.vue
index 3bc0eb4..c4c219f 100644
--- a/resources/js/Layouts/DashboardLayout.vue
+++ b/resources/js/Layouts/DashboardLayout.vue
@@ -15,6 +15,7 @@ import {
   ClipboardIcon,
   Cog6ToothIcon,
   LockOpenIcon,
+  Square2StackIcon,
 } from '@heroicons/vue/24/outline'
 import { ref, watch } from 'vue'
 import { useToast } from 'vue-toastification'
@@ -30,6 +31,7 @@ const navigation = [
     elements: [
       { name: 'Dashboard', href: '/dashboard', icon: HomeIcon, current: true },
       { name: 'Ustawienia', href: '/dashboard/settings', icon: Cog6ToothIcon, current: false },
+      { name: 'Sekcje', href: '/dashboard/sections', icon: Square2StackIcon, current: false },
       { name: 'Aktualizacja hasła', href: '/dashboard/password', icon: LockOpenIcon, current: false },
       { name: 'Aktualności', href: '/dashboard/news', icon: NewspaperIcon, current: false },
       { name: 'FAQ', href: '/dashboard/faqs', icon: QuestionMarkCircleIcon, current: false },
diff --git a/resources/js/Pages/Dashboard/Section/Show.vue b/resources/js/Pages/Dashboard/Section/Show.vue
new file mode 100644
index 0000000..e041342
--- /dev/null
+++ b/resources/js/Pages/Dashboard/Section/Show.vue
@@ -0,0 +1,311 @@
+<script setup>
+import DashboardLayout from '@/Layouts/DashboardLayout.vue'
+import Section from '@/Shared/Components/Section.vue'
+import SubmitButton from '@/Shared/Components/Buttons/SubmitButton.vue'
+import FormGroup from '@/Shared/Forms/FormGroup.vue'
+import FormLabel from '@/Shared/Forms/FormLabel.vue'
+import FormError from '@/Shared/Forms/FormError.vue'
+import { useForm } from '@inertiajs/inertia-vue3'
+import ManagementHeader from '@/Shared/Components/ManagementHeader.vue'
+import ManagementHeaderItem from '@/Shared/Components/ManagementHeaderItem.vue'
+import { PencilSquareIcon, XCircleIcon } from '@heroicons/vue/24/outline'
+import EmptyState from '@/Shared/Components/EmptyState.vue'
+import TableCell from '@/Shared/Components/Table/TableCell.vue'
+import TableRow from '@/Shared/Components/Table/TableRow.vue'
+import TableHeader from '@/Shared/Components/Table/TableHeader.vue'
+import TableWrapper from '@/Shared/Components/Table/TableWrapper.vue'
+import Button from '@/Shared/Components/Buttons/Button.vue'
+import { ref } from 'vue'
+import TextInput from '@/Shared/Forms/TextInput.vue'
+import Select from '@/Shared/Forms/Select.vue'
+import TextAreaEditor from '@/Shared/Forms/TextAreaEditor.vue'
+import RemoveModal from '@/Shared/Modals/RemoveModal.vue'
+import DOMPurify from 'dompurify'
+
+const props = defineProps({
+  about: Array,
+  counters: Array,
+  sectionSettings: Object,
+  sectionTypes: Array,
+})
+const showModal = ref(false)
+const showEditForm = ref(false)
+const showCreateForm = ref(false)
+const sectionToDeleteId = ref(0)
+const sectionToEdit = ref({})
+const createForm = useForm({
+  title: '',
+  value: '',
+  type: '',
+})
+const editForm = useForm({
+  title: '',
+  value: '',
+  type: '',
+})
+const sectionSettingsForm = useForm({
+  banner_enabled: props.sectionSettings.banner_enabled,
+  about_enabled: props.sectionSettings.about_enabled,
+  counters_enabled: props.sectionSettings.counters_enabled,
+  contact_enabled: props.sectionSettings.contact_enabled,
+})
+
+function editSection(section) {
+  sectionToEdit.value = section
+  editForm.title = section.title
+  editForm.value = section.value
+  editForm.type = section.type
+  showCreateForm.value = false
+  showEditForm.value = true
+}
+
+function createSection() {
+  createForm.post('/dashboard/sections/', {
+    preserveScroll: true,
+    onSuccess: () => {
+      createForm.reset()
+    },
+  })
+}
+
+function updateSection() {
+  editForm.patch(`/dashboard/sections/${sectionToEdit.value.id}/`, {
+    preserveScroll: true,
+    onSuccess: () => {
+      showEditForm.value = false
+      editForm.reset()
+    },
+  })
+}
+
+function updateSectionSettings() {
+  sectionSettingsForm.patch('/dashboard/section-settings', {
+    preserveScroll: true,
+  })
+}
+</script>
+
+<template>
+  <DashboardLayout>
+    <div class="flex flex-col gap-8">
+      <ManagementHeader>
+        <template #header>
+          Zarządzanie sekcjami strony głównej
+        </template>
+        <template #statistics>
+          <ManagementHeaderItem>
+            Formularz edycji sekcji strony głównej
+          </ManagementHeaderItem>
+        </template>
+        <template #actions>
+          <Button @click="[showCreateForm = true, showEditForm = false]">
+            Dodaj
+          </Button>
+        </template>
+      </ManagementHeader>
+      <form v-if="!showEditForm && showCreateForm" class="grid grid-cols-2" @submit.prevent="createSection">
+        <Section>
+          <div class="flex flex-col justify-between gap-4">
+            <FormGroup>
+              <FormLabel for="type">
+                Typ sekcji
+              </FormLabel>
+              <Select id="type" v-model="createForm.type" :error="createForm.errors.type" :options="sectionTypes"
+                      item-value="value" label="label"
+              />
+              <FormError :error="createForm.errors.type" />
+            </FormGroup>
+            <FormGroup>
+              <FormLabel for="title">
+                Tytuł
+              </FormLabel>
+              <TextInput id="title" v-model="createForm.title" :error="createForm.errors.title" autocomplete="off" />
+              <FormError :error="createForm.errors.title" />
+            </FormGroup>
+            <FormGroup>
+              <FormLabel for="value">
+                Opis
+              </FormLabel>
+              <TextAreaEditor id="value" v-model="createForm.value" :error="createForm.errors.value"
+                              autocomplete="off"
+              />
+              <FormError :error="createForm.errors.value" />
+            </FormGroup>
+            <div class="mt-4 flex justify-end">
+              <Button class="mr-3" @click="[showCreateForm = false]">
+                Zamknij
+              </Button>
+              <SubmitButton>
+                Utwórz
+              </SubmitButton>
+            </div>
+          </div>
+        </Section>
+      </form>
+      <form v-if="showEditForm && !showCreateForm" class="grid grid-cols-2" @submit.prevent="updateSection">
+        <Section>
+          <div class="flex flex-col justify-between gap-4">
+            <FormGroup>
+              <FormLabel for="type">
+                Typ sekcji
+              </FormLabel>
+              <Select id="type" v-model="editForm.type" :error="editForm.errors.type" :options="sectionTypes"
+                      item-value="value" label="label"
+              />
+              <FormError :error="editForm.errors.type" />
+            </FormGroup>
+            <FormGroup>
+              <FormLabel for="title">
+                Tytuł
+              </FormLabel>
+              <TextInput id="title" v-model="editForm.title" :error="editForm.errors.title" autocomplete="off" />
+              <FormError :error="editForm.errors.title" />
+            </FormGroup>
+            <FormGroup>
+              <FormLabel for="value">
+                Opis
+              </FormLabel>
+              <TextAreaEditor id="value" v-model="editForm.value" :error="editForm.errors.value"
+                              autocomplete="off"
+              />
+              <FormError :error="editForm.errors.value" />
+            </FormGroup>
+            <div class="mt-4 flex justify-end">
+              <Button class="mr-3" @click="[showEditForm = false]">
+                Zamknij
+              </Button>
+              <SubmitButton>
+                Zapisz
+              </SubmitButton>
+            </div>
+          </div>
+        </Section>
+      </form>
+      <div class="grid gap-4">
+        <div class="flex flex-col gap-4">
+          <h3 class="font-bold">
+            O mnie
+          </h3>
+          <div>
+            <div v-if="about.length" class="flex flex-col gap-8">
+              <TableWrapper>
+                <template #header>
+                  <TableHeader class="w-1/5">
+                    Tytuł
+                  </TableHeader>
+                  <TableHeader class="w-4/5">
+                    Opis
+                  </TableHeader>
+                  <TableHeader />
+                </template>
+                <template #body>
+                  <TableRow v-for="item in about" :key="item.id">
+                    <TableCell>
+                      {{ item.title }}
+                    </TableCell>
+                    <TableCell>
+                      <!-- eslint-disable vue/no-v-html -->
+                      <div class="prose" v-html="DOMPurify.sanitize(item.value)" />
+                      <!-- eslint-enable -->
+                    </TableCell>
+                    <TableCell class="flex justify-end gap-2">
+                      <Button @click="editSection(item)">
+                        <PencilSquareIcon class="w-5" />
+                      </Button>
+                      <Button class="text-red-600" @click="[showModal = true, sectionToDeleteId = item.id]">
+                        <XCircleIcon class="w-5" />
+                      </Button>
+                    </TableCell>
+                  </TableRow>
+                </template>
+              </TableWrapper>
+            </div>
+            <EmptyState v-else />
+          </div>
+        </div>
+        <div class="flex flex-col gap-4">
+          <h3 class="font-bold">
+            Liczniki
+          </h3>
+          <div>
+            <div v-if="counters.length" class="flex flex-col gap-8">
+              <TableWrapper>
+                <template #header>
+                  <TableHeader class="w-1/5">
+                    Tytuł
+                  </TableHeader>
+                  <TableHeader class="w-4/5">
+                    Opis
+                  </TableHeader>
+                  <TableHeader />
+                </template>
+                <template #body>
+                  <TableRow v-for="counter in counters" :key="counter.id">
+                    <TableCell>
+                      {{ counter.title }}
+                    </TableCell>
+                    <TableCell>
+                      <!-- eslint-disable vue/no-v-html -->
+                      <div class="prose" v-html="DOMPurify.sanitize(counter.value)" />
+                      <!-- eslint-enable -->
+                    </TableCell>
+                    <TableCell class="flex justify-end gap-2">
+                      <Button @click="editSection(counter)">
+                        <PencilSquareIcon class="w-5" />
+                      </Button>
+                      <Button class="text-red-600" @click="[showModal = true, sectionToDeleteId = counter.id]">
+                        <XCircleIcon class="w-5" />
+                      </Button>
+                    </TableCell>
+                  </TableRow>
+                </template>
+              </TableWrapper>
+            </div>
+            <EmptyState v-else />
+          </div>
+        </div>
+      </div>
+      <Section class="w-1/2">
+        <h3 class="mb-5 font-bold">
+          Widoczność sekcji strony głównej
+        </h3>
+        <form @submit.prevent="updateSectionSettings">
+          <FormGroup class="mb-2 flex items-center">
+            <input id="banner_enabled" v-model="sectionSettingsForm.banner_enabled" class="mr-3" type="checkbox">
+            <FormLabel class="!m-0" for="banner_enabled">
+              Baner
+            </FormLabel>
+          </FormGroup>
+          <FormGroup class="mb-2 flex items-center">
+            <input id="about_enabled" v-model="sectionSettingsForm.about_enabled" class="mr-3" type="checkbox">
+            <FormLabel class="!m-0" for="about_enabled">
+              O mnie
+            </FormLabel>
+          </FormGroup>
+          <FormGroup class="mb-2 flex items-center">
+            <input id="counters_enabled" v-model="sectionSettingsForm.counters_enabled" class="mr-3" type="checkbox">
+            <FormLabel class="!m-0" for="counters_enabled">
+              Liczniki
+            </FormLabel>
+          </FormGroup>
+          <FormGroup class="flex items-center">
+            <input id="contact_enabled" v-model="sectionSettingsForm.contact_enabled" class="mr-3" type="checkbox">
+            <FormLabel class="!m-0" for="contact_enabled">
+              Kontakt
+            </FormLabel>
+          </FormGroup>
+          <div class="flex justify-end">
+            <SubmitButton>
+              Zapisz
+            </SubmitButton>
+          </div>
+        </form>
+      </Section>
+    </div>
+  </DashboardLayout>
+  <RemoveModal
+    :href="`/dashboard/sections/${sectionToDeleteId}`"
+    :show="showModal"
+    @close="showModal = false"
+  />
+</template>
diff --git a/resources/js/Pages/Public/Home.vue b/resources/js/Pages/Public/Home.vue
index 174218a..a37c381 100644
--- a/resources/js/Pages/Public/Home.vue
+++ b/resources/js/Pages/Public/Home.vue
@@ -5,6 +5,7 @@ import {
 } from '@heroicons/vue/24/outline'
 import BackgroundGrid from '@/Components/BackgroundGrid.vue'
 import SectionHeader from '@/Components/SectionHeader.vue'
+import DOMPurify from 'dompurify'
 
 defineProps({
   title: String,
@@ -13,14 +14,15 @@ defineProps({
   department: String,
   university: String,
   universityLogo: String,
-  sections: Array,
+  sectionSettings: Object,
+  about: Array,
   counters: Array,
 })
 </script>
 
 <template>
   <PublicLayout>
-    <div class="relative isolate bg-white pt-14">
+    <div v-if="sectionSettings.banner_enabled" class="relative isolate bg-white pt-14">
       <BackgroundGrid />
       <img src="/cwup.png" alt="" class="absolute right-0 hidden w-[50%] opacity-10 lg:mt-16 lg:block xl:mt-10 2xl:mt-0">
       <div class="mx-auto max-w-7xl px-6 py-24 sm:py-32 lg:flex lg:items-center lg:gap-x-10 lg:px-8 lg:py-32">
@@ -39,8 +41,7 @@ defineProps({
         </div>
       </div>
     </div>
-
-    <div class="relative isolate bg-gradient-to-r from-gray-50 to-gray-100 py-24 sm:py-32">
+    <div v-if="sectionSettings.about_enabled && about.length" class="relative isolate bg-gradient-to-r from-gray-50 to-gray-100 py-24 sm:py-32">
       <BackgroundGrid mask-direction="left" />
       <div class="mx-auto max-w-7xl px-6 lg:px-8">
         <SectionHeader>
@@ -54,25 +55,23 @@ defineProps({
         <div
           class="mx-auto grid max-w-2xl grid-cols-1 gap-x-8 gap-y-16 pt-10 lg:mx-0 lg:max-w-none lg:grid-cols-3"
         >
-          <article v-for="section in sections" :key="section.title"
+          <article v-for="section in about" :key="section.id"
                    class="flex max-w-xl flex-col items-start justify-between"
           >
             <div class="group relative">
               <h3 class="mt-3 text-lg font-semibold leading-6 text-gray-900">
-                {{ section.header }}
+                {{ section.title }}
               </h3>
-              <p v-for="(paragraph, i) in section.paragraphs" :key="i"
-                 class="mt-5 text-sm leading-6 text-gray-600"
-              >
-                {{ paragraph }}
-              </p>
+              <!-- eslint-disable vue/no-v-html -->
+              <div class="prose mt-5 text-sm leading-6 text-gray-600" v-html="DOMPurify.sanitize(section.value)" />
+              <!-- eslint-enable -->
             </div>
           </article>
         </div>
       </div>
     </div>
 
-    <div class="relative isolate overflow-hidden bg-gray-900 py-24 sm:py-32">
+    <div v-if="sectionSettings.counters_enabled && counters.length" class="relative isolate overflow-hidden bg-gray-900 py-24 sm:py-32">
       <img
         src="https://images.unsplash.com/photo-1542831371-29b0f74f9713?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8M3x8cHJvZ3JhbW1pbmd8ZW58MHx8MHx8fDA%3D&auto=format&fit=crop&w=2850&q=80&blend=111827&blend-mode=multiply&sat=-100&exp=15"
         alt="" class="absolute inset-0 -z-10 h-full w-full object-cover"
@@ -82,18 +81,16 @@ defineProps({
           class="mx-auto grid max-w-2xl grid-cols-1 gap-x-8 gap-y-10 text-white sm:grid-cols-2 sm:gap-y-16 lg:mx-0 lg:max-w-none lg:grid-cols-4"
         >
           <div v-for="counter in counters" :key="counter.id" class="flex flex-col gap-y-3 border-l border-white pl-6">
-            <dt class="text-sm ">
-              {{ counter.name }}
-            </dt>
+            <dt class="prose text-sm text-white" v-html="counter.value" />
             <dd class="order-first text-5xl font-semibold tracking-tight">
-              {{ counter.value }}
+              {{ counter.title }}
             </dd>
           </div>
         </dl>
       </div>
     </div>
 
-    <div class="relative isolate bg-white py-24 sm:py-32">
+    <div v-if="sectionSettings.contact_enabled" class="relative isolate bg-white py-24 sm:py-32">
       <BackgroundGrid />
       <div class="mx-auto max-w-7xl px-6 xl:grid xl:grid-cols-2 xl:px-8">
         <SectionHeader>
diff --git a/routes/web.php b/routes/web.php
index f3c9953..2c7c7bc 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -14,6 +14,8 @@
 use App\Http\Controllers\Dashboard\LogoutController;
 use App\Http\Controllers\Dashboard\NewsManagementController;
 use App\Http\Controllers\Dashboard\PasswordUpdateController;
+use App\Http\Controllers\Dashboard\SectionController;
+use App\Http\Controllers\Dashboard\SectionSettingsController;
 use App\Http\Controllers\Dashboard\SemesterController;
 use App\Http\Controllers\Dashboard\SettingController;
 use App\Http\Controllers\Dashboard\StudentController;
@@ -124,4 +126,11 @@
         Route::get("/settings", "edit")->name("settings.edit");
         Route::patch("/settings", "update")->name("settings.update");
     });
+    Route::controller(SectionController::class)->group(function (): void {
+        Route::get("/sections", "show")->name("sections.show");
+        Route::post("/sections", "store")->name("sections.store");
+        Route::patch("/sections/{section}", "update")->name("sections.update");
+        Route::delete("/sections/{section}", "destroy")->name("sections.update");
+    });
+    Route::patch("/section-settings", SectionSettingsController::class)->name("section.settings.update");
 });
diff --git a/tailwind.config.js b/tailwind.config.js
index 0134a42..1b9f7f3 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -9,6 +9,7 @@ module.exports = {
     },
     plugins: [
         require('@tailwindcss/forms'),
+        require('@tailwindcss/typography'),
     ],
     safelist: [
         '[mask-image:radial-gradient(100%_100%_at_top_right,white,transparent)]',
diff --git a/tests/Feature/ExampleTest.php b/tests/Feature/ExampleTest.php
index 76894f9..940210c 100644
--- a/tests/Feature/ExampleTest.php
+++ b/tests/Feature/ExampleTest.php
@@ -4,6 +4,7 @@
 
 namespace Tests\Feature;
 
+use App\Models\SectionSettings;
 use App\Models\Setting;
 use Tests\TestCase;
 
@@ -12,6 +13,7 @@ class ExampleTest extends TestCase
     public function testTheApplicationReturnsASuccessfulResponse(): void
     {
         Setting::factory()->create();
+        SectionSettings::factory()->create();
 
         $response = $this->get("/");
 
diff --git a/tests/Feature/SectionsTest.php b/tests/Feature/SectionsTest.php
new file mode 100644
index 0000000..b4bca2b
--- /dev/null
+++ b/tests/Feature/SectionsTest.php
@@ -0,0 +1,152 @@
+<?php
+
+declare(strict_types=1);
+
+namespace Feature;
+
+use App\Models\Section;
+use App\Models\SectionSettings;
+use App\Models\User;
+use Illuminate\Foundation\Testing\RefreshDatabase;
+use Illuminate\Support\Str;
+use Tests\TestCase;
+
+class SectionsTest extends TestCase
+{
+    use RefreshDatabase;
+
+    protected function setUp(): void
+    {
+        parent::setUp();
+
+        $this->user = User::factory()->create();
+        $this->actingAs($this->user);
+    }
+
+    public function testSectionCanBeCreated(): void
+    {
+        $this->assertDatabaseEmpty("sections");
+
+        $this->post("/dashboard/sections", [
+            "title" => "About me",
+            "value" => "Lorem ipsum",
+            "type" => "about",
+        ])->assertSessionHasNoErrors()
+            ->assertValid([
+                "title",
+                "value",
+                "type",
+            ]);
+
+        $this->assertDatabaseHas("sections", [
+            "title" => "About me",
+            "value" => "Lorem ipsum",
+            "type" => "about",
+        ]);
+    }
+
+    public function testSectionCannotBeCreatedWithInvalidData(): void
+    {
+        $this->assertDatabaseEmpty("sections");
+
+        $this->post("/dashboard/sections", [
+            "title" => Str::random(256),
+            "value" => Str::random(65001),
+            "type" => "invalid-about",
+        ])->assertSessionHasErrors()
+            ->assertInvalid([
+                "title",
+                "value",
+                "type",
+            ]);
+
+        $this->assertDatabaseEmpty("sections");
+    }
+
+    public function testSectionCannotBeCreatedWithInvalidType(): void
+    {
+        $this->assertDatabaseEmpty("sections");
+
+        $this->post("/dashboard/sections", [
+            "title" => Str::random(255),
+            "value" => Str::random(65000),
+            "type" => "invalid",
+        ])->assertSessionHasErrors()
+            ->assertInvalid([
+                "type",
+            ]);
+
+        $this->assertDatabaseEmpty("sections");
+    }
+
+    public function testSectionCanBeUpdated(): void
+    {
+        $section = Section::factory()->create();
+
+        $this->assertDatabaseHas("sections", [
+            "title" => $section->title,
+            "value" => $section->value,
+            "type" => $section->type->value,
+        ]);
+
+        $this->patch("/dashboard/sections/{$section->id}", [
+            "title" => "About me",
+            "value" => "Lorem ipsum",
+            "type" => "about",
+        ])->assertSessionHasNoErrors()
+            ->assertValid([
+                "title",
+                "value",
+                "type",
+            ]);
+
+        $this->assertDatabaseHas("sections", [
+            "title" => "About me",
+            "value" => "Lorem ipsum",
+            "type" => "about",
+        ]);
+    }
+
+    public function testSectionCanBeDeleted(): void
+    {
+        $section = Section::factory()->create();
+
+        $this->assertDatabaseCount("sections", 1);
+
+        $this->delete("/dashboard/sections/{$section->id}")
+            ->assertSessionHasNoErrors();
+
+        $this->assertDatabaseCount("sections", 0);
+    }
+
+    public function testSectionSettingsCanBeUpdated(): void
+    {
+        SectionSettings::factory()->create([
+            "banner_enabled" => true,
+            "about_enabled" => true,
+            "counters_enabled" => true,
+            "contact_enabled" => true,
+        ]);
+
+        $this->assertDatabaseHas("section_settings", [
+            "banner_enabled" => true,
+            "about_enabled" => true,
+            "counters_enabled" => true,
+            "contact_enabled" => true,
+        ]);
+
+        $this->patch("/dashboard/section-settings", [
+            "banner_enabled" => false,
+            "about_enabled" => false,
+            "counters_enabled" => false,
+            "contact_enabled" => false,
+        ])->assertSessionHasNoErrors();
+
+        $this->assertDatabaseHas("section_settings", [
+            "banner_enabled" => false,
+            "about_enabled" => false,
+            "counters_enabled" => false,
+            "contact_enabled" => false,
+        ]);
+    }
+}
diff --git a/tests/Feature/SettingsTest.php b/tests/Feature/SettingsTest.php
index 190ae82..f86add0 100644
--- a/tests/Feature/SettingsTest.php
+++ b/tests/Feature/SettingsTest.php
@@ -19,7 +19,7 @@ protected function setUp(): void
         parent::setUp();
 
         $this->user = User::factory()->create();
-        $this->gradeColumn = Setting::factory()->create([
+        Setting::factory()->create([
             "teacher_name" => "Ty Doe",
             "teacher_email" => "ty.doe@exmple.com",
             "teacher_titles" => "dr inż.",