Tutorial Membuat Website Sewa Motor Untuk Pemula

Section Header

<style>
  /* --- CSS VARIABLES & RESET --- */
  :root {
    --hue: 180;
    --first-color: hsl(var(--hue), 80%, 48%);
    --first-color-alt: hsl(var(--hue), 80%, 44%);
    --white-color: hsl(var(--hue), 8%, 92%);
    --black-color: hsl(var(--hue), 4%, 8%);
    --gray-color: hsl(var(--hue), 4%, 50%);
    --body-color: hsl(var(--hue), 8%, 8%);
    --container-color: hsl(var(--hue), 8%, 12%);
    --body-font: "Unbounded", sans-serif;
  }

  /* Import Google Fonts Unbounded */
  @import url('https://fonts.googleapis.com/css2?family=Unbounded:wght@300;400;600;700&display=swap');

  .custom-header {
    font-family: var(--body-font);
    background-color: var(--body-color);
    color: var(--white-color);
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(10px);
  }

  .nav-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 1rem 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  /* Logo */
  .nav-logo {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--white-color);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }

  .nav-logo span {
    color: var(--first-color);
  }

  /* Nav Menu */
  .nav-menu {
    display: flex;
    list-style: none;
    gap: 2rem;
    align-items: center;
    margin: 0;
    padding: 0;
  }

  .nav-link {
    color: var(--gray-color);
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 400;
    transition: color 0.3s ease;
  }

  .nav-link:hover,
  .nav-link.active {
    color: var(--first-color);
  }

  /* CTA Button */
  .nav-btn {
    background-color: var(--first-color);
    color: var(--black-color);
    padding: 0.7rem 1.5rem;
    border-radius: 4px;
    font-size: 0.8rem;
    font-weight: 600;
    text-decoration: none;
    transition: background-color 0.3s ease, transform 0.2s ease;
  }

  .nav-btn:hover {
    background-color: var(--first-color-alt);
    transform: translateY(-2px);
  }

  /* Mobile Toggle Button */
  .nav-toggle {
    display: none;
    cursor: pointer;
    font-size: 1.5rem;
    color: var(--white-color);
  }

  /* Responsive Design */
  @media screen and (max-width: 768px) {
    .nav-container {
      padding: 1rem 1.5rem;
    }

    .nav-toggle {
      display: block;
    }

    .nav-menu {
      position: fixed;
      top: 70px;
      left: -100%;
      width: 100%;
      height: calc(100vh - 70px);
      background-color: var(--container-color);
      flex-direction: column;
      justify-content: center;
      gap: 2rem;
      transition: left 0.4s ease;
      border-top: 1px solid rgba(255, 255, 255, 0.08);
    }

    .nav-menu.show-menu {
      left: 0;
    }
  }
</style>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<!-- HTML STRUCTURE -->
<header class="custom-header">
  <nav class="nav-container">
    <a href="#" class="nav-logo">
      LOMBOK<span>RIDE</span>
    </a>

    <ul class="nav-menu" id="nav-menu">
      <li><a href="#" class="nav-link active">Beranda</a></li>
      <li><a href="#armada" class="nav-link">Armada</a></li>
      <li><a href="#cara-sewa" class="nav-link">Cara Sewa</a></li>
      <li><a href="#testimoni" class="nav-link">Testimoni</a></li>
      <li><a href="#kontak" class="nav-link">Kontak</a></li>
      <li><a href="https://wa.me/628xxxxxxxxxx" class="nav-btn" target="_blank">Pesan Sekarang</a></li>
    </ul>

    <div class="nav-toggle" id="nav-toggle">
      &#9776;
    </div>
  </nav>
</header>

<!-- JAVASCRIPT FOR MOBILE MENU -->
<script>
  const navToggle = document.getElementById('nav-toggle');
  const navMenu = document.getElementById('nav-menu');

  navToggle.addEventListener('click', () => {
    navMenu.classList.toggle('show-menu');
  });

  // Close menu when clicking nav links on mobile
  const navLinks = document.querySelectorAll('.nav-link');
  navLinks.forEach(link => {
    link.addEventListener('click', () => {
      navMenu.classList.remove('show-menu');
    });
  });
</script>

Section Hero

