<!DOCTYPE html>
<html>
<head>
	<%- include("../_includes/global_head.ejs") -%>
	<title>SysCraft</title>
	<link rel="stylesheet" type="text/css" href="/css/freelance.css">
	<script src="/js/freelance.js" defer></script>
</head>

<body class="container">
	<section class="banner row gy-3">
		<div class="col-sm-12 col-lg-5">
			<img src="/imgs/SysCraft_logo.svg">
		</div>

		<div class="col-sm-12 col-lg-7">
			<div class="box">
				<h1>SysCraft</h1>
				<p>Freelance entity tailored in different tech solutions that utilize application, web development & embedded systems.</p>
				<a href="/" class="Btn">
					Contacts
				</a>
			</div>
		</div>
	</section>

	<section class="portfolio">
		<h2 class="title-work">Our Work</h2>
		<div class="row g-3" id="work-container">
			
			<div class="col-sm-12 col-lg-4">
				<div id="workCarousel" class="carousel slide carousel-fade" data-bs-ride="false" data-bs-interval="false">
					<div class="carousel-inner" id="record-display">
					    <div class="carousel-item active" id="temp_item">
					    </div>
					  	<button class="carousel-control-prev" type="button" data-bs-target="#workCarousel" data-bs-slide="prev">
					    	<span class="carousel-control-prev-icon" aria-hidden="true"></span>
					    	<span class="visually-hidden">Previous</span>
					  	</button>
						<button class="carousel-control-next" type="button" data-bs-target="#workCarousel" data-bs-slide="next">
							<span class="carousel-control-next-icon" aria-hidden="true"></span>
							<span class="visually-hidden">Next</span>
						</button>
					</div>
					<div class="load_more_wrapper">
						<button class="Btn">
							Load More..
						</button>
					</div>
				</div>
			</div>

			<div class="col-sm-12 col-lg-8" id="record-extend">
				<div class="box work-wrapper record-extend-c">
					<h2></h2>
					<p></p>
					<span id="workTechS"></span>
					<ul id="workTech"></ul>
					<span id="workLnksS"></span>
					<ul id="workLnks"></ul>
				</div>
			</div>

		</div>
	</section>
</body>
</html>