Enhancements to UI Components and Team Member Layout

components/ui/card.jsx

@@ -1,11 +1,10 @@
 import * as React from "react"
-
 import { cn } from "@/lib/utils"
 
 const Card = React.forwardRef(({ className, ...props }, ref) => (
   <div
     ref={ref}
-    className={cn("rounded-xl border bg-card text-card-foreground shadow", className)}
+    className={cn("rounded-xl border bg-card text-card-foreground shadow transition-transform duration-300 hover:shadow-lg hover:scale-105", className)}
     {...props} />
 ))
 Card.displayName = "Card"

data/team.js

@@ -50,61 +50,62 @@ const teamData = [
   },
   {
     "name": {
-      en: "AhmadReza Khatamian",
-      fa: "احمدرضا خاتمیان"
+      en: "Erfan Arabi",
+      fa: "عرفان عربی"
     },
     "stack": {
-      en: "Graphic Designer",
-      fa: "طراح گرافیک"
+      en: "Team Leader",
+      fa: "راهبر تیم"
     },
-    "image": "https://avatars.githubusercontent.com/ahmadreza3",
+    "image": "https://avatars.githubusercontent.com/ERFouX",
     "socials": {
-      "github": "https://github.com/ahmadreza3",
-      "mastodon": "https://mas.to/@ahmad00000"
+      "github": "https://github.com/ERFouX",
+      "mastodon": "https://mas.to/@ERFouX",
+      "donate": "https://daramet.com/ERFouX"
     }
   },
   {
     "name": {
-      en: "Pourya Barkati",
-      fa: "پوریا برکتی"
+      en: "Pouya Madankar",
+      fa: "پویا مدنکار"
     },
     "stack": {
-      en: "Rust Developer",
-      fa: "توسعه‌دهنده راست"
+      en: "Frontend Developer",
+      fa: "توسعه‌دهنده فرانت‌اند"
     },
-    "image": "https://avatars.githubusercontent.com/BrPrS",
+    "image": "https://avatars.githubusercontent.com/pouyaMK",
     "socials": {
-      "github": "https://github.com/BrPrS",
-      "donate": "https://daramet.com/prbarkati"
+      "github": "https://github.com/pouyaMK"
     }
   },
   {
     "name": {
-      en: "Pouya Madankar",
-      fa: "پویا مدنکار"
+      en: "AhmadReza Khatamian",
+      fa: "احمدرضا خاتمیان"
     },
     "stack": {
-      en: "Frontend Developer",
-      fa: "توسعه‌دهنده فرانت‌اند"
+      en: "Graphic Designer",
+      fa: "طراح گرافیک"
     },
-    "image": "https://avatars.githubusercontent.com/pouyaMK",
+    "image": "https://avatars.githubusercontent.com/ahmadreza3",
     "socials": {
-      "github": "https://github.com/pouyaMK"
+      "github": "https://github.com/ahmadreza3",
+      "mastodon": "https://mas.to/@ahmad00000"
     }
   },
   {
     "name": {
-      en: "Mostafa Aminzar",
-      fa: "مصطفی امین‌زار"
+      en: "Pourya Barkati",
+      fa: "پوریا برکتی"
     },
     "stack": {
-      en: "UI/UX Designer",
-      fa: "طراح UI/UX"
+      en: "Rust Developer",
+      fa: "توسعه‌دهنده راست"
     },
-    "image": "https://avatars.githubusercontent.com/MosiO1998",
+    "image": "https://avatars.githubusercontent.com/BrPrS",
     "socials": {
-      "github": "https://github.com/MosiO1998",
-      "donate": "https://daramet.com/mosio"
+      "github": "https://github.com/BrPrS",
+      "donate": "https://daramet.com/prbarkati"
     }
   },
   {
@@ -124,34 +125,17 @@ const teamData = [
   },
   {
     "name": {
-      en: "Ali Almasi",
-      fa: "علی الماسی"
-    },
-    "stack": {
-      en: "Web Developer",
-      fa: "توسعه‌دهنده وب"
-    },
-    "image": "https://avatars.githubusercontent.com/AliAlmasi",
-    "socials": {
-      "github": "https://github.com/AliAlmasi",
-      "donate": "https://daramet.com/alialmasi",
-      "mastodon": "https://ieji.de/@almasi"
-    }
-  },
-  {
-    "name": {
-      en: "Erfan Arabi",
-      fa: "عرفان عربی"
+      en: "Mostafa Aminzar",
+      fa: "مصطفی امین‌زار"
     },
     "stack": {
-      en: "Contributer",
-      fa: "مشارکت کننده"
+      en: "UI/UX Designer",
+      fa: "طراح UI/UX"
     },
-    "image": "https://avatars.githubusercontent.com/ERFouX",
+    "image": "https://avatars.githubusercontent.com/MosiO1998",
     "socials": {
-      "github": "https://github.com/ERFouX",
-      "mastodon": "https://mas.to/@ERFouX",
-      "donate": "https://daramet.com/ERFouX"
+      "github": "https://github.com/MosiO1998",
+      "donate": "https://daramet.com/mosio"
     }
   },
   {
@@ -172,17 +156,18 @@ const teamData = [
   },
   {
     "name": {
-      en: "Mahdi Gholamhosseini",
-      fa: "مهدی غلام‌حسینی"
+      en: "Ali Almasi",
+      fa: "علی الماسی"
     },
     "stack": {
       en: "Web Developer",
       fa: "توسعه‌دهنده وب"
     },
-    "image": "https://avatars.githubusercontent.com/m6hdix",
+    "image": "https://avatars.githubusercontent.com/AliAlmasi",
     "socials": {
-      "github": "https://github.com/m6hdix",
-      "donate": "https://daramet.com/m6hdix"
+      "github": "https://github.com/AliAlmasi",
+      "donate": "https://daramet.com/alialmasi",
+      "mastodon": "https://ieji.de/@almasi"
     }
   },
   {
@@ -215,6 +200,21 @@ const teamData = [
       "twitter": "https://x.com/Bravemobin/",
       "donate": "https://daramet.com/bravemobin/"
     }
+  },
+  {
+    "name": {
+      en: "Mahdi Gholamhosseini",
+      fa: "مهدی غلام‌حسینی"
+    },
+    "stack": {
+      en: "Web Developer",
+      fa: "توسعه‌دهنده وب"
+    },
+    "image": "https://avatars.githubusercontent.com/m6hdix",
+    "socials": {
+      "github": "https://github.com/m6hdix",
+      "donate": "https://daramet.com/m6hdix"
+    }
   }
 ]
 

pages/join.jsx

@@ -1,31 +1,32 @@
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
 import { useTranslation } from "@/utils/translation"
 import { Users, Book, MessageCircle, Code, ArrowLeftCircle, ArrowRightCircle } from 'lucide-react'
-import { Button } from "@/components/ui/button"
 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 className="animate-in fade-in zoom-in duration-300">
-    <CardHeader>
-      <div className="flex gap-4 justify-between">
-        <CardTitle>
-          <Icon className="h-6 w-6 inline-block align-middle me-2" />
-          {caption}
-        </CardTitle>
-        <Button asChild variant="outline" className="rounded-full">
-          <Link href={url}>{link} <Arrow size={16} /></Link>
-        </Button>
-      </div>
-    </CardHeader>
-    <CardContent>{text}</CardContent>
-  </Card>
+  <Link href={url} className="block">
+    <Card className="animate-in fade-in zoom-in duration-300 cursor-pointer">
+      <CardHeader>
+        <div className="flex gap-4 justify-between">
+          <CardTitle>
+            <Icon className="h-6 w-6 inline-block align-middle me-2" />
+            {caption}
+          </CardTitle>
+          <div className="flex items-center">
+            <span>{link}</span>
+            <Arrow size={16} className="ml-2" />
+          </div>
+        </div>
+      </CardHeader>
+      <CardContent>{text}</CardContent>
+    </Card>
+  </Link>
 )
 
 export default function Join() {
   const { t, lang } = useTranslation();
 
-  const arrow = lang == 'fa' ? ArrowLeftCircle : ArrowRightCircle
+  const arrow = lang === 'fa' ? ArrowLeftCircle : ArrowRightCircle
 
   return (
     <main className="py-12 md:py-24 lg:py-32">