🐛 fix: align dashboard with secured APIs

apps/web/components/auth/auth-form-card.tsx

@@ -1,11 +1,15 @@
+"use client";
+
 import type * as React from "react";
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { FadeIn, Stagger, useShake } from "@/components/motion";
+import { Card, CardContent } from "@/components/ui/card";
 import { cn } from "@/lib/cn";
 
 type AuthFormCardProps = {
   title: string;
   description: string;
   children: React.ReactNode;
+  leading?: React.ReactNode;
   className?: string;
   headerClassName?: string;
   contentClassName?: string;
@@ -15,26 +19,45 @@ export function AuthFormCard({
   title,
   description,
   children,
+  leading,
   className,
   headerClassName,
   contentClassName,
 }: AuthFormCardProps) {
   return (
-    <Card className={cn("w-full max-w-md", className)}>
-      <CardHeader className={cn("space-y-3", headerClassName)}>
-        <CardTitle className="text-3xl tracking-[-0.035em]">{title}</CardTitle>
-        <CardDescription>{description}</CardDescription>
-      </CardHeader>
-      <CardContent className={contentClassName}>{children}</CardContent>
-    </Card>
+    <FadeIn y={20} x={12} duration={0.65} className="flex w-full justify-center">
+      <Card className={cn("w-full max-w-md gap-0 overflow-hidden py-6", className)}>
+        <header className={cn("px-5 pb-6 sm:px-6", headerClassName)}>
+          <div className={cn(leading && "flex items-start gap-3.5")}>
+            {leading}
+            <div className="min-w-0">
+              <h2 className="text-[1.75rem] leading-none font-black tracking-[-0.045em]">
+                {title}
+              </h2>
+              <p className="mt-1.5 max-w-[34ch] text-sm leading-5 text-muted-foreground">
+                {description}
+              </p>
+            </div>
+          </div>
+        </header>
+        <CardContent className={contentClassName}>
+          <Stagger y={10} stagger={0.05} delay={0.12} selector=":scope > *, :scope > form > *">
+            {children}
+          </Stagger>
+        </CardContent>
+      </Card>
+    </FadeIn>
   );
 }
 
 export function FormError({ message }: { message?: string | null }) {
+  const ref = useShake(message);
+
   if (!message) return null;
 
   return (
     <div
+      ref={ref}
       role="alert"
       className="border-l-4 border-destructive bg-destructive/10 px-3 py-2 text-sm text-destructive"
     >