Files
OluAmeyeMain/app/Views/service_section.php
T
CHIEFSOFT\ameye b4ff239aab hide sewctions
2024-10-04 18:55:37 -04:00

254 lines
21 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.
<!-- Start Services -->
<section class="lqd-section services bg-white rounded-10 mb-90">
<div class="container">
<div class="row">
<div class="col col-12 text-start" data-custom-animations="true" data-ca-options='{"animationTarget": ".animation-element", "ease": "back.out", "direction": "backward", "initValues": {"x": "-100px", "opacity" : 0} , "animations": {"x": "0px", "opacity" : 1}}'>
<div class="w-full flex flex-wrap justify-between items-center pt-35">
<div class="ld-fancy-heading relative lg:w-50percent sm:w-full module-title animation-element">
<h2 class="ld-fh-element text-28 m-0 inline-block relative">Services</h2>
</div>
<div class="flex items-center justify-end lg:w-50percent sm:w-full sm:justify-start module-btn">
<div class="ld-fancy-heading relative mr-10 py-5 px-15 mb-0 border-2 border-black rounded-100 animation-element">
<h5 class="ld-fh-element inline-block relative text-14 uppercase tracking-1 m-0">Our services</h5>
</div>
<a href="#" class="text-14 font-bold uppercase text-black rounded-100 btn btn-solid btn-custom-size btn-icon-block btn-icon-top w-30 h-30 bg-accent border-none p-0" target="_blank" rel="nofollow">
<span class="btn-icon w-1em">
<svg xmlns="http://www.w3.org/2000/svg" width="10.625" height="10.625" viewBox="0 0 10.625 10.625">
<path d="M-1.76-11.322H5.313V-4.25H3.885V-8.932L-4.316-.7l-1-1,8.2-8.234H-1.76Z" transform="translate(5.313 11.322)"></path>
</svg>
</span>
</a>
</div>
<div class="divider w-full max-w-full mt-10 py-15">
<span class="w-full border-bottom border-black-50"></span>
</div>
</div>
</div>
<div class="col col-12 pt-55 pb-70 px-10 module-col" data-custom-animations="true" data-ca-options='{"animationTarget": ".animation-element", "ease": "back.out", "direction": "backward", "initValues": {"y": "100px", "opacity" : 0} , "animations": {"y": "0px", "opacity" : 1}}'>
<div class="accordion accordion-title-underlined accordion-sm animation-element" id="accordion-services" role="tablist" aria-multiselectable="true">
<div class="accordion-item panel active">
<div class="accordion-heading" role="tab" id="heading-item-one">
<h4 class="accordion-title font-normal">
<a class="collapsed" role="button" data-bs-toggle="collapse" href="#collapse-item-one" aria-expanded="true" aria-controls="collapse-item-one">
<span class="accordion-title-txt">Make your <b>eCommerce business stand out.</b></span>
<span class="accordion-expander text-24 w-60 h-60 flex items-center justify-center p-0 border-2 rounded-full border-lightgray flex-shrink-0">
<i class="lqd-icn-ess icon-ion-ios-add"></i>
<i class="lqd-icn-ess icon-ion-ios-remove"></i>
</span>
</a>
</h4>
</div>
<div id="collapse-item-one" class="accordion-collapse collapse show" data-bs-parent="#accordion-services" role="tabpanel" aria-labelledby="heading-item-one">
<div class="accordion-content py-1em">
<div class="flex flex-wrap items-end">
<div class="w-40percent flex flex-wrap align-content-end items-end gap-0 pr-150 sm:w-full module-content">
<div class="lqd-counter relative lqd-counter-default -mb-20 text-black w-auto">
<div class="lqd-counter-element relative font-medium mb-0" data-enable-counter="true" data-counter-options='{"targetNumber": "6"}'>
<span class="block">6</span>
</div>
</div>
<div class="ld-fancy-heading relative">
<span class="ld-fh-element inline-block relative text-16 leading-20 mb-2em italic text-gray-500 xl:m-0">Years of<br>experience</span>
</div>
<div class="ld-fancy-heading relative mt-10">
<p class="ld-fh-element mb-0/5em inline-block relative">We craft premium digital work for web, mobile and experiential with creative agencies and global brands alike putting passion, pride and plenty of elbow grease into everything we do.</p>
</div>
</div>
<div class="w-60percent sm:w-full sm:order-first">
<div class="lqd-imggrp-single block relative">
<div class="lqd-imggrp-img-container inline-flex relative items-center justify-center">
<figure class="w-full relative">
<img width="1038" height="614" src="./assets/images/demo/asymmetric-9/services/acc-img-1.jpg" alt="services">
</figure>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="accordion-item panel">
<div class="accordion-heading" role="tab" id="heading-item-two">
<h4 class="accordion-title font-normal">
<a class="collapsed" role="button" data-bs-toggle="collapse" href="#collapse-item-two" aria-expanded="false" aria-controls="collapse-item-two">
<span class="accordion-title-txt">Increase your <b>conversion rate best-in-class experience strategy.</b></span>
<span class="accordion-expander text-24 w-60 h-60 flex items-center justify-center p-0 border-2 rounded-full border-lightgray flex-shrink-0">
<i class="lqd-icn-ess icon-ion-ios-add"></i>
<i class="lqd-icn-ess icon-ion-ios-remove"></i>
</span>
</a>
</h4>
</div>
<div id="collapse-item-two" class="accordion-collapse collapse" data-bs-parent="#accordion-services" role="tabpanel" aria-labelledby="heading-item-two">
<div class="accordion-content py-1em">
<div class="flex flex-wrap items-end">
<div class="w-40percent flex flex-wrap align-content-end items-end gap-0 pr-150 sm:w-full module-content">
<div class="lqd-counter relative lqd-counter-default -mb-20 text-black w-auto">
<div class="lqd-counter-element relative font-medium mb-0" data-enable-counter="true" data-counter-options='{"targetNumber": "6"}'>
<span class="block">6</span>
</div>
</div>
<div class="ld-fancy-heading relative">
<span class="ld-fh-element inline-block relative text-16 leading-20 mb-2em italic text-gray-500 xl:m-0">Years of<br>experience</span>
</div>
<div class="ld-fancy-heading relative mt-10">
<p class="ld-fh-element mb-0/5em inline-block relative">We craft premium digital work for web, mobile and experiential with creative agencies and global brands alike putting passion, pride and plenty of elbow grease into everything we do.</p>
</div>
</div>
<div class="w-60percent sm:w-full sm:order-first">
<div class="lqd-imggrp-single block relative">
<div class="lqd-imggrp-img-container inline-flex relative items-center justify-center">
<figure class="w-full relative">
<img width="1038" height="614" src="./assets/images/demo/asymmetric-9/services/acc-img-1.jpg" alt="services">
</figure>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="accordion-item panel">
<div class="accordion-heading" role="tab" id="heading-item-three">
<h4 class="accordion-title font-normal">
<a class="collapsed" role="button" data-bs-toggle="collapse" href="#collapse-item-three" aria-expanded="false" aria-controls="collapse-item-three">
<span class="accordion-title-txt">Learn how to <b>laser focus and target your audience.</b></span>
<span class="accordion-expander text-24 w-60 h-60 flex items-center justify-center p-0 border-2 rounded-full border-lightgray flex-shrink-0">
<i class="lqd-icn-ess icon-ion-ios-add"></i>
<i class="lqd-icn-ess icon-ion-ios-remove"></i>
</span>
</a>
</h4>
</div>
<div id="collapse-item-three" class="accordion-collapse collapse" data-bs-parent="#accordion-services" role="tabpanel" aria-labelledby="heading-item-three">
<div class="accordion-content py-1em">
<div class="flex flex-wrap items-end">
<div class="w-40percent flex flex-wrap align-content-end items-end gap-0 pr-150 sm:w-full module-content">
<div class="lqd-counter relative lqd-counter-default -mb-20 text-black w-auto">
<div class="lqd-counter-element relative font-medium mb-0" data-enable-counter="true" data-counter-options='{"targetNumber": "6"}'>
<span class="block">6</span>
</div>
</div>
<div class="ld-fancy-heading relative">
<span class="ld-fh-element inline-block relative text-16 leading-20 mb-2em italic text-gray-500 xl:m-0">Years of<br>experience</span>
</div>
<div class="ld-fancy-heading relative mt-10">
<p class="ld-fh-element mb-0/5em inline-block relative">We craft premium digital work for web, mobile and experiential with creative agencies and global brands alike putting passion, pride and plenty of elbow grease into everything we do.</p>
</div>
</div>
<div class="w-60percent sm:w-full sm:order-first">
<div class="lqd-imggrp-single block relative">
<div class="lqd-imggrp-img-container inline-flex relative items-center justify-center">
<figure class="w-full relative">
<img width="1038" height="614" src="./assets/images/demo/asymmetric-9/services/acc-img-1.jpg" alt="services">
</figure>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- End Services -->
<!-- Start Section Flow -->
<section class="lqd-section section-flow bg-white rounded-10 mb-90">
<div class="container-fluid">
<div class="row">
<div class="col col-12">
<div class="lqd-section-flow items-start flex-wrap" data-lqd-section-flow="true">
<div class="lqd-section-flow-panel lqd-section-flow-panel-start col-lg-6 h-vh-100 px-0 sticky top-0 left-0 overflow-hidden">
<div class="lqd-section-flow-panel-start-inner">
<div class="lqd-section-flow-item lqd-overlay flex overflow-hidden">
<div class="lqd-section-flow-item-inner h-vh-100">
<img class="h-full objfit-cover objpos-center" src="./assets/images/demo/asymmetric-9/section-flow/acc-img-1.jpg" title="section-flow-1" alt="section-flow-1">
</div>
</div>
<div class="lqd-section-flow-item lqd-overlay flex overflow-hidden">
<div class="lqd-section-flow-item-inner h-vh-100">
<img class="h-full objfit-cover objpos-center" src="./assets/images/demo/asymmetric-9/section-flow/Img.jpg" title="Img" alt="Img">
</div>
</div>
<div class="lqd-section-flow-item lqd-overlay flex overflow-hidden">
<div class="lqd-section-flow-item-inner h-vh-100">
<img class="h-full objfit-cover objpos-center" src="./assets/images/demo/asymmetric-9/section-flow/Img-1.jpg" title="Img-1" alt="Img-1">
</div>
</div>
</div>
</div>
<div class="lqd-section-flow-panel lqd-section-flow-panel-end col-lg-6">
<div class="lqd-section-flow-item flex items-center">
<div class="lqd-section-flow-item-inner">
<div class="lqd-section-flow-content-mobile mb-30">
<img src="./assets/images/demo/asymmetric-9/section-flow/acc-img-1.jpg" title="section-flow-1" alt="section-flow-1">
</div>
<div class="flex flex-wrap py-20percent">
<div class="ld-fancy-heading relative py-5 px-15 leading-1 bg-gray rounded-4 mb-15">
<h6 class="ld-fh-element inline-block relative text-10 font-bold uppercase tracking-1 m-0">7. Creative</h6>
</div>
<div class="ld-fancy-heading relative">
<h2 class="ld-fh-element inline-block relative text-42 leading-0/9em mb-0/75em">We create world-class digital products materials that communicate clearly.</h2>
</div>
<a href="./page-asymmetric-agency-case-studies.html" class="btn btn-naked btn-icon-left btn-icon-circle btn-icon-custom-size btn-icon-bordered capitalize tracking-0 font-bold leading-1em text-14 text-black hover:inner-text-white hover:inner-bg-black">
<span class="btn-txt" data-text="Explore Details">Explore Details</span>
<span class="btn-icon w-55 h-55 border-1 border-black-10 text-black-40 mr-15 inner-bg-black inner-text-white text-1/5em">
<i aria-hidden="true" class="lqd-icn-ess icon-ion-ios-add"></i>
</span>
</a>
</div>
</div>
</div>
<div class="lqd-section-flow-item flex items-center">
<div class="lqd-section-flow-item-inner">
<div class="lqd-section-flow-content-mobile mb-30">
<img src="./assets/images/demo/asymmetric-9/section-flow/Img.jpg" title="Img" alt="Img">
</div>
<div class="flex flex-wrap py-20percent">
<div class="ld-fancy-heading relative py-5 px-15 leading-1 bg-gray rounded-4 mb-15">
<h6 class="ld-fh-element inline-block relative text-10 font-bold uppercase tracking-1 m-0">3. Agencies</h6>
</div>
<div class="ld-fancy-heading relative">
<h2 class="ld-fh-element inline-block relative text-42 leading-0/9em mb-0/75em">We craft premium designs for agencies and global brands around the globe.</h2>
</div>
<a href="./page-asymmetric-agency-case-studies.html" class="btn btn-naked btn-icon-left btn-icon-circle btn-icon-custom-size btn-icon-bordered capitalize tracking-0 font-bold leading-1em text-14 text-black hover:inner-text-white hover:inner-bg-black">
<span class="btn-txt" data-text="Explore Details">Explore Details</span>
<span class="btn-icon w-55 h-55 border-1 border-black-10 text-black-40 mr-15 inner-bg-black inner-text-white text-1/5em">
<i aria-hidden="true" class="lqd-icn-ess icon-ion-ios-add"></i>
</span>
</a>
</div>
</div>
</div>
<div class="lqd-section-flow-item flex items-center">
<div class="lqd-section-flow-item-inner">
<div class="lqd-section-flow-content-mobile mb-30">
<img src="./assets/images/demo/asymmetric-9/section-flow/Img-1.jpg" title="Img-1" alt="Img-1">
</div>
<div class="flex flex-wrap py-20percent">
<div class="ld-fancy-heading relative py-5 px-15 leading-1 bg-gray rounded-4 mb-15">
<h6 class="ld-fh-element inline-block relative text-10 font-bold uppercase tracking-1 m-0">2. Brands</h6>
</div>
<div class="ld-fancy-heading relative">
<h2 class="ld-fh-element inline-block relative text-42 leading-0/9em mb-0/75em">We create world-class digital products materials that communicate clearly.</h2>
</div>
<a href="./page-asymmetric-agency-case-studies.html" class="btn btn-naked btn-icon-left btn-icon-circle btn-icon-custom-size btn-icon-bordered capitalize tracking-0 font-bold leading-1em text-14 text-black hover:inner-text-white hover:inner-bg-black">
<span class="btn-txt" data-text="Explore Details">Explore Details</span>
<span class="btn-icon w-55 h-55 border-1 border-black-10 text-black-40 mr-15 inner-bg-black inner-text-white text-1/5em">
<i aria-hidden="true" class="lqd-icn-ess icon-ion-ios-add"></i>
</span>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- End Section Flow -->