{{ template "headersMenu.html" . }}



<!-- Start Section-->
<section class="relative py-16 md:py-24">
	<div class="container">
		<div class="grid md:grid-cols-12 grid-cols-1 items-center gap-[30px]">
			<div class="lg:col-span-5 md:col-span-6">
				<div class="grid grid-cols-12 gap-6 items-center">
					<div class="col-span-6">
						<div class="grid grid-cols-1 gap-6">
							<img src="/cdn/gui/assets/images/about/ab03.jpg" class="rounded-md shadow" alt="">
							<img src="/cdn/gui/assets/images/about/ab02.jpg" class="rounded-md shadow" alt="">
						</div>
					</div>

					<div class="col-span-6">
						<div class="grid grid-cols-1 gap-6">
							<img src="/cdn/gui/assets/images/about/ab01.jpg" class="rounded-md shadow" alt="">
						</div>
					</div>
				</div>
			</div>

			<div class="lg:col-span-7 md:col-span-6">
				<div class="ltr:lg:ml-5 rtl:lg:mr-5">
					<div class="flex mb-4">
						<span class="mb-0 text-2xl font-bold text-indigo-600"><span class="text-6xl font-bold counter-value" data-target="10">1</span>+</span>
						<span class="self-end font-medium ltr:ml-2 rtl:mr-2">{{ "ANS" | t }} <br> {{ "d'expérience" | t }}</span>
					</div>

					<h3 class="mb-6 text-2xl font-semibold leading-normal md:text-3xl md:leading-normal">Who we are ?</h3>

					

					<p class="max-w-xl text-slate-400">Start working with Tailwind CSS that can provide everything you need to generate awareness, drive traffic, connect. Dummy text is text that is used in the publishing industry or by web designers to occupy the space which will later be filled with 'real' content.</p>
				
					<div class="mt-6">
						<a href="contact-one" class="mt-2 text-white bg-indigo-600 rounded-md border-indigo-600 btn hover:bg-indigo-700 hover:border-indigo-700 ltr:mr-2 rtl:ml-2"><i class="uil uil-envelope"></i> Contact us</a>
					</div>
				</div>
			</div>
		</div><!--end grid-->
	</div><!--end container-->
</section>

