feat: implement Company History module with CRUD functionality, localization support, and timeline display for enhanced user experience
This commit is contained in:
Ümit Tunç
@@ -0,0 +1,18 @@
|
||||
@props(['icon' => 'heroicon-o-building-office-2', 'color' => '#17a2b8'])
|
||||
|
||||
@php
|
||||
$paths = match ($icon) {
|
||||
'heroicon-o-academic-cap' => 'M4.26 10.147a60.438 60.438 0 0 0-.491 6.347A48.62 48.62 0 0 1 12 20.904a48.62 48.62 0 0 1 8.232-4.41 60.46 60.46 0 0 0-.491-6.347m-15.482 0a50.636 50.636 0 0 0-2.658-.813A59.906 59.906 0 0 1 12 3.493a59.903 59.903 0 0 1 10.399 5.84c-.896.248-1.783.52-2.658.814m-15.482 0A50.717 50.717 0 0 1 12 13.489a50.702 50.702 0 0 1 7.74-3.342M6.75 15a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Zm0 0v-3.675A55.378 55.378 0 0 1 12 8.443m0 0V5.25A2.25 2.25 0 0 0 9 3H5.25A2.25 2.25 0 0 0 3 5.25v3.175',
|
||||
'heroicon-o-globe-alt' => 'M12 21a9.004 9.004 0 0 0 8.716-6.747M12 21a9.004 9.004 0 0 1-8.716-6.747M12 21c2.485 0 4.5-4.03 4.5-9S14.485 3 12 3m0 18c-2.485 0-4.5-4.03-4.5-9S9.515 3 12 3m0 0a8.997 8.997 0 0 1 7.843 4.582M12 3a8.997 8.997 0 0 0-7.843 4.582m15.686 0A11.953 11.953 0 0 1 12 10.5c-2.998 0-5.74-1.1-7.843-2.918m15.686 0A8.959 8.959 0 0 1 21 12c0 .778-.099 1.533-.284 2.253m0 0A17.919 17.919 0 0 1 12 16.5a17.92 17.92 0 0 1-8.716-2.247m0 0A8.959 8.959 0 0 1 3 12c0-.778.099-1.533.284-2.253',
|
||||
'heroicon-o-users' => 'M15 19.128a9.38 9.38 0 0 0 2.625.372 9.337 9.337 0 0 0 4.121-.952 4.125 4.125 0 0 0-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 0 1 8.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0 1 11.964-3.07M12 6.375a3.375 3.375 0 1 1-6.75 0 3.375 3.375 0 0 1 6.75 0Zm8.25 2.25a2.625 2.625 0 1 1-5.25 0 2.625 2.625 0 0 1 5.25 0Z',
|
||||
'heroicon-o-trophy' => 'M16.5 18.75h-9m9 0a3 3 0 0 1 3 3h-15a3 3 0 0 1 3-3m9 0v-3.375c0-.621-.503-1.125-1.125-1.125h-.871M7.5 18.75H4.875c-.621 0-1.125.503-1.125 1.125v.375M15 6.75a3 3 0 1 1-6 0 3 3 0 0 1 6 0Zm6 3a2.25 2.25 0 1 1-4.5 0 2.25 2.25 0 0 1 4.5 0Zm-13.5 0a2.25 2.25 0 1 1-4.5 0 2.25 2.25 0 0 1 4.5 0Z',
|
||||
'heroicon-o-map' => 'M15 10.5a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z M19.5 10.5c0 7.142-7.5 11.25-7.5 11.25S4.5 17.642 4.5 10.5a7.5 7.5 0 1 1 15 0Z',
|
||||
'heroicon-o-light-bulb' => 'M12 18v-5.25m0 0a6.01 6.01 0 0 0 1.5-.189m-1.5.189a6.01 6.01 0 0 1-1.5-.189m3.75 7.478a12.06 12.06 0 0 1-4.5 0m3.75 2.383a14.406 14.406 0 0 1-3 0M14.25 18v-.192c0-.983.658-1.823 1.508-2.316a7.5 7.5 0 1 0-7.517 0c.85.493 1.509 1.333 1.509 2.316V18',
|
||||
'heroicon-o-rocket-launch' => 'M15.59 14.37a6 6 0 0 1-5.84 7.38v-4.8m5.84-2.58a14.98 14.98 0 0 0 6.16-12.12A14.98 14.98 0 0 0 9.631 8.41m5.96 5.96a14.926 14.926 0 0 1-5.841 2.58m-.119-8.54a6 6 0 0 0-7.381 5.84h4.8m2.581-5.84a14.927 14.927 0 0 0-2.58 5.84m2.699 2.7c-.103.021-.207.041-.311.06a15.09 15.09 0 0 1-2.448-2.448 14.9 14.9 0 0 1 .06-.312m-2.24 2.39a4.493 4.493 0 0 0-1.757 4.306 4.493 4.493 0 0 0 4.306-1.758M16.5 9a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Z',
|
||||
default => 'M2.25 21h19.5m-18-18v18m10.5-18v18m6-13.5V21M6.75 6.75h.75m-.75 3h.75m-.75 3h.75m3-6h.75m-.75 3h.75m-.75 3h.75M6.75 21v-3.375c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21M3 3h12m-.75 4.5H21m-3.75 3.75h.008v.008h-.008v-.008Zm0 3h.008v.008h-.008v-.008Zm0 3h.008v.008h-.008v-.008Z',
|
||||
};
|
||||
@endphp
|
||||
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="{{ $color }}" class="company-history-icon-svg" aria-hidden="true">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="{{ $paths }}" />
|
||||
</svg>
|
||||
@@ -0,0 +1,322 @@
|
||||
@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
|
||||
|
||||
@if($historyItems->isNotEmpty())
|
||||
<section class="company-history-timeline-section wrapper !bg-[#f4f6f8]">
|
||||
<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">
|
||||
<div class="w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto">
|
||||
<span class="inline-block text-[0.75rem] tracking-[0.12rem] uppercase font-bold !mb-3" style="color: #e31e24;">
|
||||
{{ __('company_history.timeline_section_badge') }}
|
||||
</span>
|
||||
<h2 class="!text-[calc(1.345rem_+_1.14vw)] font-bold !leading-[1.2] xl:!text-[2.2rem] !mb-3">
|
||||
{{ __('company_history.timeline_section_title') }}
|
||||
</h2>
|
||||
<p class="lead text-[1.05rem] !leading-[1.6] !text-[#60697b] max-w-[42rem] !mx-auto">
|
||||
{{ __('company_history.timeline_section_subtitle') }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
@endif
|
||||
|
||||
<div class="company-history-timeline">
|
||||
<div class="company-history-timeline__start">
|
||||
<span>{{ __('company_history.timeline_start') }}</span>
|
||||
</div>
|
||||
|
||||
<div class="company-history-timeline__track" style="--timeline-gradient: linear-gradient(to bottom, {{ $gradientStops }});">
|
||||
@foreach($historyItems as $item)
|
||||
@php
|
||||
$color = $item->color ?? '#17a2b8';
|
||||
$position = $item->resolved_position;
|
||||
$title = method_exists($item, 'translate') ? ($item->translate('title') ?: $item->title) : $item->title;
|
||||
$content = method_exists($item, 'translate') ? ($item->translate('content') ?: $item->content) : $item->content;
|
||||
@endphp
|
||||
<article
|
||||
class="company-history-timeline__item company-history-timeline__item--{{ $position }}"
|
||||
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">{{ $item->year }}</div>
|
||||
@if($title)
|
||||
<h3 class="company-history-timeline__title">{{ strtoupper($title) }}</h3>
|
||||
@endif
|
||||
@if($content)
|
||||
<p class="company-history-timeline__text">{{ $content }}</p>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
@endforeach
|
||||
</div>
|
||||
|
||||
<div class="company-history-timeline__finish">
|
||||
<span>{{ __('company_history.timeline_finish') }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@once
|
||||
@push('styles')
|
||||
<style>
|
||||
.company-history-timeline {
|
||||
max-width: 960px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.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-size: 0.72rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.14em;
|
||||
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-size: clamp(2rem, 4vw, 2.85rem);
|
||||
font-weight: 800;
|
||||
line-height: 1.05;
|
||||
color: var(--item-color);
|
||||
margin-bottom: 0.2rem;
|
||||
}
|
||||
|
||||
.company-history-timeline__title {
|
||||
font-size: 0.78rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.12em;
|
||||
color: var(--item-color);
|
||||
margin: 0 0 0.7rem;
|
||||
}
|
||||
|
||||
.company-history-timeline__text {
|
||||
font-size: 0.93rem;
|
||||
line-height: 1.65;
|
||||
color: #718096;
|
||||
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;
|
||||
}
|
||||
|
||||
@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;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@endpush
|
||||
@endonce
|
||||
@endif
|
||||
@@ -0,0 +1,121 @@
|
||||
{{-- demo31.html: üst bilgi bandı + center-nav transparent navbar-light --}}
|
||||
<header class="relative wrapper !bg-[#ffffff]">
|
||||
<div class="bg-[rgba(63,120,224)] !text-white font-bold text-[.75rem] !mb-2">
|
||||
<div class="container py-2 flex flex-col gap-2 sm:!flex-row sm:flex-wrap sm:items-center sm:gap-4 md:py-1 xl:!flex lg:!flex md:!flex xl:!flex-row lg:!flex-row md:!flex-row">
|
||||
@if(setting('contact_address'))
|
||||
<div class="flex flex-row items-center">
|
||||
<div class="icon !text-white !text-[1.1rem] !mt-[.25rem] !mr-[.5rem]">
|
||||
<i class="uil uil-location-pin-alt before:content-['\ebd8']"></i>
|
||||
</div>
|
||||
<address class="!mb-0 not-italic !leading-[inherit] block">{{ setting('contact_address') }}</address>
|
||||
</div>
|
||||
@endif
|
||||
@if(setting('contact_phone'))
|
||||
<div class="flex flex-row items-center sm:ms-auto {{ setting('contact_address') ? 'md:me-6' : '' }}">
|
||||
<div class="icon !text-white !text-[1.1rem] !mt-[.25rem] !mr-[.5rem]">
|
||||
<i class="uil uil-phone-volume before:content-['\ec50']"></i>
|
||||
</div>
|
||||
<p class="!mb-0">
|
||||
<a href="tel:{{ preg_replace('/\s+/', '', setting('contact_phone')) }}" class="hover !text-white hover:!text-white">{{ setting('contact_phone') }}</a>
|
||||
</p>
|
||||
</div>
|
||||
@endif
|
||||
@if(setting('contact_email'))
|
||||
<div class="flex flex-row items-center">
|
||||
<div class="icon !text-white !text-[1.1rem] !mt-[.25rem] !mr-[.5rem]">
|
||||
<i class="uil uil-message before:content-['\ebfe']"></i>
|
||||
</div>
|
||||
<p class="!mb-0">
|
||||
<a href="mailto:{{ setting('contact_email') }}" class="hover !text-white hover:!text-white">{{ setting('contact_email') }}</a>
|
||||
</p>
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<nav class="navbar navbar-expand-lg center-nav transparent navbar-light">
|
||||
<div class="container xl:!flex-row lg:!flex-row !flex-nowrap items-center">
|
||||
<div class="navbar-brand w-full">
|
||||
<a href="{{ url('/') }}">
|
||||
<img src="{{ asset('assets/img/truncgil-yatay.svg') }}" alt="{{ setting('site_name', config('app.name')) }}" fetchpriority="high" decoding="async">
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="navbar-collapse offcanvas offcanvas-nav offcanvas-start">
|
||||
<div class="offcanvas-header xl:!hidden lg:!hidden flex items-center justify-between flex-row p-6">
|
||||
<a href="{{ url('/') }}">
|
||||
<img class="!h-[2.2rem]" src="{{ asset('assets/img/truncgil-yatay-dark.svg') }}" alt="{{ setting('site_name', config('app.name')) }}" loading="lazy">
|
||||
</a>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="{{ __('Close') }}"></button>
|
||||
</div>
|
||||
<div class="offcanvas-body xl:!ml-auto lg:!ml-auto flex flex-col !h-full">
|
||||
<div class="xl:!hidden lg:!hidden w-full pb-4 mb-2 border-b border-[#e2e8f0]">
|
||||
@include('components.custom.language-selector', ['variant' => 'offcanvas'])
|
||||
</div>
|
||||
@include('components.custom.menu')
|
||||
<div class="offcanvas-footer xl:!hidden lg:!hidden !mt-auto">
|
||||
<div>
|
||||
@if(setting('contact_email'))
|
||||
<a href="mailto:{{ setting('contact_email') }}" class="link-inverse">{{ setting('contact_email') }}</a>
|
||||
<br>
|
||||
@endif
|
||||
@if(setting('contact_phone'))
|
||||
<a href="tel:{{ preg_replace('/\s+/', '', setting('contact_phone')) }}">{{ setting('contact_phone') }}</a>
|
||||
<br>
|
||||
@endif
|
||||
@php $social_media = json_decode(setting('social_links'), true) ?? []; @endphp
|
||||
<nav class="nav social social-white !mt-4">
|
||||
@if(!empty($social_media['Twitter']))
|
||||
<a class="!text-[#cacaca] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem] m-[0_.7rem_0_0]" href="{{ $social_media['Twitter'] }}" target="_blank" rel="noopener"><i class="uil uil-twitter before:content-['\ed59'] !text-white text-[1rem]"></i></a>
|
||||
@endif
|
||||
@if(!empty($social_media['Facebook']))
|
||||
<a class="!text-[#cacaca] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem] m-[0_.7rem_0_0]" href="{{ $social_media['Facebook'] }}" target="_blank" rel="noopener"><i class="uil uil-facebook-f before:content-['\eae2'] !text-white text-[1rem]"></i></a>
|
||||
@endif
|
||||
@if(!empty($social_media['Instagram']))
|
||||
<a class="!text-[#cacaca] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem] m-[0_.7rem_0_0]" href="{{ $social_media['Instagram'] }}" target="_blank" rel="noopener"><i class="uil uil-instagram before:content-['\eb9c'] !text-white text-[1rem]"></i></a>
|
||||
@endif
|
||||
@if(!empty($social_media['Youtube']))
|
||||
<a class="!text-[#cacaca] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem] m-[0_.7rem_0_0]" href="{{ $social_media['Youtube'] }}" target="_blank" rel="noopener"><i class="uil uil-youtube before:content-['\edb5'] !text-white text-[1rem]"></i></a>
|
||||
@endif
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="navbar-other w-full !flex !ml-auto header-language-desktop">
|
||||
<ul class="navbar-nav !flex-row !items-center !ml-auto">
|
||||
<li class="nav-item hidden xl:block lg:block md:block">
|
||||
@include('components.custom.language-selector')
|
||||
</li>
|
||||
<li class="nav-item hidden xl:block lg:block md:block">
|
||||
<a
|
||||
href="{{ route('page.show', ['slug' => 'iletisim']) }}"
|
||||
class="btn btn-sm btn-primary !text-white !bg-[#e31e24] border-[#e31e24] hover:text-white hover:bg-[#e31e24] hover:!border-[#e31e24] active:text-white active:bg-[#e31e24] active:border-[#e31e24] disabled:text-white disabled:bg-[#e31e24] disabled:border-[#e31e24] !rounded-[0.4rem] hover:translate-y-[-0.15rem] hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.15)]"
|
||||
>{{ t('İletişim') }}</a>
|
||||
</li>
|
||||
<li class="nav-item xl:!hidden lg:!hidden">
|
||||
<button class="hamburger offcanvas-nav-btn" type="button" data-bs-toggle="offcanvas" data-bs-target=".offcanvas-nav"><span></span></button>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
var offcanvases = document.querySelectorAll('.offcanvas-nav');
|
||||
var hamburgers = document.querySelectorAll('.hamburger.offcanvas-nav-btn');
|
||||
if (offcanvases.length > 0 && hamburgers.length > 0) {
|
||||
offcanvases.forEach(function (oc) {
|
||||
oc.addEventListener('show.bs.offcanvas', function () {
|
||||
hamburgers.forEach(function (h) { h.classList.add('is-active'); });
|
||||
});
|
||||
oc.addEventListener('hide.bs.offcanvas', function () {
|
||||
hamburgers.forEach(function (h) { h.classList.remove('is-active'); });
|
||||
});
|
||||
});
|
||||
}
|
||||
});
|
||||
</script>
|
||||
@@ -0,0 +1,41 @@
|
||||
@extends('layouts.site', [
|
||||
'header' => 'partials.header-demo31',
|
||||
'footer' => 'partials.footer',
|
||||
])
|
||||
|
||||
@section('content')
|
||||
@php
|
||||
$historyItems = \App\Models\CompanyHistoryItem::active()->ordered()->get();
|
||||
$pageTitle = $page ? ($page->translate('title') ?: $page->title) : __('company_history.timeline_section_title');
|
||||
$pageExcerpt = $page ? ($page->translate('excerpt') ?: $page->excerpt) : null;
|
||||
@endphp
|
||||
|
||||
<section class="wrapper !bg-[#ffffff]">
|
||||
<div class="container pt-12 xl:pt-16 lg:pt-16 md:pt-16 pb-10 xl:pb-14 lg:pb-14 md:pb-14 !text-center">
|
||||
<div class="flex flex-wrap mx-[-15px]">
|
||||
<div class="lg:w-9/12 xl:w-8/12 xxl:w-7/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto">
|
||||
<h1 class="xl:!text-[3.2rem] !text-[calc(1.445rem_+_2.34vw)] font-bold !leading-[1.15] !tracking-[-0.03em] !mb-4 md:!px-8 lg:!px-0">
|
||||
{{ $pageTitle }}
|
||||
</h1>
|
||||
@if($pageExcerpt)
|
||||
<p class="lead !text-[1.2rem] !leading-[1.5] !mb-0 !text-[#60697b]">
|
||||
{{ $pageExcerpt }}
|
||||
</p>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@if($page && ($page->translate('content') ?: $page->content))
|
||||
<div class="flex flex-wrap mx-[-15px] !mt-10">
|
||||
<div class="lg:w-9/12 xl:w-8/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto">
|
||||
<div class="prose max-w-none !text-[#60697b] !text-center">
|
||||
{!! $page->translate('content') ?: $page->content !!}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<x-company-history.timeline :items="$historyItems" />
|
||||
@endsection
|
||||
Reference in New Issue
Block a user