Files
citrus/resources/views/templates/home/hero.blade.php
T

80 lines
6.8 KiB
PHP
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
@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['Facebook']))
<a class="!text-white hover:!text-[#4267B2] 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['Facebook'] }}" target="_blank" rel="noopener noreferrer" aria-label="{{ t('Facebook') }}"><i class="uil uil-facebook-f before:content-['\eae2']" 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'] ?? '';
@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
</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;
}
</style>