Ümit Tunç
107 lines
4.1 KiB
PHP
107 lines
4.1 KiB
PHP
@props([
|
|
'titleBefore' => null,
|
|
'highlight' => null,
|
|
'titleAfter' => null,
|
|
'subtitle' => null,
|
|
'ctaLabel' => null,
|
|
'ctaUrl' => '#company-history-timeline',
|
|
'illustration' => null,
|
|
])
|
|
|
|
@php
|
|
$titleBefore = $titleBefore ?? __('company_history.hero_title_before');
|
|
$highlight = $highlight ?? __('company_history.hero_highlight');
|
|
$titleAfter = $titleAfter ?? __('company_history.hero_title_after');
|
|
$subtitle = $subtitle ?? __('company_history.hero_subtitle');
|
|
$ctaLabel = $ctaLabel ?? __('company_history.hero_cta');
|
|
$illustration = $illustration ?? asset('assets/img/illustrations/truncgil-overview-timeline.png');
|
|
@endphp
|
|
|
|
@include('components.company-history.fonts')
|
|
|
|
<section class="company-history-fonts company-history-hero wrapper bg-gradient-yellow">
|
|
<div class="container pt-10 xl:pt-[4.5rem] lg:pt-[4.5rem] md:pt-[4.5rem] pb-10 xl:pb-14 lg:pb-14 md:pb-14">
|
|
<div class="flex flex-wrap mx-[-15px] xl:mx-[-35px] lg:mx-[-20px] !mt-[-50px] items-center">
|
|
<div class="xl:w-7/12 lg:w-7/12 w-full flex-[0_0_auto] !px-[15px] xl:!px-[35px] lg:!px-[20px] !mt-[50px] max-w-full">
|
|
<figure class="m-0 p-0">
|
|
<picture>
|
|
<source srcset="{{ asset('assets/img/illustrations/truncgil-overview-timeline.webp') }}" type="image/webp">
|
|
<img
|
|
class="w-auto max-w-full h-auto"
|
|
src="{{ $illustration }}"
|
|
alt="{{ __('company_history.hero_illustration_alt') }}"
|
|
width="960"
|
|
height="630"
|
|
loading="eager"
|
|
fetchpriority="high"
|
|
decoding="async"
|
|
>
|
|
</picture>
|
|
</figure>
|
|
</div>
|
|
|
|
<div class="md:w-10/12 lg:w-5/12 xl:w-5/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">
|
|
<h1 class="company-history-hero__title !mb-5 md:mx-[-1.25rem] lg:mx-0">
|
|
{{ $titleBefore }}@if($highlight)<span class="company-history-hero__highlight"> {{ $highlight }}</span>@endif{{ $titleAfter }}
|
|
</h1>
|
|
|
|
@if($ctaLabel)
|
|
<span>
|
|
<a
|
|
href="{{ $ctaUrl }}"
|
|
class="company-history-hero__cta btn btn-yellow !text-white !bg-[#fab758] border-[#fab758] hover:text-white hover:bg-[#fab758] hover:!border-[#fab758] active:text-white active:bg-[#fab758] active:border-[#fab758] disabled:text-white disabled:bg-[#fab758] disabled:border-[#fab758] !rounded-[50rem] hover:translate-y-[-0.15rem] hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.15)]"
|
|
>{{ $ctaLabel }}</a>
|
|
</span>
|
|
@endif
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
@once
|
|
@push('styles')
|
|
<style>
|
|
/* demo1: header + hero tek parça krem gradient */
|
|
.company-history-hero.bg-gradient-yellow {
|
|
background: linear-gradient(180deg, #fff8ee, rgba(255, 255, 255, 0) 100%);
|
|
}
|
|
|
|
.company-history-hero__title {
|
|
font-family: var(--ch-font-year);
|
|
font-size: 1.75rem;
|
|
font-weight: 700;
|
|
line-height: 1.15;
|
|
letter-spacing: -0.02em;
|
|
}
|
|
|
|
@media (min-width: 768px) {
|
|
.company-history-hero__title {
|
|
font-size: 2rem;
|
|
}
|
|
}
|
|
|
|
@media (min-width: 1280px) {
|
|
.company-history-hero__title {
|
|
font-size: 2.5rem;
|
|
}
|
|
}
|
|
|
|
.company-history-hero__highlight {
|
|
color: #fab758;
|
|
}
|
|
|
|
.company-history-hero__lead {
|
|
font-family: var(--ch-font-body);
|
|
font-size: 1.05rem;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.company-history-hero__cta {
|
|
font-family: var(--ch-font-label);
|
|
font-size: 0.85rem;
|
|
font-weight: 600;
|
|
}
|
|
</style>
|
|
@endpush
|
|
@endonce
|