feat: Implement notice and file types banners for attire upload and enhance incomplete profile messaging

apps/mobile/packages/design_system/lib/design_system.dart

@@ -12,3 +12,4 @@ export 'src/widgets/ui_button.dart';
 export 'src/widgets/ui_chip.dart';
 export 'src/widgets/ui_loading_page.dart';
 export 'src/widgets/ui_snackbar.dart';
+export 'src/widgets/ui_notice_banner.dart';

apps/mobile/packages/design_system/lib/src/widgets/ui_notice_banner.dart

@@ -0,0 +1,81 @@
+import 'package:design_system/design_system.dart';
+import 'package:flutter/material.dart';
+
+import '../ui_constants.dart';
+
+/// A customizable notice banner widget for displaying informational messages.
+///
+/// [UiNoticeBanner] displays a message with an optional icon and supports
+/// custom styling through title and description text.
+class UiNoticeBanner extends StatelessWidget {
+  /// Creates a [UiNoticeBanner].
+  const UiNoticeBanner({
+    super.key,
+    this.icon,
+    required this.title,
+    this.description,
+    this.backgroundColor,
+    this.borderRadius,
+    this.padding,
+  });
+
+  /// The icon to display on the left side.
+  /// Defaults to null. The icon will be rendered with primary color and 24pt size.
+  final IconData? icon;
+
+  /// The title text to display.
+  final String title;
+
+  /// Optional description text to display below the title.
+  final String? description;
+
+  /// The background color of the banner.
+  /// Defaults to [UiColors.primary] with 8% opacity.
+  final Color? backgroundColor;
+
+  /// The border radius of the banner.
+  /// Defaults to [UiConstants.radiusLg].
+  final BorderRadius? borderRadius;
+
+  /// The padding around the banner content.
+  /// Defaults to [UiConstants.space4] on all sides.
+  final EdgeInsetsGeometry? padding;
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      padding: padding ?? const EdgeInsets.all(UiConstants.space4),
+      decoration: BoxDecoration(
+        color: backgroundColor ?? UiColors.primary.withValues(alpha: 0.08),
+        borderRadius: borderRadius ?? UiConstants.radiusLg,
+      ),
+      child: Row(
+        crossAxisAlignment: CrossAxisAlignment.start,
+        children: <Widget>[
+          if (icon != null) ...<Widget>[
+            Icon(icon, color: UiColors.primary, size: 24),
+            const SizedBox(width: UiConstants.space3),
+          ],
+          Expanded(
+            child: Column(
+              crossAxisAlignment: CrossAxisAlignment.start,
+              children: <Widget>[
+                Text(
+                  title,
+                  style: UiTypography.body2m.textPrimary,
+                ),
+                if (description != null) ...<Widget>[
+                  const SizedBox(height: 2),
+                  Text(
+                    description!,
+                    style: UiTypography.body2r.textSecondary,
+                  ),
+                ],
+              ],
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+}