<style>
  /* --- HERO SECTION STYLES --- */
  .hero-section {
    font-family: var(--body-font);
    background-color: var(--body-color);
    color: var(--white-color);
    padding: 9rem 2rem 5rem 2rem; /* Padding atas besar agar tidak tertutup fixed header */
    min-height: 100vh;
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
  }

  /* Efek Glow / Cahaya Latar Belakang */
  .hero-section::before {
    content: '';
    position: absolute;
    top: 10%;
    right: -10%;
    width: 450px;
    height: 450px;
    background: var(--first-color);
    filter: blur(140px);
    opacity: 0.15;
    z-index: 1;
    border-radius: 50%;
    pointer-events: none;
  }

  .hero-container {
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 3rem;
    align-items: center;
    position: relative;
    z-index: 2;
  }

  /* Badge Layanan */
  .hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background-color: var(--container-color);
    border: 1px solid rgba(255, 255, 255, 0.08);
    padding: 0.4rem 1rem;
    border-radius: 50px;
    font-size: 0.75rem;
    color: var(--first-color);
    margin-bottom: 1.5rem;
    font-weight: 600;
  }

  .hero-badge span {
    width: 6px;
    height: 6px;
    background-color: var(--first-color);
    border-radius: 50%;
    display: inline-block;
    box-shadow: 0 0 8px var(--first-color);
  }

  /* Typography */
  .hero-title {
    font-size: clamp(2rem, 3.5vw, 3rem);
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 1.2rem;
    letter-spacing: -0.5px;
  }

  .hero-title span {
    color: var(--first-color);
  }

  .hero-description {
    font-size: 0.9rem;
    color: var(--gray-color);
    line-height: 1.6;
    margin-bottom: 2rem;
    font-weight: 300;
  }

  /* Action Buttons */
  .hero-buttons {
    display: flex;
    gap: 1rem;
    align-items: center;
    flex-wrap: wrap;
  }

  .btn-primary {
    background-color: var(--first-color);
    color: var(--black-color);
    padding: 0.9rem 2rem;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 4px 20px rgba(0, 255, 255, 0.15);
  }

  .btn-primary:hover {
    background-color: var(--first-color-alt);
    transform: translateY(-2px);
    box-shadow: 0 6px 25px rgba(0, 255, 255, 0.25);
  }

  .btn-secondary {
    background-color: transparent;
    color: var(--white-color);
    border: 1px solid rgba(255, 255, 255, 0.15);
    padding: 0.9rem 2rem;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
  }

  .btn-secondary:hover {
    border-color: var(--first-color);
    color: var(--first-color);
    background-color: rgba(0, 255, 255, 0.03);
  }

  /* Hero Stats / Keunggulan Mini */
  .hero-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
  }

  .stat-item h3 {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--white-color);
    margin-bottom: 0.2rem;
  }

  .stat-item h3 span {
    color: var(--first-color);
  }

  .stat-item p {
    font-size: 0.75rem;
    color: var(--gray-color);
    margin: 0;
  }

  /* Hero Image / Visual Card */
  .hero-visual {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .hero-card-img {
    background-color: var(--container-color);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    padding: 1.5rem;
    width: 100%;
    max-width: 480px;
    position: relative;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
  }

  .hero-card-img img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    object-fit: cover;
  }

  /* Floating Card Badge */
  .floating-badge {
    position: absolute;
    bottom: -20px;
    left: 20px;
    background-color: var(--body-color);
    border: 1px solid rgba(255, 255, 255, 0.12);
    padding: 0.8rem 1.2rem;
    border-radius: 10px;
    display: flex;
    align-items: center;
    gap: 0.8rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  }

  .floating-badge i {
    font-size: 1.5rem;
    color: var(--first-color);
  }

  .floating-badge div h4 {
    font-size: 0.8rem;
    font-weight: 600;
    margin: 0;
    color: var(--white-color);
  }

  .floating-badge div p {
    font-size: 0.7rem;
    color: var(--gray-color);
    margin: 0;
  }

  /* Responsive Design */
  @media screen and (max-width: 968px) {
    .hero-container {
      grid-template-columns: 1fr;
      text-align: center;
      gap: 3rem;
    }

    .hero-badge {
      margin-left: auto;
      margin-right: auto;
    }

    .hero-buttons {
      justify-content: center;
    }

    .hero-stats {
      justify-content: center;
    }

    .hero-visual {
      margin-top: 1rem;
    }

    .floating-badge {
      left: 50%;
      transform: translateX(-50%);
      width: max-content;
    }
  }

  @media screen and (max-width: 576px) {
    .hero-section {
      padding-top: 8rem;
    }
    .hero-stats {
      grid-template-columns: 1fr;
      gap: 1rem;
    }
  }
</style>

<!-- HTML STRUCTURE -->
<section class="hero-section">
  <div class="hero-container">
    
    <!-- Kolom Kiri: Teks & CTA -->
    <div class="hero-content">
      <div class="hero-badge">
        <span></span> Sewa Motor Terpercaya di Lombok
      </div>
      
      <h1 class="hero-title">
        Jelajahi Indahnya <span>Lombok</span> Tanpa Batas.
      </h1>
      
      <p class="hero-description">
        Nikmati perjalanan liburan impian Anda dengan armada motor matic prima, helm SNI, jas hujan, serta layanan antar-jemput gratis langsung ke bandara atau hotel.
      </p>
      
      <div class="hero-buttons">
        <a href="https://wa.me/628xxxxxxxxxx?text=Halo,%20saya%20mau%20sewa%20motor%20di%20Lombok" class="btn-primary" target="_blank">Booking Sekarang</a>
        <a href="#armada" class="btn-secondary">Lihat Armada</a>
      </div>
      
      <!-- Statistik Singkat -->
      <div class="hero-stats">
        <div class="stat-item">
          <h3>50<span>+</span></h3>
          <p>Armada Tersedia</p>
        </div>
        <div class="stat-item">
          <h3>100<span>%</span></h3>
          <p>Kondisi Prima</p>
        </div>
        <div class="stat-item">
          <h3>24<span>/7</span></h3>
          <p>Layanan Support</p>
        </div>
      </div>
    </div>

    <!-- Kolom Kanan: Gambar / Visual -->
    <div class="hero-visual">
      <div class="hero-card-img">
        <!-- Ganti link gambar di bawah dengan foto motor yang proper -->
        <img src="#gambar-anda-disini" alt="Sewa Motor Lombok">
        
        <div class="floating-badge">
          <div>
            <h4>Gratis Antar Jemput</h4>
            <p>Area Bandara & Hotel</p>
          </div>
        </div>
      </div>
    </div>

  </div>
</section>

Section Kenapa Memilih Kami

