feat: impl WelcomeScreen according to Figma design (#70)

* feat: impl `WelcomeScreen` according to Figma design
- add some variables to arb files & generated translation files
- rename `WelcomePage` to `WelcomeScreen` & update where it is used
- impl `WelcomeScreen` widgets
- add `primaryLight` color to AppColors
- add some welcomeScreen png to project source
- add/create `CustomFilledButton`

* docs: add/update documents according to mark down standards

* style: reformat codes with dart reformat command

* docs: update `CHANGELOG.md` & `pubspec.yaml` files

* update: fix issue on pipeline about `assets` file generations

* update: fix issue on pipeline about `CodegenLoader` class and file generations

* update: update `CHANGELOG.md` file

---------

Co-authored-by: = <=>

CHANGELOG.md

@@ -1,3 +1,17 @@
+# 1.14.0+16
+
+- [Feat] : impl `WelcomeScreen` according to Figma design. [#70](https://github.com/pactus-project/pactus-gui/pull/70)
+  - add some variables to arb files & generated translation files
+  - rename `WelcomePage` to `WelcomeScreen` & update where it is used
+  - impl `WelcomeScreen` widgets
+  - add `primaryLight` color to AppColors
+  - add some welcomeScreen png to project source
+  - add/create `CustomFilledButton`
+
+- [Update] : fix issue on pipeline about file generations [#70](https://github.com/pactus-project/pactus-gui/pull/70)
+  - fix issue on pipeline about CodegenLoader class and file generations
+  - fix issue on pipeline about assets file generations
+
 # 1.13.0+15
 
 - [Fix] : Fix conflicts between `fluent_ui.dart` and `material.dart` imports. [#67](https://github.com/pactus-project/pactus-gui/pull/67)

lib/l10n/app_en.arb

@@ -4,5 +4,8 @@
   "subtitle": "Welcome to Localization",
   "description": "You have pushed the button this many times:",
   "switch_language": "Switch language",
-  "applications": "Applications"
+  "applications": "Applications",
+  "welcome_title": "Welcome to the Future of Blockchain with Pactus!",
+  "welcome_description": "Where the future of blockchain unfolds with trust and transparency in every transaction. Join us in shaping a decentralized revolution!",
+  "start_button_text": "Get Started"
 }

lib/l10n/app_es.arb

@@ -4,5 +4,8 @@
   "subtitle": "Bienvenido a Localización",
   "description": "Has pulsado el botón tantas veces:",
   "switch_language": "Cambiar idioma",
-  "applications": "Applications"
+  "applications": "Applications",
+  "welcome_title": "Bienvenido al futuro de la cadena de bloques con Pactus!",
+  "welcome_description": "Donde el futuro de la cadena de bloques se desarrolla con confianza y transparencia en cada transacción. Únase a nosotros para dar forma a una revolución descentralizada!",
+  "start_button_text": "Empezar"
 }

lib/l10n/app_fr.arb

@@ -4,5 +4,8 @@
   "subtitle": "Bienvenue dans Localisation",
   "description": "Vous avez appuyé sur le bouton autant de fois :",
   "switch_language": "Changer de langue",
-  "applications": "Applications"
+  "applications": "Applications",
+  "welcome_title": "Bienvenue dans le futur de la Blockchain avec Pactus!",
+  "welcome_description": "Là où lavenir de la blockchain se dévoile avec confiance et transparence dans chaque transaction. Rejoignez-nous pour façonner une révolution décentralisée!",
+  "start_button_text": "Commencer"
 }

lib/src/core/common/colors/app_colors.dart

@@ -3,5 +3,6 @@ import 'package:fluent_ui/fluent_ui.dart';
 class AppColors {
   AppColors._();
   static const primaryDark = Color(0xFF242424);
+  static const primaryLight = Color(0xFFFFFFFF);
   static const splashBackground = Color(0xFF00142E);
 }

lib/src/core/common/widgets/custom_filled_button.dart

@@ -0,0 +1,116 @@
+import 'package:fluent_ui/fluent_ui.dart';
+import 'package:gui/src/core/common/colors/app_colors.dart';
+import 'package:gui/src/features/main/language/core/localization_extension.dart';
+import 'package:pactus_gui_widgetbook/app_styles.dart';
+
+/// ## [CustomFilledButton] Class Documentation
+///
+/// The `CustomFilledButton` class represents a custom styled filled button
+/// widget.
+/// It is built using the `Button` widget from the `fluent_ui` package and
+/// provides customization options
+/// for styling, text, icon, and various button properties.
+///
+/// ### Usage:
+/// This class allows you to create a custom filled button with a text label
+/// , an optional icon, and customizable properties.
+/// It is ideal for creating buttons with specific styles and behaviors within
+/// a Fluent UI-based application.
+///
+/// ### Properties:
+/// - **[text]** (String):
+///   - The text to be displayed on the button.
+///   - This will be localized using the `context.tr` method.
+///
+/// - **[onPressed]** (VoidCallback):
+///   - The callback function that is executed when the button is pressed.
+///   - This is a required parameter.
+///
+/// - **[style]** (ButtonStyle?):
+///   - Optional button style that can be passed to customize the button's
+///   appearance.
+///   - If not provided, a default style is used.
+///
+/// - **[icon]** (Widget?):
+///   - An optional widget (usually an icon) that will be displayed
+///   before the button's text.
+///   - If no icon is provided, the button will only display the text.
+///
+/// - **[autofocus]** (bool):
+///   - A boolean indicating whether the button should autofocus when
+///   the widget is built.
+///   - Defaults to `false`.
+///
+/// - **[focusNode]** (FocusNode?):
+///   - An optional focus node to manage the focus state of the button.
+///
+/// - **[padding]** (EdgeInsetsGeometry?):
+///   - Optional padding for the button's content. If not provided,
+///   default padding is used.
+///
+/// ### Notes:
+/// - The button's text is automatically localized using the `context.tr(text)`
+/// method from the localization extension.
+/// - If no `style` is provided, the button will use a default style with a
+/// specific padding, background color, and rounded shape.
+
+class CustomFilledButton extends StatelessWidget {
+  const CustomFilledButton({
+    super.key,
+    required this.text,
+    required this.onPressed,
+    this.style,
+    this.icon,
+    this.autofocus = false,
+    this.focusNode,
+    this.padding,
+  });
+  final String text;
+  final VoidCallback onPressed;
+  final ButtonStyle? style;
+  final Widget? icon;
+  final bool autofocus;
+  final FocusNode? focusNode;
+  final EdgeInsetsGeometry? padding;
+
+  @override
+  Widget build(BuildContext context) {
+    return Button(
+      onPressed: onPressed,
+      autofocus: autofocus,
+      focusNode: focusNode,
+      style: style ??
+          ButtonStyle(
+            padding: WidgetStateProperty.all<EdgeInsetsDirectional?>(
+              const EdgeInsetsDirectional.symmetric(
+                horizontal: 24,
+                vertical: 4,
+              ),
+            ),
+            backgroundColor: WidgetStateProperty.all(const Color(0xFF0066B4)),
+            shape: WidgetStateProperty.all(
+              RoundedRectangleBorder(
+                borderRadius: BorderRadius.circular(4),
+              ),
+            ),
+          ),
+      child: Padding(
+        padding:
+            padding ?? const EdgeInsets.symmetric(horizontal: 12, vertical: 8),
+        child: Row(
+          mainAxisSize: MainAxisSize.min,
+          children: [
+            if (icon != null) icon!,
+            if (icon != null) const SizedBox(width: 8),
+            Text(
+              context.tr(text),
+              style: InterTextStyles.bodyBold.copyWith(
+                color: AppColors.primaryLight,
+              ),
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+}

lib/src/core/router/registration_routes.dart

@@ -10,14 +10,14 @@ import 'package:gui/src/features/master_password/presentation/screen/master_pass
 import 'package:gui/src/features/password/presentation/screen/password_page.dart';
 import 'package:gui/src/features/restoration_seed/presentation/screen/restoration_seed_page.dart';
 import 'package:gui/src/features/validator_config/presentation/screen/validator_config_page.dart';
-import 'package:gui/src/features/welcome/presentation/screen/welcome_page.dart';
+import 'package:gui/src/features/welcome/presentation/screen/welcome_screen.dart';
 import 'route_name.dart';
 
 final List<GoRoute> registrationRoutes = [
   GoRoute(
     path: AppRoute.welcome.fullPath,
     name: AppRoute.welcome.name,
-    builder: (context, state) => const WelcomePage(),
+    builder: (context, state) => const WelcomeScreen(),
     routes: [
       GoRoute(
         path: AppRoute.initializeMode.path,