better onboarding

frontend/lib/pages/onboarding.dart

@@ -2,7 +2,6 @@ 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!",
@@ -19,9 +18,13 @@ const List<Widget> onboardingCards = [
     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"
   ),
+  OnboardingCard(
+    title: "Feeling lost?",
+    description: "Whenever you are confused or need help with the app, look out for the question mark in the top right corner. Help is just a tap away!",
+    imagePath: "assets/confused.svg"
+  ),
 ];
 
-
 class OnboardingPage extends StatefulWidget {
   const OnboardingPage({super.key});
 
@@ -37,55 +40,57 @@ class _OnboardingPageState extends State<OnboardingPage> {
     return Scaffold(
       body: Stack(
         children: [
-          // horizontally scrollable list of pages
+          Container(
-          PageView(
+            decoration: BoxDecoration(
-            controller: _controller,
+              gradient: LinearGradient(
-            
+                colors: [Colors.red, Colors.blue],
-            children: List.generate(
+                begin: Alignment.topLeft,
-              onboardingCards.length,
+                end: Alignment.bottomRight,
-              (index) {
+              ),
-                Color currentColor = Colors.red.withAlpha(Colors.red.alpha - index * 30);
+            ),
-                return Container(
+            child: PageView(
-                  color: currentColor,
+              controller: _controller,
-                  alignment: Alignment.center,
+              children: List.generate(
-                  child: onboardingCards[index],
+                onboardingCards.length,
-                );
+                (index) {
-              }
+                  return Container(
-            )
+                    alignment: Alignment.center,
+                    child: onboardingCards[index],
+                  );
+                }
+              ),
+            ),
           ),
         ],
       ),
-
       floatingActionButton: FloatingActionButton.extended(
-         onPressed: () {
+        onPressed: () {
+          if (_controller.page == onboardingCards.length - 1) {
+            Navigator.of(context).push(
+              MaterialPageRoute(
+                builder: (context) => const NewTripPage()
+              )
+            );
+          } else {
+            _controller.nextPage(duration: Duration(milliseconds: 500), curve: Curves.ease);
+          }
+        },
+        label: ListenableBuilder(
+          listenable: _controller,
+          builder: (context, child) {
             if (_controller.page == onboardingCards.length - 1) {
-              Navigator.of(context).push(
+              return Row(
-                MaterialPageRoute(
+                children: [
-                  builder: (context) => const NewTripPage()
+                  const Text("Start planning!"),
-                )
+                  Padding(padding: const EdgeInsets.only(right: 8.0)),
+                  const Icon(Icons.map_outlined)
+                ],
               );
             } else {
-              _controller.nextPage(duration: Duration(milliseconds: 500), curve: Curves.ease);
+              return const 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);
-              }
-            }
-          )
       ),
     );
   }