style: update filter button pill shapes and replace iconography with logo in awards section

This commit is contained in:
Ümit Tunç
2026-05-27 06:56:28 +03:00
parent 5a1dfb51a2
commit d39acfc582
@@ -87,8 +87,8 @@
<!-- Elegant Interactive Filter Tabs -->
@if(count($categories) > 0)
<div id="awards-filter-tabs" class="flex justify-center mb-16 relative z-10">
<div class="inline-flex flex-wrap justify-center gap-2 p-1.5 bg-white/80 backdrop-blur-md rounded-2xl shadow-[0_4px_20px_rgba(0,0,0,0.03)] border border-slate-100">
<button class="filter-btn px-5 py-2.5 rounded-xl text-xs font-extrabold uppercase tracking-wider transition-all duration-300 active" data-filter="all">
<div class="inline-flex flex-wrap justify-center gap-2 p-1.5 bg-white/80 backdrop-blur-md shadow-[0_4px_20px_rgba(0,0,0,0.03)] border border-slate-100" style="border-radius: 999px !important;">
<button class="filter-btn px-5 py-2.5 text-xs font-extrabold uppercase tracking-wider transition-all duration-300 active" data-filter="all" style="border-radius: 999px !important;">
<i class="uil uil-apps mr-1 text-sm align-middle"></i> {{ t('Tümü') }}
</button>
@foreach($categories as $cat)
@@ -101,7 +101,7 @@
elseif($cat === 'innovation') $icon = 'uil-lightbulb';
elseif($cat === 'design') $icon = 'uil-palette';
@endphp
<button class="filter-btn px-5 py-2.5 rounded-xl text-xs font-extrabold uppercase tracking-wider transition-all duration-300 text-gray-500 hover:text-gray-900 hover:bg-slate-50" data-filter="{{ $cat }}">
<button class="filter-btn px-5 py-2.5 text-xs font-extrabold uppercase tracking-wider transition-all duration-300 text-gray-500 hover:text-gray-900 hover:bg-slate-50" data-filter="{{ $cat }}" style="border-radius: 999px !important;">
<i class="uil {{ $icon }} mr-1 text-sm align-middle"></i> {{ $label }}
</button>
@endforeach
@@ -203,9 +203,7 @@
<div class="absolute -left-12 -bottom-12 w-64 h-64 rounded-full bg-white/10 opacity-20 blur-xl group-hover:scale-125 transition-transform duration-700"></div>
<div class="relative z-10 max-w-2xl mx-auto flex flex-col items-center">
<div class="w-14 h-14 bg-white/10 backdrop-blur-md rounded-2xl flex items-center justify-center mb-6 border border-white/20 shadow-inner group-hover:rotate-12 transition-transform duration-500">
<i class="uil uil-rocket text-2xl text-white"></i>
</div>
<img src="assets/img/truncgil-yatay-dark.svg" alt="">
<h3 class="text-2xl md:text-3xl font-black mb-4 tracking-tight leading-tight" style="color: #ffffff !important;">{{ t('Bu başarıları birlikte kazandık!') }}</h3>
<p class="text-sm md:text-base leading-relaxed mb-8 font-medium max-w-xl" style="color: rgba(255, 255, 255, 0.95) !important;">{{ t('Geleceği yenilikçi teknolojilerle şekillendiren bu harika ekibin bir parçası olmak, bizimle yeni ödüllere koşmak ister misin?') }}</p>
<a href="{{ url('/kariyer') }}" class="inline-flex items-center gap-2 px-8 py-3.5 rounded-full text-xs font-black uppercase tracking-wider hover:translate-y-[-0.2rem] hover:shadow-2xl transition-all duration-350 border-0 group/btn" style="background-color: #ffffff !important; color: #e31e24 !important; text-decoration: none;">
@@ -227,6 +225,7 @@
background: transparent;
border: 0;
color: #64748b;
border-radius: 999px !important;
}
.filter-btn.active {
background-color: #e31e24 !important;
@@ -339,6 +338,8 @@
/* Custom premium card shadow on hover */
.awards-timeline__content {
box-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.02), 0 2px 6px -1px rgba(0, 0, 0, 0.01);
border-radius: 20px !important;
overflow: hidden !important;
}
.awards-timeline__item:hover .awards-timeline__content {