Blog

Lima subpage terasa seperti website lain setelah homepage didesain ulang. Solusinya bukan mempercantik satu per satu, tapi memindahkan bahasa desain ke komponen shared.

TL;DR: Awalnya homepage cakep tapi halaman lain kayak website beda jadi berantakan. Ternyata solusinya simpel cukup pakai dua komponen shared page-hero dan page-cta biar semua halaman konsisten. Ganti token sekali semua ikut keubah, kartu jadi lebih clean tanpa border tebal dan tombol pill-nya seragam.

Tantangan teknis menempatkan badge ISO pada maskot: positioning, border-radius, dan animasi CSS yang tidak saling menimpa.

TL;DR: Nempel badge di maskot ternyata nggak semudah itu, butuh 12 commit gara-gara anchor absolute positioning-nya ngaco. Solusinya bungkus artwork pakai wrapper relative w-fit biar badge nggak ikut geser pas ukuran layar berubah. Badge juga sempat lonjong gara-gara rounded-full di kotak non-persegi, untung centering pakai translate Tailwind v4 aman dari keyframe animasi.

Konversi WebP lossy ternyata merusak artwork flat-color: satu properti unoptimized mengembalikan ketajaman file aslinya.

TL;DR: Artwork flat-color di Next.js jadi becek gara-gara pipeline Image pakai WebP lossy quality 75, outline gemuk dan muncul gradasi palsu. Solusinya cuma nambah properti unoptimized di slot hero, file asli 170 KB disajikan tanpa diotak-atik. Pelajarannya: foto boleh dioptimasi, aset flat mending dibiarkan apa adanya atau pakai lossless.

Pil background ternyata cuma tambal: brand mark butuh dua aset ketika situs punya dark mode plus toggle manual yang dipersist.

TL;DR: Wordmark putih buat dark mode ternyata aneh pas light mode, jadi slot brand butuh dua file gambar. Triknya dua Image Next.js di slot yang sama, satu dark:hidden, satu hidden dark:block, nol JavaScript. Hati-hati: dark variant Tailwind v4 defaultnya ngikutin OS, bukan toggle class, plus alt text dan dimensi jangan dilupain.

Refactor kaki halaman website korporat: kolom brand menempel ke dasar cuma pakai stretch plus mt-auto, tanpa JavaScript sama sekali.

TL;DR: Bikin kolom footer sejajar di dasar ternyata nggak butuh JavaScript, cukup align-items: stretch bawaan grid plus mt-auto. Lebar kolom bisa diatur pakai grid-cols-[1.4fr_1fr_1fr_1fr] biar blok brand lebih lega. Pelajarannya: cek dulu perilaku default sebelum nambah alat baru.

Revert font heading cuma satu baris karena semua heading membaca satu token. Eksperimen selera jadi murah.

TL;DR: Coba ganti font heading pakai Source Serif 4, kok 22 menit udah di-revert karena kelebayan bookish. Untung semua heading baca dari satu CSS variable, jadi undo-nya cuma satu baris, nggak perlu edit belasan file. Yang gagal dibuang, yang menang kayak nav Inter tetep kepake, eksperimen murah emang enak.

Border kartu lenyap di atas latar muted karena dua warna abu-abu kembar. Pelajaran soal token, kontras, dan asumsi latar.

TL;DR: Border kartunya nggak hilang, cuma warnanya kembaran sama latar muted jadi kayak ngumpet. Perbaikannya satu baris doang: ganti ke border-primary/15 plus bg-card/40, sekalian benerin kontras biar lolos WCAG. Pelajarannya, token warna itu asumsi, komponen multi-surface mending dites di semua surface dulu.

Registry as const plus union type membuat kompiler TypeScript menjaga konsistensi ikon kartu perusahaan di tiga tempat sekaligus.

TL;DR: Awalnya tujuh kartu perusahaan pakai ikon gedung yang sama, jadinya seragam dan gitu-gitu aja. Solusinya, pilihan ikon dipindah ke data konten pakai union type plus registry kecil, jadi tiap bisnis punya ikon sendiri. Kerennya, kompiler TypeScript yang jagain konsistensi—salah ketik atau lupa satu file dua bahasa langsung gagal build, bukan kelihatan aneh pas production.

Tiga commit restyling malam itu arahnya satu: buang ring, buang wrapper ikon, hapus strip sertifikasi yang dobel. Difnya negatif.

TL;DR: Pas restyle grid layanan, penulis sadar wrapper ikon cuma kebiasaan lama, jadi dihapus dan ikon Lucide dirender langsung dengan ukuran lebih besar plus stroke tipis biar lebih ringan. Strip sertifikasi ISO yang diduplikasi dari hero ikut dihapus, 34 baris kode lenyap. Moralnya, restyling yang sukses itu soal penghapusan; hiasan nggak perlu cuma jadi gangguan.