<!-- Start -->
<section class="relative py-16 bg-gray-50 md:py-24 dark:bg-slate-800">
	<div class="container">
		<div class="grid grid-cols-1 pb-8 text-center">
			<h3 class="mb-6 text-2xl font-semibold leading-normal md:text-3xl md:leading-normal">Key Features</h3>

			<p class="mx-auto max-w-xl text-slate-400">Start working with Tailwind CSS that can provide everything you need to generate awareness, drive traffic, connect.</p>
		</div><!--end grid-->


    
		<div class="container pb-10 mt-8">

			<div class="grid lg:grid-cols-3 md:grid-cols-2 grid-cols-1 gap-[30px]">
				<div class="flex">
					<div class="flex align-middle justify-center items-center min-w-[56px] h-[56px] bg-indigo-600/5 border-2 border-indigo-600/20 text-indigo-600 rounded-lg text-xl shadow-sm dark:shadow-gray-800">
						<i class="fa fa-id-card"></i>
					</div>
	
					<div class="content ltr:ml-6 rtl:mr-6">
						<a href="/about/mine" class="text-lg font-medium hover:text-indigo-600">{{ "100% à vous" | t }}</a>
						<p class="mt-3 text-slate-400">{{ "Votre CARD vit sur votre domaine personnel ou sur card.pm. Pas de pub, pas de tracking. Vos données vous appartiennent." | t }}</p>
					</div>
				</div>
				<div class="flex">
					<div class="flex align-middle justify-center items-center min-w-[56px] h-[56px] bg-indigo-600/5 border-2 border-indigo-600/20 text-indigo-600 rounded-lg text-xl shadow-sm dark:shadow-gray-800">
						<i class="fa fa-refresh"></i>
					</div>
	
					<div class="content ltr:ml-6 rtl:mr-6">
						<a href="/about/features" class="text-lg font-medium hover:text-indigo-600">{{ "Évolutive" | t }}</a>
						<p class="mt-3 text-slate-400">{{ "Mettez-la à jour à tout moment, connectez vos contenus, vos services, vos liens importants. Elle suit votre évolution." | t }}</p>
					</div>
				</div>
				<div class="flex">
					<div class="flex align-middle justify-center items-center min-w-[56px] h-[56px] bg-indigo-600/5 border-2 border-indigo-600/20 text-indigo-600 rounded-lg text-xl shadow-sm dark:shadow-gray-800">
						<i class="fa-solid fa-trowel-bricks"></i>
					</div>
	
					<div class="content ltr:ml-6 rtl:mr-6">
						<a href="/about/teams" class="text-lg font-medium hover:text-indigo-600">{{ "Gestion d'équipes" | t }}</a>
						<p class="mt-3 text-slate-400">{{ "De multiples options pour nous adapter aux organisations de toute taille, de la TPE / PME aux réseaux d'enseignes." | t }}</p>
					</div>
				</div>
				<div class="flex">
					<div class="flex align-middle justify-center items-center min-w-[56px] h-[56px] bg-indigo-600/5 border-2 border-indigo-600/20 text-indigo-600 rounded-lg text-xl shadow-sm dark:shadow-gray-800">
						<i class="fa fa-lock"></i>
					</div>
	
					<div class="content ltr:ml-6 rtl:mr-6">
						<a href="/about/security" class="text-lg font-medium hover:text-indigo-600">{{ "Serveurs sécurisés" | t }}</a>
						<p class="mt-3 text-slate-400">{{ "Nous opérons notre propre infrastructure au sein d'OVH" | t }}</p>
					</div>
				</div>
				<div class="flex">
					<div class="flex align-middle justify-center items-center min-w-[56px] h-[56px] bg-indigo-600/5 border-2 border-indigo-600/20 text-indigo-600 rounded-lg text-xl shadow-sm dark:shadow-gray-800">
						<i class="fa fa-mask"></i>
					</div>
	
					<div class="content ltr:ml-6 rtl:mr-6">
						<a href="/about/privacy" class="text-lg font-medium hover:text-indigo-600">{{ "Confidentialité garantie" | t }}</a>
						<p class="mt-3 text-slate-400">{{ "Vos données restent les vôtres du début à la fin du processus" | t }}</p>
					</div>
				</div>
				<div class="flex">
					<div class="flex align-middle justify-center items-center min-w-[56px] h-[56px] bg-indigo-600/5 border-2 border-indigo-600/20 text-indigo-600 rounded-lg text-xl shadow-sm dark:shadow-gray-800">
						<i class="fa-solid fa-trowel-bricks"></i>
					</div>
	
					<div class="content ltr:ml-6 rtl:mr-6">
						<a href="/about/rights" class="text-lg font-medium hover:text-indigo-600">{{ "Personnalisation granulaire" | t }}</a>
						<p class="mt-3 text-slate-400">{{ "En équipe, définissez simplement qui modifie quoi." | t }}</p>
					</div>
				</div>
			</div>
		</div>

		<div class="grid lg:grid-cols-3 md:grid-cols-2 grid-cols-1 gap-[30px] mt-8">
			<div class="flex items-center p-3 bg-white rounded-md shadow transition-all duration-500 ease-in-out hover:scale-105 dark:shadow-gray-800 hover:shadow-md dark:hover:shadow-gray-700 dark:bg-slate-900">
				<div class="flex items-center justify-center h-[45px] min-w-[45px] -rotate-45 bg-gradient-to-r from-transparent to-indigo-600/10 text-indigo-600 text-center rounded-full ltr:mr-3 rtl:ml-3">
					<i data-feather="monitor" class="w-5 h-5 rotate-45"></i>
				</div>
				<div class="flex-1">
					<h4 class="mb-0 text-lg font-medium">Fully Responsive</h4>
				</div>
			</div>
			
			<div class="flex items-center p-3 bg-white rounded-md shadow transition-all duration-500 ease-in-out hover:scale-105 dark:shadow-gray-800 hover:shadow-md dark:hover:shadow-gray-700 dark:bg-slate-900">
				<div class="flex items-center justify-center h-[45px] min-w-[45px] -rotate-45 bg-gradient-to-r from-transparent to-indigo-600/10 text-indigo-600 text-center rounded-full ltr:mr-3 rtl:ml-3">
					<i data-feather="heart" class="w-5 h-5 rotate-45"></i>
				</div>
				<div class="flex-1">
					<h4 class="mb-0 text-lg font-medium">Browser Compatibility</h4>
				</div>
			</div>
			
			<div class="flex items-center p-3 bg-white rounded-md shadow transition-all duration-500 ease-in-out hover:scale-105 dark:shadow-gray-800 hover:shadow-md dark:hover:shadow-gray-700 dark:bg-slate-900">
				<div class="flex items-center justify-center h-[45px] min-w-[45px] -rotate-45 bg-gradient-to-r from-transparent to-indigo-600/10 text-indigo-600 text-center rounded-full ltr:mr-3 rtl:ml-3">
					<i data-feather="eye" class="w-5 h-5 rotate-45"></i>
				</div>
				<div class="flex-1">
					<h4 class="mb-0 text-lg font-medium">Retina Ready</h4>
				</div>
			</div>
			
			<div class="flex items-center p-3 bg-white rounded-md shadow transition-all duration-500 ease-in-out hover:scale-105 dark:shadow-gray-800 hover:shadow-md dark:hover:shadow-gray-700 dark:bg-slate-900">
				<div class="flex items-center justify-center h-[45px] min-w-[45px] -rotate-45 bg-gradient-to-r from-transparent to-indigo-600/10 text-indigo-600 text-center rounded-full ltr:mr-3 rtl:ml-3">
					<i data-feather="layout" class="w-5 h-5 rotate-45"></i>
				</div>
				<div class="flex-1">
					<h4 class="mb-0 text-lg font-medium">Based On Tailwindcss 3</h4>
				</div>
			</div>
			
			<div class="flex items-center p-3 bg-white rounded-md shadow transition-all duration-500 ease-in-out hover:scale-105 dark:shadow-gray-800 hover:shadow-md dark:hover:shadow-gray-700 dark:bg-slate-900">
				<div class="flex items-center justify-center h-[45px] min-w-[45px] -rotate-45 bg-gradient-to-r from-transparent to-indigo-600/10 text-indigo-600 text-center rounded-full ltr:mr-3 rtl:ml-3">
					<i data-feather="feather" class="w-5 h-5 rotate-45"></i>
				</div>
				<div class="flex-1">
					<h4 class="mb-0 text-lg font-medium">Feather Icons</h4>
				</div>
			</div>
			
			<div class="flex items-center p-3 bg-white rounded-md shadow transition-all duration-500 ease-in-out hover:scale-105 dark:shadow-gray-800 hover:shadow-md dark:hover:shadow-gray-700 dark:bg-slate-900">
				<div class="flex items-center justify-center h-[45px] min-w-[45px] -rotate-45 bg-gradient-to-r from-transparent to-indigo-600/10 text-indigo-600 text-center rounded-full ltr:mr-3 rtl:ml-3">
					<i data-feather="code" class="w-5 h-5 rotate-45"></i>
				</div>
				<div class="flex-1">
					<h4 class="mb-0 text-lg font-medium">Built With SASS</h4>
				</div>
			</div>
			
			<div class="flex items-center p-3 bg-white rounded-md shadow transition-all duration-500 ease-in-out hover:scale-105 dark:shadow-gray-800 hover:shadow-md dark:hover:shadow-gray-700 dark:bg-slate-900">
				<div class="flex items-center justify-center h-[45px] min-w-[45px] -rotate-45 bg-gradient-to-r from-transparent to-indigo-600/10 text-indigo-600 text-center rounded-full ltr:mr-3 rtl:ml-3">
					<i data-feather="user-check" class="w-5 h-5 rotate-45"></i>
				</div>
				<div class="flex-1">
					<h4 class="mb-0 text-lg font-medium">W3c Valid Code</h4>
				</div>
			</div>
			
			<div class="flex items-center p-3 bg-white rounded-md shadow transition-all duration-500 ease-in-out hover:scale-105 dark:shadow-gray-800 hover:shadow-md dark:hover:shadow-gray-700 dark:bg-slate-900">
				<div class="flex items-center justify-center h-[45px] min-w-[45px] -rotate-45 bg-gradient-to-r from-transparent to-indigo-600/10 text-indigo-600 text-center rounded-full ltr:mr-3 rtl:ml-3">
					<i data-feather="globe" class="w-5 h-5 rotate-45"></i>
				</div>
				<div class="flex-1">
					<h4 class="mb-0 text-lg font-medium">Browsers Compatible</h4>
				</div>
			</div>
			
			<div class="flex items-center p-3 bg-white rounded-md shadow transition-all duration-500 ease-in-out hover:scale-105 dark:shadow-gray-800 hover:shadow-md dark:hover:shadow-gray-700 dark:bg-slate-900">
				<div class="flex items-center justify-center h-[45px] min-w-[45px] -rotate-45 bg-gradient-to-r from-transparent to-indigo-600/10 text-indigo-600 text-center rounded-full ltr:mr-3 rtl:ml-3">
					<i data-feather="settings" class="w-5 h-5 rotate-45"></i>
				</div>
				<div class="flex-1">
					<h4 class="mb-0 text-lg font-medium">Easy to customize</h4>
				</div>
			</div>
		</div><!--end grid-->

		<div class="grid grid-cols-1 justify-center">
			<div class="mt-6 text-center">
				<a href="page-services" class="mt-2 text-white bg-indigo-600 rounded-md border-indigo-600 btn hover:bg-indigo-700 hover:border-indigo-700 ltr:mr-2 rtl:ml-2">See More <i class="uil uil-arrow-right"></i></a>
			</div>
		</div>
	</div><!--end contanier-->
