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

<head>

  <%- include("partials/head.ejs") %>

</head>

<body>

    <style>
        #slogan{
            animation: flip 2s infinite;
        }
        @keyframes flip {
            0%,80% {
                transform: rotateX(360deg) 
            }
        }
    </style>

  <%- include("partials/header.ejs") %>  

  <main class="mt-5">
    <div class="container">
      
        <section class="text-center">
            <h1 class="mb-5 font-weight-bold">GFNGames</h1>
            <div class="row d-flex justify-content-center mb-4">
                <h4 id="slogan">The best of Cloud Gaming</h4>
            </div>
        </section>
      

      <!--Section: Best Features-->
      <section id="best-features" class="text-center">

                  <!-- Heading -->
        <h2 class="mb-5 font-weight-bold">Features</h2>

        <!--Grid row-->
        <div class="row d-flex justify-content-center mb-4">

            <!--Grid column-->
            <div class="col-md-8">

                <!-- Description -->
                <p class="grey-text">This site was made in the early days of GeForce NOW Cloud Gaming to show the list of games available and retired, now it turns into the place to explore Cloud Gaming.</p>

            </div>
            <!--Grid column-->

        </div>
        <!--Grid row-->

        <!--Grid row-->
        <div class="row">

            <!--Grid column-->
            <div class="col-md-4 mb-5">
                <i class="fa fa-gamepad fa-4x"></i>
                <h4 class="my-4 font-weight-bold">List</h4>
                <p class="grey-text">Find your prefered game launcher, click on the menu LIST to start listing.</p>
            </div>
            <!--Grid column-->

            <!--Grid column-->
            <div class="col-md-4 mb-1">
                <i class="fa fa-coffee fa-4x"></i>
                <h4 class="my-4 font-weight-bold">Deals</h4>
                <p class="grey-text">Find the best deals with Instant Gaming and Kinguin, click on the menu DEALS to watch the latest deals ond offers.</p>
            </div>
            <!--Grid column-->

            <!--Grid column-->
            <div class="col-md-4 mb-1">
                <i class="fa fa-thumbs-up fa-4x"></i>
                <h4 class="my-4 font-weight-bold">Social</h4>
                <p class="grey-text">Find all social links related to your games, click on the menu SOCIAL to explore social links.</p>
            </div>
            <!--Grid column-->

        </div>
        <!--Grid row-->

      </section>
      <!--Section: Examples-->
      <section id="examples" class="text-center">

        <!-- Heading -->
        <h2 class="mb-5 font-weight-bold">Cloud Gaming Platforms</h2>

        <!--Grid row-->
        <div class="row">

              <!--Grid column-->
              <div class="col-lg-4 col-md-6 mb-4">

                <div class="view overlay z-depth-1-half">
                    <img src="vendor/images/logos/logo-gfn.png" class="img-fluid" alt="">
                    <div class="mask rgba-white-slight"></div>
                </div>

                <h4 class="my-4 font-weight-bold">GeForce Now</h4>
                <p class="grey-text">NVidia</p>

            </div>
            <!--Grid column-->

            <!--Grid column-->
            <!--
            <div class="col-lg-4 col-md-12 mb-4">

                <div class="view overlay z-depth-1-half">
                    <img src="vendor/images/logos/logo-stadia.png" class="img-fluid" alt="">
                    <div class="mask rgba-white-slight"></div>
                </div>

                <h4 class="my-4 font-weight-bold">Stadia</h4>
                <p class="grey-text">Google</p>

            </div>
            -->
            <!--Grid column-->

            <!--Grid column-->
            <div class="col-lg-4 col-md-6 mb-4">

                <div class="view overlay z-depth-1-half">
                    <img src="vendor/images/logos/logo-psn.png" class="img-fluid" alt="">
                    <div class="mask rgba-white-slight"></div>
                </div>

                <h4 class="my-4 font-weight-bold">PS Now</h4>
                <p class="grey-text">Sony</p>

            </div>
            <!--Grid column-->

            <!--Grid column-->
            <div class="col-lg-4 col-md-6 mb-4">

                <div class="view overlay z-depth-1-half">
                    <img src="vendor/images/logos/logo-xcloud.png" class="img-fluid" alt="">
                    <div class="mask rgba-white-slight"></div>
                </div>

                <h4 class="my-4 font-weight-bold">XCloud</h4>
                <p class="grey-text">Microsoft</p>

            </div>
            <!--Grid column-->

            <!--Grid column-->
            <div class="col-lg-4 col-md-6 mb-4">

                <div class="view overlay z-depth-1-half">
                    <img src="vendor/images/logos/logo-boosteroid.png" class="img-fluid" alt="">
                    <div class="mask rgba-white-slight"></div>
                </div>

                <h4 class="my-4 font-weight-bold">Boosteroid</h4>
                <p class="grey-text">Boosteroid</p>

            </div>
            <!--Grid column-->

           <!--Grid column-->
            <div class="col-lg-4 col-md-12 mb-4">

                <div class="view overlay z-depth-1-half">
                    <img src="vendor/images/logos/logo-luna.png" class="img-fluid" alt="">
                    <div class="mask rgba-white-slight"></div>
                </div>

                <h4 class="my-4 font-weight-bold">Luna</h4>
                <p class="grey-text">Amazon</p>

            </div>
            <!--Grid column-->

        </div>
        <!--Grid row-->

    </section>
    <!--Section: Examples-->
    </div>
  </main>

  <!-- Footer -->
  <footer class="page-footer font-small unique-color-dark">

    <!-- Social buttons -->
    <div class="primary-color">
        <div class="container">
            <!--Grid row-->
            <div class="row py-4 d-flex align-items-center">

                <!--Grid column-->
                <div class="col-md-6 col-lg-5 text-center text-md-left mb-4 mb-md-0">
                    <h6 class="mb-0 white-text">Get connected with us on social networks!</h6>
                </div>
                <!--Grid column-->

                <!--Grid column-->
                <div class="col-md-6 col-lg-7 text-center text-md-right">
                    <!--Reddit-->
                    <a class="ml-0" href="https://www.reddit.com/r/GeForceNOW/">
                      <i class="fab fa-reddit mr-4"> </i>
                    </a>
                    <!--Discord-->
                    <a class="ml-0" href="https://discordapp.com/invite/wha29Cx">
                        <i class="fab fa-discord mr-4"> </i>
                    </a>
                    <!--Info-->
                    <a class="ml-0" href="/info">
                      <i class="fas fa-info mr-4"> </i>
                    </a>
                    <!--
                    <a class="fb-ic ml-0" href="">
                      <i class="fab fa-facebook white-text mr-4"> </i>
                    </a>
                    <a class="tw-ic">
                        <i class="fab fa-twitter white-text mr-4"> </i>
                    </a>

                    <a class="gplus-ic">
                        <i class="fab fa-google-plus white-text mr-4"> </i>
                    </a>

                    <a class="li-ic">
                        <i class="fab fa-linkedin white-text mr-4"> </i>
                    </a>

                    <a class="ins-ic">
                        <i class="fab fa-instagram white-text mr-lg-4"> </i>
                    </a>
                    -->
                </div>
                <!--Grid column-->

            </div>
            <!--Grid row-->
        </div>
    </div>
    <!-- Social buttons -->
  </footer>


  <script src="vendor/dark-mode-switch.min.js"></script>

  <%- include("partials/analytics.ejs") %>

</body>

</html>
