feat: add new illustrations for app development section, including process, platforms, and call-to-action images, along with updated styles for improved responsiveness and visual consistency

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

@@ -162,6 +162,30 @@
             padding-top: 4rem !important;
         }
     }
+
+    /* Isometric 3D illüstrasyonlar */
+    .app-dev-illustration {
+        display: block;
+        width: 100%;
+        max-width: 100%;
+        height: auto;
+        margin-left: auto;
+        margin-right: auto;
+    }
+    .app-dev-illustration--process {
+        max-width: 28rem;
+    }
+    @media (min-width: 992px) {
+        .app-dev-illustration--process {
+            max-width: 22rem;
+        }
+    }
+    .app-dev-illustration--platforms {
+        max-width: 36rem;
+    }
+    .app-dev-illustration--cta {
+        max-width: 32rem;
+    }
 </style>
 @endpush
 
@@ -419,8 +443,8 @@
                     <div class="md:w-6/12 lg:w-4/12 xl:w-4/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto !mb-[-2.5rem] lg:!mb-0 xl:!mb-0 !mt-[50px] xl:!mt-0 lg:!mt-0">
                         <figure class="mx-auto">
                             <picture>
-                                <source srcset="{{ asset('assets/img/photos/devices4.webp') }}" type="image/webp">
-                                <img src="{{ asset('assets/img/photos/devices4.png') }}" alt="{!! t('Trunçgil Teknoloji uygulama geliştirme süreci') !!}" width="373" height="682" loading="lazy" decoding="async">
+                                <source srcset="{{ asset('assets/img/illustrations/app-dev/app-dev-process.png') }}" type="image/webp">
+                                <img class="app-dev-illustration app-dev-illustration--process" src="{{ asset('assets/img/illustrations/app-dev/app-dev-process.png') }}" alt="{!! t('Trunçgil Teknoloji uygulama geliştirme süreci') !!}" width="800" height="800" loading="lazy" decoding="async">
                             </picture>
                         </figure>
                     </div>
@@ -523,8 +547,8 @@
             <div class="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] !px-[15px] max-w-full xl:!sticky lg:!sticky" style="top: 8rem;">
                 <figure class="m-0 p-0">
                     <picture>
-                        <source srcset="{{ asset('assets/img/photos/devices5.webp') }}" type="image/webp">
-                        <img class="w-full max-w-full !h-auto" src="{{ asset('assets/img/photos/devices5.png') }}" alt="{!! t('Trunçgil Teknoloji çoklu platform uygulamalar') !!}" width="630" height="795" loading="lazy" decoding="async">
+                        <source srcset="{{ asset('assets/img/illustrations/app-dev/app-dev-platforms.webp') }}" type="image/webp">
+                        <img class="app-dev-illustration app-dev-illustration--platforms w-full max-w-full !h-auto" src="{{ asset('assets/img/illustrations/app-dev/app-dev-platforms.png') }}" alt="{!! t('Trunçgil Teknoloji çoklu platform uygulamalar') !!}" width="1024" height="1024" loading="lazy" decoding="async">
                     </picture>
                 </figure>
             </div>
@@ -612,8 +636,8 @@
             <div class="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] max-w-full !ml-auto !mt-lg-n15 xl:!mt-[-10rem] lg:!mt-[-5rem] !mt-[50px]">
                 <figure class="m-0 p-0">
                     <picture>
-                        <source srcset="{{ asset('assets/img/photos/devices6.webp') }}" type="image/webp">
-                        <img class="w-full max-w-full !h-auto" src="{{ asset('assets/img/photos/devices6.png') }}" alt="{!! t('Trunçgil Teknoloji uygulama geliştirme') !!}" width="645" height="725" loading="lazy" decoding="async">
+                        <source srcset="{{ asset('assets/img/illustrations/app-dev/app-dev-cta.png') }}" type="image/webp">
+                        <img class="app-dev-illustration app-dev-illustration--cta w-full max-w-full !h-auto" src="{{ asset('assets/img/illustrations/app-dev/app-dev-cta.png') }}" alt="{!! t('Trunçgil Teknoloji uygulama geliştirme') !!}" width="1024" height="1024" loading="lazy" decoding="async">
                     </picture>
                 </figure>
             </div>