</section><!--end section-->
<!-- End -->

<!-- Start -->
<section class="relative py-16 pt-0 bg-gray-50 md:py-24 dark:bg-slate-800 md:pt-0">
	<div class="container">
		<div class="grid grid-cols-1 justify-center">
			<div class="relative z-1">
				<div class="grid grid-cols-1 justify-center text-center lg:grid-cols-12 ltr:md:text-left rtl:md:text-right">
					<div class="lg:col-start-2 lg:col-span-10">
						<div class="relative">
							<img src="/cdn/gui/assets/images/cta-bg.jpg" class="rounded-md shadow-lg" alt="">
							<div class="absolute right-0 left-0 bottom-2/4 text-center translate-y-2/4">
								<a href="#!" data-type="youtube" data-id="fLYiYc_jo_s"
									class="inline-flex justify-center items-center w-20 h-20 text-indigo-600 bg-white rounded-full shadow-lg lightbox dark:shadow-gray-800 dark:bg-slate-900 dark:text-white">
									<i class="inline-flex justify-center items-center text-2xl mdi mdi-play"></i>
								</a>
							</div>
						</div>
					</div>
				</div>
				<div class="content md:mt-8">
					<div class="grid grid-cols-1 justify-center text-center lg:grid-cols-12 ltr:md:text-left rtl:md:text-right">
						<div class="lg:col-start-2 lg:col-span-10">
							<div class="grid grid-cols-1 items-center md:grid-cols-2">
								<div class="mt-8">
									<div class="section-title text-md-start">
										<h6 class="text-lg font-semibold text-white/50">Team</h6>
										<h3 class="mt-2 text-2xl font-semibold leading-normal text-white md:text-3xl md:leading-normal">Meet Experience <br> Team Member</h3>
									</div>
								</div>

								<div class="mt-8">
									<div class="section-title text-md-start">
										<p class="mx-auto mb-2 max-w-xl text-white/50">Start working with Techwind that can provide everything you need to generate awareness, drive traffic, connect.</p>
										<a href="" class="text-white">Read More <i class="align-middle uil uil-angle-right-b"></i></a>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div><!--end row -->
	</div><!--end container-->
	
	<div class="absolute right-0 bottom-0 left-0 h-4/5 bg-gradient-to-b from-indigo-500 to-indigo-600 sm:h-2/3"></div>
