kasy-cli 1.21.8 → 1.22.0

package/templates/firebase/lib/features/onboarding/ui/components/onboarding_features.dart

@@ -1,5 +1,6 @@
 import 'package:flutter/material.dart';
 import 'package:kasy_kit/features/onboarding/ui/widgets/onboarding_feature.dart';
+import 'package:kasy_kit/features/onboarding/ui/widgets/onboarding_module_mockups.dart';
 import 'package:kasy_kit/i18n/translations.g.dart';
 
 class OnboardingFeatureOne extends StatelessWidget {
@@ -22,9 +23,8 @@ class OnboardingFeatureOne extends StatelessWidget {
       description: translations.description,
       btnText: translations.action,
       nextRoute: nextRoute,
-      imgPath: 'assets/images/onboarding/purchase.png',
-      withBg: true,
-      progress: 0.1,
+      step: 1,
+      image: const PaywallMockup(),
       onSkip: onSkip,
       skipLabel: translations.skip,
       onSecondary: onLogin,
@@ -49,9 +49,8 @@ class OnboardingFeatureTwo extends StatelessWidget {
       description: translations.description,
       btnText: translations.action,
       nextRoute: nextRoute,
-      imgPath: 'assets/images/onboarding/authentication-login-template.jpg',
-      withBg: true,
-      progress: 0.2,
+      step: 2,
+      image: const AuthMockup(),
     );
   }
 }
@@ -72,9 +71,8 @@ class OnboardingFeatureThree extends StatelessWidget {
       description: translations.description,
       btnText: translations.action,
       nextRoute: nextRoute,
-      imgPath: 'assets/images/onboarding/notifications.png',
-      withBg: true,
-      progress: 0.3,
+      step: 3,
+      image: const NotificationsMockup(),
     );
   }
 }

package/templates/firebase/lib/features/onboarding/ui/components/onboarding_loader.dart

@@ -1,4 +1,5 @@
 import 'package:flutter/material.dart';
+import 'package:flutter_animate/flutter_animate.dart';
 import 'package:flutter_riverpod/flutter_riverpod.dart';
 import 'package:kasy_kit/core/theme/theme.dart';
 import 'package:kasy_kit/features/onboarding/providers/onboarding_provider.dart';
