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,25 +40,29 @@ class _OnboardingPageState extends State<OnboardingPage> {
     return Scaffold(
       body: Stack(
         children: [
-          // horizontally scrollable list of pages
+          Container(
-          PageView(
+            decoration: BoxDecoration(
+              gradient: LinearGradient(
+                colors: [Colors.red, Colors.blue],
+                begin: Alignment.topLeft,
+                end: Alignment.bottomRight,
+              ),
+            ),
+            child: PageView(
               controller: _controller,
-            
               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.extended(
         onPressed: () {
           if (_controller.page == onboardingCards.length - 1) {
@@ -72,7 +79,6 @@ class _OnboardingPageState extends State<OnboardingPage> {
           listenable: _controller,
           builder: (context, child) {
             if (_controller.page == onboardingCards.length - 1) {
-                // icon and text side by side
               return Row(
                 children: [
                   const Text("Start planning!"),
@@ -80,7 +86,6 @@ class _OnboardingPageState extends State<OnboardingPage> {
                   const Icon(Icons.map_outlined)
                 ],
               );
-
             } else {
               return const Icon(Icons.arrow_forward);
             }