parchlinux · behdanisohrab · Dec 3, 2024 · Dec 3, 2024 · Dec 3, 2024 · Dec 3, 2024
diff --git a/Dockerfile b/Dockerfile
diff --git a/components/Footer.jsx b/components/Footer.jsx
@@ -13,6 +13,7 @@ export function Footer() {
             <Link href="/features">{t('navigation.features')}</Link>
             <Link href="/download">{t('navigation.download')}</Link>
             <Link href="/community">{t('navigation.community')}</Link>
+            <Link href="/join">{t('navigation.join')}</Link>
             <Link href="https://blog.parchlinux.com">{t('navigation.blog')}</Link>
             <Link href="/team">{t('navigation.team')}</Link>
             <Link href="/privacy">{t('footer.privacyPolicy')}</Link>

diff --git a/components/Navbar.jsx b/components/Navbar.jsx
@@ -9,12 +9,10 @@ export function Navbar() {
   return (
     <header className="sticky top-0 z-50 w-full border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
       <div className="mx-auto container px-4 flex h-14 items-center">
-        <div className="me-4 flex gap-2">
+        <Link href="/" className="sm:me-6 flex items-center gap-2">
           <Image src="/parch.svg" alt="Parch Logo" width={32} height={32} />
-          <Link href="/" className="me-6 flex items-center gap-2">
-            <span className="hidden font-bold sm:inline-block">{t('home.title')}</span>
-          </Link>
-        </div>
+          <span className="font-bold">{t('home.title')}</span>
+        </Link>
         <nav className="hidden md:flex items-center gap-6 text-sm font-medium">
           <Link href="/features">{t('navigation.features')}</Link>
           <Link href="/download">{t('navigation.download')}</Link>

diff --git a/data/community.js b/data/community.js
@@ -0,0 +1,58 @@
+const category = {
+  develop: {
+    en: 'Develop',
+    fa: 'توسعه'
+  },
+  communication: {
+    en: 'Communication',
+    fa: 'ارتباطات'
+  },
+  multimedia: {
+    en: 'Multimedia',
+    fa: 'چندرسانه‌ای'
+  },
+}
+
+const communityData = {
+  categories: Object.values(category),
+  apps: [
+    {
+      name: {
+        en: 'Neovim',
+        fa: 'نئوویم',
+      },
+      desc: {
+        en: 'Powerful and extendable text editor',
+        fa: 'ویرایشگر متن قدرتمند و قابل تمدید',
+      },
+      cat: category.develop,
+      href: '#'
+    },
+    {
+      name: {
+        en: 'Discord',
+        fa: 'دیسکورد',
+      },
+      desc: {
+        en: 'Voice & text chat application',
+        fa: 'اپلیکیشن چت صوتی و متنی',
+      },
+      cat: category.communication,
+      href: '#'
+    },
+    {
+      name: {
+        en: 'OBS Studio',
+        fa: 'OBS استودیو',
+      },
+      desc: {
+        en: 'Screen recorder and streaming software',
+        fa: 'نرم‌افزار ضبط صفحه نمایش و پخش زنده',
+      },
+      cat: category.multimedia,
+      href: '#'
+    },
+  ]
+}
+
+export default communityData;
diff --git a/i18n/en.js b/i18n/en.js
@@ -17,6 +17,7 @@ export default {
   navigation: {
     blog: 'Blog',
     community: 'Community',
+    join: 'Join',
     download: 'Download',
     features: 'Features',
     team: 'Team',
@@ -34,6 +35,11 @@ export default {
   },
 
   community: {
+    title: 'Parch Linux Community Software',
+    search: 'Search apps...'
+  },
+
+  join: {
     title: 'Join Our Community',
     caption: {
       forum: 'Forums',

diff --git a/i18n/fa.js b/i18n/fa.js
@@ -17,6 +17,7 @@ export default {
   navigation: {
     blog: 'بلاگ',
     community: 'جامعه',
+    join: 'پیوستن',
     download: 'دانلود',
     features: 'امکانات',
     team: 'تیم',
@@ -34,6 +35,12 @@ export default {
   },
 
   community: {
+    title: 'برنامه‌های جامعه پارچ لینوکس',
+    search: 'جستجوی برنامه‌ها...'
+  },
+
+
+  join: {
     title: 'به جامعهٔ ما بپیوندید',
     caption: {
       forum: 'فروم',

diff --git a/pages/community.jsx b/pages/community.jsx
@@ -1,65 +1,56 @@
-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";
+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";
 
-const CommunityCard = ({ icon: Icon, caption, link, text, url, arrow: Arrow }) => (
-  <Card>
-    <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>
-)
+import communityData from "@/data/community";
 
 export default function Community() {
   const { t, lang } = useTranslation();
+  const [apps, setApps] = useState(communityData.apps);
 
-  const arrow = lang == 'fa' ? ArrowLeftCircle : ArrowRightCircle
+  const search = 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 (
     <main className="py-12 md:py-24 lg:py-32">
       <div className="container mx-auto px-4 md:px-6">
-        <h2 className="text-3xl font-bold sm:text-4xl md:text-5xl text-center mb-8">{t('community.title')}</h2>
-        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
-          <CommunityCard
-            icon={Users}
-            caption={t('community.caption.forum')}
-            url="https://forum.parchlinux.com"
-            link={t('community.link.forum')}
-            text={t('community.text.forum')}
-            arrow={arrow} />
-          <CommunityCard
-            icon={Book}
-            caption={t('community.caption.wiki')}
-            url="https://wiki.parchlinux.com"
-            link={t('community.link.wiki')}
-            text={t('community.text.wiki')}
-            arrow={arrow} />
-          <CommunityCard
-            icon={MessageCircle}
-            caption={t('community.caption.chat')}
-            url="https://matrix.to/#/%23parch:bsd.cafe"
-            link={t('community.link.chat')}
-            text={t('community.text.chat')}
-            arrow={arrow} />
-          <CommunityCard
-            icon={Code}
-            caption={t('community.caption.contrib')}
-            url="https://git.parchlinux.com"
-            link={t('community.link.contrib')}
-            text={t('community.text.contrib')}
-            arrow={arrow} />
+        <h2 className="text-3xl font-bold sm:text-4xl md:text-5xl text-center mb-8">
+          {t("community.title")}
+        </h2>
+        <div className="my-12">
+          <input type="search"
+            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 className="animate-in fade-in zoom-in duration-300">
+              <CardHeader>
+                <div className="flex gap-2">
+                  <div className="grow space-y-2">
+                    <h3 className="text-lg font-bold">{app.name[lang]}</h3>
+                    <p className="text-sm text-muted-foreground mt-2">{app.desc[lang]}</p>
+                    <p className="">{app.cat[lang]}</p>
+                  </div>
+                  <div className="shrink-0">
+                    <Button variant="outline" size="icon" asChild>
+                      <a href={app.href} target="_blank">
+                        <SiGitlab className="h-4 w-4" />
+                      </a>
+                    </Button>
+                  </div>
+                </div>
+              </CardHeader>
+            </Card>
+          ))}
         </div>
       </div>
     </main>

diff --git a/pages/download/index.jsx b/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>

diff --git a/pages/features.jsx b/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>

diff --git a/pages/join.jsx b/pages/join.jsx
@@ -0,0 +1,67 @@
+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>
+)
+
+export default function Join() {
+  const { t, lang } = useTranslation();
+
+  const arrow = lang == 'fa' ? ArrowLeftCircle : ArrowRightCircle
+
+  return (
+    <main className="py-12 md:py-24 lg:py-32">
+      <div className="container mx-auto px-4 md:px-6">
+        <h2 className="text-3xl font-bold sm:text-4xl md:text-5xl text-center mb-8">{t('join.title')}</h2>
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+          <JoinCard
+            icon={Users}
+            caption={t('join.caption.forum')}
+            url="#"
+            link={t('join.link.forum')}
+            text={t('join.text.forum')}
+            arrow={arrow} />
+          <JoinCard
+            icon={Book}
+            caption={t('join.caption.wiki')}
+            url="#"
+            link={t('join.link.wiki')}
+            text={t('join.text.wiki')}
+            arrow={arrow} />
+          <JoinCard
+            icon={MessageCircle}
+            caption={t('join.caption.chat')}
+            url="#"
+            link={t('join.link.chat')}
+            text={t('join.text.chat')}
+            arrow={arrow} />
+          <JoinCard
+            icon={Code}
+            caption={t('join.caption.contrib')}
+            url="#"
+            link={t('join.link.contrib')}
+            text={t('join.text.contrib')}
+            arrow={arrow} />
+        </div>
+      </div>
+    </main>
+  )
+}
diff --git a/pages/team.jsx b/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