</section><!--end section-->
<!-- End -->

<!-- Start -->
<section class="relative py-16 pb-0 bg-gray-50 md:py-24 dark:bg-slate-800 md:pb-0">
	<div class="container">
		<div class="grid grid-cols-1 pb-8 text-center">
			<h3 class="mb-6 text-2xl font-semibold leading-normal md:text-3xl md:leading-normal">Our Professional Team</h3>

			<p class="mx-auto max-w-xl text-slate-400">Start working with Tailwind CSS that can provide everything you need to generate awareness, drive traffic, connect.</p>
		</div><!--end grid-->

		<div class="grid md:grid-cols-12 grid-cols-1 mt-8 gap-[30px]">
			<div class="lg:col-span-3 md:col-span-6">
				<div class="p-6 bg-white rounded-md border border-gray-100 team dark:border-gray-700 group dark:bg-slate-900">
					<img src="/cdn/gui/assets/images/client/01.jpg" class="w-24 h-24 rounded-full shadow-md dark:shadow-gray-800" alt="">

					<div class="mt-4 content">
						<a href="" class="block text-lg font-medium hover:text-indigo-600">Ronny Jofra</a>
						<span class="block text-slate-400">C.E.O.</span>

						<p class="mt-4 text-slate-400">If the distribution of letters and 'words' is random</p>

						<ul class="mt-4 list-none">
							<li class="inline"><a href="" class="rounded-md border border-gray-100 btn btn-icon btn-sm dark:border-gray-800 hover:border-indigo-600 dark:hover:border-indigo-600 hover:bg-indigo-600 hover:text-white"><i data-feather="facebook" class="w-4 h-4"></i></a></li>
							<li class="inline"><a href="" class="rounded-md border border-gray-100 btn btn-icon btn-sm dark:border-gray-800 hover:border-indigo-600 dark:hover:border-indigo-600 hover:bg-indigo-600 hover:text-white"><i data-feather="instagram" class="w-4 h-4"></i></a></li>
							<li class="inline"><a href="" class="rounded-md border border-gray-100 btn btn-icon btn-sm dark:border-gray-800 hover:border-indigo-600 dark:hover:border-indigo-600 hover:bg-indigo-600 hover:text-white"><i data-feather="twitter" class="w-4 h-4"></i></a></li>
							<li class="inline"><a href="" class="rounded-md border border-gray-100 btn btn-icon btn-sm dark:border-gray-800 hover:border-indigo-600 dark:hover:border-indigo-600 hover:bg-indigo-600 hover:text-white"><i data-feather="linkedin" class="w-4 h-4"></i></a></li>
						</ul><!--end icon-->
					</div>
				</div>
			</div>
			
			<div class="lg:col-span-3 md:col-span-6">
				<div class="p-6 bg-white rounded-md border border-gray-100 team dark:border-gray-700 group dark:bg-slate-900">
					<img src="/cdn/gui/assets/images/client/02.jpg" class="w-24 h-24 rounded-full shadow-md dark:shadow-gray-800" alt="">

					<div class="mt-4 content">
						<a href="" class="block text-lg font-medium hover:text-indigo-600">Aliana Rosy</a>
						<span class="block text-slate-400">HR</span>

						<p class="mt-4 text-slate-400">If the distribution of letters and 'words' is random</p>

						<ul class="mt-4 list-none">
							<li class="inline"><a href="" class="rounded-md border border-gray-100 btn btn-icon btn-sm dark:border-gray-800 hover:border-indigo-600 dark:hover:border-indigo-600 hover:bg-indigo-600 hover:text-white"><i data-feather="facebook" class="w-4 h-4"></i></a></li>
							<li class="inline"><a href="" class="rounded-md border border-gray-100 btn btn-icon btn-sm dark:border-gray-800 hover:border-indigo-600 dark:hover:border-indigo-600 hover:bg-indigo-600 hover:text-white"><i data-feather="instagram" class="w-4 h-4"></i></a></li>
							<li class="inline"><a href="" class="rounded-md border border-gray-100 btn btn-icon btn-sm dark:border-gray-800 hover:border-indigo-600 dark:hover:border-indigo-600 hover:bg-indigo-600 hover:text-white"><i data-feather="twitter" class="w-4 h-4"></i></a></li>
							<li class="inline"><a href="" class="rounded-md border border-gray-100 btn btn-icon btn-sm dark:border-gray-800 hover:border-indigo-600 dark:hover:border-indigo-600 hover:bg-indigo-600 hover:text-white"><i data-feather="linkedin" class="w-4 h-4"></i></a></li>
						</ul><!--end icon-->
					</div>
				</div>
			</div>
			
			<div class="lg:col-span-3 md:col-span-6">
				<div class="p-6 bg-white rounded-md border border-gray-100 team dark:border-gray-700 group dark:bg-slate-900">
					<img src="/cdn/gui/assets/images/client/03.jpg" class="w-24 h-24 rounded-full shadow-md dark:shadow-gray-800" alt="">

					<div class="mt-4 content">
						<a href="" class="block text-lg font-medium hover:text-indigo-600">Sofia Razaq</a>
						<span class="block text-slate-400">C.O.O.</span>

						<p class="mt-4 text-slate-400">If the distribution of letters and 'words' is random</p>

						<ul class="mt-4 list-none">
							<li class="inline"><a href="" class="rounded-md border border-gray-100 btn btn-icon btn-sm dark:border-gray-800 hover:border-indigo-600 dark:hover:border-indigo-600 hover:bg-indigo-600 hover:text-white"><i data-feather="facebook" class="w-4 h-4"></i></a></li>
							<li class="inline"><a href="" class="rounded-md border border-gray-100 btn btn-icon btn-sm dark:border-gray-800 hover:border-indigo-600 dark:hover:border-indigo-600 hover:bg-indigo-600 hover:text-white"><i data-feather="instagram" class="w-4 h-4"></i></a></li>
							<li class="inline"><a href="" class="rounded-md border border-gray-100 btn btn-icon btn-sm dark:border-gray-800 hover:border-indigo-600 dark:hover:border-indigo-600 hover:bg-indigo-600 hover:text-white"><i data-feather="twitter" class="w-4 h-4"></i></a></li>
							<li class="inline"><a href="" class="rounded-md border border-gray-100 btn btn-icon btn-sm dark:border-gray-800 hover:border-indigo-600 dark:hover:border-indigo-600 hover:bg-indigo-600 hover:text-white"><i data-feather="linkedin" class="w-4 h-4"></i></a></li>
						</ul><!--end icon-->
					</div>
				</div>
			</div>
			
			<div class="lg:col-span-3 md:col-span-6">
				<div class="p-6 bg-white rounded-md border border-gray-100 team dark:border-gray-700 group dark:bg-slate-900">
					<img src="/cdn/gui/assets/images/client/04.jpg" class="w-24 h-24 rounded-full shadow-md dark:shadow-gray-800" alt="">

					<div class="mt-4 content">
						<a href="" class="block text-lg font-medium hover:text-indigo-600">Micheal Carlo</a>
						<span class="block text-slate-400">Director</span>

						<p class="mt-4 text-slate-400">If the distribution of letters and 'words' is random</p>

						<ul class="mt-4 list-none">
							<li class="inline"><a href="" class="rounded-md border border-gray-100 btn btn-icon btn-sm dark:border-gray-800 hover:border-indigo-600 dark:hover:border-indigo-600 hover:bg-indigo-600 hover:text-white"><i data-feather="facebook" class="w-4 h-4"></i></a></li>
							<li class="inline"><a href="" class="rounded-md border border-gray-100 btn btn-icon btn-sm dark:border-gray-800 hover:border-indigo-600 dark:hover:border-indigo-600 hover:bg-indigo-600 hover:text-white"><i data-feather="instagram" class="w-4 h-4"></i></a></li>
							<li class="inline"><a href="" class="rounded-md border border-gray-100 btn btn-icon btn-sm dark:border-gray-800 hover:border-indigo-600 dark:hover:border-indigo-600 hover:bg-indigo-600 hover:text-white"><i data-feather="twitter" class="w-4 h-4"></i></a></li>
							<li class="inline"><a href="" class="rounded-md border border-gray-100 btn btn-icon btn-sm dark:border-gray-800 hover:border-indigo-600 dark:hover:border-indigo-600 hover:bg-indigo-600 hover:text-white"><i data-feather="linkedin" class="w-4 h-4"></i></a></li>
						</ul><!--end icon-->
					</div>
				</div>
			</div>
		</div><!--end grid-->
	</div><!--end container-->

	<div class="container mt-16 md:mt-24">
		<div class="grid grid-cols-1 items-center md:grid-cols-12">
			<div class="order-2 lg:col-span-5 md:col-span-6 md:order-1">
				<div class="relative overflow-hidden after:content-[''] after:absolute after:h-40 after:w-40 after:bg-red-600/5 after:top-5 ltr:after:left-0 rtl:after:right-0 ltr:after:right-0 rtl:after:left-0 after:mx-auto after:-z-0 after:rounded-3xl after:animate-[spin_10s_linear_infinite]">
					<img src="/cdn/gui/assets/images/hero2.png" class="relative z-1" alt="">
				</div>
			</div>

			<div class="order-1 lg:col-span-7 md:col-span-6 md:order-2">
				<div class="tiny-single-item">
					<div class="text-center tiny-slide">
						<img src="/cdn/gui/assets/images/client/amazon.svg" class="mx-auto h-6" alt="">
						<p class="mt-6 text-slate-400">" If the distribution of letters and 'words' is random, the reader will not be distracted from making a neutral judgement on the visual impact and readability of the typefaces (typography), or the distribution of text on the page consists of a more or less random series of words or syllables. "</p>
						<h6 class="mt-3 font-semibold text-indigo-600">- Thomas Israel</h6>
					</div>

					<div class="text-center tiny-slide">
						<img src="/cdn/gui/assets/images/client/google.svg" class="mx-auto h-6" alt="">
						<p class="mt-6 text-slate-400">" If the distribution of letters and 'words' is random, the reader will not be distracted from making a neutral judgement on the visual impact and readability of the typefaces (typography), or the distribution of text on the page consists of a more or less random series of words or syllables. "</p>
						<h6 class="mt-3 font-semibold text-indigo-600">- Carl Oliver</h6>
					</div>

					<div class="text-center tiny-slide">
						<img src="/cdn/gui/assets/images/client/lenovo.svg" class="mx-auto h-6" alt="">
						<p class="mt-6 text-slate-400">" If the distribution of letters and 'words' is random, the reader will not be distracted from making a neutral judgement on the visual impact and readability of the typefaces (typography), or the distribution of text on the page consists of a more or less random series of words or syllables. "</p>
						<h6 class="mt-3 font-semibold text-indigo-600">- Barbara McIntosh</h6>
					</div>

					<div class="text-center tiny-slide">
						<img src="/cdn/gui/assets/images/client/paypal.svg" class="mx-auto h-6" alt="">
						<p class="mt-6 text-slate-400">" If the distribution of letters and 'words' is random, the reader will not be distracted from making a neutral judgement on the visual impact and readability of the typefaces (typography), or the distribution of text on the page consists of a more or less random series of words or syllables. "</p>
						<h6 class="mt-3 font-semibold text-indigo-600">- Jill Webb</h6>
					</div>

					<div class="text-center tiny-slide">
						<img src="/cdn/gui/assets/images/client/shopify.svg" class="mx-auto h-6" alt="">
						<p class="mt-6 text-slate-400">" If the distribution of letters and 'words' is random, the reader will not be distracted from making a neutral judgement on the visual impact and readability of the typefaces (typography), or the distribution of text on the page consists of a more or less random series of words or syllables. "</p>
						<h6 class="mt-3 font-semibold text-indigo-600">- Dean Tolle</h6>
					</div>

					<div class="text-center tiny-slide">
						<img src="/cdn/gui/assets/images/client/spotify.svg" class="mx-auto h-6" alt="">
						<p class="mt-6 text-slate-400">" If the distribution of letters and 'words' is random, the reader will not be distracted from making a neutral judgement on the visual impact and readability of the typefaces (typography), or the distribution of text on the page consists of a more or less random series of words or syllables. "</p>
						<h6 class="mt-3 font-semibold text-indigo-600">- Christa Smith</h6>
					</div>
				</div>
			</div>
		</div>
	</div><!--end container-->
