Engenharia

Adopt motion v12 for below-fold and navigation animations. Hero uses CSS transform-only animation — motion on above-the-fold content causes 8–10 s LCP due to SSR inline styles keeping Chrome's LCP candidate unsettled.

• animation
• performance
• accessibility
• bundle

Adopt a three-layer testing strategy — component tests with Vitest + Testing Library, E2E journeys with Playwright, and Lighthouse CI for performance and accessibility gates.

• testing
• quality
• ci
• lighthouse
• playwright
• vitest

Split header navigation into a client component that adds a mobile menu, active link state and shell-aware scroll locking without promoting the whole layout to the client.

• navigation
• mobile
• accessibility

Apply mirrored frame insets and a shell offset variable so the framed layout remains mathematically consistent without colliding with lateral controls.

• layout
• design-system
• shell

Move page scrolling to an internal shell container to stabilize the frame, header behavior and viewport handling across routes.

• architecture
• layout
• scroll