pages/community.jsx

@@ -2,16 +2,20 @@ import { Button } from "@/components/ui/button";
 import { Card, CardHeader } from "@/components/ui/card";
 import { SiGitlab } from "@icons-pack/react-simple-icons";
 import { useTranslation } from "@/utils/translation";
+import { useState } from "react";
 
 import communityData from "@/data/community";
-import { useCallback, useEffect, useState } from "react";
 
 export default function Community() {
   const { t, lang } = useTranslation();
   const [apps, setApps] = useState(communityData.apps);
 
   const search = q => {
-    setApps(communityData.apps.filter(app => JSON.stringify(app).toLowerCase().includes(q)))
+    setApps(communityData.apps.filter(app => (
+      app.name[lang].toLowerCase().includes(q) ||
+      app.desc[lang].toLowerCase().includes(q) ||
+      app.cat[lang].toLowerCase().includes(q)
+    )))
   }
 
   return (
@@ -22,13 +26,13 @@ export default function Community() {
         </h2>
         <div className="my-12">
           <input type="search"
-            className="bg-background rounded-full border shadow-lg p-3 block mx-auto w-[40rem] max-w-full"
+            className="bg-background rounded-full border shadow-lg px-5 py-3 block mx-auto w-[40rem] max-w-full"
             placeholder={t("community.search")}
             onInput={(e) => search(e.target.value.trim().toLowerCase())} />
         </div>
         <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-6">
           {apps.map(app => (
-            <Card>
+            <Card className="animate-in fade-in zoom-in duration-300">
               <CardHeader>
                 <div className="flex gap-2">
                   <div className="grow space-y-2">

pages/download/index.jsx

@@ -22,7 +22,7 @@ export default function DownloadPage() {
               </div>
               <div className="grow flex flex-wrap max-xl:justify-center gap-4">
                 {category.links.map(link => (
-                  <Card className="p-4 space-y-4">
+                  <Card className="p-4 space-y-4 animate-in fade-in zoom-in duration-300">
                     <Image className="rounded-md border" src={link.img} width={320} height={180} style={{ height: 180 }} />
                     <div className="flex justify-between items-center">
                       <strong>{link.text[lang]}</strong>

pages/features.jsx

@@ -15,7 +15,7 @@ export default function Features() {
         <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
           {
             features.map(({ title, desc, icon: Icon }) => (
-              <Card>
+              <Card className="animate-in fade-in zoom-in duration-300">
                 <CardHeader>
                   <Icon size={72} className="mx-auto mb-4 stroke-muted-foreground" />
                   <CardTitle><h2 className="text-center text-2xl">{title[lang]}</h2></CardTitle>

pages/join.jsx

@@ -6,7 +6,7 @@ import Link from "next/link"
 import { SiBluesky, SiDiscord, SiMastodon, SiTelegram, SiX } from "@icons-pack/react-simple-icons";
 
 const JoinCard = ({ icon: Icon, caption, link, text, url, arrow: Arrow }) => (
-  <Card>
+  <Card className="animate-in fade-in zoom-in duration-300">
     <CardHeader>
       <div className="flex gap-4 justify-between">
         <CardTitle>

pages/team.jsx

@@ -17,7 +17,7 @@ export default function Team() {
         </h2>
         <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
           {team.map(member => (
-            <Card>
+            <Card className="animate-in fade-in zoom-in duration-300">
               <CardHeader>
                 <div className="flex items-center gap-4">
                   <img