{% extends 'base.html' %}
{% block content %}

        <!-- Start Slider Area -->
        <div class="intro-area intro-area-3">
            <div class="bg-wrapper">
            	<img src="/assets/images/background/slide2-bg.png" alt="">
            </div>
			<div class="intro-content">
				<div class="slider-content">
					<div class="container">
						<div class="row">
							<div class="col-md-12 col-sm-12 col-xs-12">
								<div class="slide-all-text">
								    <!-- layer 1 -->
                                    <div class="layer-1 wow fadeInUp" data-wow-delay="0.3s">
                                        <h2 class="title2">Start Playing Better <span class="color">Online Games! </span></h2>
                                    </div>
                                    <!-- layer 2 -->
                                    <div class="layer-2 wow fadeInUp" data-wow-delay="0.5s">
                                        <p>We place key emphasis on creating games that are of a high quality in every way possible. </p>
                                    </div>
                                    <!-- layer 3 -->
                                    <div class="layer-3 wow fadeInUp" data-wow-delay="0.7s">
                                        <a href="{{info.member!=null?'/members':'/signup'}}" class="ready-btn" >Get Started</a>
                                    </div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
        </div>
        <!-- End Slider Area -->
		<!-- Start Achivement area -->
        <div class="achivement-area achivement-area-2 bg-color-2">
            <div class="container">
                 <div class="row">
                    <div class="achivement-content">
                        <div class="col-md-4 col-sm-4 col-xs-12">
                            <!-- fun_text  -->
                            <div class="single-achive first-achive">
                                <div class="achive-image">
                                    <img src="/assets/images/about/achive1.png" alt="">
                                </div>
                                <div class="achivement-text">
                                    <span class="achive-number">290+</span>
                                    <h6>Live online</h6>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4 col-sm-4 col-xs-12">
                            <!-- fun_text  -->
                            <div class="single-achive second-achive">
                                <div class="achive-image">
                                    <img src="/assets/images/about/achive2.png" alt="">
                                </div>
                                <div class="achivement-text">
                                    <span class="achive-number">60+</span>
                                    <h6>Active Games</h6>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4 col-sm-4 col-xs-12">
                            <!-- fun_text  -->
                            <div class="single-achive">
                                <div class="achive-image">
                                    <img src="/assets/images/about/achive3.png" alt="">
                                </div>
                                <div class="achivement-text">
                                    <span class="achive-number">100%</span>
                                    <h6>Champions</h6>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- End Achivement area -->
        <!-- Start Overview Area -->
        <div class="overview-area bg-color-2 fix area-padding">
            <div class="container">
                <div class="row">
					<div class="col-md-5 col-sm-6 col-xs-12">
                        <div class="overview-content">
                            <div class="overview-images">
                                <img src="/assets/images/about/ab2.png" alt="">
                            </div>
                        </div>
                    </div>
                    <div class="col-md-7 col-sm-6 col-xs-12">
                        <div class="overview-text">
                            <h3>Find the games you love most and share them with family </h3>
						    <p>{{ info.name}} is a gaming subscription service that allows you to play all games unlimited time during the period of your subscription. More than 50 licensed games available on the website and latest and the best games are added constantly. </p>
                            <ul>
								<li><a href="{{info.member!=null?'/members':'/signup'}}">60+ Fun Games made to entertain you</a></li>
                                <li><a href="{{info.member!=null?'/members':'/signup'}}">On Demand means the games are always ready to play!</a></li>
                                <li><a href="{{info.member!=null?'/members':'/signup'}}">Strategy And Mind Games, Made For True Gamers.</a></li>
                            </ul>
                            <a class="overview-btn" href="{{info.member!=null?'/members':'/signup'}}">{{info.member!=null?'Visit Members Area':'Signup today'}}</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- End Overview Area -->
        <!-- Start games Area -->
        <div class="games-play-area bg-color area-padding">
            <div class="container">
                <div class="row">
					<div class="col-md-12 col-sm-12 col-xs-12">
						<div class="section-headline text-center">
							<h3>Games play</h3>
							<p>Below find a selection of our top games!</p>
						</div>
					</div>
				</div>
                <div class="row">
					<!-- End single page -->
					<div class="col-md-12 col-sm-12 col-xs-12">
						<div class="tab-menu">
							 <!-- Nav tabs -->
							<ul class="nav nav-tabs" role="tablist">
								{% for i,game in games|slice(40,12)|shuffle %}
								<li>
								    <a href="{{info.member!=null?'/members':'/signup'}}" role="tab" data-toggle="tab">
							            <img class="cha-img" src="{{game.thumbnail}}" alt="games image">
								        <span class="title-date">
								        	<span class="cha-title">{{game.title}}</span>
								            <span class="cha-bit">{{game.category}}</span>
								        </span>
								    </a>
								</li>
								{% endfor %}
							</ul>
						</div>
					</div>
					<!-- end column -->
				</div>
				<!-- end Row -->
            </div>
        </div>
        <!-- End games end -->
        <!-- Start How to area -->
        <div class="how-to-area bg-color-2 area-padding">
            <div class="container">
                <div class="row">
					<div class="col-md-12 col-sm-12 col-xs-12">
						<div class="section-headline text-center">
                            <h3>ENTERTAINING GAMES</h3>
                            <p>Enjoy 60+ games that are designed to keep you smiling!</p>
						</div>
					</div>
				</div>
                <div class="row">
                    <div class="all-how">
                        <!-- single-well end-->
                        <div class="col-md-4 col-sm-4 col-xs-12">
                            <div class="single-how first-item">
                                <div class="how-img">
                                    <span class="h-number">01</span>
                                    <a class="big-icon" href="{{info.member!=null?'/members':'/signup'}}"><img src="/assets/images/about/h1.png" alt=""></a>
                                </div>
                                <div class="how-wel">
                                    <div class="how-content">
                                        <h4>FOR ALL AGE GROUPS</h4>
                                        <p>No matter your age or skill level, IQ knows that all brains are different, and our program adapts to your unique strengths and weaknesses.</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- single-well end-->
                        <div class="col-md-4 col-sm-4 col-xs-12">
                            <div class="single-how ">
                                <div class="how-img">
                                    <span class="h-number">02</span>
                                    <a class="big-icon" href="{{info.member!=null?'/members':'/signup'}}"><img src="/assets/images/about/h2.png" alt=""></a>
                                </div>
                                <div class="how-wel">
                                    <div class="how-content">
                                        <h4>SKILLS MADE FUN</h4>
                                        <p>We target the skills that matter to you most like memory. attention. problem solving and turns them into fun games.</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- single-well end-->
                        <div class="col-md-4 col-sm-4 col-xs-12">
                            <div class="single-how thired-item">
                                <div class="how-img">
                                   <span class="h-number">03</span>
                                    <a class="big-icon" href="{{info.member!=null?'/members':'/signup'}}"><img src="/assets/images/about/h3.png" alt=""></a>
                                </div>
                                <div class="how-wel">
                                    <div class="how-content">
                                        <h4>TRAINING GAMES</h4>
                                        <p>Train with 60+ games that are designed to boost productivity, and self-confidence in skills like math, reading, writing, speaking, and listening.</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- End How to area -->
        <!-- Start Blog Area-->
        <div class="blog-area fix bg-color area-padding-2">
            <div class="container">
                <div class="row">
					<div class="col-md-12 col-sm-12 col-xs-12">
						<div class="section-headline text-center">
                            <h3>Our Popular Games</h3>
							<p>Play now to see which one is your favorite</p>
						</div>
					</div>
				</div>
                <div class="row">
                    <div class="blog-grid home-blog">
						{% for i,game in games|slice(30,12) %}
                        <!-- Start single blog -->
                        <div class="col-md-3 col-sm-6 col-xs-12">
                            <div class="single-blog">
                               <div class="blog-image">
									<a class="image-scale" href="{{info.member!=null?'/members/?p=games':'/signup'}}">
										<img src="{{ game.thumbnail }}" alt="" style="height:170px;width:100%;border-radius:5px;">
									</a>
								</div>
                                <div class="blog-content">
                                   
                                    <a href="{{info.member!=null?'/members/?p=games':'/signup'}}">
                                        <h4>{{ game.title }}</h4>
                                    </a>
									<div class="blog-meta">
                                        <span class="date-type text-capitalize">
                                            <i class="fa fa-user"></i>
                                            {{ game.category }}
                                        </span>
                                    </div>
									<a class="ticket-btn" href="{{info.member!=null?'/members/?p=games':'/signup'}}">Play Now</a>
                                </div>
                            </div>
                        </div>
                        <!-- End single blog -->
                        {% endfor %}
                    </div>
                </div>
                <!-- End row -->
            </div>
        </div>
        <!-- End Blog Area-->
		
		<!-- Start Chips area -->
        <div class="ticket-area bg-color-2 area-padding-2">
            <div class="container">
				<div class="row">
					<div class="col-md-12 col-sm-12 col-xs-12">
						<div class="section-headline text-center">
                            <h3>Our Plans</h3>
							<p>Each plan allows you to enjoy the right amount of games.</p>
						</div>
					</div>
				</div>
                <div class="row">
                    <div class="ticket-content">
						{% for i,plan in info.properties.plans if not plan.hidden %}
                        <div class="col-md-3 col-sm-6 col-xs-12">
                            <!-- fun_text  -->
                            <div class="single-ticket">
				    <span class="ticket-rate">{{info.properties.currency}}{{plan.remote.price}}</span>
                                <div class="ticket-image">
                                    
                                    <img src="/assets/images/about/chips1.png" alt="">
                                </div>
                                <div class="ticket-text">
                                    <h4 class="ticket-name">{{plan.name}} Plan</h4>
									{% if i==1 %}
                                    <span class="win-money">40+ Games</span>
                                    <span class="win-money">24/7 Access</span>
									{% elseif i==2 %}
									<span class="win-money">60+ Games</span>
                                    <span class="win-money">24/7 Access</span>
									{% elseif i==3 %}
									<span class="win-money">Our Full Games Library</span>
                                    <span class="win-money">24/7 Access</span>
									{% else %}
									<span class="win-money">25+ Games</span>
                                    <span class="win-money">24/7 Access</span>
									{% endif %}
                                    <a class="ticket-btn" href="{{info.member!=null?'/members/?p=profile':'/signup?plan=' ~ plan.name }}">{{info.member!=null?'Upgrade Plan':'Choose plan'}}</a>
                                </div>
                            </div>
                        </div>
                        {% endfor %}
                    </div>
                </div>
            </div>
        </div>
        <!-- End Achivement area -->
        
{% endblock %}