feat(login): refactor login option screen to include demo request button and improve layout

lib/view/auth/email_login_form.dart

@@ -8,7 +8,7 @@ import 'package:marco/helpers/widgets/my_button.dart';
 import 'package:marco/helpers/widgets/my_spacing.dart';
 import 'package:marco/helpers/widgets/my_text.dart';
 import 'package:marco/helpers/widgets/my_text_style.dart';
-import 'package:marco/view/auth/request_demo_bottom_sheet.dart';
+
 import 'package:marco/helpers/services/api_endpoints.dart';
 
 class EmailLoginForm extends StatefulWidget {
@@ -136,22 +136,7 @@ class _EmailLoginFormState extends State<EmailLoginForm> with UIMixin {
                     ),
                   ),
                 ),
-                MySpacing.height(16),
+                
-                Center(
-                  child: MyButton.text(
-                    onPressed: () {
-                      OrganizationFormBottomSheet.show(context);
-                    },
-                    elevation: 0,
-                    padding: MySpacing.xy(12, 8),
-                    splashColor: contentTheme.secondary.withAlpha(30),
-                    child: MyText.bodySmall(
-                      "Request a Demo",
-                      color: contentTheme.brandRed,
-                      fontWeight: 600,
-                    ),
-                  ),
-                ),
               ],
             ),
           );

lib/view/auth/login_option_screen.dart

@@ -5,6 +5,7 @@ import 'package:marco/images.dart';
 import 'package:marco/view/auth/email_login_form.dart';
 import 'package:marco/view/auth/otp_login_form.dart';
 import 'package:marco/helpers/services/api_endpoints.dart';
+import 'package:marco/view/auth/request_demo_bottom_sheet.dart';
 
 enum LoginOption { email, otp }
 
@@ -26,21 +27,25 @@ class WelcomeScreen extends StatelessWidget {
       builder: (_) => Dialog(
         shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(16)),
         insetPadding: const EdgeInsets.all(24),
-        child: Padding(
+        child: SingleChildScrollView(
-          padding: const EdgeInsets.all(24),
+          child: Padding(
-          child: ConstrainedBox(
+            padding: const EdgeInsets.all(24),
-            constraints: const BoxConstraints(maxWidth: 420),
+            child: ConstrainedBox(
-            child: Column(
+              constraints: const BoxConstraints(maxWidth: 420),
-              mainAxisSize: MainAxisSize.min,
+              child: Column(
-              children: [
+                mainAxisSize: MainAxisSize.min,
-                MyText(
+                children: [
-                  option == LoginOption.email ? "Login with Email" : "Login with OTP",
+                  MyText(
-                  fontSize: 20,
+                    option == LoginOption.email ? "Login with Email" : "Login with OTP",
-                  fontWeight: 700,
+                    fontSize: 20,
-                ),
+                    fontWeight: 700,
-                const SizedBox(height: 20),
+                  ),
-                option == LoginOption.email ? EmailLoginForm() : const OTPLoginScreen(),
+                  const SizedBox(height: 20),
-              ],
+                  option == LoginOption.email
+                      ? EmailLoginForm()
+                      : const OTPLoginScreen(),
+                ],
+              ),
             ),
           ),
         ),
@@ -59,17 +64,21 @@ class WelcomeScreen extends StatelessWidget {
           child: SingleChildScrollView(
             padding: const EdgeInsets.all(24),
             child: ConstrainedBox(
-              constraints: BoxConstraints(maxWidth: screenWidth < 500 ? double.infinity : 420),
+              constraints: BoxConstraints(
+                maxWidth: screenWidth < 500 ? double.infinity : 420,
+              ),
               child: Column(
                 crossAxisAlignment: CrossAxisAlignment.center,
                 children: [
-                  // App Logo
+                  // Logo
                   Container(
                     padding: const EdgeInsets.all(16),
                     decoration: BoxDecoration(
                       color: Colors.white,
                       borderRadius: BorderRadius.circular(20),
-                      boxShadow: const [BoxShadow(color: Colors.black26, blurRadius: 8)],
+                      boxShadow: const [
+                        BoxShadow(color: Colors.black26, blurRadius: 8),
+                      ],
                     ),
                     child: Image.asset(Images.logoDark, height: 60),
                   ),
@@ -112,22 +121,27 @@ class WelcomeScreen extends StatelessWidget {
                   const SizedBox(height: 36),
 
                   // Login Buttons
-                  _buildLoginButton(
+                  _buildActionButton(
                     context,
                     label: "Login with Username",
                     icon: LucideIcons.mail,
                     option: LoginOption.email,
                   ),
                   const SizedBox(height: 16),
-                  _buildLoginButton(
+                  _buildActionButton(
                     context,
                     label: "Login with OTP",
                     icon: LucideIcons.message_square,
                     option: LoginOption.otp,
                   ),
-
+                  const SizedBox(height: 16),
+                  _buildActionButton(
+                    context,
+                    label: "Request a Demo",
+                    icon: LucideIcons.phone_call,
+                    option: null,
+                  ),
                   const SizedBox(height: 36),
-
                   // Version Info
                   MyText(
                     'App version 1.0.0',
@@ -143,24 +157,41 @@ class WelcomeScreen extends StatelessWidget {
     );
   }
 
-  Widget _buildLoginButton(BuildContext context,
+  Widget _buildActionButton(
-      {required String label, required IconData icon, required LoginOption option}) {
+    BuildContext context, {
+    required String label,
+    required IconData icon,
+    LoginOption? option, // nullable for "Request a Demo"
+  }) {
     return SizedBox(
       width: double.infinity,
       child: ElevatedButton.icon(
         icon: Icon(icon, size: 20, color: Colors.white),
         label: Padding(
           padding: const EdgeInsets.symmetric(vertical: 12),
-          child: MyText(label, fontSize: 16, fontWeight: 600, color: Colors.white),
+          child: MyText(
+            label,
+            fontSize: 16,
+            fontWeight: 600,
+            color: Colors.white,
+          ),
         ),
         style: ElevatedButton.styleFrom(
           backgroundColor: const Color(0xFFB71C1C),
           side: const BorderSide(color: Colors.white70),
-          shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(12)),
+          shape: RoundedRectangleBorder(
+            borderRadius: BorderRadius.circular(12),
+          ),
           elevation: 4,
         ),
-        onPressed: () => _showLoginDialog(context, option),
+        onPressed: () {
+          if (option == null) {
+            OrganizationFormBottomSheet.show(context);
+          } else {
+            _showLoginDialog(context, option);
+          }
+        },
       ),
     );
   }
-}
+}