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

508 lines
32 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"; }
.svg-bg i[class*="uil-"],
.svg-bg i[class*="uil-"]:before {
font-size: 2rem !important;
line-height: 1;
}
/* Mağaza rozetleri: yan yana, aynı yükseklik */
.app-dev-store-badges {
display: inline-flex;
flex-wrap: nowrap;
align-items: center;
gap: 0.625rem;
max-width: 100%;
}
.app-dev-store-badge {
display: block;
height: 2.75rem;
width: auto;
max-width: none;
flex-shrink: 0;
}
@media (min-width: 576px) {
.app-dev-store-badge {
height: 3.25rem;
}
.app-dev-store-badges {
gap: 0.75rem;
}
}
@media (min-width: 1280px) {
.app-dev-store-badge {
height: 3.75rem;
}
.app-dev-store-badges {
gap: 1rem;
}
}
</style>
@endpush
@section('content')
@php
$featureBgColors = [
'#fef3e4', '#e1f6f0', '#e9eaf8', '#f8e7ec',
'#f0eaf6', '#feece9', '#e0e9fa', '#eaf3ef',
];
$features = [
['icon' => 'uil-search-alt', 'title' => 'Keşif ve Strateji'],
['icon' => 'uil-palette', 'title' => 'UI/UX Tasarım'],
['icon' => 'uil-mobile-android', 'title' => 'Native Android Geliştirme'],
['icon' => 'uil-apple', 'title' => 'iOS Geliştirme'],
['icon' => 'uil-shield-check', 'title' => 'Güvenlik ve Test'],
['icon' => 'uil-store', 'title' => 'Google Play Uyumluluğu'],
['icon' => 'uil-check-circle', 'title' => 'App Store İnceleme Hazırlığı'],
['icon' => 'uil-rocket', 'title' => 'Yayın Sonrası Destek'],
];
$processSteps = [
[
'title' => 'Keşif ve Analiz',
'description' => 'Trunçgil Teknoloji ekibi, hedef kitlenizi, iş hedeflerinizi ve teknik gereksinimlerinizi derinlemesine analiz ederek projenin yol haritasını birlikte oluşturur.',
],
[
'title' => 'Tasarım ve Prototip',
'description' => 'Kullanıcı deneyimi öncelikli arayüz tasarımları ve tıklanabilir prototiplerle Google Play ve App Store standartlarına uygun bir deneyim planlanır.',
],
[
'title' => 'Geliştirme ve Test',
'description' => 'Android ve iOS platformlarında titiz kodlama, otomatik testler ve cihaz uyumluluğu kontrolleriyle uygulamanız hatasız şekilde inşa edilir.',
],
[
'title' => 'Mağaza Yayını ve Destek',
'description' => 'Google Play Console ve App Store Connect süreçlerini Trunçgil Teknoloji yönetir; yayın sonrası izleme, güncelleme ve bakım desteği sunar.',
],
];
$whyChoose = [
[
'icon' => 'uil-mobile-android',
'bg' => '#e6e5f4',
'title' => 'Android ve iOS Uzmanlığı',
'description' => 'Trunçgil Teknoloji, Kotlin, Swift ve Flutter teknolojilerinde deneyimli ekibiyle her iki platformda da performanslı uygulamalar geliştirir.',
],
[
'icon' => 'uil-store',
'bg' => '#e1f6f0',
'title' => 'Google Play Politika Uyumu',
'description' => 'Veri güvenliği, izin yönetimi ve içerik politikalarına tam uyum sağlayarak uygulamanızın mağazada sorunsuz yayınlanmasını garanti altına alırız.',
],
[
'icon' => 'uil-apple',
'bg' => '#f8e7ec',
'title' => 'App Store İnceleme Deneyimi',
'description' => 'Human Interface Guidelines, gizlilik etiketleri ve metadata gereksinimlerini önceden ele alarak red riskini minimuma indiriyoruz.',
],
[
'icon' => 'uil-shield-check',
'bg' => '#fef3e4',
'title' => 'Kapsamlı Test Süreci',
'description' => 'Birim testleri, entegrasyon testleri ve gerçek cihazlarda manuel QA ile uygulamanızı yayına hazır hale getiriyoruz.',
],
[
'icon' => 'uil-chart-line',
'bg' => '#e0e9fa',
'title' => 'Performans Optimizasyonu',
'description' => 'Pil tüketimi, açılış süresi ve bellek kullanımı Trunçgil Teknoloji tarafından sürekli ölçülür ve iyileştirilir.',
],
[
'icon' => 'uil-headphones-alt',
'bg' => '#eaf3ef',
'title' => 'Sürekli Bakım ve Destek',
'description' => 'Yayın sonrası hata düzeltmeleri, OS güncellemelerine uyum ve yeni özellik geliştirmeleri için yanınızdayız.',
],
];
$faqs = [
[
'question' => 'Trunçgil Teknoloji hangi platformlarda uygulama geliştiriyor?',
'answer' => 'Trunçgil Teknoloji olarak native Android (Kotlin), native iOS (Swift) ve cross-platform (Flutter) çözümler sunuyoruz. Uygulamalarınız Google Play Store ve Apple App Store\'da yayınlanmaya hazır şekilde teslim edilir.',
],
[
'question' => 'Google Play\'e yükleme sürecini siz mi yönetiyorsunuz?',
'answer' => 'Evet. Trunçgil Teknoloji, Google Play Console hesap kurulumu, uygulama imzalama, store listing hazırlığı, ekran görüntüleri ve politika uyumluluk kontrollerini sizin adınıza titizlikle yürütür.',
],
[
'question' => 'App Store inceleme sürecinde red almamak için ne yapıyorsunuz?',
'answer' => 'Apple\'ın Human Interface Guidelines, gizlilik politikası ve uygulama içi satın alma kurallarına uygunluk denetimi yapıyoruz. Metadata, açıklamalar ve gizlilik etiketleri yayın öncesinde Trunçgil Teknoloji tarafından kontrol edilir.',
],
[
'question' => 'Bir uygulama projesi ne kadar sürer?',
'answer' => 'Proje kapsamına göre değişmekle birlikte, orta ölçekli bir uygulama Trunçgil Teknoloji sürecinde genellikle 816 hafta arasında tamamlanır. Keşif aşamasında size net bir zaman çizelgesi sunulur.',
],
[
'question' => 'Mevcut uygulamamı yeniden yazabilir veya güncelleyebilir misiniz?',
'answer' => 'Kesinlikle. Trunçgil Teknoloji, legacy kod modernizasyonu, performans iyileştirmesi, yeni OS sürümlerine uyum ve mağaza güncellemeleri konularında kapsamlı destek sağlar.',
],
[
'question' => 'Yayın sonrası bakım hizmeti veriyor musunuz?',
'answer' => 'Evet. Trunçgil Teknoloji, yayın sonrası hata takibi, kullanıcı geri bildirimlerine yanıt, güvenlik yamaları ve periyodik özellik güncellemeleri için esnek bakım paketleri sunar.',
],
];
$testimonials = [
[
'quote' => 'Trunçgil Teknoloji, e-ticaret uygulamamızı Google Play\'e sorunsuz taşıdı. İnceleme sürecinde hiç red almadık; her adımda bizi bilgilendirdiler.',
'name' => 'Ahmet Yılmaz',
'role' => 'Kurucu, Perakende Startup',
'bg' => '#f0f0f8',
],
[
'quote' => 'iOS uygulamamız App Store\'da ilk denemede onaylandı. Trunçgil Teknoloji\'nin titiz test süreci ve tasarım kalitesi gerçekten fark yarattı.',
'name' => 'Elif Kaya',
'role' => 'Ürün Müdürü, SaaS Şirketi',
'bg' => '#edf9f6',
],
[
'quote' => 'Hem Android hem iOS sürümünü aynı anda teslim ettiler. Trunçgil Teknoloji ekibi proje boyunca şeffaf iletişim kurdu ve söz verilen tarihte yayınladık.',
'name' => 'Murat Demir',
'role' => 'CTO, Fintech Girişimi',
'bg' => '#fef4f2',
],
[
'quote' => 'Yayın sonrası destek paketleri sayesinde uygulamamız her yeni Android 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 mobil uygulamamızın güvenlik gereksinimlerini Trunçgil Teknoloji mükemmel karşıladı. Google Play ve kurumsal MDM dağıtımı sorunsuz tamamlandı.',
'name' => 'Can Öztürk',
'role' => 'IT Müdürü, Holding',
'bg' => '#fbf1f4',
],
[
'quote' => 'Prototipten mağaza yayınına kadar tüm süreçte Trunçgil Teknoloji yanımızdaydı. Kullanıcılarımız uygulamanın akıcılığından çok memnun.',
'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('Google Play ve App Store\'da') !!} <span class="text-gradient gradient-7">{!! t('başarı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 ve iOS uygulamalarını fikirden mağaza yayınına kadar titizlikle 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">
<div class="app-dev-store-badges">
<img src="{{ asset('assets/img/photos/button-google-play.svg') }}" class="app-dev-store-badge !rounded-[0.8rem]" alt="Google Play" loading="lazy" decoding="async">
<img src="{{ asset('assets/img/photos/button-appstore.svg') }}" class="app-dev-store-badge !rounded-[0.8rem]" alt="App Store" loading="lazy" decoding="async">
</div>
</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 mobil 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ı mağazaya 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 mağazaya') !!} <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('Google Play ve App Store\'da 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 mobil 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ı Google Play ve App Store\'da') !!} <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, projenizi dinlemeye ve size özel bir yol haritası sunmaya hazır.') !!}
</p>
<div class="flex justify-center xl:!justify-start lg:!justify-start">
<div class="app-dev-store-badges">
<img src="{{ asset('assets/img/photos/button-google-play.svg') }}" class="app-dev-store-badge !rounded-[0.8rem]" alt="Google Play" loading="lazy" decoding="async">
<img src="{{ asset('assets/img/photos/button-appstore.svg') }}" class="app-dev-store-badge !rounded-[0.8rem]" alt="App Store" loading="lazy" decoding="async">
</div>
</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