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

feat: redesign awards template with new hero section and updated timeline filters

Browse Source
This commit is contained in:
Ümit Tunç
2026-05-27 06:51:35 +03:00
parent af147f5fea
commit dd0bee9355
3 changed files with 231 additions and 170 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/assets/img/illustrations/truncgil-odullerimiz.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 472 KiB

public/assets/img/illustrations/truncgil-odullerimiz.webp
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 240 KiB

resources/views/templates/odullerimiz.blade.php
+219 -158
View File
@@ -13,66 +13,106 @@
$heroTitle = $page ? ($page->translate('title') ?: $page->title) : t('Ödüllerimiz ve Başarılarımız'); $heroTitle = $page ? ($page->translate('title') ?: $page->title) : t('Ödüllerimiz ve Başarılarımız');
$heroExcerpt = $page ? ($page->translate('excerpt') ?: $page->excerpt) : t('Yenilikçi teknolojilerimizle sektöre yön veriyor, başarılarımızı küresel ödüllerle taçlandırıyoruz.'); $heroExcerpt = $page ? ($page->translate('excerpt') ?: $page->excerpt) : t('Yenilikçi teknolojilerimizle sektöre yön veriyor, başarılarımızı küresel ödüllerle taçlandırıyoruz.');
// Timeline color palette // Timeline color palette mapping for elegant signature styles
$colors = ['#e31e24', '#f5a623', '#27ae60', '#2980b9', '#8e44ad', '#1abc9c']; $colors = [
'hackathon' => '#e31e24',
'export' => '#2980b9',
'innovation' => '#27ae60',
'design' => '#8e44ad',
'general' => '#f5a623'
];
// Dynamic cover image pulling from page's featured image or falling back $rgbColors = [
$coverImage = ($page && $page->featured_image) 'hackathon' => '227, 30, 36',
? asset('storage/' . $page->featured_image) 'export' => '41, 128, 185',
: (($page && $page->featured_image_url) ? $page->featured_image_url : asset('assets/img/photos/bg4.webp')); 'innovation' => '39, 174, 96',
'design' => '142, 68, 173',
'general' => '245, 166, 35'
];
$heroTitleBefore = t('Başarılarımızı ve ') ?? 'Başarılarımızı ve ';
$heroHighlight = t('Ödüllerimizi ') ?? 'Ödüllerimizi ';
$heroTitleAfter = t('Taçlandırıyoruz') ?? 'Taçlandırıyoruz';
$heroCtaLabel = t('Ödülleri Keşfet') ?? 'Ödülleri Keşfet';
@endphp @endphp
<div class="grow shrink-0 bg-[#fbfcfd]"> @include('components.company-history.fonts')
<div class="grow shrink-0 bg-[#f8fafc]">
<!-- Hero Section --> <!-- Hero Section -->
<section class="wrapper image-wrapper bg-image bg-overlay bg-overlay-400 !text-white bg-no-repeat bg-[center_center] bg-cover relative z-0 !bg-fixed before:content-[''] before:block before:absolute before:z-[1] before:w-full before:h-full before:left-0 before:top-0 before:bg-[rgba(30,34,40,.55)]" data-image-src="{{ $coverImage }}" style="background-image: url('{{ $coverImage }}');"> <section class="company-history-fonts company-history-hero wrapper bg-gradient-yellow relative overflow-hidden pb-12 pt-6">
<div class="container pt-28 pb-40 xl:pt-36 lg:pt-36 md:pt-36 xl:pb-[12.5rem] lg:pb-[12.5rem] md:pb-[12.5rem] !text-center"> <div class="absolute inset-0 bg-[radial-gradient(circle_at_70%_20%,rgba(254,243,199,0.4),transparent_50%)]"></div>
<div class="flex flex-wrap mx-[-15px]"> <div class="container pt-10 xl:pt-[5rem] lg:pt-[5rem] md:pt-[5rem] pb-10 xl:pb-14 lg:pb-14 md:pb-14 relative z-10">
<div class="xl:w-8/12 lg:w-8/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto"> <div class="flex flex-wrap mx-[-15px] xl:mx-[-35px] lg:mx-[-20px] !mt-[-50px] items-center">
<h1 class="!text-[calc(1.365rem_+_1.38vw)] font-bold !leading-[1.2] xl:!text-[2.6rem] !mb-4 !text-white">{{ $heroTitle }}</h1> <div class="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] !px-[15px] xl:!px-[35px] lg:!px-[20px] !mt-[50px] max-w-full order-last lg:order-first">
<p class="lead !text-[1.05rem] !leading-[1.6] !text-white opacity-90 max-w-2xl mx-auto mb-6">{{ $heroExcerpt }}</p> <figure class="m-0 p-0 relative group">
<nav class="inline-block" aria-label="breadcrumb"> <div class="absolute -inset-1 bg-gradient-to-r from-red-500 to-amber-500 rounded-2xl blur opacity-25 group-hover:opacity-40 transition duration-1000 group-hover:duration-200"></div>
<ol class="breadcrumb flex flex-wrap bg-[none] p-0 !rounded-none list-none !mb-[20px] justify-center"> <picture class="relative block bg-white/40 backdrop-blur-md p-4 rounded-2xl border border-white/50 shadow-xl">
<li class="breadcrumb-item flex !text-[#c3c3c3]"><a class="!text-white hover:text-[#e31e24]" href="{{ url('/') }}">{{ t('Anasayfa') }}</a></li> <img
<li class="breadcrumb-item flex !text-white !pl-2 before:font-normal before:!flex before:items-center before:text-[rgba(255,255,255,.5)] before:content-['\e931'] before:text-[0.9rem] before:-mt-px before:!pr-2 before:font-Unicons active" aria-current="page">{{ t('Ödüllerimiz') }}</li> class="w-auto max-w-full h-auto rounded-xl transform hover:scale-[1.02] transition-all duration-500"
</ol> src="{{ asset('assets/img/illustrations/truncgil-odullerimiz.webp') }}"
</nav> alt="{{ t('Ödüllerimiz') }}"
style="max-height: 420px; object-fit: contain; width: 100%;"
loading="eager"
fetchpriority="high"
decoding="async"
>
</picture>
</figure>
</div>
<div class="md:w-10/12 lg:w-6/12 xl:w-6/12 md:!ml-[8.33333333%] lg:!ml-0 xl:!ml-0 flex-[0_0_auto] !px-[15px] xl:!px-[35px] lg:!px-[20px] !mt-[50px] max-w-full text-center lg:!text-left xl:!text-left">
<span class="inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-xs font-bold bg-[#e31e24]/10 text-[#e31e24] mb-4">
<i class="uil uil-trophy"></i> {{ t('Gurur Tablomuz') }}
</span>
<h1 class="company-history-hero__title !mb-5 md:mx-[-1.25rem] lg:mx-0 !leading-[1.2]">
{{ $heroTitleBefore }}<span class="company-history-hero__highlight text-[#e31e24]">{{ $heroHighlight }}</span>{{ $heroTitleAfter }}
</h1>
<p class="lead !text-[1.05rem] !leading-[1.7] text-gray-600 mb-8 max-w-xl mx-auto lg:mx-0">{{ $heroExcerpt }}</p>
<div class="flex flex-wrap justify-center lg:justify-start gap-4">
<a
href="#awards-timeline-section"
class="company-history-hero__cta btn btn-red !text-white !bg-[#e31e24] border-[#e31e24] hover:text-white hover:bg-[#c8191f] hover:!border-[#c8191f] !rounded-[50rem] px-8 py-3.5 text-sm font-bold shadow-lg shadow-red-500/20 hover:shadow-red-500/30 hover:translate-y-[-0.15rem] transition-all duration-300"
>
{{ $heroCtaLabel }} <i class="uil uil-arrow-down ml-1"></i>
</a>
</div>
</div> </div>
</div> </div>
</div> </div>
</section> </section>
<!-- Main Content wrapper with Timeline --> <!-- Main Content wrapper with Timeline -->
<section class="wrapper !bg-[#f4f6f8] relative border-0 upper-end before:top-[-4rem] before:border-l-transparent before:border-r-[100vw] before:border-t-[4rem] before:border-[#f4f6f8] before:content-[''] before:block before:absolute before:z-0 before:border-y-transparent before:border-0 before:border-solid before:right-0"> <section id="awards-timeline-section" class="wrapper !bg-[#f8fafc] py-16 relative">
<div class="container pb-16"> <div class="container">
<div class="xl:w-10/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto !mt-[-9rem] relative z-10">
<!-- Category Filters --> <!-- Elegant Interactive Filter Tabs -->
<div class="flex flex-wrap justify-center gap-2 mb-14" id="awards-filter-tabs"> @if(count($categories) > 0)
<button class="filter-btn active px-5 py-2 text-xs font-bold rounded-full transition-all border bg-white text-gray-700 hover:bg-gray-100 border-gray-200" data-filter="all"> <div id="awards-filter-tabs" class="flex justify-center mb-16 relative z-10">
{{ t('Tüm Ödüller') }} <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">
<i class="uil uil-apps mr-1 text-sm align-middle"></i> {{ t('Tümü') }}
</button> </button>
@if(in_array('hackathon', $categories)) @foreach($categories as $cat)
<button class="filter-btn px-5 py-2 text-xs font-bold rounded-full transition-all border bg-white text-gray-700 hover:bg-gray-100 border-gray-200" data-filter="hackathon"> @php
{{ t('Hackathon / Yarışma') }} $labelKey = 'awards.category_' . $cat;
$label = Lang::has($labelKey) ? __($labelKey) : ucfirst($cat);
$icon = 'uil-award';
if($cat === 'hackathon') $icon = 'uil-trophy';
elseif($cat === 'export') $icon = 'uil-globe';
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 }}">
<i class="uil {{ $icon }} mr-1 text-sm align-middle"></i> {{ $label }}
</button> </button>
@endif @endforeach
@if(in_array('export', $categories))
<button class="filter-btn px-5 py-2 text-xs font-bold rounded-full transition-all border bg-white text-gray-700 hover:bg-gray-100 border-gray-200" data-filter="export">
{{ t('İhracat / Başarı') }}
</button>
@endif
@if(in_array('innovation', $categories))
<button class="filter-btn px-5 py-2 text-xs font-bold rounded-full transition-all border bg-white text-gray-700 hover:bg-gray-100 border-gray-200" data-filter="innovation">
{{ t('İnovasyon / Ar-Ge') }}
</button>
@endif
@if(in_array('design', $categories))
<button class="filter-btn px-5 py-2 text-xs font-bold rounded-full transition-all border bg-white text-gray-700 hover:bg-gray-100 border-gray-200" data-filter="design">
{{ t('Tasarım') }}
</button>
@endif
</div> </div>
</div>
@endif
<div class="xl:w-10/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto relative z-10">
<!-- Timeline Container --> <!-- Timeline Container -->
<div class="awards-timeline" data-timeline-animate> <div class="awards-timeline" data-timeline-animate>
@@ -83,11 +123,13 @@
<div class="awards-timeline__track"> <div class="awards-timeline__track">
@foreach($awards as $index => $award) @foreach($awards as $index => $award)
@php @php
$color = $colors[$index % count($colors)]; $catType = $award->category ?: 'general';
$color = $colors[$catType] ?? '#f5a623';
$rgb = $rgbColors[$catType] ?? '245, 166, 35';
$position = $index % 2 === 0 ? 'right' : 'left'; $position = $index % 2 === 0 ? 'right' : 'left';
$imgSrc = str_starts_with($award->image, 'assets/') ? asset($award->image) : asset('storage/' . $award->image); $imgSrc = str_starts_with($award->image, 'assets/') ? asset($award->image) : asset('storage/' . $award->image);
@endphp @endphp
<article class="awards-timeline__item awards-timeline__item--{{ $position }} awards-timeline__reveal" style="--item-color: {{ $color }};" data-category="{{ $award->category }}"> <article class="awards-timeline__item awards-timeline__item--{{ $position }} awards-timeline__reveal" style="--item-color: {{ $color }}; --item-color-rgb: {{ $rgb }};" data-category="{{ $award->category }}">
<!-- Timeline Axis Dot & Line --> <!-- Timeline Axis Dot & Line -->
<div class="awards-timeline__axis"> <div class="awards-timeline__axis">
@@ -96,46 +138,51 @@
<!-- Timeline Card --> <!-- Timeline Card -->
<div class="awards-timeline__side awards-timeline__side--inner"> <div class="awards-timeline__side awards-timeline__side--inner">
<div class="awards-timeline__content bg-white rounded-[0.8rem] border border-[rgba(30,34,40,0.06)] hover:translate-y-[-0.25rem] transition-all duration-300 hover:shadow-[0_1rem_2.5rem_rgba(30,34,40,0.08)] flex flex-col overflow-hidden group"> <div class="awards-timeline__content bg-white rounded-2xl border border-slate-100/80 transition-all duration-300 flex flex-col overflow-hidden group">
<!-- Ceremony Photo Banner --> <!-- Ceremony Photo Banner -->
<div class="award-photo-wrapper" style="width: 100%; height: 240px; overflow: hidden; position: relative; background: #eef1f4;"> <div class="award-photo-wrapper relative overflow-hidden bg-slate-100" style="width: 100%; height: 260px;">
<img src="{{ $imgSrc }}" alt="{{ $award->translate('title') }}" style="width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease;" class="award-photo-img group-hover:scale-105" /> <img src="{{ $imgSrc }}" alt="{{ $award->translate('title') }}" style="width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);" class="award-photo-img group-hover:scale-105" />
<div class="absolute inset-0 bg-gradient-to-t from-black/40 via-transparent to-transparent opacity-80"></div>
<!-- Badge on Image --> <!-- Badge on Image -->
<div style="position: absolute; top: 12px; left: 12px; display: flex; gap: 6px;"> <div class="absolute top-4 left-4 flex flex-wrap gap-2">
<span class="badge bg-[#1e2229]/80 !text-white text-[0.62rem] uppercase tracking-wider px-2.5 py-1" style="border-radius: 4px;"> <span class="badge backdrop-blur-md bg-white/90 text-slate-800 text-[0.65rem] font-black uppercase tracking-wider px-3 py-1.5 shadow-sm rounded-lg">
{{ $award->category === 'hackathon' ? t('Yarışma') : ($award->category === 'export' ? t('İhracat') : t('Başarı')) }} {{ $award->category === 'hackathon' ? t('Yarışma') : ($award->category === 'export' ? t('İhracat') : t('Başarı')) }}
</span> </span>
@if($award->is_featured) @if($award->is_featured)
<span class="badge bg-[#f5a623] !text-white text-[0.62rem] uppercase tracking-wider px-2.5 py-1" style="border-radius: 4px;"> <span class="badge backdrop-blur-md bg-[#f5a623] text-white text-[0.65rem] font-black uppercase tracking-wider px-3 py-1.5 shadow-sm rounded-lg">
<i class="uil uil-star"></i> {{ t('Öne Çıkan') }} <i class="uil uil-star"></i> {{ t('Öne Çıkan') }}
</span> </span>
@endif @endif
</div> </div>
</div> </div>
<!-- Card Info Padding Content --> <!-- Card Content -->
<div class="p-6 md:p-8 flex flex-col gap-3 text-start"> <div class="p-6 md:p-8 flex flex-col gap-4 text-start relative">
<div style="font-size: 0.72rem; color: #959ca9; font-weight: 600;"> <div class="flex items-center gap-1.5 text-[0.72rem] text-slate-400 font-bold">
<i class="uil uil-calendar-alt"></i> {{ $award->award_date ? $award->award_date->translatedFormat('d F Y') : '' }} <i class="uil uil-calendar-alt text-[#e31e24]"></i> {{ $award->award_date ? $award->award_date->translatedFormat('d F Y') : '' }}
</div> </div>
<h3 class="text-base font-extrabold text-gray-900 mb-1 leading-snug group-hover:text-[#e31e24] transition-colors duration-300"> <h3 class="text-lg font-black text-slate-850 mb-1 leading-snug group-hover:text-[#e31e24] transition-colors duration-300">
{{ $award->translate('title') }} {{ $award->translate('title') }}
</h3> </h3>
<p class="text-xs leading-relaxed text-gray-500 mb-2"> <p class="text-xs leading-relaxed text-slate-500">
{{ $award->translate('description') }} {{ $award->translate('description') }}
</p> </p>
<!-- Footer elements --> <!-- Footer elements -->
<div class="flex items-center justify-between pt-3 border-t border-gray-100 mt-2"> <div class="flex items-center justify-between pt-4 border-t border-slate-100 mt-2">
<span class="text-[0.72rem] font-bold text-gray-600 flex items-center gap-1"> <span class="text-[0.72rem] font-black text-slate-700 flex items-center gap-1.5">
<i class="uil uil-award text-[#e31e24] text-sm"></i> {{ $award->translate('issuer') }} <span class="w-6 h-6 rounded-full bg-slate-100 flex items-center justify-center text-[#e31e24]">
<i class="uil uil-award text-[0.85rem]"></i>
</span>
{{ $award->translate('issuer') }}
</span> </span>
@if($award->external_link) @if($award->external_link)
<a href="{{ $award->external_link }}" target="_blank" class="text-[0.72rem] font-bold text-[#e31e24] hover:underline flex items-center gap-0.5"> <a href="{{ $award->external_link }}" target="_blank" class="verify-link text-[0.72rem] font-extrabold text-[#e31e24] flex items-center gap-1">
{{ t('Doğrula') }} <i class="uil uil-external-link-alt"></i> {{ t('Doğrula') }} <i class="uil uil-external-link-alt transform group-hover:translate-x-0.5 group-hover:translate-y-[-0.5px] transition-transform duration-300"></i>
</a> </a>
@endif @endif
</div> </div>
@@ -153,61 +200,23 @@
</div> </div>
</div> </div>
<!-- Standards and Trust elements -->
<div class="my-16 border-t border-gray-200/60 pt-16">
<div class="text-center mb-8">
<span class="badge bg-pale-red text-red !rounded-[50rem] uppercase tracking-wider font-semibold text-[0.7rem] px-3 py-1 mb-2 inline-block">{{ t('GÜVEN & STANDARTLAR') }}</span>
<h3 class="!text-[calc(1.2rem_+_0.6vw)] font-bold xl:!text-[1.8rem] !leading-[1.3] text-[#1e2229]">{{ t('Standartlarımız ve Sertifikalarımız') }}</h3>
<p class="text-xs text-gray-500 leading-relaxed max-w-xl mx-auto mt-2">{{ t('Bir teknoloji şirketi olarak, geliştirdiğimiz tüm sistemlerde ulusal ve uluslararası güvenlik ve kalite standartlarına tam uyum sağlıyoruz.') }}</p>
</div>
<div class="flex flex-wrap justify-center items-center gap-8 md:gap-12 mt-10">
<!-- ISO 27001 -->
<div class="flex flex-col items-center max-w-[120px] text-center group">
<div class="w-16 h-16 rounded-full border border-gray-200/80 bg-white shadow-sm flex items-center justify-center p-3 mb-2 group-hover:border-red/40 group-hover:shadow-md transition-all duration-300">
<i class="uil uil-shield-check text-2xl text-gray-400 group-hover:text-red transition-colors duration-300"></i>
</div>
<span class="text-xs font-bold text-gray-700 leading-tight">ISO 27001</span>
<span class="text-[0.62rem] text-gray-400 mt-0.5">{{ t('Bilgi Güvenliği') }}</span>
</div>
<!-- ISO 9001 -->
<div class="flex flex-col items-center max-w-[120px] text-center group">
<div class="w-16 h-16 rounded-full border border-gray-200/80 bg-white shadow-sm flex items-center justify-center p-3 mb-2 group-hover:border-red/40 group-hover:shadow-md transition-all duration-300">
<i class="uil uil-check-square text-2xl text-gray-400 group-hover:text-red transition-colors duration-300"></i>
</div>
<span class="text-xs font-bold text-gray-700 leading-tight">ISO 9001</span>
<span class="text-[0.62rem] text-gray-400 mt-0.5">{{ t('Kalite Yönetimi') }}</span>
</div>
<!-- KVKK / GDPR -->
<div class="flex flex-col items-center max-w-[120px] text-center group">
<div class="w-16 h-16 rounded-full border border-gray-200/80 bg-white shadow-sm flex items-center justify-center p-3 mb-2 group-hover:border-red/40 group-hover:shadow-md transition-all duration-300">
<i class="uil uil-lock text-2xl text-gray-400 group-hover:text-red transition-colors duration-300"></i>
</div>
<span class="text-xs font-bold text-gray-700 leading-tight">KVKK / GDPR</span>
<span class="text-[0.62rem] text-gray-400 mt-0.5">{{ t('Veri Güvenliği') }}</span>
</div>
<!-- Teknopark -->
<div class="flex flex-col items-center max-w-[120px] text-center group">
<div class="w-16 h-16 rounded-full border border-gray-200/80 bg-white shadow-sm flex items-center justify-center p-3 mb-2 group-hover:border-red/40 group-hover:shadow-md transition-all duration-300">
<i class="uil uil-building text-2xl text-gray-400 group-hover:text-red transition-colors duration-300"></i>
</div>
<span class="text-xs font-bold text-gray-700 leading-tight">Teknopark</span>
<span class="text-[0.62rem] text-gray-400 mt-0.5">{{ t('Ar-Ge Liderliği') }}</span>
</div>
</div>
</div>
<!-- Employer Branding Closing CTA --> <!-- Employer Branding Closing CTA -->
<div class="my-16 bg-gradient-to-r from-red to-rose-600 rounded-[1rem] p-8 md:p-12 !text-white text-center shadow-lg relative overflow-hidden group"> <div class="my-20 bg-gradient-to-br from-[#e31e24] via-[#ea3c41] to-[#f43f5e] rounded-3xl p-8 md:p-14 !text-white text-center shadow-xl shadow-red-500/10 relative overflow-hidden group">
<div class="absolute -right-16 -top-16 w-48 h-48 rounded-full bg-white/10 opacity-30 group-hover:scale-110 transition-transform duration-500"></div> <div class="absolute -right-12 -top-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="absolute -left-16 -bottom-16 w-48 h-48 rounded-full bg-white/10 opacity-30 group-hover:scale-110 transition-transform duration-500"></div> <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>
<h3 class="text-xl md:text-2xl font-bold !text-white mb-3 relative z-10">{{ t('Bu başarıları birlikte kazandık!') }}</h3> <div class="relative z-10 max-w-2xl mx-auto flex flex-col items-center">
<p class="text-sm leading-relaxed max-w-xl mx-auto mb-6 opacity-90 relative z-10">{{ t('Geleceği yenilikçi teknolojilerle şekillendiren bu harika ekibin bir parçası olmak, bizimle yeni ödüllere koşmak ister misin?') }}</p> <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">
<a href="{{ url('/kariyer') }}" class="btn btn-white !rounded-[50rem] px-6 py-2.5 text-xs font-bold hover:translate-y-[-0.15rem] hover:shadow-md transition-all relative z-10 !bg-white !text-[#e31e24] hover:!bg-gray-50 border-0"> <i class="uil uil-rocket text-2xl text-white"></i>
{{ t('Aramıza Katıl') }} <i class="uil uil-arrow-right ml-1"></i> </div>
<h3 class="text-2xl md:text-3xl font-black !text-white mb-4 tracking-tight leading-tight">{{ t('Bu başarıları birlikte kazandık!') }}</h3>
<p class="text-sm md:text-base leading-relaxed mb-8 text-white/90 font-medium max-w-xl">{{ 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 bg-white text-[#e31e24] px-8 py-3.5 rounded-full text-xs font-black uppercase tracking-wider hover:translate-y-[-0.2rem] hover:shadow-2xl hover:shadow-white/20 transition-all duration-350 border-0 group/btn">
{{ t('Aramıza Katıl') }}
<i class="uil uil-arrow-right text-base transform group-hover/btn:translate-x-1 transition-transform"></i>
</a> </a>
</div> </div>
</div>
</div> </div>
</div> </div>
@@ -216,11 +225,17 @@
@push('styles') @push('styles')
<style> <style>
/* Premium Interactive Filter styling */
.filter-btn {
background: transparent;
border: 0;
color: #64748b;
}
.filter-btn.active { .filter-btn.active {
background-color: #e31e24 !important; background-color: #e31e24 !important;
border-color: #e31e24 !important; border-color: #e31e24 !important;
color: #ffffff !important; color: #ffffff !important;
box-shadow: 0 4px 12px rgba(227, 30, 36, 0.2); box-shadow: 0 10px 20px -5px rgba(227, 30, 36, 0.35);
} }
/* Timeline Design System drawing inspiration from hakkimizda */ /* Timeline Design System drawing inspiration from hakkimizda */
@@ -245,14 +260,15 @@
.awards-timeline__start span, .awards-timeline__start span,
.awards-timeline__finish span { .awards-timeline__finish span {
display: inline-block; display: inline-block;
padding: 0.45rem 1.4rem; padding: 0.55rem 1.6rem;
border: 2px solid #cbd5e0; border: 2px solid #e2e8f0;
border-radius: 999px; border-radius: 999px;
font-size: 0.72rem; font-size: 0.72rem;
font-weight: 700; font-weight: 850;
letter-spacing: 0.16em; letter-spacing: 0.2em;
color: #4a5568; color: #475569;
background: #fff; background: #fff;
box-shadow: 0 4px 12px rgba(0,0,0,0.02);
} }
.awards-timeline__track { .awards-timeline__track {
@@ -268,7 +284,7 @@
bottom: 0; bottom: 0;
width: 4px; width: 4px;
transform: translateX(-50%); transform: translateX(-50%);
background: linear-gradient(to bottom, #e31e24, #f5a623, #27ae60, #2980b9); background: linear-gradient(180deg, #e31e24, #f5a623, #27ae60, #2980b9, #8e44ad);
border-radius: 4px; border-radius: 4px;
z-index: 0; z-index: 0;
} }
@@ -278,10 +294,10 @@
display: grid; display: grid;
grid-template-columns: 1fr 40px 1fr; grid-template-columns: 1fr 40px 1fr;
align-items: center; align-items: center;
gap: 0 2rem; gap: 0 2.5rem;
margin-bottom: 2.75rem; margin-bottom: 3.5rem;
z-index: 1; z-index: 1;
transition: all 0.45s ease; transition: all 0.45s cubic-bezier(0.16, 1, 0.3, 1);
} }
.awards-timeline__item:last-child { .awards-timeline__item:last-child {
@@ -296,17 +312,19 @@
} }
.awards-timeline__dot { .awards-timeline__dot {
width: 18px; width: 20px;
height: 18px; height: 20px;
border-radius: 50%; border-radius: 50%;
background: var(--item-color); background: var(--item-color);
border: 3px solid #fff; border: 4px solid #fff;
box-shadow: 0 0 0 2px var(--item-color); box-shadow: 0 0 0 2px var(--item-color);
transition: all 0.3s ease; transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
position: relative;
} }
.awards-timeline__item:hover .awards-timeline__dot { .awards-timeline__item:hover .awards-timeline__dot {
transform: scale(1.3); transform: scale(1.3);
box-shadow: 0 0 0 6px rgba(var(--item-color-rgb), 0.25), 0 0 0 2px var(--item-color);
} }
/* Alternating Right side */ /* Alternating Right side */
@@ -321,11 +339,27 @@
text-align: right; text-align: right;
} }
/* 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);
}
.awards-timeline__item:hover .awards-timeline__content {
transform: translateY(-6px);
border-color: rgba(var(--item-color-rgb), 0.2);
box-shadow: 0 20px 35px -10px rgba(var(--item-color-rgb), 0.12), 0 10px 15px -5px rgba(0,0,0,0.02);
}
.verify-link:hover {
text-decoration: none;
opacity: 0.85;
}
/* Animations reveal */ /* Animations reveal */
.awards-timeline__reveal { .awards-timeline__reveal {
opacity: 0; opacity: 0;
transform: translate3d(0, 32px, 0); transform: translate3d(0, 40px, 0);
transition: opacity 0.85s cubic-bezier(0.22, 1, 0.36, 1), transform 0.85s cubic-bezier(0.22, 1, 0.36, 1); transition: opacity 0.85s cubic-bezier(0.16, 1, 0.3, 1), transform 0.85s cubic-bezier(0.16, 1, 0.3, 1);
will-change: opacity, transform; will-change: opacity, transform;
} }
@@ -348,6 +382,7 @@
.awards-timeline__item { .awards-timeline__item {
grid-template-columns: 40px 1fr; grid-template-columns: 40px 1fr;
gap: 0 1rem; gap: 0 1rem;
margin-bottom: 2.5rem;
} }
.awards-timeline__axis { .awards-timeline__axis {
@@ -368,47 +403,73 @@
@push('scripts') @push('scripts')
<script> <script>
document.addEventListener('DOMContentLoaded', function() { document.addEventListener('DOMContentLoaded', function() {
const filterButtons = document.querySelectorAll('.filter-btn'); // Reveal animation on scroll
const awardCards = document.querySelectorAll('.awards-timeline__item');
filterButtons.forEach(button => {
button.addEventListener('click', function() {
filterButtons.forEach(btn => btn.classList.remove('active'));
this.classList.add('active');
const filterValue = this.getAttribute('data-filter');
awardCards.forEach(card => {
if (filterValue === 'all' || card.getAttribute('data-category') === filterValue) {
card.classList.remove('hidden-by-filter');
} else {
card.classList.add('hidden-by-filter');
}
});
});
});
// Reveal animation on scroll drawing inspiration from hakkimizda.blade.php
const revealElements = document.querySelectorAll('.awards-timeline__reveal'); const revealElements = document.querySelectorAll('.awards-timeline__reveal');
if (revealElements.length > 0) { const revealObserver = new IntersectionObserver(function (entries) {
const observer = new IntersectionObserver(function (entries) {
entries.forEach(function (entry) { entries.forEach(function (entry) {
if (entry.isIntersecting) { if (entry.isIntersecting) {
entry.target.classList.add('is-visible'); entry.target.classList.add('is-visible');
observer.unobserve(entry.target);
} }
}); });
}, { }, {
root: null, root: null,
rootMargin: '0px 0px -10% 0px', rootMargin: '0px 0px -8% 0px',
threshold: 0.1, threshold: 0.05,
}); });
revealElements.forEach(function (element) { revealElements.forEach(function (element) {
observer.observe(element); revealObserver.observe(element);
}); });
// Filter Logic
const filterButtons = document.querySelectorAll('.filter-btn');
const timelineItems = document.querySelectorAll('.awards-timeline__item');
filterButtons.forEach(btn => {
btn.addEventListener('click', function() {
const filter = this.getAttribute('data-filter');
// Toggle active filter classes
filterButtons.forEach(b => {
b.classList.remove('active', 'bg-red', 'text-white');
b.classList.add('text-gray-500', 'hover:text-gray-900', 'hover:bg-slate-50');
});
this.classList.add('active');
this.classList.remove('text-gray-500', 'hover:text-gray-900', 'hover:bg-slate-50');
let visibleIndex = 0;
timelineItems.forEach(item => {
const category = item.getAttribute('data-category');
if (filter === 'all' || category === filter) {
item.classList.remove('hidden-by-filter');
// Re-assign alignment based on visibility index
item.classList.remove('awards-timeline__item--left', 'awards-timeline__item--right');
if (visibleIndex % 2 === 0) {
item.classList.add('awards-timeline__item--right');
} else {
item.classList.add('awards-timeline__item--left');
} }
visibleIndex++;
// Re-observe since they might be newly visible
revealObserver.observe(item);
} else {
item.classList.add('hidden-by-filter');
revealObserver.unobserve(item);
}
});
// Scroll slightly to timeline section if filter is clicked and user is above/below it
const targetSec = document.getElementById('awards-timeline-section');
if (window.scrollY > targetSec.offsetTop || window.scrollY + window.innerHeight < targetSec.offsetTop) {
targetSec.scrollIntoView({ behavior: 'smooth', block: 'start' });
}
});
});
}); });
</script> </script>
@endpush @endpush