Kembali ke demoBUKU KOMPONEN KHUSUS TEMA INIEN

Sapa / DESAIN & KOMPONEN

Sapa
Disusun dari bagiannya sendiri.

Serahkan kartu nama. Usaha kecil sering dikenal lewat kartu nama cetak yang diulurkan di meja; Sapa menjadikan kartu itu halamannya. Sisi depannya membawa nama, jenis usaha, dan tiga baris kontak di dalam tepi berjahit; sisi belakangnya QR halaman itu sendiri. Di bawahnya tautan milik usaha dan tabel jam yang menyatakan apakah kios sedang buka — bukan profil media sosial tiruan.

01 / Palet & tipografi

Tinta plum dan benang mulberry di atas kertas kartu hangat: muka kartu sedikit lebih terang dari halaman, berasio kartu cetak 1,75:1, jahitan putus-putus di dalam tepinya, dan tanda jarum-benang. Tautan berupa baris berbingkai, jam berupa tabel bergaris; mulberry menandai aksi utama, jahitan, dan hari ini.

Kertas kartu#f3eee7
Tinta plum#3b1d3f
Benang mulberry#9e2f65
Tint plum#e6d6e0
Muka kartu#fffdf9
Tinta redup#6b5a6d

Hanken Grotesk 700, grotesk ringkas dan netral seperti huruf kartu nama cetak, menulis nama, judul bagian, dan papan nama, sehingga nama pengunjung mana pun tetap terbaca. DM Sans membawa baris kontak, tautan, jam, dan tombol dengan angka tabular. Schibsted Grotesk 700 tetap cadangan tercatat yang tidak dipakai.

02 / Komposisi & perilaku

Satu halaman. Di layar lebar kartu dan dua aksinya di kiri, tautan dan jam di kanan. Di ponsel terbaca kartu → aksi → tautan → jam, tanpa yang perlu digeser ke samping. Tanpa JavaScript kedua sisi kartu tampil berurutan, sisi belakang berupa alamat halaman dalam teks.

Kartu condong mengikuti pointer atau jari (paling jauh 8°) dan kembali saat dilepas; Balik kartu memutarnya sekali ke sisi QR. Benang tanda dijahit sekali saat halaman dimuat. Dengan reduced motion kartu tetap datar, berbalik tanpa berputar, dan tandanya langsung utuh.

Balik kartu adalah tombol alih dengan aria-pressed; kedua sisi tetap dalam urutan baca. QR punya teks alternatif dan alamat di sampingnya, jadi tidak ada yang bergantung pada pemindaian. Tautan menyebut tujuannya atau bahwa tidak tertaut; baris buka-sekarang adalah status sopan; baris hari ini dinamai dengan kata, bukan warna.

03 / Kontrol hingga setiap detail

Satu halaman. Di layar lebar kartu dan dua aksinya di kiri, tautan dan jam di kanan. Di ponsel terbaca kartu → aksi → tautan → jam, tanpa yang perlu digeser ke samping. Tanpa JavaScript kedua sisi kartu tampil berurutan, sisi belakang berupa alamat halaman dalam teks.

