Referensi Visual — Beranda SMK Telkom JakartaLegacy format

• Rekaman diambil pada layar 1920×1080. Lebar tampilan browser di rekaman ± 1890 px fisik. Kemungkinan skala Windows 125%, sehingga lebar viewport CSS ± 1530 px. Ini dugaan; angka pasti diambil dari reference-values.json (lihat devtools-snippet.js).

• Semua angka di bawah adalah perkiraan dalam CSS px (toleransi ± 10%), diukur dari frame.

• Bangun untuk lebar 1280–1920 px dulu, lalu turunkan ke tablet dan mobile (aturan responsif ada di design.md).

| Elemen | Nilai |

|---|---|

| Judul | Condensed sans semi-bold, mirip Barlow Semi Condensed |

| Isi | Roboto regular, warna abu tua ≈ #4B4C4E, line-height sangat longgar (≈ 1.9) |

| Merah tombol | ≈ #E60012 (hover lebih gelap) |

| Merah band | ≈ #C8000F |

| Oranye aksen | ≈ #EE511A (garis bawah judul, ikon centang, kutip, angka statistik, bingkai foto) |

| Judul section tengah | cokelat-merah tua ≈ #8F2E10 dengan garis bawah merah ≈ 3 px × 110 px, rata tengah |

| Hitam | judul #111, footer #1A1A1A |

| Latar | putih; kartu putih dengan bayangan lembut besar |

> Koreksi terhadap design.md: judul section tengah ("Berita", "Hall of Fame", "Lingkungan Belajar Terbaik") di referensi berwarna cokelat-merah tua, bukan merah murni. Angka statistik berwarna oranye.

### 0. Navbar

• Logo putih di kiri (tinggi ≈ 48 px). Menu di tengah-kanan, teks putih 16 px medium, ada panah kecil ▾ pada menu berdropdown.

• Menu: Beranda ▾, Tentang Kami ▾, Program ▾, Alumni ▾, Hubungi Kami ▾, SPMB, lalu ikon sosial (Facebook, Twitter, Instagram, TikTok) berukuran ≈ 16 px.

• Transparan di atas hero. Item yang di-hover berlatar hitam (tinggi penuh navbar, padding horizontal ≈ 16 px).

• Dropdown muncul tepat di bawah item: latar merah, lebar ≈ 200–250 px, tiap baris tinggi ≈ 52–56 px, teks putih 15–16 px, garis pemisah putih tipis (≈ 25% opacity), tanpa radius.

• Contoh isi dropdown: Program → 6 item; Alumni → 2 item; Hubungi Kami → 2 item.

### 1. Hero

• Foto layar penuh (lebar 100%), tinggi ≈ 88% tinggi viewport. Overlay gelap ringan-sedang di seluruh foto (± 35–45%), sedikit lebih gelap di bawah.

• Teks rata kiri, sejajar tepi kiri container, di sekitar 40% dari atas hero:

• Judul putih, condensed semi-bold, ≈ 36–40 px, satu baris.

• Satu kalimat pendukung putih ≈ 17 px, jarak ≈ 20 px di bawah judul.

• Baris tombol, jarak ≈ 28 px di bawah kalimat: tombol merah "DAFTAR SEKARANG →" (tinggi ≈ 48 px, lebar ≈ 210 px, padding horizontal ≈ 26 px, teks putih bold 14 px huruf kapital, radius 0) + tautan teks putih "KONSULTASI GRATIS" dengan ikon WhatsApp kecil, jarak ≈ 32 px dari tombol.

### 2. Selayang Pandang (sambutan)

• Latar putih. Dua kolom: teks kiri (≈ 60%), foto kanan (≈ 35%).

• Judul "Selayang Pandang" condensed semi-bold ≈ 36 px, hitam. Di bawahnya garis oranye tebal ≈ 3 px × 48 px.

• Subjudul (jabatan) ≈ 22 px condensed semi-bold. Paragraf 16 px, line-height ≈ 1.9, beberapa frasa bold.

• Foto kepala sekolah berpotongan (tanpa latar) di dalam bingkai heksagon merah (tebal ≈ 6 px, warna merah, isi merah tua), ditambah satu heksagon garis kecil merah di pojok kanan atas dan satu belah ketupat merah kecil di kiri. Di belakangnya ada gradasi abu sangat halus di sisi kanan.

### 3. Alasan Memilih

• Dua kolom: gambar kiri (≈ 30%, orang berpotongan dengan tulisan besar "COME"/"JOIN US"), teks kanan.

