feat: complete 20-screen onboarding flow

Full quiz flow s01-s20: splash, intro, value prop, social proof, name/skin-type/age/concerns/goal quiz with insights, analysing loader, result with skin score, AM/PM routines, ingredient science, signup, welcome. Duolingo-style design: flat cards, pressable SButton (Stack trick), 4px progress bar, mascot moods (wave/think/analyze/celebrate), confetti on result+welcome, personalized content throughout.
2026-05-28 17:11:27 +02:00
parent 6311088256
commit 93042cbb4c
26 changed files with 2582 additions and 2 deletions
--- a/lib/screens/onboarding/s03_value_prop.dart
+++ b/lib/screens/onboarding/s03_value_prop.dart
@@ -0,0 +1,135 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_animate/flutter_animate.dart';
+import '../../theme.dart';
+import '../../widgets/s_button.dart';
+import '../../router.dart';
+import 's04_social_proof.dart';
+
+class ValuePropScreen extends StatefulWidget {
+  const ValuePropScreen({super.key});
+  @override
+  State<ValuePropScreen> createState() => _State();
+}
+
+class _State extends State<ValuePropScreen> {
+  int _page = 0;
+
+  static const _props = [
+    (Icons.auto_awesome_rounded, '🔬', 'AI-powered\nskin analysis', 'Upload a selfie or answer quick\nquestions — Shaynee reads your skin.'),
+    (Icons.science_rounded, '💧', 'Ingredient\nscience', 'Know what every product does to\nyour skin before you buy it.'),
+    (Icons.trending_up_rounded, '📈', 'Routine that\ngets results', '94% of users see visible improvement\nwithin 4 weeks.'),
+  ];
+
+  @override
+  Widget build(BuildContext context) {
+    final (_, emoji, title, sub) = _props[_page];
+    final isLast = _page == _props.length - 1;
+
+    return Scaffold(
+      backgroundColor: SColors.bgSurface,
+      body: SafeArea(
+        child: Column(
+          children: [
+            // Illustration zone
+            Expanded(
+              flex: 45,
+              child: AnimatedSwitcher(
+                duration: const Duration(milliseconds: 350),
+                child: _IllustrationCard(key: ValueKey(_page), emoji: emoji),
+              ),
+            ),
+            // Content zone
+            Expanded(
+              flex: 55,
+              child: Padding(
+                padding: const EdgeInsets.symmetric(horizontal: 24),
+                child: Column(
+                  crossAxisAlignment: CrossAxisAlignment.start,
+                  children: [
+                    const SizedBox(height: 8),
+                    // Dots
+                    Row(
+                      children: List.generate(_props.length, (i) => _dot(i)),
+                    ).animate().fadeIn(duration: 400.ms),
+                    const SizedBox(height: 20),
+                    AnimatedSwitcher(
+                      duration: const Duration(milliseconds: 300),
+                      child: Column(
+                        key: ValueKey(_page),
+                        crossAxisAlignment: CrossAxisAlignment.start,
+                        children: [
+                          Text(title, style: SText.headline2(SColors.textHead))
+                              .animate().fadeIn(duration: 350.ms).slideX(begin: 0.04, end: 0),
+                          const SizedBox(height: 10),
+                          Text(sub, style: SText.subtitle(SColors.textSub))
+                              .animate().fadeIn(duration: 350.ms, delay: 80.ms),
+                        ],
+                      ),
+                    ),
+                    const Spacer(),
+                    SButton(
+                      label: isLast ? 'SOUNDS GOOD' : 'NEXT',
+                      onTap: () {
+                        if (isLast) {
+                          Navigator.of(context).push(slideRoute(const SocialProofScreen()));
+                        } else {
+                          setState(() => _page++);
+                        }
+                      },
+                    ).animate().fadeIn(duration: 400.ms, delay: 200.ms),
+                    const SizedBox(height: 12),
+                    if (!isLast)
+                      Center(
+                        child: GestureDetector(
+                          onTap: () => Navigator.of(context).push(slideRoute(const SocialProofScreen())),
+                          child: Text('Skip', style: SText.caption(SColors.textSub)),
+                        ),
+                      ),
+                    const SizedBox(height: 20),
+                  ],
+                ),
+              ),
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+
+  Widget _dot(int i) {
+    return AnimatedContainer(
+      duration: const Duration(milliseconds: 250),
+      margin: const EdgeInsets.only(right: 6),
+      width: _page == i ? 20 : 8,
+      height: 8,
+      decoration: BoxDecoration(
+        color: _page == i ? SColors.primary : SColors.borderLight,
+        borderRadius: BorderRadius.circular(4),
+      ),
+    );
+  }
+}
+
+class _IllustrationCard extends StatelessWidget {
+  final String emoji;
+  const _IllustrationCard({super.key, required this.emoji});
+
+  @override
+  Widget build(BuildContext context) {
+    return Center(
+      child: Container(
+        width: 160,
+        height: 160,
+        decoration: BoxDecoration(
+          color: SColors.primaryLight,
+          borderRadius: BorderRadius.circular(40),
+          border: Border.all(color: SColors.borderLight, width: 1.5),
+        ),
+        alignment: Alignment.center,
+        child: Text(emoji, style: const TextStyle(fontSize: 72)),
+      )
+          .animate(onPlay: (c) => c.repeat(reverse: true))
+          .moveY(begin: 0, end: -8, duration: 2000.ms, curve: Curves.easeInOut),
+    );
+  }
+}