Implement PlugBrain Onboarding Flow

[msbelaid]

Description

Implement the onboarding flow for PlugBrain based on the provided Figma designs.

Figma Design:
https://www.figma.com/design/uYAs8XFheRGrCAcSqTQ5Sb/PlugBrain---Github?node-id=0-1&p=f

Requirements

UI Implementation

• Implement all onboarding screens from the Figma
• Match spacing, typography, colors, and animations as closely as possible
• Support light and dark themes
• Ensure responsive layouts across screen sizes

Navigation

• Add onboarding step navigation

• Implement:

  • Continue / Next actions
  • Back navigation
  • Skip onboarding action

• Redirect users to the main app after completion

State Management

• Persist onboarding completion state
• Prevent onboarding from showing again after completion
• Handle app relaunch correctly

Components

Create reusable components for:

• Onboarding page layouts
• CTA buttons
• Indicators/progress dots
• Illustrations/assets containers

Additional Notes

• Use Jetpack Compose
• Follow existing project architecture and design system
• Keep animations smooth and lightweight
• Add previews where applicable

Acceptance Criteria

• All onboarding screens implemented
• Navigation works correctly
• Completion state persists
• UI matches Figma design
• Dark mode supported
• Responsive on different device sizes
• No major accessibility issues
• Code follows project conventions

Testing

Test:

• Fresh install flow
• Skip onboarding
• Back navigation
• Relaunch after completion
• Orientation changes
• Different screen sizes/themes