• Label kotak merah "ALASAN MEMILIH" (putih, bold 13 px, padding ≈ 12×24 px).

• Judul ≈ 34 px, satu paragraf ≈ 16 px.

• Daftar centang dua kolom × lima baris, ikon lingkaran centang oranye ≈ 20 px, teks 16 px, jarak antarbaris ≈ 14 px.

### 4. Banner prestasi (gambar lebar container)

• Satu gambar poster lebar container (rasio ≈ 2:1) berisi info kelulusan, lalu di bawahnya satu strip merah tipis berisi info kontak dan media sosial. Untuk project ini: banner "Lulusan Terbaik" berupa gambar/kartu yang diisi dari data alumni.

### 5. Informasi SPMB (banner pendaftaran)

• Lebar penuh, tinggi ≈ 380–420 px, foto sekolah dengan overlay gelap ≈ 55%.

• Di tengah atas ada garis oranye kecil (≈ 50 × 3 px). Judul putih tengah 2 baris ≈ 34 px, paragraf putih tengah ≈ 16 px (lebar maksimal ≈ 540 px), tombol merah "DAFTAR SEKARANG →" di tengah.

### 6. Program Keahlian

• Dua kolom. Kiri: foto persegi (≈ 430 × 480 px). Bingkai garis oranye 3 px bergeser ≈ 30 px ke kanan-bawah dari foto, sebagian di belakang foto.

• Kanan: judul ≈ 36 px + garis oranye, paragraf 2–3 baris, lalu daftar 2 kolom × 3 baris: ikon garis oranye ≈ 32 px di kiri, nama program 18 px semi-bold hitam, deskripsi satu baris 16 px abu.

### 7. Testimoni

• Kolom kiri: judul "Testimoni" + garis oranye + satu paragraf pendek. Kolom kanan: tiga kartu bertumpuk dengan posisi selang-seling (kartu 1 dan 3 rata kanan, kartu 2 bergeser ke kiri ≈ 200 px), jarak vertikal ≈ 40 px.

• Kartu: latar putih, bayangan besar sangat lembut (offset-y ≈ 20 px, blur ≈ 60 px, opacity ≈ 12%), tanpa radius. Foto hitam-putih di kiri (lebar ≈ 190 px, tinggi penuh kartu), isi di kanan: ikon kutip oranye, kutipan bold abu 16 px, nama 16 px, jabatan 14 px.

### 8. Projek Jurusan

• Baris judul: kiri judul + garis oranye + paragraf (lebar ≈ 480 px), kanan tombol merah "View All Projects →" sejajar dengan bagian bawah paragraf.

• Di bawahnya grid panel lebar penuh (edge-to-edge), 3 kolom × 2 baris, tanpa jarak, tiap panel tinggi ≈ 350 px: foto latar dengan overlay gelap, judul putih di tengah 24–26 px condensed semi-bold, angka besar samar (01–06, putih ≈ 20% opacity, ≈ 120 px) di belakang judul.

• Saat hover: overlay berubah menjadi oranye dengan transisi ≈ 300 ms.

### 9. Berita (judul "Berita Damos")

• Judul tengah cokelat-merah tua ≈ 36 px + garis bawah merah tengah.

• Sub-judul "Damos Magazine": bold 18 px rata kiri, garis merah pendek di bawahnya, di atas garis abu tipis selebar container.

• Grid majalah: berita besar di kiri (≈ 66% lebar, tinggi ≈ 420 px), di kanan dua berita bertumpuk (masing-masing ≈ 205 px tinggi). Judul putih bold di atas gambar dengan gradasi gelap di bawah (≈ 60% tinggi), di bawah judul: ikon jam + tanggal, ikon komentar + jumlah (putih 13 px).

• Di bawahnya baris "Aktivitas" (judul sama gaya): 4 kartu kecil sejajar, tiap kartu: gambar (rasio ≈ 4:3) dan di bawahnya judul bold 15 px (maks 3 baris) + tanggal abu dengan ikon jam, latar putih, bayangan halus.

### 10. Activity & Experience (band merah)