<style>
  /* --- VALUE PROPOSITION / KEUNGGULAN SECTION --- */
  .features-section {
    font-family: var(--body-font);
    background-color: var(--body-color);
    padding: 4rem 2rem;
    position: relative;
    z-index: 2;
  }

  .features-container {
    max-width: 1200px;
    margin: 0 auto;
  }

  /* Section Header */
  .section-header {
    text-align: center;
    max-width: 600px;
    margin: 0 auto 3.5rem auto;
  }

  .section-subtitle {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--first-color);
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 0.5rem;
    display: inline-block;
  }

  .section-title {
    font-size: clamp(1.75rem, 2.5vw, 2.25rem);
    font-weight: 700;
    color: var(--white-color);
    line-height: 1.2;
    margin-bottom: 1rem;
  }

  .section-title span {
    color: var(--first-color);
  }

  .section-description {
    font-size: 0.85rem;
    color: var(--gray-color);
    line-height: 1.6;
    margin: 0;
  }

  /* Features Grid */
  .features-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
  }

  .feature-card {
    background-color: var(--container-color);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    padding: 2rem 1.5rem;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
  }

  .feature-card:hover {
    border-color: var(--first-color);
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.4);
  }

  /* Accent Line Top on Hover */
  .feature-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background-color: transparent;
    transition: background-color 0.3s ease;
  }

  .feature-card:hover::before {
    background-color: var(--first-color);
  }

  /* Feature Icon */
  .feature-icon {
    width: 50px;
    height: 50px;
    background-color: rgba(0, 255, 255, 0.08);
    border: 1px solid rgba(0, 255, 255, 0.15);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    color: var(--first-color);
    margin-bottom: 1.5rem;
    transition: all 0.3s ease;
  }

  .feature-card:hover .feature-icon {
    background-color: var(--first-color);
    color: var(--black-color);
  }

  /* Feature Text */
  .feature-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--white-color);
    margin-bottom: 0.75rem;
  }

  .feature-desc {
    font-size: 0.8rem;
    color: var(--gray-color);
    line-height: 1.6;
    margin: 0;
    font-weight: 300;
  }

  /* Responsive Design */
  @media screen and (max-width: 1024px) {
    .features-grid {
      grid-template-columns: repeat(2, 1fr);
    }
  }

  @media screen and (max-width: 576px) {
    .features-grid {
      grid-template-columns: 1fr;
    }
    .features-section {
      padding: 3rem 1rem;
    }
  }
</style>

<!-- HTML STRUCTURE -->
<section class="features-section">
  <div class="features-container">
    
    <!-- Header Section -->
    <div class="section-header">
      <span class="section-subtitle">Kenapa Pilih Kami</span>
      <h2 class="section-title">Solusi Terbaik untuk <span>Liburan</span> Anda</h2>
      <p class="section-description">
        Kami berkomitmen memberikan pengalaman sewa motor yang aman, nyaman, dan bebas ribet selama Anda mengeksplorasi keindahan Lombok.
      </p>
    </div>

    <!-- Grid Keunggulan -->
    <div class="features-grid">
      
      <!-- Card 1: Mesin Prima -->
      <div class="feature-card">
        <div class="feature-icon">
          <i class="fa-solid fa-gauge-high"></i>
        </div>
        <h3 class="feature-title">Mesin Prima & Terawat</h3>
        <p class="feature-desc">
          Setiap unit rutin diservis di bengkel resmi, dijamin performa tangguh untuk melibas tanjakan di Lombok.
        </p>
      </div>

      <!-- Card 2: Gratis Antar Jemput -->
      <div class="feature-card">
        <div class="feature-icon">
          <i class="fa-solid fa-motorcycle"></i>
        </div>
        <h3 class="feature-title">Gratis Antar Jemput</h3>
        <p class="feature-desc">
          Fasilitas pengantaran dan pengambilan gratis langsung di Bandara Lombok atau hotel tempat Anda menginap.
        </p>
      </div>

      <!-- Card 3: Kelengkapan Standar -->
      <div class="feature-card">
        <div class="feature-icon">
          <i class="fa-solid fa-shield-halved"></i>
        </div>
        <h3 class="feature-title">Kelengkapan Standar</h3>
        <p class="feature-desc">
          Setiap penyewaan sudah termasuk 2 helm SNI bersih berstandar keamanan tinggi dan jas hujan anti basah.
        </p>
      </div>

      <!-- Card 4: Support 24/7 -->
      <div class="feature-card">
        <div class="feature-icon">
          <i class="fa-solid fa-headset"></i>
        </div>
        <h3 class="feature-title">Support 24/7 di Jalan</h3>
        <p class="feature-desc">
          Tim darurat kami selalu siap membantu dan merespon cepat jika Anda mengalami kendala di perjalanan.
        </p>
      </div>

    </div>

  </div>
</section>

Section Armada/Katalog

