Cara Membuat Landing Page yang Convert

1. Hero Section
   - Headline yang menarik
   - Subheadline
   - CTA button
   - Hero image/video

2. Social Proof
   - Testimonials
   - Client logos
   - Statistics
   - Reviews

3. Benefits/Features
   - Problem-solution format
   - Icon + description
   - Clear value proposition

4. Call to Action
   - Primary CTA button
   - Form (jika lead gen)
   - Urgency element

5. FAQ (optional)
   - Address objections
   - Build trust

Formula yang work:
1. [End Result] + [Time Frame] + [Without Pain Point]
   "Tingkatkan Traffic 300% dalam 30 Hari Tanpa Iklan Berbayar"

2. [Number] + [Keyword] + [Benefit]
   "7 Strategi SEO yang Terbukti Meningkatkan Penjualan"

3. Question format
   "Ingin Website yang Menghasilkan Leads 24/7?"

4. How to format
   "Cara Mudah Membuat Toko Online dalam 1 Hari"

<section class="hero">
  <div class="container">
    <h1 class="headline">
      Tingkatkan Penjualan Online Anda
      <span class="highlight">300%</span> dalam 30 Hari
    </h1>
    <p class="subheadline">
      Panduan lengkap dan strategi terbukti untuk mengubah website Anda menjadi
      mesin penghasil uang
    </p>
    <div class="cta-group">
      <a href="#signup" class="btn btn-primary">Mulai Sekarang</a>
      <a href="#demo" class="btn btn-secondary">Lihat Demo</a>
    </div>
    <p class="trust-badge">
      ✓ Gratis 14 Hari Trial &nbsp; ✓ Tanpa Kartu Kredit
    </p>
  </div>
  <div class="hero-image">
    <img src="/img/dashboard-preview.png" alt="Dashboard Preview" />
  </div>
</section>

.hero {
  display: flex;
  align-items: center;
  min-height: 90vh;
  padding: 4rem 2rem;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
}

.headline {
  font-size: 3.5rem;
  font-weight: 800;
  line-height: 1.2;
  margin-bottom: 1.5rem;
}

.highlight {
  color: #ffd700;
}

.subheadline {
  font-size: 1.25rem;
  opacity: 0.9;
  max-width: 500px;
  margin-bottom: 2rem;
}

.cta-group {
  display: flex;
  gap: 1rem;
  margin-bottom: 1rem;
}

.btn-primary {
  background: #ff6b6b;
  color: white;
  padding: 1rem 2rem;
  border-radius: 8px;
  font-weight: bold;
  text-decoration: none;
  transition: transform 0.2s;
}

.btn-primary:hover {
  transform: translateY(-2px);
}

<section class="testimonials">
  <h2>Apa Kata Mereka</h2>
  <div class="testimonial-grid">
    <div class="testimonial-card">
      <div class="stars">★★★★★</div>
      <p class="quote">
        "Traffic website saya naik 400% dalam 2 bulan. Strategi yang diajarkan
        sangat actionable!"
      </p>
      <div class="author">
        <img src="/img/avatar1.jpg" alt="Budi Santoso" />
        <div>
          <strong>Budi Santoso</strong>
          <span>CEO, TechStartup.id</span>
        </div>
      </div>
    </div>
    <!-- More testimonials -->
  </div>
</section>

<section class="trust-section">
  <p>Dipercaya oleh 10,000+ bisnis di Indonesia</p>
  <div class="logo-grid">
    <img src="/img/logo1.png" alt="Company 1" />
    <img src="/img/logo2.png" alt="Company 2" />
    <img src="/img/logo3.png" alt="Company 3" />
    <img src="/img/logo4.png" alt="Company 4" />
  </div>
  <div class="stats-row">
    <div class="stat">
      <span class="number">10,000+</span>
      <span class="label">Happy Customers</span>
    </div>
    <div class="stat">
      <span class="number">98%</span>
      <span class="label">Satisfaction Rate</span>
    </div>
    <div class="stat">
      <span class="number">24/7</span>
      <span class="label">Support</span>
    </div>
  </div>
</section>