Daftar komponen (gulir untuk memeriksa)

  1. 01
    Kartu nama yang miring dan dibalik ke QR

    Satu halaman. Di layar lebar kartu dan dua aksinya di kiri, tautan dan jam di kanan. Di ponsel terbaca kartu → aksi → tautan → jam, tanpa yang perlu digeser ke samping. Tanpa JavaScript kedua sisi kartu tampil berurutan, sisi belakang berupa alamat halaman dalam teks.

  2. 02
    Simpan kontak sebagai vCard (.vcf)

    Balik kartu adalah tombol alih dengan aria-pressed; kedua sisi tetap dalam urutan baca. QR punya teks alternatif dan alamat di sampingnya, jadi tidak ada yang bergantung pada pemindaian. Tautan menyebut tujuannya atau bahwa tidak tertaut; baris buka-sekarang adalah status sopan; baris hari ini dinamai dengan kata, bukan warna.

  3. 03
    Tautan berbingkai yang menyebut tujuannya

    Halaman Next.js statis dwibahasa. QR dikodekan di peramban oleh encoder milik tema (mode byte, level M, versi 1–10) dari alamat halaman dan digambar sebagai SVG dengan tinta kartu; berkas vCard 3.0 dirakit lokal. Jam buka dihitung dari waktu Jakarta dengan Intl. Tanpa penyimpanan selain brand pengunjung, tanpa server.

  4. 04
    Jam buka dengan baris buka-sekarang

    Halaman Next.js statis dwibahasa. QR dikodekan di peramban oleh encoder milik tema (mode byte, level M, versi 1–10) dari alamat halaman dan digambar sebagai SVG dengan tinta kartu; berkas vCard 3.0 dirakit lokal. Jam buka dihitung dari waktu Jakarta dengan Intl. Tanpa penyimpanan selain brand pengunjung, tanpa server.

  5. 05
    Buku komponen dan status sendiri

    Halaman Next.js statis dwibahasa. QR dikodekan di peramban oleh encoder milik tema (mode byte, level M, versi 1–10) dari alamat halaman dan digambar sebagai SVG dengan tinta kartu; berkas vCard 3.0 dirakit lokal. Jam buka dihitung dari waktu Jakarta dengan Intl. Tanpa penyimpanan selain brand pengunjung, tanpa server.

  6. 06
    Personalisasi merek lokal

    Halaman Next.js statis dwibahasa. QR dikodekan di peramban oleh encoder milik tema (mode byte, level M, versi 1–10) dari alamat halaman dan digambar sebagai SVG dengan tinta kartu; berkas vCard 3.0 dirakit lokal. Jam buka dihitung dari waktu Jakarta dengan Intl. Tanpa penyimpanan selain brand pengunjung, tanpa server.

  7. 07
    Pilihan, tooltip & area gulir

    Perilaku papan ketik dibagikan; tema ini memiliki warna popup, batas, radius, tipografi, dan fokus sendiri.

  8. 08
    Ekspor & batasan

    Studi desain fiktif. Permak Jarum Tiga tidak ada: nomor WhatsApp-nya dari rentang yang disediakan untuk drama, domain surelnya disediakan untuk contoh, tanpa alamat, harga, ulasan, atau pengikut, dan vCard-nya menyebut dirinya contoh fiktif.

BACA KEPUTUSAN DESAIN

Mengapa disusun seperti ini.

Tangkapan layar menunjukkan pembuka yang diimplementasikan. Catatan menghubungkan komposisinya dengan pengalaman yang berfungsi dan perilaku di ponsel.

Tangkapan layar desktop asli demo Sapa.123
Tangkapan layar website asli. Ikuti catatan bernomor.
  1. 01

    Kartu adalah halamannya

    Muka kartu cetak 1,75:1 bertepi jahitan membawa nama, jenis usaha, dan tiga baris kontak — bukan profil media sosial tiruan. Nama dan logo pengunjung menggantikan milik contoh; baris kontak tetap contoh berlabel.

  2. 02

    Sisi belakangnya halaman ini

    Balik kartu memutarnya ke QR yang dibuat di peramban dari alamat halaman, dengan alamatnya dalam teks di sampingnya. Kartu condong mengikuti pointer atau jari dan tetap datar saat reduced motion.

  3. 03

    Tautan menyebut tujuannya

    Setiap baris berbingkai menyebut tujuannya atau menyatakan tidak tertaut; daftar ongkos dibiarkan kosong, bukan dikarang. Tabel jam menyatakan dengan kata apakah kios sedang buka, dari waktu Jakarta.

04 / Kontrak formulir & respons

Catatan persiapan lokal. Coba kirim kosong, perbaiki, lalu ekspor masukanmu sendiri.

10–1.000 karakter. Disimpan pada halaman ini.

Catatan yang disiapkan akan muncul di sini.

05 / Komponen yang benar-benar bekerja

Aktifkan ruang kerja lengkap saat ingin memeriksanya. Kode interaksinya dimuat sesuai kebutuhan.