<style>
  /* --- FILTER BUTTONS --- */
  .filter-container {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin: 2rem 0;
  }

  .filter-btn {
    padding: 0.6rem 1.5rem;
    border: 1px solid var(--first-color);
    background: transparent;
    color: var(--white-color);
    border-radius: 50px;
    cursor: pointer;
    transition: 0.3s;
    font-weight: 600;
  }

  .filter-btn.active, .filter-btn:hover {
    background: var(--first-color);
    color: var(--black-color);
  }

  /* --- ARMADA SECTION --- */
  .armada-section { font-family: var(--body-font); background-color: var(--body-color); padding: 4rem 2rem; }
  .armada-container { max-width: 1200px; margin: 0 auto; }
  .armada-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2rem; margin-top: 2rem; }
  
  .armada-card { background-color: var(--container-color); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 16px; overflow: hidden; transition: transform 0.3s; }
  .armada-card:hover { transform: translateY(-10px); border-color: var(--first-color); }
  .armada-img { width: 100%; height: 200px; object-fit: cover; }
  .armada-info { padding: 1.5rem; }
  .armada-title { font-size: 1.2rem; color: var(--white-color); margin-bottom: 0.5rem; }
  .armada-specs { display: flex; gap: 1rem; margin-bottom: 1.5rem; color: var(--gray-color); font-size: 0.8rem; }
  .price-tag { font-size: 1.1rem; font-weight: 700; color: var(--first-color); margin-bottom: 1.5rem; }
  .btn-book { display: block; width: 100%; text-align: center; background-color: var(--first-color); color: var(--black-color); padding: 0.8rem; border-radius: 8px; text-decoration: none; font-weight: 600; }
</style>

<section class="armada-section" id="armada">
  <div class="armada-container">
    <div class="section-header">
      <span class="section-subtitle">Pilihan Armada</span>
      <h2 class="section-title">Katalog <span>Motor Kami</span></h2>
    </div>

    <!-- Tombol Filter -->
    <div class="filter-container">
      <button class="filter-btn active" onclick="filterSelection('all')">Semua</button>
      <button class="filter-btn" onclick="filterSelection('matic')">Matic</button>
      <button class="filter-btn" onclick="filterSelection('manual')">Manual</button>
    </div>

    <div class="armada-grid" id="armada-grid">
      <!-- Item Matic -->
      <div class="armada-card filter-item matic">
        <img src="#gambar-anda-disini" class="armada-img">
        <div class="armada-info">
          <h3 class="armada-title">Honda Vario 125cc</h3>
          <div class="price-tag">Rp 80.000 / hari</div>
          <a href="#" class="btn-book">Booking WhatsApp</a>
        </div>
      </div>
      
         <!-- Item Matic -->
      <div class="armada-card filter-item matic">
        <img src="#gambar-anda-disini" class="armada-img">
        <div class="armada-info">
          <h3 class="armada-title">Honda Vario 125cc</h3>
          <div class="price-tag">Rp 80.000 / hari</div>
          <a href="#" class="btn-book">Booking WhatsApp</a>
        </div>
      </div>

      <!-- Item Matic -->
      <div class="armada-card filter-item matic">
        <img src="#gambar-anda-disini" class="armada-img">
        <div class="armada-info">
          <h3 class="armada-title">Yamaha NMAX 155cc</h3>
          <div class="price-tag">Rp 125.000 / hari</div>
          <a href="#" class="btn-book">Booking WhatsApp</a>
        </div>
      </div>
      
        <!-- Item Matic -->
      <div class="armada-card filter-item matic">
        <img src="#gambar-anda-disini" class="armada-img">
        <div class="armada-info">
          <h3 class="armada-title">Yamaha NMAX 155cc</h3>
          <div class="price-tag">Rp 125.000 / hari</div>
          <a href="#" class="btn-book">Booking WhatsApp</a>
        </div>
      </div>
      
       
        <!-- Item Matic -->
      <div class="armada-card filter-item matic">
        <img src="#gambar-anda-disini" class="armada-img">
        <div class="armada-info">
          <h3 class="armada-title">Yamaha NMAX 155cc</h3>
          <div class="price-tag">Rp 125.000 / hari</div>
          <a href="#" class="btn-book">Booking WhatsApp</a>
        </div>
      </div>
      
       <!-- Item Manual -->
      <div class="armada-card filter-item manual">
        <img src="#gambar-anda-disini" class="armada-img">
        <div class="armada-info">
          <h3 class="armada-title">Honda CRF 150L</h3>
          <div class="price-tag">Rp 175.000 / hari</div>
          <a href="#" class="btn-book">Booking WhatsApp</a>
        </div>
      </div>
      
       <!-- Item Manual -->
      <div class="armada-card filter-item manual">
        <img src="#gambar-anda-disini" class="armada-img">
        <div class="armada-info">
          <h3 class="armada-title">Honda CRF 150L</h3>
          <div class="price-tag">Rp 175.000 / hari</div>
          <a href="#" class="btn-book">Booking WhatsApp</a>
        </div>
      </div>
      
        <!-- Item Manual -->
      <div class="armada-card filter-item manual">
        <img src="#gambar-anda-disini" class="armada-img">
        <div class="armada-info">
          <h3 class="armada-title">Honda CRF 150L</h3>
          <div class="price-tag">Rp 175.000 / hari</div>
          <a href="#" class="btn-book">Booking WhatsApp</a>
        </div>
      </div>
      
      <!-- Item Manual -->
      <div class="armada-card filter-item manual">
        <img src="#gambar-anda-disini" class="armada-img">
        <div class="armada-info">
          <h3 class="armada-title">Honda CRF 150L</h3>
          <div class="price-tag">Rp 175.000 / hari</div>
          <a href="#" class="btn-book">Booking WhatsApp</a>
        </div>
      </div>
      
    </div>
  </div>
</section>

<script>
  function filterSelection(c) {
    var x, i;
    x = document.getElementsByClassName("filter-item");
    if (c == "all") c = "";
    for (i = 0; i < x.length; i++) {
      x[i].style.display = "none";
      if (x[i].className.indexOf(c) > -1) x[i].style.display = "block";
    }
    // Update active class
    var btns = document.getElementsByClassName("filter-btn");
    for (i = 0; i < btns.length; i++) {
      btns[i].classList.remove("active");
      if (btns[i].innerText.toLowerCase() == c || (c == "" && btns[i].innerText == "Semua")) {
        btns[i].classList.add("active");
      }
    }
  }
