Sesi 1 dari 5•10 min

1. Anatomi Sticky Transparent Navbar & Adaptive Logo

Analisis bilah navigasi melayang transparan di atas hero yang bertransisi ke glassmorphism saat di-scroll, lengkap dengan logo adaptif SVG.

Enterprise Web Architecture & Reverse Engineering Presentation Deck

GGF_UI_Visual_Anatomy_Masterclass.pdf

Download

1/12 Slides

Anatomi Navigasi Enterprise

Header & Navbar Screenshot

Executive Takeaway (Bain Framework)

Executive Takeaway: Pola Sticky Transparent Navbar bertransformasi secara mulus saat scroll >50px untuk menjaga aksesibilitas navigasi teks dan rasio kontras WCAG tanpa mengorbankan estetika hero video.

Struktur arsitektur Sticky Transparent Navbar:

Kondisi Awal (Top Viewport): Transparan (`bg-transparent`), logo berwarna putih kontras di atas video backdrop gelap.

Kondisi Scroll (>50px): Transisi cepat ke solid/glassmorphism (`backdrop-blur-md bg-white/90 shadow-sm`), logo beralih ke varian warna asli.

Resep Kode Tailwind CSS & React Component:

tsx

<header className="fixed top-0 left-0 w-full z-50 transition-all duration-300 backdrop-blur-md bg-white/90 shadow-sm border-b border-slate-200/50 dark:bg-ramir-navy/90 dark:border-slate-800">
  <div className="max-w-7xl mx-auto px-6 h-20 flex items-center justify-between">
    <Logo variant="adaptive" />
    <NavLinks items={['About Us', 'Sustainability', 'Our Business', 'Careers']} />
    <LocaleSwitcher locales={['EN', 'ID']} />
  </div>
</header>

Buka Akses Lengkap Modul Dossier

Materi ini di-blur 50% (*Reforge Artifact Vault Model*). Masukkan Nama & WhatsApp Master untuk membuka seluruh riset dan resep kode.

100% Gratis Akses Instan• Direct Access ke Tim Ramir

Uji Pemahaman Sesi (Micro-Checkpoint)