<!doctype html>
<html lang="en">
  <head>
    <link rel="icon" type="image/png" href="images/wallet.png">
    <title>FinEase &mdash; Financial easy</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">    
    
    <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,700" rel="stylesheet">
    <link rel="stylesheet" href="fonts/icomoon/style.css">

    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/jquery-ui.css">
    <link rel="stylesheet" href="css/owl.carousel.min.css">
    <link rel="stylesheet" href="css/owl.theme.default.min.css">
    <link rel="stylesheet" href="css/owl.theme.default.min.css">

    <link rel="stylesheet" href="css/jquery.fancybox.min.css">

    <link rel="stylesheet" href="css/bootstrap-datepicker.css">

    <link rel="stylesheet" href="fonts/flaticon/font/flaticon.css">

    <link rel="stylesheet" href="css/aos.css">

    <link rel="stylesheet" href="css/style.css">
    
  </head>
  <body data-spy="scroll" data-target=".site-navbar-target" data-offset="300">
  

  <div id="overlayer"></div>
  <div class="loader">
    <div class="spinner-border text-primary" role="status">
      <span class="sr-only">Loading...</span>
    </div>
  </div>


  <div class="site-wrap">

    <div class="site-mobile-menu site-navbar-target">
      <div class="site-mobile-menu-header">
        <div class="site-mobile-menu-close mt-3">
          <span class="icon-close2 js-menu-toggle"></span>
        </div>
      </div>
      <div class="site-mobile-menu-body"></div>
    </div>
    <header class="site-navbar js-sticky-header site-navbar-target" role="banner">

      <div class="container">
        <div class="row align-items-center">
          
          <div class="col-6 col-xl-2">
            <h1 class="mb-0 site-logo"><a href="index.html" class="h2 mb-0">FinEase<span class="text-primary">.</span> </a></h1>
          </div>

          <div class="col-12 col-md-10 d-none d-xl-block">
            <nav class="site-navigation position-relative text-right" role="navigation">

              <ul class="site-menu main-menu js-clone-nav mr-auto d-none d-lg-block">
                <li><a href="#home-section" class="nav-link">Beranda</a></li>
                <li><a href="#about-section" class="nav-link">Fitur</a></li>
                <li><a href="#contact-section" class="nav-link">Kontak</a></li>
                 <li>
                    <button style="
                      background-color: transparent; /* Latar belakang transparan */
                      
                      border: 2px solid transparent; /* Border berwarna */
                      padding: 10px 20px;
                      font-size: 18 px;
                      border-radius: 5px; /* Sudut membulat */
                      cursor: pointer;
                      transition: background-color 0.3s, color 0.3s, transform 0.2s; /* Animasi */
                      outline: none; /* Menghilangkan outline default */
                    " 
                    
                    onclick="window.location.href='pages/login.php'">
                      Login
                    </button>
                  </li>
              </ul>
            </nav>
          </div>
          


          <div class="col-6 d-inline-block d-xl-none ml-md-0 py-3" style="position: relative; top: 3px;"><a href="#" class="site-menu-toggle js-menu-toggle float-right"><span class="icon-menu h3"></span></a></div>

        </div>
      </div>
      
    </header>

  
     
    <div class="site-blocks-cover overlay" style="background-image: url(images/coba2.jpg);" data-aos="fade" id="home-section">

      <div class="container">
        <div class="row align-items-center justify-content-center">

          
          <div class="col-md-10 mt-lg-5 text-center">
            <div class="single-text owl-carousel">
            <div class="slide">
              <h1 class="text-uppercase" data-aos="fade-up">Kelola Mudah</h1>
              <p class="mb-5 desc" data-aos="fade-up" data-aos-delay="100">Temukan cara pintar untuk mengelola anggaran dan pengeluaran dengan sistem rekomendasi.</p>
            </div>

            <div class="slide">
              <h1 class="text-uppercase" data-aos="fade-up">Saran Tepat</h1>
              <p class="mb-5 desc" data-aos="fade-up" data-aos-delay="100">Dapatkan saran tepat berdasarkan pengeluaran dan prioritas keuangan Anda.</p>
            </div>

            <div class="slide">
              <h1 class="text-uppercase" data-aos="fade-up">Tenang Finansial</h1>
              <p class="mb-5 desc" data-aos="fade-up" data-aos-delay="100">Gunakan teknologi terbaru untuk merencanakan masa depan keuangan yang lebih baik.</p>
            </div>


            </div>
          </div>
            
        </div>
      </div>

      <a href="#next" class="mouse smoothscroll">
        <span class="mouse-icon">
          <span class="mouse-wheel"></span>
        </span>
      </a>
    </div>  

    <div class="site-section cta-big-image" id="about-section">
      <div class="container">
        <div class="row mb-5 justify-content-center">
          <div class="col-md-8 text-center">
            <p class="lead"  data-aos-delay="">Fitur Fitur</p>
            <h2 class="section-title mb-3"  data-aos-delay="">01. Pantau Keuangan</h2>
            
          </div>
        </div>
        <div class="row">
          <div class="col-lg-6 mb-5" data-aos="fade-right" data-aos-delay="300">
            <figure class="circle-bg">
            <img src="images/hp1.png" alt="Free Website Template by Free-Template.co" class="img-fluid">
            </figure>
          </div>
          <div class="col-lg-5 ml-auto" data-aos="fade-up" data-aos-delay="100">
            
            <h3 class="text-black mb-4">Pantau Keuangan di Mana Saja</h3>

            <p>Dengan aplikasi kami yang mudah digunakan di berbagai platform, Anda bisa memantau pengeluaran dan pemasukan kapan saja. Dapatkan notifikasi langsung dan ikhtisar singkat tentang kondisi keuangan Anda di ujung jari Anda.</p>
            <p>Tetap terhubung dengan anggaran dan rencana keuangan Anda, di mana pun Anda berada. Aplikasi kami memastikan Anda selalu mendapatkan informasi terbaru tentang keuangan pribadi Anda.</p>
          </div>
        </div>    
        
      </div>  
    </div>

    <div class="site-section cta-big-image special-about-section" id="about-section">
      <div class="container">
        <div class="row mb-5 justify-content-center">
          <div class="col-md-8 text-center">
            <p class="lead">Fitur Fitur</p>
            <h2 class="section-title mb-3">02. Analisis   keuangan</h2>
            
          </div>
        </div>
        <div class="row about-us-special" >
          <div class="col-lg-6" data-aos="fade-up" data-aos-delay="100">
            <h3 class="text-black mb-4">Analisis Mendalam dengan Mudah</h3>
            <p>Fitur dashboard di laptop memungkinkan Anda untuk menganalisis keuangan secara mendalam. Tampilkan laporan terperinci tentang pengeluaran dan pendapatan, serta tren keuangan untuk membantu Anda merencanakan anggaran secara efektif.</p>
            <p>Temukan pola dan insight yang membantu Anda membuat keputusan finansial yang lebih cerdas. Dengan tampilan yang interaktif, Anda bisa merencanakan masa depan keuangan Anda dengan lebih baik.</p>
          </div>
          <div class="col-lg-6 mb-5" data-aos="fade-left" data-aos-delay="300">
            <figure class="circle-bg">
              <img src="images/hero_1.png" alt="Deskripsi Gambar" class="img-fluid">
            </figure>
          </div >
        </div>
      </div>
    </div>
    

    <div class="site-section cta-big-image" id="about-section">
      <div class="container">
        <div class="row mb-5 justify-content-center">
          <div class="col-md-8 text-center">
            <p class="lead"  data-aos-delay="">Fitur Fitur</p> 
            <h2 class="section-title mb-3"  data-aos-delay="">03. Saran Cerdas</h2>
            
          </div>
        </div>
        <div class="row">
          <div class="col-lg-6 mb-5" data-aos="fade-right" data-aos-delay="300">
            <figure class="circle-bg">
            <img src="images/tablet.png" alt="Free Website Template by Free-Template.co" class="img-fluid">
            </figure>
          </div>
          <div class="col-lg-5 ml-auto" data-aos="fade-up" data-aos-delay="100">
            
            <h3 class="text-black mb-4">Saran Cerdas di Tangan Anda</h3>

            <p>Alat bantu perencanaan keuangan yang kuat dengan fitur rekomendasi pintar kami. Dapatkan saran yang disesuaikan berdasarkan data pengeluaran dan tujuan keuangan Anda.</p>

            <p>Dengan panduan yang relevan dan personal, Anda dapat membuat keputusan finansial yang lebih baik dan mencapai tujuan keuangan Anda lebih cepat. Manfaatkan tablet Anda untuk perencanaan keuangan yang efektif.</p>
            
          </div>
        </div>
      </div>  
    </div>


    <section class="site-section bg-light" id="contact-section" data-aos="fade">
      <div class="container">
        <div class="row mb-5">
          <div class="col-12 text-center">
            <h2 class="section-title mb-3">Contact Us</h2>
          </div>
        </div>
        <div class="row mb-5">
          


          <div class="col-md-4 text-center">
            <p class="mb-4">
              <span class="icon-room d-block h2 text-primary"></span>
              <span>203 Fake St. Mountain View, San Francisco, California, USA</span>
            </p>
          </div>
          <div class="col-md-4 text-center">
            <p class="mb-4">
              <span class="icon-phone d-block h2 text-primary"></span>
              <a href="#">+1 232 3235 324</a>
            </p>
          </div>
          <div class="col-md-4 text-center">
            <p class="mb-0">
              <span class="icon-mail_outline d-block h2 text-primary"></span>
              <a href="#">youremail@domain.com</a>
            </p>
          </div>
        </div>
        <div class="row">
          <div class="col-md-12 mb-5">     
          </div>
        </div>
      </div>
    </section>

    
    <footer class="site-footer">
      <div class="container">
        <div class="row">
          <div class="col-md-9">
            <div class="row">
              <div class="col-md-5">
                <h2 class="footer-heading mb-4">About Us</h2>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Neque facere laudantium magnam voluptatum autem. Amet aliquid nesciunt veritatis aliquam.</p>
              </div>
              <div class="col-md-3 ml-auto">
                <h2 class="footer-heading mb-4">Quick Links</h2>
                <ul class="list-unstyled">
                  <li><a href="#about-section" class="smoothscroll">Terms</a></li>
                  <li><a href="#about-section" class="smoothscroll">Policy</a></li>
                  <li><a href="#about-section" class="smoothscroll">About Us</a></li>
                  <li><a href="#services-section" class="smoothscroll">Services</a></li>
                  <li><a href="#testimonials-section" class="smoothscroll">Testimonials</a></li>
                  <li><a href="#contact-section" class="smoothscroll">Contact Us</a></li>
                </ul>
              </div>
              <div class="col-md-3 footer-social">
                <h2 class="footer-heading mb-4">Follow Us</h2>
                <a href="#" class="pl-0 pr-3"><span class="icon-facebook"></span></a>
                <a href="#" class="pl-3 pr-3"><span class="icon-twitter"></span></a>
                <a href="#" class="pl-3 pr-3"><span class="icon-instagram"></span></a>
                <a href="#" class="pl-3 pr-3"><span class="icon-linkedin"></span></a>
              </div>
            </div>
          </div>
          <div class="col-md-3">
            <h2 class="footer-heading mb-4">Subscribe Newsletter</h2>
            <form action="#" method="post" class="footer-subscribe">
              <div class="input-group mb-3">
                <input type="text" class="form-control border-secondary text-white bg-transparent" placeholder="Enter Email" aria-label="Enter Email" aria-describedby="button-addon2">
                <div class="input-group-append">
                  <button class="btn btn-primary text-black" type="button" id="button-addon2">Send</button>
                </div>
              </div>
            </form>
          </div>
        </div>
        <div class="row pt-5 mt-5 text-center">
          <div class="col-md-12">
            <div class="border-top pt-5">
              <p class="copyright"><small>
              
        
            </div>
          </div>
          
        </div>
      </div>
    </footer>

  </div> <!-- .site-wrap -->

  <script src="js/jquery-3.3.1.min.js"></script>
  <script src="js/jquery-ui.js"></script>
  <script src="js/popper.min.js"></script>
  <script src="js/bootstrap.min.js"></script>
  <script src="js/owl.carousel.min.js"></script>
  <script src="js/jquery.countdown.min.js"></script>
  <script src="js/jquery.easing.1.3.js"></script>
  <script src="js/aos.js"></script>
  <script src="js/jquery.fancybox.min.js"></script>
  <script src="js/jquery.sticky.js"></script>
  <script src="js/isotope.pkgd.min.js"></script>
  <script src="js/main.js"></script>

  </body>
</html>