• Band merah penuh lebar (≈ #C8000F), padding vertikal ≈ 60 px.

• Judul putih tengah ≈ 34 px dengan garis putih tebal ≈ 3 px × 150 px di bawahnya.

• Carousel dua foto berdampingan hampir lebar penuh (tiap foto ≈ 600 × 340 px, jarak ≈ 16 px), panah putih ‹ › di tepi kiri/kanan, titik penanda kecil di bawah.

### 11. Hall Of Fame

• Judul tengah cokelat-merah tua + garis bawah merah.

• Carousel tiga poster sejajar selebar container (masing-masing ≈ 1/3, rasio ≈ 4:5), panah abu di kiri/kanan, ±16 titik di bawahnya (abu, aktif hitam/gelap).

• Baris statistik 4 kolom, dipisah garis vertikal abu tipis: angka besar oranye (≈ 56–60 px, condensed/medium) dengan label di bawahnya huruf kapital abu ≈ 15 px, letter-spacing ≈ 0.08em. Contoh: 8 SEJAK BERDIRI, 3,005 JUMLAH LULUSAN, 22 TENAGA PENDIDIK, 70 PRESTASI TAHUN INI. Angka dianimasikan menghitung naik saat masuk layar (opsional).

### 12. Lingkungan Belajar Terbaik

• Judul tengah cokelat-merah tua + garis merah. Carousel 3 foto sejajar selebar container (rasio ≈ 16:10, jarak kecil), titik penanda di bawah.

### 13. Footer

• Latar #1A1A1A, padding vertikal ≈ 64 px. Empat kolom:

1. Logo putih, slogan putih 16 px, lalu 5 kotak ikon sosial (≈ 28 px, abu tua berikon putih).

2. Judul kolom (putih, condensed semi-bold ≈ 22 px) + 4 tautan putih 16 px.

3. Judul + 4 tautan.

4. Judul "Head Office" + alamat, WhatsApp, email (putih 16 px, line-height ≈ 1.6).

• Di bawahnya garis pemisah abu tipis, lalu baris hak cipta (kiri: "Copyright © 2026 …", kanan: teks singkat) putih 15 px, padding ≈ 28 px.

### Elemen tetap di semua halaman

• Tombol kembali ke atas: kotak merah ≈ 36 × 36 px, panah putih, kanan-bawah (≈ 20 px dari tepi), muncul setelah menggulir.

• Navbar: transparan di puncak halaman, dropdown terbuka saat hover (desktop), tanpa animasi panjang (≈ 150 ms).

• Tombol: warna berubah saat hover (merah → merah lebih gelap), transisi ≈ 200 ms.

• Panel jurusan: overlay berubah ke oranye saat hover.

• Carousel: bisa digeser dan punya panah + titik penanda. Tanpa autoplay agresif.

• Semua animasi hormati prefers-reduced-motion.

| Section referensi | Isi di SMKN 2 Karanganyar |

|---|---|

| Selayang Pandang | Sambutan Kepala Sekolah (data pengaturan) |

| Alasan Memilih | Keunggulan sekolah (tabel keunggulan) |

| Banner prestasi | Lulusan Terbaik (tabel alumni) |

| Informasi SPMB | Informasi PPDB (status dari pengaturan) |

| Program Keahlian | Jurusan (tabel jurusan) |

| Testimoni | Testimoni mitra industri/alumni |

| Projek Jurusan | Produk Unggulan BLUD (panel foto 3×2) |

| Berita Damos | Berita & Pengumuman |

| Activity & Experience | Galeri Kegiatan |

| Hall Of Fame | Prestasi + statistik sekolah |

| Lingkungan Belajar Terbaik | Fasilitas sekolah (carousel foto) |

| Footer | Tautan, mitra industri, alamat SMKN 2 |

• [ ] Tinggi hero, ukuran judul, dan posisi tombol sama proporsinya.

• [ ] Dropdown navbar: warna merah, tinggi baris, pemisah tipis.

• [ ] Garis oranye di bawah judul: tebal ≈ 3 px, panjang ≈ 48 px.

• [ ] Heksagon sambutan, bingkai oranye Program Keahlian, kartu testimoni selang-seling.

• [ ] Panel jurusan/BLUD edge-to-edge dengan angka samar dan hover oranye.

• [ ] Grid majalah berita (besar + 2 kecil) dan 4 kartu di bawahnya.

• [ ] Band merah + carousel, baris statistik dengan pemisah vertikal.

• [ ] Footer empat kolom dan tombol kembali ke atas.

• [ ] Tampil rapi di 1920, 1536, 1280, 768, dan 390 px.

Setiap ketidaksesuaian dilaporkan dengan angka atau nama bagian, misalnya: "hero terlalu pendek, harus ≈ 88vh" atau "garis bawah judul terlalu tipis, harus 3 px". Bukan "kurang mirip".