@{
    ViewBag.Title = "Home Page";
}

@using NEducation.Content.Texts
<link rel="stylesheet" href="~/Content/assets/css/home-voca.css" />
<link rel="stylesheet" href="~/Content/assets/css/m.home-voca.css" />
<script src="~/Content/assets/js/m.home-voca.js" type="text/javascript"></script>


@section navMenu{

    <a href="/Voca/" class="nav-link link-home">
        @Lang.Home
        @*Home*@
    </a>
    <a href="/Common/Course?courseType=1" class="nav-link link-libary">
        @Lang.Library
    </a>
    @*<a href="/Voca/" class="nav-link">Vocabulary</a>*@
    <a href="/Grammar/" class="nav-link">
        @Lang.Grammar
        @*GRAMMAR*@
    </a>
    <a href="/Listening/" class="nav-link">
        @Lang.Listening
        @*LISTENING*@
    </a>
    <a href="/MiniGame" class="nav-link">@Lang.MiniGame</a>
    @*<a href="/Ebook/" class="nav-link">
            @Lang.Ebook
            <img src="~/Content/assets/imgs/giphy.gif" style=" width: 50px;" />
        </a>*@

    @*<div class="dropdown nav-link">
            <button onclick="myFunction()" class="dropbtn">
                E-Library
                <img src="~/Content/assets/imgs/giphy.gif" style=" width: 50px;" />
            </button>
            <div id="myDropdown" class="dropdown-content">
                <a href="/Ebook/">@Lang.Ebook</a>
                <a href="/Ebook/Video">Children's Video</a>
            </div>
        </div>*@

    @*<a href="/Voca/Method" class="nav-link link-help">Method</a>
        <a href="/Voca/Help" class="nav-link link-help">Help</a>*@
}

@section menu{
    @*<a href="/Home/instruction/news/phuong-phap-hoc-tu-vung-tieng-anh-cung-voca-698" class="header-menu-link ">Method</a>
        <a href="/Home/library" class="header-menu-link ">Library</a>
        <a href="javascript:void(0)" class="header-menu-link menu-link-course">Course</a>
        <p class="link-course-group">*@
    <a href="/Common" class="header-menu-link ">
        @Lang.Home
    </a>
    <a href="/Common/Course" class="header-menu-link ">
        @Lang.Library
    </a>
    <a href="/Voca/" class="header-menu-link ">
        @Lang.Vocabulary
        @*VOCABULARY*@
    </a>
    <a href="/Grammar/" class="header-menu-link ">
        @Lang.Grammar
        @*GRAMMAR*@
    </a>
    <a href="/Listening/" class="header-menu-link ">
        @Lang.Listening
        @*LISTENING*@
    </a>
    @*<a href="/Ebook/" class="header-menu-link">
            @Lang.Ebook
            <img src="~/Content/assets/imgs/giphy.gif" style=" width: 50px;" />
        </a>*@
    <a href="/MiniGame" class="header-menu-link ">@Lang.MiniGame</a>
    @*<li class="menu-item-has-children header-menu-link ">
            <a href="#" class="">
                E-Library
                <img src="~/Content/assets/imgs/giphy.gif" style=" width: 50px;" />
            </a>
            <ul class="" style=" margin-left: 20px;">
                <li><a href="/Ebook/">@Lang.Ebook</a></li>
                <li><a href="/Ebook/Video">Children's Video</a></li>
            </ul>
        </li>*@

    @*<a href="/Music/" class="header-menu-link ">MUSIC</a>*@
    @*</p>
        <a href="/Home/support" class="header-menu-link ">Help</a>*@
}

