06
Komponen
Kontrak setiap komponen: navbar, hero, kartu, sidebar, tombol, dropzone, dan lainnya.
navbar
| container | <nav id="navbar"> position: sticky; top: 0; z-index: 50 |
| background | rgba(10, 10, 15, 0.95) |
| backdrop | blur(4px) |
| border-bottom | 1px solid #1a1a2e |
| height | 48px (var(--nav-height)) |
| scrolled | adds box-shadow: var(--shadow-md) |
brand.json path: /component/navbar
hero
| container | section.hero-brand with optional bg-brand-gradient-animated |
| min-height | calc(100svh - 5rem) |
| shield-flank | two decorative shield SVGs at 6% opacity, hidden below 768px |
brand.json path: /component/hero
section-badge
| recipe | uppercase pill, cyan text on rgba(0,184,212,0.12), 1px border rgba(0,184,212,0.25), padding 4-8 vertical 10-14 horizontal, radius 4-20 |
brand.json path: /component/section-badge
breadcrumb
| padding | var(--space-md) 0 |
| size | 14px |
| color | #6E6E73 |
| separator | 8px margin both sides, 0.5 opacity, user-select none |
brand.json path: /component/breadcrumb
card-feature
| background | rgba(255, 255, 255, 0.03) |
| backdrop | blur(16px) |
| border | 1px solid rgba(255, 255, 255, 0.08) |
| radius | 16px |
| padding | 40px |
| hover | translateY(-4px), surface-hover bg, cyan-tint border, shadow card-hover |
| icon-tile | 48x48 with 12px radius and --icon-bg-* tint |
brand.json path: /component/card-feature
card-pricing
| grid | .pr-plans-grid max-width 1120px, 3 columns at >=768px |
| card-base | rgba(255,255,255,0.04) bg, blur(40px) saturate(180%), 1px solid rgba(255,255,255,0.08), radius 28px, padding 40px 32px 36px |
| pro-elevated | scale(1.04), cyan-tinted bg, cyan border, outer cyan glow |
| hover | translateY(-4px); Pro keeps scale and adds lift |
brand.json path: /component/card-pricing
pricing-toggle
| wrapper | pill, padding 4px, bg rgba(255,255,255,0.05), 1px solid rgba(255,255,255,0.10) |
| active | solid teal #14b8a6, white text, shadow 0 4px 12px rgba(20,184,166,0.35) |
| inactive | transparent, text tertiary, hover white |
| save-chip | #fbbf24 (or #fde68a on active background) |
brand.json path: /component/pricing-toggle
faq
| question-button | aria-expanded, font-display 17px 600, hover cyan |
| glyph | + collapsed, - expanded; transitions on duration-fast |
| answer | max-height transition with padding-bottom |
brand.json path: /component/faq
dashboard-sidebar
| width | 260px (--sidebar-width) |
| background | linear-gradient(180deg, #121220 0%, #0f0f18 40%, #0c0c15 100%) |
| group-label | 11px 600 uppercase 0.05em tracking, color text-faint |
| nav-item-height | 40px |
| nav-item-radius | 8px |
| active-state | rgba(0,184,212,0.08) background AND a 3px LEFT BORDER in cyan #00B8D4. Hard BetterGuard rule: never bottom, never right. |
| hover | rgba(255,255,255,0.04) |
Aturan tegas. Item sidebar aktif menggunakan BATAS KIRI 3px dalam cyan #00B8D4. Tidak pernah bawah, tidak pernah kanan. Ini adalah aturan tegas BetterGuard dari BRAND_GUIDELINES.md C.10.
brand.json path: /component/dashboard-sidebar
plan-badge
| padding | 4px 10px |
| font | 10px 700 uppercase 0.5px tracking |
| background | linear-gradient(135deg, rgba(124,77,255,0.3) 0%, rgba(0,184,212,0.2) 100%) |
| border | 1px solid rgba(124,77,255,0.5) |
| radius | 20px |
| color | #c77dff with text-shadow 0 0 8px rgba(199,125,255,0.5) |
brand.json path: /component/plan-badge
dropzone
| default-border | 2px dashed #2a2a3e |
| background | #0f0f1a |
| hover | border #00B8D4, background rgba(0,184,212,0.05) |
| dragover | border #00B8D4, background rgba(0,184,212,0.1) |
brand.json path: /component/dropzone
btn-primary
| padding | 12px 24px |
| background | linear-gradient(135deg, #00B8D4, #9D7EFF) |
| color | #FFFFFF |
| font | Sora 17px 600 |
| radius | 8px |
| transition | transform, box-shadow on 200ms ease-out |
| hover | translateY(-2px), glow-brand |
| focus-visible | 2px solid #00B8D4 outline, 2px offset, 8px radius |
brand.json path: /component/btn-primary
btn-secondary
| background | transparent |
| color | #00E5FF |
| border | 2px solid #00E5FF |
| radius | 8px |
| hover | rgba(255,255,255,0.1) background, white text |
brand.json path: /component/btn-secondary
cta-link
| color | #00B8D4 |
| glyph | U+203A right single angle bracket |
| transition | color, gap on hover (gap 4px to 8px) |
brand.json path: /component/cta-link
footer-construction-banner
| rule | transient pre-launch strip; red border, dark bg, small white text. Remove on public launch. Red accent is only allowed here. |
brand.json path: /component/footer-construction-banner
language-dropdown
| trigger | min-width 44px, min-height 44px touch target |
| panel | lists 43+ locales, alpine click-outside close, arrow-key nav |
brand.json path: /component/language-dropdown