htmlcssjavascriptlandingPemula9 mnt baca

Hero Section yang Memukau

Bagian pembuka website dengan headline besar, subheadline, CTA, dan background gradien.

Apa Itu Hero Section?

Hero section adalah area pertama yang dilihat pengunjung, biasanya memenuhi satu layar penuh. Tugasnya satu: dalam 5 detik pengunjung harus paham situs ini tentang apa dan apa yang harus dilakukan berikutnya. Ibarat sampul buku, kalau sampulnya membosankan orang tidak akan membuka isinya.

Langkah Membangun

HTML: <section class="hero"> berisi badge kecil, <h1> headline, <p> subheadline, dan dua tombol CTA (primer dan sekunder).

CSS: Kunci visualnya:

min-height: 90vh agar section setinggi hampir satu layar.
Flexbox dengan flex-direction: column; justify-content: center; align-items: center; text-align: center untuk menengahkan semuanya.
Background gradien: linear-gradient(135deg, #1e1b4b, #7c3aed).
Headline besar: font-size: clamp(2rem, 6vw, 4rem). Fungsi clamp membuat ukuran font responsif otomatis tanpa media query.

JS: Efek kecil tapi berkesan: teks headline diketik otomatis (typewriter effect) memakai setInterval yang menambah satu huruf tiap 60ms.

Kesalahan Umum

Terlalu banyak teks di hero. Satu headline, satu kalimat pendukung, maksimal dua tombol.
CTA tidak kontras dengan background sehingga tidak terlihat.
Lupa meta viewport sehingga hero berantakan di HP.

Live Playground

export default function App(): JSX.Element {
  return <h1>Hello world</h1>
}

Edit kode di kiri, preview kanan ter-update otomatis.

Tantangan

Tantangan: Tombol CTA Berdenyut

Buat tombol primer berdenyut lembut (scale 1 ke 1.05 berulang) memakai animasi CSS @keyframes agar perhatian pengunjung tertuju ke sana. Pastikan animasinya halus dengan ease-in-out dan durasi 1.5 detik.