feat(frontend): add mobile warning banner to login and signup pages (#11383)

## Summary
Adds a non-blocking warning banner to Login and Sign Up pages that
alerts mobile users about potential limitations in the mobile
experience.

## Changes
- Created `MobileWarningBanner` component in `src/components/auth/`
- Integrated banner into Login page (`/login`)
- Integrated banner into Sign Up page (`/signup`)
- Banner displays only on mobile devices (viewports < 768px)
- Uses existing `useBreakpoint` hook for responsive detection

## Design Details
- **Position**: Appears below the login/signup card (after the bottom
"Sign up"/"Log in" links)
- **Style**: Amber-themed warning banner with DeviceMobile icon
- **Message**: 
  - Title: "Heads up: AutoGPT works best on desktop"
- Description: "Some features may be limited on mobile. For the best
experience, consider switching to a desktop."
- **Behavior**: Non-blocking, no user interaction required

<img width="342" height="81" alt="image"
src="https://github.com/user-attachments/assets/b6584299-b388-4d8d-b951-02bd95915566"
/>

#### For code changes:
- [x] I have clearly listed my changes in the PR description
- [x] I have made a test plan
- [x] I have tested my changes according to the test plan:
  <!-- Put your test plan here: -->
	- [x] Verified banner appears on mobile viewports (< 768px)
	- [x] Verified banner is hidden on desktop viewports (≥ 768px)
	- [x] Tested on Login page
	- [x] Tested on Sign Up page

<img width="342" height="758" alt="image"
src="https://github.com/user-attachments/assets/077b3e0a-ab9c-41c7-83b7-7ee80a3396fd"
/>

<img width="342" height="759" alt="image"
src="https://github.com/user-attachments/assets/77a64b28-748b-4d97-bd7c-67c55e5e9f22"
/>

---------

Co-authored-by: Abhimanyu Yadav <[email protected]>

Author: Bentlybro

autogpt_platform/frontend/src/app/(platform)/login/page.tsx

@@ -11,6 +11,7 @@ import Turnstile from "@/components/auth/Turnstile";
 import { environment } from "@/services/environment";
 import { LoadingLogin } from "./components/LoadingLogin";
 import { useLoginPage } from "./useLoginPage";
+import { MobileWarningBanner } from "@/components/auth/MobileWarningBanner";
 
 export default function LoginPage() {
   const {
@@ -127,6 +128,7 @@ export default function LoginPage() {
           link={{ text: "Sign up", href: "/signup" }}
         />
       </AuthCard>
+      <MobileWarningBanner />
       <EmailNotAllowedModal
         isOpen={showNotAllowedModal}
         onClose={handleCloseNotAllowedModal}

autogpt_platform/frontend/src/app/(platform)/signup/page.tsx

@@ -21,6 +21,7 @@ import { environment } from "@/services/environment";
 import { WarningOctagonIcon } from "@phosphor-icons/react/dist/ssr";
 import { LoadingSignup } from "./components/LoadingSignup";
 import { useSignupPage } from "./useSignupPage";
+import { MobileWarningBanner } from "@/components/auth/MobileWarningBanner";
 
 export default function SignupPage() {
   const {
@@ -205,6 +206,7 @@ export default function SignupPage() {
           link={{ text: "Log in", href: "/login" }}
         />
       </AuthCard>
+      <MobileWarningBanner />
       <EmailNotAllowedModal
         isOpen={showNotAllowedModal}
         onClose={handleCloseNotAllowedModal}

autogpt_platform/frontend/src/components/auth/MobileWarningBanner.tsx

@@ -0,0 +1,31 @@
+"use client";
+
+import { useBreakpoint } from "@/lib/hooks/useBreakpoint";
+import { DeviceMobile } from "@phosphor-icons/react";
+import { Text } from "../atoms/Text/Text";
+
+export function MobileWarningBanner() {
+  const breakpoint = useBreakpoint();
+  const isMobile = breakpoint === "base" || breakpoint === "sm";
+
+  if (!isMobile) {
+    return null;
+  }
+
+  return (
+    <div className="mx-auto mt-6 w-full max-w-[32rem] rounded-lg border border-amber-200 bg-amber-50 p-4">
+      <div className="flex items-start gap-3">
+        <DeviceMobile className="mt-0.5 h-5 w-5 flex-shrink-0 text-amber-600" />
+        <div className="flex flex-col gap-1">
+          <Text variant="body-medium" className="text-amber-900">
+            Heads up: AutoGPT works best on desktop
+          </Text>
+          <Text variant="small" className="text-amber-800">
+            Some features may be limited on mobile. For the best experience,
+            consider switching to a desktop.
+          </Text>
+        </div>
+      </div>
+    </div>
+  );
+}