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/s04_social_proof.dart
+++ b/lib/screens/onboarding/s04_social_proof.dart
@@ -0,0 +1,129 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_animate/flutter_animate.dart';
+import '../../theme.dart';
+import '../../widgets/s_button.dart';
+import '../../router.dart';
+import 's05_name.dart';
+
+class SocialProofScreen extends StatelessWidget {
+  const SocialProofScreen({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      backgroundColor: SColors.bgSurface,
+      body: SafeArea(
+        child: Column(
+          children: [
+            // Illustration zone
+            Expanded(
+              flex: 40,
+              child: Center(
+                child: _StatsVisual()
+                    .animate()
+                    .fadeIn(duration: 500.ms, delay: 100.ms)
+                    .scaleXY(begin: 0.9, end: 1.0, duration: 500.ms, curve: Curves.easeOut),
+              ),
+            ),
+            // Content zone
+            Expanded(
+              flex: 60,
+              child: Padding(
+                padding: const EdgeInsets.symmetric(horizontal: 24),
+                child: Column(
+                  crossAxisAlignment: CrossAxisAlignment.start,
+                  children: [
+                    const SizedBox(height: 8),
+                    Text('Trusted by\n50,000+ women', style: SText.headline2(SColors.textHead))
+                        .animate().fadeIn(duration: 400.ms, delay: 200.ms)
+                        .slideY(begin: 0.06, end: 0, duration: 400.ms),
+                    const SizedBox(height: 12),
+                    _testimonial().animate().fadeIn(duration: 400.ms, delay: 360.ms),
+                    const Spacer(),
+                    Row(
+                      children: List.generate(3, (i) => _statChip(i)),
+                    ).animate().fadeIn(duration: 400.ms, delay: 480.ms),
+                    const SizedBox(height: 20),
+                    SButton(
+                      label: "BUILD MY ROUTINE",
+                      onTap: () => Navigator.of(context).push(slideRoute(NameScreen())),
+                    ).animate().fadeIn(duration: 400.ms, delay: 560.ms),
+                    const SizedBox(height: 20),
+                  ],
+                ),
+              ),
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+
+  Widget _testimonial() {
+    return Container(
+      padding: const EdgeInsets.all(16),
+      decoration: BoxDecoration(
+        color: SColors.primaryLight,
+        borderRadius: BorderRadius.circular(16),
+        border: Border.all(color: SColors.borderLight),
+      ),
+      child: Column(
+        crossAxisAlignment: CrossAxisAlignment.start,
+        children: [
+          const Text('⭐⭐⭐⭐⭐', style: TextStyle(fontSize: 16)),
+          const SizedBox(height: 8),
+          Text(
+            '"My skin cleared up in 3 weeks. The routine Shaynee built actually works — I finally know what I\'m putting on my face."',
+            style: SText.body(SColors.textBody).copyWith(fontStyle: FontStyle.italic),
+          ),
+          const SizedBox(height: 8),
+          Text('— Ayla K., 28', style: SText.caption(SColors.textSub)),
+        ],
+      ),
+    );
+  }
+
+  Widget _statChip(int i) {
+    const data = [('50K+', 'Users'), ('4.9★', 'Rating'), ('94%', 'Results')];
+    final (value, label) = data[i];
+    return Expanded(
+      child: Container(
+        margin: EdgeInsets.only(right: i < 2 ? 8 : 0),
+        padding: const EdgeInsets.symmetric(vertical: 14),
+        decoration: BoxDecoration(
+          color: SColors.bgSurface,
+          borderRadius: BorderRadius.circular(14),
+          border: Border.all(color: SColors.borderLight, width: 1.5),
+        ),
+        child: Column(
+          children: [
+            Text(value, style: SText.title(SColors.primary)),
+            const SizedBox(height: 2),
+            Text(label, style: SText.caption(SColors.textSub)),
+          ],
+        ),
+      ),
+    );
+  }
+}
+
+class _StatsVisual extends StatelessWidget {
+  @override
+  Widget build(BuildContext context) {
+    return Stack(
+      alignment: Alignment.center,
+      children: [
+        Container(
+          width: 160, height: 160,
+          decoration: BoxDecoration(
+            shape: BoxShape.circle,
+            color: SColors.primaryLight,
+          ),
+        ),
+        const Text('💜', style: TextStyle(fontSize: 64))
+            .animate(onPlay: (c) => c.repeat(reverse: true))
+            .scaleXY(begin: 0.95, end: 1.05, duration: 1800.ms, curve: Curves.easeInOut),
+      ],
+    );
+  }
+}