Implemented a block editor for changing the layout of the page

resources/views/components/blocks/image.blade.php

@@ -0,0 +1,49 @@
+@props([
+    'block',
+])
+
+@php
+    /** @var \App\Models\PageBlock $block */
+    use Illuminate\Support\Facades\Storage;
+
+    $c = $block->content ?? [];
+    $path = data_get($c, 'image');
+    $src = is_string($path) && $path !== '' ? Storage::disk('public')->url($path) : null;
+    $rawLink = data_get($c, 'link_url');
+    $linkUrl = null;
+    if (is_string($rawLink) && preg_match('/\Ahttps?:\/\//i', trim($rawLink)) === 1) {
+        $linkUrl = trim($rawLink);
+    }
+    $alt = is_string(data_get($c, 'alt')) ? (string) data_get($c, 'alt') : '';
+    $maxW = max(48, min(800, (int) data_get($c, 'max_width_px', 320)));
+    $align = (string) data_get($c, 'text_alignment', 'center');
+    // text-align + inline-block centers reliably; flex + max-w-full often yields full-width flex items.
+    $textAlignClass = match ($align) {
+        'left' => 'text-left',
+        'right' => 'text-right',
+        default => 'text-center',
+    };
+@endphp
+
+@if ($src !== null)
+    <div class="w-full {{ $textAlignClass }}">
+        @if ($linkUrl !== null)
+            <a
+                href="{{ e($linkUrl) }}"
+                target="_blank"
+                rel="noopener noreferrer"
+                class="inline-block max-w-full align-middle"
+            >
+        @endif
+        <img
+            src="{{ e($src) }}"
+            alt="{{ e($alt) }}"
+            class="inline-block h-auto w-auto max-w-full align-middle object-contain drop-shadow-[0_8px_32px_rgba(0,0,0,0.35)]"
+            style="max-width: min(100%, {{ $maxW }}px)"
+            loading="lazy"
+        >
+        @if ($linkUrl !== null)
+            </a>
+        @endif
+    </div>
+@endif