@@ -27,66 +28,88 @@ class _OnboardingJournalLoaderState extends ConsumerState<OnboardingLoader> {
 
   @override
   Widget build(BuildContext context) {
+    final colors = context.colors;
     final translations = Translations.of(context).onboarding.loading;
     return OnboardingBackground(
       child: SafeArea(
-        child: Column(
-          mainAxisAlignment: MainAxisAlignment.center,
-          children: [
-            Flexible(
-              flex: 0,
-              child: Padding(
-                padding: const EdgeInsets.fromLTRB(
-                  KasySpacing.md,
-                  KasySpacing.xl,
-                  KasySpacing.md,
-                  0,
-                ),
-                child: Text(
-                  translations.title,
-                  textAlign: TextAlign.center,
-                  style: context.textTheme.headlineMedium?.copyWith(
-                    color: context.colors.onBackground,
-                  ),
+        child: Padding(
+          padding: const EdgeInsets.symmetric(horizontal: KasySpacing.xl),
+          child: Column(
+            mainAxisAlignment: MainAxisAlignment.center,
+            children: [
+              const _PulsingOrb(),
+              const SizedBox(height: KasySpacing.xl),
+              Text(
+                translations.title,
+                textAlign: TextAlign.center,
+                style: context.textTheme.headlineSmall?.copyWith(
+                  color: colors.onBackground,
                 ),
               ),
-            ),
-            Flexible(
-              flex: 0,
-              child: Padding(
-                padding: const EdgeInsets.fromLTRB(
-                  KasySpacing.xl,
-                  KasySpacing.md,
-                  KasySpacing.xl,
-                  0,
-                ),
-                child: Text(
-                  translations.subtitle,
-                  textAlign: TextAlign.center,
-                  style: context.textTheme.bodyMedium?.copyWith(
-                    color: context.colors.muted,
-                    fontWeight: FontWeight.w400,
-                  ),
+              const SizedBox(height: KasySpacing.smd),
+              Text(
+                translations.subtitle,
+                textAlign: TextAlign.center,
+                style: context.textTheme.bodyMedium?.copyWith(
+                  color: colors.muted,
                 ),
               ),
-            ),
-            Padding(
-              // Intentionally narrow (100px lateral) — visual design choice for loader
-              padding: const EdgeInsets.fromLTRB(100, KasySpacing.xl, 100, 0),
-              child: ClipRRect(
-                borderRadius: KasyRadius.fullBorderRadius,
-                child: LinearProgressIndicator(
-                  minHeight: 12,
-                  valueColor: AlwaysStoppedAnimation<Color>(
-                    context.colors.primary,
+              const SizedBox(height: KasySpacing.xl),
+              ConstrainedBox(
+                constraints: const BoxConstraints(maxWidth: 180),
+                child: ClipRRect(
+                  borderRadius: KasyRadius.fullBorderRadius,
+                  child: LinearProgressIndicator(
+                    minHeight: 6,
+                    valueColor: AlwaysStoppedAnimation<Color>(colors.primary),
+                    backgroundColor: colors.primary.withValues(alpha: 0.12),
                   ),
-                  backgroundColor: context.colors.primary.withValues(alpha: 0.1),
                 ),
               ),
-            ),
-          ],
+            ],
+          ),
         ),
       ),
     );
   }
 }
+
+/// Brand‑gradient orb that gently breathes while the profile is prepared.
+class _PulsingOrb extends StatelessWidget {
+  const _PulsingOrb();
+
+  @override
+  Widget build(BuildContext context) {
+    final colors = context.colors;
+    return Container(
+      width: 76,
+      height: 76,
+      decoration: BoxDecoration(
+        shape: BoxShape.circle,
+        gradient: LinearGradient(
+          begin: Alignment.topLeft,
+          end: Alignment.bottomRight,
+          colors: [
+            colors.primary,
+            Color.lerp(colors.primary, Colors.black, 0.18)!,
+          ],
+        ),
+        boxShadow: [
+          BoxShadow(
+            color: colors.primary.withValues(alpha: 0.45),
+            blurRadius: 32,
+            spreadRadius: 2,
+          ),
+        ],
+      ),
+      child: Icon(KasyIcons.flash, color: colors.onPrimary, size: 34),
+    )
+        .animate(onPlay: (c) => c.repeat(reverse: true))
+        .scaleXY(
+          begin: 0.94,
+          end: 1.06,
+          duration: const Duration(milliseconds: 900),
+          curve: Curves.easeInOut,
+        );
+  }
+}

package/templates/firebase/lib/features/onboarding/ui/components/onboarding_notifications_setup.dart

@@ -8,6 +8,7 @@ import 'package:kasy_kit/features/notifications/repositories/notifications_repos
 import 'package:kasy_kit/features/onboarding/providers/onboarding_provider.dart';
 import 'package:kasy_kit/features/onboarding/ui/widgets/onboarding_background.dart';
 import 'package:kasy_kit/features/onboarding/ui/widgets/onboarding_illustration_scaffold.dart';
+import 'package:kasy_kit/features/onboarding/ui/widgets/onboarding_module_mockups.dart';
 import 'package:kasy_kit/i18n/translations.g.dart';
 
 final _formStep3Key = GlobalKey<FormState>();
@@ -36,10 +37,10 @@ class NotificationsPermissionStep extends ConsumerWidget {
           return Form(
             key: _formStep3Key,
             child: OnboardingIllustrationScaffold(
-              progress: 0.9,
+              step: 6,
               title: translations.title,
               description: translations.description,
-              imageAsset: 'assets/images/onboarding/img2.jpg',
+              image: const PushPermissionMockup(),
               footerActions: [
                 KasyButton(
                   label: translations.continue_button,

package/templates/firebase/lib/features/onboarding/ui/components/onboarding_questions.dart

@@ -9,10 +9,10 @@ import 'package:kasy_kit/i18n/translations.g.dart';
 //--------------------------------------------
 /// Question about the user's gender
 //--------------------------------------------
-class UserSexeOnboardingQuestion extends ConsumerWidget {
+class UserGenderOnboardingQuestion extends ConsumerWidget {
   final String nextRoute;
 
-  const UserSexeOnboardingQuestion({
+  const UserGenderOnboardingQuestion({
     super.key,
     required this.nextRoute,
   });
@@ -24,7 +24,7 @@ class UserSexeOnboardingQuestion extends ConsumerWidget {
       title: translations.title,
       description: translations.description,
       btnText: translations.action,
-      progress: 0.3,
+      step: 4,
       optionIds: translations.options.keys.toList(),
       optionBuilder: (key, selected) => SelectableRowTile(
         title: translations.options[key],
@@ -39,7 +39,7 @@ class UserSexeOnboardingQuestion extends ConsumerWidget {
         if (key != null) {
           ref
               .read(onboardingProvider.notifier)
-              .onAnsweredQuestion(UserSexeInfo.fromString(key));
+              .onAnsweredQuestion(UserGenderInfo.fromString(key));
         }
         Navigator.of(context).pushReplacementNamed(nextRoute);
       },
@@ -65,7 +65,7 @@ class UserAgeOnboardingQuestion extends ConsumerWidget {
       title: translations.title,
       description: translations.description,
       btnText: translations.action,
-      progress: 0.3,
+      step: 5,
       optionIds: translations.options.keys.toList(),
       optionBuilder: (key, selected) => SelectableRowTile(
         title: translations.options[key],

package/templates/firebase/lib/features/onboarding/ui/onboarding_page.dart

@@ -9,7 +9,7 @@ import 'package:kasy_kit/features/onboarding/ui/components/onboarding_features.d
 import 'package:kasy_kit/features/onboarding/ui/components/onboarding_loader.dart';
 import 'package:kasy_kit/features/onboarding/ui/components/onboarding_notifications_setup.dart';
 import 'package:kasy_kit/features/onboarding/ui/components/onboarding_questions.dart';
-import 'package:kasy_kit/features/subscription/ui/premium_page.dart';
+import 'package:kasy_kit/features/subscriptions/ui/premium_page.dart';
 import 'package:kasy_kit/router.dart';
 
 
@@ -45,12 +45,12 @@ class OnboardingPage extends ConsumerWidget {
           ),
         'feature_3' => OnboardingRouteTransition(
             builder: (context) => const OnboardingFeatureThree(
-              nextRoute: 'sexe_question',
+              nextRoute: 'gender_question',
             ),
             settings: settings,
           ),
-        'sexe_question' => OnboardingRouteTransition(
-            builder: (context) => const UserSexeOnboardingQuestion(
+        'gender_question' => OnboardingRouteTransition(
+            builder: (context) => const UserGenderOnboardingQuestion(
               nextRoute: 'age_question',
             ),
             settings: settings,

package/templates/firebase/lib/features/onboarding/ui/widgets/onboarding_background.dart

@@ -46,10 +46,12 @@ class OnboardingBackground extends StatelessWidget {
               begin: Alignment.topCenter,
               end: Alignment.bottomCenter,
               colors: [
-                bgColor ?? context.colors.primary.withValues(alpha: .15),
+                bgColor ??
+                    context.colors.primary
+                        .withValues(alpha: context.isDark ? 0.16 : 0.10),
                 bgColor ?? context.colors.primary.withValues(alpha: 0),
               ],
-              stops: const [0.0, .5],
+              stops: const [0.0, .45],
             ),
           )),
         ),

package/templates/firebase/lib/features/onboarding/ui/widgets/onboarding_feature.dart

@@ -1,23 +1,21 @@
 import 'package:flutter/material.dart';
-import 'package:flutter_animate/flutter_animate.dart';
 import 'package:kasy_kit/components/components.dart';
 import 'package:kasy_kit/core/theme/theme.dart';
-import 'package:kasy_kit/core/widgets/responsive_layout.dart';
 import 'package:kasy_kit/features/onboarding/ui/widgets/onboarding_background.dart';
 import 'package:kasy_kit/features/onboarding/ui/widgets/onboarding_illustration_scaffold.dart';
+import 'package:kasy_kit/features/onboarding/ui/widgets/onboarding_progress.dart';
 
-/// A generic onboarding step widget with text and image.
+/// A generic onboarding presentation step: a live module mockup as hero, a
+/// left‑aligned title/description and a sticky primary action.
 class OnboardingStep extends StatelessWidget {
-  final String? title;
-  final Widget? titleWidget;
-  final String imgPath;
+  final String title;
   final String description;
   final String btnText;
   final String nextRoute;
+  final int step;
+  final int totalSteps;
+  final Widget image;
   final VoidCallback? onNext;
-  final double progress;
-  final Widget? image;
-  final bool withBg;
   final VoidCallback? onSkip;
   final String? skipLabel;
   final VoidCallback? onSecondary;
@@ -25,16 +23,14 @@ class OnboardingStep extends StatelessWidget {
 
   const OnboardingStep({
     super.key,
-    this.title,
-    this.titleWidget,
-    required this.imgPath,
+    required this.title,
     required this.description,
     required this.btnText,
     required this.nextRoute,
-    required this.progress,
+    required this.step,
+    required this.image,
+    this.totalSteps = kOnboardingSteps,
     this.onNext,
-    this.withBg = false,
-    this.image,
     this.onSkip,
     this.skipLabel,
     this.onSecondary,
@@ -43,116 +39,38 @@ class OnboardingStep extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    final Widget? illustration = image ??
-        (imgPath.isNotEmpty
-            ? Animate(
-                effects: const [
-                  FadeEffect(
-                    delay: Duration(milliseconds: 100),
-                    duration: Duration(milliseconds: 200),
-                    curve: Curves.easeIn,
-                  ),
-                  MoveEffect(
-                    delay: Duration(milliseconds: 100),
-                    duration: Duration(milliseconds: 450),
-                    curve: Curves.easeOut,
-                    begin: Offset(0, 50),
-                    end: Offset.zero,
-                  ),
-                ],
-                child: Image.asset(imgPath, fit: BoxFit.contain),
-              )
-            : null);
-
-    final scaffold = OnboardingIllustrationScaffold(
-      progress: progress,
-      onSkip: onSkip,
-      skipLabel: skipLabel,
-      title: title ?? '',
-      titleWidget: title != null
-          ? Animate(
-              effects: const [
-                FadeEffect(
-                  delay: Duration(milliseconds: 200),
-                  duration: Duration(milliseconds: 200),
-                  curve: Curves.easeIn,
-                ),
-                MoveEffect(
-                  delay: Duration(milliseconds: 200),
-                  duration: Duration(milliseconds: 450),
-                  curve: Curves.easeOut,
-                  begin: Offset(0, 50),
-                  end: Offset.zero,
-                ),
-              ],
-              child: Text(
-                title!,
-                textAlign: TextAlign.center,
-                style: context.textTheme.headlineMedium?.copyWith(
-                  color: context.colors.onBackground,
-                  fontWeight: FontWeight.w600,
-                ),
-              ),
-            )
-          : titleWidget,
-      description: description,
-      descriptionWidget: Animate(
-        effects: const [
-          FadeEffect(
-            delay: Duration(milliseconds: 300),
-            duration: Duration(milliseconds: 200),
-            curve: Curves.easeIn,
-          ),
-          MoveEffect(
-            delay: Duration(milliseconds: 300),
-            duration: Duration(milliseconds: 450),
-            curve: Curves.easeOut,
-            begin: Offset(0, 50),
-            end: Offset.zero,
-          ),
-        ],
-        child: Text(
-          description,
-          textAlign: TextAlign.center,
-          style: context.textTheme.bodyLarge?.copyWith(
-            color: context.colors.onBackground.withValues(alpha: 0.6),
-          ),
-        ),
-      ),
-      image: illustration,
-      footerActions: [
-        KasyButton(
-          label: btnText,
-          expand: true,
-          onPressed: () {
-            if (onNext != null) {
-              onNext!.call();
-            } else {
-              Navigator.of(context).pushReplacementNamed(nextRoute);
-            }
-          },
-        ),
-        if (onSecondary != null && secondaryLabel != null) ...[
-          const SizedBox(height: KasySpacing.xs),
+    return OnboardingBackground(
+      child: OnboardingIllustrationScaffold(
+        step: step,
+        totalSteps: totalSteps,
+        title: title,
+        description: description,
+        image: image,
+        onSkip: onSkip,
+        skipLabel: skipLabel,
+        footerActions: [
           KasyButton(
-            label: secondaryLabel!,
-            variant: KasyButtonVariant.link,
+            label: btnText,
             expand: true,
-            onPressed: onSecondary,
+            onPressed: () {
+              if (onNext != null) {
+                onNext!.call();
+              } else {
+                Navigator.of(context).pushReplacementNamed(nextRoute);
+              }
+            },
           ),
-        ],
-      ],
-    );
-
-    final content = ResponsiveLayout(
-      small: withBg
-          ? OnboardingBackground(child: scaffold)
-          : ColoredBox(
-              color: context.colors.background,
-              child: scaffold,
+          if (onSecondary != null && secondaryLabel != null) ...[
+            const SizedBox(height: KasySpacing.xs),
+            KasyButton(
+              label: secondaryLabel!,
+              variant: KasyButtonVariant.link,
+              expand: true,
+              onPressed: onSecondary,
             ),
+          ],
+        ],
+      ),
     );
-
-    return content;
   }
 }