feat(pages): add page entry animations for improved UX

Wraps main page content in `motion.div` to introduce smooth fade-in
and subtle scale or vertical slide animations on page load. This
enhances the user experience by providing visual feedback and a more
fluid transition between different sections of the application.

Author: 0xtbug

src/features/about/AboutPage.tsx

@@ -3,6 +3,7 @@
  */
 
 import { useTranslation } from 'react-i18next';
+import { motion } from 'motion/react';
 import { Card } from '@/shared/components/ui/card';
 import { Badge } from '@/shared/components/ui/badge';
 import { Button } from '@/shared/components/ui/button';
@@ -22,7 +23,12 @@ export function AboutPage() {
   };
 
   return (
-    <div className="flex flex-col items-center justify-center min-h-[80vh] space-y-8">
+    <motion.div
+      initial={{ opacity: 0, scale: 0.95 }}
+      animate={{ opacity: 1, scale: 1 }}
+      transition={{ duration: 0.3 }}
+      className="flex flex-col items-center justify-center min-h-[80vh] space-y-8"
+    >
       {/* App Icon & Title */}
       <div className="flex flex-col items-center space-y-4">
         <img
@@ -129,6 +135,6 @@ export function AboutPage() {
       <p className="text-xs text-muted-foreground/50">
         {t('about.copyright')}
       </p>
-    </div>
+    </motion.div>
   );
 }

src/features/auth/LoginPage.tsx

@@ -4,6 +4,7 @@
 
 import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
+import { motion } from 'motion/react';
 import { useAuthStore } from '@/features/auth/auth.store';
 import { useCliProxyStore } from '@/features/settings/cliProxy.store';
 import { Button } from '@/shared/components/ui/button';
@@ -55,7 +56,12 @@ export function LoginPage() {
   };
 
   return (
-    <div className="flex min-h-screen items-center justify-center bg-background p-4">
+    <motion.div
+      initial={{ opacity: 0, scale: 0.95 }}
+      animate={{ opacity: 1, scale: 1 }}
+      transition={{ duration: 0.3 }}
+      className="flex min-h-screen items-center justify-center bg-background p-4"
+    >
       <Card className="w-full max-w-md">
         <CardHeader className="space-y-1 text-center">
           <div className="mb-4 flex justify-center">
@@ -204,6 +210,6 @@ export function LoginPage() {
           </form>
         </CardContent>
       </Card>
-    </div>
+    </motion.div>
   );
 }

src/features/dashboard/DashboardPage.tsx

@@ -1,4 +1,5 @@
 import { useTranslation } from 'react-i18next';
+import { motion } from 'motion/react';
 import { Card, CardContent, CardHeader, CardTitle } from '@/shared/components/ui/card';
 import { Button } from '@/shared/components/ui/button';
 import {
@@ -59,7 +60,12 @@ export function DashboardPage() {
   } = useDashboardPresenter();
 
   return (
-    <div className="space-y-6 animate-fade-in p-2">
+    <motion.div
+      initial={{ opacity: 0, y: 20 }}
+      animate={{ opacity: 1, y: 0 }}
+      transition={{ duration: 0.4 }}
+      className="space-y-6 p-2"
+    >
       {/* Header Section */}
       <div className="flex items-center justify-between mb-6">
         <div className="flex flex-col gap-1">
@@ -697,6 +703,6 @@ export function DashboardPage() {
             </>
           )}
         </div>
-    </div>
+    </motion.div>
   );
 }

src/features/providers/ProvidersPage.tsx

@@ -1,4 +1,5 @@
 import { useTranslation } from 'react-i18next';
+import { motion } from 'motion/react';
 import { PROVIDERS } from '@/constants';
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/shared/components/ui/card';
 import { Button } from '@/shared/components/ui/button';
@@ -94,7 +95,12 @@ export function ProvidersPage() {
 
   if (!isAuthenticated) {
      return (
-      <div className="space-y-6">
+      <motion.div
+        initial={{ opacity: 0, y: 20 }}
+        animate={{ opacity: 1, y: 0 }}
+        transition={{ duration: 0.4 }}
+        className="space-y-6"
+      >
         <div>
           <h1 className="text-3xl font-bold">{t('providers.title', 'Providers')}</h1>
         </div>
@@ -104,12 +110,17 @@ export function ProvidersPage() {
             <p className="text-muted-foreground">{t('providers.connectPrompt')}</p>
           </CardContent>
         </Card>
-      </div>
+      </motion.div>
     );
   }
 
   return (
-    <div className="space-y-8">
+    <motion.div
+      initial={{ opacity: 0, y: 20 }}
+      animate={{ opacity: 1, y: 0 }}
+      transition={{ duration: 0.4 }}
+      className="space-y-8"
+    >
         <AlertDialog open={!!fileToDelete} onOpenChange={(open) => !open && setFileToDelete(null)}>
         <AlertDialogContent className="border-border/50">
           <AlertDialogHeader>
@@ -590,6 +601,6 @@ export function ProvidersPage() {
           </DialogFooter>
         </DialogContent>
       </Dialog>
-    </div>
+    </motion.div>
   );
 }

src/features/quota/QuotaPage.tsx

@@ -1,4 +1,5 @@
 import { useTranslation } from 'react-i18next';
+import { motion } from 'motion/react';
 import { Card, CardContent } from '@/shared/components/ui/card';
 import { Button } from '@/shared/components/ui/button';
 import { RefreshCw, AlertCircle, Loader2, LayoutGrid, List, Eye, EyeOff } from 'lucide-react';
@@ -28,7 +29,12 @@ export function QuotaPage() {
 
   if (!isAuthenticated) {
     return (
-      <div className="space-y-6">
+      <motion.div
+        initial={{ opacity: 0, y: 20 }}
+        animate={{ opacity: 1, y: 0 }}
+        transition={{ duration: 0.4 }}
+        className="space-y-6"
+      >
         <div>
           <h1 className="text-3xl font-bold">{t('quota.title')}</h1>
         </div>
@@ -38,12 +44,17 @@ export function QuotaPage() {
             <p className="text-muted-foreground">{t('quota.connectPrompt')}</p>
           </CardContent>
         </Card>
-      </div>
+      </motion.div>
     );
   }
 
   return (
-    <div className="space-y-6">
+    <motion.div
+      initial={{ opacity: 0, y: 20 }}
+      animate={{ opacity: 1, y: 0 }}
+      transition={{ duration: 0.4 }}
+      className="space-y-6"
+    >
       {/* Header & Refresh */}
       <div className="flex items-center justify-between">
         <div>
@@ -165,6 +176,6 @@ export function QuotaPage() {
           })}
         </div>
       )}
-    </div>
+    </motion.div>
   );
 }

src/features/settings/SettingsPage.tsx

@@ -4,6 +4,7 @@
 
 import { useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
+import { motion } from 'motion/react';
 import { useThemeStore } from '@/features/settings/theme.store';
 import { useLanguageStore } from '@/features/settings/language.store';
 import { useAuthStore } from '@/features/auth/auth.store';
@@ -80,7 +81,12 @@ export function SettingsPage() {
   ] as const;
 
   return (
-    <div className="space-y-6">
+    <motion.div
+      initial={{ opacity: 0, y: 20 }}
+      animate={{ opacity: 1, y: 0 }}
+      transition={{ duration: 0.4 }}
+      className="space-y-6"
+    >
       <div>
         <h1 className="text-3xl font-bold">{t('settings.title')}</h1>
       </div>
@@ -399,6 +405,6 @@ export function SettingsPage() {
           </Button>
         </CardContent>
       </Card>
-    </div>
+    </motion.div>
   );
 }