Add back to home button on auth page

Added a "Kembali ke Beranda" (Back to Home) button on the login/signup
page to allow users to navigate back to the home page without needing
to authenticate.

Changes:
- Imported Link and ArrowLeft icon from lucide-react
- Added button above the auth card that links to "/"
- Wrapped content in a space-y-4 container for proper spacing

🤖 Generated with [Claude Code](https://claude.com/claude-code)

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

src/pages/Auth.tsx

@@ -1,5 +1,5 @@
 import { useState, useEffect } from 'react';
-import { useNavigate } from 'react-router-dom';
+import { useNavigate, Link } from 'react-router-dom';
 import { useAuth } from '@/hooks/useAuth';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
@@ -7,6 +7,7 @@ import { Label } from '@/components/ui/label';
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
 import { toast } from '@/hooks/use-toast';
 import { z } from 'zod';
+import { ArrowLeft } from 'lucide-react';
 
 const emailSchema = z.string().email('Invalid email address');
 const passwordSchema = z.string().min(6, 'Password must be at least 6 characters');
@@ -71,66 +72,76 @@ export default function Auth() {
 
   return (
     <div className="min-h-screen flex items-center justify-center bg-background p-4">
-      <Card className="w-full max-w-md border-2 border-border shadow-md">
+      <div className="w-full max-w-md space-y-4">
-        <CardHeader>
+        {/* Back to Home Button */}
-          <CardTitle className="text-2xl">{isLogin ? 'Login' : 'Sign Up'}</CardTitle>
+        <Link to="/">
-          <CardDescription>
+          <Button variant="ghost" className="gap-2">
-            {isLogin ? 'Enter your credentials to access your account' : 'Create a new account to get started'}
+            <ArrowLeft className="w-4 h-4" />
-          </CardDescription>
+            Kembali ke Beranda
-        </CardHeader>
+          </Button>
-        <CardContent>
+        </Link>
-          <form onSubmit={handleSubmit} className="space-y-4">
+
-            {!isLogin && (
+        <Card className="border-2 border-border shadow-md">
+          <CardHeader>
+            <CardTitle className="text-2xl">{isLogin ? 'Login' : 'Sign Up'}</CardTitle>
+            <CardDescription>
+              {isLogin ? 'Enter your credentials to access your account' : 'Create a new account to get started'}
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <form onSubmit={handleSubmit} className="space-y-4">
+              {!isLogin && (
+                <div className="space-y-2">
+                  <Label htmlFor="name">Name</Label>
+                  <Input
+                    id="name"
+                    type="text"
+                    value={name}
+                    onChange={(e) => setName(e.target.value)}
+                    placeholder="Your name"
+                    className="border-2"
+                  />
+                </div>
+              )}
               <div className="space-y-2">
-                <Label htmlFor="name">Name</Label>
+                <Label htmlFor="email">Email</Label>
                 <Input
-                  id="name"
+                  id="email"
-                  type="text"
+                  type="email"
-                  value={name}
+                  value={email}
-                  onChange={(e) => setName(e.target.value)}
+                  onChange={(e) => setEmail(e.target.value)}
-                  placeholder="Your name"
+                  placeholder="your@email.com"
                   className="border-2"
                 />
               </div>
-            )}
+              <div className="space-y-2">
-            <div className="space-y-2">
+                <Label htmlFor="password">Password</Label>
-              <Label htmlFor="email">Email</Label>
+                <Input
-              <Input
+                  id="password"
-                id="email"
+                  type="password"
-                type="email"
+                  value={password}
-                value={email}
+                  onChange={(e) => setPassword(e.target.value)}
-                onChange={(e) => setEmail(e.target.value)}
+                  placeholder="••••••••"
-                placeholder="your@email.com"
+                  className="border-2"
-                className="border-2"
+                />
-              />
+              </div>
-            </div>
+              <Button type="submit" className="w-full shadow-sm" disabled={loading}>
-            <div className="space-y-2">
+                {loading ? 'Loading...' : isLogin ? 'Login' : 'Sign Up'}
-              <Label htmlFor="password">Password</Label>
+              </Button>
-              <Input
+            </form>
-                id="password"
-                type="password"
-                value={password}
-                onChange={(e) => setPassword(e.target.value)}
-                placeholder="••••••••"
-                className="border-2"
-              />
-            </div>
-            <Button type="submit" className="w-full shadow-sm" disabled={loading}>
-              {loading ? 'Loading...' : isLogin ? 'Login' : 'Sign Up'}
-            </Button>
-          </form>
 
-          <div className="mt-4 text-center">
+            <div className="mt-4 text-center">
-            <button
+              <button
-              type="button"
+                type="button"
-              onClick={() => setIsLogin(!isLogin)}
+                onClick={() => setIsLogin(!isLogin)}
-              className="text-sm text-muted-foreground hover:underline"
+                className="text-sm text-muted-foreground hover:underline"
-            >
+              >
-              {isLogin ? "Don't have an account? Sign up" : 'Already have an account? Login'}
+                {isLogin ? "Don't have an account? Sign up" : 'Already have an account? Login'}
-            </button>
+              </button>
-          </div>
+            </div>
-        </CardContent>
+          </CardContent>
-      </Card>
+        </Card>
+      </div>
     </div>
   );
 }