</script>

Section Proses Sewa

<style>
  /* --- HOW IT WORKS SECTION --- */
  .how-section {
    padding: 4rem 2rem;
    background-color: var(--body-color);
  }

  .how-container {
    max-width: 1000px;
    margin: 0 auto;
  }

  .how-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
    margin-top: 3rem;
  }

  .how-card {
    text-align: center;
    padding: 2rem 1rem;
    background: var(--container-color);
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: 0.3s;
  }

  .how-card:hover {
    transform: translateY(-10px);
    border-color: var(--first-color);
  }

  .how-icon {
    width: 60px;
    height: 60px;
    background: rgba(0, 255, 255, 0.1);
    color: var(--first-color);
    font-size: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    margin: 0 auto 1.5rem;
  }

  .how-step {
    font-size: 0.9rem;
    color: var(--first-color);
    font-weight: 700;
    margin-bottom: 0.5rem;
    display: block;
  }

  .how-title {
    color: var(--white-color);
    font-size: 1.1rem;
    margin-bottom: 1rem;
  }

  .how-desc {
    color: var(--gray-color);
    font-size: 0.85rem;
    line-height: 1.6;
  }
</style>

<section class="how-section">
  <div class="how-container">
    <div class="section-header">
      <span class="section-subtitle">Proses Mudah</span>
      <h2 class="section-title">Cara <span>Sewa Motor</span></h2>
    </div>

    <div class="how-grid">
      <!-- Step 1 -->
      <div class="how-card">
        <div class="how-icon"><i class="fa-brands fa-whatsapp"></i></div>
        <span class="how-step">LANGKAH 01</span>
        <h3 class="how-title">Hubungi Kami</h3>
        <p class="how-desc">Pilih motor idaman Anda, lalu chat kami melalui WhatsApp untuk cek ketersediaan unit.</p>
      </div>

      <!-- Step 2 -->
      <div class="how-card">
        <div class="how-icon"><i class="fa-solid fa-calendar-check"></i></div>
        <span class="how-step">LANGKAH 02</span>
        <h3 class="how-title">Konfirmasi Data</h3>
        <p class="how-desc">Informasikan lokasi pengantaran, waktu sewa, dan tunjukkan kartu identitas (KTP/SIM) sebagai syarat.</p>
      </div>

      <!-- Step 3 -->
      <div class="how-card">
        <div class="how-icon"><i class="fa-solid fa-motorcycle"></i></div>
        <span class="how-step">LANGKAH 03</span>
        <h3 class="how-title">Unit Siap Digunakan</h3>
        <p class="how-desc">Motor akan kami antar tepat waktu ke lokasi Anda. Bayar saat unit diterima, selamat liburan!</p>
      </div>
    </div>
  </div>
</section>

Section Testimonial

<style>
  /* --- REFINED GLASSMORFISM TESTIMONIAL --- */
  .testi-section-alt {
    padding: 5rem 2rem;
    background-color: var(--body-color);
  }

  .testi-grid-alt {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 2rem;
    max-width: 1200px;
    margin: 4rem auto 0;
  }

  .testi-card-alt {
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(10px);
    border: 2px solid rgba(255, 255, 255, 0.05);
    padding: 3rem;
    border-radius: 30px;
    text-align: center;
    transition: 0.4s ease;
    position: relative;
  }

  /* Efek border warna saat card di-hover */
  .testi-card-alt:hover {
    border-color: var(--first-color);
    background: rgba(255, 255, 255, 0.06);
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
  }

  .quote-icon-alt {
    font-size: 2rem;
    color: var(--first-color);
    margin-bottom: 1.5rem;
    display: block;
  }

  .stars-alt {
    color: #f1c40f;
    margin-bottom: 1.5rem;
    font-size: 0.9rem;
  }

  .testi-text-alt {
    font-size: 1rem;
    line-height: 1.8;
    color: #e0e0e0;
    margin-bottom: 2rem;
    font-style: italic;
  }

  /* --- STYLE FOTO CIRCLE DENGAN BORDER PRIMARY --- */
  .avatar-alt {
    width: 90px;
    height: 90px;
    border-radius: 50% !important; /* Membuat gambar berbentuk lingkaran penuh */
    object-fit: cover;
    margin-bottom: 1rem;
    border: 4px solid var(--first-color) !important; /* Border melingkar warna primary */
    padding: 2px; /* Memberikan jarak tipis antara foto dan border */
    transition: 0.4s ease;
  }

  /* Efek animasi tambahan pada foto saat card di-hover */
  .testi-card-alt:hover .avatar-alt {
    transform: scale(1.05);
    box-shadow: 0 0 15px var(--first-color);
  }

  .testi-name-alt {
    display: block;
    font-weight: 800;
    font-size: 1.1rem;
    color: var(--white-color);
    margin-top: 0.5rem;
  }

  .testi-role-alt {
    font-size: 0.8rem;
    color: var(--first-color);
    text-transform: uppercase;
    letter-spacing: 1px;
  }
</style>

