feat(ui): apply branded headers and refresh splash/loading icon assets

- Use login background image in garage, collections, and profile headers
- Show app logo in About screen and add support mail action
- Configure native splash image assets in pubspec
- Regenerate flutter_native_splash and launcher icons for Android/iOS/Web

android/app/src/main/res/drawable-night-v21/launch_background.xml

@@ -3,4 +3,7 @@
     <item>
         <bitmap android:gravity="fill" android:src="@drawable/background"/>
     </item>
+    <item>
+        <bitmap android:gravity="center" android:src="@drawable/splash"/>
+    </item>
 </layer-list>

android/app/src/main/res/drawable-night/launch_background.xml

@@ -3,4 +3,7 @@
     <item>
         <bitmap android:gravity="fill" android:src="@drawable/background"/>
     </item>
+    <item>
+        <bitmap android:gravity="center" android:src="@drawable/splash"/>
+    </item>
 </layer-list>

android/app/src/main/res/drawable-v21/launch_background.xml

@@ -3,4 +3,7 @@
     <item>
         <bitmap android:gravity="fill" android:src="@drawable/background"/>
     </item>
+    <item>
+        <bitmap android:gravity="center" android:src="@drawable/splash"/>
+    </item>
 </layer-list>

android/app/src/main/res/drawable/launch_background.xml

@@ -3,4 +3,7 @@
     <item>
         <bitmap android:gravity="fill" android:src="@drawable/background"/>
     </item>
+    <item>
+        <bitmap android:gravity="center" android:src="@drawable/splash"/>
+    </item>
 </layer-list>

android/app/src/main/res/mipmap-anydpi-v26/ic_launcher.xml

@@ -1,5 +1,9 @@
 <?xml version="1.0" encoding="utf-8"?>
 <adaptive-icon xmlns:android="http://schemas.android.com/apk/res/android">
   <background android:drawable="@color/ic_launcher_background"/>
-  <foreground android:drawable="@drawable/ic_launcher_foreground"/>
+  <foreground>
+      <inset
+          android:drawable="@drawable/ic_launcher_foreground"
+          android:inset="16%" />
+  </foreground>
 </adaptive-icon>

android/app/src/main/res/values-night-v31/styles.xml

@@ -7,6 +7,7 @@
         <item name="android:windowDrawsSystemBarBackgrounds">false</item>
         <item name="android:windowLayoutInDisplayCutoutMode">shortEdges</item>
         <item name="android:windowSplashScreenBackground">#1a1a2e</item>
+        <item name="android:windowSplashScreenAnimatedIcon">@drawable/android12splash</item>
     </style>
     <!-- Theme applied to the Android Window as soon as the process has started.
          This theme determines the color of the Android Window while your

android/app/src/main/res/values-v31/styles.xml

@@ -7,6 +7,7 @@
         <item name="android:windowDrawsSystemBarBackgrounds">false</item>
         <item name="android:windowLayoutInDisplayCutoutMode">shortEdges</item>
         <item name="android:windowSplashScreenBackground">#f9a11b</item>
+        <item name="android:windowSplashScreenAnimatedIcon">@drawable/android12splash</item>
     </style>
     <!-- Theme applied to the Android Window as soon as the process has started.
          This theme determines the color of the Android Window while your

android/app/src/main/res/values/colors.xml

@@ -1,4 +1,4 @@
 <?xml version="1.0" encoding="utf-8"?>
 <resources>
-    <color name="ic_launcher_background">#00000000</color>
+    <color name="ic_launcher_background">#f9a11b</color>
 </resources>

ios/Runner/Assets.xcassets/LaunchImage.imageset/Contents.json

@@ -5,15 +5,48 @@
       "idiom" : "universal",
       "scale" : "1x"
     },
+    {
+      "appearances" : [
+        {
+          "appearance" : "luminosity",
+          "value" : "dark"
+        }
+      ],
+      "filename" : "LaunchImageDark.png",
+      "idiom" : "universal",
+      "scale" : "1x"
+    },
     {
       "filename" : "LaunchImage@2x.png",
       "idiom" : "universal",
       "scale" : "2x"
     },
