Files
citrus/resources/views/templates/services/app-development.blade.php
T

536 lines
33 KiB
PHP
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
@extends('layouts.site', ['header' => 'partials.header-app-development', 'footer' => 'partials.footer'])
@push('head')
<link rel="preload" as="image" href="{{ asset('assets/img/photos/truncgil-mobile-app.webp') }}" type="image/webp" fetchpriority="high">
@endpush
@push('styles')
<style>
.app-dev-section .accordion-wrapper .card-header button.collapsed {
color: #343f52 !important;
}
.app-dev-section .accordion-wrapper .card-header button:hover,
.app-dev-section .accordion-wrapper .card-header button {
color: #e31e24 !important;
}
.uil-search-alt:before { content: "\eca3"; }
.uil-palette:before { content: "\ec3a"; }
.uil-mobile-android:before { content: "\ec0a"; }
.uil-apple:before { content: "\e938"; }
.uil-shield-check:before { content: "\ecb2"; }
.uil-store:before { content: "\ed04"; }
.uil-check-circle:before { content: "\e9db"; }
.uil-rocket:before { content: "\ec8c"; }
.uil-chart-line:before { content: "\e9d3"; }
.uil-headphones-alt:before { content: "\eb5f"; }
.uil-arrow-up-right:before { content: "\e950"; }
.uil-windows:before { content: "\eda9"; }
.uil-cube:before { content: "\e9b8"; }
.svg-bg i[class*="uil-"],
.svg-bg i[class*="uil-"]:before {
font-size: 2rem !important;
line-height: 1;
}
/* Desteklenen platform rozetleri */
.app-dev-platforms {
display: flex;
flex-wrap: nowrap;
align-items: stretch;
justify-content: center;
gap: 0.5rem;
max-width: 100%;
overflow-x: auto;
padding-bottom: 0.15rem;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.app-dev-platforms::-webkit-scrollbar {
display: none;
}
@media (min-width: 992px) {
.app-dev-platforms {
justify-content: flex-start;
flex-wrap: wrap;
overflow-x: visible;
}
}
.app-dev-platform-pill {
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;
}
.app-dev-platform-icon {
display: block;
width: 1.75rem;
height: 1.75rem;
object-fit: contain;
flex-shrink: 0;
}
.app-dev-platform-label {
font-size: 0.62rem;
font-weight: 600;
line-height: 1.15;
max-width: 100%;
}
</style>
@endpush
@section('content')
@php
$featureBgColors = [
'#fef3e4', '#e1f6f0', '#e9eaf8', '#f8e7ec',
'#f0eaf6', '#feece9', '#e0e9fa', '#eaf3ef',
];
$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'],
];
$features = [
['icon' => 'uil-search-alt', 'title' => 'Keşif ve Strateji'],
['icon' => 'uil-palette', 'title' => 'UI/UX Tasarım'],
['icon' => 'uil-mobile-android', 'title' => 'Mobil (Android & iOS)'],
['icon' => 'uil-windows', 'title' => 'Masaüstü (Windows & macOS)'],
['icon' => 'uil-store', 'title' => 'Huawei AppGallery'],
['icon' => 'uil-cube', 'title' => 'VR (Meta Quest)'],
['icon' => 'uil-shield-check', 'title' => 'Güvenlik ve Test'],
['icon' => 'uil-rocket', 'title' => 'Yayın ve Dağıtım'],
];
$processSteps = [
[
'title' => 'Keşif ve Analiz',
'description' => 'Trunçgil Teknoloji ekibi, hedef kitlenizi, iş hedeflerinizi ve hangi platformlarda (mobil, masaüstü, VR, web) yayınlanacağınızı analiz ederek projenin yol haritasını birlikte oluşturur.',
],
[
'title' => 'Tasarım ve Prototip',
'description' => 'Her platformun arayüz standartlarına uygun tasarımlar ve tıklanabilir prototiplerle Android, iOS, Windows, macOS ve VR deneyimleri tutarlı şekilde planlanır.',
],
[
'title' => 'Geliştirme ve Test',
'description' => 'Seçilen platformlarda titiz kodlama, otomatik testler ve gerçek cihazlarda QA ile uygulamanız performanslı ve hatasız şekilde inşa edilir.',
],
[
'title' => 'Yayın ve Sürekli Destek',
'description' => 'Google Play, App Store, Microsoft Store, Huawei AppGallery, Meta Quest Store ve kurumsal dağıtım süreçlerini yönetir; yayın sonrası izleme ve bakım sunarız.',
],
];
$whyChoose = [
[
'icon' => 'uil-mobile-android',
'bg' => '#e6e5f4',
'title' => 'Çoklu Platform Uzmanlığı',
'description' => 'Trunçgil Teknoloji; mobil, masaüstü, VR ve web için Kotlin, Swift, Flutter, .NET ve Unity tabanlı çözümlerle tek ekipten uçtan uca geliştirme sunar.',
],
[
'icon' => 'uil-windows',
'bg' => '#e1f6f0',
'title' => 'Windows ve macOS Uygulamaları',
'description' => 'WinUI, WPF, Electron ve native macOS uygulamalarıyla kurumsal masaüstü yazılımlarınızı güvenli ve ölçeklenebilir şekilde hayata geçiririz.',
],
[
'icon' => 'uil-store',
'bg' => '#f8e7ec',
'title' => 'Mağaza ve Dağıtım Deneyimi',
'description' => 'Google Play, App Store, Microsoft Store, Huawei AppGallery ve Meta Quest Store yayın süreçlerinde politika uyumu ve inceleme hazırlığı sağlarız.',
],
[
'icon' => 'uil-cube',
'bg' => '#fef3e4',
'title' => 'Meta Quest ve VR Geliştirme',
'description' => 'Eğitim, simülasyon ve etkileşimli deneyimler için Meta Quest platformunda performanslı VR uygulamaları geliştiriyoruz.',
],
[
'icon' => 'uil-shield-check',
'bg' => '#e0e9fa',
'title' => 'Kapsamlı Test Süreci',
'description' => 'Birim testleri, entegrasyon testleri ve hedef platformlarda manuel QA ile uygulamanızı yayına hazır hale getiriyoruz.',
],
[
'icon' => 'uil-headphones-alt',
'bg' => '#eaf3ef',
'title' => 'Sürekli Bakım ve Destek',
'description' => 'Yayın sonrası hata düzeltmeleri, işletim sistemi güncellemelerine uyum ve yeni platform sürümleri için yanınızdayız.',
],
];
$faqs = [
[
'question' => 'Trunçgil Teknoloji hangi platformlarda uygulama geliştiriyor?',
'answer' => 'Android, iOS, Windows, macOS, Huawei AppGallery, Meta Quest (VR) ve web uygulamaları geliştiriyoruz. Native, cross-platform (Flutter) ve masaüstü teknolojileriyle projenize uygun mimariyi birlikte seçiyoruz.',
],
[
'question' => 'Mağaza ve dağıtım süreçlerini siz mi yönetiyorsunuz?',
'answer' => 'Evet. Google Play Console, App Store Connect, Microsoft Store, Huawei AppGallery ve Meta Quest Store hesap kurulumu, store listing, imzalama ve politika uyumluluk kontrollerini sizin adınıza yürütüyoruz.',
],
[
'question' => 'Windows veya macOS masaüstü uygulaması geliştirebilir misiniz?',
'answer' => 'Evet. Kurumsal araçlar, yönetim panelleri ve son kullanıcı masaüstü yazılımları için Windows ve macOS native veya hibrit çözümler sunuyoruz; kurumsal dağıtım (MSI, PKG) desteği de sağlanır.',
],
[
'question' => 'Bir uygulama projesi ne kadar sürer?',
'answer' => 'Platform sayısı ve kapsama göre değişmekle birlikte, orta ölçekli tek platformlu bir proje genellikle 816 hafta sürer. Çoklu platform projelerinde keşif aşamasında net bir zaman çizelgesi sunulur.',
],
[
'question' => 'Mevcut uygulamamı yeniden yazabilir veya yeni platforma taşıyabilir misiniz?',
'answer' => 'Kesinlikle. Legacy kod modernizasyonu, mobilden masaüstüne genişletme, VR sürümü ekleme ve tüm mağaza güncellemeleri konularında kapsamlı destek sağlıyoruz.',
],
[
'question' => 'Yayın sonrası bakım hizmeti veriyor musunuz?',
'answer' => 'Evet. Trunçgil Teknoloji, tüm platformlarda yayın sonrası hata takibi, güvenlik yamaları, OS güncellemelerine uyum ve periyodik özellik geliştirmeleri için esnek bakım paketleri sunar.',
],
];
$testimonials = [
[
'quote' => 'Mobil uygulamamızı Google Play ve App Gallery\'ye sorunsuz taşıdılar. Çoklu mağaza sürecinde hiç red almadık; her adımda bizi bilgilendirdiler.',
'name' => 'Ahmet Yılmaz',
'role' => 'Kurucu, Perakende Startup',
'bg' => '#f0f0f8',
],
[
'quote' => 'Windows ve macOS sürümlerini mobil uygulamayla aynı tasarım dilinde teslim ettiler. Kurumsal dağıtım paketleri sorunsuz çalışıyor.',
'name' => 'Elif Kaya',
'role' => 'Ürün Müdürü, SaaS Şirketi',
'bg' => '#edf9f6',
],
[
'quote' => 'Android, iOS ve Meta Quest sürümlerini koordineli şekilde yayınladık. Trunçgil Teknoloji ekibi proje boyunca şeffaf iletişim kurdu.',
'name' => 'Murat Demir',
'role' => 'CTO, Fintech Girişimi',
'bg' => '#fef4f2',
],
[
'quote' => 'Yayın sonrası destek sayesinde uygulamamız her yeni işletim sistemi sürümüne sorunsuz uyum sağlıyor. Trunçgil Teknoloji\'ye güveniyoruz.',
'name' => 'Selin Arslan',
'role' => 'Operasyon Direktörü',
'bg' => '#edf2fc',
],
[
'quote' => 'Kurumsal uygulamamızın güvenlik gereksinimlerini tüm platformlarda mükemmel karşıladılar. MDM ve mağaza dağıtımı eksiksiz tamamlandı.',
'name' => 'Can Öztürk',
'role' => 'IT Müdürü, Holding',
'bg' => '#fbf1f4',
],
[
'quote' => 'Prototipten çoklu platform yayınına kadar tüm süreçte yanımızdaydılar. Kullanıcılarımız her cihazda tutarlı bir deneyim yaşıyor.',
'name' => 'Zeynep Aydın',
'role' => 'Pazarlama Müdürü',
'bg' => '#fff8ee',
],
];
$contactUrl = route('page.show', ['slug' => 'iletisim']);
@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">
<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">
{!! 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">
<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>
</figure>
</div>
</div>
</div>
<div class="overflow-hidden" style="z-index:1;">
<div class="divider !text-[#fefefe] mx-[-0.5rem]">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 100">
<g fill="currentColor">
<polygon points="1440 100 0 100 0 85 1440 0 1440 100" />
</g>
</svg>
</div>
</div>
</section>
{{-- 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] !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">
<img src="{{ asset('assets/img/svg/doodle4.svg') }}" class="h-8 absolute hidden xl:block lg:block" style="top: 6%; right: 2%" alt="" loading="lazy">
<h2 class="!text-[0.8rem] !leading-[1.35] !tracking-[0.02rem] uppercase !text-[#74788d] !mb-3">{!! t('Geliştirme Yetkinliklerimiz') !!}</h2>
<h3 class="xl:!text-[2rem] !text-[calc(1.325rem_+_0.9vw)] font-semibold !leading-[1.2] !mb-12 lg:!px-5 xl:!px-0 xxl:!px-6">
{!! t('Trunçgil Teknoloji, uygulamanızı tüm hedef platformlara hazır hale getirmek için') !!} <span class="text-gradient gradient-7">{!! t('her detayı') !!}</span> {!! t('düşünür.') !!}
</h3>
</div>
</div>
<div class="flex flex-wrap mx-[-15px] !mb-40">
<div class="xxl:w-11/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto">
<div class="flex flex-wrap mx-[-15px] xl:mx-[-20px] lg:mx-[-20px] md:mx-[-20px] !mt-[-50px] !text-center">
@foreach($features as $index => $feature)
<div class="md:w-6/12 lg:w-3/12 xl:w-3/12 w-full flex-[0_0_auto] !px-[15px] xl:!px-[20px] lg:!px-[20px] md:!px-[20px] !mt-[50px] max-w-full">
<div class="svg-bg svg-bg-lg !rounded-[0.8rem] !mb-4 flex items-center justify-center" style="background-color: {{ $featureBgColors[$index] ?? '#f0f0f8' }};">
<i class="uil {{ $feature['icon'] }} !text-[2rem] text-[#343f52]" aria-hidden="true"></i>
</div>
<h4 class="!text-[1rem]">{!! t($feature['title']) !!}</h4>
</div>
@endforeach
</div>
</div>
</div>
{{-- How It Works --}}
<div class="flex flex-wrap mx-[-15px] !text-center">
<div class="md:w-10/12 lg:w-7/12 xl:w-7/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto !relative">
<img src="{{ asset('assets/img/svg/doodle5.svg') }}" class="!w-[5rem] absolute hidden xl:block lg:block" style="bottom: -60%; right: 10%" alt="" loading="lazy">
<img src="{{ asset('assets/img/svg/doodle6.svg') }}" class="!h-[5rem] !absolute hidden xl:block lg:block" style="top: -40%; left: -5%" alt="" loading="lazy">
<h2 class="!text-[0.8rem] !tracking-[0.02rem] uppercase !text-[#74788d] !mb-3 !leading-[1.35]">{!! t('Geliştirme Sürecimiz') !!}</h2>
<h3 class="!text-[calc(1.325rem_+_0.9vw)] font-bold !leading-[1.2] xl:!text-[2rem] !mb-8 xl:!px-6">
{!! t('Trunçgil Teknoloji ile fikirden yayına') !!} <span class="text-gradient gradient-7">{!! t('dört adımda') !!}</span> {!! t('ilerleyin.') !!}
</h3>
</div>
</div>
<div class="flex flex-wrap mx-[-15px] lg:!mb-40 xl:!mb-[17.5rem]">
<div class="xxl:w-11/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto">
<div class="flex flex-wrap mx-[-15px] !mt-[-50px] xl:!mt-0 lg:!mt-0 !text-center items-center">
<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">
</picture>
</figure>
</div>
<div class="w-full xl:!hidden lg:!hidden !px-[15px] !mt-[50px]"></div>
<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 lg:!-order-1 xl:!-order-1 !mt-[50px] xl:!mt-0 lg:!mt-0">
@foreach(array_slice($processSteps, 0, 2) as $index => $step)
<div class="{{ $index === 0 ? '!mb-8' : '' }}">
<span class="xl:!text-[3rem] !text-[calc(1.425rem_+_2.1vw)] !leading-none !mb-3 font-medium text-gradient gradient-7">{{ str_pad($index + 1, 2, '0', STR_PAD_LEFT) }}</span>
<h4 class="!text-[1rem]">{!! t($step['title']) !!}</h4>
<p class="!mb-0 xl:!px-7">{!! t($step['description']) !!}</p>
</div>
@endforeach
</div>
<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 !mt-[50px] xl:!mt-0 lg:!mt-0">
@foreach(array_slice($processSteps, 2, 2) as $index => $step)
<div class="{{ $index === 0 ? '!mb-8' : '' }}">
<span class="xl:!text-[3rem] !text-[calc(1.425rem_+_2.1vw)] !leading-none !mb-3 font-medium text-gradient gradient-7">{{ str_pad($index + 3, 2, '0', STR_PAD_LEFT) }}</span>
<h4 class="!text-[1rem]">{!! t($step['title']) !!}</h4>
<p class="!mb-0 xl:!px-7">{!! t($step['description']) !!}</p>
</div>
@endforeach
</div>
</div>
</div>
</div>
</div>
</section>
{{-- FAQ --}}
<section class="wrapper image-wrapper bg-full bg-image bg-overlay bg-overlay-light-600 bg-content [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-section" data-image-src="{{ asset('assets/img/photos/bg23.webp') }}" style="background-image: url('{{ asset('assets/img/photos/bg23.webp') }}');">
<div class="container py-[4.5rem] md:pt-24 lg:pt-0 xl:pt-0 xl:pb-[7rem] lg:pb-[7rem] md:pb-[7rem] !relative" style="z-index: 2;">
<div class="flex flex-wrap mx-[-15px]">
<div class="xl:w-11/12 xxl:w-10/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto">
<div class="!relative !mb-12">
<img src="{{ asset('assets/img/svg/doodle7.svg') }}" class="h-7 absolute hidden xl:block lg:block" style="top: -90%; right: -3%" alt="" loading="lazy">
<img src="{{ asset('assets/img/svg/doodle8.svg') }}" class="!h-[4.5rem] absolute hidden xl:block lg:block" style="top: -20%; left: -12%" alt="" loading="lazy">
<h2 class="!text-[0.8rem] uppercase !text-[#74788d] !mb-3 !text-center !leading-[1.35]">{!! t('Sık Sorulan Sorular') !!}</h2>
<h3 class="!text-[calc(1.325rem_+_0.9vw)] font-bold !leading-[1.2] xl:!text-[2rem] !mb-0 lg:!px-8 xl:!px-12 !text-center">
{!! t('Uygulama geliştirme hakkında') !!} <span class="text-gradient gradient-7">{!! t('merak ettikleriniz') !!}</span>
</h3>
</div>
<div class="flex flex-wrap mx-[-15px]">
<div class="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mb-0">
<div id="accordion-app-dev-1" class="accordion-wrapper">
@foreach(array_slice($faqs, 0, 3) as $index => $faq)
<div class="card accordion-item !mb-5 !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)]">
<div class="card-header !mb-0 !p-[.9rem_1.3rem_.85rem] !border-0 !rounded-[0.4rem] !bg-inherit" id="accordion-heading-ad-1-{{ $index }}">
<button class="!text-[#343f52] !text-[0.9rem] hover:!text-[#e31e24] before:!text-[#e31e24] collapsed" data-bs-toggle="collapse" data-bs-target="#accordion-collapse-ad-1-{{ $index }}" aria-expanded="false" aria-controls="accordion-collapse-ad-1-{{ $index }}">
{!! t($faq['question']) !!}
</button>
</div>
<div id="accordion-collapse-ad-1-{{ $index }}" class="collapse" aria-labelledby="accordion-heading-ad-1-{{ $index }}" data-bs-target="#accordion-app-dev-1">
<div class="card-body flex-[1_1_auto] p-[0_1.25rem_.25rem_2.35rem]">
<p>{!! t($faq['answer']) !!}</p>
</div>
</div>
</div>
@endforeach
</div>
</div>
<div class="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] !px-[15px] max-w-full">
<div id="accordion-app-dev-2" class="accordion-wrapper">
@foreach(array_slice($faqs, 3, 3) as $index => $faq)
<div class="card accordion-item !mb-5 !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)]">
<div class="card-header !mb-0 !p-[.9rem_1.3rem_.85rem] !border-0 !rounded-[0.4rem] !bg-inherit" id="accordion-heading-ad-2-{{ $index }}">
<button class="!text-[#343f52] !text-[0.9rem] hover:!text-[#e31e24] before:!text-[#e31e24] collapsed" data-bs-toggle="collapse" data-bs-target="#accordion-collapse-ad-2-{{ $index }}" aria-expanded="false" aria-controls="accordion-collapse-ad-2-{{ $index }}">
{!! t($faq['question']) !!}
</button>
</div>
<div id="accordion-collapse-ad-2-{{ $index }}" class="collapse" aria-labelledby="accordion-heading-ad-2-{{ $index }}" data-bs-target="#accordion-app-dev-2">
<div class="card-body flex-[1_1_auto] p-[0_1.25rem_.25rem_2.35rem]">
<p>{!! t($faq['answer']) !!}</p>
</div>
</div>
</div>
@endforeach
</div>
</div>
</div>
</div>
</div>
</div>
</section>
{{-- Why Choose Trunçgil Teknoloji --}}
<section class="wrapper !bg-[#ffffff] app-dev-section">
<div class="container py-24 xl:!py-[8rem] lg:!py-[8rem] md:!py-[8rem]">
<div class="flex flex-wrap mx-[-15px] !text-center">
<div class="md:w-11/12 lg:w-9/12 xl:w-8/12 xxl:w-7/12 w-full 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: -20%; right: -12%" alt="" loading="lazy">
<img src="{{ asset('assets/img/svg/doodle9.svg') }}" class="!h-[7rem] absolute hidden xl:block lg:block" style="bottom: 5%; left: -17%" alt="" loading="lazy">
<h2 class="!text-[0.8rem] uppercase !text-[#74788d] !mb-3 !text-center !leading-[1.35]">{!! t('Neden Trunçgil Teknoloji?') !!}</h2>
<h3 class="!text-[calc(1.325rem_+_0.9vw)] font-bold !leading-[1.2] xl:!text-[2rem] !mb-14 !text-center">
{!! t('Tüm platformlarda başarılı olmanız için') !!} <span class="text-gradient gradient-7">{!! t('6 güçlü neden') !!}</span>
</h3>
</div>
</div>
<div class="flex-wrap mx-[-15px] flex items-start !mb-36">
<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">
</picture>
</figure>
</div>
<div class="xl:w-5/12 lg:w-5/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !ml-auto">
@foreach($whyChoose as $item)
<div class="flex flex-row !mb-8">
<div>
<div class="svg-bg svg-bg-lg !rounded-[0.8rem] !mr-5 flex items-center justify-center" style="background-color: {{ $item['bg'] }};">
<i class="uil {{ $item['icon'] }} !text-[2rem] text-[#343f52]" aria-hidden="true"></i>
</div>
</div>
<div>
<h4 class="!text-[1rem]">{!! t($item['title']) !!}</h4>
<p>{!! t($item['description']) !!}</p>
</div>
</div>
@endforeach
</div>
</div>
{{-- Testimonials --}}
<div class="flex flex-wrap mx-[-15px]">
<div class="md:w-11/12 lg:w-10/12 xl:w-9/12 xxl:w-8/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto !text-center !relative">
<img src="{{ asset('assets/img/svg/doodle1.svg') }}" class="h-9 !absolute hidden xl:block lg:block" style="top: 2%; left: 9%" alt="" loading="lazy">
<img src="{{ asset('assets/img/svg/doodle10.svg') }}" class="h-7 absolute hidden xl:block lg:block" style="top: -45%; left: -17%" alt="" loading="lazy">
<img src="{{ asset('assets/img/svg/doodle11.svg') }}" class="!h-[4rem] absolute hidden xl:block lg:block" style="top: -40%; right: -15%" alt="" loading="lazy">
<h2 class="!text-[0.8rem] !tracking-[0.02rem] uppercase !text-[#74788d] !mb-3 !leading-[1.35]">{!! t('Mutlu Müşteriler') !!}</h2>
<h3 class="!text-[calc(1.325rem_+_0.9vw)] font-bold !leading-[1.2] xl:!text-[2rem] !mb-12 xl:!px-10 xxl:!px-16">
{!! t('Trunçgil Teknoloji ile çalışan müşterilerimizin') !!} <span class="text-gradient gradient-7">{!! t('deneyimleri') !!}</span>
</h3>
</div>
</div>
<div class="itemgrid !mb-14">
<div class="flex flex-wrap mx-[-15px] isotope !mt-[-30px]">
@foreach($testimonials as $testimonial)
<div class="item md:w-6/12 lg:w-6/12 xl:w-4/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mt-[30px]">
<div class="card !shadow-none !rounded-[0.8rem]" style="background-color: {{ $testimonial['bg'] }};">
<div class="card-body flex-[1_1_auto] p-[40px]">
<blockquote class="!text-[0.85rem] !leading-[1.7] !font-normal !pl-4 icon !mb-0 relative p-0 border-0 before:content-['\201d'] before:absolute before:top-[-1.5rem] before:left-[-0.9rem] before:text-[rgba(52,63,82,0.05)] before:text-[10rem] before:leading-none before:z-[1]">
<p>{!! t($testimonial['quote']) !!}</p>
<div class="flex items-center text-left">
<div class="info !pl-0">
<p class="!mb-1 text-[.9rem] !leading-[1.5] !font-semibold">{!! e($testimonial['name']) !!}</p>
<p class="!mb-0 text-[.8rem]">{!! t($testimonial['role']) !!}</p>
</div>
</div>
</blockquote>
</div>
</div>
</div>
@endforeach
</div>
</div>
</div>
</section>
{{-- Bottom CTA --}}
<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="overflow-hidden" style="z-index:1;">
<div class="divider divider-alt !text-[#fefefe] mx-[-0.5rem]">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 100">
<g fill="currentColor">
<polygon points="1440 100 0 15 0 0 1440 0 1440 100" />
</g>
</svg>
</div>
</div>
<div class="container pt-10 xl:pt-10 lg:pt-10 md:pt-16 pb-8 xl:pb-10 lg:pb-10 md:pb-10 text-center xl:text-left lg:text-left">
<div class="flex flex-wrap mx-0 !mt-[-50px]">
<div class="md:w-10/12 md:!ml-[8.33333333%] lg:!ml-0 lg:w-6/12 xl:!ml-0 xl:w-5/12 w-full flex-[0_0_auto] max-w-full !relative !mt-[50px]">
<img src="{{ asset('assets/img/svg/doodle2.svg') }}" class="!h-[5rem] !absolute hidden xl:block lg:block" style="bottom: 36%; right: -25%" alt="" loading="lazy">
<img src="{{ asset('assets/img/svg/doodle6.svg') }}" class="!h-[4.5rem] !absolute hidden xl:block lg:block" style="top: -20%; left: -25%" alt="" loading="lazy">
<h2 class="!text-[calc(1.325rem_+_0.9vw)] font-semibold !leading-[1.2] xl:!text-[2rem] !mb-4">
{!! t('Uygulamanızı tüm platformlarda') !!} <span class="text-gradient gradient-7">{!! t('hayata geçirelim.') !!}</span>
</h2>
<p class="lead !text-[1.2rem] !leading-[1.5] !font-normal !mb-7">
{!! t('Trunçgil Teknoloji ekibi, Android\'den Meta Quest\'e kadar projenizi dinlemeye ve size özel bir yol haritası sunmaya hazır.') !!}
</p>
<div class="flex flex-wrap justify-center xl:!justify-start lg:!justify-start gap-3 items-center">
<x-front.platform-badges :platforms="$platforms" class="!justify-center xl:!justify-start lg:!justify-start" />
<a href="{{ $contactUrl }}" class="btn btn-gradient gradient-7 !rounded-[0.8rem] !px-6">{!! t('Projenizi Konuşalım') !!}</a>
</div>
</div>
<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">
</picture>
</figure>
</div>
</div>
</div>
</section>
@endsection