Made a lot of the front end

src/app/login/page.tsx

@@ -0,0 +1,127 @@
+'use client'
+
+import { useState } from 'react'
+import { Button } from "~/components/ui/button"
+import { Input } from "~/components/ui/input"
+import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "~/components/ui/card"
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "~/components/ui/tabs"
+import { Label } from "~/components/ui/label"
+import { Eye, EyeOff } from 'lucide-react'
+import Sign_In from "~/components/auth/client/SignInAppleButton"
+
+export default function AuthPage() {
+  const [showPassword, setShowPassword] = useState(false)
+
+  const togglePasswordVisibility = () => setShowPassword(!showPassword)
+
+  return (
+    <div className="flex items-center justify-center min-h-screen bg-background">
+      <Card className="w-full max-w-md">
+        <CardHeader>
+          <CardTitle className="text-2xl font-bold text-center text-primary">
+            Welcome to Magnolia Coast Property Management
+          </CardTitle>
+          <CardDescription className="text-center text-muted-foreground">
+            Login or create an account to get started
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          <Tabs defaultValue="login" className="w-full">
+            <TabsList className="grid w-full grid-cols-2">
+              <TabsTrigger value="login">Login</TabsTrigger>
+              <TabsTrigger value="register">Register</TabsTrigger>
+            </TabsList>
+            <TabsContent value="login">
+              <form>
+                <div className="space-y-4">
+                  <div className="space-y-2">
+                    <Label htmlFor="email">Email</Label>
+                    <Input id="email" placeholder="Enter your email" type="email" required />
+                  </div>
+                  <div className="space-y-2">
+                    <Label htmlFor="password">Password</Label>
+                    <div className="relative">
+                      <Input
+                        id="password"
+                        placeholder="Enter your password"
+                        type={showPassword ? "text" : "password"}
+                        required
+                      />
+                      <Button
+                        type="button"
+                        variant="ghost"
+                        size="sm"
+                        className="absolute right-0 top-0 h-full px-3 py-2 hover:bg-transparent"
+                        onClick={togglePasswordVisibility}
+                      >
+                        {showPassword ? (
+                          <EyeOff className="h-4 w-4 text-muted-foreground" />
+                        ) : (
+                          <Eye className="h-4 w-4 text-muted-foreground" />
+                        )}
+                      </Button>
+                    </div>
+                  </div>
+                </div>
+                <div className="flex flex-col justify-center">
+                  <Button className="w-full mt-6 mb-4 text-md" type="submit">Login</Button>
+                  <Sign_In/>
+                </div>
+              </form>
+            </TabsContent>
+            <TabsContent value="register">
+              <form>
+                <div className="space-y-4">
+                  <div className="space-y-2">
+                    <Label htmlFor="register-name">Full Name</Label>
+                    <Input id="register-name" placeholder="Enter your full name" required />
+                  </div>
+                  <div className="space-y-2">
+                    <Label htmlFor="register-email">Email</Label>
+                    <Input id="register-email" placeholder="Enter your email" type="email" required />
+                  </div>
+                  <div className="space-y-2">
+                    <Label htmlFor="register-password">Password</Label>
+                    <div className="relative">
+                      <Input
+                        id="register-password"
+                        placeholder="Create a password"
+                        type={showPassword ? "text" : "password"}
+                        required
+                      />
+                      <Button
+                        type="button"
+                        variant="ghost"
+                        size="sm"
+                        className="absolute right-0 top-0 h-full px-3 py-2 hover:bg-transparent"
+                        onClick={togglePasswordVisibility}
+                      >
+                        {showPassword ? (
+                          <EyeOff className="h-4 w-4 text-muted-foreground" />
+                        ) : (
+                          <Eye className="h-4 w-4 text-muted-foreground" />
+                        )}
+                      </Button>
+                    </div>
+                  </div>
+                </div>
+                <div className="flex flex-col justify-center">
+                  <Button className="w-full mt-6 mb-4 text-md" type="submit">Register</Button>
+                  <Sign_In/>
+                </div>
+              </form>
+            </TabsContent>
+          </Tabs>
+        </CardContent>
+        <CardFooter className="flex justify-center">
+          <p className="text-sm text-muted-foreground">
+            By continuing, you agree to our{' '}
+            <a href="#" className="underline text-primary">Terms of Service</a> and{' '}
+            <a href="#" className="underline text-primary">Privacy Policy</a>
+          </p>
+        </CardFooter>
+      </Card>
+    </div>
+  );
+}
+