better help and onboarding

frontend/lib/pages/onboarding.dart

@@ -2,6 +2,26 @@ import 'package:anyway/modules/onboarding_card.dart';
 import 'package:anyway/pages/new_trip_location.dart';
 import 'package:flutter/material.dart';
 
+
+const List<Widget> onboardingCards = [
+  OnboardingCard(
+    title: "Welcome to anyway!",
+    description: "Anyway helps you plan a city trip that suits your wishes.",
+    imagePath: "assets/city.svg"
+  ),
+  OnboardingCard(
+    title: "Find your way",
+    description: "Bored by churches? No problem! Hate shopping? No worries! Instead of suggesting the generic trips that bore you, anyway will try to give you recommendations that really suit you.",
+    imagePath: "assets/plan.svg"
+  ),
+  OnboardingCard(
+    title: "Change your mind",
+    description: "Feet get sore, the weather changes. Anyway understands that! Move or remove destinations, visit hidden gems along your journey, do your own thing. Anyway adapts to your spontaneous decisions.",
+    imagePath: "assets/cat.svg"
+  ),
+];
+
+
 class OnboardingPage extends StatefulWidget {
   const OnboardingPage({super.key});
 
@@ -13,24 +33,32 @@ class _OnboardingPageState extends State<OnboardingPage> {
   @override
   Widget build(BuildContext context) {
     final PageController _controller = PageController();
+
     return Scaffold(
       body: Stack(
         children: [
+          // horizontally scrollable list of pages
           PageView(
-            // horizontally scrollable list of pages
             controller: _controller,
             
-            children: [
-              OnboardingCard(index: 1, title: "Welcome to anyway!", description: "Anyway helps you plan a city trip that suits your wishes.", imagePath: "assets/city.svg"),
-              OnboardingCard(index: 2, title: "Find your way", description: "Bored by churches? No problem! Hate shopping? No worries! More than showing you the typical 'must-sees' of a city, anyway will try to give you recommendations that really suit you.", imagePath: "assets/plan.svg"),
-              OnboardingCard(index: 3, title: "Change your mind", description: "Life happens when you're busy making plans. Anyway understands that! Move or remove destinations, visit hidden gems along your journey, do your own thing. Anyway adapts to your spontaneous decisions.", imagePath: "assets/cat.svg"),
-            ],
+            children: List.generate(
+              onboardingCards.length,
+              (index) {
+                Color currentColor = Colors.red.withAlpha(Colors.red.alpha - index * 30);
+                return Container(
+                  color: currentColor,
+                  alignment: Alignment.center,
+                  child: onboardingCards[index],
+                );
+              }
+            )
           ),
         ],
       ),
-      floatingActionButton: FloatingActionButton(
+
+      floatingActionButton: FloatingActionButton.extended(
          onPressed: () {
-            if (_controller.page == 2) {
+            if (_controller.page == onboardingCards.length - 1) {
               Navigator.of(context).push(
                 MaterialPageRoute(
                   builder: (context) => const NewTripPage()
@@ -40,7 +68,24 @@ class _OnboardingPageState extends State<OnboardingPage> {
               _controller.nextPage(duration: Duration(milliseconds: 500), curve: Curves.ease);
             }
           },
-          child: Icon(Icons.arrow_forward),
+          label: ListenableBuilder(
+            listenable: _controller,
+            builder: (context, child) {
+              if (_controller.page == onboardingCards.length - 1) {
+                // icon and text side by side
+                return Row(
+                  children: [
+                    const Text("Start planning!"),
+                    Padding(padding: const EdgeInsets.only(right: 8.0)),
+                    const Icon(Icons.map_outlined)
+                  ],
+                );
+
+              } else {
+                return const Icon(Icons.arrow_forward);
+              }
+            }
+          )
       ),
     );
   }