Implement GSAP Features in 'neler-yapariz-gsap' Template: Introduced a comprehensive set of GSAP animations and sections in the 'neler-yapariz-gsap' template, enhancing the visual dynamics of the page. This update includes new JavaScript and CSS files for various animations, such as flip, inertia, marquee, and scrolltrigger, along with a structured layout for improved user interaction. Additionally, localization support has been integrated for all text elements, ensuring a seamless experience for users across different languages.
This commit is contained in:
Ümit Tunç
@@ -0,0 +1,166 @@
|
||||
<section class="wrapper !bg-[#edf2fc]">
|
||||
<div class="container pt-10 pb-36 xl:pt-[4.5rem] lg:pt-[4.5rem] md:pt-[4.5rem] xl:pb-40 lg:pb-40 md:pb-40 !text-center">
|
||||
<div class="flex flex-wrap mx-[-15px]">
|
||||
<div class="md:w-8/12 lg:w-7/12 xl:w-6/12 xxl:w-5/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto !mb-12">
|
||||
<h1 class="!text-[calc(1.365rem_+_1.38vw)] font-bold !leading-[1.2] xl:!text-[2.4rem] !mb-3">{{ t('neler-yapariz.hero.title') }}</h1>
|
||||
<p class="lead !leading-[1.65] text-[0.9rem] font-medium lg:!px-7 xl:!px-7 xxl:!px-6">{{ t('neler-yapariz.hero.subtitle') }} <span class="relative z-[2] whitespace-nowrap after:content-[''] after:block after:absolute after:w-[102.5%] after:h-[30%] after:left-[-1.5%] after:z-[-1] after:transition-all after:duration-[0.2s] after:ease-in-out after:!mt-0 after:rounded-[5rem] after:bottom-[9%] motion-reduce:after:transition-none after:bg-[rgba(63,120,224,.12)]">{{ t('neler-yapariz.hero.highlight') }}</span> {{ t('neler-yapariz.hero.subtitle_end') }}</p>
|
||||
</div>
|
||||
<!-- /column -->
|
||||
</div>
|
||||
<!-- /.row -->
|
||||
</div>
|
||||
<!-- /.container -->
|
||||
</section>
|
||||
<section class="wrapper !bg-[#ffffff] angled upper-end !relative border-0 before:top-[-4rem] before:border-l-transparent before:border-r-[100vw] before:border-t-[4rem] before:border-[#fefefe] before:content-[''] before:block before:absolute before:z-0 before:!border-y-transparent before:border-0 before:border-solid before:right-0 after:top-[-4rem] after:border-l-transparent after:border-r-[100vw] after:border-t-[4rem] after:border-[#fefefe] after:content-[''] after:block after:absolute after:z-0 after:!border-y-transparent after:border-0 after:border-solid after:right-0">
|
||||
<div class="container !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 !mt-[-10rem]">
|
||||
<figure class="rounded-[0.4rem]"><img class="rounded-[0.4rem]" src="{{ asset('html/assets/img/photos/about5.jpg') }}" 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('html/assets/img/photos/bg3.jpg') }}" style="background-image: url('{{ asset('html/assets/img/photos/bg3.jpg') }}');">
|
||||
<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;">7518</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;">3472</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;">2184</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;">4523</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('html/assets/img/photos/g1.jpg') }}" alt="{{ t('neler-yapariz.gallery.image_1_alt') }}"></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('html/assets/img/photos/g2.jpg') }}" alt="{{ t('neler-yapariz.gallery.image_2_alt') }}"></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]"><img class="rounded-[0.4rem]" src="{{ asset('html/assets/img/photos/g3.jpg') }}" alt="{{ t('neler-yapariz.gallery.image_3_alt') }}"></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('html/assets/img/photos/g4.jpg') }}" alt="{{ t('neler-yapariz.gallery.image_4_alt') }}"></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-[calc(1.305rem_+_0.66vw)] font-bold xl:!text-[1.8rem] !leading-[1.3] !mb-3">{{ t('neler-yapariz.what_we_do.title') }}</h2>
|
||||
<p class="lead !mb-8 xxl:!pr-2 !text-[1.05rem] !leading-[1.6]">{{ t('neler-yapariz.what_we_do.description') }} <span class="relative z-[2] whitespace-nowrap after:content-[''] after:block after:absolute after:w-[102.5%] after:h-[30%] after:left-[-1.5%] after:z-[-1] after:transition-all after:duration-[0.2s] after:ease-in-out after:!mt-0 after:rounded-[5rem] after:bottom-[9%] motion-reduce:after:transition-none after:bg-[rgba(63,120,224,.12)]">{{ t('neler-yapariz.what_we_do.highlight') }}</span> {{ t('neler-yapariz.what_we_do.description_end') }}</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 btn-soft-primary 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 btn-soft-primary 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 btn-soft-primary 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 btn-soft-primary 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-[calc(1.305rem_+_0.66vw)] font-bold xl:!text-[1.8rem] !leading-[1.3] !mb-3">{{ t('neler-yapariz.how_we_do_it.title') }}</h2>
|
||||
<p class="lead !mb-8 !text-[1.05rem] !leading-[1.6]">{{ t('neler-yapariz.how_we_do_it.description') }} <span class="relative z-[2] whitespace-nowrap after:content-[''] after:block after:absolute after:w-[102.5%] after:h-[30%] after:left-[-1.5%] after:z-[-1] after:transition-all after:duration-[0.2s] after:ease-in-out after:!mt-0 after:rounded-[5rem] after:bottom-[9%] motion-reduce:after:transition-none after:bg-[rgba(63,120,224,.12)]">{{ t('neler-yapariz.how_we_do_it.highlight') }}</span> {{ t('neler-yapariz.how_we_do_it.description_end') }}</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 btn-soft-primary 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 btn-primary !text-white !bg-[#3f78e0] border-[#3f78e0] hover:text-white hover:bg-[#3f78e0] hover:!border-[#3f78e0] active:text-white active:bg-[#3f78e0] active:border-[#3f78e0] disabled:text-white disabled:bg-[#3f78e0] disabled:border-[#3f78e0] 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 btn-soft-primary 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 btn-soft-primary 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>
|
||||
Reference in New Issue
Block a user