- created snackbar, step indicator, money text, text field and progress bar components.

- created wallet balance block, wallet item and kid line chart widgets.
- restructured onboarding, signup and device signup screens into layouts and main screens.
- updated signup and kid wallet screens to 17/11 design.

modules/auth/lib/src/onboarding/presentation/welcome_screen.dart

@@ -1,75 +1,135 @@
+import 'package:design_system/design_system.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_svg/svg.dart';
 import 'package:flutter_riverpod/flutter_riverpod.dart';
 import 'package:navigation/navigation.dart';
 
-class WelcomeScreen extends ConsumerWidget {
+class WelcomeScreen extends ConsumerStatefulWidget {
   final NavigationContract navigationContract;
 
   const WelcomeScreen({super.key, required this.navigationContract});
 
   @override
-  Widget build(BuildContext context, WidgetRef ref) {
+  ConsumerState<ConsumerStatefulWidget> createState() => WelcomeScreenState(navigationContract: navigationContract);
+
+}
+
+class WelcomeScreenState extends ConsumerState{
+  late int currentStep;
+  final NavigationContract navigationContract;
+
+  WelcomeScreenState({required this.navigationContract});
+
+  @override
+  void initState() {
+    super.initState();
+    currentStep = 0;
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    final theme = ref.watch(themePortProvider);
+
     return Scaffold(
-      body: Center(
-        child: Column(
-          children: [
-            Spacer(),
-            Expanded(
-              child: CarouselView(
-                scrollDirection: Axis.horizontal,
-                itemExtent: double.infinity,
-                itemSnapping: true,
-                shrinkExtent: 400,
-                children: generateSteps(),
+      body: Container(
+        padding: EdgeInsets.symmetric(horizontal: 24),
+        child: Center(
+          child: Column(
+            spacing: 48,
+            children: [
+              Spacer(),
+              generateSteps()[currentStep],
+              Column(
+                spacing: 24,
+                children: [
+                  StepIndicator(max: 3, current: currentStep+1, color: theme.getColorFor(ThemeCode.buttonSecondary)),
+                  generateButtons(theme, 3, currentStep+1)
+                ]
               ),
-            ),
-            FilledButton(
-              onPressed: () => navigationContract.goTo('/link_phone'),
-              child: const Text('Continuar'),
-            ),
-            Spacer(),
-          ],
-        ),
-      ),
+              Spacer()
+            ]
+          )
+        )
+      )
     );
   }
 
-  void jumpToNext(BuildContext context) {
-    // Navigator.pushReplacement(
-    //   context,
-    //   MaterialPageRoute(builder: (_) => LinkPhoneScreen()),
-    // );
-    return;
+  Widget generateButtons(ThemePort theme, int max, int step){
+    if (step==max) {
+      return FilledButton(
+        style: ButtonStyle(
+          backgroundColor: WidgetStatePropertyAll<Color>(theme.getColorFor(ThemeCode.buttonPrimary))
+        ),
+        onPressed: () => navigationContract.goTo('/link_phone'),
+        child: Expanded(child: Center(child: Text('Continuar')))
+    );
+    } else {
+      return Column(
+        spacing: 16,
+        children: [
+          FilledButton(
+            style: ButtonStyle(
+              backgroundColor: WidgetStatePropertyAll<Color>(theme.getColorFor(ThemeCode.buttonSecondary))
+            ),
+            onPressed: ()=>setState(() {
+              currentStep++;
+            }),
+            child: Expanded(child: Center( child: Text("Siguiente")))
+          ),
+          TextButton(
+            onPressed: ()=>navigationContract.goTo('/link_phone'),
+            child: Text("Omitir")
+          )
+        ],
+      );
+    }
   }
 
   List<Widget> generateSteps() {
     return [
       Column(
-        spacing: 30,
+        spacing: 48,
         children: [
           SvgPicture.asset("assets/images/ui/bienvenida_paso1.svg"),
-          Text(
-            "Aprende a gestionar su dinero",
-            style: TextStyle(fontWeight: FontWeight.bold, fontSize: 20),
-          ),
-          Text("Tu peque crea hábitos y se divierte mientras lo hace"),
-        ],
+          Column(
+            spacing: 16,
+            children: [
+              Text(
+                "Aprende a gestionar su dinero",
+                textAlign: TextAlign.center,
+                style: TextStyle(fontWeight: FontWeight.w500, fontSize: 30)
+              ),
+              Text(
+                "Tu peque crea hábitos y se divierte mientras lo hace",
+                textAlign: TextAlign.center,
+                style: TextStyle(fontSize: 18)
+              )
+            ]
+          )
+        ]
       ),
       Column(
         children: [
           SvgPicture.asset("assets/images/ui/bienvenida_paso2.svg"),
-          Text("Tranquilidad en cada pago que hacen"),
-          Text("Supervisa gastos, fija límites y acompáñalos en cada paso"),
+          Text("Tranquilidad en cada pago que hacen",
+            textAlign: TextAlign.center,
+            style: TextStyle(fontWeight: FontWeight.w500, fontSize: 30)),
+          Text("Supervisa gastos, fija límites y acompáñalos en cada paso",
+            textAlign: TextAlign.center,
+            style: TextStyle(fontSize: 18)),
         ],
       ),
       Column(
         children: [
           SvgPicture.asset("assets/images/ui/bienvenida_paso3.svg"),
-          Text("Pagos fáciles y seguros en sus manos"),
-          Text("Podrá pagar desde su reloj.\n Sin móvil ni efectivo"),
+          Text("Pagos fáciles y seguros en sus manos",
+            textAlign: TextAlign.center,
+            style: TextStyle(fontWeight: FontWeight.w500, fontSize: 30)),
+          Text("Podrá pagar desde su reloj.\n Sin móvil ni efectivo",
+            textAlign: TextAlign.center,
+            style: TextStyle(fontSize: 18)),
         ],
       ),
     ];
   }
-}
+}