Ümit Tunç
500 lines
17 KiB
PHP
500 lines
17 KiB
PHP
@props([
|
|
'items' => collect(),
|
|
'showHeader' => true,
|
|
])
|
|
|
|
@php
|
|
$historyItems = $items instanceof \Illuminate\Support\Collection ? $items : collect($items);
|
|
$gradientStops = $historyItems->values()->map(function ($item, $index) use ($historyItems) {
|
|
$percent = $historyItems->count() > 1
|
|
? round(($index / ($historyItems->count() - 1)) * 100, 1)
|
|
: 0;
|
|
return ($item->color ?? '#17a2b8') . ' ' . $percent . '%';
|
|
})->implode(', ');
|
|
@endphp
|
|
|
|
@include('components.company-history.fonts')
|
|
|
|
@if($historyItems->isNotEmpty())
|
|
<section class="company-history-timeline-section company-history-fonts wrapper !bg-[#f4f6f8] !pt-8 xl:!pt-12 lg:!pt-12 md:!pt-12">
|
|
<div class="container py-20 xl:py-28 lg:py-28 md:py-28">
|
|
@if($showHeader)
|
|
<div class="flex flex-wrap mx-[-15px] !mb-14 !text-center company-history-timeline__header">
|
|
<div class="w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto">
|
|
<span class="company-history-timeline__section-badge company-history-timeline__reveal inline-block !mb-3">
|
|
{{ __('company_history.timeline_section_badge') }}
|
|
</span>
|
|
<h2 class="company-history-timeline__section-title company-history-timeline__reveal !mb-3">
|
|
{{ __('company_history.timeline_section_title') }}
|
|
</h2>
|
|
<p class="company-history-timeline__section-subtitle company-history-timeline__reveal lead max-w-[42rem] !mx-auto">
|
|
{{ __('company_history.timeline_section_subtitle') }}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
@endif
|
|
|
|
<div class="company-history-timeline" data-timeline-animate>
|
|
<div class="company-history-timeline__start company-history-timeline__reveal">
|
|
<span>{{ __('company_history.timeline_start') }}</span>
|
|
</div>
|
|
|
|
<div class="company-history-timeline__track" style="--timeline-gradient: linear-gradient(to bottom, {{ $gradientStops }});">
|
|
@foreach($historyItems as $index => $item)
|
|
@php
|
|
$color = $item->color ?? '#17a2b8';
|
|
$position = in_array($item->position, ['left', 'right'], true)
|
|
? $item->position
|
|
: ($index % 2 === 0 ? 'right' : 'left');
|
|
$title = method_exists($item, 'translate') ? ($item->translate('title') ?: $item->title) : $item->title;
|
|
$titleUpper = $title ? locale_upper($title) : null;
|
|
$content = method_exists($item, 'translate') ? ($item->translate('content') ?: $item->content) : $item->content;
|
|
@endphp
|
|
<article
|
|
class="company-history-timeline__item company-history-timeline__item--{{ $position }} company-history-timeline__reveal"
|
|
style="--item-color: {{ $color }};"
|
|
>
|
|
<div class="company-history-timeline__side company-history-timeline__side--outer">
|
|
<div class="company-history-timeline__icon-ring">
|
|
<x-company-history.icon :icon="$item->icon" :color="$color" />
|
|
</div>
|
|
</div>
|
|
|
|
<div class="company-history-timeline__axis">
|
|
<span class="company-history-timeline__dot" aria-hidden="true"></span>
|
|
</div>
|
|
|
|
<div class="company-history-timeline__side company-history-timeline__side--inner">
|
|
<div class="company-history-timeline__content">
|
|
<div class="company-history-timeline__year">
|
|
<span class="company-history-timeline__year-value">{{ $item->year }}</span>
|
|
@if($item->quarter)
|
|
<span class="company-history-timeline__quarter">{{ __('company_history.quarter_label_' . strtolower($item->quarter)) }}</span>
|
|
@endif
|
|
</div>
|
|
@if($titleUpper)
|
|
<h3 class="company-history-timeline__title">{{ $titleUpper }}</h3>
|
|
@endif
|
|
@if($content)
|
|
<p class="company-history-timeline__text">{{ $content }}</p>
|
|
@endif
|
|
</div>
|
|
</div>
|
|
</article>
|
|
@endforeach
|
|
</div>
|
|
|
|
<div class="company-history-timeline__finish company-history-timeline__reveal">
|
|
<span>{{ __('company_history.timeline_finish') }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
@once
|
|
@push('styles')
|
|
<style>
|
|
.company-history-timeline__section-badge {
|
|
font-family: var(--ch-font-label);
|
|
font-size: 0.75rem;
|
|
font-weight: 700;
|
|
letter-spacing: 0.12em;
|
|
text-transform: uppercase;
|
|
color: #e31e24;
|
|
}
|
|
|
|
.company-history-timeline__section-title {
|
|
font-family: var(--ch-font-year);
|
|
font-size: 1.85rem;
|
|
font-weight: 700;
|
|
line-height: 1.2;
|
|
letter-spacing: -0.02em;
|
|
}
|
|
|
|
@media (min-width: 1280px) {
|
|
.company-history-timeline__section-title {
|
|
font-size: 2.2rem;
|
|
}
|
|
}
|
|
|
|
.company-history-timeline__section-subtitle {
|
|
font-family: var(--ch-font-body);
|
|
font-size: 1.05rem;
|
|
font-weight: 400;
|
|
line-height: 1.6;
|
|
color: #60697b;
|
|
}
|
|
|
|
.company-history-timeline {
|
|
max-width: 960px;
|
|
margin: 0 auto;
|
|
font-family: var(--ch-font-body);
|
|
}
|
|
|
|
.company-history-timeline__start,
|
|
.company-history-timeline__finish {
|
|
display: flex;
|
|
justify-content: center;
|
|
margin-bottom: 1.75rem;
|
|
}
|
|
|
|
.company-history-timeline__finish {
|
|
margin-top: 1.75rem;
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.company-history-timeline__start span,
|
|
.company-history-timeline__finish span {
|
|
display: inline-block;
|
|
padding: 0.45rem 1.4rem;
|
|
border: 2px solid #cbd5e0;
|
|
border-radius: 999px;
|
|
font-family: var(--ch-font-label);
|
|
font-size: 0.72rem;
|
|
font-weight: 600;
|
|
letter-spacing: 0.16em;
|
|
color: #4a5568;
|
|
background: #fff;
|
|
}
|
|
|
|
.company-history-timeline__track {
|
|
position: relative;
|
|
padding: 0.25rem 0;
|
|
}
|
|
|
|
.company-history-timeline__track::before {
|
|
content: '';
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 0;
|
|
bottom: 0;
|
|
width: 4px;
|
|
transform: translateX(-50%);
|
|
background: var(--timeline-gradient);
|
|
border-radius: 4px;
|
|
z-index: 0;
|
|
}
|
|
|
|
.company-history-timeline__item {
|
|
position: relative;
|
|
display: grid;
|
|
grid-template-columns: 1fr 40px 1fr;
|
|
align-items: center;
|
|
gap: 0 1.5rem;
|
|
min-height: 150px;
|
|
margin-bottom: 2.75rem;
|
|
z-index: 1;
|
|
}
|
|
|
|
.company-history-timeline__item:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.company-history-timeline__axis {
|
|
grid-column: 2;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.company-history-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);
|
|
}
|
|
|
|
.company-history-timeline__icon-ring {
|
|
width: 76px;
|
|
height: 76px;
|
|
border-radius: 50%;
|
|
border: 3px solid var(--item-color);
|
|
background: #fff;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
|
|
position: relative;
|
|
}
|
|
|
|
.company-history-timeline__icon-ring::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 50%;
|
|
width: 48px;
|
|
height: 0;
|
|
border-top: 2px dotted var(--item-color);
|
|
opacity: 0.65;
|
|
}
|
|
|
|
.company-history-icon-svg {
|
|
width: 34px;
|
|
height: 34px;
|
|
}
|
|
|
|
.company-history-timeline__year {
|
|
font-family: var(--ch-font-year);
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: baseline;
|
|
gap: 0.5rem 0.75rem;
|
|
margin-bottom: 0.35rem;
|
|
}
|
|
|
|
.company-history-timeline__year-value {
|
|
font-size: 2.25rem;
|
|
font-weight: 800;
|
|
line-height: 1;
|
|
letter-spacing: -0.03em;
|
|
font-variant-numeric: tabular-nums;
|
|
color: var(--item-color);
|
|
}
|
|
|
|
@media (min-width: 768px) {
|
|
.company-history-timeline__year-value {
|
|
font-size: 2.65rem;
|
|
}
|
|
}
|
|
|
|
@media (min-width: 1280px) {
|
|
.company-history-timeline__year-value {
|
|
font-size: 3rem;
|
|
}
|
|
}
|
|
|
|
.company-history-timeline__quarter {
|
|
font-family: var(--ch-font-label);
|
|
font-size: 0.95rem;
|
|
font-weight: 600;
|
|
letter-spacing: 0.08em;
|
|
color: var(--item-color);
|
|
opacity: 0.85;
|
|
padding: 0.15rem 0.55rem;
|
|
border: 2px solid var(--item-color);
|
|
border-radius: 0.35rem;
|
|
line-height: 1.2;
|
|
}
|
|
|
|
.company-history-timeline__item--left .company-history-timeline__year {
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
.company-history-timeline__title {
|
|
font-family: var(--ch-font-label);
|
|
font-size: 0.82rem;
|
|
font-weight: 600;
|
|
letter-spacing: 0.14em;
|
|
color: var(--item-color);
|
|
margin: 0 0 0.75rem;
|
|
}
|
|
|
|
.company-history-timeline__text {
|
|
font-family: var(--ch-font-body);
|
|
font-size: 0.98rem;
|
|
font-weight: 400;
|
|
line-height: 1.7;
|
|
color: #5c6b7a;
|
|
margin: 0;
|
|
max-width: 340px;
|
|
}
|
|
|
|
/* Sağ taraf: içerik sağda, ikon en sağda */
|
|
.company-history-timeline__item--right .company-history-timeline__side--inner {
|
|
grid-column: 3;
|
|
text-align: left;
|
|
}
|
|
|
|
.company-history-timeline__item--right .company-history-timeline__side--outer {
|
|
grid-column: 3;
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
margin-top: -5.5rem;
|
|
padding-right: 0;
|
|
}
|
|
|
|
.company-history-timeline__item--right .company-history-timeline__icon-ring::before {
|
|
right: 100%;
|
|
margin-right: 4px;
|
|
}
|
|
|
|
.company-history-timeline__item--right .company-history-timeline__content {
|
|
padding-right: 5.5rem;
|
|
}
|
|
|
|
/* Sol taraf: ikon en solda, içerik solda */
|
|
.company-history-timeline__item--left .company-history-timeline__side--inner {
|
|
grid-column: 1;
|
|
text-align: right;
|
|
}
|
|
|
|
.company-history-timeline__item--left .company-history-timeline__side--outer {
|
|
grid-column: 1;
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
margin-top: -5.5rem;
|
|
}
|
|
|
|
.company-history-timeline__item--left .company-history-timeline__icon-ring::before {
|
|
left: 100%;
|
|
margin-left: 4px;
|
|
}
|
|
|
|
.company-history-timeline__item--left .company-history-timeline__content {
|
|
padding-left: 5.5rem;
|
|
}
|
|
|
|
.company-history-timeline__item--left .company-history-timeline__text {
|
|
margin-left: auto;
|
|
}
|
|
|
|
.company-history-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);
|
|
transition-delay: var(--reveal-delay, 0s);
|
|
will-change: opacity, transform;
|
|
}
|
|
|
|
.company-history-timeline__item--left.company-history-timeline__reveal {
|
|
transform: translate3d(-36px, 28px, 0);
|
|
}
|
|
|
|
.company-history-timeline__item--right.company-history-timeline__reveal {
|
|
transform: translate3d(36px, 28px, 0);
|
|
}
|
|
|
|
.company-history-timeline__reveal.is-visible {
|
|
opacity: 1;
|
|
transform: translate3d(0, 0, 0);
|
|
}
|
|
|
|
.company-history-timeline__header .company-history-timeline__section-badge {
|
|
--reveal-delay: 0s;
|
|
}
|
|
|
|
.company-history-timeline__header .company-history-timeline__section-title {
|
|
--reveal-delay: 0.08s;
|
|
}
|
|
|
|
.company-history-timeline__header .company-history-timeline__section-subtitle {
|
|
--reveal-delay: 0.16s;
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.company-history-timeline__reveal {
|
|
opacity: 1;
|
|
transform: none;
|
|
transition: none;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 767px) {
|
|
.company-history-timeline__track::before {
|
|
left: 24px;
|
|
transform: none;
|
|
}
|
|
|
|
.company-history-timeline__item {
|
|
grid-template-columns: 48px 1fr;
|
|
gap: 0 1rem;
|
|
min-height: auto;
|
|
}
|
|
|
|
.company-history-timeline__axis {
|
|
grid-column: 1;
|
|
grid-row: 1;
|
|
align-self: start;
|
|
padding-top: 1.25rem;
|
|
}
|
|
|
|
.company-history-timeline__item--left .company-history-timeline__side--inner,
|
|
.company-history-timeline__item--right .company-history-timeline__side--inner {
|
|
grid-column: 2;
|
|
grid-row: 1;
|
|
text-align: left;
|
|
}
|
|
|
|
.company-history-timeline__item--left .company-history-timeline__side--outer,
|
|
.company-history-timeline__item--right .company-history-timeline__side--outer {
|
|
grid-column: 2;
|
|
grid-row: 2;
|
|
margin-top: 0.75rem;
|
|
justify-content: flex-start !important;
|
|
}
|
|
|
|
.company-history-timeline__item--left .company-history-timeline__content,
|
|
.company-history-timeline__item--right .company-history-timeline__content {
|
|
padding: 0 !important;
|
|
}
|
|
|
|
.company-history-timeline__icon-ring {
|
|
width: 60px;
|
|
height: 60px;
|
|
}
|
|
|
|
.company-history-timeline__icon-ring::before {
|
|
display: none;
|
|
}
|
|
|
|
.company-history-timeline__item--left .company-history-timeline__text {
|
|
margin-left: 0;
|
|
}
|
|
|
|
.company-history-timeline__item--left.company-history-timeline__reveal,
|
|
.company-history-timeline__item--right.company-history-timeline__reveal {
|
|
transform: translate3d(0, 28px, 0);
|
|
}
|
|
}
|
|
</style>
|
|
@endpush
|
|
|
|
@push('scripts')
|
|
<script>
|
|
(function () {
|
|
const timeline = document.querySelector('[data-timeline-animate]');
|
|
if (!timeline) {
|
|
return;
|
|
}
|
|
|
|
const revealElements = timeline.closest('.company-history-timeline-section')
|
|
?.querySelectorAll('.company-history-timeline__reveal');
|
|
|
|
if (!revealElements || revealElements.length === 0) {
|
|
return;
|
|
}
|
|
|
|
if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
|
|
revealElements.forEach(function (element) {
|
|
element.classList.add('is-visible');
|
|
});
|
|
return;
|
|
}
|
|
|
|
const observer = new IntersectionObserver(function (entries) {
|
|
entries.forEach(function (entry) {
|
|
if (!entry.isIntersecting) {
|
|
return;
|
|
}
|
|
|
|
entry.target.classList.add('is-visible');
|
|
observer.unobserve(entry.target);
|
|
});
|
|
}, {
|
|
root: null,
|
|
rootMargin: '0px 0px -10% 0px',
|
|
threshold: 0.12,
|
|
});
|
|
|
|
revealElements.forEach(function (element) {
|
|
observer.observe(element);
|
|
});
|
|
})();
|
|
</script>
|
|
@endpush
|
|
@endonce
|
|
@endif
|