Ümit Tunç
187 lines
16 KiB
PHP
187 lines
16 KiB
PHP
<section class="wrapper !bg-[#f0f0f8]">
|
|
<div class="container pt-10 lg:pt-14 xl:!pt-14 xxl:!pt-10 lg:pb-10 xl:pb-10 xxl:pb-0">
|
|
<div class="flex flex-wrap mx-[-15px] md:mx-[-20px] lg:mx-[-20px] xl:mx-[-35px] !mt-[-50px] items-center text-center lg:text-left xl:text-left">
|
|
<div class="lg:w-6/12 xl:w-6/12 w-full flex-[0_0_auto] !px-[15px] max-w-full md:!px-[20px] lg:!px-[20px] xl:!px-[35px] !mt-[50px]" data-cues="slideInDown" data-group="page-title" data-delay="900">
|
|
<h1 class="xl:!text-[2.5rem] !text-[calc(1.375rem_+_1.5vw)] !leading-[1.15] font-semibold !mb-4 xl:!mr-5 xl:!mt-[-2.5rem] lg:!mt-[-2.5rem]">
|
|
{{ t('neler-yapariz.hero.title') }}<br class="hidden md:block xl:!hidden lg:!hidden">
|
|
<span class="!text-[#e31e24]">{{ t('neler-yapariz.hero.title_highlight') }}</span>
|
|
</h1>
|
|
<p class="lead !text-[1.2rem] !leading-[1.5] !mb-7 xxl:!pr-20">{{ t('neler-yapariz.hero.subtitle') }}</p>
|
|
<div class="inline-flex !mr-2">
|
|
<a href="{{ route('page.show', ['slug' => 'iletisim']) }}" class="btn btn-lg btn-grape !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">{{ t('neler-yapariz.hero.cta_primary') }}</a>
|
|
</div>
|
|
<div class="inline-flex">
|
|
<a href="{{ route('page.show', ['slug' => 'urunlerimiz']) }}" class="btn btn-lg btn-outline-grape !text-[#e31e24] bg-[#e31e24] !border-[#e31e24] !border-[2px] hover:!text-white hover:!bg-[#e31e24] hover:!border-[#e31e24] focus:shadow-[rgba(96,93,186,1)] active:!text-white active:bg-[#e31e24] active:border-[#e31e24] disabled:!text-white disabled:bg-transparent disabled:border-[#e31e24] rounded">{{ t('neler-yapariz.hero.cta_secondary') }}</a>
|
|
</div>
|
|
</div>
|
|
<div class="w-10/12 md:w-7/12 lg:w-6/12 xl:w-5/12 !mx-auto flex-[0_0_auto] !px-[15px] max-w-full xl:!ml-5 md:!px-[20px] lg:!px-[20px] xl:!px-[35px] !mt-[50px]">
|
|
<picture>
|
|
<source srcset="{{ asset('assets/img/illustrations/3d11.webp') }}" type="image/webp">
|
|
<img class="max-w-full h-auto !mb-[-3.5rem] md:!mb-[-4.5rem] lg:!mb-[-9rem] xl:!mb-[-9rem]" src="{{ asset('assets/img/illustrations/3d11.png') }}" data-cue="fadeIn" data-delay="300" alt="{{ t('neler-yapariz.image_alt') }}" width="800" height="1080" fetchpriority="high" decoding="async">
|
|
</picture>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<figure class="m-0 p-0"><img class="w-full max-w-full !h-auto" src="{{ asset('assets/img/photos/clouds.png') }}" alt="" loading="lazy"></figure>
|
|
</section>
|
|
<section class="wrapper bg-[rgba(255,255,255)] opacity-100">
|
|
<div class="container pt-20 pb-20 xl:pb-28 lg:pb-28 md:pb-28 !pb-[4.5rem] xl:!pb-24 lg:!pb-24 md:!pb-24">
|
|
<div class="flex flex-wrap mx-[-15px] !mb-8">
|
|
<div class="w-full flex-[0_0_auto] !px-[15px] max-w-full">
|
|
<figure class="rounded-[0.4rem]"><img loading="lazy" class="rounded-[0.4rem]" src="{{ asset('assets/img/Truncgil Technology Architecting the Digital Future.png') }}" alt="{{ t('neler-yapariz.image_alt') }}"></figure>
|
|
<div class="flex flex-wrap mx-[-15px]">
|
|
<div class="xl:w-10/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto">
|
|
<div class="card image-wrapper bg-full bg-image bg-overlay bg-overlay-400 !text-white !mt-[-1.25rem] xl:!mt-0 lg:!mt-0 xl:-translate-y-2/4 lg:-translate-y-2/4 bg-cover [background-size:100%] bg-[center_center] bg-no-repeat !bg-scroll !relative z-0 before:rounded-[0.4rem] before:bg-[rgba(30,34,40,.4)] before:content-[''] before:block before:absolute before:z-[1] before:w-full before:h-full before:left-0 before:top-0" data-image-src="{{ asset('assets/img/photos/bg3.webp') }}" style="background-image: url('{{ asset('assets/img/photos/bg3.webp') }}');">
|
|
<div class="card-body p-[2.25rem] xl:!p-[2.5rem]">
|
|
<div class="flex flex-wrap mx-[-15px] items-center counter-wrapper !mt-[-20px] !text-center">
|
|
<div class="w-6/12 xl:w-3/12 lg:w-3/12 flex-[0_0_auto] !px-[15px] max-w-full !mt-[20px]">
|
|
<h3 class="counter counter-lg !text-white xl:!text-[2.2rem] !text-[calc(1.345rem_+_1.14vw)] !tracking-[normal] !leading-none !mb-2" style="visibility: visible;">{{ t('neler-yapariz.stats.completed_projects_number') }}</h3>
|
|
<p class="!text-[0.8rem] font-medium !mb-0 !text-white">{{ t('neler-yapariz.stats.completed_projects') }}</p>
|
|
</div>
|
|
<!--/column -->
|
|
<div class="w-6/12 xl:w-3/12 lg:w-3/12 flex-[0_0_auto] !px-[15px] max-w-full !mt-[20px]">
|
|
<h3 class="counter counter-lg !text-white xl:!text-[2.2rem] !text-[calc(1.345rem_+_1.14vw)] !tracking-[normal] !leading-none !mb-2" style="visibility: visible;">{{ t('neler-yapariz.stats.satisfied_customers_number') }}</h3>
|
|
<p class="!text-[0.8rem] font-medium !mb-0 !text-white">{{ t('neler-yapariz.stats.satisfied_customers') }}</p>
|
|
</div>
|
|
<!--/column -->
|
|
<div class="w-6/12 xl:w-3/12 lg:w-3/12 flex-[0_0_auto] !px-[15px] max-w-full !mt-[20px]">
|
|
<h3 class="counter counter-lg !text-white xl:!text-[2.2rem] !text-[calc(1.345rem_+_1.14vw)] !tracking-[normal] !leading-none !mb-2" style="visibility: visible;">{{ t('neler-yapariz.stats.expert_employees_number') }}</h3>
|
|
<p class="!text-[0.8rem] font-medium !mb-0 !text-white">{{ t('neler-yapariz.stats.expert_employees') }}</p>
|
|
</div>
|
|
<!--/column -->
|
|
<div class="w-6/12 xl:w-3/12 lg:w-3/12 flex-[0_0_auto] !px-[15px] max-w-full !mt-[20px]">
|
|
<h3 class="counter counter-lg !text-white xl:!text-[2.2rem] !text-[calc(1.345rem_+_1.14vw)] !tracking-[normal] !leading-none !mb-2" style="visibility: visible;">{{ t('neler-yapariz.stats.awards_won_number') }}</h3>
|
|
<p class="!text-[0.8rem] font-medium !mb-0 !text-white">{{ t('neler-yapariz.stats.awards_won') }}</p>
|
|
</div>
|
|
<!--/column -->
|
|
</div>
|
|
<!--/.row -->
|
|
</div>
|
|
<!--/.card-body -->
|
|
</div>
|
|
<!--/.card -->
|
|
</div>
|
|
<!-- /column -->
|
|
</div>
|
|
<!-- /.row -->
|
|
</div>
|
|
<!-- /column -->
|
|
</div>
|
|
<!-- /.row -->
|
|
<div class="flex flex-wrap mx-[-15px] xl:mx-[-20px] lg:mx-[-20px] !mt-[25px] md:!mt-[4.5rem] lg:!mt-0 xl:!mt-0 !mb-20 items-center">
|
|
<div class="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] px-[20px] !mt-[40px] max-w-full xl:!order-2 lg:!order-2">
|
|
<div class="flex flex-wrap mx-[-15px] xl:mx-[-12.5px] lg:mx-[-12.5px] md:mx-[-12.5px] !mt-[-25px]">
|
|
<div class="xl:w-4/12 lg:w-4/12 md:w-4/12 w-full flex-[0_0_auto] !px-[15px] max-w-full xl:!ml-[16.66666667%] lg:!ml-[16.66666667%] md:!ml-[16.66666667%] !self-end !mt-[25px]">
|
|
<figure class="rounded-[0.4rem]"><img class="rounded-[0.4rem]" src="{{ asset('assets/img/photos/g1.webp') }}" alt="{{ t('neler-yapariz.gallery.image_1_alt') }}" loading="lazy"></figure>
|
|
</div>
|
|
<!--/column -->
|
|
<div class="xl:w-6/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] px-[12.5px] max-w-full !self-end !mt-[25px]">
|
|
<figure class="rounded-[0.4rem]"><img class="rounded-[0.4rem]" src="{{ asset('assets/img/photos/g2.webp') }}" alt="{{ t('neler-yapariz.gallery.image_2_alt') }}" loading="lazy"></figure>
|
|
</div>
|
|
<!--/column -->
|
|
<div class="xl:w-6/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] px-[12.5px] max-w-full xl:!ml-[8.33333333%] lg:!ml-[8.33333333%] md:!ml-[8.33333333%] !mt-[25px]">
|
|
<figure class="rounded-[0.4rem] overflow-hidden aspect-video bg-gray-100">
|
|
<img class="rounded-[0.4rem] object-cover w-full h-full"
|
|
src="{{ $content->cover ?? asset('assets/img/photos/g3.webp') }}"
|
|
alt="{{ t('neler-yapariz.gallery.image_3_alt') }}"
|
|
loading="lazy"
|
|
>
|
|
</figure>
|
|
</div>
|
|
<!--/column -->
|
|
<div class="xl:w-4/12 lg:w-4/12 md:w-4/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !self-start !mt-[25px]">
|
|
<figure class="rounded-[0.4rem]"><img class="rounded-[0.4rem]" src="{{ asset('assets/img/photos/g4.webp') }}" alt="{{ t('neler-yapariz.gallery.image_4_alt') }}" loading="lazy"></figure>
|
|
</div>
|
|
<!--/column -->
|
|
</div>
|
|
<!--/.row -->
|
|
</div>
|
|
<!--/column -->
|
|
<div class="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] xl:!px-[20px] lg:!px-[20px] !px-[15px] !mt-[40px] max-w-full">
|
|
<h2 class="!text-[0.8rem] uppercase !text-[#e31e24] !mb-3 !leading-[1.35] !tracking-[0.02rem]">{{ t('neler-yapariz.what_we_do.highlight') }}</h2>
|
|
<h3 class="xl:!text-[1.9rem] !text-[calc(1.315rem_+_0.78vw)] !leading-[1.25] font-semibold !mb-3">{{ t('neler-yapariz.what_we_do.title') }}</h3>
|
|
<p class="lead !mb-8 xxl:!pr-2 !text-[1.05rem] !leading-[1.6]">{{ t('neler-yapariz.what_we_do.description') }} </p>
|
|
<div class="flex flex-wrap mx-[-15px] xl:mx-[-25px] !mt-[-30px]">
|
|
<div class="md:w-6/12 lg:w-full xl:w-6/12 w-full flex-[0_0_auto] xl:!px-[25px] !px-[15px] max-w-full !mt-[30px]">
|
|
<div class="flex flex-row">
|
|
<div>
|
|
<div class="icon btn btn-circle btn-lg !bg-[rgba(227,30,36,0.1)] !text-[#e31e24] pointer-events-none !mr-5 xl:!text-[1.3rem] w-12 h-12 !text-[calc(1.255rem_+_0.06vw)] inline-flex items-center justify-center leading-none p-0 !rounded-[100%]"> <i class="!text-[calc(1.255rem_+_0.06vw)] before:content-['\ec50'] uil uil-phone-volume"></i> </div>
|
|
</div>
|
|
<div>
|
|
<h4 class="!mb-1">{{ t('neler-yapariz.services.support_24_7.title') }}</h4>
|
|
<p class="!mb-0">{{ t('neler-yapariz.services.support_24_7.description') }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!--/column -->
|
|
<div class="md:w-6/12 lg:w-full xl:w-6/12 w-full flex-[0_0_auto] xl:!px-[25px] !px-[15px] max-w-full !mt-[30px]">
|
|
<div class="flex flex-row">
|
|
<div>
|
|
<div class="icon btn btn-circle btn-lg !bg-[rgba(227,30,36,0.1)] !text-[#e31e24] pointer-events-none !mr-5 xl:!text-[1.3rem] w-12 h-12 !text-[calc(1.255rem_+_0.06vw)] inline-flex items-center justify-center leading-none p-0 !rounded-[100%]"> <i class="!text-[calc(1.255rem_+_0.06vw)] before:content-['\ecb3'] uil uil-shield-exclamation"></i> </div>
|
|
</div>
|
|
<div>
|
|
<h4 class="!mb-1">{{ t('neler-yapariz.services.secure_payments.title') }}</h4>
|
|
<p class="!mb-0">{{ t('neler-yapariz.services.secure_payments.description') }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!--/column -->
|
|
<div class="md:w-6/12 lg:w-full xl:w-6/12 w-full flex-[0_0_auto] xl:!px-[25px] !px-[15px] max-w-full !mt-[30px]">
|
|
<div class="flex flex-row">
|
|
<div>
|
|
<div class="icon btn btn-circle btn-lg !bg-[rgba(227,30,36,0.1)] !text-[#e31e24] pointer-events-none !mr-5 xl:!text-[1.3rem] w-12 h-12 !text-[calc(1.255rem_+_0.06vw)] inline-flex items-center justify-center leading-none p-0 !rounded-[100%]"> <i class="!text-[calc(1.255rem_+_0.06vw)] before:content-['\ebb2'] uil uil-laptop-cloud"></i> </div>
|
|
</div>
|
|
<div>
|
|
<h4 class="!mb-1">{{ t('neler-yapariz.services.daily_updates.title') }}</h4>
|
|
<p class="!mb-0">{{ t('neler-yapariz.services.daily_updates.description') }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!--/column -->
|
|
<div class="md:w-6/12 lg:w-full xl:w-6/12 w-full flex-[0_0_auto] xl:!px-[25px] !px-[15px] max-w-full !mt-[30px]">
|
|
<div class="flex flex-row">
|
|
<div>
|
|
<div class="icon btn btn-circle btn-lg !bg-[rgba(227,30,36,0.1)] !text-[#e31e24] pointer-events-none !mr-5 xl:!text-[1.3rem] w-12 h-12 !text-[calc(1.255rem_+_0.06vw)] inline-flex items-center justify-center leading-none p-0 !rounded-[100%]"> <i class="!text-[calc(1.255rem_+_0.06vw)] before:content-['\e9d3'] uil uil-chart-line"></i> </div>
|
|
</div>
|
|
<div>
|
|
<h4 class="!mb-1">{{ t('neler-yapariz.services.market_research.title') }}</h4>
|
|
<p class="!mb-0">{{ t('neler-yapariz.services.market_research.description') }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!--/column -->
|
|
</div>
|
|
<!--/.row -->
|
|
</div>
|
|
<!--/column -->
|
|
</div>
|
|
<!--/.row -->
|
|
<h2 class="!text-[0.8rem] uppercase !text-[#e31e24] !mb-3 !leading-[1.35] !tracking-[0.02rem]">{{ t('neler-yapariz.how_we_do_it.highlight') }}</h2>
|
|
<h3 class="xl:!text-[1.9rem] !text-[calc(1.315rem_+_0.78vw)] !leading-[1.25] font-semibold !mb-3">{{ t('neler-yapariz.how_we_do_it.title') }}</h3>
|
|
<p class="lead !mb-8 !text-[1.05rem] !leading-[1.6]">{{ t('neler-yapariz.how_we_do_it.description') }}</p>
|
|
<div class="flex flex-wrap mx-[-15px] xl:mx-[-35px] lg:mx-[-20px] !mt-[-30px] process-wrapper line">
|
|
<div class="md:w-6/12 lg:w-3/12 xl:w-3/12 w-full flex-[0_0_auto] !px-[15px] xl:!px-[35px] lg:!px-[20px] !mt-[30px] max-w-full !relative after:w-full after:absolute after:content-[''] after:h-px after:z-[1] after:border-t-[rgba(164,174,198,0.2)] after:border-t after:border-solid after:left-[3rem] after:top-6 after:bg-inherit max-lg:after:!hidden"> <span class="icon btn btn-circle btn-lg !bg-[rgba(227,30,36,0.1)] !text-[#e31e24] pointer-events-none !mb-4 !relative z-[2] xl:!text-[1.3rem] w-12 h-12 !text-[calc(1.255rem_+_0.06vw)] inline-flex items-center justify-center leading-none !p-0 !rounded-[100%]"><span class="number">01</span></span>
|
|
<h4 class="!mb-1">{{ t('neler-yapariz.process.step_1.title') }}</h4>
|
|
<p>{{ t('neler-yapariz.process.step_1.description') }}</p>
|
|
</div>
|
|
<!--/column -->
|
|
<div class="md:w-6/12 lg:w-3/12 xl:w-3/12 w-full flex-[0_0_auto] !px-[15px] xl:!px-[35px] lg:!px-[20px] !mt-[30px] max-w-full !relative after:w-full after:absolute after:content-[''] after:h-px after:z-[1] after:border-t-[rgba(164,174,198,0.2)] after:border-t after:border-solid after:left-[3rem] after:top-6 after:bg-inherit max-lg:after:!hidden"> <span class="icon btn btn-circle btn-lg !bg-[rgba(227,30,36,0.1)] !text-[#e31e24] pointer-events-none !mb-4 !relative z-[2] xl:!text-[1.3rem] w-12 h-12 !text-[calc(1.255rem_+_0.06vw)] inline-flex items-center justify-center leading-none !p-0 !rounded-[100%]"><span class="number">02</span></span>
|
|
<h4 class="!mb-1">{{ t('neler-yapariz.process.step_2.title') }}</h4>
|
|
<p>{{ t('neler-yapariz.process.step_2.description') }}</p>
|
|
</div>
|
|
<!--/column -->
|
|
<div class="md:w-6/12 lg:w-3/12 xl:w-3/12 w-full flex-[0_0_auto] !px-[15px] xl:!px-[35px] lg:!px-[20px] !mt-[30px] max-w-full !relative after:w-full after:absolute after:content-[''] after:h-px after:z-[1] after:border-t-[rgba(164,174,198,0.2)] after:border-t after:border-solid after:left-[3rem] after:top-6 after:bg-inherit max-lg:after:!hidden"> <span class="icon btn btn-circle btn-lg !bg-[rgba(227,30,36,0.1)] !text-[#e31e24] pointer-events-none !mb-4 !relative z-[2] xl:!text-[1.3rem] w-12 h-12 !text-[calc(1.255rem_+_0.06vw)] inline-flex items-center justify-center leading-none !p-0 !rounded-[100%]"><span class="number">03</span></span>
|
|
<h4 class="!mb-1">{{ t('neler-yapariz.process.step_3.title') }}</h4>
|
|
<p>{{ t('neler-yapariz.process.step_3.description') }}</p>
|
|
</div>
|
|
<!--/column -->
|
|
<div class="md:w-6/12 lg:w-3/12 xl:w-3/12 w-full flex-[0_0_auto] !px-[15px] xl:!px-[35px] lg:!px-[20px] !mt-[30px] max-w-full"> <span class="icon btn btn-circle btn-lg !bg-[rgba(227,30,36,0.1)] !text-[#e31e24] pointer-events-none !mb-4 !relative z-[2] xl:!text-[1.3rem] w-12 h-12 !text-[calc(1.255rem_+_0.06vw)] inline-flex items-center justify-center leading-none !p-0 !rounded-[100%]"><span class="number">04</span></span>
|
|
<h4 class="!mb-1">{{ t('neler-yapariz.process.step_4.title') }}</h4>
|
|
<p>{{ t('neler-yapariz.process.step_4.description') }}</p>
|
|
</div>
|
|
<!--/column -->
|
|
</div>
|
|
<!--/.row -->
|
|
</div>
|
|
<!-- /.container -->
|
|
</section> |