feat: add new platform icons for Android, iOS, Windows, macOS, Huawei, Meta Quest, and Web, along with updated styling for improved responsiveness and accessibility in the app development section

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

@@ -44,7 +44,26 @@
         line-height: 1;
     }
 
-    /* Platform logoları — kutu/arkaplan yok */
+    /* Platform logoları — Wikimedia Commons kaynaklı, yetkinlikler üst şerit */
+    .app-dev-platform-strip img {
+        display: block;
+        width: auto;
+        height: 2.5rem;
+        max-width: 100%;
+        margin-left: auto;
+        margin-right: auto;
+        object-fit: contain;
+    }
+    @media (min-width: 768px) {
+        .app-dev-platform-strip img {
+            height: 3rem;
+        }
+    }
+    @media (min-width: 1200px) {
+        .app-dev-platform-strip img {
+            height: 3.25rem;
+        }
+    }
     .app-dev-platforms {
         display: flex;
         flex-wrap: nowrap;
@@ -60,18 +79,6 @@
     .app-dev-platforms::-webkit-scrollbar {
         display: none;
     }
-    @media (min-width: 576px) {
-        .app-dev-platforms {
-            gap: 1.25rem;
-        }
-    }
-    @media (min-width: 992px) {
-        .app-dev-platforms {
-            justify-content: flex-start;
-            flex-wrap: wrap;
-            overflow-x: visible;
-        }
-    }
     .app-dev-platform-item {
         display: inline-flex;
         align-items: center;
@@ -88,12 +95,6 @@
         object-fit: contain;
         flex-shrink: 0;
     }
-    @media (min-width: 576px) {
-        .app-dev-platform-icon {
-            width: 2.35rem;
-            height: 2.35rem;
-        }
-    }
 </style>
 @endpush
 
@@ -106,13 +107,13 @@
     ];
 
     $platforms = [
-        ['name' => 'Android', 'logo' => 'android.svg'],
+        ['name' => 'Android', 'logo' => 'android.png'],
-        ['name' => 'iOS', 'logo' => 'ios.svg'],
+        ['name' => 'iOS', 'logo' => 'ios.png'],
-        ['name' => 'Windows', 'logo' => 'windows.svg'],
+        ['name' => 'Windows', 'logo' => 'windows.png'],
-        ['name' => 'macOS', 'logo' => 'macos.svg'],
+        ['name' => 'macOS', 'logo' => 'macos.png'],
-        ['name' => 'Huawei AppGallery', 'logo' => 'huawei.svg'],
+        ['name' => 'Huawei AppGallery', 'logo' => 'huawei.png'],
-        ['name' => 'Meta Quest', 'logo' => 'meta-quest.svg'],
+        ['name' => 'Meta Quest', 'logo' => 'meta-quest.png'],
-        ['name' => 'Web', 'logo' => 'web.svg'],
+        ['name' => 'Web', 'logo' => 'web.png'],
     ];
 
     $features = [
@@ -266,9 +267,6 @@
                 <p class="lead !text-[1.2rem] !leading-[1.5] !font-normal !mb-7">
                     {!! t('Trunçgil Teknoloji olarak Android, iOS, Windows, macOS, Huawei AppGallery, Meta Quest ve web için uygulamalarınızı fikirden yayına kadar hayata geçiriyoruz.') !!}
                 </p>
-                <div class="flex justify-center lg:!justify-start xl:!justify-start" data-cues="slideInDown" data-group="page-title-buttons" data-delay="1800">
-                    <x-front.platform-badges :platforms="$platforms" />
-                </div>
             </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">
@@ -294,6 +292,22 @@
 {{-- Features --}}
 <section class="wrapper !bg-[#ffffff] app-dev-section">
     <div class="container pt-32 xl:pt-40 lg:pt-40 md:pt-40 pb-[4.5rem] xl:pb-24 lg:pb-24 md:pb-24">
+        <div class="flex flex-wrap mx-[-15px] row-cols-4 row-cols-md-4 row-cols-lg-7 row-cols-xl-7 !mt-[-50px] !mb-10 xl:!mb-14 items-center justify-center app-dev-platform-strip">
+            @foreach($platforms as $platform)
+            <div class="w-1/4 xl:w-[14.2857142857%] lg:w-[14.2857142857%] md:w-1/4 flex-[0_0_auto] !px-[15px] !mt-[50px] max-w-full">
+                <img
+                    class="md:!px-[0.75rem] lg:!px-0 xl:!px-[0.5rem] xxl:!px-[1.25rem]"
+                    src="{{ asset('assets/img/platforms/' . $platform['logo']) }}"
+                    alt="{{ t($platform['name']) }}"
+                    width="128"
+                    height="128"
+                    loading="lazy"
+                    decoding="async"
+                >
+            </div>
+            @endforeach
+        </div>
+
         <div class="flex flex-wrap mx-[-15px] !text-center">
             <div class="lg:w-10/12 xl:w-9/12 xxl:w-8/12 flex-[0_0_auto] !px-[15px] max-w-full !mx-auto !relative">
                 <img src="{{ asset('assets/img/svg/doodle3.svg') }}" class="!h-[3rem] absolute hidden xl:block lg:block" style="top: -45%; left: 23%" alt="" loading="lazy">