feat: expand company history module with additional translations, new illustration, and updated header layout for enhanced user experience
This commit is contained in:
Ümit Tunç
@@ -14,56 +14,66 @@
|
||||
$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/i28.png');
|
||||
|
||||
$highlightClasses = "!relative z-[1] style-1 primary before:content-[''] before:z-[-1] before:absolute before:opacity-100 before:block before:-translate-x-2/4 before:-translate-y-2/4 before:-rotate-1 before:w-[111%] before:h-[110%] before:rounded-[80%] before:border-t-0 before:border-[3px] before:border-solid before:border-[#e31e24] before:left-2/4 before:!top-[52%] after:content-[''] after:z-[-1] after:absolute after:opacity-100 after:block after:[background-size:100%_100%] after:bg-no-repeat after:bg-bottom after:bottom-[-0.1em] after:-translate-x-2/4 after:-translate-y-2/4 after:-rotate-2 after:w-[107%] after:h-[111%] after:rounded-[80%] after:border-l-0 after:border-b-0 after:border-[3px] after:border-solid after:border-[#e31e24] after:left-2/4 after:top-[52%] max-xl:before:!hidden max-xl:after:!hidden max-lg:before:!hidden max-lg:after:!hidden max-md:before:!hidden max-md:after:!hidden max-sm:before:!hidden max-sm:after:!hidden";
|
||||
$illustration = $illustration ?? asset('assets/img/illustrations/truncgil-overview-timeline.png');
|
||||
@endphp
|
||||
|
||||
@include('components.company-history.fonts')
|
||||
|
||||
<section class="company-history-fonts wrapper !bg-[#ffffff]">
|
||||
<div class="container pt-12 xl:pt-16 lg:pt-16 md:pt-16 pb-36 xl:pb-28 lg:pb-28 md:pb-28 !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" data-cues="slideInDown" data-group="page-title" data-delay="500">
|
||||
<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">
|
||||
{{ $titleBefore }}
|
||||
@if($highlight)
|
||||
<span class="{{ $highlightClasses }}"><em>{{ $highlight }}</em></span>
|
||||
@endif
|
||||
{{ $titleAfter }}
|
||||
</h1>
|
||||
@if($subtitle)
|
||||
<p class="lead !text-[1.2rem] !leading-[1.5] !mb-7 !text-[#60697b]">{{ $subtitle }}</p>
|
||||
@endif
|
||||
@if($ctaLabel)
|
||||
<div>
|
||||
<a
|
||||
href="{{ $ctaUrl }}"
|
||||
class="btn btn-lg 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 !mb-10 xxl:!mb-5"
|
||||
>{{ $ctaLabel }}</a>
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-wrap mx-[-15px]">
|
||||
<div class="lg:w-10/12 xl:w-9/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto !mt-[3rem] !mb-[-12.5rem] relative z-[3]">
|
||||
<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">
|
||||
<img
|
||||
class="max-w-full h-auto"
|
||||
class="w-auto max-w-full h-auto"
|
||||
src="{{ $illustration }}"
|
||||
alt="{{ __('company_history.hero_illustration_alt') }}"
|
||||
loading="lazy"
|
||||
loading="eager"
|
||||
fetchpriority="high"
|
||||
decoding="async"
|
||||
>
|
||||
</figure>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="overflow-hidden">
|
||||
<div class="divider !text-[#f4f6f8] mx-[-0.5rem]">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 70" aria-hidden="true">
|
||||
<path fill="currentColor" d="M1440,70H0V45.16a5762.49,5762.49,0,0,1,1440,0Z" />
|
||||
</svg>
|
||||
|
||||
<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 !text-[calc(1.375rem_+_1.5vw)] font-bold !leading-[1.15] xl:!text-[2.5rem] !mb-5 md:mx-[-1.25rem] lg:mx-0">
|
||||
{{ $titleBefore }}@if($highlight)<span class="!text-[#fab758]"> {{ $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] !text-[.85rem] !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);
|
||||
letter-spacing: -0.02em;
|
||||
}
|
||||
|
||||
.company-history-hero__lead {
|
||||
font-family: var(--ch-font-body);
|
||||
}
|
||||
|
||||
.company-history-hero__cta {
|
||||
font-family: var(--ch-font-label);
|
||||
font-weight: 600;
|
||||
}
|
||||
</style>
|
||||
@endpush
|
||||
@endonce
|
||||
|
||||
@@ -0,0 +1,86 @@
|
||||
{{-- demo1.html: center-nav, !bg-[#fff8ee], #fab758 vurgu --}}
|
||||
<header class="relative wrapper !bg-[#fff8ee]">
|
||||
<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-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)]"
|
||||
>{{ 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>
|
||||
@@ -1,5 +1,5 @@
|
||||
@extends('layouts.site', [
|
||||
'header' => 'partials.header',
|
||||
'header' => 'partials.header-demo1',
|
||||
'footer' => 'partials.footer',
|
||||
])
|
||||
|
||||
|
||||
Reference in New Issue
Block a user