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


    <head>
        <%- include('head'); %>
            <!-- local css -->
            <link rel="stylesheet" href="/style/styles.css" class="css">

    </head>

    <body>
        <!-- Background image -->
        <div id="intro" class="bg-image" style="background-image: url('/img/nasa-Q1p7bh3SHj8-unsplash.jpg'); height: 100vh;">
            <div class="mask text-white " style="background-color: rgba(0, 0, 0, 0.8)">
                <div class="container d-flex align-items-center h-100">

                    <div>
                        <h1 class="mb-5">Create or watch seamlessly.</h1>
                        <p>
                            With fast uploads, fast downloads, and no data caps, live streams have never looked
                            better.
                        </p>

                        <div class="input-group mb-3">

                            <input type="text" class="form-control" placeholder="Your Contact"
                                aria-label="Example text with button addon" aria-describedby="button-addon1" />
                            <button class="btn btn-outline-light" type="button" id="button-addon1"
                                data-mdb-ripple-color="dark">
                                Ask for contact
                            </button>
                        </div>
                    </div>


                </div>
            </div>
        </div>
        <!-- Background image -->
        
        <%- include('header'); %>


            <div data-aos="flip-right" class="p-5 container my-5 text-center bg-light" style="margin-top: 58px;">
                <h1 class="mb-3 text-primary">Your internet from a company that believes everyone deserves fast,
                    reliable,
                    fairly priced
                    internet. </h1>

                <a class="btn btn-primary" href="/pakages" role="button">Learn more</a>
            </div>


            <!-- carousel -->
            <div data-aos="fade-right" id="carouselExampleCaptions" class="carousel slide" data-mdb-ride="carousel">
                <div class="carousel-indicators">
                    <button type="button" data-mdb-target="#carouselExampleCaptions" data-mdb-slide-to="0"
                        class="active" aria-current="true" aria-label="Slide 1"></button>
                    <button type="button" data-mdb-target="#carouselExampleCaptions" data-mdb-slide-to="1"
                        aria-label="Slide 2"></button>
                    <button type="button" data-mdb-target="#carouselExampleCaptions" data-mdb-slide-to="2"
                        aria-label="Slide 3"></button>
                </div>
                <div class="carousel-inner">
                    <div class="carousel-item active">
                        <img src="/img/device.jpg" class="carasol-image d-block w-100" alt="..." />
                        <div class="carousel-caption d-none d-md-block">
                            <h5 class="text-primary">Try Optimum Mobile</h5>
                            <p class="text-white">With Optimum Mobile, plus Suddenlink's high-speed Internet, you get a
                                seamless connection
                                at home and on the go.</p>
                        </div>
                    </div>
                    <div class="carousel-item">
                        <img src="/img/device-all.jpg" class="carasol-image d-block w-100" alt="..." />
                        <div class="carousel-caption d-none d-md-block">
                            <h5 class="text-primary">Latest technology</h5>
                            <p class="text-white">Get the most advanced WiFi technology and greater whole home coverage
                                with Smart WiFi 6,
                                now powered by Suddenlink.</p>
                        </div>
                    </div>
                    <div class="carousel-item">
                        <img src="/img/laptop.jpg" class="carasol-image d-block w-100" alt="..." />
                        <div class="carousel-caption d-none d-md-block">
                            <h5 class="text-primary">Optimum FlexAbility</h5>
                            <p class="text-dark">Pick the speed that works for you â€“ with up to 1 Gig Internet. Change
                                anytime with no
                                annual contract. Plus, no hidden fees.</p>
                        </div>
                    </div>
                </div>
                <button class="carousel-control-prev" type="button" data-mdb-target="#carouselExampleCaptions"
                    data-mdb-slide="prev">
                    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                    <span class="visually-hidden">Previous</span>
                </button>
                <button class="carousel-control-next" type="button" data-mdb-target="#carouselExampleCaptions"
                    data-mdb-slide="next">
                    <span class="carousel-control-next-icon" aria-hidden="true"></span>
                    <span class="visually-hidden">Next</span>
                </button>
            </div>
            <!-- carousel -->

            <section data-aos="flip-left">
                <div class="row my-5">
                    <div class="col-md-6 gx-5 mb-4">
                        <div class="bg-image hover-overlay ripple shadow-2-strong rounded-5"
                            data-mdb-ripple-color="light">
                            <img src="/img/wifi.jpg" class="img-fluid" />
                            <a href="#!">
                                <div class="mask" style="background-color: rgba(251, 251, 251, 0.15);"></div>
                            </a>
                        </div>
                    </div>

                    <div class="col-md-6 gx-5 mb-4">
                        <h1 class="text-primary">Stay connected on an enhanced network, on your terms. With High Speed
                            WiFi
                        </h1>

                        <h4 class="m-3"><strong>Your favorite shows
                                and streaming apps,
                                all in one</strong></h4>
                        <p class="text-muted">
                            Your favorite shows and streaming apps all in one
                            network. FREE upto 20 Mbps Internet & the fastest
                            speed available in select areas.
                        </p>
                    </div>
                </div>
            </section>
            </div>
            <!-- Footer -->
            <%- include('footer'); %>
            <script type="text/javascript" src="/app/index.js"></script>
                <!-- MDB -->
    </body>
    <%- include('pages/model'); %>

</html>