step

lib/features/onboarding/widgets/casha_shimmer_text.dart

@@ -0,0 +1,86 @@
+import 'dart:async';
+import 'package:flutter/material.dart';
+import 'package:sensors_plus/sensors_plus.dart';
+
+class CashaShimmerText extends StatefulWidget {
+  final String text;
+  final TextStyle? style;
+
+  const CashaShimmerText({
+    required this.text,
+    this.style,
+    super.key,
+  });
+
+  @override
+  State<CashaShimmerText> createState() => _CashaShimmerTextState();
+}
+
+class _CashaShimmerTextState extends State<CashaShimmerText>
+    with SingleTickerProviderStateMixin {
+  late final AnimationController _controller;
+  double _tilt = 0.0;
+  double _targetTilt = 0.0;
+  StreamSubscription<AccelerometerEvent>? _sub;
+
+  @override
+  void initState() {
+    super.initState();
+    _controller = AnimationController(
+      vsync: this,
+      duration: const Duration(seconds: 4),
+    )..repeat();
+
+    _sub = accelerometerEventStream(
+      samplingPeriod: const Duration(milliseconds: 50),
+    ).listen((e) {
+      _targetTilt = (e.x / 9.8).clamp(-1.0, 1.0);
+    });
+  }
+
+  @override
+  void dispose() {
+    _controller.dispose();
+    _sub?.cancel();
+    super.dispose();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    final primary = Theme.of(context).colorScheme.primary;
+
+    return AnimatedBuilder(
+      animation: _controller,
+      builder: (context, child) {
+        _tilt += (_targetTilt - _tilt) * 0.12;
+
+        final sweep = (_controller.value * 2.0 - 1.0) + _tilt * 0.6;
+
+        return ShaderMask(
+          shaderCallback: (bounds) {
+            return LinearGradient(
+              begin: Alignment(sweep - 0.8, -0.3),
+              end: Alignment(sweep + 0.8, 0.3),
+              colors: [
+                primary.withValues(alpha: 0.7),
+                primary,
+                Colors.white,
+                primary.withValues(alpha: 0.9),
+                Colors.white,
+                primary,
+                primary.withValues(alpha: 0.7),
+              ],
+              stops: [0.0, 0.2, 0.35, 0.45, 0.55, 0.8, 1.0],
+            ).createShader(bounds);
+          },
+          blendMode: BlendMode.srcIn,
+          child: child,
+        );
+      },
+      child: Text(
+        widget.text,
+        style: widget.style?.copyWith(color: Colors.white),
+      ),
+    );
+  }
+}

lib/features/onboarding/widgets/onboarding_page.dart

@@ -0,0 +1,96 @@
+import 'package:flutter/material.dart';
+import 'casha_shimmer_text.dart';
+
+class OnboardingPage extends StatelessWidget {
+  final IconData? icon;
+  final String? headline;
+  final String? description;
+  final String? welcomeText;
+  final bool isWelcomePage;
+
+  const OnboardingPage.welcome({required this.welcomeText, super.key})
+      : icon = null,
+        headline = null,
+        description = null,
+        isWelcomePage = true;
+
+  const OnboardingPage.content({
+    required this.icon,
+    required this.headline,
+    required this.description,
+    super.key,
+  })  : welcomeText = null,
+        isWelcomePage = false;
+
+  @override
+  Widget build(BuildContext context) {
+    if (isWelcomePage) {
+      final colorScheme = Theme.of(context).colorScheme;
+      return Center(
+        child: Column(
+          mainAxisSize: MainAxisSize.min,
+          children: [
+            Text(
+              welcomeText!,
+              style: Theme.of(context).textTheme.titleMedium?.copyWith(
+                    fontWeight: FontWeight.w300,
+                    color: colorScheme.onSurface.withOpacity(0.4),
+                    letterSpacing: 2,
+                  ),
+            ),
+            const SizedBox(height: 12),
+            CashaShimmerText(
+              text: 'Casha',
+              style: Theme.of(context).textTheme.displayLarge?.copyWith(
+                    fontSize: 72,
+                    fontWeight: FontWeight.w900,
+                    letterSpacing: -1,
+                  ),
+            ),
+          ],
+        ),
+      );
+    }
+
+    final colorScheme = Theme.of(context).colorScheme;
+    return Center(
+      child: Padding(
+        padding: const EdgeInsets.symmetric(horizontal: 32),
+        child: Column(
+          mainAxisSize: MainAxisSize.min,
+          children: [
+            Container(
+              padding: const EdgeInsets.all(24),
+              decoration: BoxDecoration(
+                color: colorScheme.primary.withOpacity(0.12),
+                shape: BoxShape.circle,
+              ),
+              child: Icon(
+                icon,
+                size: 64,
+                color: colorScheme.primary,
+              ),
+            ),
+            const SizedBox(height: 32),
+            Text(
+              headline!,
+              textAlign: TextAlign.center,
+              style: Theme.of(context).textTheme.headlineSmall?.copyWith(
+                    fontWeight: FontWeight.bold,
+                    color: colorScheme.onSurface,
+                  ),
+            ),
+            const SizedBox(height: 12),
+            Text(
+              description!,
+              textAlign: TextAlign.center,
+              style: Theme.of(context).textTheme.bodyMedium?.copyWith(
+                    color: colorScheme.onSurface.withOpacity(0.6),
+                  ),
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+}

lib/features/onboarding/widgets/onboarding_page_indicator.dart

@@ -0,0 +1,33 @@
+import 'package:flutter/material.dart';
+
+class OnboardingPageIndicator extends StatelessWidget {
+  final int current;
+  final int count;
+
+  const OnboardingPageIndicator({
+    required this.current,
+    required this.count,
+    super.key,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    final color = Theme.of(context).colorScheme.primary;
+    return Row(
+      mainAxisAlignment: MainAxisAlignment.center,
+      children: List.generate(count, (i) {
+        final isActive = i == current;
+        return AnimatedContainer(
+          duration: const Duration(milliseconds: 200),
+          margin: const EdgeInsets.symmetric(horizontal: 4),
+          width: isActive ? 24 : 8,
+          height: 8,
+          decoration: BoxDecoration(
+            color: isActive ? color : color.withOpacity(0.3),
+            borderRadius: BorderRadius.circular(4),
+          ),
+        );
+      }),
+    );
+  }
+}