Ümit Tunç
477 lines
23 KiB
PHP
477 lines
23 KiB
PHP
@extends('layouts.site', [
|
||
'header' => 'partials.header-demo1',
|
||
'footer' => 'partials.footer',
|
||
])
|
||
|
||
@section('content')
|
||
@php
|
||
$awards = \App\Models\Award::active()->ordered()->get();
|
||
|
||
// Extracted categories from active awards for dynamic filter options
|
||
$categories = $awards->pluck('category')->unique()->toArray();
|
||
|
||
$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 mapping for elegant signature styles
|
||
$colors = [
|
||
'hackathon' => '#e31e24',
|
||
'export' => '#2980b9',
|
||
'innovation' => '#27ae60',
|
||
'design' => '#8e44ad',
|
||
'general' => '#f5a623'
|
||
];
|
||
|
||
$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
|
||
|
||
@include('components.company-history.fonts')
|
||
|
||
<div class="grow shrink-0 bg-[#f8fafc]">
|
||
|
||
<!-- Hero Section -->
|
||
<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 id="awards-timeline-section" class="wrapper !bg-[#f8fafc] py-16 relative">
|
||
<div class="container">
|
||
|
||
<!-- 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>
|
||
@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>
|
||
@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>
|
||
<div class="awards-timeline__start awards-timeline__reveal">
|
||
<span>{{ t('BAŞLANGIÇ') }}</span>
|
||
</div>
|
||
|
||
<div class="awards-timeline__track">
|
||
@foreach($awards as $index => $award)
|
||
@php
|
||
$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 }}; --item-color-rgb: {{ $rgb }};" data-category="{{ $award->category }}">
|
||
|
||
<!-- Timeline Axis Dot & Line -->
|
||
<div class="awards-timeline__axis">
|
||
<span class="awards-timeline__dot"></span>
|
||
</div>
|
||
|
||
<!-- Timeline Card -->
|
||
<div class="awards-timeline__side awards-timeline__side--inner">
|
||
<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 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 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 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 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-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-slate-500">
|
||
{{ $award->translate('description') }}
|
||
</p>
|
||
|
||
<!-- Footer elements -->
|
||
<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="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>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
</article>
|
||
@endforeach
|
||
</div>
|
||
|
||
<div class="awards-timeline__finish awards-timeline__reveal">
|
||
<span>{{ t('BUGÜN') }}</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Employer Branding Closing CTA -->
|
||
<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>
|
||
|
||
<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>
|
||
</section>
|
||
</div>
|
||
|
||
@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 10px 20px -5px rgba(227, 30, 36, 0.35);
|
||
}
|
||
|
||
/* Timeline Design System drawing inspiration from hakkimizda */
|
||
.awards-timeline {
|
||
max-width: 960px;
|
||
margin: 0 auto;
|
||
position: relative;
|
||
}
|
||
|
||
.awards-timeline__start,
|
||
.awards-timeline__finish {
|
||
display: flex;
|
||
justify-content: center;
|
||
margin-bottom: 2rem;
|
||
}
|
||
|
||
.awards-timeline__finish {
|
||
margin-top: 2rem;
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
.awards-timeline__start span,
|
||
.awards-timeline__finish span {
|
||
display: inline-block;
|
||
padding: 0.55rem 1.6rem;
|
||
border: 2px solid #e2e8f0;
|
||
border-radius: 999px;
|
||
font-size: 0.72rem;
|
||
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 {
|
||
position: relative;
|
||
padding: 0.5rem 0;
|
||
}
|
||
|
||
.awards-timeline__track::before {
|
||
content: '';
|
||
position: absolute;
|
||
left: 50%;
|
||
top: 0;
|
||
bottom: 0;
|
||
width: 4px;
|
||
transform: translateX(-50%);
|
||
background: linear-gradient(180deg, #e31e24, #f5a623, #27ae60, #2980b9, #8e44ad);
|
||
border-radius: 4px;
|
||
z-index: 0;
|
||
}
|
||
|
||
.awards-timeline__item {
|
||
position: relative;
|
||
display: grid;
|
||
grid-template-columns: 1fr 40px 1fr;
|
||
align-items: center;
|
||
gap: 0 2.5rem;
|
||
margin-bottom: 3.5rem;
|
||
z-index: 1;
|
||
transition: all 0.45s cubic-bezier(0.16, 1, 0.3, 1);
|
||
}
|
||
|
||
.awards-timeline__item:last-child {
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
.awards-timeline__axis {
|
||
grid-column: 2;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.awards-timeline__dot {
|
||
width: 20px;
|
||
height: 20px;
|
||
border-radius: 50%;
|
||
background: var(--item-color);
|
||
border: 4px solid #fff;
|
||
box-shadow: 0 0 0 2px var(--item-color);
|
||
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 */
|
||
.awards-timeline__item--right .awards-timeline__side--inner {
|
||
grid-column: 3;
|
||
text-align: left;
|
||
}
|
||
|
||
/* Alternating Left side */
|
||
.awards-timeline__item--left .awards-timeline__side--inner {
|
||
grid-column: 1;
|
||
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, 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;
|
||
}
|
||
|
||
.awards-timeline__reveal.is-visible {
|
||
opacity: 1;
|
||
transform: translate3d(0, 0, 0);
|
||
}
|
||
|
||
/* Dynamic hide class */
|
||
.awards-timeline__item.hidden-by-filter {
|
||
display: none !important;
|
||
}
|
||
|
||
@media (max-width: 767px) {
|
||
.awards-timeline__track::before {
|
||
left: 20px;
|
||
transform: none;
|
||
}
|
||
|
||
.awards-timeline__item {
|
||
grid-template-columns: 40px 1fr;
|
||
gap: 0 1rem;
|
||
margin-bottom: 2.5rem;
|
||
}
|
||
|
||
.awards-timeline__axis {
|
||
grid-column: 1;
|
||
align-self: start;
|
||
padding-top: 1.5rem;
|
||
}
|
||
|
||
.awards-timeline__item--left .awards-timeline__side--inner,
|
||
.awards-timeline__item--right .awards-timeline__side--inner {
|
||
grid-column: 2;
|
||
text-align: left;
|
||
}
|
||
}
|
||
</style>
|
||
@endpush
|
||
|
||
@push('scripts')
|
||
<script>
|
||
document.addEventListener('DOMContentLoaded', function() {
|
||
// Reveal animation on scroll
|
||
const revealElements = document.querySelectorAll('.awards-timeline__reveal');
|
||
|
||
const revealObserver = new IntersectionObserver(function (entries) {
|
||
entries.forEach(function (entry) {
|
||
if (entry.isIntersecting) {
|
||
entry.target.classList.add('is-visible');
|
||
}
|
||
});
|
||
}, {
|
||
root: null,
|
||
rootMargin: '0px 0px -8% 0px',
|
||
threshold: 0.05,
|
||
});
|
||
|
||
revealElements.forEach(function (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
|
||
@endsection
|