<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
    <meta name="description" content="" />
    <meta name="author" content="" />
    <title>In English Please!</title>
    <link rel="icon" type="image/x-icon" href="{{base}}/assets/favicon.ico"/>
    <!-- Font Awesome icons (free version)--><!-- Google fonts-->
    <link href="https://fonts.googleapis.com/css?family=Varela+Round" rel="stylesheet" />
    <link
        href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i"
        rel="stylesheet" />
    <!-- Core theme CSS (includes Bootstrap)-->
    <link href="{{base}}/css/styles.css" rel="stylesheet" />
</head>

<body id="page-top">
    <!-- Navigation-->
    {% include 'navBar.twig' %}
    <!-- Masthead-->
    <header class="masthead">
        <div class="container px-4 px-lg-5 d-flex h-100 align-items-center justify-content-center">
            <div class="d-flex justify-content-center">
                <div class="text-center">
                    <h1 class="mx-auto my-0 text-uppercase">IN ENGLISH PLEASE</h1>
                    <h2 class="text-white-50 mx-auto mt-2 mb-5">An easy-to-learn English app for students</h2>
                    <a class="btn btn-primary" href="#game">Get Started</a>
                </div>
            </div>
        </div>
    </header>
    <!-- About-->
    <section class="about-section text-center">
        <div class="container px-4 px-lg-5">
            <div class="row gx-4 gx-lg-5 justify-content-center">
                <div class="col-lg-8">
                    <h2 class="text-white mb-4">Anywhere at any time</h2>
                    <p class="text-white-50">
                        Our application is avaivable on all devices. You can use it on your computer, tablet or phone.<br/>
                        At home, at school or even in the bus, the app adapts to your lifestyle.<br/>
                        Learning english has never been so easy!
                    </p>
                </div>
            </div>
            <img class="img-fluid" src="{{base}}/assets/img/ipad.png" alt="..." />
        </div>
    </section>


    <!-- -->
    <section class="projects-section">
        <div class="container px-4 px-lg-5" id="game">
            <!-- Game One Row-->
            <a class="click-game" href="{{base}}/visitor/quiz">
                <div class="row gx-0 mb-5 mb-lg-0 justify-content-center">
                    <div class="col-lg-6"><img class="img-fluid" src="{{base}}/assets/img/quizz.jpeg" alt="..." /></div>
                    <div class="col-lg-6">
                        <div class="bg-black text-center h-100 project">
                            <div class="d-flex h-100">
                                <div class="project-text w-100 my-auto text-center text-lg-left">
                                    <h4 class="text-white">Quiz</h4>
                                    <p class="mb-0 text-white-50">Test your knowledge and study smarter!</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </a>
            <!-- Game Two Row-->
            <a class="click-game" href="{{base}}/visitor/memory">
                <div class="row gx-0 justify-content-center">
                    <div class="col-lg-6"><img class="img-fluid" src="{{base}}/assets/img/memory.jpeg" alt="..." /></div>
                    <div class="col-lg-6 order-lg-first">
                        <div class="bg-black text-center h-100 project">
                            <div class="d-flex h-100">
                                <div class="project-text w-100 my-auto text-center text-lg-right">
                                    <h4 class="text-white">Memory</h4>
                                    <p class="mb-0 text-white-50">Have fun associating words to help your brain learn faster</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </a>

            <div class="row gx-5 align-items-center" id="download">
                <div class="col-lg-6">
                    <div class="mb-5 mb-lg-0 text-center text-lg-start">
                        <h1 class="display-1 lh-1 mb-3">Download now</h1>
                        <p class="lead fw-normal mb-5">Start to learn english now with the mobile app!<br>Available on Android & iOS.</p>
                        <div class="d-flex flex-column flex-lg-row align-items-center">
                            <a class="me-lg-3 mb-4 mb-lg-0" href="https://play.google.com"><img class="app-badge" src="{{base}}/assets/img/google-play-badge.svg" alt="..." /></a>
                            <a href="https://www.apple.com/fr/app-store/"><img class="app-badge" src="{{base}}/assets/img/app-store-badge.svg" alt="..." /></a>
                        </div>
                    </div>
                </div>
                <div class="col-lg-6">
                    <!-- Download phone-->
                    <div class="download">
                       <div class="device-wrapper">
                            <div class="device" data-device="iPhoneX" data-orientation="portrait" data-color="black">
                                <div class="screen bg-black">
                                    <video muted="muted" autoplay="" loop="" style="max-width: 100%; height: 100%"><source src="{{base}}/assets/img/demo-screen.mp4" type="video/mp4" /></video>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <section class="contact-section bg-black">
        <!-- <div class="separateur">
            <img src="assets/img/separator.png" alt="Separator" style="width: 100%;" />
        </div> -->
        <div class="container px-4 px-lg-5">
            <div class="row gx-4 gx-lg-5">
                <div class="col-md-4 mb-3 mb-md-0">
                    <div class="card py-4 h-100">
                        <div class="card-body text-center">
                            <i class="fas fa-map-marked-alt text-primary mb-2"></i>
                            <h4 class="text-uppercase m-0">Address</h4>
                            <hr class="my-4 mx-auto" />
                            <div class="small text-black-50">5 Avenue Blaise Pascal, Aubière 63170, France</div>
                        </div>
                    </div>
                </div>
                <div class="col-md-4 mb-3 mb-md-0">
                    <div class="card py-4 h-100">
                        <div class="card-body text-center">
                            <i class="fas fa-envelope text-primary mb-2"></i>
                            <h4 class="text-uppercase m-0">Email</h4>
                            <hr class="my-4 mx-auto" />
                            <div class="small text-black-50"><a href="#!">assistance@segwave.fr</a></div>
                        </div>
                    </div>
                </div>
                <div class="col-md-4 mb-3 mb-md-0">
                    <div class="card py-4 h-100">
                        <div class="card-body text-center">
                            <i class="fas fa-mobile-alt text-primary mb-2"></i>
                            <h4 class="text-uppercase m-0">Phone</h4>
                            <hr class="my-4 mx-auto" />
                            <div class="small text-black-50">+33 6 06 06 06 06</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="social d-flex justify-content-center">
                <a class="mx-2" href="#!"><i class="fab fa-twitter"></i></a>
                <a class="mx-2" href="#!"><i class="fab fa-facebook-f"></i></a>
                <a class="mx-2" href="#!"><i class="fab fa-github"></i></a>
            </div>
        </div>
    </section>
    <!-- Footer-->
    <footer class="footer bg-black small text-center text-white-50">
        <div class="container px-4 px-lg-5">Copyright &copy; SegWave</div>
    </footer>
</body>

</html>