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

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

@@ -44,7 +44,7 @@
         line-height: 1;
     }
 
-    /* Platform logoları — Wikimedia Commons kaynaklı, yetkinlikler üst şerit */
+    /* Platform logoları — yetkinlikler üst şerit */
     .app-dev-platform-strip img {
         display: block;
         width: auto;
@@ -95,6 +95,40 @@
         object-fit: contain;
         flex-shrink: 0;
     }
+
+    /* Hero — metin üstte, görsel altta */
+    .app-dev-hero .app-dev-hero-text {
+        position: relative;
+        z-index: 2;
+    }
+    .app-dev-hero .app-dev-hero-image {
+        position: relative;
+        z-index: 2;
+        width: 100%;
+        max-width: 42rem;
+        margin-left: auto;
+        margin-right: auto;
+    }
+    @media (min-width: 768px) {
+        .app-dev-hero .app-dev-hero-image {
+            max-width: 48rem;
+        }
+    }
+    @media (min-width: 1200px) {
+        .app-dev-hero .app-dev-hero-image {
+            max-width: 56rem;
+        }
+    }
+    @media (min-width: 1400px) {
+        .app-dev-hero .app-dev-hero-image {
+            max-width: 62rem;
+        }
+    }
+    .app-dev-hero .app-dev-hero-image img {
+        width: 100%;
+        max-width: 100%;
+        height: auto;
+    }
 </style>
 @endpush
 
@@ -107,13 +141,13 @@
     ];
 
     $platforms = [
-        ['name' => 'Android', 'logo' => 'android.png'],
+        ['name' => 'Android', 'logo' => 'android-copy.png'],
         ['name' => 'iOS', 'logo' => 'ios.png'],
-        ['name' => 'Windows', 'logo' => 'windows.png'],
-        ['name' => 'macOS', 'logo' => 'macos.png'],
+        ['name' => 'Windows', 'logo' => 'windows-logo.png'],
+        ['name' => 'macOS', 'logo' => 'apple-logo.png'],
         ['name' => 'Huawei AppGallery', 'logo' => 'huawei.png'],
-        ['name' => 'Meta Quest', 'logo' => 'meta-quest.png'],
-        ['name' => 'Web', 'logo' => 'web.png'],
+        ['name' => 'Meta Quest', 'logo' => 'meta.png'],
+        ['name' => 'Ubuntu', 'logo' => 'ubuntu.png'],
     ];
 
     $features = [
@@ -255,20 +289,20 @@
 @endphp
 
 {{-- Hero --}}
-<section class="wrapper image-wrapper bg-full bg-image bg-overlay bg-overlay-light-600 [background-size:100%] bg-[center_center] bg-no-repeat bg-scroll relative z-0 before:content-[''] before:block before:absolute before:z-[1] before:w-full before:h-full before:left-0 before:top-0 before:bg-[rgba(255,255,255,.6)]" data-image-src="{{ asset('assets/img/photos/bg23.webp') }}" style="background-image: url('{{ asset('assets/img/photos/bg23.webp') }}');">
-    <div class="container pt-24 xl:pt-32 lg:pt-32 md:pt-32 pb-9">
-        <div class="flex flex-wrap mx-0 !mt-[-50px] items-center text-center lg:text-left xl:text-left">
-            <div class="xl:w-6/12 lg:w-6/12 xxl:w-5/12 w-full flex-[0_0_auto] max-w-full !relative !mt-[50px]" data-cues="slideInDown" data-group="page-title" data-delay="700">
-                <img src="{{ asset('assets/img/svg/doodle1.svg') }}" class="h-9 !absolute hidden xl:block lg:block" data-cue="fadeIn" data-delay="3000" style="top: -9%; left: -6%" alt="" loading="lazy">
-                <img src="{{ asset('assets/img/svg/doodle2.svg') }}" class="!h-[5rem] !absolute hidden xl:block lg:block" data-cue="fadeIn" data-delay="3000" style="bottom: 9%; right: -22%" alt="" loading="lazy">
+<section class="wrapper image-wrapper bg-full bg-image bg-overlay bg-overlay-light-600 [background-size:100%] bg-[center_center] bg-no-repeat bg-scroll relative z-0 before:content-[''] before:block before:absolute before:z-[1] before:w-full before:h-full before:left-0 before:top-0 before:bg-[rgba(255,255,255,.6)] app-dev-hero" data-image-src="{{ asset('assets/img/photos/bg23.webp') }}" style="background-image: url('{{ asset('assets/img/photos/bg23.webp') }}');">
+    <div class="container pt-24 xl:pt-32 lg:pt-32 md:pt-32 pb-6 xl:pb-8">
+        <div class="flex flex-col mx-0 !mt-[-50px] items-center text-center">
+            <div class="w-full xl:w-10/12 lg:w-10/12 xxl:w-8/12 flex-[0_0_auto] max-w-full !relative !mt-[50px] app-dev-hero-text" data-cues="slideInDown" data-group="page-title" data-delay="700">
+                <img src="{{ asset('assets/img/svg/doodle1.svg') }}" class="h-9 !absolute hidden xl:block lg:block" data-cue="fadeIn" data-delay="3000" style="top: -12%; left: 4%" alt="" loading="lazy">
+                <img src="{{ asset('assets/img/svg/doodle2.svg') }}" class="!h-[5rem] !absolute hidden xl:block lg:block" data-cue="fadeIn" data-delay="3000" style="bottom: 0; right: -8%" alt="" loading="lazy">
                 <h1 class="xl:!text-[2.5rem] !text-[calc(1.375rem_+_1.5vw)] font-semibold !leading-[1.15] !mb-4">
                     {!! t('Tüm platformlarda') !!} <span class="text-gradient gradient-7">{!! t('güçlü uygulamalar') !!}</span> {!! t('geliştiriyoruz.') !!}
                 </h1>
-                <p class="lead !text-[1.2rem] !leading-[1.5] !font-normal !mb-7">
+                <p class="lead !text-[1.2rem] !leading-[1.5] !font-normal !mb-0 xl:!px-8">
                     {!! 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>
-            <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">
+            <div class="app-dev-hero-image !mt-8 xl:!mt-10 lg:!mt-10 md:!mt-10 !mb-[-4rem] xl:!mb-[-6rem] lg:!mb-[-5rem]" data-cues="slideInDown" data-delay="600">
                 <figure class="m-0 p-0">
                     <x-front.page-hero-image
                         :hero="$pageHero"