---
layout: base
title: Cara Pakai
eleventyNavigation:
  key: Cara Pakai
  order: 2
---

{% include "components/ads.html" %} {% include "components/ads-mobile.html" %}

<div class="single">
  <h1
    class="pt-16 text-5xl text-center tracking-tight md:leading-tight font-bold"
  >
    Cara Pakai
  </h1>
  <article
    class="prose-sm md:prose-lg prose-h2:font-sans prose-h2:font-bold prose-h2:tracking-tight prose-h2:text-black prose-ul:list-disc prose-ol:list-decimal prose-a:text-blue-600 prose-a:border-b prose-a:border-blue-500 text-gray-900 font-serif text-base md:text-xl leading-8 md:tracking-wide pt-8 max-w-2xl mx-auto"
  >
    <h2>1. Tambah Gambar</h2>
    <p>
      Untuk memulai, langkah pertama adalah memilih gambar yang ingin Anda beri
      watermark. Tekan tombol "<strong>Tambah Gambar</strong>" di bawah ini.
    </p>
    <div
      class="inline-block sm:inline-flex items-center space-x-1 text-base text-blue-600"
    >
      <i class="ri-information-line text-xl fill-current"></i>
      <span
        >Gambar yang ditambahkan tidak akan dikirim keluar dari perangkat yang
        Anda gunakan.</span
      >
    </div>
    <div class="flex justify-center">
      {% image "src/img/tambah-gambar.png", "Tombol 'Tambah Gambar'", [350,
      100], "rounded-lg border border-gray-200 shadow hover:scale-105
      transition" %}
    </div>

    <h2>2. Watermark Otomatis</h2>
    <p>
      Jika Anda ingin menambahkan watermark secara otomatis, centang checkbox
      "<strong>Watermark Otomatis</strong>".
    </p>
    <div class="flex justify-center">
      {% image "src/img/watermark-otomatis.png", "Checkbox 'Watermark
      Otomatis'", [350, 100], "rounded-lg border border-gray-200 shadow
      hover:scale-105 transition" %}
    </div>

    <h2>3. Masukan Teks</h2>
    <p>
      Setelah itu, ketikkan teks watermark yang diinginkan dalam kotak teks.
      Sebagai contoh, "<strong>10-10-2021 Verifikasi Pinjaman Online</strong>".
    </p>
    <div class="flex justify-center">
      {% image "src/img/box-teks.png", "Input watermark", [350, 100],
      "rounded-lg border border-gray-200 shadow hover:scale-105 transition" %}
    </div>

    <h2>4. Pilih Font</h2>
    <p>
      Pilih jenis teks yang diinginkan dengan memilihnya dari kotak
      "<strong>Font</strong>" seperti yang terlihat pada gambar di bawah ini.
    </p>
    <div class="flex justify-center">
      {% image "src/img/box-font.png", "Opsi font watermark", [350, 100],
      "rounded-lg border border-gray-200 shadow hover:scale-105 transition" %}
    </div>

    <h2>5. Pilih Posisi Watermark</h2>
    <p>
      Pilih posisi watermark melalui kotak "<strong>Posisi Teks</strong>".
      Alternatifnya, Anda dapat menentukan posisinya langsung dengan menekan
      teks pada kotak gambar di sebelah kanan dan menariknya ke lokasi yang
      diinginkan.
    </p>
    <div class="flex justify-center">
      {% image "src/img/box-posisi.png", "Opsi posisi watermark", [350, 100],
      "rounded-lg border border-gray-200 shadow hover:scale-105 transition" %}
    </div>

    <h2>6. Pilih Ukuran Watermark</h2>
    <p>
      Pilih ukuran watermark dari opsi yang tersedia pada kotak "<strong
        >Ukuran Font</strong
      >".
    </p>
    <div class="flex justify-center">
      {% image "src/img/box-ukuran.png", "Opsi ukuran watermark", [350, 100],
      "rounded-lg border border-gray-200 shadow hover:scale-105 transition" %}
    </div>

    <h2>7. Tentukan Warna Watermark</h2>
    <p>
      Setelah itu, pilih warna watermark yang diinginkan dari kotak opsi
      "<strong>Warna Teks</strong>".
    </p>
    <div class="flex justify-center">
      {% image "src/img/pilih-warna.png", "Input warna watermark", [350, 100],
      "rounded-lg border border-gray-200 shadow hover:scale-105 transition" %}
    </div>

    <h2>8. Mengatur Rotasi Watermark</h2>
    <p>
      Sesuaikan rotasi watermark dengan menggunakan opsi "<strong
        >Rotasi Teks</strong
      >". Geser-geser nilai rotasi untuk mendapatkan tampilan yang diinginkan.
    </p>
    <div class="flex justify-center">
      {% image "src/img/atur-rotasi.png", "Input rotasi watermark", [350, 100],
      "rounded-lg border border-gray-200 shadow hover:scale-105 transition" %}
    </div>

    <h2>9. Mengatur Opasitas Watermark</h2>
    <p>
      Sesuaikan tingkat opasitas watermark dengan menggunakan opsi "<strong
        >Opacity Teks</strong
      >". Geser-geser nilai opasitas untuk mendapatkan efek yang diinginkan.
    </p>
    <div class="flex justify-center">
      {% image "src/img/atur-opasitas.png", "Input opasitas watermark", [350,
      100], "rounded-lg border border-gray-200 shadow hover:scale-105
      transition" %}
    </div>

    <h2>10. Mereset watermark</h2>
    <p>
      Jika Anda perlu mengatur ulang watermark, gunakan tombol
      "<strong>Reset</strong>" untuk mengembalikan semua pengaturan ke nilai
      awal.
    </p>
    <div class="flex justify-center">
      {% image "src/img/reset-watermark.png", "Tombol reset watermark", [200,
      73], "rounded-lg border border-gray-200 shadow hover:scale-105 transition"
      %}
    </div>

    <h2>11. Download Gambar</h2>
    <p>
      Setelah menyesuaikan watermark sesuai keinginan Anda, tekan tombol
      "<strong>Download</strong>" untuk menyimpan gambar KTP yang telah
      di-watermark ke perangkat Anda.
    </p>
    <div class="flex justify-center">
      {% image "src/img/download-gambar.png", "Tombol download gambar", [200,
      73], "rounded-lg border border-gray-200 shadow hover:scale-105 transition"
      %}
    </div>
  </article>
</div>