<div class="container-fluid" id="page-home-top">
    <div id="top-title-padding">
        <div class="row">
            <div class="col-md-12">
                <div class="row" id="page-title-top">
                    <div class="col-md-6 col-xs-12 col-sm-6" align="center">
                        <div id="logo">
                            <img src="~/Content/assets/imgs/student.png" />
                            <h1 id="title-left-top"><span id="title">USTUDY</span></h1>
                            <text style="color:#FFF" font-family="'opensansregular'" font-size="17">
                                @Lang.OvercomingAnObstacleWithYou
                                @*Avec vous, supprimez la barrière anglaise*@
                            </text>
                        </div>
                    </div>
                    <div class="col-md-6 col-xs-12 col-sm-6">
                        <div id="title-left-top" align="center">
                            <h1 id="title">
                                @Lang.LearningEnglish
                                @*APPRENEZ DE L'ANGLAIS*@
                            </h1>
                            <p id="content-title">
                                @*Không Ngôn Ngữ*@
                                @*@Lang.UstudyIsAProductOfUstudyToHelpOvercomingAnObstacle*@
                                N-EDU est un produit, conçu pour aider les étudiants à supprimer les barrières anglaises.
                            </p>
                            <a href="/Common/Course?courseType=1" id="btn-start">
                                @*@NEducation.Content.Texts.Lang.TryForFree1*@

                                REJOINGNEZ- NOUS!
                            </a>

                            @*<p id="content-title-free"><a href="/Common/Course">Trải nghiệm miễn phí!</a></p>*@
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row img-motocycle">
        <div class="travel-voca-content">
            <img class="wow zoomIn" data-wow-duration="2s" src="~/Content/assets/imgs/vocabulary-home.png" alt="voca travel" />
        </div>

    </div>
</div><!--end page-home-top-->
<!-- Home Intro -->
<div class="home-intro-container-top" id="page-home-m">
    <div class="home-intro-cover-top">
        <div class="row">
            <div class="col-xs-12">
                <div class="home-intro-left">
                    <div class="home-intro-img">
                        <img class="intro-image" alt="aj hoge" src="~/Content/assets/imgs/m-home-voca-man.svg" />
                    </div>
                    <h1 class="home-intro-detail">
                        @Lang.VocabularySystem
                        @*Apprendre l'anglais Vocabulaire*@
                    </h1>
                    <a class="home-intro-button" href="/Common/Course">
                        @Lang.Starting
                        @*Commencez*@
                    </a>
                    @*<a class="home-intro-try-free" href="/Common/Course" href="javascript:void(0)">J'ai déjà un compte?</a>*@
                </div>
            </div>

        </div>
    </div>
</div>

<div class="container-fluid" id="three-step-learn-english">
    <div class="row" id="three-title" align="center">
        <h2 id="title">
            @Lang.ThisMethodHelpsYouRememberEasily
            @*VOCA là hệ thống <strong>học từ vựng</strong> tiếng Anh <strong>thông minh</strong> sẽ giúp bạn ghi nhớ từ vựng một cách
                <strong>dễ dàng</strong> và <strong>sâu sắc</strong> chỉ sau 1 thời gian ngắn.*@
            @*N-EDU est un système intelligent d'apprentissage du vocabulaire anglais qui vous aidera à mémoriser le vocabulaire facilement et profondément après seulement une courte période*@
        </h2>
    </div>

