Web approach - basic look and feel done

kifi-app/lib/core/widgets/responsive_layout.dart

@@ -0,0 +1,74 @@
+import 'package:flutter/material.dart';
+
+class ResponsiveBreakpoints {
+  static const double mobile = 768.0;
+  static const double desktop = 1024.0;
+  static const double wideDesktop = 1440.0;
+}
+
+class ResponsiveLayout {
+  static bool isMobile(BuildContext context) =>
+      MediaQuery.sizeOf(context).width < ResponsiveBreakpoints.mobile;
+
+  static bool isTablet(BuildContext context) {
+    final width = MediaQuery.sizeOf(context).width;
+    return width >= ResponsiveBreakpoints.mobile && width < ResponsiveBreakpoints.desktop;
+  }
+
+  static bool isDesktop(BuildContext context) =>
+      MediaQuery.sizeOf(context).width >= ResponsiveBreakpoints.mobile;
+
+  static bool isWideDesktop(BuildContext context) =>
+      MediaQuery.sizeOf(context).width >= ResponsiveBreakpoints.wideDesktop;
+}
+
+class MaxContentWidth extends StatelessWidget {
+  final Widget child;
+  final double maxWidth;
+  final EdgeInsetsGeometry padding;
+
+  const MaxContentWidth({
+    super.key,
+    required this.child,
+    this.maxWidth = 1200.0,
+    this.padding = EdgeInsets.zero,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return Center(
+      child: ConstrainedBox(
+        constraints: BoxConstraints(maxWidth: maxWidth),
+        child: Padding(
+          padding: padding,
+          child: child,
+        ),
+      ),
+    );
+  }
+}
+
+class ResponsiveBuilder extends StatelessWidget {
+  final Widget Function(BuildContext context) mobile;
+  final Widget Function(BuildContext context)? tablet;
+  final Widget Function(BuildContext context) desktop;
+
+  const ResponsiveBuilder({
+    super.key,
+    required this.mobile,
+    this.tablet,
+    required this.desktop,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    final width = MediaQuery.sizeOf(context).width;
+    if (width >= ResponsiveBreakpoints.desktop) {
+      return desktop(context);
+    } else if (width >= ResponsiveBreakpoints.mobile) {
+      return (tablet ?? desktop)(context);
+    } else {
+      return mobile(context);
+    }
+  }
+}