Ümit Tunç
105 lines
7.7 KiB
PHP
105 lines
7.7 KiB
PHP
@php
|
||
$hero_bg = setting('hero_bg') ?: './assets/img/photos/bg16.webp';
|
||
@endphp
|
||
<section class="wrapper image-wrapper bg-image bg-overlay bg-overlay-300 bg-no-repeat bg-[center_center] bg-cover relative z-0 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,.3)]" data-image-src="{{ $hero_bg }}" style="background-image: url('{{ $hero_bg }}');">
|
||
<div class="container pt-28 pb-36 xl:pt-32 lg:pt-32 md:pt-32 xl:pb-28 lg:pb-28 md:pb-28 !text-center">
|
||
<div class="flex flex-wrap mx-[-15px]">
|
||
<div class="lg:w-8/12 xl:w-7/12 xxl:w-6/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto" data-cues="slideInDown" data-group="page-title" data-disabled="true">
|
||
<h1 class="xl:!text-[3rem] !text-[calc(1.425rem_+_2.1vw)] font-semibold !leading-[1.15] !text-white !mb-4 md:!px-20 lg:!px-0 xl:!px-0" data-cue="slideInDown" data-group="page-title" data-show="true" style="animation-name: slideInDown; animation-duration: 700ms; animation-timing-function: ease; animation-delay: 0ms; animation-direction: normal; animation-fill-mode: both;">
|
||
{!! t('Hayatı <span class="hero-underline yellow">kolaylaştıran</span> çözümler sunuyoruz') !!}
|
||
</h1>
|
||
<p class="lead !text-[1.2rem] !text-white !leading-[1.5] font-medium !mb-7 md:mx-[4rem] lg:mx-[2.5rem] xl:mx-[2.5rem]" data-cue="slideInDown" data-group="page-title" data-show="true" style="animation-name: slideInDown; animation-duration: 700ms; animation-timing-function: ease; animation-delay: 300ms; animation-direction: normal; animation-fill-mode: both;">{{ t('Hayatı kolaylaştıran uygulamaları insan odaklı, akılcı ve sade bir biçimde gerçekleştirmek için var gücümüzle çalışıyoruz.') }}</p>
|
||
<div data-cue="slideInDown" data-group="page-title" data-show="true" style="animation-name: slideInDown; animation-duration: 700ms; animation-timing-function: ease; animation-delay: 600ms; animation-direction: normal; animation-fill-mode: both;">
|
||
@php $social_media = json_decode(setting('social_links'), true) ?? []; @endphp
|
||
<nav class="nav social social-white justify-center !text-center" aria-label="{{ t('Sosyal medya') }}">
|
||
@if(!empty($social_media['Twitter']))
|
||
<a class="!text-white hover:!text-[#5daed5] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem] mx-3" style="font-size: 2.25rem !important;" href="{{ $social_media['Twitter'] }}" target="_blank" rel="noopener noreferrer" aria-label="{{ t('Twitter') }}"><i class="uil uil-twitter before:content-['\ed59']" style="font-size: 2.25rem !important;" aria-hidden="true"></i></a>
|
||
@endif
|
||
|
||
@if(!empty($social_media['Instagram']))
|
||
<a class="!text-white hover:!text-[#c13584] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem] mx-3" style="font-size: 2.25rem !important;" href="{{ $social_media['Instagram'] }}" target="_blank" rel="noopener noreferrer" aria-label="{{ t('Instagram') }}"><i class="uil uil-instagram before:content-['\eb9c']" style="font-size: 2.25rem !important;" aria-hidden="true"></i></a>
|
||
@endif
|
||
@if(!empty($social_media['Youtube']))
|
||
<a class="!text-white hover:!text-[#ff0000] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem] mx-3" style="font-size: 2.25rem !important;" href="{{ $social_media['Youtube'] }}" target="_blank" rel="noopener noreferrer" aria-label="{{ t('YouTube') }}"><i class="uil uil-youtube before:content-['\edb5']" style="font-size: 2.25rem !important;" aria-hidden="true"></i></a>
|
||
@endif
|
||
@if(!empty($social_media['Github']))
|
||
<a class="!text-white hover:!text-[#2dba4e] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem] mx-3" style="font-size: 2.25rem !important;" href="{{ $social_media['Github'] }}" target="_blank" rel="noopener noreferrer" aria-label="{{ t('GitHub') }}"><i class="uil uil-github before:content-['\eb40']" style="font-size: 2.25rem !important;" aria-hidden="true"></i></a>
|
||
@endif
|
||
@if(!empty($social_media['Linkedin']))
|
||
<a class="!text-white hover:!text-[#0077b5] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem] mx-3" style="font-size: 2.25rem !important;" href="{{ $social_media['Linkedin'] }}" target="_blank" rel="noopener noreferrer" aria-label="{{ t('LinkedIn') }}"><i class="uil uil-linkedin before:content-['\ebd5']" style="font-size: 2.25rem !important;" aria-hidden="true"></i></a>
|
||
@endif
|
||
@php
|
||
$google_play = $social_media['googleplay'] ?? $social_media['google_play'] ?? $social_media['GooglePlay'] ?? $social_media['Googleplay'] ?? '';
|
||
$apple_store = $social_media['applestore'] ?? $social_media['apple_store'] ?? $social_media['AppleStore'] ?? $social_media['Applestore'] ?? $social_media['apple'] ?? $social_media['Apple'] ?? '';
|
||
$microsoft_store = $social_media['microsoftstore'] ?? $social_media['microsoft_store'] ?? $social_media['MicrosoftStore'] ?? $social_media['Microsoftstore'] ?? 'https://apps.microsoft.com/search/publisher?name=Truncgil+Teknoloji&hl=tr-TR&gl=TR';
|
||
@endphp
|
||
@if(!empty($google_play))
|
||
<a class="!text-white hover:!text-[#34A853] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem] mx-3" style="font-size: 2.25rem !important;" href="{{ $google_play }}" target="_blank" rel="noopener noreferrer" aria-label="{{ t('Google Play') }}"><i class="uil uil-google-play before:content-['\eb4f']" style="font-size: 2.25rem !important;" aria-hidden="true"></i></a>
|
||
@endif
|
||
@if(!empty($apple_store))
|
||
<a class="!text-white hover:!text-[#A2AAAD] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem] mx-3" style="font-size: 2.25rem !important;" href="{{ $apple_store }}" target="_blank" rel="noopener noreferrer" aria-label="{{ t('App Store') }}"><i class="uil uil-apple before:content-['\e938']" style="font-size: 2.25rem !important;" aria-hidden="true"></i></a>
|
||
@endif
|
||
@if(!empty($microsoft_store))
|
||
<a class="!text-white hover:!text-[#00A4EF] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem] mx-3" style="font-size: 2.25rem !important;" href="{{ $microsoft_store }}" target="_blank" rel="noopener noreferrer" aria-label="{{ t('Microsoft Store') }}"><i class="uil uil-microsoft before:content-['\ec03']" style="font-size: 2.25rem !important;" aria-hidden="true"></i></a>
|
||
@endif
|
||
</nav>
|
||
</div>
|
||
</div>
|
||
<!-- /column -->
|
||
</div>
|
||
<!-- /.row -->
|
||
</div>
|
||
<!-- /.container -->
|
||
<div class="overflow-hidden">
|
||
<div class="divider !text-[#fefefe] mx-[-0.5rem]">
|
||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 60">
|
||
<path fill="currentColor" d="M0,0V60H1440V0A5771,5771,0,0,1,0,0Z"></path>
|
||
</svg>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<style>
|
||
.hero-underline {
|
||
position: relative;
|
||
z-index: 2;
|
||
display: inline-block;
|
||
}
|
||
.hero-underline::after {
|
||
content: "";
|
||
position: absolute;
|
||
z-index: -1;
|
||
display: block;
|
||
background-repeat: no-repeat;
|
||
background-position: bottom center;
|
||
bottom: -0.15em;
|
||
width: 110%;
|
||
height: 0.35em;
|
||
left: 50%;
|
||
transform: translateX(-50%) !important;
|
||
}
|
||
|
||
@media (max-width: 767.98px) {
|
||
.image-wrapper {
|
||
background-image: none !important;
|
||
position: relative !important;
|
||
}
|
||
.image-wrapper::before {
|
||
content: "" !important;
|
||
position: absolute !important;
|
||
top: 0 !important;
|
||
left: 0 !important;
|
||
width: 100% !important;
|
||
height: 100vh !important;
|
||
background-image: linear-gradient(rgba(30, 34, 40, 0.45), rgba(30, 34, 40, 0.45)), url('{{ $hero_bg }}') !important;
|
||
background-size: cover !important;
|
||
background-position: center center !important;
|
||
background-repeat: no-repeat !important;
|
||
z-index: -1 !important;
|
||
}
|
||
.image-wrapper .divider {
|
||
display: none !important;
|
||
}
|
||
}
|
||
</style>
|