feat: redesign awards template with new hero section and updated timeline filters
This commit is contained in:
Ümit Tunç
Binary file not shown.
|
After Width: | Height: | Size: 472 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 240 KiB |
@@ -13,66 +13,106 @@
|
||||
$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.');
|
||||
|
||||
// Timeline color palette
|
||||
$colors = ['#e31e24', '#f5a623', '#27ae60', '#2980b9', '#8e44ad', '#1abc9c'];
|
||||
// Timeline color palette mapping for elegant signature styles
|
||||
$colors = [
|
||||
'hackathon' => '#e31e24',
|
||||
'export' => '#2980b9',
|
||||
'innovation' => '#27ae60',
|
||||
'design' => '#8e44ad',
|
||||
'general' => '#f5a623'
|
||||
];
|
||||
|
||||
// Dynamic cover image pulling from page's featured image or falling back
|
||||
$coverImage = ($page && $page->featured_image)
|
||||
? asset('storage/' . $page->featured_image)
|
||||
: (($page && $page->featured_image_url) ? $page->featured_image_url : asset('assets/img/photos/bg4.webp'));
|
||||
$rgbColors = [
|
||||
'hackathon' => '227, 30, 36',
|
||||
'export' => '41, 128, 185',
|
||||
'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
|
||||
|
||||
<div class="grow shrink-0 bg-[#fbfcfd]">
|
||||
@include('components.company-history.fonts')
|
||||
|
||||
<div class="grow shrink-0 bg-[#f8fafc]">
|
||||
|
||||
<!-- 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 }}');">
|
||||
<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="flex flex-wrap mx-[-15px]">
|
||||
<div class="xl:w-8/12 lg:w-8/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto">
|
||||
<h1 class="!text-[calc(1.365rem_+_1.38vw)] font-bold !leading-[1.2] xl:!text-[2.6rem] !mb-4 !text-white">{{ $heroTitle }}</h1>
|
||||
<p class="lead !text-[1.05rem] !leading-[1.6] !text-white opacity-90 max-w-2xl mx-auto mb-6">{{ $heroExcerpt }}</p>
|
||||
<nav class="inline-block" aria-label="breadcrumb">
|
||||
<ol class="breadcrumb flex flex-wrap bg-[none] p-0 !rounded-none list-none !mb-[20px] justify-center">
|
||||
<li class="breadcrumb-item flex !text-[#c3c3c3]"><a class="!text-white hover:text-[#e31e24]" href="{{ url('/') }}">{{ t('Anasayfa') }}</a></li>
|
||||
<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>
|
||||
</ol>
|
||||
</nav>
|
||||
<section class="company-history-fonts company-history-hero wrapper bg-gradient-yellow relative overflow-hidden pb-12 pt-6">
|
||||
<div class="absolute inset-0 bg-[radial-gradient(circle_at_70%_20%,rgba(254,243,199,0.4),transparent_50%)]"></div>
|
||||
<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="flex flex-wrap mx-[-15px] xl:mx-[-35px] lg:mx-[-20px] !mt-[-50px] items-center">
|
||||
<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">
|
||||
<figure class="m-0 p-0 relative group">
|
||||
<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>
|
||||
<picture class="relative block bg-white/40 backdrop-blur-md p-4 rounded-2xl border border-white/50 shadow-xl">
|
||||
<img
|
||||
class="w-auto max-w-full h-auto rounded-xl transform hover:scale-[1.02] transition-all duration-500"
|
||||
src="{{ asset('assets/img/illustrations/truncgil-odullerimiz.webp') }}"
|
||||
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>
|
||||
</section>
|
||||
|
||||
<!-- 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">
|
||||
<div class="container pb-16">
|
||||
<div class="xl:w-10/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto !mt-[-9rem] relative z-10">
|
||||
<section id="awards-timeline-section" class="wrapper !bg-[#f8fafc] py-16 relative">
|
||||
<div class="container">
|
||||
|
||||
<!-- Category Filters -->
|
||||
<div class="flex flex-wrap justify-center gap-2 mb-14" id="awards-filter-tabs">
|
||||
<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">
|
||||
{{ t('Tüm Ödüller') }}
|
||||
<!-- 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">
|
||||
<i class="uil uil-apps mr-1 text-sm align-middle"></i> {{ t('Tümü') }}
|
||||
</button>
|
||||
@if(in_array('hackathon', $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="hackathon">
|
||||
{{ t('Hackathon / Yarışma') }}
|
||||
@foreach($categories as $cat)
|
||||
@php
|
||||
$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>
|
||||
@endif
|
||||
@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
|
||||
@endforeach
|
||||
</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 -->
|
||||
<div class="awards-timeline" data-timeline-animate>
|
||||
@@ -83,11 +123,13 @@
|
||||
<div class="awards-timeline__track">
|
||||
@foreach($awards as $index => $award)
|
||||
@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';
|
||||
$imgSrc = str_starts_with($award->image, 'assets/') ? asset($award->image) : asset('storage/' . $award->image);
|
||||
@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 -->
|
||||
<div class="awards-timeline__axis">
|
||||
@@ -96,46 +138,51 @@
|
||||
|
||||
<!-- Timeline Card -->
|
||||
<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 -->
|
||||
<div class="award-photo-wrapper" style="width: 100%; height: 240px; overflow: hidden; position: relative; background: #eef1f4;">
|
||||
<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" />
|
||||
<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.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 -->
|
||||
<div style="position: absolute; top: 12px; left: 12px; display: flex; gap: 6px;">
|
||||
<span class="badge bg-[#1e2229]/80 !text-white text-[0.62rem] uppercase tracking-wider px-2.5 py-1" style="border-radius: 4px;">
|
||||
<div class="absolute top-4 left-4 flex flex-wrap gap-2">
|
||||
<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ı')) }}
|
||||
</span>
|
||||
@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') }}
|
||||
</span>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Card Info Padding Content -->
|
||||
<div class="p-6 md:p-8 flex flex-col gap-3 text-start">
|
||||
<div style="font-size: 0.72rem; color: #959ca9; font-weight: 600;">
|
||||
<i class="uil uil-calendar-alt"></i> {{ $award->award_date ? $award->award_date->translatedFormat('d F Y') : '' }}
|
||||
<!-- Card Content -->
|
||||
<div class="p-6 md:p-8 flex flex-col gap-4 text-start relative">
|
||||
<div class="flex items-center gap-1.5 text-[0.72rem] text-slate-400 font-bold">
|
||||
<i class="uil uil-calendar-alt text-[#e31e24]"></i> {{ $award->award_date ? $award->award_date->translatedFormat('d F Y') : '' }}
|
||||
</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') }}
|
||||
</h3>
|
||||
|
||||
<p class="text-xs leading-relaxed text-gray-500 mb-2">
|
||||
<p class="text-xs leading-relaxed text-slate-500">
|
||||
{{ $award->translate('description') }}
|
||||
</p>
|
||||
|
||||
<!-- Footer elements -->
|
||||
<div class="flex items-center justify-between pt-3 border-t border-gray-100 mt-2">
|
||||
<span class="text-[0.72rem] font-bold text-gray-600 flex items-center gap-1">
|
||||
<i class="uil uil-award text-[#e31e24] text-sm"></i> {{ $award->translate('issuer') }}
|
||||
<div class="flex items-center justify-between pt-4 border-t border-slate-100 mt-2">
|
||||
<span class="text-[0.72rem] font-black text-slate-700 flex items-center gap-1.5">
|
||||
<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>
|
||||
@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">
|
||||
{{ t('Doğrula') }} <i class="uil uil-external-link-alt"></i>
|
||||
<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 transform group-hover:translate-x-0.5 group-hover:translate-y-[-0.5px] transition-transform duration-300"></i>
|
||||
</a>
|
||||
@endif
|
||||
</div>
|
||||
@@ -153,61 +200,23 @@
|
||||
</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 -->
|
||||
<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="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 -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="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-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-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>
|
||||
<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>
|
||||
<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">
|
||||
{{ t('Aramıza Katıl') }} <i class="uil uil-arrow-right ml-1"></i>
|
||||
<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>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
@@ -216,11 +225,17 @@
|
||||
|
||||
@push('styles')
|
||||
<style>
|
||||
/* Premium Interactive Filter styling */
|
||||
.filter-btn {
|
||||
background: transparent;
|
||||
border: 0;
|
||||
color: #64748b;
|
||||
}
|
||||
.filter-btn.active {
|
||||
background-color: #e31e24 !important;
|
||||
border-color: #e31e24 !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 */
|
||||
@@ -245,14 +260,15 @@
|
||||
.awards-timeline__start span,
|
||||
.awards-timeline__finish span {
|
||||
display: inline-block;
|
||||
padding: 0.45rem 1.4rem;
|
||||
border: 2px solid #cbd5e0;
|
||||
padding: 0.55rem 1.6rem;
|
||||
border: 2px solid #e2e8f0;
|
||||
border-radius: 999px;
|
||||
font-size: 0.72rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.16em;
|
||||
color: #4a5568;
|
||||
font-weight: 850;
|
||||
letter-spacing: 0.2em;
|
||||
color: #475569;
|
||||
background: #fff;
|
||||
box-shadow: 0 4px 12px rgba(0,0,0,0.02);
|
||||
}
|
||||
|
||||
.awards-timeline__track {
|
||||
@@ -268,7 +284,7 @@
|
||||
bottom: 0;
|
||||
width: 4px;
|
||||
transform: translateX(-50%);
|
||||
background: linear-gradient(to bottom, #e31e24, #f5a623, #27ae60, #2980b9);
|
||||
background: linear-gradient(180deg, #e31e24, #f5a623, #27ae60, #2980b9, #8e44ad);
|
||||
border-radius: 4px;
|
||||
z-index: 0;
|
||||
}
|
||||
@@ -278,10 +294,10 @@
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 40px 1fr;
|
||||
align-items: center;
|
||||
gap: 0 2rem;
|
||||
margin-bottom: 2.75rem;
|
||||
gap: 0 2.5rem;
|
||||
margin-bottom: 3.5rem;
|
||||
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 {
|
||||
@@ -296,17 +312,19 @@
|
||||
}
|
||||
|
||||
.awards-timeline__dot {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border-radius: 50%;
|
||||
background: var(--item-color);
|
||||
border: 3px solid #fff;
|
||||
border: 4px solid #fff;
|
||||
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 {
|
||||
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 */
|
||||
@@ -321,11 +339,27 @@
|
||||
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 */
|
||||
.awards-timeline__reveal {
|
||||
opacity: 0;
|
||||
transform: translate3d(0, 32px, 0);
|
||||
transition: opacity 0.85s cubic-bezier(0.22, 1, 0.36, 1), transform 0.85s cubic-bezier(0.22, 1, 0.36, 1);
|
||||
transform: translate3d(0, 40px, 0);
|
||||
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;
|
||||
}
|
||||
|
||||
@@ -348,6 +382,7 @@
|
||||
.awards-timeline__item {
|
||||
grid-template-columns: 40px 1fr;
|
||||
gap: 0 1rem;
|
||||
margin-bottom: 2.5rem;
|
||||
}
|
||||
|
||||
.awards-timeline__axis {
|
||||
@@ -368,47 +403,73 @@
|
||||
@push('scripts')
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
const filterButtons = document.querySelectorAll('.filter-btn');
|
||||
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
|
||||
// Reveal animation on scroll
|
||||
const revealElements = document.querySelectorAll('.awards-timeline__reveal');
|
||||
|
||||
if (revealElements.length > 0) {
|
||||
const observer = new IntersectionObserver(function (entries) {
|
||||
const revealObserver = new IntersectionObserver(function (entries) {
|
||||
entries.forEach(function (entry) {
|
||||
if (entry.isIntersecting) {
|
||||
entry.target.classList.add('is-visible');
|
||||
observer.unobserve(entry.target);
|
||||
}
|
||||
});
|
||||
}, {
|
||||
root: null,
|
||||
rootMargin: '0px 0px -10% 0px',
|
||||
threshold: 0.1,
|
||||
rootMargin: '0px 0px -8% 0px',
|
||||
threshold: 0.05,
|
||||
});
|
||||
|
||||
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>
|
||||
@endpush
|
||||
|
||||
Reference in New Issue
Block a user