truncgit/citrus
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: implement Dekupai product landing page with supporting assets and database seeder

Browse Source
This commit is contained in:
Ümit Tunç
2026-05-24 00:48:06 +03:00
parent dd013a471d
commit 2d6af94c88
16 changed files with 1322 additions and 257 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/views/front/products/landing.blade.php
+590 -257
View File
@@ -1,5 +1,4 @@
@extends('layouts.site', ['headerTemplate' => 'Demo27 Header'])
@extends('layouts.site')
@php
use Illuminate\Support\Facades\Storage;
@@ -7,6 +6,7 @@ use Illuminate\Support\Facades\Storage;
@section('title', $product->translate('title') ?? 'Ürün Detayı')
@section('meta_description', Str::limit(strip_tags($product->translate('content')), 160))
@php
$landingData = $product->landing_page_data ?? [];
$hero = $landingData['hero'] ?? [];
@@ -24,295 +24,628 @@ use Illuminate\Support\Facades\Storage;
}
return $item[$key] ?? $default;
};
$featureBgColors = [
'#fef3e4', '#e1f6f0', '#e9eaf8', '#f8e7ec',
'#f0eaf6', '#feece9', '#e0e9fa', '#eaf3ef',
];
$platforms = [
['name' => 'Android', 'logo' => 'android-copy.png'],
['name' => 'iOS', 'logo' => 'ios.png'],
['name' => 'Windows', 'logo' => 'windows-logo.png'],
['name' => 'macOS', 'logo' => 'apple-logo.png'],
['name' => 'Huawei AppGallery', 'logo' => 'huawei.png'],
['name' => 'Meta Quest', 'logo' => 'meta.png'],
['name' => 'Ubuntu', 'logo' => 'ubuntu.png'],
];
$iconMap = [
'processor' => 'uil-cube',
'crop' => 'uil-crop-alt-rotate',
'paint' => 'uil-palette',
'image' => 'uil-image',
'cloud' => 'uil-cloud',
'safe' => 'uil-shield-check',
'touchscreen' => 'uil-mobile-android',
];
$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.',
],
];
$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 and Meta Quest versions were launched in coordination. The Trunçgil Teknoloji team kept transparent communication throughout.',
'name' => 'Murat Demir',
'role' => 'CTO, Fintech Venture',
'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
@push('head')
@if(!empty($hero['featured_image']))
<link rel="preload" as="image" href="{{ Storage::url($hero['featured_image']) }}" fetchpriority="high">
@endif
@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"; }
.uil-crop-alt-rotate:before { content: "\ea75"; }
.uil-image:before { content: "\eb4e"; }
.uil-cloud:before { content: "\e9be"; }
.svg-bg i[class*="uil-"],
.svg-bg i[class*="uil-"]:before {
font-size: 2rem !important;
line-height: 1;
}
/* Platform logoları — 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;
}
}
/* Header — masaüstünde şeffaf, hero arka planı üstten başlasın */
body:has(.app-dev-hero) > header {
position: absolute;
top: 0;
left: 0;
width: 100%;
z-index: 1030;
background: transparent !important;
}
body:has(.app-dev-hero) > header .navbar.transparent:not(.fixed):not(.navbar-clone) {
background: transparent !important;
box-shadow: none !important;
}
/* 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: 32rem;
margin-left: auto;
margin-right: auto;
}
@media (min-width: 768px) {
.app-dev-hero .app-dev-hero-image {
max-width: 36rem;
}
}
@media (min-width: 1200px) {
.app-dev-hero .app-dev-hero-image {
max-width: 42rem;
}
}
@media (min-width: 1400px) {
.app-dev-hero .app-dev-hero-image {
max-width: 46rem;
}
}
.app-dev-hero .app-dev-hero-image img {
width: 100%;
max-width: 100%;
height: auto;
}
.app-dev-hero > .container {
padding-bottom: 0 !important;
}
.app-dev-hero .divider {
margin-bottom: -2.5rem;
}
@media (min-width: 992px) {
.app-dev-hero .divider {
margin-bottom: -3.5rem;
}
}
.app-dev-features-start {
padding-top: 3rem !important;
}
@media (min-width: 992px) {
.app-dev-features-start {
padding-top: 4rem !important;
}
}
/* Isometric 3D illüstrasyonlar */
.app-dev-illustration {
display: block;
width: 100%;
max-width: 100%;
height: auto;
margin-left: auto;
margin-right: auto;
}
.app-dev-illustration--process {
max-width: 28rem;
}
@media (min-width: 992px) {
.app-dev-illustration--process {
max-width: 22rem;
}
}
.app-dev-illustration--platforms {
max-width: 36rem;
}
.app-dev-illustration--cta {
max-width: 32rem;
}
</style>
@endpush
@section('content')
{{-- Hero Section --}}
@if(!empty($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="{{ !empty($hero['background_image']) ? asset($hero['background_image']) : asset('assets/img/photos/bg23.webp') }}" style="background-image: url('{{ !empty($hero['background_image']) ? asset($hero['background_image']) : 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-5/12 lg:w-5/12 xxl:w-4/12 w-full flex-[0_0_auto] max-w-full !relative !mt-[50px]" data-cues="slideInDown" data-group="page-title" data-delay="700">
@if($slogan = $getTranslated($hero, 'slogan'))
<h1 class="xl:!text-[2.5rem] !text-[calc(1.375rem_+_1.5vw)] font-semibold !leading-[1.15] !mb-4">
{!! nl2br(e($slogan)) !!}
</h1>
@endif
@if($subSlogan = $getTranslated($hero, 'sub_slogan'))
<p class="lead !text-[1.2rem] !leading-[1.5] !font-normal !mb-7">{{ $subSlogan }}</p>
@endif
<div class="flex justify-center lg:!justify-start xl:!justify-start" data-cues="slideInDown" data-group="page-title-buttons" data-delay="1800">
@if(!empty($hero['app_store_link']))
<span class="inline-flex"><a href="{{ $hero['app_store_link'] }}" target="_blank" class="!mr-2 inline-block">
<img src="{{ asset('assets/img/photos/button-appstore.svg') }}" class="!h-[3rem] !rounded-[0.8rem]" alt="App Store" loading="lazy">
</a></span>
@endif
@if(!empty($hero['google_play_link']))
<span class="inline-flex"><a href="{{ $hero['google_play_link'] }}" target="_blank" class="inline-block">
<img src="{{ asset('assets/img/photos/button-google-play.svg') }}" class="!h-[3rem] !rounded-[0.8rem]" alt="Google Play" loading="lazy">
</a></span>
@endif
</div>
</div>
<!-- /column -->
@if(!empty($hero['featured_image']))
<div class="xl:w-7/12 lg:w-7/12 w-full flex-[0_0_auto] max-w-full !ml-auto !mb-[-10rem] xxl:!mb-[-15rem] !mt-[50px] flex justify-center items-center" data-cues="slideInDown" data-delay="600" style="z-index:2;">
<figure class="m-0 p-0 w-full flex justify-center items-center">
<img class="w-[95%] max-w-[850px] !h-auto xl:!max-h-[540px] lg:!max-h-[440px] object-contain drop-shadow-2xl rounded-xl"
src="{{ Storage::url($hero['featured_image']) }}"
alt="{{ $product->translate('title') }}" loading="lazy"
>
</figure>
</div>
<!-- /column -->
{{-- Hero --}}
@if(!empty($hero))
@php
$slogan = $getTranslated($hero, 'slogan');
$subSlogan = $getTranslated($hero, 'sub_slogan');
// Dynamically split slogan to apply premium gradient class to second half
$sloganParts = explode(' ', $slogan);
if (count($sloganParts) > 3) {
$splitIndex = ceil(count($sloganParts) / 2);
$part1 = implode(' ', array_slice($sloganParts, 0, $splitIndex));
$part2 = implode(' ', array_slice($sloganParts, $splitIndex));
$formattedSlogan = $part1 . ' <span class="text-gradient gradient-7">' . $part2 . '</span>';
} else {
$formattedSlogan = $slogan;
}
@endphp
<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') }}">
<div class="container pt-24 xl:pt-32 lg:pt-32 md:pt-32 pb-0">
<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">
{!! $formattedSlogan !!}
</h1>
@if($subSlogan)
<p class="lead !text-[1.2rem] !leading-[1.5] !font-normal !mb-0 xl:!px-8">
{{ $subSlogan }}
</p>
@endif
</div>
<!-- /.row -->
</div>
<!-- /.container -->
<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>
@if(!empty($hero['featured_image']))
<div class="app-dev-hero-image !mt-6 xl:!mt-8 lg:!mt-8 md:!mt-8 !mb-[-4rem] xl:!mb-[-5rem] lg:!mb-[-4.5rem]" data-cues="slideInDown" data-delay="600">
<figure class="m-0 p-0">
<img class="w-[95%] max-w-[850px] !h-auto xl:!max-h-[540px] lg:!max-h-[440px] object-contain drop-shadow-2xl rounded-xl"
src="{{ Storage::url($hero['featured_image']) }}"
alt="{{ $product->translate('title') }}" loading="lazy"
>
</figure>
</div>
@endif
</div>
<!-- /.overflow-hidden -->
</section>
<!-- /section -->
@endif
</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>
@endif
{{-- App Features Section --}}
@if(!empty($features))
<section class="wrapper !bg-[#ffffff]">
<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">
<h2 class="!text-[0.8rem] !leading-[1.35] !tracking-[0.02rem] uppercase !text-[#74788d] !mb-3">{{ t('Özellikler') }}</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">
{{ $product->translate('title') }} {{ t('deneyiminizi mükemmelleştirmek için buradayız.') }}
</h3>
</div>
<!-- /column -->
{{-- Features Section --}}
<section class="wrapper !bg-[#ffffff] app-dev-section">
<div class="container app-dev-features-start pb-[4.5rem] xl:pb-24 lg:pb-24 md:pb-24">
@if(!empty($features))
<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('Özellikler') }}</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">
{{ $product->translate('title') }} {!! t('deneyiminizi') !!} <span class="text-gradient gradient-7">{!! t('kusursuzlaştırmak için') !!}</span> {!! t('tasarlandı.') !!}
</h3>
</div>
<!-- /.row -->
<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)
@php
$featureTitle = $getTranslated($feature, 'title');
@endphp
<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">
@if(!empty($feature['icon']))
<div class="svg-bg svg-bg-lg !bg-[#fef3e4] !rounded-[0.8rem] !mb-4">
@php
$iconPath = public_path('assets/img/icons/solid/' . $feature['icon'] . '.svg');
$iconUrl = file_exists($iconPath)
? asset('assets/img/icons/solid/' . $feature['icon'] . '.svg')
: null;
@endphp
@if($iconUrl)
<img src="{{ $iconUrl }}" class="icon-svg solid text-[#343f52] text-navy" alt="{{ $featureTitle }}" style="width: 48px; height: 48px;" loading="lazy">
@else
<div class="w-12 h-12 bg-gray-200 rounded-lg flex items-center justify-center">
<span class="text-gray-400 text-xs">{{ substr($feature['icon'], 0, 2) }}</span>
</div>
@endif
</div>
@endif
@if($featureTitle)
<h4 class="!text-[1rem]">{{ $featureTitle }}</h4>
@endif
</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)
@php
$featureTitle = $getTranslated($feature, 'title');
$rawIcon = $feature['icon'] ?? 'processor';
$iconClass = $iconMap[$rawIcon] ?? 'uil-cube';
@endphp
<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 % count($featureBgColors)] }};">
<i class="uil {{ $iconClass }} !text-[2rem] text-[#343f52]" aria-hidden="true"></i>
</div>
<h4 class="!text-[1rem]">{{ $featureTitle }}</h4>
</div>
@endforeach
</div>
</div>
</div>
@endif
{{-- How It Works --}}
@if(!empty($howItWorks) && !empty($steps))
@php
$howItWorksLabel = $getTranslated($howItWorks, 'download_form_label');
// Determine side illustration: screenshot 2 (cropper) is excellent, else featured image, else generic
$processImage = !empty($howItWorks['download_image'])
? Storage::url($howItWorks['download_image'])
: (Storage::exists('public/products/dekupai-ss2.png') ? Storage::url('products/dekupai-ss2.png') : (!empty($hero['featured_image']) ? Storage::url($hero['featured_image']) : asset('assets/img/illustrations/app-dev/app-dev-process.png')));
@endphp
<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('Çalışma Prensibi') }}</h2>
<h3 class="!text-[calc(1.325rem_+_0.9vw)] font-bold !leading-[1.2] xl:!text-[2rem] !mb-8 xl:!px-6">
{!! t('Sadece') !!} <span class="text-gradient gradient-7">{!! t('dört kolay adımda') !!}</span> {!! t('sonuca ulaşın.') !!}
</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 rounded-lg shadow-lg overflow-hidden border border-gray-100">
<img class="app-dev-illustration w-full max-w-full !h-auto" src="{{ $processImage }}" alt="{{ $howItWorksLabel }}" loading="lazy" decoding="async">
</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($steps, 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]">{{ $getTranslated($step, 'title') }}</h4>
<p class="!mb-0 xl:!px-7">{{ $getTranslated($step, 'description') }}</p>
</div>
<!--/column -->
@endforeach
</div>
<!--/.row -->
</div>
<!-- /column -->
</div>
<!-- /.row -->
</div>
<!-- /.container -->
</section>
<!-- /section -->
@endif
{{-- Description Section --}}
@php
$productContent = $product->translate('content');
@endphp
@if(!empty($productContent))
{!! $productContent !!}
@endif
{{-- How It Works Section --}}
@if(!empty($howItWorks) && !empty($steps))
<section class="wrapper !bg-[#ffffff]">
<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="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">
@if($howItWorksLabel = $getTranslated($howItWorks, 'download_form_label'))
<h3 class="!text-[calc(1.325rem_+_0.9vw)] font-bold !leading-[1.2] xl:!text-[2rem] !mb-8 xl:!px-6">
{{ $howItWorksLabel }}
</h3>
@endif
</div>
<!-- /column -->
</div>
<!-- /.row -->
<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">
@if(!empty($howItWorks['download_image']))
<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">
<img src="{{ Storage::url($howItWorks['download_image']) }}" alt="How It Works" loading="lazy">
</figure>
<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($steps, 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]">{{ $getTranslated($step, 'title') }}</h4>
<p class="!mb-0 xl:!px-7">{{ $getTranslated($step, 'description') }}</p>
</div>
<!-- /column -->
@endif
<div class="w-full xl:!hidden lg:!hidden !px-[15px] !mt-[50px] xl:!mt-0 lg:!mt-0"></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($steps as $index => $step)
@if($index < 2)
<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-3">{{ str_pad($step['number'] ?? ($index + 1), 2, '0', STR_PAD_LEFT) }}</span>
@if($stepTitle = $getTranslated($step, 'title'))
<h4 class="!text-[1rem]">{{ $stepTitle }}</h4>
@endif
@if($stepDescription = $getTranslated($step, 'description'))
<p class="!mb-0 xl:!px-7">{{ $stepDescription }}</p>
@endif
</div>
<!-- /div -->
@endif
@endforeach
</div>
<!-- /column -->
<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($steps as $index => $step)
@if($index >= 2)
<div class="{{ $index === 2 ? '!mb-8' : '' }}">
<span class="xl:!text-[3rem] !text-[calc(1.425rem_+_2.1vw)] !leading-none !mb-3 font-medium text-gradient gradient-3">{{ str_pad($step['number'] ?? ($index + 1), 2, '0', STR_PAD_LEFT) }}</span>
@if($stepTitle = $getTranslated($step, 'title'))
<h4 class="!text-[1rem]">{{ $stepTitle }}</h4>
@endif
@if($stepDescription = $getTranslated($step, 'description'))
<p class="!mb-0 xl:!px-7">{{ $stepDescription }}</p>
@endif
</div>
<!-- /div -->
@endif
@endforeach
</div>
<!-- /column -->
@endforeach
</div>
<!-- /.row -->
</div>
<!-- /column -->
</div>
<!-- /.row -->
</div>
<!-- /.container -->
</section>
<!-- /section -->
@endif
@endif
</div>
</section>
{{-- Video Section --}}
@if(!empty($video['youtube_video_id']))
<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)]" data-image-src="{{ !empty($hero['background_image']) ? asset($hero['background_image']) : asset('assets/img/photos/bg23.webp') }}" style="background-image: url('{{ !empty($hero['background_image']) ? asset($hero['background_image']) : 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="lg:!mt-[-10rem] xl:!mt-[-15rem] !mb-[4.5rem] xl:!mb-[6rem] lg:!mb-[6rem] md:!mb-[6rem] !rounded-[0.8rem]">
<div class="player relative z-[2] rounded-[0.4rem]">
{{-- Description Section --}}
@php
$productContent = $product->translate('content');
@endphp
@if(!empty($productContent))
{!! $productContent !!}
@endif
{{-- Video Section --}}
@if(!empty($video['youtube_video_id']) || !empty($video['local_video_path']))
<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)]" data-image-src="{{ !empty($hero['background_image']) ? asset($hero['background_image']) : asset('assets/img/photos/bg23.webp') }}" style="background-image: url(\'{{ !empty($hero['background_image']) ? asset($hero['background_image']) : 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="lg:!mt-[-10rem] xl:!mt-[-15rem] !mb-[4.5rem] xl:!mb-[6rem] lg:!mb-[6rem] md:!mb-[6rem] !rounded-[0.8rem]">
<div class="player relative z-[2] rounded-[0.4rem] overflow-hidden shadow-2xl bg-black border-4 border-white">
@if(!empty($video['youtube_video_id']))
<iframe src="https://www.youtube.com/embed/{{ $video['youtube_video_id'] }}"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen
style="width: 100%; height: 600px; border-radius: 0.4rem;">
</iframe>
</div>
@else
<video style="width: 100%; height: 600px; border-radius: 0.4rem; object-fit: contain; display: block;" class="w-full" controls autoplay loop muted playsinline>
<source src="{{ asset($video['local_video_path']) }}" type="video/mp4">
Your browser does not support the video tag.
</video>
@endif
</div>
</div>
<!--/column -->
</div>
<!--/.row -->
<!--/column -->
</div>
<!-- /.container -->
</section>
<!-- /section -->
@endif
<!--/.row -->
</div>
<!-- /.container -->
</section>
@endif
{{-- FAQ Section --}}
@if(!empty($faqs))
<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)]" data-image-src="{{ !empty($hero['background_image']) ? asset($hero['background_image']) : asset('assets/img/photos/bg21.webp') }}" style="background-image: url('{{ !empty($hero['background_image']) ? asset($hero['background_image']) : asset('assets/img/photos/bg21.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"></polygon>
</g>
</svg>
</div>
</div>
<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">
<h3 class="!text-[calc(1.325rem_+_0.9vw)] font-bold !leading-[1.2] xl:!text-[2rem] !mb-12 lg:!px-8 xl:!px-12 !text-center">
{{ t('Sık Sorulan Sorular')}}
</h3>
</div>
<div class="flex flex-wrap mx-[-15px]">
<div class="xl:w-10/12 lg:w-10/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto">
<div id="accordion-faq" class="accordion-wrapper">
@foreach($faqs 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-faq-{{ $index }}">
<button class="!text-[#343f52] !text-[0.9rem] hover:!text-[#e31e24] before:!text-[#e31e24] collapsed"
data-bs-toggle="collapse"
data-bs-target="#accordion-collapse-faq-{{ $index }}"
aria-expanded="false"
aria-controls="accordion-collapse-faq-{{ $index }}">
{{ $getTranslated($faq, 'question') }}
</button>
</div>
<!-- /.card-header -->
<div id="accordion-collapse-faq-{{ $index }}"
class="collapse"
aria-labelledby="accordion-heading-faq-{{ $index }}"
data-bs-target="#accordion-faq">
<div class="card-body flex-[1_1_auto] p-[0_1.25rem_.25rem_2.35rem]">
<p>{!! nl2br(e($getTranslated($faq, 'answer'))) !!}</p>
</div>
<!-- /.card-body -->
</div>
<!-- /.collapse -->
{{-- FAQ Section --}}
@if(!empty($faqs))
<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('Merak') !!} <span class="text-gradient gradient-7">{!! t('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-ad-1" class="accordion-wrapper">
@foreach(array_slice($faqs, 0, ceil(count($faqs) / 2)) 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 }}">
{{ $getTranslated($faq, 'question') }}
</button>
</div>
<div id="accordion-collapse-ad-1-{{ $index }}" class="collapse" aria-labelledby="accordion-heading-ad-1-{{ $index }}" data-bs-target="#accordion-ad-1">
<div class="card-body flex-[1_1_auto] p-[0_1.25rem_.25rem_2.35rem]">
<p>{!! nl2br(e($getTranslated($faq, 'answer'))) !!}</p>
</div>
</div>
<!-- /.card -->
@endforeach
</div>
<!-- /.accordion-wrapper -->
@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-ad-2" class="accordion-wrapper">
@foreach(array_slice($faqs, ceil(count($faqs) / 2)) 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 }}">
{{ $getTranslated($faq, 'question') }}
</button>
</div>
<div id="accordion-collapse-ad-2-{{ $index }}" class="collapse" aria-labelledby="accordion-heading-ad-2-{{ $index }}" data-bs-target="#accordion-ad-2">
<div class="card-body flex-[1_1_auto] p-[0_1.25rem_.25rem_2.35rem]">
<p>{!! nl2br(e($getTranslated($faq, 'answer'))) !!}</p>
</div>
</div>
</div>
@endforeach
</div>
<!--/column -->
</div>
<!--/.row -->
</div>
<!--/column -->
</div>
<!--/.row -->
</div>
<!-- /.container -->
</section>
<!-- /section -->
@endif
@endsection
</div>
</section>
@endif
{{-- 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('Projelerinizde 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/illustrations/app-dev/app-dev-platforms.png') }}" type="image/webp">
<img class="app-dev-illustration app-dev-illustration--platforms w-full max-w-full !h-auto" src="{{ asset('assets/img/illustrations/app-dev/app-dev-platforms.png') }}" alt="{{ t('Trunçgil Teknoloji çoklu platform uygulamalar') }}" width="1024" height="1024" 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">
{{ $product->translate('title') }} {!! t('ile hemen') !!} <span class="text-gradient gradient-7">{!! t('başlayın.') !!}</span>
</h2>
<p class="lead !text-[1.2rem] !leading-[1.5] !font-normal !mb-7">
{!! t('Trunçgil Teknoloji ekibi, fikrinizi veya ürününüzü tüm dijital ekosistemlerde en verimli şekilde hayata geçirmek için yanınızda.') !!}
</p>
<div class="flex flex-wrap justify-center xl:!justify-start lg:!justify-start gap-3 items-center">
<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/illustrations/app-dev/app-dev-cta.png') }}" type="image/webp">
<img class="app-dev-illustration app-dev-illustration--cta w-full max-w-full !h-auto" src="{{ asset('assets/img/illustrations/app-dev/app-dev-cta.png') }}" alt="{{ $product->translate('title') }}" width="1024" height="1024" loading="lazy" decoding="async">
</picture>
</figure>
</div>
</div>
</div>
</section>
@endsection