[M1] Splash: Implement Animated Splash Screen

[mohamed-dev-404]

📝 Overview

Implement the initial animated splash screen for the Skillify application as per the provided design. This screen serves as the first branding touchpoint and loading state before transitioning the user to the Authentication or Onboarding flow.

✅ Acceptance Criteria

1. UI & Layout

• Center the "Skillify" logo (icon and text) vertically and horizontally on the screen.
• Apply the specific background styling (solid white transitioning to a light cyan/teal gradient at the bottom edge).
• Ensure the screen layout is fully responsive and scales correctly across all mobile device dimensions without stretching the logo.

2. Animation Integration

• Implement a smooth, professional entry animation for the Skillify logo (e.g., a subtle fade-in, scale-up, or logo part assembly, based on exact motion guidelines).
• Ensure the animation runs fluidly (target 60fps) without stuttering or UI blocking.

3. State Management & Routing

• Implement a seamless, automated routing transition to the next appropriate screen (e.g., Login if unauthenticated, or the Main Dashboard if authenticated) once the app is ready and the minimum animation time has elapsed.
• Ensure the user cannot "navigate back" to the splash screen using device hardware or software back buttons after the transition occurs.

🎨 Assets & Styling Notes

• Logo: Ensure the high-resolution vector (SVG) version of the Skillify logo is used to prevent pixelation during animation.
• Background Gradient: Ensure the teal gradient accurately matches the specific color hex codes used in the Figma/design file.

🚫 Out of Scope

• Complex backend API calls (beyond a simple session verification check).