</div><!--end three-step-learn-english-->
<div class="container-fluid" id="come-with-voca">
    <div class="row img-clould">
        <img src="~/Content/assets/imgs/home-cloud-center.png" alt="home-cloud-center" />
    </div>
    <div class="row" id="content-parent-come-with-voca">
        <div class="col-md-12">
            <div class="row">
                <div class="col-md-6 col-xs-12 col-sm-6 right wow bounceInLeft" data-wow-duration="3s">
                    <h2 id="title-com-with-voca">
                        @*Không Ngôn Ngữ*@
                        @*@Lang.USTUDYWelcomeYou*@
                        Venez à N-EDU
                    </h2>
                    <p class="content-child-come-with-voca">
                        @Lang.MakeYouCrazyWithOneWord_1 <span>@Lang.MakeYouCrazyWithOneWord_2</span> <br /> @Lang.MakeYouCrazyWithOneWord_3
                        @*N-EDU va vous rendre <span>fou</span> <br /> d'un vocabulaire minuscule*@
                    </p>
                </div>
                <div class="col-md-6 col-xs-12 col-sm-6 left wow  bounceInRight" data-wow-duration="3s">
                    <img src="~/Content/assets/imgs/voca-word.png" class="img-hat-bottom" id="img-hat-top" alt="voca words" />
                </div>
            </div>
            <div class="row">
                <div class="col-md-6 col-xs-12 col-sm-6 right wow   bounceInLeft" data-wow-duration="3s">
                    <img src="~/Content/assets/imgs/voca-bell.png" class="img-hat" alt="voca bell" />
                </div>
                <div class="col-md-6 col-xs-12 col-sm-6 left wow  bounceInRight" data-wow-duration="3s">
                    <p class="content-child-come-with-voca">
                        @*Không Ngôn Ngữ*@
                        @*@Lang.USTUDYReminderYouEveryday*@
                        VOCA sẽ <span>nhắc nhỡ</span> bạn mỗi ngày <br />và bạn <span>không thể nào xao lãng</span> <br />về việc học tiếng Anh được!
                        @*N-EDU vous le <span>rappellera</span> tous les jours et vous ne serez pas distrait pour<br /> apprendre l'anglais!*@
                    </p>
                </div>
            </div>
            <div class="row">
                <div class="col-md-6 col-xs-12 col-sm-6 right wow  bounceInLeft" data-wow-duration="3s">
                    <p class="content-child-come-with-voca">
                        @*VOCA sẽ "<span> chọc quê bạn </span>",<br>"<span> động viên bạn</span>"<br>và "<span>thưởng nóng cho bạn</span>"*@
                        MEDU  @Lang.will "<span>@Lang.annoy</span>", <br />"<span>@Lang.encourage</span>"<br /> @Lang.and @Lang.reward

                        @*N-EDU va "<span>vous pousser</span>", <br />"<span>vous encourager</span>"<br /> et "vous récompenser"*@
                    </p>
                </div>
                <div class="col-md-6 col-xs-12 col-sm-6 left wow  bounceInRight" data-wow-duration="3s">
                    <img src="~/Content/assets/imgs/voca-give-me.png" class="img-hat" alt="voca coin" />
                </div>
            </div>
            <div class="row">
                <div class="col-md-6 col-xs-12 col-sm-6 right wow  bounceInLeft" data-wow-duration="3s">
                    <img src="~/Content/assets/imgs/voca-phone.png" class="img-hat" alt="voca app" />
                </div>
                <div class="col-md-6 col-xs-12 col-sm-6 wow  bounceInRight" data-wow-duration="3s" align="center">
                    <div class="content-child-come-with-voca text-center" id="content-child-come-padding">
                        @*<p>Học tiếng Anh <span>mọi lúc mọi nơi</span> (ở nhà, trên xe Bus,<br> trên trường,...) với VOCA</p>*@
                        <p>
                            @Lang.LearningEverywhere
                            @*Apprenez l'anglais <span>tout le temps et partout</span>  (à la maison, dans le bus, à l'école…) avec NEdu*@
                        </p>
                        @*<a href="https://play.google.com/store/apps/details?id=com.fanken.voca&amp;hl=en" class="a-software">IOS</a>
                            <a href="https://play.google.com/store/apps/details?id=com.fanken.voca&amp;hl=en" class="a-software">Android</a>*@
                        <a href="/Home" class="a-software">Web</a>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-6 col-xs-12 col-sm-6 right wow  bounceInLeft" data-wow-duration="3s">
                    <p class="content-child-come-with-voca">
                        @*VOCA sẽ cùng bạn đi khắp<br> mọi nơi, và bạn <span>không thể<br> nào rời VOCA được</span>*@
                        @Lang.BeWithYouEverywhere
                        @*On vous accompagnera partout*@
                    </p>
                </div>
                <div class="col-md-6 col-xs-12 col-sm-6 left wow  bounceInLeft" data-wow-duration="3s">
                    <img src="~/Content/assets/imgs/voca-speed.png" class="img-hat img-hat-bottom" alt="voca learn every where" />
                </div>
            </div>
        </div>
    </div>
    <div class="row img-clould">
        <img src="~/Content/assets/imgs/home-cloud-bottom.png" alt="home-cloud-bottom" />
    </div>
</div><!--end come with VOCA-->
<!--Begin learning guide-->
<div class="modal fade" id="community-video-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog" style="max-width: 600px;">
        <div class="modal-content modal-popular">

            <div class="row modal-content-popular" style="margin-top: 0px;">
                <div class="col-xs-12">

                    <iframe width="100%" height="315" src="" frameborder="0" allowfullscreen></iframe>

                </div>
            </div>

        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<!--End learning guide-->



<script>
    $(document).ready(function () {
        // Optimalisation: Store the references outside the event handler:
        var $window = $(window);
        var $panew = $('#page-home-top');
        var $panem = $('#page-home-m');

        function checkWidth() {
            var windowsize = $window.width();
            if (windowsize > 440) {
                //if the window is greater than 440px wide then turn on jScrollPane..
                $panew.css('display', '');
                $panem.css('display', 'none');
            } else {
                $panew.css('display', 'none');
                $panem.css('display', '');
            }
        }
        // Execute on load
        checkWidth();
        // Bind event listener
        $(window).resize(checkWidth);
    });
</script>