<!DOCTYPE html>
<html>
<head>
<title> Home </title>
<meta charset="UTF-8">
<meta name="keywords" content="HTML, CSS, JavaScript">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<%- include('./parcials/cssLinks') %>
</head>
<body>
<%- include('./parcials/header') %>
<main>
<section class="home-banner" style="background-image: none;">
<div class="bg-shapes">
<figure>
<img src="<%= baseUrl %>images/banner-top-left.png" alt="">
</figure>
<figure>
<img src="<%= baseUrl %>images/banner-shape-lefft.png" alt="">
</figure>
<figure>
<img src="<%= baseUrl %>images/banner-shape-rgt.png" alt="">
</figure>
</div>
<div class="floating-shapes">
<span data-parallax='{"x": -180, "y": -20, "rotateZ":500}'>
<img src="<%= baseUrl %>images/floating-dot.png" alt="">
</span>
<span data-parallax='{"x": 150, "y": -20, "rotateX":2000}'>
<img src="<%= baseUrl %>images/floating-dot2.png" alt="">
</span>
<span data-parallax='{"x": -20, "y": -100, "rotateZ":500,"rotateX":2000}'>
<img src="<%= baseUrl %>images/floating-dot3.png" alt="">
</span>
<span data-parallax='{"x": -20, "y": -100, "rotateZ":500,"rotateX":2000}'>
<img src="<%= baseUrl %>images/floating-dot4.png" alt="">
</span>
<span data-parallax='{"x": -20, "y": -100, "rotateZ":500,"rotateX":2000}'>
<img src="<%= baseUrl %>images/floating-dot5.png" alt="">
</span>
</div>
<% const section01 = content.find(item => item.name === 'Section-01'); %>
<div class="container">
<div class="row justify-content-center">
<div class="col-xl-10 col-12 px-xl-5">
<div class="row justify-content-between align-items-center g-4">
<div class="col-12 text-center">
<img class="img-fluid" src="<%= baseUrl %>images/NEEDAPRBnr2.png" />
</div>
<div class="col-lg-5 col-12">
<!--<img class="img-fluid" src="<%= baseUrl %>images/revoke-border.jpg" alt="">-->
<img class="img-fluid" src="<%= `${baseUrl}${section01.imageUrl}` %>" />
</div>
<div class="col-md-6 col-sm-7">
<div class="banner-txt">
<h1 class="theme-h2"><%= section01.title %></h1>
<p class="theme-p featured-p"><%= section01.paragraph %></p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="how-you-feel">
<% const section02 = content.find(item => item.name === 'Section-02'); %>
<div class="container">
<div class="row justify-content-center">
<div class="col-xl-10 col-12 px-xl-5">
<div class="sec-content">
<div class="row justify-content-between align-items-center g-4">
<div class="col-md-6 col-12">
<h6 class="theme-tagline"><%= section02.title %></h6>
<h2 class="theme-h2"><%= section02.heading %></h2>
<p class="theme-p featured-p"><%= section02.paragraph %></p>
<a class="theme-btn" href="<%= section02.link?.link %>"><%= section02.link?.text %></a>
</div>
<div class="col-md-5 col-12">
<img class="img-fluid" src="<%= `${baseUrl}${section02.imageUrl}` %>" alt="">
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="tell-them-they">
<% const section03 = content.find(item => item.name === 'Section-03'); %>
<div class="container">
<div class="row justify-content-center">
<div class="col-xl-10 col-12 px-xl-5">
<div class="sec-content">
<div class="row justify-content-center flex-md-row flex-column-reverse g-4">
<div class="col-md-5 col-12">
<img class="img-fluid" src="<%= `${baseUrl}${section03.imageUrl}` %>" alt="">
</div>
<div class="col-md-7 col-12">
<h2 class="theme-h2"><%= section03.heading %></h2>
<h5 class="theme-h5"><%= section03.subheading %></h5>
<ul class="theme-ul bullet-ul mian-roter">
<% section03.listItem?.forEach((list) => { %>
<li class="machine"><%= list %></li>
<% }) %>
</ul>
<a class="theme-btn" href="<%= section03.link?.link %>"><%= section03.link?.text %></a>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="virtual-package">
<% const section04 = content.find(item => item.name === 'Section-04'); %>
<div class="container">
<div class="row justify-content-center">
<div class="col-xl-10 col-12 px-xl-5">
<div class="sec-content">
<div class="row align-items-center g-4">
<div class="col-md-7 col-12">
<h2 class="theme-h2">
<%= section04.heading %>
</h2>
<h5 class="theme-h5"><%= section04.subheading %></h5>
<!-- <div class="row pt-3 pb-3 justify-content-center">
<div class="col-12 col-lg-4"> -->
<div class="botle">
<ul class="theme-ul bullet-ul">
<% section04.listItem?.forEach((list) => { %>
<li class="machine-1"><%= list %></li>
<% }) %>
</ul>
<!-- </div>
</div> -->
</div>
<h5 class="theme-h5"><%= section04.tagline %></h5>
<a class="theme-btn" href="<%= section04.link?.link %>"><%= section04.link?.text %></a>
</div>
<div class="col-md-5 col-12">
<img class="img-fluid" src="<%= `${baseUrl}${section04.imageUrl}` %>" alt="">
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<div class="sign-in-now">
<div class="container">
<div class="row justify-content-center">
<div class="col-xl-4 col-12 px-xl-5">
<div class="sec-content">
<!--<div class="content-wrapper">-->
<!-- <a class="theme-btn" href="/login">sign in now</a>-->
<!--<img class="pricing-plan" src="<%= baseUrl %>images/pricing-plan.png" alt="">-->
<!--</div>-->
</div>
</div>
</div>
</div>
</div>
</main>
<footer class="footer-main">
<% const footer = content.find(item => item.name === 'footer'); %>
<div class="container">
<div class="row justify-content-center">
<div class="col-xl-10 col-12 px-xl-5">
<div class="footer-content">
<h2 class="theme-h2"><%= footer.heading %></h2>
<h5 class="footer-h5"><%= footer.subheading %></h5>
<ol class="footer-ol">
<% footer.listItem?.forEach((list) => { %>
<li><%= list %></li>
<% }) %>
</ol>
</div>
</div>
</div>
</div>
<div class="bg-shapes">
<figure>
<img src="<%= baseUrl %>images/banner-top-left.png" alt="">
</figure>
<figure>
<img src="<%= baseUrl %>images/banner-shape-lefft.png" alt="">
</figure>
<figure>
<img src="<%= baseUrl %>images/banner-shape-rgt.png" alt="">
</figure>
</div>
<div class="floating-shapes">
<span data-parallax='{"x": -180, "y": -20, "rotateZ":500}'>
<img src="<%= baseUrl %>images/floating-dot.png" alt="">
</span>
<span data-parallax='{"x": 150, "y": -20, "rotateX":2000}'>
<img src="<%= baseUrl %>images/floating-dot2.png" alt="">
</span>
<span data-parallax='{"x": -20, "y": -100, "rotateZ":500,"rotateX":2000}'>
<img src="<%= baseUrl %>images/floating-dot3.png" alt="">
</span>
<!-- <span data-parallax='{"x": 50, "y": -30}'>
<img src="<%= baseUrl %>images/floating-circle-dots.png" alt="">
</span> -->
<span data-parallax='{"x": -20, "y": -100, "rotateZ":500}'>
<img src="<%= baseUrl %>images/floating-dot5.png" alt="">
</span>
</div>
</footer>
<%- include('./parcials/footer') %>
<%- include('./parcials/scriptLinks') %>
</body>
</html>