<!DOCTYPE html>
<html lang="en">
<head>
	<%- include('partials/head') %>
    <link rel="stylesheet" href="/stylesheets/features.css">
</head>
<body>
	<%- include('partials/navbar') %>
    <main class="center">
    	<h1 class="header">Features</h1>
    	<p class="sub-header">Check out all of ChoreSplitter's amazing features!</p>
	    <section id="info">
	        <div class="feature">
	            <div>
	                <h2>Custom Housing Groups</h2>
	                	<p> Create your own housing group with a unique 6-letter code. Your roommates
	                	    can then use this code to join your group! You have total control of who
	                	    you let access your dashboard.
	                    </p>
	            </div>
	            <img src="assets/features/group.png" alt="Group selection interface">
	        </div>
	        <div class="feature">
	            <div>
	                <h2>Chore Dashboard</h2>
	                    <p>Access a dynamic dashboard where you can add custom chores for your roommates.
	                        Claim and complete chores to earn points and compete with your friends!
	                    </p>
	            </div>
	            <img src="assets/features/dashboard.png" alt="Chore dashboard interface">
	        </div>
	        <div class="feature">
	            <div>
	                <h2>Leaderboard</h2>
	                    <p>As you earn points, you will rank up on the group leaderboard. Compete with your
	                        roommates to get the most chores done before the end of each week to avoid the
	                        slot of shame!
	                    </p>
	            </div>
	            <img src="assets/features/leaderboard.png" alt="Leaderboard interface">
	        </div>
	        <div class="feature">
	            <div>
	                <h2>Group Chat</h2>
	                    <p>Communicate with your roommates using the built-in group chat. Here you
	                        can put together grocery lists, talk about upcoming events, and give
	                        each other tasks!
	                    </p>
	            </div>
	            <img src="assets/features/chat.png" alt="Group chat interface">
	        </div>
	        <div class="feature">
	            <div>
	                <h2>Settings</h2>
	                    <p>No longer feeling your profile picture? No problem! With the settings menu,
	                        you can fully customize your profile by changing your name, profile picture,
	                        and even leaving your current group!
	                    </p>
	            </div>
	            <img src="assets/features/settings.png" alt="Settings interface">
	        </div>
	    </section>
    </main>
    <%- include('partials/footer') %>
</body>
</html>