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

app/(auth)/guard/page.tsx

@@ -1,8 +1,9 @@
-import { Card, CardContent, CardHeader } from "@/components/ui/card";
-import { TooltipProvider } from "@/components/ui/tooltip";
-import { GuardForm } from "@/components/wrappers/auth/guard/guard-form";
-import { cookies } from "next/headers";
-import { redirect } from "next/navigation";
+import {CardContent, CardHeader} from "@/components/ui/card";
+import {TooltipProvider} from "@/components/ui/tooltip";
+import {GuardForm} from "@/components/wrappers/auth/guard/guard-form";
+import {cookies} from "next/headers";
+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>
     );
 }