feat: add instructions background

lib/game_intro/game_instructions/view/game_instructions_overlay.dart

@@ -117,6 +117,7 @@ class _GameInstructionsOverlayViewState
     return AppDialog(
       border: Border.all(color: Colors.white24),
       backgroundColor: Colors.white24,
+      imageProvider: Assets.images.instructionsBackground.provider(),
       child: Column(
         mainAxisSize: MainAxisSize.min,
         children: [
@@ -138,12 +139,11 @@ class _GameInstructionsOverlayViewState
               },
             ),
           ),
-          Padding(
-            padding: const EdgeInsets.symmetric(vertical: 24),
-            child: GameInstructionNavigationControls(
-              pageController: pageController,
-            ),
+          const SizedBox(height: 24),
+          GameInstructionNavigationControls(
+            pageController: pageController,
           ),
+          const SizedBox(height: 16),
         ],
       ),
     );

packages/app_ui/lib/src/widgets/app_card.dart

@@ -20,6 +20,7 @@ class AppCard extends StatelessWidget {
     ),
     this.borderRadius = const BorderRadius.all(Radius.circular(24)),
     this.border,
+    this.imageProvider,
     super.key,
   });
 
@@ -38,20 +39,32 @@ class AppCard extends StatelessWidget {
   /// The border of the card.
   final BoxBorder? border;
 
+  /// The background image of the card. Setting the image makes the [gradient]
+  /// and [backgroundColor] invisible. Also removes the border.
+  final ImageProvider<Object>? imageProvider;
+
   @override
   Widget build(BuildContext context) {
+    final showImage = imageProvider != null;
+
     return Container(
       constraints: const BoxConstraints(maxWidth: 328, maxHeight: 624),
       decoration: BoxDecoration(
         borderRadius: borderRadius,
-        border: border,
-        color: backgroundColor,
+        border: showImage ? null : border,
+        color: showImage ? null : backgroundColor,
       ),
       child: Container(
         padding: const EdgeInsets.all(16),
         decoration: BoxDecoration(
           borderRadius: borderRadius,
-          gradient: gradient,
+          gradient: showImage ? null : gradient,
+          image: showImage
+              ? DecorationImage(
+                  image: imageProvider!,
+                  fit: BoxFit.cover,
+                )
+              : null,
         ),
         child: child,
       ),

packages/app_ui/lib/src/widgets/app_dialog.dart

@@ -22,6 +22,7 @@ class AppDialog extends StatelessWidget {
     ),
     this.borderRadius = const BorderRadius.all(Radius.circular(24)),
     this.border,
+    this.imageProvider,
     super.key,
   });
 
@@ -43,6 +44,10 @@ class AppDialog extends StatelessWidget {
   /// The border of the dialog.
   final BoxBorder? border;
 
+  /// The background image of the dialog. Setting the image makes the [gradient]
+  /// and [backgroundColor] invisible. Also removes the border.
+  final ImageProvider<Object>? imageProvider;
+
   @override
   Widget build(BuildContext context) {
     return Dialog(
@@ -54,6 +59,7 @@ class AppDialog extends StatelessWidget {
         gradient: gradient,
         backgroundColor: backgroundColor,
         borderRadius: borderRadius,
+        imageProvider: imageProvider,
         child: SingleChildScrollView(
           child: Column(
             mainAxisSize: MainAxisSize.min,