Pola: Hero Section

Hero adalah panggung pembuka sebuah halaman: satu area besar berisi pernyataan utama, ajakan bertindak, dan suasana visual yang menentukan kesan pertama. Pola ini memadukan hampir semua materi yang sudah kita kuasai — viewport units, flexbox, dan gradient — ke dalam satu bagian halaman yang berdiri sendiri. Pada chapter ini kita mengatur tingginya mengikuti layar, menata kontennya tepat di tengah, membangun latarnya dengan gradient overlay, lalu menyiapkan varian dua kolom untuk hero yang memuat visual.

Tinggi yang Mengisi Layar #

Ciri khas hero adalah tingginya yang menyamai jendela browser, dicapai dengan min-height dan viewport unit:

.hero {
  min-height: 92dvh;
}

Mengapa min-height, bukan height? Dengan min-height, konten yang lebih tinggi dari viewport tetap didorong dengan wajar — hero boleh bertambah tinggi, tidak pernah memotong isinya. Dan mengapa 92%, bukan 100%? Menyisakan sedikit bagian section berikutnya yang terlihat memberi isyarat visual bahwa halaman masih bisa digulir.

Satuan dvh sudah kita bahas di chapter Viewport Units: berbeda dengan vh yang dihitung dari viewport awal, dvh mengikuti tinggi viewport dinamis ketika address bar ponsel muncul atau hilang. Perbandingan singkatnya:

Tumpukan Konten di Tengah #

Konten hero biasanya berupa tumpukan vertikal yang terpusat — pekerjaan klasik flex column:

.hero {
  min-height: 92dvh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: 16px;
}

.hero-tombol {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
}

Mari kita telaah keputusannya: justify-content: center menengahkan tumpukan pada sumbu utama (vertikal), align-items: center menengahkan setiap anak pada sumbu lintang, dan text-align: center merapikan teks di dalam setiap anak karena flexbox tidak menengahkan isi teks elemennya. Tombol dikemas dalam baris flex tersendiri agar deretannya tetap rapi dan boleh melipat di layar sempit.

Latar Gradient dengan Overlay #

Latar hero biasanya berlapis: satu lapis visual, satu lapis gelap transparan untuk menjamin kontras teks:

.hero {
  background: linear-gradient(rgba(13, 61, 46, 0.82), rgba(13, 61, 46, 0.82)), linear-gradient(135deg, #1f6f54, #0d3d2e);
  color: #ffffff;
}

Beberapa hal yang perlu digarisbawahi dari shorthand background ini:

1. Urutan lapisan: lapisan pertama yang ditulis berada paling atas. Overlay gelap ditulis lebih dulu, tepat di atas visual di bawahnya.
2. Overlay berupa gradient satu warna: linear-gradient dengan warna awal dan akhir yang sama menghasilkan lapisan rata transparan — kontras teks dijaga mendekati rasio 4,5:1 yang kita bahas di chapter Kontras Warna.
3. Mengganti visual dengan foto: lapisan kedua cukup ditukar menjadi url(...) untuk gambar, lalu tambahkan background-size: cover dan background-position: center seperti pada chapter Background Size.

Demo berikut merakit hero lengkap dengan overlay gradient dan tumpukan terpusat:

Varian Dua Kolom: Teks dan Visual #

Hero yang memuat ilustrasi atau tangkapan layar produk lazim disusun dua kolom — pekerjaan grid pada tingkat bagian halaman:

.hero-dua-kolom {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 48px;
  min-height: 70dvh;
}

.visual-hero {
  aspect-ratio: 4 / 3;
  border-radius: 16px;
  background: linear-gradient(135deg, #f4fbf7, #9ed2b5);
}

Karena dua kolom lebih padat daripada tumpukan tunggal, min-height diturunkan ke 70dvh agar proporsinya tetap nyaman. Di layar sempit, satu deklarasi media query grid-template-columns: 1fr menumpukkan keduanya — urutan markup memastikan teks selalu muncul lebih dulu. Demo berikut merakit varian dua kolomnya:

Ringkasan #

Hero menggabungkan tiga pola dalam satu bagian halaman: min-height berbasis dvh untuk tinggi layar penuh, flex column untuk tumpukan konten terpusat, dan latar berlapis dengan overlay transparan untuk keterbacaan. Varian dua kolom memindahkan penataannya ke grid ketika visual ikut bertanding. Selanjutnya kita turun ke kerangka halaman yang paling sering dipakai untuk situs multi-halaman: layout dengan sidebar.