feat: implement full-stack awards module with Filament management, database support, and localization.
This commit is contained in:
Ümit Tunç
@@ -0,0 +1,410 @@
|
||||
@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
|
||||
$colors = ['#e31e24', '#f5a623', '#27ae60', '#2980b9', '#8e44ad', '#1abc9c'];
|
||||
@endphp
|
||||
|
||||
<div class="grow shrink-0 bg-[#fbfcfd]">
|
||||
|
||||
<!-- 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="{{ asset('assets/img/photos/bg4.webp') }}" style="background-image: url('{{ asset('assets/img/photos/bg4.webp') }}');">
|
||||
<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>
|
||||
</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">
|
||||
|
||||
<!-- 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') }}
|
||||
</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') }}
|
||||
</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
|
||||
</div>
|
||||
|
||||
<!-- 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
|
||||
$color = $colors[$index % count($colors)];
|
||||
$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 }}">
|
||||
|
||||
<!-- 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-[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">
|
||||
|
||||
<!-- 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" />
|
||||
<!-- 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;">
|
||||
{{ $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;">
|
||||
<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') : '' }}
|
||||
</div>
|
||||
|
||||
<h3 class="text-base font-extrabold text-gray-900 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">
|
||||
{{ $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') }}
|
||||
</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>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</article>
|
||||
@endforeach
|
||||
</div>
|
||||
|
||||
<div class="awards-timeline__finish awards-timeline__reveal">
|
||||
<span>{{ t('BUGÜN') }}</span>
|
||||
</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>
|
||||
|
||||
<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>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
@push('styles')
|
||||
<style>
|
||||
.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);
|
||||
}
|
||||
|
||||
/* 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.45rem 1.4rem;
|
||||
border: 2px solid #cbd5e0;
|
||||
border-radius: 999px;
|
||||
font-size: 0.72rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.16em;
|
||||
color: #4a5568;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.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(to bottom, #e31e24, #f5a623, #27ae60, #2980b9);
|
||||
border-radius: 4px;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.awards-timeline__item {
|
||||
position: relative;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 40px 1fr;
|
||||
align-items: center;
|
||||
gap: 0 2rem;
|
||||
margin-bottom: 2.75rem;
|
||||
z-index: 1;
|
||||
transition: all 0.45s ease;
|
||||
}
|
||||
|
||||
.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: 18px;
|
||||
height: 18px;
|
||||
border-radius: 50%;
|
||||
background: var(--item-color);
|
||||
border: 3px solid #fff;
|
||||
box-shadow: 0 0 0 2px var(--item-color);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.awards-timeline__item:hover .awards-timeline__dot {
|
||||
transform: scale(1.3);
|
||||
}
|
||||
|
||||
/* 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;
|
||||
}
|
||||
|
||||
/* 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);
|
||||
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;
|
||||
}
|
||||
|
||||
.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() {
|
||||
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
|
||||
const revealElements = document.querySelectorAll('.awards-timeline__reveal');
|
||||
|
||||
if (revealElements.length > 0) {
|
||||
const observer = 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,
|
||||
});
|
||||
|
||||
revealElements.forEach(function (element) {
|
||||
observer.observe(element);
|
||||
});
|
||||
}
|
||||
});
|
||||
</script>
|
||||
@endpush
|
||||
@endsection
|
||||
Reference in New Issue
Block a user