feat: implement page template hero functionality with dynamic image handling and localization support for enhanced visual presentation

resources/views/components/front/page-hero-image.blade.php

@@ -0,0 +1,33 @@
+@props([
+    'hero' => null,
+    'alt' => '',
+])
+
+@if($hero)
+    @if(!empty($hero['from_upload']))
+        <img
+            {{ $attributes->merge(['class' => 'w-full max-w-full !h-auto']) }}
+            src="{{ $hero['image'] }}"
+            alt="{{ $alt }}"
+            @if(!empty($hero['width'])) width="{{ $hero['width'] }}" @endif
+            @if(!empty($hero['height'])) height="{{ $hero['height'] }}" @endif
+            fetchpriority="high"
+            decoding="async"
+        >
+    @else
+        <picture>
+            @if(!empty($hero['webp']))
+            <source srcset="{{ asset($hero['webp']) }}" type="image/webp">
+            @endif
+            <img
+                {{ $attributes->merge(['class' => 'w-full max-w-full !h-auto']) }}
+                src="{{ asset($hero['image']) }}"
+                alt="{{ $alt }}"
+                width="{{ $hero['width'] ?? 735 }}"
+                height="{{ $hero['height'] ?? 735 }}"
+                fetchpriority="high"
+                decoding="async"
+            >
+        </picture>
+    @endif
+@endif

resources/views/templates/services/app-development.blade.php

@@ -1,7 +1,17 @@
 @extends('layouts.site', ['header' => 'partials.header-app-development', 'footer' => 'partials.footer'])
 
+@php
+    $pageHero = $pageHero ?? \App\Support\PageTemplateHero::resolveForPage($page ?? null, 'services.app-development');
+@endphp
+
 @push('head')
-<link rel="preload" as="image" href="{{ asset('assets/img/photos/truncgil-mobile-app.webp') }}" type="image/webp" fetchpriority="high">
+@if($pageHero)
+    @if(!empty($pageHero['from_upload']))
+    <link rel="preload" as="image" href="{{ $pageHero['image'] }}" fetchpriority="high">
+    @elseif(!empty($pageHero['webp']))
+    <link rel="preload" as="image" href="{{ asset($pageHero['webp']) }}" type="image/webp" fetchpriority="high">
+    @endif
+@endif
 @endpush
 
 @push('styles')
@@ -264,10 +274,10 @@
             </div>
             <div class="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] max-w-full !ml-auto !mb-[-10rem] xxl:!mb-[-15rem] !mt-[50px]" data-cues="slideInDown" data-delay="600">
                 <figure class="m-0 p-0">
-                    <picture>
-                        <source srcset="{{ asset('assets/img/photos/truncgil-mobile-app.webp') }}" type="image/webp">
-                        <img class="w-full max-w-full !h-auto" src="{{ asset('assets/img/photos/truncgil-mobile-app.png') }}" alt="{!! t('Trunçgil Teknoloji çoklu platform uygulama geliştirme') !!}" width="735" height="735" fetchpriority="high" decoding="async">
-                    </picture>
+                    <x-front.page-hero-image
+                        :hero="$pageHero"
+                        :alt="t('Trunçgil Teknoloji çoklu platform uygulama geliştirme')"
+                    />
                 </figure>
             </div>
         </div>