<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Questhub</title>
    <link rel="stylesheet" href="/css/landing-page/main.css">
    <link rel="stylesheet" href="/css/landing-page/header.css">
    <script src="https://kit.fontawesome.com/3ef4bc1872.js" crossorigin="anonymous"></script>
</head>
<body>
    <div id="root">
        <header>
            <div class="container">
                <div class="title">
                    <img src="/img/static/questhub-logo.png" class="logo-title">
                </div>
                <div class="menu-icon" id="menu-icon">
                    <i class="fas fa-bars"></i>
                </div>
            </div>
            <nav id="page-nav">
                <!-- <ul>
                    <li class="nav-item"><a href="#about">About</a></li>
                    <li class="nav-item"><a href="#benefit">Benefit</a></li>
                    <li class="nav-item"><a href="#get-started">Tutorial</a></li>
                    <li class="nav-item"><a href="#contact">Contact</a></li>
                </ul> -->
                <div class="nav-item"><a href="#about">About</a></div>
                <div class="nav-item"><a href="#benefit" >Benefit</a></div>
                <div class="nav-item"><a href="#get-started">Get Started</a></div>
                <div class="nav-item"><a href="#contact">Contact</a></div>
            </nav>  
        </header>
        <main>
            <section id="about">
                <div class="illustration-image">
                    <img src="/img/static/Group 1954.png" alt="">
                </div>
                <div class="about-text">
                    <span>Let's <b>Begins</b></span>
                    <h2>Education Made Easy, Colaboration Made Effective</h2>
                    <p>Our platform fosters effective collaboration, making group work a breeze. With <b>QuestHub</b>, education is transformed into an engaging and efficient journey.</p>
                    <div class="user-enter">
                        <a href="/login">
                            <button class="login">Log in</button>
                        </a>
                        <a href="/register" style="margin-top: 0;">
                            <button class="signup">Register</button>
                        </a>
                    </div>
                </div>
            </section>
            <section id="benefit">
                <div class="benefit-container">
                    <div class="illustration-image">
                        <img src="/img/static/Group 1956.png" alt="">
                    </div>
                    <div class="benefit-content">
                        <div class="about-text">
                            <h2>What Do You Get From Us ?</h2>
                            <p>Here are some advantages you can get from using this app to manage your recent project and team collaboration</p>
                        </div>
                        <div class="benefits">
                            <div class="benefit-item">
                                <img src="/img/static/Group 1997.png" alt="">
                                <h4 style="font-size: 16px;">Efficient Collaboration</h4>
                                <p>Seamless teamwork without obstacles. Achieve more together</p>
                            </div>
                            <div class="benefit-item">
                                <img src="/img/static/Group 1996.png" alt="">
                                <h4>Progress Monitoring</h4>
                                <p>Track your progress with ease. Stay on top of your goals</p>
                            </div>
                            <div class="benefit-item">
                                <img src="/img/static/Group 1995.png" alt="">
                                <h4>Easy Access</h4>
                                <p>Access our app anytime, anywhere, for convenience from you browser</p>
                            </div>
                            <div class="benefit-item">
                                <img src="/img/static/Group 1994.png" alt="">
                                <h4>Enjoyable Learning</h4>
                                <p>Learning transformed into interactive fun, Enjoy collaboration for everyone</p>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
            <section id="get-started">
                <div class="started-container">
                    <div class="illustration-image">
                        <img src="/img/static/image-removebg-preview (4) 1.png" alt="">
                    </div>
                    <div class="about-text">
                        <h2 style="color: white;">Easily Collaborate With Your Team Everytime, Everywhere</h2>
                        <p style="color: white;"    >Dividing work and tasks, collecting and viewing work results, and collaborating becomes easier</p>
                        <a href="#">
                            <button class="button-started">Getting Started!</button>
                        </a>
                    </div>
                </div>
            </section>
        </main>
        <footer id="contact">
            <div class="contact-container">
                <div class="contact-descrption">
                    <img src="/img/static/questhub-logo.svg" width="220px" alt="">
                    <p>
                        Questhub is a team collaboration application that allows users to form teams, design and collaborate on tasks together with a flexible approach.
                        <span>~@2018 QuestHub</span>
                    </p>
                    <ul style="margin-bottom: 0;">
                        <li><img src="/img/static/facebook.png" alt=""></li>
                        <li><img src="/img/static/twetter.png" alt=""></li>
                        <li><img src="/img/static/linkedin.png" alt=""></li>
                        <li><img src="/img/static/instagram.png" alt=""></li>
                    </ul>
                </div>
                <div class="contact-navigation">
                    <div class="contact-item">
                        <h3>Page</h3>
                        <ul>
                            <li><a href="../homepage/index.html">Home</a></li>
                            <li><a href="">Tutorial</a></li>
                            <li><a href="">Log In</a></li>
                            <li><a href="">Register</a></li>
                        </ul>
                    </div>
                    <div class="contact-item">
                        <h3>Article</h3>
                        <ul>
                            <li><a href="">New</a></li>
                            <li><a href="">Old</a></li>
                            <li><a href="">Trend</a></li>
                            <li><a href="">Popular</a></li>
                        </ul>
                    </div>
                </div>
                <div class="contact-email">questhub.io@gmail.com</div>
                </div>
            </div>
        </footer>
    </div>
</body>
<script src="/js/menu-icon.js"></script>
</html>
