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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>GameSense</title>

    <!-- Preload critical resources -->
    <link rel="preload" href="static/css/style.css" as="style">
    <link rel="preload" href="static/css/font-awesome.min.css" as="style">
    <link rel="preload" href="https://fonts.googleapis.com/css?family=Raleway:900,400" as="style">

    <!-- Favicon -->
    <link href="favicon.ico" rel="icon" type="image/x-icon">

    <!-- Stylesheets -->
    <link href="https://fonts.googleapis.com/css?family=Raleway:900,400" rel="stylesheet">
    <link href="static/css/style.css" rel="stylesheet">
    <link href="static/css/font-awesome.min.css" rel="stylesheet">
    <link href="static/css/bootstrap.min.css" rel="stylesheet">

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

    <!-- Font Awesome 6.7.1 -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.1/css/all.min.css" rel="stylesheet">

    <script src="ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <script src="bootstrap/3.3.4/js/bootstrap.min.js"></script>
    <script src="static/js/scrollreveal.min.js"></script>
    <script src="static/js/script.js"></script>

</head>

<body>
    <!-- Navbar -->
    <nav class="gs-navbar">
        <div class="gs-nav-container">
            <ul>
                <li class="active"><a href="../Index/index.html"><i class="fa fa-home"></i></a></li>
                <li><a href="../features/index.html">FEATURES</a></li>
                <li><a href="../purchase/index.html">PURCHASE</a></li>
                <li><a href="https://gamesense.pub/">FORUMS</a></li>
            </ul>
        </div>
    </nav>

    <div class="divide"></div>

    <!-- Main Content -->
    <div class="container" id="jumbo-container">
        <div class="jumbotron" id="jumbo">
            <div id="header" data-sr="enter bottom and scale up 50% over 1s no reset">
                <div id="title">
                    <h1>game<span>sense</span></h1>
                    <h3>Get good. Get GameSense.</h3>
                </div>
            </div>
            <div class="row" id="feats">
                <div class="col-md-4">
                    <i class="fa fa-lock feats-icon"></i>
                    <h3>Secure</h3>
                    <p>Play with confidence.</p>
                </div>
                <div class="col-md-4">
                    <i class="fa fa-wrench feats-icon"></i>
                    <h3>Customizable</h3>
                    <p>Take a look at the <a href="../features/index.html">feature showcase</a>.</p>
                </div>
                <div class="col-md-4">
                    <i class="fa fa-money feats-icon"></i>
                    <h3>Affordable</h3>
                    <p>Only $19.99/month.</p>
                </div>
            </div>
            <div id="purchase">
                <div id="purchase">
                    <a class="btn btn-default btn-lg" href="https://t.me/tripgamesense">Contact</a>
                    <a class="btn btn-primary btn-lg" href="../purchase/index.html">Purchase</a>
                    <a class="btn btn-default btn-lg" href="../features/index.html">Screenshots</a>
                </div>


                <!-- Scripts -->
                <script defer src="ajax/libs/jquery/1.11.2/jquery.min.js"></script>
                <script defer src="bootstrap/3.3.4/js/bootstrap.min.js"></script>
                <script defer src="static/js/scrollreveal.min.js"></script>
            </div>
        </div>
    </div>
    <div class="container">
        <div id="footer">
            <p>GameSense 2024</p>
        </div>
    </div>
</body>

</html>