Komponen company profile: kartu testimoni & FAQ accordion tanpa JS

<figure class="quote">
  <blockquote>
    Fit-out 800m² selesai 3 hari lebih cepat dari jadwal. Laporan progres
    masuk tiap Jumat tanpa diminta.
  </blockquote>
  <figcaption class="quote__by">
    <!-- Inisial: pengganti foto yang tidak pernah gagal dimuat -->
    <span class="avatar" aria-hidden="true">RS</span>
    <span>
      <b>Rina Susanti</b>
      <small>GM Operasional, PT Maju Bersama</small>
    </span>
  </figcaption>
</figure>

<!-- Accordion tanpa JavaScript: <details> sudah bisa buka-tutup sendiri -->
<div class="faq">
  <details open>
    <summary>Berapa lama pengerjaan fit-out kantor?<span class="faq__x">+</span></summary>
    <p>6–10 minggu untuk 500–1000m², tergantung kompleksitas MEP dan approval gedung.</p>
  </details>
  <details>
    <summary>Apakah termasuk perizinan gedung?<span class="faq__x">+</span></summary>
    <p>Ya. Pengurusan izin kerja dan koordinasi dengan building management masuk scope.</p>
  </details>
  <details>
    <summary>Bagaimana skema pembayarannya?<span class="faq__x">+</span></summary>
    <p>Termin: 40% mulai, 40% progres 50%, 20% serah terima setelah punch list beres.</p>
  </details>
</div>

.quote {
  margin: 0 0 22px;
  border: 1px solid #e4e4e7;
  padding: 18px;
}
.quote blockquote {
  margin: 0;
  font-size: 14px;
  line-height: 1.65;
}
.quote__by {
  margin-top: 14px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.avatar {
  width: 36px;
  height: 36px;
  flex: none;
  border-radius: 999px;
  background: #f0fdfa;
  color: #0f766e;
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 600;
}
.quote__by b { display: block; font-size: 13px; }
.quote__by small { display: block; font-size: 12px; color: #71717a; }

.faq { border-top: 1px solid #e4e4e7; }
.faq details { border-bottom: 1px solid #e4e4e7; }

.faq summary {
  list-style: none;         /* buang segitiga bawaan */
  cursor: pointer;
  padding: 13px 0;
  font-size: 14px;
  font-weight: 600;
  display: flex;
  justify-content: space-between;
  gap: 12px;
}
.faq summary::-webkit-details-marker { display: none; }

.faq__x {
  color: #0d9488;
  transition: transform 0.2s ease;
}
.faq details[open] .faq__x { transform: rotate(45deg); }

.faq p {
  margin: 0 0 14px;
  font-size: 13px;
  line-height: 1.7;
  color: #52525b;
}

Dua komponen ini muncul di hampir setiap company profile yang kubangun — dan keduanya bisa dibuat tanpa satu baris JavaScript pun. Buka-tutup FAQ di panel preview: itu HTML murni.

Accordion dengan <details>: fitur browser, bukan library

Sebagian besar tutorial mengajarkan accordion dengan click listener + toggle class. Padahal HTML sudah punya elemennya:

<details open>
  <summary>Berapa lama pengerjaannya?<span class="faq__x">+</span></summary>
  <p>6–10 minggu untuk 500–1000m²...</p>
</details>

Yang kamu dapat gratis: buka-tutup, navigasi keyboard (Tab + Enter), state open yang bisa di-CSS, dan — yang paling penting untuk company profile — isinya tetap ada di HTML sehingga terbaca crawler Google meski tertutup. Accordion berbasis JavaScript yang menyembunyikan konten dengan display:none juga terindeks, tapi accordion yang isinya baru di-fetch saat diklik tidak.

Dua baris CSS untuk menghilangkan segitiga bawaan browser:

.faq summary { list-style: none; }
.faq summary::-webkit-details-marker { display: none; }

Lalu ikon + diputar 45° jadi × saat terbuka, murni lewat selektor [open]:

.faq details[open] .faq__x { transform: rotate(45deg); }

Satu catatan penting: kalau kamu memasang FAQPage JSON-LD (lihat build note SEO & GEO), isi <details> harus tetap sama persis dengan yang ada di schema — Google memvalidasi keduanya cocok.

Testimoni: avatar inisial mengalahkan foto

Foto klien sering tidak tersedia, resolusinya berantakan, atau gagal dimuat. Avatar inisial (RS, AN) selalu tampil sempurna, nol request jaringan, dan tidak pernah rusak:

.avatar {
  width: 36px; height: 36px;
  border-radius: 999px;
  display: grid; place-items: center;   /* pemusatan 2 baris */
}

Yang lebih menentukan kredibilitas bukan fotonya, tapi kelengkapan atribusinya: nama lengkap + jabatan + perusahaan. Testimoni anonim (“Bapak A, Jakarta”) justru menurunkan kepercayaan — pembaca menganggapnya karangan.

Semantik yang tepat

Perhatikan elemennya: <figure> + <blockquote> + <figcaption>. Ini bukan kosmetik — kombinasi itu memberi tahu mesin (dan pembaca screen reader) bahwa teks tersebut kutipan dengan sumber tertentu. <div class="quote"> biasa tidak menyampaikan apa pun.

Pelajaran

• Sebelum menulis listener, cek dulu apakah HTML sudah punya elemennya — <details>, <dialog>, <datalist> sering mengejutkan.
• Konten yang tersembunyi tetap harus ada di HTML awal kalau kamu peduli SEO.
• Kredibilitas testimoni datang dari atribusi lengkap, bukan dari foto.