improved auth ui

app/(auth)/sign-in/page.jsx

@@ -28,6 +28,9 @@ import {
 } from "../../../@/components/ui/card";
 import { FaDiscord, FaGoogle } from "react-icons/fa";
 import { Loader2 } from "lucide-react";
+import LetterPullup from "../../../@/components/magicui/letter-pullup"
+import { delay } from "framer-motion";
+import SparklesText from "../../../@/components/magicui/sparkles-text"
 
 export default function SignInForm() {
   const router = useRouter();
@@ -79,15 +82,14 @@ export default function SignInForm() {
   };
 
   return (
-    <div className="flex justify-center items-center min-h-[70vh] pt-10">
+    <div>
+    <div className="bg-cover bg-center h-screen" style={{ backgroundImage: "url('pexels-lulizler-3165335.jpg')" }}>
+    <div className="flex justify-center  items-center min-h-[70vh]  pt-10">
       <Card className="w-96">
         <CardHeader>
-          <CardTitle className="text-2xl md:text-3xl tracking-tight">
-            Welcome to Sanity
-          </CardTitle>
 
-          <CardDescription>
-            Sign in to continue your gaming adventure
+            <CardDescription>
+
           </CardDescription>
         </CardHeader>
 
@@ -99,8 +101,8 @@ export default function SignInForm() {
                 control={form.control}
                 render={({ field }) => (
                   <FormItem>
-                    <FormLabel>Email or Username</FormLabel>
-                    <Input {...field} />
+                    <FormLabel className="text-xl" >Email or Username</FormLabel>
+                    <Input className="text-xl" {...field} />
                     <FormMessage />
                   </FormItem>
                 )}
@@ -111,8 +113,8 @@ export default function SignInForm() {
                 control={form.control}
                 render={({ field }) => (
                   <FormItem>
-                    <FormLabel>Password</FormLabel>
-                    <Input type="password" {...field} />
+                    <FormLabel className="text-xl">Password</FormLabel>
+                    <Input type="password" className="text-xl" {...field} />
                     <FormMessage />
                   </FormItem>
                 )}
@@ -163,5 +165,7 @@ export default function SignInForm() {
         </CardFooter>
       </Card>
     </div>
+    </div>
+    </div>
   );
 }

app/(auth)/sign-up/page.jsx

@@ -25,7 +25,7 @@ import {
 } from "../../../@/components/ui/card";
 
 import { useToast } from "../../../@/components/ui/use-toast";
-import axios from "axios";
+import axios from "axios"
 import { Loader2 } from "lucide-react";
 import { useRouter } from "next/navigation";
 import { signUpSchema } from "../../../model/Schema/signUpSchema";
@@ -102,6 +102,8 @@ const Page = () => {
   };
 
   return (
+    <div>
+    <div className="bg-cover bg-center h-screen" style={{ backgroundImage: "url('/pexels-lulizler-3165335.jpg')" }}>  
     <div className="flex justify-center items-center min-h-[70vh] pt-16">
       <Card className="w-96">
         <CardHeader>
@@ -195,6 +197,8 @@ const Page = () => {
         </Form>
       </Card>
     </div>
+    </div>
+    </div>
   );
 };
 

app/(auth)/verify/[username]/page.jsx

@@ -60,6 +60,8 @@ const VerifyAccount = () => {
   };
 
   return (
+    <div>
+    <div className="bg-cover bg-center h-screen" style={{ backgroundImage: "url('/pexels-lulizler-3165335.jpg')" }}>
     <div className="flex justify-center items-center min-h-[70vh]">
       <Card>
         <CardHeader className="mb-5">
@@ -94,6 +96,8 @@ const VerifyAccount = () => {
         </Form>
       </Card>
     </div>
+    </div>
+    </div>
   );
 };
 

package.json

@@ -25,6 +25,7 @@
     "@tabler/icons": "^1.115.0",
     "@tabler/icons-react": "^3.11.0",
     "@types/bcrypt": "^5.0.2",
+    "axios": "^1.7.3",
     "bcrypt": "^5.1.1",
     "bcryptjs": "^2.4.3",
     "class-variance-authority": "^0.7.0",