Kembali ke demoBUKU KOMPONEN KHUSUS TEMA INIEN

Roti Pagi / DESAIN & KOMPONEN

Roti Pagi
Disusun dari bagiannya sendiri.

Meja roti mengikuti cara memilih: lapisan croissant yang dilipat, sourdough untuk diiris, gulungan kayu manis untuk disobek. Nama, bahan contoh, dan jumlah mengisi catatan ambil lokal, tanpa mengirim pesanan.

01 / Palet & tipografi

Tinta merah anggur di atas krim, kulit roti keemasan, tepi foto melengkung, ilustrasi adonan melingkar, dan daftar kertas yang tenang.

Krim#fff6e7
Merah anggur#702b36
Kulit roti#dba15d
Adonan#f3e5cb

Fraunces, serif klasik yang lembut dengan italik sungguhan, memberi judul kehangatan label toko roti; DM Sans membawa bahan, jumlah, dan aksi.

02 / Komposisi & perilaku

Potret bakery melengkung menghadap pengantar serif. Meja roti horizontal memisahkan pilihan, gambar orisinal, dan bahan; kertas daftar ambil berada di bawah.

Gerakan lambat foto pastry dalam batas, kontinuitas spring untuk pilihan roti, dan tombol tambah yang taktil. Kontrol daftar tetap terpasang agar fokus bertahan saat jumlah berubah.

Konten terlihat dari server, kontrol papan ketik berlabel, fokus/portal berscope, dan alur seluler terbaca. Motion menghormati reduced motion dan menghindari loop otomatis.

03 / Kontrol hingga setiap detail

Potret bakery melengkung menghadap pengantar serif. Meja roti horizontal memisahkan pilihan, gambar orisinal, dan bahan; kertas daftar ambil berada di bawah.

Daftar komponen (gulir untuk memeriksa)

  1. 01
    Tiga gambar roti orisinal

    Potret bakery melengkung menghadap pengantar serif. Meja roti horizontal memisahkan pilihan, gambar orisinal, dan bahan; kertas daftar ambil berada di bawah.

  2. 02
    Catatan bahan roti dan alergen contoh

    Konten terlihat dari server, kontrol papan ketik berlabel, fokus/portal berscope, dan alur seluler terbaca. Motion menghormati reduced motion dan menghindari loop otomatis.

  3. 03
    Kontrol jumlah dan TXT daftar ambil

    Halaman Next.js statis dwibahasa dengan status React lokal, batas Motion per rute, dan artefak perencanaan yang dapat diunduh. Tanpa akun atau pengiriman eksternal.

  4. 04
    Buku desain meja roti dengan pemilih dan daftar ambil yang berfungsi

    Halaman Next.js statis dwibahasa dengan status React lokal, batas Motion per rute, dan artefak perencanaan yang dapat diunduh. Tanpa akun atau pengiriman eksternal.

  5. 05
    Pilihan, tooltip & area gulir

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

  6. 06
    Ekspor & batasan

    Hanya perencanaan: tanpa harga, stok, pesanan terkonfirmasi, atau waktu ambil. Resep ilustratif; bahan dan alergen sebenarnya memerlukan verifikasi bakery.

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.

Bahasa meja roti

Sebut rotinya sebelum suasananya: lapisan croissant, kulit sourdough, gulungan kayu manis. Tiap pilihan menuju bahan contoh, jumlah, dan daftar ambil. Foto adalah referensi; gambar menjelaskan tiga roti contoh, bukan stok hari ini.

Catatan ambil

Pakai “daftar ambil” dan “simpan”, jangan “pesanan terkonfirmasi”. Tidak menyiratkan jam buka, jadwal panggang, harga, atau ketersediaan. Meja roti berfungsi di bawah memakai salinan dan komponen yang sama dengan demo.

05 / Komponen yang benar-benar bekerja

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