Adding AuthCard for mobile first design and refactoring the Logo loading in the layout.

app/(auth)/forgot-password/page.tsx

@@ -1,23 +1,25 @@
-import { Card, CardContent, CardHeader } from "@/components/ui/card";
+import {CardContent, CardHeader} from "@/components/ui/card";
 
-import { TooltipProvider } from "@/components/ui/tooltip";
+import {TooltipProvider} from "@/components/ui/tooltip";
-import { ForgotPasswordForm } from "@/components/wrappers/auth/login/forgot-password-form/forgot-password-form";
+import {ForgotPasswordForm} from "@/components/wrappers/auth/login/forgot-password-form/forgot-password-form";
+import {CardAuth} from "@/features/layout/card-auth";
 
 export default async function RoutePage(props: { searchParams: Promise<{ callbackUrl: string | undefined }> }) {
 
     return (
         <TooltipProvider>
-            <Card className="w-full">
+            <CardAuth className="w-full">
                 <CardHeader>
                     <div className="grid gap-2 text-center mb-2">
                         <h1 className="text-3xl font-bold">Reset password</h1>
-                        <p className="text-balance text-muted-foreground">Enter your email address and we'll send you a link to reset your password.</p>
+                        <p className="text-balance text-muted-foreground">Enter your email address and we'll send you a
+                            link to reset your password.</p>
                     </div>
                 </CardHeader>
                 <CardContent>
-                    <ForgotPasswordForm />
+                    <ForgotPasswordForm/>
                 </CardContent>
-            </Card>
+            </CardAuth>
         </TooltipProvider>
     );
 }

app/(auth)/guard/page.tsx

@@ -1,8 +1,9 @@
-import { Card, CardContent, CardHeader } from "@/components/ui/card";
+import {CardContent, CardHeader} from "@/components/ui/card";
-import { TooltipProvider } from "@/components/ui/tooltip";
+import {TooltipProvider} from "@/components/ui/tooltip";
-import { GuardForm } from "@/components/wrappers/auth/guard/guard-form";
+import {GuardForm} from "@/components/wrappers/auth/guard/guard-form";
-import { cookies } from "next/headers";
+import {cookies} from "next/headers";
-import { redirect } from "next/navigation";
+import {redirect} from "next/navigation";
+import {CardAuth} from "@/features/layout/card-auth";
 
 export default async function GuardPage() {
 
@@ -13,20 +14,20 @@ export default async function GuardPage() {
         redirect("/login");
     }
 
-
     return (
         <TooltipProvider>
-            <Card className="w-full max-w-md">
+            <CardAuth className="w-full max-w-md">
                 <CardHeader>
                     <div className="grid gap-2 text-center mb-2">
                         <h1 className="text-3xl font-bold">Two-factor verification</h1>
-                        <p className="text-balance text-muted-foreground">Please enter the verification code generated by your authentication app.</p>
+                        <p className="text-balance text-muted-foreground">Please enter the verification code generated
+                            by your authentication app.</p>
                     </div>
                 </CardHeader>
                 <CardContent>
-                    <GuardForm />
+                    <GuardForm/>
                 </CardContent>
-            </Card>
+            </CardAuth>
         </TooltipProvider>
     );
 }

app/(auth)/login/page.tsx

@@ -3,9 +3,10 @@ import {Metadata} from "next";
 import {SUPPORTED_PROVIDERS} from "../../../portabase.config";
 import {SocialAuthButtons} from "@/components/wrappers/auth/social-buttons";
 import {TooltipProvider} from "@/components/ui/tooltip";
-import {Card, CardContent, CardHeader} from "@/components/ui/card";
+import {CardContent, CardHeader} from "@/components/ui/card";
 import Link from "next/link";
 import {Separator} from "@/components/ui/separator";
