<?php  
  // ini untuk menyambungkan ke file lain
  session_start();
  include 'konek.php';
  // disini jika status udah login, bisa akses dashboard
  // if($_SESSION['status_login'] !=true) {
  //   echo '<script>window.location="loginn.php"</script>';
  // }

?>

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

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Fixit - Explore new horizons</title>

  <!-- 
    - favicon
  -->
  <!-- <link rel="shortcut icon" href="./favicon.svg" type="image/svg+xml"> -->

  <!-- 
    - custom css link
  -->
  <link rel="stylesheet" href="buying.css">

  <!-- 
    - google font link
  -->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600&family=Open+Sans&display=swap"
    rel="stylesheet">
</head>

<body>

  <!-- 
    - #HEADER
  -->

  <header class="header" style="background-color: #1a2642;" data-header>
    <div class="container">

      <div class="overlay" data-overlay></div>

      <!-- <a href="#" class="logo">
        <img src="./assets/images/logo.svg" alt="Ridex logo">
      </a> -->

      <nav class="navbar" data-navbar>
        <ul class="navbar-list">

          <!-- <li>
            <a href="#home" class="navbar-link" data-nav-link>Home</a>
          </li> -->

          <li>
            <a href="buying.php" class="navbar-link" data-nav-link style="color: white;">Home</a>
          </li>
          
          <li>
            <a href="#footer" class="navbar-link" data-nav-link style="color: white;">Contact</a>
          </li>

        </ul>
      </nav>

      <div class="header-actions">

        <!-- <div class="header-contact">
          <a href="tel:88002345678" class="contact-link">8 800 234 56 78</a>

          <span class="contact-time">Mon - Sat: 9:00 am - 6:00 pm</span>
        </div> -->

        <a href="#featured-car" class="btn" aria-labelledby="aria-label-txt">
          <ion-icon name="car-outline"></ion-icon>

          <span id="aria-label-txt">Let's Explore</span>
        </a>

        <a href="profil.php" class="btn user-btn" aria-label="Profile">
          <ion-icon name="person-outline"></ion-icon>
        </a>

        <button class="nav-toggle-btn" data-nav-toggle-btn aria-label="Toggle Menu">
          <span class="one"></span>
          <span class="two"></span>
          <span class="three"></span>
        </button>

      </div>

    </div>
  </header>






  <main>
    <article>

      <!-- 
        - #HERO
      -->

       <section class="section hero" id="home" aria-labelledby="buying-label"
        style="background-image: url('service-bg.jpg')">
        <div class="container">

          <div class="hero-content">
            <strong><h1 class="h1 hero-text">Enjoy an easy and secure vehicles buying process</h1></strong>

            <p class="hero-text">
              Right place to own your car
            </p>
          </div>

          <div class="hero-banner"></div>

          <!-- <form action="" class="hero-form">

            <div class="input-wrapper">
              <label for="input-1" class="input-label">Type, model, or brand</label>

              <input type="text" name="car-model" id="input-1" class="input-field"
                placeholder="What vehicles are you looking?">
            </div>

            <div class="input-wrapper">
              <label for="input-2" class="input-label">Max. monthly payment</label>

              <input type="text" name="monthly-pay" id="input-2" class="input-field" placeholder="Add an amount in Rp.">
            </div>

            <div class="input-wrapper">
              <label for="input-3" class="input-label">Production Year</label>

              <input type="text" name="year" id="input-3" class="input-field" placeholder="Add a minimal year">
            </div>

            <button type="submit" class="btn">Search</button>

          </form> -->

        </div>
      </section>





      <!-- 
        - #FEATURED CAR
      -->


      <section class="section featured-car" id="featured-car"  style="background-image: url('service-bg.jpg')">
        <div class="container">

          <div class="title-wrapper">
            <h2 class="h2 section-title">Featured Electric Motorcycle</h2>

            <!-- <a href="#" class="featured-car-link">
              <span>View more</span>

              <ion-icon name="arrow-forward-outline"></ion-icon>
            </a> -->
          </div>

          <ul class="featured-car-list">

            <li>
              <div class="featured-car-card">

                <figure class="card-banner">
                  <img src="Vespa_Elettrica.png" alt="Toyota RAV4 2021" loading="lazy" width="440" height="300"
                    class="w-100">
                </figure>

                <div class="card-content">

                  <div class="card-title-wrapper">
                    <h3 class="h3 card-title">
                       <a href="mailto:alvitaazalia03@gmail.com?subject=Good%20Morning&body=Hello,%20Your%20product%20looks%20cool,%20i'm%20interested%20to%20your%20product,%20is%20it%20available%20now?">Vespa Elettrica</a>
                    </h3>

                    <data class="year" value="2022">2022</data>
                  </div>

                  <ul class="card-list">

                    <!-- <li class="card-list-item">
                      <ion-icon name="people-outline"></ion-icon>

                      <span class="card-item-text">4 People</span>
                    </li> -->

                    <li class="card-list-item">
                      <ion-icon name="flash-outline"></ion-icon>

                      <span class="card-item-text">Electric</span>
                    </li>

                    <li class="card-list-item">
                      <ion-icon name="speedometer-outline"></ion-icon>

                      <span class="card-item-text"> - / 1-litre</span>
                    </li>

                    <li class="card-list-item">
                      <ion-icon name="hardware-chip-outline"></ion-icon>

                      <span class="card-item-text">Automatic</span>
                    </li>

                  </ul>

                  <div class="card-price-wrapper">

                    <p class="card-price">
                      <strong>Rp 200.000.000,-</strong> 
                    </p>

                    <!-- <button class="btn fav-btn" aria-label="Add to favourite list">
                      <ion-icon name="heart-outline"></ion-icon>
                    </button>

                    <button class="btn">Buy now</button> -->

                  </div>

                </div>

              </div>
            </li>

            <li>
              <div class="featured-car-card">

                <figure class="card-banner">
                  <img src="Zero_SRF.png" alt="BMW 3 Series 2019" loading="lazy" width="440" height="300"
                    class="w-100">
                </figure>

                <div class="card-content">

                  <div class="card-title-wrapper">
                    <h3 class="h3 card-title">
                      <a href="mailto:alvitaazalia03@gmail.com?subject=Good%20Morning&body=Hello,%20Your%20product%20looks%20cool,%20i'm%20interested%20to%20your%20product,%20is%20it%20available%20now?">Zero SRF</a>
                    </h3>

                    <data class="year" value="2022">2022</data>
                  </div>

                  <ul class="card-list">

                  <!--   <li class="card-list-item">
                      <ion-icon name="people-outline"></ion-icon>

                      <span class="card-item-text">4 People</span>
                    </li> -->

                    <li class="card-list-item">
                      <ion-icon name="flash-outline"></ion-icon>

                      <span class="card-item-text">Electric</span>
                    </li>

                    <li class="card-list-item">
                      <ion-icon name="speedometer-outline"></ion-icon>

                      <span class="card-item-text"> - / 1-litre</span>
                    </li>

                    <li class="card-list-item">
                      <ion-icon name="hardware-chip-outline"></ion-icon>

                      <span class="card-item-text">Automatic</span>
                    </li>

                  </ul>

                  <div class="card-price-wrapper">

                    <p class="card-price">
                      <strong>RP 400.000.000,-</strong>
                    </p>

                    <!-- <button class="btn fav-btn" aria-label="Add to favourite list">
                      <ion-icon name="heart-outline"></ion-icon>
                    </button>

                    <button class="btn">Buy now</button>
 -->
                  </div>

                </div>

              </div>
            </li>

            <li>
              <div class="featured-car-card">

                <figure class="card-banner">
                  <img src="Energica_Ego.png" alt="Volkswagen T-Cross 2020" loading="lazy" width="440"
                    height="300" class="w-100">
                </figure>

                <div class="card-content">

                  <div class="card-title-wrapper">
                    <h3 class="h3 card-title">
                      <a href="mailto:alvitaazalia03@gmail.com?subject=Good%20Morning&body=Hello,%20Your%20product%20looks%20cool,%20i'm%20interested%20to%20your%20product,%20is%20it%20available%20now?">Energica Ego</a>
                    </h3>

                    <data class="year" value="2016">2016</data>
                  </div>

                  <ul class="card-list">

                    <!-- <li class="card-list-item">
                      <ion-icon name="people-outline"></ion-icon>

                      <span class="card-item-text">2 People</span>
                    </li> -->

                    <li class="card-list-item">
                      <ion-icon name="flash-outline"></ion-icon>

                      <span class="card-item-text">Electric</span>
                    </li>

                    <li class="card-list-item">
                      <ion-icon name="speedometer-outline"></ion-icon>

                      <span class="card-item-text">8km / 1-litre</span>
                    </li>

                    <li class="card-list-item">
                      <ion-icon name="hardware-chip-outline"></ion-icon>

                      <span class="card-item-text">Single-manual</span>
                    </li>

                  </ul>

                  <div class="card-price-wrapper">

                    <p class="card-price">
                      <strong>RP 900.000.000,-</strong>
                    </p>

                   <!--  <button class="btn fav-btn" aria-label="Add to favourite list">
                      <ion-icon name="heart-outline"></ion-icon>
                    </button>

                    <button class="btn">Buy now</button>
 -->
                  </div>

                </div>

              </div>
            </li>

            <li>
              <div class="featured-car-card">

                <figure class="card-banner">
                  <img src="Harley-Davidson_LiveWire.png" alt="Cadillac Escalade 2020" loading="lazy" width="440"
                    height="300" class="w-100">
                </figure>

                <div class="card-content">

                  <div class="card-title-wrapper">
                    <h3 class="h3 card-title">
                      <a href="mailto:alvitaazalia03@gmail.com?subject=Good%20Morning&body=Hello,%20Your%20product%20looks%20cool,%20i'm%20interested%20to%20your%20product,%20is%20it%20available%20now?">Harley Davidson LiveWire</a>
                    </h3>

                    <data class="year" value="2021">2021</data>
                  </div>

                  <ul class="card-list">

                    <!-- <li class="card-list-item">
                      <ion-icon name="people-outline"></ion-icon>

                      <span class="card-item-text">4 People</span>
                    </li> -->

                    <li class="card-list-item">
                      <ion-icon name="flash-outline"></ion-icon>

                      <span class="card-item-text">Electric</span>
                    </li>

                    <li class="card-list-item">
                      <ion-icon name="speedometer-outline"></ion-icon>

                      <span class="card-item-text">6-8km / 1-kwh</span>
                    </li>

                    <li class="card-list-item">
                      <ion-icon name="hardware-chip-outline"></ion-icon>

                      <span class="card-item-text">Single-manual</span>
                    </li>

                  </ul>

                  <div class="card-price-wrapper">

                    <p class="card-price">
                      <strong>RP 700,000,000,-</strong>
                    </p>

                   <!--  <button class="btn fav-btn" aria-label="Add to favourite list">
                      <ion-icon name="heart-outline"></ion-icon>
                    </button>

                    <button class="btn">Buy now</button> -->

                  </div>

                </div>

              </div>
            </li>

            <li>
              <div class="featured-car-card">

                <figure class="card-banner">
                  <img src="KTM_Freeride_E-XC.png" alt="BMW 4 Series GTI 2021" loading="lazy" width="440"
                    height="300" class="w-100">
                </figure>

                <div class="card-content">

                  <div class="card-title-wrapper">
                    <h3 class="h3 card-title">
                      <a href="mailto:alvitaazalia03@gmail.com?subject=Good%20Morning&body=Hello,%20Your%20product%20looks%20cool,%20i'm%20interested%20to%20your%20product,%20is%20it%20available%20now?">KTM Freeride E-XC</a>
                    </h3>

                    <data class="year" value="2022">2018</data>
                  </div>

                  <ul class="card-list">

                    <!-- <li class="card-list-item">
                      <ion-icon name="people-outline"></ion-icon>

                      <span class="card-item-text">2 People</span>
                    </li> -->

                    <li class="card-list-item">
                      <ion-icon name="flash-outline"></ion-icon>

                      <span class="card-item-text">Electric</span>
                    </li>

                    <li class="card-list-item">
                      <ion-icon name="speedometer-outline"></ion-icon>

                      <span class="card-item-text">40-45km / 1-litre</span>
                    </li>

                    <li class="card-list-item">
                      <ion-icon name="hardware-chip-outline"></ion-icon>

                      <span class="card-item-text">Automatic</span>
                    </li>

                  </ul>

                  <div class="card-price-wrapper">

                    <p class="card-price">
                      <strong>RP 225,000,000,-</strong>
                    </p>

                   <!--  <button class="btn fav-btn" aria-label="Add to favourite list">
                      <ion-icon name="heart-outline"></ion-icon>
                    </button>

                    <button class="btn">Buy now</button> -->

                  </div>

                </div>

              </div>
            </li>



          </ul>

        </div>
      </section>



   <!-- 
    - #FOOTER
  -->
