feat: update platform icons and badges with improved styling, responsive design, and enhanced accessibility for app development section

resources/views/components/front/platform-badges.blade.php

@@ -4,17 +4,16 @@
 
 <div {{ $attributes->class(['app-dev-platforms']) }}>
     @foreach($platforms as $platform)
-    <span class="app-dev-platform-pill" title="{{ t($platform['name']) }}">
+    <span class="app-dev-platform-item" title="{{ t($platform['name']) }}">
         <img
             src="{{ asset('assets/img/platforms/' . $platform['logo']) }}"
             class="app-dev-platform-icon"
-            alt=""
-            width="28"
-            height="28"
+            alt="{{ t($platform['name']) }}"
+            width="38"
+            height="38"
             loading="lazy"
             decoding="async"
         >
-        <span class="app-dev-platform-label">{!! t($platform['label'] ?? $platform['name']) !!}</span>
     </span>
     @endforeach
 </div>

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

@@ -44,13 +44,13 @@
         line-height: 1;
     }
 
-    /* Desteklenen platform rozetleri */
+    /* Platform logoları — kutu/arkaplan yok */
     .app-dev-platforms {
         display: flex;
         flex-wrap: nowrap;
-        align-items: stretch;
+        align-items: center;
         justify-content: center;
-        gap: 0.5rem;
+        gap: 1rem;
         max-width: 100%;
         overflow-x: auto;
         padding-bottom: 0.15rem;
@@ -60,6 +60,11 @@
     .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;
@@ -67,34 +72,27 @@
             overflow-x: visible;
         }
     }
-    .app-dev-platform-pill {
+    .app-dev-platform-item {
         display: inline-flex;
-        flex-direction: column;
         align-items: center;
         justify-content: center;
-        flex: 0 0 4.75rem;
-        width: 4.75rem;
-        min-height: 4.75rem;
-        padding: 0.5rem 0.35rem;
-        gap: 0.35rem;
-        color: #343f52;
-        background: rgba(255, 255, 255, 0.92);
-        border: 1px solid rgba(52, 63, 82, 0.1);
-        border-radius: 0.65rem;
-        text-align: center;
+        flex: 0 0 auto;
+        padding: 0;
+        background: none;
+        border: none;
     }
     .app-dev-platform-icon {
         display: block;
-        width: 1.75rem;
-        height: 1.75rem;
+        width: 2rem;
+        height: 2rem;
         object-fit: contain;
         flex-shrink: 0;
     }
-    .app-dev-platform-label {
-        font-size: 0.62rem;
-        font-weight: 600;
-        line-height: 1.15;
-        max-width: 100%;
+    @media (min-width: 576px) {
+        .app-dev-platform-icon {
+            width: 2.35rem;
+            height: 2.35rem;
+        }
     }
 </style>
 @endpush
@@ -108,13 +106,13 @@
     ];
 
     $platforms = [
-        ['name' => 'Android', 'label' => 'Android', 'logo' => 'android.svg'],
-        ['name' => 'iOS', 'label' => 'iOS', 'logo' => 'ios.svg'],
-        ['name' => 'Windows', 'label' => 'Windows', 'logo' => 'windows.svg'],
-        ['name' => 'macOS', 'label' => 'macOS', 'logo' => 'macos.svg'],
-        ['name' => 'Huawei AppGallery', 'label' => 'Huawei', 'logo' => 'huawei.svg'],
-        ['name' => 'Meta Quest', 'label' => 'Quest', 'logo' => 'meta-quest.svg'],
-        ['name' => 'Web', 'label' => 'Web', 'logo' => 'web.svg'],
+        ['name' => 'Android', 'logo' => 'android.svg'],
+        ['name' => 'iOS', 'logo' => 'ios.svg'],
+        ['name' => 'Windows', 'logo' => 'windows.svg'],
+        ['name' => 'macOS', 'logo' => 'macos.svg'],
+        ['name' => 'Huawei AppGallery', 'logo' => 'huawei.svg'],
+        ['name' => 'Meta Quest', 'logo' => 'meta-quest.svg'],
+        ['name' => 'Web', 'logo' => 'web.svg'],
     ];
 
     $features = [