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

feat: add GSAP scroll-triggered animation attributes to various sections and elements on the AI services page

Browse Source
This commit is contained in:
Ümit Tunç
2026-05-24 00:13:29 +03:00
parent 79ca5d49b6
commit dd013a471d
1 changed files with 14 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/views/templates/services/yapay-zeka.blade.php
+14 -13
View File
@@ -229,14 +229,14 @@
<div class="card-body py-[4.5rem] px-0"> <div class="card-body py-[4.5rem] px-0">
<div class="container"> <div class="container">
<div class="flex flex-wrap mx-[-15px] md:mx-[-20px] lg:mx-[-20px] xl:mx-[-35px] !mt-[-50px] items-center text-center lg:text-left xl:text-left"> <div class="flex flex-wrap mx-[-15px] md:mx-[-20px] lg:mx-[-20px] xl:mx-[-35px] !mt-[-50px] items-center text-center lg:text-left xl:text-left">
<div class="lg:w-6/12 xl:w-6/12 w-full flex-[0_0_auto] !px-[15px] md:!px-[20px] lg:!px-[20px] xl:!px-[35px] !mt-[50px] max-w-full" data-cues="slideInDown" data-group="page-title" data-delay="900" data-disabled="true"> <div class="lg:w-6/12 xl:w-6/12 w-full flex-[0_0_auto] !px-[15px] md:!px-[20px] lg:!px-[20px] xl:!px-[35px] !mt-[50px] max-w-full" data-cues="slideInDown" data-group="page-title" data-delay="900">
<h1 class="xl:!text-[2.3rem] !text-[calc(1.355rem_+_1.26vw)] font-semibold !leading-[1.2] !tracking-[normal] !mb-4 xl:!mr-5 xxl:!mr-0" data-cue="slideInDown" data-group="page-title" data-delay="900" data-show="true" style="animation-name: slideInDown; animation-duration: 700ms; animation-timing-function: ease; animation-delay: 900ms; animation-direction: normal; animation-fill-mode: both;">{!! t('Yapay Zeka ve Derin Öğrenme ile') !!} <span class="text-gradient gradient-1">{!! t('Geleceği Şekillendirin') !!}</span></h1> <h1 class="xl:!text-[2.3rem] !text-[calc(1.355rem_+_1.26vw)] font-semibold !leading-[1.2] !tracking-[normal] !mb-4 xl:!mr-5 xxl:!mr-0">{!! t('Yapay Zeka ve Derin Öğrenme ile') !!} <span class="text-gradient gradient-1">{!! t('Geleceği Şekillendirin') !!}</span></h1>
<p class="lead !text-[1.15rem] !leading-[1.5] font-medium !mb-7 xxl:!pr-20" data-cue="slideInDown" data-group="page-title" data-delay="900" data-show="true" style="animation-name: slideInDown; animation-duration: 700ms; animation-timing-function: ease; animation-delay: 1200ms; animation-direction: normal; animation-fill-mode: both;">{!! t('Karmaşık verilerinizi saniyeler içinde anlamlı kararlara ve akıllı otomasyon sistemlerine dönüştürüyoruz. PyTorch ve TensorFlow motorları ile işletmenize özel Yapay Zeka çözümleri sunuyoruz.') !!}</p> <p class="lead !text-[1.15rem] !leading-[1.5] font-medium !mb-7 xxl:!pr-20">{!! t('Karmaşık verilerinizi saniyeler içinde anlamlı kararlara ve akıllı otomasyon sistemlerine dönüştürüyoruz. PyTorch ve TensorFlow motorları ile işletmenize özel Yapay Zeka çözümleri sunuyoruz.') !!}</p>
<div data-cue="slideInDown" data-group="page-title" data-delay="900" data-show="true" style="animation-name: slideInDown; animation-duration: 700ms; animation-timing-function: ease; animation-delay: 1500ms; animation-direction: normal; animation-fill-mode: both;"><a href="#detaylar" class="btn btn-lg btn-gradient gradient-1 rounded">{!! t('Teknolojileri İnceleyin') !!}</a></div> <div><a href="#detaylar" class="btn btn-lg btn-gradient gradient-1 rounded">{!! t('Teknolojileri İnceleyin') !!}</a></div>
</div> </div>
<!--/column --> <!--/column -->
<div class="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] !px-[15px] md:!px-[20px] lg:!px-[20px] xl:!px-[35px] !mt-[50px] max-w-full"> <div class="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] !px-[15px] md:!px-[20px] lg:!px-[20px] xl:!px-[35px] !mt-[50px] max-w-full">
<img class="max-w-full h-auto !mb-[-8rem] hero-ai-illustration" src="{{ asset('assets/img/illustrations/yapay-zeka-truncgil.png') }}" data-cue="fadeIn" data-delay="300" alt="image" data-show="true" style="animation-name: fadeIn; animation-duration: 700ms; animation-timing-function: ease; animation-delay: 300ms; animation-direction: normal; animation-fill-mode: both;"> <img class="max-w-full h-auto !mb-[-8rem] hero-ai-illustration" src="{{ asset('assets/img/illustrations/yapay-zeka-truncgil.png') }}" data-cue="fadeIn" data-delay="300" alt="image">
</div> </div>
<!--/column --> <!--/column -->
</div> </div>
@@ -256,14 +256,14 @@
<div class="container pt-[4.5rem] xl:pt-28 lg:pt-28 md:pt-28 pb-[4.5rem] xl:pb-32 lg:pb-32 md:pb-32"> <div class="container pt-[4.5rem] xl:pt-28 lg:pt-28 md:pt-28 pb-[4.5rem] xl:pb-32 lg:pb-32 md:pb-32">
{{-- Part 1: AI/ML Technology Grid --}} {{-- Part 1: AI/ML Technology Grid --}}
<div class="flex flex-wrap mx-[-15px] !text-center"> <div class="flex flex-wrap mx-[-15px] !text-center" data-cues="slideInUp" data-group="tech-header" data-duration="400">
<div class="md:w-10/12 xl:w-8/12 lg:w-8/12 w-full flex-[0_0_auto] !px-[15px] max-w-full xl:!ml-[16.66666667%] lg:!ml-[16.66666667%] md:!ml-[8.33333333%]"> <div class="md:w-10/12 xl:w-8/12 lg:w-8/12 w-full flex-[0_0_auto] !px-[15px] max-w-full xl:!ml-[16.66666667%] lg:!ml-[16.66666667%] md:!ml-[8.33333333%]">
<h2 class="!text-[0.8rem] !tracking-[0.02rem] !leading-[1.35] uppercase text-gradient gradient-1 !mb-3">{!! t('Yapay Zeka Teknolojilerimiz ve Süreçlerimiz') !!}</h2> <h2 class="!text-[0.8rem] !tracking-[0.02rem] !leading-[1.35] uppercase text-gradient gradient-1 !mb-3">{!! t('Yapay Zeka Teknolojilerimiz ve Süreçlerimiz') !!}</h2>
<h3 class="xl:!text-[1.9rem] !text-[calc(1.315rem_+_0.78vw)] font-semibold !leading-[1.25] !tracking-[normal] !mb-9 xl:!px-12">{!! t('Yapay zeka modellerinin arkasındaki karmaşık süreçleri, en güçlü teknolojilerle harmanlayarak işletmenize özel anahtar teslim çözümlere dönüştürüyoruz.') !!}</h3> <h3 class="xl:!text-[1.9rem] !text-[calc(1.315rem_+_0.78vw)] font-semibold !leading-[1.25] !tracking-[normal] !mb-9 xl:!px-12">{!! t('Yapay zeka modellerinin arkasındaki karmaşık süreçleri, en güçlü teknolojilerle harmanlayarak işletmenize özel anahtar teslim çözümlere dönüştürüyoruz.') !!}</h3>
</div> </div>
</div> </div>
<div class="flex flex-wrap mx-[-15px] !mt-[-40px] !mb-[7rem]"> <div class="flex flex-wrap mx-[-15px] !mt-[-40px] !mb-[7rem]" data-cues="slideInUp" data-group="tech-cards" data-interval="-150" data-duration="400">
{{-- Item 1: TensorFlow --}} {{-- Item 1: TensorFlow --}}
<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-[40px]"> <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-[40px]">
<div class="flex flex-row"> <div class="flex flex-row">
@@ -345,13 +345,13 @@
{{-- Part 2: Have Perfect Control (Training Cycle Loop) --}} {{-- Part 2: Have Perfect Control (Training Cycle Loop) --}}
<div class="flex flex-wrap mx-[-7.5px] !mt-[-50px] !mb-[5rem] xl:!mb-[8rem] lg:!mb-[8rem] md:!mb-[8rem] items-center"> <div class="flex flex-wrap mx-[-7.5px] !mt-[-50px] !mb-[5rem] xl:!mb-[8rem] lg:!mb-[8rem] md:!mb-[8rem] items-center">
<div class="xl:w-5/12 lg:w-5/12 w-full flex-[0_0_auto] px-[7.5px] !mt-[50px] max-w-full xl:!ml-[8.33333333%] lg:!ml-[8.33333333%]"> <div class="xl:w-5/12 lg:w-5/12 w-full flex-[0_0_auto] px-[7.5px] !mt-[50px] max-w-full xl:!ml-[8.33333333%] lg:!ml-[8.33333333%]" data-cue="slideInLeft" data-duration="400">
<figure class="m-0 p-0"> <figure class="m-0 p-0">
<img class="w-auto" src="{{ asset('assets/img/illustrations/3d2.png') }}" alt="AI Control Model illustration"> <img class="w-auto" src="{{ asset('assets/img/illustrations/3d2.png') }}" alt="AI Control Model illustration">
</figure> </figure>
</div> </div>
<div class="xl:w-5/12 lg:w-5/12 w-full flex-[0_0_auto] px-[7.5px] !mt-[50px] max-w-full xl:!ml-[8.33333333%] lg:!ml-[8.33333333%]"> <div class="xl:w-5/12 lg:w-5/12 w-full flex-[0_0_auto] px-[7.5px] !mt-[50px] max-w-full xl:!ml-[8.33333333%] lg:!ml-[8.33333333%]" data-cues="slideInUp" data-group="training-content" data-delay="300" data-duration="400">
<h2 class="!text-[0.8rem] !tracking-[0.02rem] !leading-[1.35] uppercase text-gradient gradient-1 !mb-3">{!! t('Eğitim Sürecinde Tam Kontrol') !!}</h2> <h2 class="!text-[0.8rem] !tracking-[0.02rem] !leading-[1.35] uppercase text-gradient gradient-1 !mb-3">{!! t('Eğitim Sürecinde Tam Kontrol') !!}</h2>
<h3 class="xl:!text-[1.9rem] !text-[calc(1.315rem_+_0.78vw)] font-semibold !leading-[1.25] !tracking-[normal] !mb-4">{!! t('Yapay zekanın eğitim döngüsünü adım adım izliyor, her aşamayı optimize ediyoruz.') !!}</h3> <h3 class="xl:!text-[1.9rem] !text-[calc(1.315rem_+_0.78vw)] font-semibold !leading-[1.25] !tracking-[normal] !mb-4">{!! t('Yapay zekanın eğitim döngüsünü adım adım izliyor, her aşamayı optimize ediyoruz.') !!}</h3>
<p class="!mb-6 text-muted !text-[0.95rem]">{!! t('Model eğitimi sadece kod yazmaktan ibaret değildir. Eğitim esnasında gradient patlamalarını, aşırı öğrenmeyi (overfitting) ve kaynak tüketimini anlık olarak izliyoruz. Şeffaf ve kontrol edilebilir yapay zeka modelleri geliştiriyoruz.') !!}</p> <p class="!mb-6 text-muted !text-[0.95rem]">{!! t('Model eğitimi sadece kod yazmaktan ibaret değildir. Eğitim esnasında gradient patlamalarını, aşırı öğrenmeyi (overfitting) ve kaynak tüketimini anlık olarak izliyoruz. Şeffaf ve kontrol edilebilir yapay zeka modelleri geliştiriyoruz.') !!}</p>
@@ -392,7 +392,7 @@
{{-- Part 3: What Makes Us Different? (Floating Stats Cards) --}} {{-- Part 3: What Makes Us Different? (Floating Stats Cards) --}}
<div class="flex flex-wrap mx-[-15px] xl:mx-[-20px] lg:mx-[-20px] md:mx-[-20px] !mt-[-50px] items-center"> <div class="flex flex-wrap mx-[-15px] xl:mx-[-20px] lg:mx-[-20px] md:mx-[-20px] !mt-[-50px] items-center">
<div class="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] xl:!px-[20px] lg:!px-[20px] md:!px-[20px] !px-[15px] max-w-full xl:!ml-[8.33333333%] lg:!ml-[8.33333333%] xl:!order-2 lg:!order-2 !relative !mt-[50px]"> <div class="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] xl:!px-[20px] lg:!px-[20px] md:!px-[20px] !px-[15px] max-w-full xl:!ml-[8.33333333%] lg:!ml-[8.33333333%] xl:!order-2 lg:!order-2 !relative !mt-[50px]" data-cues="fadeIn" data-group="why-visuals" data-duration="400">
<figure class="rounded-[0.4rem]"> <figure class="rounded-[0.4rem]">
<img class="max-w-full h-auto rounded-[0.4rem]" src="{{ asset('assets/img/photos/about27.jpg') }}" alt="AI Engine analysis dashboard"> <img class="max-w-full h-auto rounded-[0.4rem]" src="{{ asset('assets/img/photos/about27.jpg') }}" alt="AI Engine analysis dashboard">
</figure> </figure>
@@ -426,7 +426,7 @@
</div> </div>
</div> </div>
<div class="xl:w-5/12 lg:w-5/12 w-full flex-[0_0_auto] xl:!px-[20px] lg:!px-[20px] md:!px-[20px] !px-[15px] max-w-full !mt-[50px]"> <div class="xl:w-5/12 lg:w-5/12 w-full flex-[0_0_auto] xl:!px-[20px] lg:!px-[20px] md:!px-[20px] !px-[15px] max-w-full !mt-[50px]" data-cues="slideInUp" data-group="why-content" data-duration="400">
<h2 class="!text-[0.8rem] !tracking-[0.02rem] !leading-[1.35] uppercase text-gradient gradient-1 !mb-3">{!! t('Neden Trunçgil Yapay Zeka Çözümleri?') !!}</h2> <h2 class="!text-[0.8rem] !tracking-[0.02rem] !leading-[1.35] uppercase text-gradient gradient-1 !mb-3">{!! t('Neden Trunçgil Yapay Zeka Çözümleri?') !!}</h2>
<h3 class="xl:!text-[1.9rem] !text-[calc(1.315rem_+_0.78vw)] font-semibold !leading-[1.25] !tracking-[normal] !mb-4 xl:mr-[-1.25rem] lg:mr-[-1.25rem]">{!! t('Verilerinizin gücünü açığa çıkarıyor, işinizi geleceğe taşıyoruz.') !!}</h3> <h3 class="xl:!text-[1.9rem] !text-[calc(1.315rem_+_0.78vw)] font-semibold !leading-[1.25] !tracking-[normal] !mb-4 xl:mr-[-1.25rem] lg:mr-[-1.25rem]">{!! t('Verilerinizin gücünü açığa çıkarıyor, işinizi geleceğe taşıyoruz.') !!}</h3>
<p class="!mb-6 text-muted !text-[0.95rem]">{!! t('Yapay zeka çözümlerimizi tamamen işletmenizin özel ihtiyaçlarına, bütçesine ve altyapısına uyarlıyoruz. Dışa bağımlılık olmadan, yüksek performanslı ve güvenli bir dijital dönüşüm sunuyoruz.') !!}</p> <p class="!mb-6 text-muted !text-[0.95rem]">{!! t('Yapay zeka çözümlerimizi tamamen işletmenizin özel ihtiyaçlarına, bütçesine ve altyapısına uyarlıyoruz. Dışa bağımlılık olmadan, yüksek performanslı ve güvenli bir dijital dönüşüm sunuyoruz.') !!}</p>
@@ -631,14 +631,14 @@
<div class="card-body py-[4.5rem] px-0"> <div class="card-body py-[4.5rem] px-0">
<div class="container"> <div class="container">
<div class="flex flex-wrap mx-[-15px] !text-center"> <div class="flex flex-wrap mx-[-15px] !text-center">
<div class="xl:w-11/12 xxl:w-9/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto"> <div class="xl:w-11/12 xxl:w-9/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto" data-cues="slideInUp" data-group="cta-text" data-duration="400">
<h2 class="!text-[0.8rem] !tracking-[0.02rem] !leading-[1.35] uppercase text-gradient gradient-1 !mb-3">{!! t('Geleceği Birlikte İnşa Edelim') !!}</h2> <h2 class="!text-[0.8rem] !tracking-[0.02rem] !leading-[1.35] uppercase text-gradient gradient-1 !mb-3">{!! t('Geleceği Birlikte İnşa Edelim') !!}</h2>
<h3 class="xl:!text-[1.9rem] !text-[calc(1.315rem_+_0.78vw)] font-bold !leading-[1.25] !mb-7 lg:!px-[7rem] xl:!px-[7rem]"> <h3 class="xl:!text-[1.9rem] !text-[calc(1.315rem_+_0.78vw)] font-bold !leading-[1.25] !mb-7 lg:!px-[7rem] xl:!px-[7rem]">
{!! t('Yapay Zeka ekosistemiyle işinizi bir adım öne taşımaya hazır mısınız?') !!} {!! t('Yapay Zeka ekosistemiyle işinizi bir adım öne taşımaya hazır mısınız?') !!}
</h3> </h3>
</div> </div>
</div> </div>
<div class="flex justify-center"> <div class="flex justify-center" data-cue="slideInUp" data-delay="300" data-duration="400">
<a href="{{ $contactUrl }}" class="btn btn-lg btn-gradient gradient-1 rounded-full shadow-lg font-semibold">{!! t('Projeyi Başlatın') !!}</a> <a href="{{ $contactUrl }}" class="btn btn-lg btn-gradient gradient-1 rounded-full shadow-lg font-semibold">{!! t('Projeyi Başlatın') !!}</a>
</div> </div>
</div> </div>
@@ -646,4 +646,5 @@
</div> </div>
</div> </div>
</section> </section>
@endsection @endsection