<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Solace Of Service</title>
		<link rel="stylesheet" href="./main.css" />
		<link rel="icon" type="image/x-icon" href="./img/SOS_Logo_WBG.png" />
	</head>
	<body class="h-screen w-screen main-colour">
		<header class="flex w-full h-20 secondary-colour fixed top-0 left-0 right-0">
			<img src="./img/SOS_Logo_WBG.png" alt="product logo" class="p-1 ml-10" />
			<nav class="w-full flex justify-around">
				<a href="#" class="px-4 text-justify h-fit w-fit self-center"><h1>Home</h1></a>
				<a href="./about.html" class="px-4 text-justify h-fit w-fit self-center"
					><h1>About SSLR</h1></a
				>
				<a href="./profile.html" class="px-4 text-justify h-fit w-fit self-center"
					><h1>Profile</h1></a
				>
			</nav>
		</header>
		<section class="flex justify-center pb-10 pt-28 px-[15vw]">
			<img
				src="./img/gameSSPlaceholder.jpg"
				alt="image of game"
				class="w-2/3 aspect-video"	
			/>
		</section>
		<section class="section-colour h-fit w-full py-10 pr-[7vw] pl-28">
			<h1 class="text-2xl font-bold pb-2 px-37">SYNOPSIS</h1>
			<div class="flex flex-row">
				<img width="150" src="./img/SOS_Logo_WBG.png" alt="SSLR Logo"/>
				<h2>
					In Solace of Service, players step into the role of an administrator at a busy
					social service center, where each day presents a new challenge that tests their
					compassion, critical thinking, and resource management skills. The objective is to
					sort individuals from diverse backgrounds based on their specific needs and direct
					them to the appropriate sectors for assistance. This game tests players compassion
					and learning when to step up and help others in need. The experience is both
					demanding and rewarding, as players navigate the complexities of helping others
					while ensuring that no one is left behind.
				</h2>
				
			</div>
			
		</section>
		<section class="h-fit w-full y py-8 px-[15vw]">
			<h1 class="text-2xl font-bold pb-2">OUR GOAL</h1>
			<h2>
				Our goal with this project is to create an impactful and meaningful experience
				that goes beyond traditional gameplay. We aim to spread awareness about
				Singapore's diverse social services, which are often underappreciated or
				misunderstood. By immersing players in scenarios where they must identify various
				needs and match them with the right services, we strive to foster not just
				knowledge but a sense of empathy for those who rely on these essential resources.
				We believe that through engaging gameplay and thoughtful storytelling, users can
				better grasp the challenges faced by those in need and the importance of social
				services in supporting them.
			</h2>
		</section>
		<section class="section-colour h-fit w-full px-[15vw] py-8">
			<h1 class="text-2xl font-bold pb-2">WHY VR</h1>
			<h2>
				Utilising the immersive power of virtual reality, the game creates a realistic and
				engaging experience, allowing the players to be absorbed into it. Players are able
				to feel present in the social service centre as they can move about, interacting
				with the game - conversing with the NPCs, signing and stamping paperwork, and
				stepping into the pond. This hands-on approach enhances engagement, making
				learning intuitive and impactful. The use of the Meta Quest series ensures
				seamless player interaction and accessibility, bringing the educational and
				empathy-driven elements to life.
			</h2>
		</section>
		<section class="h-fit w-full px-[15vw] py-8 flex flex-col">
			<h1 class="text-2xl font-bold pb-2 w-full">SYSTEM REQUIREMENTS</h1>
			<div class="flex h-60">
				<img
					src="./img/meta-quest2.jpeg"
					alt="picture of a meta quest 2"
					class="h-full aspect-video"
				/>
				<div class="px-15">
					<h2 class="font-bold text-[25px]">Minimum</h2>
					<ul>
						<br>
						<li class="text-[25px]">OS: Meta Horizon OS</li>
						<br>
						<li class="text-[25px]">Chipset: Qualcomm Snapdragon XR2.</li>
						<br>
						<li class="text-[25px]">GPU: Qualcomm Adreno 650.</li>
						<br>
						<li class="text-[25px]">RAM: 6 GB</li>
					</ul>
				</div>
			</div>
		</section>

		<section class="h-fit w-full px-[15vw] py-8 flex flex-col section-colour">
			<h1 class="text-2xl font-bold pb-2 w-full">Download Now</h1>
			<a href="./assets/app.apk" download="Solace_Of_Service.apk"
				>Click here for download</a
			>
		</section>
		
		
	</body>
</html>