<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<meta property="og:url" content="https://xpecto.tech/" />
		<meta property="og:type" content="website" />
		<meta property="og:title" content="Xpecto" />
		<meta
			name="description"
			content="Xpecto is science and technology festival of Indian
        Institute of Technology, Mandi. It has been ramped up to
        include the most electrifying events, prompting great
        discoveries, as well as enthralling brainstorming and
        grand prizes."
		/>
		<meta
			name="keywords"
			content="home Page, Expect, Innovate, Achieve, IIT Mandi, TechFest 2022, Xpecto, Technical festival, Techfest IIT Mandi,
        Xpecto 2022, First Technical Festival, Techfest IIT Mandi"
		/>

		<link
			rel="stylesheet"
			href="https://cdnjs.cloudflare.com/ajax/libs/tiny-slider/2.9.4/tiny-slider.css"
		/>

		<link
			rel="icon"
			type="image/x-icon"
			href="images/xpecto-logo-header.png"
		/>
		<link rel="stylesheet" href="styles/style.css" />
		<link rel="stylesheet" href="styles/timeline.css" />
		<link rel="stylesheet" href="styles/home-parallax.css" />

		<!-- -----FONT AWESOME ICONS----- -->
		<script
			src="https://kit.fontawesome.com/a1542a4884.js"
			crossorigin="anonymous"
		></script>
		<style>
			body{
				background-color: rgb(0, 20, 47);
			}
			@media (max-width: 1300px) {
				nav {
					top: 90px;
				}
			}
			.marq-content {
				background-color: rgb(0, 20, 47);
				margin-top: -1rem;
				margin-bottom: 0rem;
				width: 100%;
				position: relative;
				display: flex;
			}
			.marquee p {
				background-color: rgb(0, 20, 47);
				padding: 0.25rem;
				color: aliceblue;
				/* margin-bottom:; */
			}
			.marquee .inner {
				position: fixed;
				top: 5rem;
				z-index: 105;
				width: 100%;
				display: flex;
				color: aqua;
				font-size: 8rem;
			}
			.marquee .inner > * {
				white-space: nowrap;
				padding: 0 3rem;
			}
			.marq-content a {
				color: cyan;
			}
			.pfont {
				font-size: 1rem;
			}
		</style>

		<title>Xpecto</title>
	</head>

	<body>
		<!-- -----HEADER INCLUDING LOGO AND NAVBAR----- -->
		<%- include ('partials/navbar.ejs') %>
		<!-- -----HEADER END----- -->
		<div class="marquee">
			<div class="inner" style="margin-right: 2rem">
				<marquee class="marq-content" onMouseOver="this.stop();" onMouseOut="this.start();">
					<p style="font-size: 20px">
						Updates:  
						<%for (let i=0; i<updatesdata.length; i++) {%>
							<%= updatesdata[i].first%>
							<a href="<%= updatesdata[i].link%>"><%= updatesdata[i].link_text%></a>
							<%= updatesdata[i].third%> ||||
						<%}%>
					</p>
				</marquee>
			</div>
		</div>

		<main>
			<!-- -----HOME SECTION WITH PARALLAX EFFECT----- -->
			<section class="hero" id="home">
				<img
					src="images/1.png"
					class="translateX"
					data-speed="0.25"
					id="moon"
					alt=""
				/>
				<img
					src="images/2.png"
					class="translateY"
					data-speed="0.35"
					id="clouds"
					alt=""
				/>
				<img
					src="images/3.png"
					class="translateY"
					data-speed="0.5"
					id="mount"
					alt=""
				/>
				<h1 id="text" class="translateX" data-speed="-5">XPECTO'22</h1>
				<a href="#updates" id="btn"
					>Updates <i class="fa-solid fa-arrow-down"></i
				></a>
				<img
					src="images/4.png"
					class="translateY"
					data-speed="0"
					id="base"
					alt=""
				/>
			</section>
			<!-- -----HOME SECTION END----- -->

			<!-- -----COUNTER SECTION START----- -->
			<section id="counter">
				<div class="content">
					<div class="floating-logo">
						<img src="images/xpecto-logo-body.png" alt="" />
					</div>
			<div class="timeline">
						<div class="dates-dot">
							<div class="dot dot-1 active-timeline">
								<div class="date_">13<br />May</div>
								<!-- <span class="circle"></span> -->
							</div>
							<div class="dot dot-2">
								<div class="date_">14<br />May</div>
								<!-- <span class="circle"></span> -->
							</div>
							<div class="dot dot-3">
								<div class="date_">15<br />May</div>
								<!-- <span class="circle"></span> -->
							</div>
							<div class="dot dot-4">
								<div class="date_">16<br />May</div>
								<!-- <span class="circle"></span> -->
							</div>
						</div>
	
						<% for(let i =0; i<schedule.length; i++) {%> 	
						<div class="block block-<%= i+1 %>">
							<h3><%= schedule[i].schedule_day %></h3>
							<div class="schedule-container">
								<% for(let j =0; j<schedule[i].info.length; j++) {%>
									<div class="schedule">
										<div class="schedule-event">
											<%= schedule[i].info[j].schedule_event %> 
										</div>
										<div class="schedule-time"><%= schedule[i].info[j].schedule_time %></div>
									</div>
									<hr />
								<%}%>
							</div>
						</div>
						<%}%>
					</div>
					<!-- </div> -->
					<!-- <div style="color:white;font-size:2rem;font-weight:bold;">Fest is Live</div> -->
				</div>
			</section>
			<!-- -----COUNTER SECTION END----- -->


            <!-- -----UPDATES SECTION START----- -->
            <section id="updates">
                <div class="heading">Updates: </div>
                <marquee height="300px" class="update-marq" direction="up" onMouseOver="this.stop();" onMouseOut="this.start();" style="text-align: left;">
					<%for (let i=0; i<updatesdata.length; i++) {%>
						<li>	<%= updatesdata[i].first%> <a href="<%= updatesdata[i].link%>"><%= updatesdata[i].link_text%></a> <%= updatesdata[i].third%></li>
					<%}%>
				</marquee>
            </section>
            <!-- -----UPDATES SECTION END----- -->

			<!-- -----ABOUT SECTION START-----   -->
			<section id="about">
				<div class="heading">ABOUT US</div>
				<div class="content">
					<%if (homepageInfo !=="false") {%> <%=
					homepageInfo.first_para%>
					<br />
					<%= homepageInfo.second_para%> <%}%>
				</div>

				<!-- -----BUTTONS FOR T&C AND PRIVACY POLICY-----  -->
				<div class="pages-btn">
					<a
						target="_blank"
						href="https://drive.google.com/file/d/1mc65HcORPpoOoasgCvTP7Im7s7CXZ3Wm/edit"
						><button class="btn1 tnc">Publicity Brochure</button></a
					>
					<a href="/terms"
                        ><button class="btn1 tnc">Terms & Conditions</button></a
                    >
                    <a href="/privacy"
                        ><button class="btn1 priv">Privacy Policy</button></a
                    >
				
				</div>
				<!-- -----BUTTONS END----- -->
			</section>
			<!-- -----ABOUT SECTION END----- -->

			<!-- CONTACT SECTION START  -->
			<section id="contact">
				<div class="heading">Get In Touch</div>
				<div class="content">
					<!-- -----CARD FOR ADDRESS-----  -->
					<div class="address-card card">
						<div class="ribbon ribbon-top-left">
							<span>ADDRESS</span>
						</div>
						<div class="address-content">
							<i class="fa-solid fa-location-dot fa-2x"></i>
							<div class="address">
								Xpecto <br />
								SNTC, IIT Mandi <br />
								Kamand, Himachal Pradesh <br />
								INDIA
							</div>
						</div>
					</div>
					<!-- -----ADDRESS END----- -->

					<!-- -----CARD FOR EMAIL-----  -->
					<div class="email-card card">
						<div class="ribbon ribbon-top-left">
							<span>EMAIL</span>
						</div>
						<div class="email-content">
							<i class="fa-solid fa-envelope fa-2x"></i>

							<a href="mailto:team@xpecto.tech"
								><div class="email">team@xpecto.tech</div></a
							>
							<a href="mailto:publicity@xpecto.tech"
								><div class="email">
									publicity@xpecto.tech
								</div></a
							>
						</div>
					</div>
					<!-- -----EMAIL END----- -->

					<!-- -----CARD  FOR PHONE-----  -->
					<div class="phone-card card">
						<div class="ribbon ribbon-top-left">
							<span>PHONE</span>
						</div>
						<div class="phone-content">
							<i class="fa-solid fa-phone fa-2x"></i>
							<div class="phone">
								<a href="tel:7850084013"
									><div>
										Surendra: <span>+91 7850084013</span>
									</div></a
								>
								<a href="tel:9990991108"
									><div>
										Lalit: <span>+91 9990991108</span>
									</div></a
								>
								<a href="tel:7860688567"
									><div>
										Paras: <span>+91 7860688567</span>
									</div></a
								>
								<!-- <a href="tel:9214831344"
                                    ><div>
                                        Kratika: <span>+91 9214831344</span>
                                    </div></a
                                > -->
							</div>
						</div>
					</div>
					<!-- -----PHONE END----- -->
				</div>

				<!-- -----SOCIAL HANDLES ICONS-----  -->
				<div class="social">
					<!-- <div>
                        <a href="#">
                            <i class="fa-brands fa-facebook-square fa-3x"></i>
                        </a>
                    </div> -->
					<div>
						<a href="https://twitter.com/XpectoTech">
							<i class="fa-brands fa-twitter-square fa-3x"></i>
						</a>
					</div>
					<div>
						<a href="https://www.linkedin.com/company/xpecto-tech/">
							<i class="fa-brands fa-linkedin fa-3x"></i>
						</a>
					</div>
					<div>
						<a href="https://www.instagram.com/xpecto.tech/">
							<i class="fa-brands fa-instagram-square fa-3x"></i>
						</a>
					</div>
					<!-- <div>
                        <a href="#">
                            <i class="fa-brands fa-youtube-square fa-3x"></i>
                        </a>
                    </div> -->
				</div>
				<!-- -----ICONS END----- -->
			</section>
			<!-- -----CONTACT SECTION END----- -->

			<!-- -----SPONSORS SECTION----- -->
			<section id="sponsors">
				<div class="heading">Sponsors</div>

				<!-- associate sponsors -->
				<br /><br />
				<div>
					<h4 style="text-align: center; color: white">
						Associate Sponsors
					</h4>
					<div class="content">
						<!-- <h1 style="color: white">To be Updated Soon!</h1> -->
						<%if (assoc_sponsors.length>0 ) {%> <% for (let i=0; i < assoc_sponsors.length; i++) { %>
								<a target="_blank" href="<%=assoc_sponsors[i].spon_sitelink%>" class="href">
									<div class="spon card">
									<img src="<%=assoc_sponsors[i].spon_imagelink%>" alt="<%=assoc_sponsors[i].sponsor_name%>-logo" />
								</div>
								</a>
								<%}%>
									<%}else {%>To be Updated Soon! <%} %>
					</div>
				</div>

				<!-- gold sponsors -->
				<br /><br />
				<div>
					<h4 style="text-align: center; color: white">
						Gold Sponsors
					</h4>
					<div class="content">
						<!-- <h1 style="color: white">To be Updated Soon!</h1> -->
						<%if (gold_sponsors.length>0 ) {%> <% for (let i=0; i < gold_sponsors.length; i++) { %>
								<a target="_blank" href="<%=gold_sponsors[i].spon_sitelink%>" class="href">
									<div class="spon card">
									<img src="<%=gold_sponsors[i].spon_imagelink%>" alt="<%=gold_sponsors[i].sponsor_name%>-logo" />
								</div>
								</a>
								<%}%>
									<%}else {%>To be Updated Soon! <%} %>
					</div>
				</div>
				<!-- bronze sponsors -->
				
				<br /><br />
				<div>
					<h4 style="text-align: center; color: white">
						Bronze Sponsors
					</h4>
					<div class="content">
						<!-- <h1 style="color: white">To be Updated Soon!</h1> -->
						<%if (bronze_sponsors.length>0 ) {%> <% for (let i=0; i < bronze_sponsors.length; i++) { %>
								<a target="_blank" href="<%=bronze_sponsors[i].spon_sitelink%>" class="">
									<div class="spon card">
										<img src="<%=bronze_sponsors[i].spon_imagelink%>" alt="<%=bronze_sponsors[i].sponsor_name%>-logo" />
									</div>
								</a>
								<%}%>
									<%}else {%>To be Updated Soon! <%} %>
					</div>
				</div>

				<!-- event sponsors -->
				<br /><br />
				<div>
					<h4 style="text-align: center; color: white">
						Event Sponsors
					</h4>
					<div class="content">
						<!-- <h1 style="color: white">To be Updated Soon!</h1> -->
						<%if (event_sponsors.length>0 ) {%> <% for (let i=0; i < event_sponsors.length; i++) { %>
								<a target="_blank" href="<%=event_sponsors[i].spon_sitelink%>" class="href">
									<div class="spon card">
									<img src="<%=event_sponsors[i].spon_imagelink%>" alt="<%=event_sponsors[i].sponsor_name%>-logo" />
								</div>
								</a>
								<%}%>
									<%}else {%>To be Updated Soon! <%} %>
					</div>
				</div>

				<!-- partners -->
				<br /><br />
				<div>
					<h4 style="text-align: center; color: white">
						Partners
					</h4>
					<div class="content">
						<!-- <h1 style="color: white">To be Updated Soon!</h1> -->
						<%if (partners.length>0 ) {%> <% for (let i=0; i < partners.length; i++) { %>
								<a target="_blank" href="<%=partners[i].spon_sitelink%>" class="href">
									<div class="spon card">
										<img src="<%=partners[i].spon_imagelink%>" alt="<%=partners[i].sponsor_name%>-logo" />
										<h6 style="text-decoration: none; text-align: center; color: cyan"><%=partners[i].spon_additionalinfo%></h6>
									</div>
									
								</a>
								<%}%>
						<%}else {%>To be Updated Soon! <%} %>
					</div>
				</div>

				
				<br />
			</section>
			<!-- -----SPONSORS SECTION END----- -->

			<!-- image carousel -->

			<div class="slider-heading">Individual Sponsor</div>
			<section id="slider">
				<div class="slider-container">
					<div class="slider-sub-container">
						<div class="slider-wrapper">
							<div id="my-slider">

								<!-- slider start  -->
								<% for(let i =0; i<alumnis.length; i++) {%>

								<a target="_blank" href="<%=alumnis[i].Linkedin%>" class="" style="text-decoration: none; color:white">
									<div>
										<div class="slide">
											<div class="slide-img">
												<img
													src="<%=alumnis[i].Image_Link%>"
													alt="alumnis_image"
												/>
											</div>
											<br />
											<div>
												<h3 style="text-align: center"><%=alumnis[i].Name%></h3>
												<p style="color: white">Class of: <%= alumnis[i].ClassOf%></p>
											</div>
										</div>
									</div>
								</a>
								<%}%>
								<!-- slider end -->
							</div>
						</div>
					</div>
				</div>
			</section>

			<!-- image carousel end  -->

			<!-- -----FAQ Section-----  -->
			<section id="faq">
				<div class="heading">FAQ</div>
				<div class="faq-container">
					<!-- to show faq remove style attribute from below div and comment out above line -->
					<div class="wrapper">
						<%if (faqInfo.length>0) {%> <% for (let i = 0; i <
						faqInfo.length; i++) { %>
						<div class="container">
							<div class="question">
								<%= faqInfo[i].question%>
							</div>
							<div class="answercont">
								<div class="answer">
									<%= faqInfo[i].answer%>
								</div>
							</div>
						</div>

						<%}%> <%}else {%>
						<div class="faq-soon">To be Updated Soon!</div>
						<%} %>
					</div>
				</div>
			</section>
			<!-- -----FAQ Section End-----  -->
		</main>

		<footer></footer>

		<script src="scripts/script.js"></script>
		<script src="scripts/countdown.js"></script>
		<script src="scripts/faq.js"></script>
		<script src="scripts/ejs.js"></script>
		<script src="scripts/timeline.js"></script>

		<script
			src="https://cdnjs.cloudflare.com/ajax/libs/tiny-slider/2.9.4/min/tiny-slider.js"
			integrity="sha512-j+F4W//4Pu39at5I8HC8q2l1BNz4OF3ju39HyWeqKQagW6ww3ZF9gFcu8rzUbyTDY7gEo/vqqzGte0UPpo65QQ=="
			crossorigin="anonymous"
			referrerpolicy="no-referrer"
		></script>
		<script>
			let slider = tns({
				container: "#my-slider",
				responsive: {
					400: {
						items: 1,
					},

					550: {
						items: 2,
					},

					700: {
						items: 3,
					},

					900: {
						items: 4,
					},
					1300: {
						items: 5,
					},
					1600: {
						items: 5,
					},
				},
				nav: false,
				controls: false,
				// gutter:20,
				// items: 3,
				speed: 1250,
				autoplay: true,
				autoplayHoverPause: true,
				autoplayTimeout: 1500,
				// autoplayText: ["▶", "❚❚"],
				swipeAngle: false,
				autoplayButtonOutput: false,
				// controls:false
			});
		</script>
	</body>
</html>