<section class="testi-section-alt">
  <div class="testi-container">
    <div class="section-header" style="text-align: center;">
      <span class="section-subtitle">Testimoni</span>
      <h2 class="section-title">Ulasan <span>Pelanggan</span></h2>
    </div>

    <div class="testi-grid-alt">
      <!-- Card 1 -->
      <div class="testi-card-alt">
        <i class="fa-solid fa-quote-left quote-icon-alt"></i>
        <div class="stars-alt"><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i></div>
        <p class="testi-text-alt">"Sewa motor di sini sangat recommended! Unit motornya baru, mesin halus, dan adminnya sangat fast respon waktu kita butuh jemputan di Bandara."</p>
        <img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=200&h=200&fit=crop" class="avatar-alt" alt="Budi Santoso">
        <span class="testi-name-alt">Budi Santoso</span>
        <span class="testi-role-alt">Wisatawan Jakarta</span>
      </div>

      <!-- Card 2 -->
      <div class="testi-card-alt">
        <i class="fa-solid fa-quote-left quote-icon-alt"></i>
        <div class="stars-alt"><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i></div>
        <p class="testi-text-alt">"Liburan ke Lombok jadi lebih fleksibel pakai motor ini. Perlengkapan helm SNI & jas hujan bersih. Pelayanan jujur dan harga sangat terjangkau."</p>
        <img src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=200&h=200&fit=crop" class="avatar-alt" alt="Sarah Jenkins">
        <span class="testi-name-alt">Sarah Jenkins</span>
        <span class="testi-role-alt">Backpacker UK</span>
      </div>

      <!-- Card 3 -->
      <div class="testi-card-alt">
        <i class="fa-solid fa-quote-left quote-icon-alt"></i>
        <div class="stars-alt"><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i></div>
        <p class="testi-text-alt">"Tim daruratnya sangat sigap! Sempat ada kendala ban di tengah jalan, langsung direspon cepat. Sangat profesional untuk wisatawan."</p>
        <img src="https://images.unsplash.com/photo-1539571696357-5a69c17a67c6?w=200&h=200&fit=crop" class="avatar-alt" alt="Andi Ahmad">
        <span class="testi-name-alt">Andi Ahmad</span>
        <span class="testi-role-alt">Local Explorer</span>
      </div>
    </div>
  </div>
</section>

Section FAQ ( Pertanyaan Sering Muncul )

<style>
  /* --- FAQ SECTION STYLE --- */
  .faq-section {
    padding: 5rem 2rem;
    background-color: var(--body-color);
  }

  .faq-container {
    max-width: 900px;
    margin: 0 auto;
  }

  .faq-grid {
    margin-top: 3.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
  }

  .faq-item {
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    overflow: hidden;
    transition: 0.3s ease;
  }

  .faq-item:hover {
    border-color: var(--first-color);
  }

  /* Bagian Pertanyaan (Header Accordion) */
  .faq-question {
    width: 100%;
    background: none;
    border: none;
    padding: 1.5rem 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--white-color);
    font-size: 1.05rem;
    font-weight: 700;
    text-align: left;
    cursor: pointer;
    gap: 1rem;
  }

  /* Ikon Panah */
  .faq-question i {
    color: var(--first-color);
    transition: transform 0.3s ease;
    font-size: 0.9rem;
  }

  /* Bagian Jawaban */
  .faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out, padding 0.3s ease;
    padding: 0 2rem;
    color: #b0b0b0;
    font-size: 0.95rem;
    line-height: 1.7;
  }

  .faq-answer p {
      padding-top: 1.5rem;
    padding-bottom: 1.5rem;
  }

  /* State Aktif (Ketika FAQ Dibuka) */
  .faq-item.active {
    background: rgba(255, 255, 255, 0.06);
    border-color: var(--first-color);
  }

  .faq-item.active .faq-question i {
    transform: rotate(180deg);
  }

  .faq-item.active .faq-answer {
    max-height: 200px; /* Sesuaikan jika jawaban lebih panjang */
  }
</style>

<section class="faq-section">
  <div class="faq-container">
    <div class="section-header" style="text-align: center;">
      <span class="section-subtitle">Pusat Bantuan</span>
      <h2 class="section-title">Pertanyaan yang <span>Sering Diajukan</span></h2>
    </div>

    <div class="faq-grid">
      <!-- FAQ 1 -->
      <div class="faq-item">
        <button class="faq-question">
          <span>Syarat apa saja yang diperlukan untuk menyewa motor?</span>
          <i class="fa-solid fa-chevron-down"></i>
        </button>
        <div class="faq-answer">
          <p>Anda hanya perlu melampirkan foto e-KTP asli, foto tiket pesawat (jika dijemput di bandara) atau foto identitas pendukung lainnya seperti SIM C yang masih berlaku serta akun media sosial yang aktif.</p>
        </div>
      </div>

      <!-- FAQ 2 -->
      <div class="faq-item">
        <button class="faq-question">
          <span>Apakah tersedia layanan antar-jemput motor gratis ke Bandara/Hotel?</span>
          <i class="fa-solid fa-chevron-down"></i>
        </button>
        <div class="faq-answer">
          <p>Ya! Kami menyediakan layanan gratis antar-jemput unit motor langsung ke Bandara Internasional Lombok, Pelabuhan Lembar, atau area hotel di sekitar Mataram, Senggigi, dan Kuta Mandalika dengan ketentuan durasi sewa tertentu.</p>
        </div>
      </div>

      <!-- FAQ 3 -->
      <div class="faq-item">
        <button class="faq-question">
          <span>Apa saja perlengkapan yang didapat saat sewa motor?</span>
          <i class="fa-solid fa-chevron-down"></i>
        </button>
        <div class="faq-answer">
          <p>Setiap penyewaan sudah termasuk 2 buah helm berstandar SNI yang bersih dan wangi, jas hujan (ponco/terusan), serta holder smartphone agar perjalanan wisata Anda di Lombok semakin nyaman.</p>
        </div>
      </div>

      <!-- FAQ 4 -->
      <div class="faq-item">
        <button class="faq-question">
          <span>Bagaimana jika terjadi kendala pada motor di tengah jalan?</span>
          <i class="fa-solid fa-chevron-down"></i>
        </button>
        <div class="faq-answer">
          <p>Tim darurat kami siap siaga 24 jam. Jika terjadi kendala teknis (ban bocor, mogok, dll), Anda bisa langsung menghubungi nomor darurat kami dan tim akan segera meluncur untuk membantu atau mengganti unit.</p>
        </div>
      </div>

      <!-- FAQ 5 -->
      <div class="faq-item">
        <button class="faq-question">
          <span>Bagaimana sistem pembayaran sewa motor dilakukan?</span>
          <i class="fa-solid fa-chevron-down"></i>
        </button>
        <div class="faq-answer">
          <p>Pembayaran dapat dilakukan secara tunai saat unit motor diterima (COD) atau melalui transfer bank / QRIS sebelum masa sewa dimulai sesuai kenyamanan Anda.</p>
        </div>
      </div>
    </div>
  </div>