<footer class="footer" id="footer"  style="background-image: url('service-bg.jpg')" >

    <div class="footer-top section" style="background-color: #1a2642;">
      <div class="container">


        <ul class="footer-list">

          <li>
            <p class="h1">Opening Hours</p>
          </li>

          <li>
            <p class="p">Monday – Friday</p>

            <span class="h3" style="background-color: #1a2642;">09.00 – 14.45</span>
          </li>


          <li>
            <p class="p">Saturday – Sunday</p>

            <span class="h3">12.00 – 17.00</span>
          </li>

        </ul>

        <ul class="footer-list">

          <li>
            <p class="h1">Contact Info</p>
          </li>

          <li>
              <span class="h3">call:</span>

              <span class="p">089660294320</span>
          </li>

          <li>
              <span class="h3">instagram:</span>

              <span class="p">@fixit</span>
            </a>
          </li>

          <li>

              <span class="h3">location on:</span>

              <span class="p">Jababeka Education Park, Jl. Ki Hajar Dewantara, RT.2/RW.4, Mekarmukti, Kec. Cikarang Utara, Kabupaten Bekasi, Jawa Barat 17530</span>

          </li>

        </ul>

      </div>

      <img src="footer-shape-3.png" width="637" height="173" loading="lazy" alt="Shape"
        class="shape shape-3 move-anim">

    </div>

    <div class="footer-bottom">
      <div class="container">

        
          <small style="color: black;">Copyright & copy; 2023 - FIXIT.</small>


        <img src="footer-shape-2.png" width="778" height="335" loading="lazy" alt="Shape"
          class="shape shape-2">

        <img src="footer-shape-1.png" width="805" height="652" loading="lazy" alt="Red Car"
          class="shape shape-1 move-anim">

      </div>
    </div>

  </footer>



  <!-- 
    - custom js link
  -->
  <script src="script.js"></script>

  <!-- 
    - ionicon link
  -->
  <script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
  <script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>

</body>

</html>