Redesign intro screen (#69)

* redesign intro screen

* change intro graphic

khelo/assets/locales/app_en.arb

@@ -84,21 +84,21 @@
 
   "@_ONBOARDING": {
   },
-  "intro_register_btn_text": "Register/Login",
-  "intro_get_start_text": "Getting started with us",
-  "intro_description_text": "get started with Khelo, create your team, start the match, score your match, get your stats and much more.\n\nEmbark on a journey beyond imagination, where every move is a new adventure!\nPlay. Thrive. Conquer.",
+  "intro_get_your_cricket_title": "Get Your Cricket On!",
+  "intro_get_your_cricket_description": "Turn backyard games into pro matches with our app. Create matches, manage teams, and track stats!",
+  "intro_continue_btn_text": "Continue",
 
-  "sign_in_enter_your_phone_number_text": "Enter your mobile number",
-  "sign_in_enter_phone_number_text": "Enter Mobile Number",
-  "sign_in_verify_phone_number_title": "What’s your phone number?",
-  "sign_in_verify_phone_number_description": "We will send you a one time password on your mobile number",
-  "sign_in_continue_btn_text": "Continue",
+  "sign_in_verify_phone_number_title": "Enter phone number",
+  "sign_in_verify_phone_number_description": "We’ll verify your phone number with a verification code.",
+  "sign_in_phone_number_placeholder": "00000 00000",
+  "sign_in_get_otp_btn_text": "Get OTP",
   "sign_in_invalid_phone_number_text": "Please enter valid phone number",
-  "otp_verification_verify_otp_text": "Verify OTP",
-  "otp_verification_enter_otp_text": "Enter OTP you received",
-  "otp_verification_description": "We've sent a verification code to your phone.",
-  "otp_verification_resend_code_text": "Resend Code",
+
+  "otp_verification_verification_title": "Verification code",
   "otp_verification_incorrect_otp_error_text": "*Please enter correct OTP",
+  "otp_verification_verify_btn_text": "Verify",
+  "otp_verification_verify_placeholder": "0 0 0 0 0 0",
+  "otp_verification_verification_description": "We've sent a verification code to your phone {phone}",
 
   "@_HOME": {
   },

khelo/lib/ui/flow/intro/intro_screen.dart

@@ -1,8 +1,10 @@
 import 'package:flutter/material.dart';
 import 'package:flutter_riverpod/flutter_riverpod.dart';
+import 'package:flutter_svg/flutter_svg.dart';
 import 'package:khelo/components/app_page.dart';
-import 'package:khelo/components/intro_gradient_background.dart';
 import 'package:khelo/domain/extensions/context_extensions.dart';
+import 'package:khelo/gen/assets.gen.dart';
+import 'package:style/button/bottom_sticky_overlay.dart';
 import 'package:style/extensions/context_extensions.dart';
 import 'package:style/text/app_text_style.dart';
 import 'package:style/button/primary_button.dart';
@@ -21,40 +23,52 @@ class _IntroScreenState extends ConsumerState<IntroScreen> {
   Widget build(BuildContext context) {
     return AppPage(
       body: Builder(builder: (context) {
-        return IntroGradientBackground(
-          child: Padding(
-            padding: context.mediaQueryPadding +
-                const EdgeInsets.symmetric(horizontal: 16.0),
-            child: Center(
-              child: SingleChildScrollView(
-                child: Column(
-                  crossAxisAlignment: CrossAxisAlignment.center,
-                  mainAxisAlignment: MainAxisAlignment.center,
-                  children: [
-                    Text(
-                      context.l10n.intro_get_start_text,
-                      style: AppTextStyle.header1
-                          .copyWith(color: context.colorScheme.textPrimary),
-                      textAlign: TextAlign.center,
-                    ),
-                    const SizedBox(height: 16),
-                    Text(
-                      context.l10n.intro_description_text,
-                      style: AppTextStyle.body1
-                          .copyWith(color: context.colorScheme.textSecondary),
-                      textAlign: TextAlign.center,
-                    ),
-                    const SizedBox(height: 24),
-                    PrimaryButton(
-                      context.l10n.intro_register_btn_text,
-                      onPressed: () =>
-                          AppRoute.phoneLogin.pushReplacement(context),
-                    ),
-                  ],
+        return Stack(
+          children: [
+            ListView(
+              padding: BottomStickyOverlay.padding + EdgeInsets.only(top: context.mediaQueryPadding.top),
+              children: [
+                Padding(
+                  padding: EdgeInsets.only(
+                      right: 16.0 + context.mediaQueryPadding.right),
+                  child: SvgPicture.asset(
+                    context.brightness == Brightness.dark
+                        ? Assets.images.introGraphicDark
+                        : Assets.images.introGraphicLight,
+                    fit: BoxFit.fill,
+                  ),
                 ),
+                Padding(
+                  padding: EdgeInsets.symmetric(
+                      horizontal: 16.0 + context.mediaQueryPadding.horizontal,
+                      vertical: 34),
+                  child: Column(
+                    crossAxisAlignment: CrossAxisAlignment.start,
+                    children: [
+                      Text(
+                        context.l10n.intro_get_your_cricket_title,
+                        style: AppTextStyle.header1
+                            .copyWith(color: context.colorScheme.textPrimary),
+                      ),
+                      const SizedBox(height: 16),
+                      Text(
+                        context.l10n.intro_get_your_cricket_description,
+                        style: AppTextStyle.subtitle1
+                            .copyWith(color: context.colorScheme.textDisabled),
+                      ),
+                      const SizedBox(height: 24),
+                    ],
+                  ),
+                ),
+              ],
+            ),
+            BottomStickyOverlay(
+              child: PrimaryButton(
+                context.l10n.intro_continue_btn_text,
+                onPressed: () => AppRoute.phoneLogin.push(context),
               ),
             ),
-          ),
+          ],
         );
       }),
     );