</section>

<!-- Script JavaScript Sederhana untuk Accordion FAQ -->
<script>
  const faqItems = document.querySelectorAll('.faq-item');

  faqItems.forEach(item => {
    const questionButton = item.querySelector('.faq-question');
    
    questionButton.addEventListener('click', () => {
      // Tutup item lain yang sedang terbuka (opsional, agar rapi)
      faqItems.forEach(otherItem => {
        if (otherItem !== item && otherItem.classList.contains('active')) {
          otherItem.classList.remove('active');
        }
      });

      // Toggle state aktif pada item yang diklik
      item.classList.toggle('active');
    });
  });
</script>

Section CTA ( Call To Action )

<style>
  /* --- CTA SECTION STYLE --- */
  .footer-cta-section {
    background-color: var(--body-color);
    padding: 5rem 2rem 4rem;
    position: relative;
    overflow: hidden;
  }

  /* Banner Call to Action (CTA) Box */
  .cta-banner {
    max-width: 1100px;
    margin: 0 auto;
    background: linear-gradient(135deg, rgba(0, 255, 255, 0.1), rgba(255, 255, 255, 0.03));
    backdrop-filter: blur(12px);
    border: 2px solid var(--first-color);
    border-radius: 24px;
    padding: 3.5rem 2rem;
    text-align: center;
    position: relative;
    z-index: 2;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
  }

  .cta-title {
    font-size: 2.2rem;
    color: var(--white-color);
    margin-bottom: 1rem;
    font-weight: 800;
  }

  .cta-title span {
    color: var(--first-color);
  }

  .cta-description {
    color: #d0d0d0;
    font-size: 1.05rem;
    max-width: 600px;
    margin: 0 auto 2rem;
    line-height: 1.6;
  }

  .cta-buttons {
    display: flex;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
  }

  /* Style Tombol CTA */
  .btn-primary {
    background-color: var(--first-color);
    color: var(--body-color);
    padding: 0.9rem 2rem;
    border-radius: 50px;
    font-weight: 700;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    transition: 0.3s;
    box-shadow: 0 5px 15px rgba(0, 255, 255, 0.3);
  }

  .btn-primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(0, 255, 255, 0.5);
  }

  .btn-outline {
    background: transparent;
    color: var(--white-color);
    padding: 0.9rem 2rem;
    border-radius: 50px;
    font-weight: 700;
    text-decoration: none;
    border: 2px solid rgba(255, 255, 255, 0.2);
    transition: 0.3s;
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
  }

  .btn-outline:hover {
    border-color: var(--first-color);
    color: var(--first-color);
    transform: translateY(-3px);
  }

  /* Responsif untuk layar kecil */
  @media (max-width: 768px) {
    .cta-banner {
      padding: 2.5rem 1.5rem;
    }
    .cta-title {
      font-size: 1.8rem;
    }
  }
</style>

<section class="footer-cta-section">
  <!-- Banner Call to Action (CTA) -->
  <div class="cta-banner">
    <h2 class="cta-title">Siap Menjelajahi <span>Keindahan Lombok?</span></h2>
    <p class="cta-description">Nikmati kebebasan berkendara dengan unit motor terbaik dan pelayanan terpercaya. Pesan sekarang atau konsultasikan rencana liburan Anda via WhatsApp.</p>
    <div class="cta-buttons">
      <a href="https://wa.me/62xxxxxxxxxx" target="_blank" class="btn-primary">
        <i class="fa-brands fa-whatsapp"></i> Chat WhatsApp
      </a>
      <a href="#armada" class="btn-outline">
        <i class="fa-solid fa-motorcycle"></i> Pilih Unit Motor
      </a>
    </div>
  </div>
</section>

Section Pup Up ( Promosi )

