import React from 'react';

import './App.css';

import AboutSection from './components/AboutSection'
import BannerSection from './components/BannerSection';
import HeaderSection from './components/HeaderSection';
import Footer from './components/Footer';
import Testimonials from './components/Testimonials';
import Faq from './components/Faq';
import Services from './components/Services';
import InsurancePackages from './components/InsurancePackages';
import ContactUs from './components/ContactUs';
import InsuranceTabs from './components/InsuranceTabs';
import TrustedCompanies from './components/TrustedCompanies';
import GlobalClients from './components/GlobalClients';
import UnderBanner from './components/UnderBanner';
import Coverage from './components/Coverage';
import CookiesAuthorization from './components/CookiesAuthorization';

function App() {
  return (
  <div className="lqd-preloader-activated lqd-preloader-style-spinner-classical" data-localscroll-offset="70" data-mobile-nav-breakpoint="1199" data-mobile-nav-style="modern" data-mobile-nav-scheme="dark" data-mobile-nav-trigger-alignment="right" data-mobile-header-scheme="gray" data-mobile-logo-alignment="default">

		<div className="lqd-preloader-wrap lqd-preloader-spinner-classsical opacity-0 hidden" data-preloader-options='{"animationType": "fade"}'>
			<div className="lqd-preloader-inner">
				<div className="lqd-preloader-spc-el"></div>
			</div>
		</div>

		<div id="wrap">

			<div className="lqd-sticky-placeholder hidden"></div>
			<HeaderSection />

			<main className="content" id="lqd-site-content">
				<div id="lqd-contents-wrap">

					{/* Start Banner */}
					<BannerSection />
					{/* End Banner */}

					{/* Start Under Banner */}
					<UnderBanner />
					{/* End Under Banner */}

					{/* Start About */}
          <AboutSection />
					{/* End About */}

					{/* Start Trusted Companies */}
					<TrustedCompanies />
				  {/* End Companies */}

					{/* Start Insurance Table */}
					<InsurancePackages />
					{/* End Insurance Table */}

					{/* Start Counter GLOBAL CLIENT*/}
					<GlobalClients />
					{/* End Counter GLOBAL CLIENT*/}

					{/* Start Services */}
					<Services />
					{/* End Services */}

					{/* Start Text Image Naked */}
					<Coverage />
					{/* End Text Image Naked */}

					{/* Start Tab Items */}
					<InsuranceTabs />
					{/* End Tab Items */}

					{/* Start Testimonials */}
          <Testimonials />
					{/* End Testimonials */}

					{/* Start Help */}
					<Faq />
					{/* End Help */}

					{/* Start Contact */}
					<ContactUs />
			  	{/* End Contact */}

				</div>
			</main>

			<Footer />
		</div>

		{/* GDPR ACCEPT COOKIES POPOUT */}
    <CookiesAuthorization />
		{/* GDPR ACCEPT COOKIES POPOUT */}

		{/* Contact Modal */}
		<div id="contact-modal" className="lity-modal lqd-modal lity-hide" data-modal-type="fullscreen">
			<div className="lqd-modal-inner">
				<div className="lqd-modal-head">
				</div>
				<section className="lqd-section lqd-modal-content flex flex-wrap items-center h-vh-100 link-black bg-center bg-cover bg-norepeat py-80" style={{backgroundImage: "url(./assets/images/common/modal-bg.jpeg)"}}>
					<div className="container">
						<div className="row items-center">
							<div className="col col-12 col-md-6">
								<div className="pr-10percent pb-30 md:pr-0">
									<div className="ld-fancy-heading">
										<h2 className="ld-fh-element text-122 mb-0/5em leading-0/8em font-medium text-black">Send a <span>message.</span></h2>
									</div>
									<div className="ld-fancy-heading">
										<p className="ld-fh-element mb-2/5em">We're here to answer any question you may have.</p>
									</div>
								</div>
							</div>
							<div className="col col-12 col-md-6">
								<div className="lqd-contact-form lqd-contact-form-inputs-underlined lqd-contact-form-button-lg lqd-contact-form-button-block flex flex-col flex-grow-1 justify-center -mb-130 py-45 px-65 md:p-0 sm:m-0">
									<div role="form">
										<div className="screen-reader-response">
											<p role="status" aria-live="polite" aria-atomic="true"></p>
										</div>
										<form action="./assets/php/mailer.php" method="post" className="lqd-cf-form" noValidate="novalidate" data-status="init">
											<p className="relative mb-0">
												<span className="lqd-form-control-wrap mb-15" data-name="text">
													<input type="text" name="name" defaultValue="" size="40" className="lqd-cf-form-control border-black-20 text-13 text-black" aria-required="true" aria-invalid="false" placeholder="Your name" />
												</span>
												<span className="lqd-form-control-wrap mb-15" data-name="email">
													<input type="email" name="email" defaultValue="" size="40" className="lqd-cf-form-control border-black-20 text-13 text-black" aria-required="true" aria-invalid="false" placeholder="Your Email Address" />
												</span>
												<span className="lqd-form-control-wrap mb-15" data-name="textarea">
													<textarea name="message" cols="10" rows="4" className="lqd-cf-form-control border-black-20 text-13 text-black" aria-required="true" aria-invalid="false" placeholder="Your message"></textarea>
												</span>
												<input type="submit" defaultValue="Send email" className="lqd-cf-form-control has-spinner bg-primary border-none text-white text-17 font-medium leading-1/5em" />
											</p>
										</form>
										<div className="lqd-cf-response-output"></div>
									</div>
								</div>
							</div>
							<div className="col col-6 col-md-3">
								<div className="flex flex-col">
									<div className="ld-fancy-heading relative">
										<h6 className="ld-fh-element inline-block relative mb-1/25em text-13 font-bold uppercase tracking-0/1em text-black">careers</h6>
									</div>
									<div className="ld-fancy-heading relative">
										<p className="ld-fh-element inline-block relative mb-0/75em text-16 leading-1/2em text-black">Would you like to join our growing team?</p>
									</div>
									<div className="ld-fancy-heading relative">
										<p className="ld-fh-element mb-0/5em inline-block relative text-16 font-bold leading-1/2em text-black">careers@kintcare.com</p>
									</div>
								</div>
							</div>
							<div className="col col-6 col-md-3">
								<div className="flex flex-col pl-15 md:pl-0">
									<div className="ld-fancy-heading relative">
										<h6 className="ld-fh-element inline-block relative mb-1/25em text-13 font-bold uppercase tracking-0/1em text-black">Feedbacks</h6>
									</div>
									<div className="ld-fancy-heading relative">
										<p className="d-fh-element inline-block relative mb-0/75em text-16 leading-1/2em text-black ">Have a project in mind? Send a message.</p>
									</div>
									<div className="ld-fancy-heading relative">
										<p className="ld-fh-element mb-0/5em inline-block relative text-16 font-bold leading-1/2em text-black">info@kintcare.com</p>
									</div>
								</div>
							</div>
						</div>
					</div>
				</section>
				<div className="lqd-modal-foot"></div>
			</div>
		</div>
		{/* Contact Modal */}



		{/*<script src="./assets/vendors/jquery.min.js"></script>
		<script src="./assets/vendors/jquery-ui/jquery-ui.min.js"></script>
		<script src="./assets/vendors/bootstrap/js/bootstrap.min.js"></script>
		<script src="./assets/vendors/fastdom/fastdom.min.js"></script>
		<script src="./assets/vendors/fresco/js/fresco.js"></script>
		<script src="./assets/vendors/lity/lity.min.js"></script>
		<script src="./assets/vendors/gsap/minified/gsap.min.js"></script>
		<script src="./assets/vendors/gsap/utils/CustomEase.min.js"></script>
		<script src="./assets/vendors/gsap/minified/DrawSVGPlugin.min.js"></script>
		<script src="./assets/vendors/gsap/minified/ScrollTrigger.min.js"></script>
		<script src="./assets/vendors/draw-shape/liquidDrawShape.min.js"></script>
		<script src="./assets/vendors/animated-blob/liquidAnimatedBlob.min.js"></script>
		<script src="./assets/vendors/fontfaceobserver.js"></script>
		<script src="./assets/vendors/tinycolor-min.js"></script>
		<script src="./assets/vendors/gsap/utils/SplitText.min.js"></script>
		<script src="./assets/vendors/particles.min.js"></script>
		<script src="./assets/vendors/flickity/flickity.pkgd.min.js"></script>
		<script src="./assets/vendors/flickity/flickity-fade.min.js"></script>
		<script src="./assets/vendors/isotope/isotope.pkgd.min.js"></script>
		<script src="./assets/vendors/isotope/packery-mode.pkgd.min.js"></script>
		<script src="./assets/js/liquid-gdpr.min.js"></script>
		<script src="./assets/js/theme.min.js"></script>
  <script src="./assets/js/liquid-ajax-contact-form.min.js"></script>*/}

		{/* Start custom cursor */}
		<div className="lqd-cc lqd-cc--inner fixed pointer-events-none"></div>
		<div className="lqd-cc--el lqd-cc-solid lqd-cc-explore flex items-center justify-center rounded-full fixed pointer-events-none">
			<div className="lqd-cc-solid-bg flex absolute lqd-overlay"></div>
			<div className="lqd-cc-solid-txt flex justify-center text-center relative">
				<div className="lqd-cc-solid-txt-inner">Explide</div>
			</div>
		</div>
		<div className="lqd-cc--el lqd-cc-solid lqd-cc-drag flex items-center justify-center rounded-full fixed pointer-events-none">
			<div className="lqd-cc-solid-bg flex absolute lqd-overlay"></div>
			<div className="lqd-cc-solid-ext lqd-cc-solid-ext-left inline-flex items-center">
				<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32" style={{width: '1em', height: '1em'}}>
					<path fill="currentColor" d="M19.943 6.07L9.837 14.73a1.486 1.486 0 0 0 0 2.25l10.106 8.661c.96.826 2.457.145 2.447-1.125V7.195c0-1.27-1.487-1.951-2.447-1.125z"></path>
				</svg>
			</div>
			<div className="lqd-cc-solid-txt flex justify-center text-center relative">
				<div className="lqd-cc-solid-txt-inner">Drag</div>
			</div>
			<div className="lqd-cc-solid-ext lqd-cc-solid-ext-right inline-flex items-center">
				<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32" style={{width: '1em', height: '1em'}}>
					<path fill="currentColor" d="M11.768 25.641l10.106-8.66a1.486 1.486 0 0 0 0-2.25L11.768 6.07c-.96-.826-2.457-.145-2.447 1.125v17.321c0 1.27 1.487 1.951 2.447 1.125z"></path>
				</svg>
			</div>
		</div>
		<div className="lqd-cc--el lqd-cc-arrow inline-flex items-center fixed top-0 left-0 pointer-events-none">
			<svg width="80" height="80" viewBox="0 0 80 80" fill="none" xmlns="http://www.w3.org/2000/svg">
				<path d="M60.4993 0V4.77005H8.87285L80 75.9207L75.7886 79.1419L4.98796 8.35478V60.4993H0V0H60.4993Z" />
			</svg>
		</div>
		<div className="lqd-cc--el lqd-cc-custom-icon rounded-full fixed pointer-events-none">
			<div className="lqd-cc-ci inline-flex items-center justify-center rounded-full relative">
				<svg width="32" height="32" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" style={{width: '1em', height: '1em'}}>
					<path fill="currentColor" fillRule="evenodd" clipRule="evenodd" d="M16.03 6a1 1 0 0 1 1 1v8.02h8.02a1 1 0 1 1 0 2.01h-8.02v8.02a1 1 0 1 1-2.01 0v-8.02h-8.02a1 1 0 1 1 0-2.01h8.02v-8.01a1 1 0 0 1 1.01-1.01z"></path>
				</svg>
			</div>
		</div>
		<div className="lqd-cc lqd-cc--outer fixed top-0 left-0 pointer-events-none"></div>
		{/* End custom cursor */}

		<template id="lqd-temp-snickersbar">
			<div className="lqd-snickersbar flex flex-wrap lqd-snickersbar-in" data-item-id>
				<div className="lqd-snickersbar-inner flex flex-wrap items-center">
					<div className="lqd-snickersbar-detail">
						<p className="hidden lqd-snickersbar-addding-temp my-0">Adding {/*itemName?itemName:''*/} to cart</p>
						<p className="hidden lqd-snickersbar-added-temp my-0">Added {/*itemName?itemName:''*/} to cart</p>
						<p className="my-0 lqd-snickersbar-msg flex items-center my-0"></p>
						<p className="my-0 lqd-snickersbar-msg-done flex items-center my-0"></p>
					</div>
					<div className="lqd-snickersbar-ext ml-4"></div>
				</div>
			</div>
		</template>
		<template id="lqd-temp-sticky-header-sentinel">
			<div className="lqd-sticky-sentinel invisible absolute pointer-events-none"></div>
		</template>
		<div className="lity" role="dialog" aria-label="Dialog Window (Press escape to close)" tabIndex="-1" data-modal-type="default" style={{display: 'none'}}>
			<div className="lity-backdrop"></div>
			<div className="lity-wrap" data-lity-close role="document">
				<div className="lity-loader" aria-hidden="true">Loading...</div>
				<div className="lity-container">
					<div className="lity-content"></div>
				</div>
				<button className="lity-close" type="button" aria-label="Close (Press escape to close)" data-lity-close>&times;</button>
			</div>
		</div>
	</div>
  );
}

export default App;