Redesign login page, add logout button, fix crop button visibility

- AuthGate: full-screen branded layout with left panel (scissors icon,
  tagline) and MS-branded sign-in button (official colors/logo)
- Index: show signed-in user name + LogOut button in header via useMsal
- Fix: show engine toggle + Generate button as soon as an image is
  uploaded; disable Generate until a ratio is selected instead of hiding

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

src/components/AuthGate.tsx

@@ -6,6 +6,18 @@ import {
 import { loginRequest } from "@/lib/msal-config";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Button } from "@/components/ui/button";
+import { Scissors } from "lucide-react";
+
+function MicrosoftLogo() {
+  return (
+    <svg width="20" height="20" viewBox="0 0 21 21" xmlns="http://www.w3.org/2000/svg">
+      <rect x="1" y="1" width="9" height="9" fill="#f25022" />
+      <rect x="11" y="1" width="9" height="9" fill="#7fba00" />
+      <rect x="1" y="11" width="9" height="9" fill="#00a4ef" />
+      <rect x="11" y="11" width="9" height="9" fill="#ffb900" />
+    </svg>
+  );
+}
 
 export function AuthGate({ children }: { children: React.ReactNode }) {
   const { instance } = useMsal();
@@ -14,23 +26,46 @@ export function AuthGate({ children }: { children: React.ReactNode }) {
     <>
       <AuthenticatedTemplate>{children}</AuthenticatedTemplate>
       <UnauthenticatedTemplate>
-        <div className="min-h-screen flex items-center justify-center bg-background">
-          <Card className="w-full max-w-md mx-4">
-            <CardHeader className="text-center">
-              <CardTitle className="text-2xl font-bold">SmartCrop</CardTitle>
-              <p className="text-muted-foreground text-sm mt-1">
-                Sign in to access the application
-              </p>
-            </CardHeader>
-            <CardContent className="flex justify-center">
-              <Button
-                size="lg"
-                onClick={() => instance.loginRedirect(loginRequest)}
-              >
-                Sign in with Microsoft
-              </Button>
-            </CardContent>
-          </Card>
+        <div className="min-h-screen flex">
+          {/* Branded panel — hidden on mobile */}
+          <div className="hidden lg:flex flex-col justify-center bg-primary text-primary-foreground p-12 w-1/2">
+            <Scissors className="w-14 h-14 mb-8 opacity-90" />
+            <h1 className="text-5xl font-black tracking-tight uppercase mb-4">
+              SmartCrop
+            </h1>
+            <p className="text-lg opacity-80 max-w-sm leading-relaxed">
+              AI-powered image cropping for every platform. Generate perfectly
+              framed crops for social, web, and print in seconds.
+            </p>
+          </div>
+
+          {/* Login card */}
+          <div className="flex flex-1 items-center justify-center p-8 bg-background">
+            <Card className="w-full max-w-sm">
+              <CardHeader className="text-center pb-2">
+                {/* Show brand on mobile (panel hidden) */}
+                <div className="flex items-center justify-center gap-2 mb-4 lg:hidden">
+                  <Scissors className="w-5 h-5 text-primary" />
+                  <span className="font-black tracking-tight uppercase text-foreground">
+                    SmartCrop
+                  </span>
+                </div>
+                <CardTitle className="text-xl font-bold">Sign in to continue</CardTitle>
+                <p className="text-muted-foreground text-sm mt-1">
+                  Use your Microsoft account to access SmartCrop.
+                </p>
+              </CardHeader>
+              <CardContent className="pt-4">
+                <button
+                  onClick={() => instance.loginRedirect(loginRequest)}
+                  className="w-full flex items-center justify-center gap-3 px-4 py-2.5 bg-white text-[#5e5e5e] font-semibold text-sm border border-[#8c8c8c] rounded hover:bg-gray-50 active:bg-gray-100 transition-colors"
+                >
+                  <MicrosoftLogo />
+                  Sign in with Microsoft
+                </button>
+              </CardContent>
+            </Card>
+          </div>
         </div>
       </UnauthenticatedTemplate>
     </>

src/pages/Index.tsx

@@ -1,4 +1,5 @@
 import React, { useState } from "react";
+import { useMsal } from "@azure/msal-react";
 import ImageUpload from "@/components/ImageUpload";
 import RatioSelector from "@/components/RatioSelector";
 import CropPreviewCard from "@/components/CropPreviewCard";
@@ -6,7 +7,7 @@ import CropEditor from "@/components/CropEditor";
 import { Button } from "@/components/ui/button";
 import { Progress } from "@/components/ui/progress";
 import { ScrollArea } from "@/components/ui/scroll-area";
-import { Scissors, Download, Loader2, Sparkles, Cpu } from "lucide-react";
+import { Scissors, Download, Loader2, Sparkles, Cpu, LogOut, User } from "lucide-react";
 import { toast } from "sonner";
 import type { AspectRatioPreset, CropSuggestion, ImageFile } from "@/lib/crop-types";
 import { exportCropsAsZip } from "@/lib/export-zip";
@@ -16,6 +17,8 @@ import { analyzeImageLocal } from "@/lib/analyze-local";
 type CropEngine = "ai" | "local";
 
 const Index = () => {
+  const { instance, accounts } = useMsal();
+  const user = accounts[0];
   const [images, setImages] = useState<ImageFile[]>([]);
   const [activeIndex, setActiveIndex] = useState(0);
   const [selectedRatios, setSelectedRatios] = useState<AspectRatioPreset[]>([]);
@@ -119,7 +122,20 @@ const Index = () => {
           <h1 className="text-xl font-bold tracking-tight text-foreground uppercase">
             SmartCrop
           </h1>
-          <span className="text-xs text-muted-foreground ml-auto">v2.0</span>
+          <div className="ml-auto flex items-center gap-2">
+            <User className="w-4 h-4 text-muted-foreground" />
+            <span className="text-sm text-muted-foreground hidden sm:inline">
+              {user?.name || user?.username}
+            </span>
+            <Button
+              variant="ghost"
+              size="icon"
+              onClick={() => instance.logoutRedirect()}
+              title="Sign out"
+            >
+              <LogOut className="w-4 h-4" />
+            </Button>
+          </div>
         </div>
       </header>
 
@@ -133,7 +149,7 @@ const Index = () => {
               onActiveChange={setActiveIndex}
             />
 
-            {activeImage && selectedRatios.length > 0 && (
+            {activeImage && (
               <div className="flex items-center gap-3 flex-wrap">
                 {/* Engine toggle */}
                 <div className="flex rounded-lg border border-border overflow-hidden">
@@ -163,9 +179,10 @@ const Index = () => {
 
                 <Button
                   onClick={handleGenerate}
-                  disabled={analyzing}
+                  disabled={analyzing || selectedRatios.length === 0}
                   size="lg"
                   className="gap-2 uppercase"
+                  title={selectedRatios.length === 0 ? "Select at least one aspect ratio" : undefined}
                 >
                   {analyzing ? (
                     <Loader2 className="w-4 h-4 animate-spin" />