<section class="features">
  <h2>Mengapa Memilih Kami?</h2>
  <div class="features-grid">
    <div class="feature-card">
      <div class="icon">🚀</div>
      <h3>Hasil Cepat</h3>
      <p>
        Lihat peningkatan traffic dalam 7 hari pertama dengan strategi yang
        terbukti efektif
      </p>
    </div>
    <div class="feature-card">
      <div class="icon">📊</div>
      <h3>Data-Driven</h3>
      <p>Semua keputusan berdasarkan data dan analytics, bukan asumsi</p>
    </div>
    <div class="feature-card">
      <div class="icon">💡</div>
      <h3>Mudah Dipraktekkan</h3>
      <p>Step-by-step guide yang bisa langsung diimplementasikan</p>
    </div>
    <div class="feature-card">
      <div class="icon">🎯</div>
      <h3>ROI Terukur</h3>
      <p>Track dan ukur hasil investasi Anda dengan dashboard lengkap</p>
    </div>
  </div>
</section>

.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2rem;
  padding: 4rem 2rem;
}

.feature-card {
  text-align: center;
  padding: 2rem;
  background: white;
  border-radius: 12px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s;
}

.feature-card:hover {
  transform: translateY(-5px);
}

.feature-card .icon {
  font-size: 3rem;
  margin-bottom: 1rem;
}

<section class="cta-section">
  <div class="container">
    <h2>Siap Meningkatkan Bisnis Anda?</h2>
    <p>Bergabung dengan 10,000+ pebisnis sukses lainnya</p>

    <form class="signup-form">
      <input type="email" placeholder="Masukkan email Anda" required />
      <button type="submit" class="btn-cta">Mulai Gratis Sekarang</button>
    </form>

    <p class="guarantee">💯 30-Day Money Back Guarantee</p>
  </div>
</section>

Button Text yang Convert:
✓ "Mulai Gratis Sekarang"
✓ "Dapatkan Akses Instant"
✓ "Download Gratis"
✓ "Daftar - Gratis!"
✓ "Coba 14 Hari Gratis"

✗ Hindari:
✗ "Submit"
✗ "Kirim"
✗ "Click Here"
✗ "Learn More" (terlalu generic)

<div class="urgency-banner">
  <p>⚡ Penawaran Berakhir dalam:</p>
  <div class="countdown">
    <div class="time-box">
      <span id="hours">23</span>
      <small>Jam</small>
    </div>
    <div class="time-box">
      <span id="minutes">59</span>
      <small>Menit</small>
    </div>
    <div class="time-box">
      <span id="seconds">59</span>
      <small>Detik</small>
    </div>
  </div>
</div>

<div class="scarcity">
  <p>🔥 Hanya tersisa <strong>7 slot</strong> untuk bulan ini</p>
</div>

<section class="faq">
  <h2>Pertanyaan yang Sering Ditanyakan</h2>
  <div class="faq-list">
    <details class="faq-item">
      <summary>Berapa lama sampai melihat hasil?</summary>
      <p>
        Kebanyakan klien kami melihat peningkatan traffic dalam 7-14 hari
        pertama. Hasil optimal biasanya tercapai dalam 30-60 hari.
      </p>
    </details>
    <details class="faq-item">
      <summary>Apakah ada garansi uang kembali?</summary>
      <p>
        Ya, kami memberikan garansi 30 hari uang kembali. Jika tidak puas, kami
        refund 100% tanpa pertanyaan.
      </p>
    </details>
    <details class="faq-item">
      <summary>Apakah cocok untuk pemula?</summary>
      <p>
        Sangat cocok! Panduan kami dibuat step-by-step sehingga pemula pun bisa
        mengikuti dengan mudah.
      </p>
    </details>
  </div>
</section>

Pastikan visible tanpa scroll:
- Headline
- Subheadline
- Primary CTA
- Trust indicator (logo/rating)
- Hero image (sebagian)

@media (max-width: 768px) {
  .hero {
    flex-direction: column;
    text-align: center;
    padding: 2rem 1rem;
  }

  .headline {
    font-size: 2rem;
  }

  .cta-group {
    flex-direction: column;
  }

  .btn {
    width: 100%;
    text-align: center;
  }
}

<!-- Preload critical resources -->
<link rel="preload" href="/fonts/main.woff2" as="font" crossorigin />
<link rel="preload" href="/img/hero.webp" as="image" />

<!-- Lazy load below-fold images -->
<img src="/img/testimonial.webp" loading="lazy" alt="..." />

<!-- Minimize CSS -->
<link rel="stylesheet" href="/css/critical.min.css" />

1. Headlines
   - Different value props
   - With/without numbers
   - Question vs statement

2. CTA Buttons
   - Color (red vs green vs blue)
   - Text (Get vs Start vs Try)
   - Size and position

3. Social Proof
   - Number of testimonials
   - With/without photos
   - Video testimonials

4. Forms
   - Number of fields
   - Single step vs multi-step
   - Inline vs popup