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

refactor: remove floating doodle animations and standardize animation durations across components

Browse Source
This commit is contained in:
Ümit Tunç
2026-05-23 23:36:19 +03:00
parent 45c9fa24d0
commit 2b15c17e60
1 changed files with 34 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/views/templates/services/web-development.blade.php
+34 -25
View File
@@ -172,13 +172,9 @@
transform: rotate(10deg) scale(1.1);
}
/* Floating Doodle Animations */
@keyframes float-gentle {
0%, 100% { transform: translateY(0) rotate(0deg); }
50% { transform: translateY(-10px) rotate(3deg); }
}
/* Floating Doodle Animations (Removed loop animations on doodles as requested) */
.floating-doodle {
animation: float-gentle 6s ease-in-out infinite;
/* static doodle position */
}
/* Grid layout adjustments */
@@ -907,7 +903,7 @@
<span><a href="#neler-yapiyoruz" class="btn btn-lg btn-primary !text-white !bg-[#e31e24] border-[#e31e24] hover:!bg-[#c4191f] hover:!border-[#c4191f] hover:!text-white active:!bg-[#a61217] !rounded-[50rem] mx-2 font-semibold shadow-[0_10px_20px_-10px_rgba(227,30,36,0.5)] transition-all duration-300">{!! t('Çözümlerimiz') !!}</a></span>
<span><a href="{{ $contactUrl }}" class="btn btn-lg btn-outline-primary !text-[#e31e24] !bg-white border-[#e31e24] hover:!text-white hover:!bg-[#e31e24] hover:!border-[#e31e24] active:!bg-[#e31e24] active:!text-white !rounded-[50rem] !border-[#e31e24] mx-2 font-semibold shadow-[0_10px_20px_-10px_rgba(30,34,40,0.15)] transition-all duration-300">{!! t('Bize Ulaşın') !!}</a></span>
</div>
<div class="flex flex-wrap mx-[-15px] !mt-[3.5rem]" data-cue="fadeIn" data-delay="1600">
<div class="flex flex-wrap mx-[-15px] !mt-[3.5rem]" data-cue="fadeIn" data-delay="1600" data-duration="400">
<div class="xl:w-8/12 lg:w-8/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto">
<figure class="m-0 p-0">
<x-front.page-hero-image
@@ -933,7 +929,7 @@
<section class="wrapper !bg-[#ffffff] web-dev-section">
<div class="container 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" data-cues="slideInUp" data-group="tech-header">
<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" data-cues="slideInUp" data-group="tech-header" data-duration="400">
<img src="{{ asset('assets/img/svg/doodle3.svg') }}" class="!h-[3rem] absolute hidden xl:block lg:block floating-doodle" 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 floating-doodle" 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('Teknoloji Ekosistemimiz') !!}</h2>
@@ -945,7 +941,7 @@
<div class="flex flex-wrap mx-[-15px] !mb-28">
<div class="xxl:w-11/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto">
<ul class="nav nav-tabs tech-tabs-grid" role="tablist" data-cues="slideInUp" data-group="tech-tabs" data-interval="-200">
<ul class="nav nav-tabs tech-tabs-grid" role="tablist" data-cues="slideInUp" data-group="tech-tabs" data-interval="-200" data-duration="400">
@foreach($techCategories as $key => $category)
<li class="nav-item !mb-[20px]" role="presentation">
<a class="nav-link !flex flex-row items-center {{ $loop->first ? 'active' : '' }}" data-bs-toggle="tab" href="#tab-tech-{{ $key }}" aria-selected="{{ $loop->first ? 'true' : 'false' }}" role="tab" {!! !$loop->first ? 'tabindex="-1"' : '' !!}>
@@ -964,7 +960,7 @@
<div class="tab-content mt-8">
@foreach($techCategories as $key => $category)
<div class="tab-pane fade {{ $loop->first ? 'show active' : '' }}" id="tab-tech-{{ $key }}">
<div class="flex flex-wrap mx-[-15px] xl:mx-[-20px] lg:mx-[-20px] md:mx-[-20px] !mt-[-40px] justify-center" data-cues="slideInUp" data-group="tech-cards-{{ $key }}" data-interval="-200">
<div class="flex flex-wrap mx-[-15px] xl:mx-[-20px] lg:mx-[-20px] md:mx-[-20px] !mt-[-40px] justify-center" data-cues="slideInUp" data-group="tech-cards-{{ $key }}" data-interval="-200" data-duration="400">
@foreach($technologies as $tech)
@if(in_array($tech['name'], $category['items']))
<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-[40px] max-w-full">
@@ -989,7 +985,7 @@
{{-- Capabilities Section --}}
<div id="neler-yapiyoruz" class="flex flex-wrap mx-[-15px] !text-center !mt-12">
<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" data-cues="slideInUp" data-group="cap-header">
<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" data-cues="slideInUp" data-group="cap-header" data-duration="400">
<h2 class="!text-[0.8rem] !leading-[1.35] !tracking-[0.02rem] uppercase !text-[#74788d] !mb-3">{!! t('Neler Yapıyoruz?') !!}</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('İhtiyaçlarınıza özel, yüksek performanslı') !!} <span class="text-gradient gradient-7">{!! t('dijital çözümler') !!}</span>
@@ -997,7 +993,7 @@
</div>
</div>
<div class="flex flex-wrap mx-[-15px] !mb-28" data-cues="slideInUp" data-group="cap-cards" data-interval="-150">
<div class="flex flex-wrap mx-[-15px] !mb-28" data-cues="slideInUp" data-group="cap-cards" data-interval="-150" data-duration="400">
@foreach($capabilities as $index => $cap)
<div class="md:w-6/12 lg:w-4/12 xl:w-4/12 w-full flex-[0_0_auto] !px-[15px] !mt-6 max-w-full">
<div class="card h-full !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.06)] border-0 flex flex-col justify-between !rounded-[1.2rem] overflow-hidden">
@@ -1015,7 +1011,7 @@
{{-- 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" data-cues="slideInUp" data-group="process-header">
<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" data-cues="slideInUp" data-group="process-header" data-duration="400">
<img src="{{ asset('assets/img/svg/doodle5.svg') }}" class="!w-[5rem] absolute hidden xl:block lg:block floating-doodle" 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 floating-doodle" 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>
@@ -1028,7 +1024,7 @@
<div class="flex flex-wrap mx-[-15px] lg:!mb-20 xl:!mb-[10rem]">
<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" data-cue="fadeIn" data-delay="300">
<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" data-cue="fadeIn" data-delay="300" data-duration="400">
<figure class="mx-auto">
<picture>
<source srcset="{{ asset('assets/img/illustrations/i9.png') }}" type="image/webp">
@@ -1037,7 +1033,7 @@
</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" data-cues="slideInUp" data-group="process-steps-left" data-interval="-200">
<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" data-cues="slideInUp" data-group="process-steps-left" data-interval="-200" data-duration="400">
@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>
@@ -1046,7 +1042,7 @@
</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" data-cues="slideInUp" data-group="process-steps-right" data-interval="-200" data-delay="300">
<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" data-cues="slideInUp" data-group="process-steps-right" data-interval="-200" data-delay="300" data-duration="400">
@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>
@@ -1066,7 +1062,7 @@
<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" data-cues="slideInUp" data-group="faq-header">
<div class="!relative !mb-12" data-cues="slideInUp" data-group="faq-header" data-duration="400">
<img src="{{ asset('assets/img/svg/doodle7.svg') }}" class="h-7 absolute hidden xl:block lg:block floating-doodle" 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 floating-doodle" 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>
@@ -1075,7 +1071,7 @@
</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" data-cues="slideInUp" data-group="faq-list-1" data-interval="-150">
<div class="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mb-0" data-cues="slideInUp" data-group="faq-list-1" data-interval="-150" data-duration="400">
<div id="accordion-web-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)]">
@@ -1093,7 +1089,7 @@
@endforeach
</div>
</div>
<div class="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] !px-[15px] max-w-full" data-cues="slideInUp" data-group="faq-list-2" data-interval="-150" data-delay="300">
<div class="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] !px-[15px] max-w-full" data-cues="slideInUp" data-group="faq-list-2" data-interval="-150" data-delay="300" data-duration="400">
<div id="accordion-web-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)]">
@@ -1121,7 +1117,7 @@
<section class="wrapper !bg-[#ffffff] web-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" data-cues="slideInUp" data-group="why-header">
<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" data-cues="slideInUp" data-group="why-header" data-duration="400">
<img src="{{ asset('assets/img/svg/doodle3.svg') }}" class="!h-[3rem] absolute hidden xl:block lg:block floating-doodle" 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 floating-doodle" 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>
@@ -1132,7 +1128,7 @@
</div>
<div class="flex-wrap mx-[-15px] flex items-start !mb-32">
<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;" data-cue="slideInLeft">
<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;" data-cue="slideInLeft" data-duration="400">
<figure class="m-0 p-0">
<picture>
<source srcset="{{ asset('assets/img/illustrations/i17.png') }}" type="image/webp">
@@ -1140,7 +1136,7 @@
</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" data-cues="slideInUp" data-group="why-list" data-interval="-200" data-delay="300">
<div class="xl:w-5/12 lg:w-5/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !ml-auto" data-cues="slideInUp" data-group="why-list" data-interval="-200" data-delay="300" data-duration="400">
@foreach($whyChoose as $item)
<div class="flex flex-row !mb-8">
<div>
@@ -1159,7 +1155,7 @@
{{-- 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" data-cues="slideInUp" data-group="test-header">
<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" data-cues="slideInUp" data-group="test-header" data-duration="400">
<img src="{{ asset('assets/img/svg/doodle1.svg') }}" class="h-9 !absolute hidden xl:block lg:block floating-doodle" 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 floating-doodle" 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 floating-doodle" style="top: -40%; right: -15%" alt="" loading="lazy">
@@ -1170,7 +1166,7 @@
</div>
</div>
<div class="itemgrid !mb-10" data-cues="slideInUp" data-group="test-cards" data-interval="-200">
<div class="itemgrid !mb-10" data-cues="slideInUp" data-group="test-cards" data-interval="-200" data-duration="400">
<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-6/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mt-[30px]">
@@ -1207,7 +1203,7 @@
</div>
<div class="container pt-10 xl:pt-10 lg:pt-10 md:pt-16 pb-8 xl:pb-12 lg:pb-12 md:pb-12 text-center xl:text-left lg:text-left">
<div class="flex flex-wrap mx-0 !mt-[-50px] items-center">
<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]" data-cues="slideInUp" data-group="cta-text" data-delay="300">
<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]" data-cues="slideInUp" data-group="cta-text" data-delay="300" data-duration="400">
<img src="{{ asset('assets/img/svg/doodle2.svg') }}" class="!h-[5rem] !absolute hidden xl:block lg:block floating-doodle" 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 floating-doodle" 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">
@@ -1220,6 +1216,19 @@
<a href="{{ $contactUrl }}" class="btn btn-gradient gradient-7 !rounded-[0.8rem] !px-6 !text-white">{!! 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]" data-cue="slideInRight" data-delay="300" data-duration="400">
<figure class="m-0 p-0">
<picture>
<source srcset="{{ asset('assets/img/illustrations/i12.png') }}" type="image/webp">
<img class="web-dev-illustration web-dev-illustration--cta w-full max-w-full !h-auto" src="{{ asset('assets/img/illustrations/i12.png') }}" alt="{!! t('Trunçgil Teknoloji web geliştirme') !!}" width="1024" height="1024" loading="lazy" decoding="async">
</picture>
</figure>
</div>
</div>
</div>
</section>class="btn btn-gradient gradient-7 !rounded-[0.8rem] !px-6 !text-white">{!! 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]" data-cue="slideInRight" data-delay="300">
<figure class="m-0 p-0">
<picture>