</section><!--end section-->
<!-- End -->

<!-- Footer Start -->
<footer class="relative text-gray-200 footer bg-dark-footer dark:text-gray-200">    
	<div class="container">
		<div class="grid grid-cols-12">
			<div class="col-span-12">
				<div class="py-[60px] px-0">
					<div class="grid md:grid-cols-12 grid-cols-1 gap-[30px]">
						<div class="lg:col-span-4 md:col-span-12">
							<a href="#" class="text-[22px] focus:outline-none">
								<img src="/assets/design/logos/{{ .domain }}-white.png" alt="">
							</a>
							<p class="mt-6 text-gray-300">Start working with Tailwind CSS that can provide everything you need to generate awareness, drive traffic, connect.</p>
							<ul class="mt-6 list-none">
								<li class="inline"><a href="https://1.envato.market/techwind" target="_blank" class="rounded-md border border-gray-800 btn btn-icon btn-sm hover:border-indigo-600 dark:hover:border-indigo-600 hover:bg-indigo-600 dark:hover:bg-indigo-600"><i class="align-middle uil uil-shopping-cart" title="Buy Now"></i></a></li>
								<li class="inline"><a href="https://dribbble.com/shreethemes" target="_blank" class="rounded-md border border-gray-800 btn btn-icon btn-sm hover:border-indigo-600 dark:hover:border-indigo-600 hover:bg-indigo-600 dark:hover:bg-indigo-600"><i class="align-middle uil uil-dribbble" title="dribbble"></i></a></li>
								<li class="inline"><a href="https://www.behance.net/shreethemes" target="_blank" class="rounded-md border border-gray-800 btn btn-icon btn-sm hover:border-indigo-600 dark:hover:border-indigo-600 hover:bg-indigo-600 dark:hover:bg-indigo-600"><i class="uil uil-behance" title="Behance"></i></a></li>
								<li class="inline"><a href="http://linkedin.com/company/shreethemes" target="_blank" class="rounded-md border border-gray-800 btn btn-icon btn-sm hover:border-indigo-600 dark:hover:border-indigo-600 hover:bg-indigo-600 dark:hover:bg-indigo-600"><i class="uil uil-linkedin" title="Linkedin"></i></a></li>
								<li class="inline"><a href="https://www.facebook.com/shreethemes" target="_blank" class="rounded-md border border-gray-800 btn btn-icon btn-sm hover:border-indigo-600 dark:hover:border-indigo-600 hover:bg-indigo-600 dark:hover:bg-indigo-600"><i class="align-middle uil uil-facebook-f" title="facebook"></i></a></li>
								<li class="inline"><a href="https://www.instagram.com/shreethemes/" target="_blank" class="rounded-md border border-gray-800 btn btn-icon btn-sm hover:border-indigo-600 dark:hover:border-indigo-600 hover:bg-indigo-600 dark:hover:bg-indigo-600"><i class="align-middle uil uil-instagram" title="instagram"></i></a></li>
								<li class="inline"><a href="https://twitter.com/shreethemes" target="_blank" class="rounded-md border border-gray-800 btn btn-icon btn-sm hover:border-indigo-600 dark:hover:border-indigo-600 hover:bg-indigo-600 dark:hover:bg-indigo-600"><i class="align-middle uil uil-twitter" title="twitter"></i></a></li>
								<li class="inline"><a href="mailto:support@datamix.io" class="rounded-md border border-gray-800 btn btn-icon btn-sm hover:border-indigo-600 dark:hover:border-indigo-600 hover:bg-indigo-600 dark:hover:bg-indigo-600"><i class="align-middle uil uil-envelope" title="email"></i></a></li>
								<li class="inline"><a href="https://forms.gle/QkTueCikDGqJnbky9" target="_blank" class="rounded-md border border-gray-800 btn btn-icon btn-sm hover:border-indigo-600 dark:hover:border-indigo-600 hover:bg-indigo-600 dark:hover:bg-indigo-600"><i class="align-middle uil uil-file" title="customization"></i></a></li>
							</ul><!--end icon-->
						</div><!--end col-->
				
						<div class="lg:col-span-2 md:col-span-4">
							<h5 class="tracking-[1px] text-gray-100 font-semibold">Company</h5>
							<ul class="mt-6 list-none footer-list">
								<li><a href="page-aboutus" class="text-gray-300 duration-500 ease-in-out hover:text-gray-400"><i class="uil uil-angle-right-b"></i> About us</a></li>
								<li class="mt-[10px]"><a href="page-services" class="text-gray-300 duration-500 ease-in-out hover:text-gray-400"><i class="uil uil-angle-right-b"></i> Services</a></li>
								<li class="mt-[10px]"><a href="page-team" class="text-gray-300 duration-500 ease-in-out hover:text-gray-400"><i class="uil uil-angle-right-b"></i> Team</a></li>
								<li class="mt-[10px]"><a href="page-pricing" class="text-gray-300 duration-500 ease-in-out hover:text-gray-400"><i class="uil uil-angle-right-b"></i> Pricing</a></li>
								<li class="mt-[10px]"><a href="portfolio-creative-four" class="text-gray-300 duration-500 ease-in-out hover:text-gray-400"><i class="uil uil-angle-right-b"></i> Project</a></li>
								<li class="mt-[10px]"><a href="blog" class="text-gray-300 duration-500 ease-in-out hover:text-gray-400"><i class="uil uil-angle-right-b"></i> Blog</a></li>
								<li class="mt-[10px]"><a href="auth-login" class="text-gray-300 duration-500 ease-in-out hover:text-gray-400"><i class="uil uil-angle-right-b"></i> Login</a></li>
							</ul>
						</div><!--end col-->
				
						<div class="lg:col-span-3 md:col-span-4">
							<h5 class="tracking-[1px] text-gray-100 font-semibold">Usefull Links</h5>
							<ul class="mt-6 list-none footer-list">
								<li><a href="page-terms" class="text-gray-300 duration-500 ease-in-out hover:text-gray-400"><i class="uil uil-angle-right-b"></i> Terms of Services</a></li>
								<li class="mt-[10px]"><a href="page-privacy" class="text-gray-300 duration-500 ease-in-out hover:text-gray-400"><i class="uil uil-angle-right-b"></i> Privacy Policy</a></li>
								<li class="mt-[10px]"><a href="documentation" class="text-gray-300 duration-500 ease-in-out hover:text-gray-400"><i class="uil uil-angle-right-b"></i> Documentation</a></li>
								<li class="mt-[10px]"><a href="changelog" class="text-gray-300 duration-500 ease-in-out hover:text-gray-400"><i class="uil uil-angle-right-b"></i> Changelog</a></li>
								<li class="mt-[10px]"><a href="widget" class="text-gray-300 duration-500 ease-in-out hover:text-gray-400"><i class="uil uil-angle-right-b"></i> Widget</a></li>
							</ul>
						</div><!--end col-->

						<div class="lg:col-span-3 md:col-span-4">
							<h5 class="tracking-[1px] text-gray-100 font-semibold">Newsletter</h5>
							<p class="mt-6">Sign up and receive the latest tips via email.</p>
							<form>
								<div class="grid grid-cols-1">
									<div class="my-3 foot-subscribe">
										<label class="form-label">Write your email <span class="text-red-600">*</span></label>
										<div class="relative mt-2 form-icon">
											<i data-feather="mail" class="absolute top-3 w-4 h-4 ltr:left-4 rtl:right-4"></i>
											<input type="email" class="text-gray-100 bg-gray-800 border border-gray-800 form-input ltr:pl-12 rtl:pr-12 focus:shadow-none" placeholder="Email" name="email" required="">
										</div>
									</div>
								
									<button type="submit" id="submitsubscribe" name="send" class="text-white bg-indigo-600 rounded-md border-indigo-600 btn hover:bg-indigo-700 hover:border-indigo-700">Subscribe</button>
								</div>
							</form>
						</div><!--end col-->
					</div><!--end grid-->
				</div><!--end col-->
			</div>
		</div><!--end grid-->
	</div><!--end container-->

	<div class="py-[30px] px-0 border-t border-slate-800">
		<div class="container text-center">
			<div class="grid items-center md:grid-cols-2">
				<div class="text-center ltr:md:text-left rtl:md:text-right">
					<p class="mb-0">© <script>document.write(new Date().getFullYear())</script> Techwind. Design with <i class="text-red-600 mdi mdi-heart"></i> by <a href="https://datamix.io/" target="_blank" class="text-reset">DATAMIX.IO</a>.</p>
				</div>

				<ul class="mt-6 list-none text-center ltr:md:text-right rtl:md:text-left md:mt-0">
					<li class="inline"><a href=""><img src="/cdn/gui/assets/images/payments/american-ex.png" class="inline max-h-6" title="American Express" alt=""></a></li>
					<li class="inline"><a href=""><img src="/cdn/gui/assets/images/payments/discover.png" class="inline max-h-6" title="Discover" alt=""></a></li>
					<li class="inline"><a href=""><img src="/cdn/gui/assets/images/payments/master-card.png" class="inline max-h-6" title="Master Card" alt=""></a></li>
					<li class="inline"><a href=""><img src="/cdn/gui/assets/images/payments/paypal.png" class="inline max-h-6" title="Paypal" alt=""></a></li>
					<li class="inline"><a href=""><img src="/cdn/gui/assets/images/payments/visa.png" class="inline max-h-6" title="Visa" alt=""></a></li>
				</ul>
			</div><!--end grid-->
		</div><!--end container-->
	</div>
</footer><!--end footer-->
<!-- Footer End -->


{{ template "footer.html" . }}