✨ feat: Update dependencies and add Lottie animation effect to about page.

web/package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "telegram-files-web",
-  "version": "0.2.0",
+  "version": "0.1.4",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "telegram-files-web",
-      "version": "0.2.0",
+      "version": "0.1.4",
       "dependencies": {
         "@dnd-kit/core": "^6.2.0",
         "@dnd-kit/modifiers": "^8.0.0",
@@ -32,6 +32,7 @@
         "framer-motion": "^11.15.0",
         "geist": "^1.3.0",
         "input-otp": "^1.4.1",
+        "lottie-react": "^2.4.0",
         "lucide-react": "^0.462.0",
         "next": "^15.0.1",
         "pretty-bytes": "^6.1.1",
@@ -5082,6 +5083,23 @@
         "loose-envify": "cli.js"
       }
     },
+    "node_modules/lottie-react": {
+      "version": "2.4.0",
+      "resolved": "https://registry.npmjs.org/lottie-react/-/lottie-react-2.4.0.tgz",
+      "integrity": "sha512-pDJGj+AQlnlyHvOHFK7vLdsDcvbuqvwPZdMlJ360wrzGFurXeKPr8SiRCjLf3LrNYKANQtSsh5dz9UYQHuqx4w==",
+      "dependencies": {
+        "lottie-web": "^5.10.2"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
+    "node_modules/lottie-web": {
+      "version": "5.12.2",
+      "resolved": "https://registry.npmjs.org/lottie-web/-/lottie-web-5.12.2.tgz",
+      "integrity": "sha512-uvhvYPC8kGPjXT3MyKMrL3JitEAmDMp30lVkuq/590Mw9ok6pWcFCwXJveo0t5uqYw1UREQHofD+jVpdjBv8wg=="
+    },
     "node_modules/lru-cache": {
       "version": "10.4.3",
       "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-10.4.3.tgz",
@@ -10391,6 +10409,19 @@
         "js-tokens": "^3.0.0 || ^4.0.0"
       }
     },
+    "lottie-react": {
+      "version": "2.4.0",
+      "resolved": "https://registry.npmjs.org/lottie-react/-/lottie-react-2.4.0.tgz",
+      "integrity": "sha512-pDJGj+AQlnlyHvOHFK7vLdsDcvbuqvwPZdMlJ360wrzGFurXeKPr8SiRCjLf3LrNYKANQtSsh5dz9UYQHuqx4w==",
+      "requires": {
+        "lottie-web": "^5.10.2"
+      }
+    },
+    "lottie-web": {
+      "version": "5.12.2",
+      "resolved": "https://registry.npmjs.org/lottie-web/-/lottie-web-5.12.2.tgz",
+      "integrity": "sha512-uvhvYPC8kGPjXT3MyKMrL3JitEAmDMp30lVkuq/590Mw9ok6pWcFCwXJveo0t5uqYw1UREQHofD+jVpdjBv8wg=="
+    },
     "lru-cache": {
       "version": "10.4.3",
       "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-10.4.3.tgz",

web/package.json

@@ -40,6 +40,7 @@
     "framer-motion": "^11.15.0",
     "geist": "^1.3.0",
     "input-otp": "^1.4.1",
+    "lottie-react": "^2.4.0",
     "lucide-react": "^0.462.0",
     "next": "^15.0.1",
     "pretty-bytes": "^6.1.1",

web/src/components/about.tsx

@@ -10,6 +10,8 @@ import {
 } from "@/components/ui/card";
 import { request } from "@/lib/api";
 import Link from "next/link";
+import Lottie from "lottie-react";
+import TGDuck16HeyOut from "@/components/animations/tg-duck16_hey_out.json";
 
 interface VersionData {
   version: string;
@@ -44,7 +46,7 @@ export default function About() {
     githubData && githubData.tag_name !== currentVersion;
 
   return (
-    <div className="flex h-full items-center justify-center">
+    <div className="flex justify-center md:items-center md:h-full">
       <Card className="w-full bg-[radial-gradient(ellipse_at_bottom_left,_var(--tw-gradient-stops))] from-[#7900ff] via-[#548cff] to-[#93ffd8] md:w-1/2">
         <CardHeader>
           <CardTitle className="text-white">About This Project</CardTitle>
@@ -52,7 +54,8 @@ export default function About() {
             A simple telegram file downloader.
           </CardDescription>
         </CardHeader>
-        <CardContent>
+        <CardContent className="relative">
+          <Lottie className="absolute bottom-3 right-3 w-28 h-28" animationData={TGDuck16HeyOut} loop={true} />
           <div className="space-y-4">
             <div className="flex flex-col items-center justify-center">
               <p className="text-sm font-medium text-white">Author</p>