<!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 class="bg-shapes-main">
<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>
<section class="inner-banner">
<div class="container">
<div class="row justify-content-center">
<div class="col-xl-10 col-12 px-xl-5">
<div class="banner-content">
<h1 class="theme-h2">contact</h1>
<ul class="banner-links">
<li>
<a href="/">Home</a>
</li>
<li>contact</li>
</ul>
</div>
</div>
</div>
</div>
</section>
<section class="contact-sec padding-sec">
<div class="container">
<div class="row justify-content-center">
<div class="col-xl-10 col-12 px-xl-5">
<div class="contact-content">
<div class="row gx-lg-5 g-4 justify-content-center">
<!--<div class="col-lg-6 col-12">-->
<!-- <h2 class="theme-h2">let's connect</h2>-->
<!-- <ul class="contacts-info">-->
<!-- <li>-->
<!-- <span class="icon">-->
<!-- <i class="fa-solid fa-location-dot"></i>-->
<!-- </span>-->
<!-- <div>-->
<!-- <a href="javascript:;">-->
<!-- <span>1403 dolor smit Ave, Lorem ipsum</span>-->
<!-- <span>LA 70130, United State</span>-->
<!-- </a>-->
<!-- </div>-->
<!-- </li>-->
<!-- <li>-->
<!-- <span class="icon">-->
<!-- <i class="fa-solid fa-phone"></i>-->
<!-- </span>-->
<!-- <div>-->
<!-- <a href="tel:+11234567890">+(1) 123 456 7890</a>-->
<!-- <a href="tel:+10987654321">+(1) 098 765 4321</a>-->
<!-- </div>-->
<!-- </li>-->
<!-- <li>-->
<!-- <span class="icon">-->
<!-- <i class="fa-solid fa-location-dot"></i>-->
<!-- </span>-->
<!-- <div>-->
<!-- <a href="javascript:;">info@domain.com</a>-->
<!-- <a href="javascript:;">info@yourname.com</a>-->
<!-- </div>-->
<!-- </li>-->
<!-- </ul>-->
<!-- <iframe class="gmap"-->
<!-- src="<%= baseUrl %>https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d429173.54259905504!2d-97.01175197764361!3d32.820929606890424!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x864c19f77b45974b%3A0xb9ec9ba4f647678f!2sDallas%2C%20TX!5e0!3m2!1sen!2sus!4v1680292233854!5m2!1sen!2sus"-->
<!-- style="border:0;" allowfullscreen="" loading="lazy"-->
<!-- referrerpolicy="no-referrer-when-downgrade"></iframe>-->
<!--</div>-->
<div class="col-lg-7 col-12">
<h2 class="theme-h2">send us a message</h2>
<form action="/api/email/contact" method="post">
<div class="contact-form">
<div class="row g-3">
<div class="col-6">
<div class="input-field">
<label for="">First Name *</label>
<input name="firstName" type="text" required>
</div>
</div>
<div class="col-6">
<div class="input-field">
<label for="lastName">Last Name *</label>
<input name="lastName" type="text" required>
</div>
</div>
<div class="col-6">
<div class="input-field">
<label for="email">Username *</label>
<input name="username" type="text" required>
</div>
</div>
<div class="col-6">
<div class="input-field">
<label for="email">Email Address *</label>
<input name="email" type="email" required>
</div>
</div>
<div class="col-12">
<div class="input-field">
<label for="lastName">Message *</label>
<textarea name="message" required></textarea>
</div>
</div>
</div>
<button type="submit" class="theme-btn">Submit</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</main>
<%- include('./parcials/footer') %>
<%- include('./parcials/scriptLinks') %>
</body>
</html>