<style>
  /* --- PROMO POP-UP STYLE --- */
  .promo-popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(5px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease, visibility 0.4s ease;
  }

  /* State ketika pop-up aktif/muncul */
  .promo-popup-overlay.show {
    opacity: 1;
    visibility: visible;
  }

  .promo-popup-card {
    background: var(--container-color, #1a1a1a);
    border: 2px solid var(--first-color);
    border-radius: 24px;
    padding: 2.5rem;
    max-width: 480px;
    width: 90%;
    text-align: center;
    position: relative;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5);
    transform: scale(0.8);
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  }

  .promo-popup-overlay.show .promo-popup-card {
    transform: scale(1);
  }

  /* Tombol Close (X) */
  .popup-close-btn {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--white-color);
    width: 35px;
    height: 35px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: 0.3s;
  }

  .popup-close-btn:hover {
    background-color: var(--first-color);
    color: var(--body-color);
  }

  /* Ikon Badge Diskon */
  .popup-badge {
    background: rgba(0, 255, 255, 0.1);
    color: var(--first-color);
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    padding: 6px 16px;
    border-radius: 50px;
    display: inline-block;
    margin-bottom: 1rem;
  }

  .popup-title {
    font-size: 1.8rem;
    color: var(--white-color);
    font-weight: 800;
    margin-bottom: 0.8rem;
  }

  .popup-title span {
    color: var(--first-color);
  }

  .popup-desc {
    color: #b0b0b0;
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 1.5rem;
  }

  /* Desain Timer Hitung Mundur */
  .popup-timer-container {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    padding: 1rem;
    margin-bottom: 1.8rem;
  }

  .popup-timer-label {
    font-size: 0.8rem;
    color: #ff6b6b;
    font-weight: 700;
    margin-bottom: 0.4s;
    text-transform: uppercase;
    letter-spacing: 1px;
  }

  .popup-countdown {
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--white-color);
    font-family: monospace;
    letter-spacing: 2px;
  }

  /* Tombol Klaim */
  .popup-claim-btn {
    background-color: var(--first-color);
    color: var(--body-color);
    width: 100%;
    padding: 0.9rem;
    border-radius: 50px;
    font-weight: 700;
    font-size: 1rem;
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    text-decoration: none;
    transition: 0.3s;
    box-shadow: 0 5px 15px rgba(0, 255, 255, 0.3);
  }

  .popup-claim-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 255, 255, 0.5);
  }
</style>

<!-- HTML Struktur Pop-up -->
<div class="promo-popup-overlay" id="promoPopup">
  <div class="promo-popup-card">
    <button class="popup-close-btn" id="closePopupBtn">
      <i class="fa-solid fa-xmark"></i>
    </button>

    <span class="popup-badge">Penawaran Spesial Khusus Anda</span>
    <h3 class="popup-title">Diskon Spesial <span>20% Rental Motor!</span></h3>
    <p class="popup-desc">Jangan lewatkan kesempatan liburan hemat di Lombok. Klaim diskon eksklusif ini sekarang sebelum waktunya habis!</p>

    <!-- Timer Countdown -->
    <div class="popup-timer-container">
      <div class="popup-timer-label">Promo Berakhir Dalam:</div>
      <div class="popup-countdown" id="countdownTimer">01:00:00</div>
    </div>

    <!-- Tombol Aksi (Hubungkan ke WhatsApp/Pemesanan) -->
    <a href="https://wa.me/62xxxxxxxxxx?text=Halo,%20saya%20ingin%20klaim%20diskon%2020%25%20rental%20motor" target="_blank" class="popup-claim-btn">
      <i class="fa-solid fa-ticket"></i> Klaim Diskon Sekarang
    </a>
  </div>
</div>

<!-- Script JavaScript untuk Durasi 45 Detik & Timer 1 Jam -->
<script>
  document.addEventListener("DOMContentLoaded", function () {
    const popupOverlay = document.getElementById("promoPopup");
    const closeBtn = document.getElementById("closePopupBtn");
    const countdownElement = document.getElementById("countdownTimer");

    // 1. Fungsi memunculkan pop-up setelah 45 detik (45000 milidetik)
    // Catatan: Jika ingin menguji cepat saat development, ubah angka 45000 menjadi misal 3000 (3 detik)
    const popupTimer = setTimeout(() => {
      // Cek apakah user sudah pernah menutup pop-up di sesi ini (opsional agar tidak mengganggu)
      if (!sessionStorage.getItem("popupClosed")) {
        popupOverlay.classList.add("show");
        startCountdown();
      }
    }, 45000);

    // 2. Fungsi Tombol Close
    closeBtn.addEventListener("click", () => {
      popupOverlay.classList.remove("show");
      sessionStorage.setItem("popupClosed", "true");
    });

    // Klik di luar card untuk menutup
    popupOverlay.addEventListener("click", (e) => {
      if (e.target === popupOverlay) {
        popupOverlay.classList.remove("show");
        sessionStorage.setItem("popupClosed", "true");
      }
    });

    // 3. Fungsi Hitung Mundur (Countdown) 1 Jam
    function startCountdown() {
      // Waktu 1 jam dari sekarang dalam milidetik
      let timeRemaining = 60 * 60; // 3600 detik

      const timerInterval = setInterval(() => {
        let hours = Math.floor(timeRemaining / 3600);
        let minutes = Math.floor((timeRemaining % 3600) / 60);
        let seconds = timeRemaining % 60;

        // Format angka agar selalu 2 digit (contoh: 01:00:00)
        let formattedTime = 
          String(hours).padStart(2, '0') + ":" + 
          String(minutes).padStart(2, '0') + ":" + 
          String(seconds).padStart(2, '0');

        countdownElement.textContent = formattedTime;

        if (timeRemaining <= 0) {
          clearInterval(timerInterval);
          countdownElement.textContent = "00:00:00";
        } else {
          timeRemaining--;
        }
      }, 1000);
    }
  });
</script>