+import {CardAuth} from "@/features/layout/card-auth";
 
 export const metadata: Metadata = {
     title: "Login",
@@ -15,7 +16,7 @@ export default async function SignInPage() {
 
     return (
         <TooltipProvider>
-            <Card className="w-full">
+            <CardAuth className="w-full">
                 <CardHeader>
                     <div className="grid gap-2 text-center mb-2">
                         <h1 className="text-3xl font-bold">Login</h1>
@@ -30,7 +31,7 @@ export default async function SignInPage() {
 
                             <div className="relative my-4 flex items-center justify-center overflow-hidden">
                                 <Separator/>
-                                <div className="px-2 text-center bg-card text-sm">OR</div>
+                                <div className="px-2 text-center  text-sm">OR</div>
                                 <Separator/>
                             </div>
 
@@ -45,7 +46,7 @@ export default async function SignInPage() {
                         </Link>
                     </div>
                 </CardContent>
-            </Card>
+            </CardAuth>
         </TooltipProvider>
 
 

src/components/wrappers/auth/auth-logo-section.tsx

@@ -1,11 +1,11 @@
-"use client"
+"use client";
-import {env} from "@/env.mjs";
-import React, {useEffect, useState} from "react";
-import {useTheme} from "next-themes";
 
+import {env} from "@/env.mjs";
+import {useTheme} from "next-themes";
+import Image from "next/image";
+import {useEffect, useState} from "react";
 
 export const AuthLogoSection = () => {
-
     const {resolvedTheme} = useTheme();
     const [mounted, setMounted] = useState(false);
 
@@ -13,19 +13,25 @@ export const AuthLogoSection = () => {
         setMounted(true);
     }, []);
 
-    if (!mounted) return null;
+    const imageTheme =
-
+        resolvedTheme === "dark"
-
+            ? "/images/logo-white.png"
-    const imageTheme = resolvedTheme === "dark" ? "/images/logo-white.png" : "/images/logo-black.png";
+            : "/images/logo-black.png";
 
     return (
-        <div className="sm:mx-auto sm:w-full sm:max-w-md flex items-center justify-center space-x-2">
+        <div className="sm:mx-auto sm:w-full sm:max-w-md relative flex items-center justify-center h-[160px]">
-            <img
+            {mounted && (
-                className="p-12 text-black dark:text-white"
+                <Image
-                src={imageTheme}
+                    src={imageTheme}
-                alt="Logo"
+                    alt="Logo"
-            />
+                    fill
-            <span className="text-sm text-muted-foreground -ml-12 -mb-12">v{env.NEXT_PUBLIC_PROJECT_VERSION}</span>
+                    priority
+                    className="object-contain p-10"
+                />
+            )}
+            <span className="absolute bottom-12 right-2 text-sm text-muted-foreground">
+                v{env.NEXT_PUBLIC_PROJECT_VERSION}
+            </span>
         </div>
-    )
+    );
-}
+};

src/components/wrappers/auth/register/register-form/register-form.tsx

@@ -15,6 +15,7 @@ import {RegisterSchema, RegisterType} from "@/components/wrappers/auth/register/
 import {PasswordInput} from "@/components/ui/password-input";
 import {signUp} from "@/lib/auth/auth-client";
 import Link from "next/link";
+import {CardAuth} from "@/features/layout/card-auth";
 
 export type registerFormProps = {
     defaultValues?: RegisterType;
@@ -45,7 +46,7 @@ export const RegisterForm = (props: registerFormProps) => {
 
     return (
         <TooltipProvider>
-            <Card>
+            <CardAuth>
                 <CardHeader>
                     <div className="grid gap-2 text-center mb-2">
                         <h1 className="text-3xl font-bold">Create an account</h1>
@@ -144,7 +145,7 @@ export const RegisterForm = (props: registerFormProps) => {
 
                     </Form>
                 </CardContent>
-            </Card>
+            </CardAuth>
         </TooltipProvider>
     );
 };

src/components/wrappers/auth/reset-password/reset-password-form.tsx

@@ -10,6 +10,7 @@ import {Card, CardContent, CardHeader} from "@/components/ui/card";
 import {ButtonWithLoading} from "@/components/wrappers/common/button/button-with-loading";
 import {authClient} from "@/lib/auth/auth-client";
 import {toast} from "sonner";
+import {CardAuth} from "@/features/layout/card-auth";
 
 type ResetPasswordFormProps = {
     token: string;
@@ -43,7 +44,7 @@ export const ResetPasswordForm = ({token}: ResetPasswordFormProps) => {
     });
 
     return (
-        <Card>
+        <CardAuth>
             <CardHeader>
                 <div className="grid gap-2 text-center mb-2">
                     <h1 className="text-3xl font-bold">Reset Password</h1>
@@ -89,6 +90,6 @@ export const ResetPasswordForm = ({token}: ResetPasswordFormProps) => {
                     </ButtonWithLoading>
                 </Form>
             </CardContent>
-        </Card>
+        </CardAuth>
     );
 };

src/features/layout/card-auth.tsx

@@ -0,0 +1,17 @@
+import {cn} from "@/lib/utils";
+import * as React from "react";
+
+
+export function CardAuth({ className, ...props }: React.ComponentProps<"div">) {
+    return (
+        <div
+            data-slot="card"
+            className={cn(
+                "bg-transparent border-none py-3",
+                "md:bg-card text-card-foreground flex flex-col gap-6 rounded-xl md:border-solid md:border md:py-6 shadow-sm",
+                className
+            )}
+            {...props}
+        />
+    )
+}