<%- include('top') %>



   <header class="slider-main">
      <div id="carouselExampleIndicators" class="carousel slide carousel-fade" data-ride="carousel">
         <ol class="carousel-indicators">
            <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
            <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
            <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
         </ol>
         <div class="carousel-inner" role="listbox">
            <!-- Slide One - Set the background image for this slide in the line below -->
            <div class="carousel-item active" style="background-image: url('images/slider-01.jpg')">
               <div class="carousel-caption d-none d-md-block">
                  <h3>Welcome to EcoSaver</h3>
                  <p>The current airviro system in used by NEA only has 14 substations to record air quality. Our
                     project aims to supplement data to NEA and also allow the general consumer to access our IoT sensor
                     data through a web service.</p>
               </div>
            </div>
            <!-- Slide Two - Set the background image for this slide in the line below -->
            <div class="carousel-item" style="background-image: url('images/slider-02.jpg')">
               <div class="carousel-caption d-none d-md-block">
                  <h3>Fresh Air</h3>
                  <p>A Great day for jogging</p>
               </div>
            </div>
            <!-- Slide Three - Set the background image for this slide in the line below -->
            <div class="carousel-item" style="background-image: url('images/slider-03.jpg')">
               <div class="carousel-caption d-none d-md-block">
                  <h3>Welcome to EcoSaver</h3>
                  <p>Hope you enjoy!</p>
               </div>
            </div>
         </div>
         <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
         </a>
         <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
         </a>
      </div>
   </header>
   <!-- Page Content -->
   <div class="container">
      <div class="services-bar">
         <h1 class="my-4">Services </h1>
         <!-- Services Section -->
         <div class="row">
            <div class="col-lg-4 mb-4">
               <div class="card">
                  <h4 class="card-header">Humidity</h4>
                  <div class="card-body text-center">
                     <p class="card-text display-4"> 70% - 75% </p>
                  </div>
                  <div class="card-footer">
                     <a href="/learnmore" class="btn btn-primary">Learn More</a>
                  </div>
               </div>
            </div>
            <div class="col-lg-4 mb-4">
               <div class="card">
                  <h4 class="card-header">Air Quality Index</h4>
                  <div class="card-body text-center">
                     <p class="card-text display-4"> 15 - 18 PSI </p>
                  </div>
                  <div class="card-footer">
                     <a href="/learnmore" class="btn btn-primary">Learn More</a>
                  </div>
               </div>
            </div>
            <div class="col-lg-4 mb-4">
               <div class="card">
                  <h4 class="card-header">Temperature</h4>
                  <div class="card-body text-center">
                     <p class="card-text display-4"> 30&deg; - 37&deg; </p>
                  </div>
                  <div class="card-footer">
                     <a href="/learnmore" class="btn btn-primary">Learn More</a>
                  </div>
               </div>
            </div>
         </div>
         <!-- /.row -->
      </div>
      <!-- About Section -->
      <div class="about-main">
         <div class="row">
            <div class="col-lg-6">
               <title>EcoSaver - Your Air Quality Index Source</title>
               <link rel="stylesheet" href="css/style.css">

               </head>

               <body>
                  <header>
                     <h1>Welcome to EcoSaver - Your Air Quality Index Source</h1>
                     <p>We prioritize your well-being by providing up-to-date information on air quality indexes.</p>
                  </header>

                  <section class="approach">
                     <h2>Our Approach: Smart and Informative</h2>
                     <p>We believe in offering precise and comprehensive data to empower your decisions for a better
                        quality of life.</p>
                     <ul>
                        <li>Presenting real-time air quality data in a user-friendly format.</li>
                        <li>Equipping you with insights into the impact of air quality on health and the environment.
                        </li>
                        <li>Empowering communities with knowledge to make informed choices for a sustainable future.
                        </li>
                     </ul>
                  </section>
            </div>
            <div class="col-lg-6">
               <img class="img-fluid rounded" src="images/about-img.jpg" alt="" />
            </div>
         </div>
      </div>
   </div>
   <hr>
   </div>
<%- include('bot') %>