+    {
+      "appearances" : [
+        {
+          "appearance" : "luminosity",
+          "value" : "dark"
+        }
+      ],
+      "filename" : "LaunchImageDark@2x.png",
+      "idiom" : "universal",
+      "scale" : "2x"
+    },
     {
       "filename" : "LaunchImage@3x.png",
       "idiom" : "universal",
       "scale" : "3x"
+    },
+    {
+      "appearances" : [
+        {
+          "appearance" : "luminosity",
+          "value" : "dark"
+        }
+      ],
+      "filename" : "LaunchImageDark@3x.png",
+      "idiom" : "universal",
+      "scale" : "3x"
     }
   ],
   "info" : {

lib/screens/about_screen.dart

@@ -1,5 +1,6 @@
 import 'package:flutter/material.dart';
 import 'package:package_info_plus/package_info_plus.dart';
+import 'package:url_launcher/url_launcher.dart';
 import '../theme/app_colors.dart';
 
 /// Full-page About screen with app info, version, and links.
@@ -11,6 +12,8 @@ class AboutScreen extends StatefulWidget {
 }
 
 class _AboutScreenState extends State<AboutScreen> {
+  static const _supportEmail = 'support@car64.app';
+
   PackageInfo? _packageInfo;
 
   @override
@@ -24,6 +27,25 @@ class _AboutScreenState extends State<AboutScreen> {
     if (mounted) setState(() => _packageInfo = info);
   }
 
+  Future<void> _contactSupport() async {
+    final uri = Uri(
+      scheme: 'mailto',
+      path: _supportEmail,
+      queryParameters: {
+        'subject': 'car64 Support Request',
+      },
+    );
+
+    final launched = await launchUrl(uri, mode: LaunchMode.externalApplication);
+    if (!launched && mounted) {
+      ScaffoldMessenger.of(context).showSnackBar(
+        const SnackBar(
+          content: Text('Could not open mail app. Please email support@car64.app.'),
+        ),
+      );
+    }
+  }
+
   @override
   Widget build(BuildContext context) {
     final theme = Theme.of(context);
@@ -49,10 +71,17 @@ class _AboutScreenState extends State<AboutScreen> {
                 gradient: AppColors.brandGradient,
                 shape: BoxShape.circle,
               ),
-              child: const Icon(
+              child: Padding(
-                Icons.directions_car_filled,
+                padding: const EdgeInsets.all(16),
-                color: Colors.white,
+                child: Image.asset(
-                size: 52,
+                  'assets/img/icon_bg_removed.png',
+                  fit: BoxFit.contain,
+                  errorBuilder: (context, error, stackTrace) => const Icon(
+                    Icons.directions_car_filled,
+                    color: Colors.white,
+                    size: 52,
+                  ),
+                ),
               ),
             ),
           ),
@@ -109,6 +138,16 @@ class _AboutScreenState extends State<AboutScreen> {
             value: _packageInfo?.packageName ?? '…',
           ),
 
+          const SizedBox(height: 20),
+          SizedBox(
+            width: double.infinity,
+            child: OutlinedButton.icon(
+              onPressed: _contactSupport,
+              icon: const Icon(Icons.support_agent),
+              label: const Text('Contact Support'),
+            ),
+          ),
+
           const SizedBox(height: 32),
 
           // ── Powered by ──

lib/screens/collections_screen.dart

@@ -202,17 +202,33 @@ class CollectionsScreenState extends State<CollectionsScreen> {
                 ),
               ),
               background: Container(
-                decoration: const BoxDecoration(
+                decoration: BoxDecoration(
-                  gradient: AppColors.brandGradient,
+                  image: const DecorationImage(
+                    image: AssetImage('assets/img/login_bg.jpg'),
+                    fit: BoxFit.cover,
+                  ),
+                  color: Colors.black.withValues(alpha: 0.15),
                 ),
-                child: Align(
+                child: Container(
-                  alignment: Alignment.centerRight,
+                  decoration: BoxDecoration(
-                  child: Padding(
+                    gradient: LinearGradient(
-                    padding: const EdgeInsets.only(right: 24),
+                      begin: Alignment.topCenter,
-                    child: Icon(
+                      end: Alignment.bottomCenter,
-                      Icons.collections_bookmark,
+                      colors: [
-                      size: 72,
+                        Colors.black.withValues(alpha: 0.3),
-                      color: Colors.white.withValues(alpha: 0.15),
+                        Colors.black.withValues(alpha: 0.55),
+                      ],
+                    ),
+                  ),
+                  child: Align(
+                    alignment: Alignment.centerRight,
+                    child: Padding(
+                      padding: const EdgeInsets.only(right: 24),
+                      child: Icon(
+                        Icons.collections_bookmark,
+                        size: 72,
+                        color: Colors.white.withValues(alpha: 0.18),
+                      ),
                     ),
                   ),
                 ),

lib/screens/garage_screen.dart

@@ -184,15 +184,33 @@ class GarageScreenState extends State<GarageScreen> {
                 ),
               ),
               background: Container(
-                decoration: const BoxDecoration(gradient: AppColors.brandGradient),
+                decoration: BoxDecoration(
-                child: Align(
+                  image: const DecorationImage(
-                  alignment: Alignment.centerRight,
+                    image: AssetImage('assets/img/login_bg.jpg'),
-                  child: Padding(
+                    fit: BoxFit.cover,
-                    padding: const EdgeInsets.only(right: 24),
+                  ),
-                    child: Icon(
+                  color: Colors.black.withValues(alpha: 0.15),
-                      Icons.directions_car_filled,
+                ),
-                      size: 72,
+                child: Container(
-                      color: Colors.white.withValues(alpha: 0.15),
+                  decoration: BoxDecoration(
+                    gradient: LinearGradient(
+                      begin: Alignment.topCenter,
+                      end: Alignment.bottomCenter,
+                      colors: [
+                        Colors.black.withValues(alpha: 0.3),
+                        Colors.black.withValues(alpha: 0.55),
+                      ],
+                    ),
+                  ),
+                  child: Align(
+                    alignment: Alignment.centerRight,
+                    child: Padding(
+                      padding: const EdgeInsets.only(right: 24),
+                      child: Icon(
+                        Icons.directions_car_filled,
+                        size: 72,
+                        color: Colors.white.withValues(alpha: 0.18),
+                      ),
                     ),
                   ),
                 ),

lib/screens/profile_screen.dart

@@ -23,52 +23,68 @@ class ProfileScreen extends StatelessWidget {
             expandedHeight: 200,
             pinned: true,
             flexibleSpace: FlexibleSpaceBar(
-              background: Container(
+              background: Stack(
-                decoration: const BoxDecoration(
+                fit: StackFit.expand,
-                  gradient: AppColors.brandGradient,
+                children: [
-                ),
+                  Image.asset(
-                child: SafeArea(
+                    'assets/img/login_bg.jpg',
-                  child: Column(
+                    fit: BoxFit.cover,
-                    mainAxisAlignment: MainAxisAlignment.center,
+                  ),
-                    children: [
+                  Container(
-                      const SizedBox(height: 16),
+                    decoration: BoxDecoration(
-                      // Avatar
+                      gradient: LinearGradient(
-                      Container(
+                        begin: Alignment.topCenter,
-                        width: 80,
+                        end: Alignment.bottomCenter,
-                        height: 80,
+                        colors: [
-                        decoration: BoxDecoration(
+                          Colors.black.withValues(alpha: 0.3),
-                          shape: BoxShape.circle,
+                          Colors.black.withValues(alpha: 0.55),
-                          border: Border.all(color: Colors.white, width: 3),
+                        ],
-                          color: Colors.white.withValues(alpha: 0.2),
-                        ),
-                        child: const Icon(
-                          Icons.person,
-                          size: 44,
-                          color: Colors.white,
-                        ),
                       ),
-                      const SizedBox(height: 12),
+                    ),
-                      Text(
+                  ),
-                        email,
+                  SafeArea(
-                        style: TextStyle(
+                    child: Column(
-                          fontSize: 16,
+                      mainAxisAlignment: MainAxisAlignment.center,
-                          fontWeight: FontWeight.w500,
+                      children: [
-                          color: Colors.white.withValues(alpha: 0.95),
+                        const SizedBox(height: 16),
-                        ),
+                        // Avatar
-                      ),
+                        Container(
-                      if (createdAt != null) ...[
+                          width: 80,
-                        const SizedBox(height: 4),
+                          height: 80,
-                        Text(
+                          decoration: BoxDecoration(
-                          'Member since ${_formatDate(createdAt)}',
+                            shape: BoxShape.circle,
-                          style: TextStyle(
+                            border: Border.all(color: Colors.white, width: 3),
-                            fontSize: 12,
+                            color: Colors.white.withValues(alpha: 0.2),
-                            color: Colors.white.withValues(alpha: 0.7),
+                          ),
+                          child: const Icon(
+                            Icons.person,
+                            size: 44,
+                            color: Colors.white,
                           ),
                         ),
+                        const SizedBox(height: 12),
+                        Text(
+                          email,
+                          style: TextStyle(
+                            fontSize: 16,
+                            fontWeight: FontWeight.w500,
+                            color: Colors.white.withValues(alpha: 0.95),
+                          ),
+                        ),
+                        if (createdAt != null) ...[
+                          const SizedBox(height: 4),
+                          Text(
+                            'Member since ${_formatDate(createdAt)}',
+                            style: TextStyle(
+                              fontSize: 12,
+                              color: Colors.white.withValues(alpha: 0.75),
+                            ),
+                          ),
+                        ],
                       ],
-                    ],
+                    ),
                   ),
-                ),
+                ],
               ),
             ),
           ),

pubspec.lock

@@ -1046,7 +1046,7 @@ packages:
     source: hosted
     version: "2.3.1"
   url_launcher:
-    dependency: transitive
+    dependency: "direct main"
     description:
       name: url_launcher
       sha256: f6a7e5c4835bb4e3026a04793a4199ca2d14c739ec378fdfe23fc8075d0439f8

pubspec.yaml

@@ -46,6 +46,7 @@ dependencies:
   image: ^4.2.0
   package_info_plus: ^8.1.3
   shared_preferences: ^2.5.3
+  url_launcher: ^6.3.1
 
 dev_dependencies:
   flutter_test:
@@ -89,9 +90,13 @@ flutter:
 flutter_native_splash:
   color: "#f9a11b"
   color_dark: "#1a1a2e"
+  image: assets/icon/app_icon.png
+  image_dark: assets/icon/app_icon.png
   android_12:
     color: "#f9a11b"
     color_dark: "#1a1a2e"
+    image: assets/icon/app_icon_foreground.png
+    image_dark: assets/icon/app_icon_foreground.png
 
 # ── Launcher Icon config ──
 flutter_launcher_icons:

web/index.html

@@ -29,6 +29,9 @@
 
   <title>car64</title>
   <link rel="manifest" href="manifest.json">
+  
+  
+  <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport">
   <style id="splash-screen-style">
     html {
       height: 100%
@@ -100,9 +103,13 @@
       document.body.style.background = "transparent";
     }
   </script>
-  <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport">
 </head>
 <body>
+  <picture id="splash">
+      <source srcset="splash/img/light-1x.png 1x, splash/img/light-2x.png 2x, splash/img/light-3x.png 3x, splash/img/light-4x.png 4x" media="(prefers-color-scheme: light)">
+      <source srcset="splash/img/dark-1x.png 1x, splash/img/dark-2x.png 2x, splash/img/dark-3x.png 3x, splash/img/dark-4x.png 4x" media="(prefers-color-scheme: dark)">
+      <img class="center" aria-hidden="true" src="splash/img/light-1x.png" alt="">
+  </picture>
   <!--
     You can customize the "flutter_bootstrap.js" script.
     This is useful to provide a custom configuration to the Flutter loader