feat: add /topics and /topics/[slug] pages

public/locales/en/translation.json

@@ -37,12 +37,19 @@
       }
     },
     "flutterCafe": [],
-    "staffSection": {
+    "membersSection": {
       "title": "Active members of the Persian Flutter community",
       "description": "In this section, you will get to know the individuals who are the driving force behind the Persian Flutter community with their efforts and enthusiasm. These active members, with various specialties, play key roles in advancing our community's goals and growth. From managing social media to organizing events, each of these individuals has an important role in the dynamism and progress of the Persian Flutter ecosystem.",
       "descriptionShort": "In this section, you will get to know the individuals who are the driving force behind the Persian Flutter community with their efforts and enthusiasm. These active members, with various specialties, play key roles in advancing our community's goals and growth.",
       "viewButton": "View All"
     },
+    "topicsSection": {
+      "title": "Persian Flutter Topics",
+      "membersTitle": "Members of the Persian Flutter Topic",
+      "description": "On this page, you can view the complete list of topics and their related subcategories. This page allows you to easily explore the subjects and quickly access your desired topics.",
+      "descriptionShort": "On this page, you can view the complete list of topics and their related subcategories. This page allows you to easily explore the subjects and quickly access your desired topics.",
+      "viewButton": "View All"
+    },
     "comments": [],
     "donation": {
       "title": {

public/locales/fa/translation.json

@@ -37,12 +37,19 @@
       }
     },
     "flutterCafe": [],
-    "staffSection": {
+    "membersSection": {
       "title": "اعضای فعال جامعه فلاتر فارسی",
       "description": " در این بخش با افرادی آشنا می‌شوید که با تلاش و اشتیاق خود، موتور محرکه جامعه فلاتر فارسی هستند. این اعضای فعال با تخصص‌های گوناگون، نقش‌های کلیدی در پیشبرد اهداف و رشد جامعه ما ایفا می‌کنند. از مدیریت رسانه‌های اجتماعی تا برگزاری رویدادها، هر یک از این افراد سهم مهمی در پویایی و پیشرفت اکوسیستم فلاتر فارسی دارند. ",
       "descriptionShort": " در این بخش با افرادی آشنا می‌شوید که با تلاش و اشتیاق خود، موتور محرکه جامعه فلاتر فارسی هستند. این اعضای فعال با تخصص‌های گوناگون، نقش‌های کلیدی در پیشبرد اهداف و رشد جامعه ما ایفا می‌کنند. ",
       "viewButton": "مشاهده همه"
     },
+    "topicsSection": {
+      "title": "تاپیک‌های فلاتر فارسی",
+      "membersTitle": "اعضای تاپیک فلاتر فارسی",
+      "description": "در این صفحه، می‌توانید لیست کامل تاپیک‌ها و زیرمجموعه‌های مرتبط با آن‌ها را مشاهده نمایید. این صفحه به شما امکان می‌دهد تا به راحتی موضوعات را بررسی و به سرعت به تاپیک‌های مورد نظر خود دسترسی داشته باشید.",
+      "descriptionShort": "در این صفحه، می‌توانید لیست کامل تاپیک‌ها و زیرمجموعه‌های مرتبط با آن‌ها را مشاهده نمایید. این صفحه به شما امکان می‌دهد تا به راحتی موضوعات را بررسی و به سرعت به تاپیک‌های مورد نظر خود دسترسی داشته باشید.",
+      "viewButton": "مشاهده همه"
+    },
     "comments": [],
     "donation": {
       "title": {

src/components/topic/TopicCard.astro

@@ -1,6 +1,7 @@
 ---
 import { getRelativeLocaleUrl } from 'astro:i18n';
 import type { CollectionEntry } from 'astro:content';
+import { Image } from 'astro:assets';
 
 interface Props {
   topic: CollectionEntry<'topic'>;
@@ -12,23 +13,32 @@ const { topic, class: className = '' } = Astro.props;
 function getTopicUrl(topicSlug: string) {
   const [lang, ...slugParts] = topicSlug.split('/');
   const baseSlug = slugParts.join('/');
-  return getRelativeLocaleUrl(lang, `topic/${baseSlug}`);
+  return getRelativeLocaleUrl(lang, `topics/${baseSlug}`);
 }
 
 const topicUrl = getTopicUrl(topic.slug);
+const data = topic.data;
 ---
 
 <article
   class:list={[
-    'mb-6 transition hover:shadow-lg p-6 rounded-lg border border-gray-200 dark:border-gray-700 cursor-pointer',
+    'flex flex-col w-full gap-5 transition hover:shadow-lg shadow-black dark:shadow-white/10 hover:bg-pfColorFirst/5 rounded-3xl p-6 cursor-pointer group',
     className,
   ]}
   onclick={`window.location.href='${topicUrl}'`}
 >
-  <h3 class="mb-4 text-xl font-bold leading-tight sm:text-2xl">
-    <a href={topicUrl} class="hover:text-primary dark:hover:text-blue-400 block">
-      {topic.data.title}
-    </a>
+  <Image
+    class="w-full h-full object-cover border-4 border-white rounded-3xl overflow-hidden shadow-lg"
+    src={data.image}
+    alt={data.title}
+    width={400}
+    height={400}
+    format="webp"
+  />
+  <h3 class="flex items-center gap-3 my-1 text-pfColorSecond text-xl font-bold leading-tight">
+    <div class="size-2 bg-pfColorSecond dark:bg-slate-400 rounded-full"></div>
+    <a href={topicUrl} class="group-hover:text-primary dark:group-hover:text-blue-400 block">{topic.data.title}</a>
+    <div class="w-[80px] h-1 bg-slate-200 rounded-full dark:bg-slate-500"></div>
   </h3>
-  <p class="text-gray-700 dark:text-gray-300 text-lg mb-4">{topic.data.description}</p>
+  <p class="line-clamp-4 text-gray-700 dark:text-gray-300 text-lg">{topic.data.description}</p>
 </article>

src/components/widgets/StaffSection.astro

@@ -6,11 +6,26 @@ import SectionTitle from './SectionTitle.astro';
 import StaffCard from './StaffCard.astro';
 import i18n from '~/utils/i18n';
 import { getCollection } from 'astro:content';
+import { twMerge } from 'tailwind-merge';
 
-const { id, isDark = false, classes = {} } = Astro.props;
+interface Props {
+  id?: string;
+  isDark?: boolean;
+  classes?: { container?: string };
+  inTopics?: boolean;
+}
+const { id, isDark = false, classes = {}, inTopics = false } = Astro.props as Props;
+const { slug } = Astro.params;
 const currentLocale = Astro.currentLocale!;
 const members = await getCollection('member');
-const effectiveMembers = members.filter(({ slug }) => slug.startsWith(currentLocale));
+
+const defaultMembers = members.filter(({ slug }) => slug.startsWith(currentLocale));
+
+const membersInTopics = members
+  .filter(({ slug }) => slug.startsWith(currentLocale))
+  .filter((member) => member.data.topics.some((topic) => topic.slug === `${currentLocale}/${slug}`));
+
+const effectiveMembers = inTopics ? membersInTopics : defaultMembers;
 
 i18n.setLang(currentLocale);
 const translations = i18n.t();
@@ -25,32 +40,41 @@ const translations = i18n.t();
     {background && <ParallaxSection imageSrc={background} altText="Alt" />}
   </div>
 
-  <div class="mx-auto max-w-[1320px] px-4 py-8 md:py-12 lg:py-16">
+  <div
+    class={twMerge(
+      'mx-auto max-w-[1320px] px-4 py-8 md:py-12 lg:py-16',
+      inTopics && 'px-12 lg:px-32 max-w-full w-full'
+    )}
+  >
     <div class="flex flex-col justify-center items-center gap-8 md:gap-12 lg:gap-12">
       <!-- box content -->
       <SectionTitle
-        title={translations.home.staffSection.title}
-        description={translations.home.staffSection.description}
+        title={inTopics ? translations.home.topicsSection.membersTitle : translations.home.membersSection.title}
+        description={inTopics ? '' : translations.home.membersSection.description}
       />
 
       <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 justify-center gap-8">
         {effectiveMembers.map((member) => <StaffCard bg="bg-white" member={member} />)}
       </div>
 
-      <a
-        href="/team"
-        class="inline-flex items-center justify-center px-10 py-3 text-lg font-normal
+      {
+        !inTopics && (
+          <a
+            href="/members"
+            class="inline-flex items-center justify-center px-10 py-3 text-lg font-normal
         transition-colors duration-200 rounded-full
         border border-pfColorThird text-pfColorThird
         hover:bg-pfColorThird hover:text-white
         dark:border-pfColorFourth dark:text-pfColorFourth
         dark:hover:bg-pfColorFourth dark:hover:text-white
         cursor-pointer"
-        rel="noopener"
-        aria-label="View All"
-      >
-        {translations.home.staffSection.viewButton}
-      </a>
+            rel="noopener"
+            aria-label="View All"
+          >
+            {translations.home.membersSection.viewButton}
+          </a>
+        )
+      }
     </div>
   </div>
 </WidgetWrapper>

src/components/widgets/TopicProse.astro

@@ -0,0 +1,16 @@
+---
+
+---
+
+<div
+  class="prose
+  prose-h1:font-bold prose-h1:text-lg prose-h1:text-pfColorFirst
+  prose-h2:font-bold prose-h2:text-lg prose-h2:text-pfColorFirst
+  prose-h3:font-bold prose-h3:text-lg prose-h3:text-pfColorFirst
+  prose-h4:font-bold prose-h4:text-lg prose-h4:text-pfColorFirst
+  prose-p:my-0 prose-p:leading-loose
+  prose-li:my-1
+  max-w-[80vw] flex flex-col text-slate-700 dark:text-slate-400 mb-12 sm:mt-8"
+>
+  <slot />
+</div>

src/content/config.ts

@@ -64,11 +64,13 @@ const postCollection = defineCollection({
 });
 const topicCollection = defineCollection({
   type: 'content',
-  schema: z.object({
-    title: z.string(),
-    description: z.string().max(500, { message: 'Description must be 500 characters or less' }),
-    metadata: metadataDefinition(),
-  }),
+  schema: ({ image }) =>
+    z.object({
+      title: z.string(),
+      description: z.string().max(500, { message: 'Description must be 500 characters or less' }),
+      image: image(),
+      metadata: metadataDefinition(),
+    }),
 });
 
 const memberCollection = defineCollection({

src/content/topic/en/open-source.md

@@ -1,6 +1,7 @@
 ---
 title: 'Open Source Projects'
 description: 'At Persian Flutter, we wholeheartedly believe in open source! Open source projects aren’t just lines of code—they’re a driving force for community growth and recognition. Here, we come together to build high-quality projects that benefit everyone. That means learning, collaboration, and progress—all in one place!'
+image: './../images/open-source.png'
 ---
 
 ## What We’ve Gained, What We Can Share

src/content/topic/en/open-source1.md

@@ -0,0 +1,32 @@
+---
+title: 'Open Source Projects'
+description: 'At Persian Flutter, we wholeheartedly believe in open source! Open source projects aren’t just lines of code—they’re a driving force for community growth and recognition. Here, we come together to build high-quality projects that benefit everyone. That means learning, collaboration, and progress—all in one place!'
+image: './../images/open-source.png'
+---
+
+## What We’ve Gained, What We Can Share
+
+Throughout our professional journeys, we’ve all benefited from free resources and open source projects—learning from them and growing along the way. Maybe it’s time each of us contributed back, in our own unique way, to keep this culture thriving and available to everyone.
+
+## Persian Flutter’s Role in Open Source
+
+In the Persian Flutter community, we put great emphasis on open source projects and resources. We believe that contributing to open source isn’t just about writing code; it’s also a path for personal and professional development.
+
+When we collaborate on open source projects, we do more than just improve our programming skills. We learn how to work together effectively, exchange knowledge, and grow by learning from each other. This process not only makes us better developers, but helps us become more open-minded and supportive individuals.
+
+At Persian Flutter, our goal is to keep this spirit alive—supporting open source projects and creating a platform where anyone can get involved. Because for us, open source isn’t just about code; it’s about collaboration, learning, and building a brighter future together.
+
+## Our Mission at Persian Flutter
+
+We at **Persian Flutter** have a clear focus on open source: **to create a space for learning, growth, and collaboration.** we want to **make a real impact and spread this culture far and wide.**
+
+### Our Objectives:
+
+- **Develop Practical and Educational Projects**  
+  We aim to build high-quality open source projects that not only serve real-world needs but also help developers pick up new skills and advance their expertise.
+
+- **Boost the Global Standing of the Persian Flutter Community**  
+  By producing standard, impactful open source projects and engaging with the wider community, we strive to establish Persian Flutter as a credible and influential presence in the global developer sphere.
+
+- **Promote the Open Source Culture**  
+  We want to spread the open source ethos as a model for collaboration and knowledge sharing. By creating learning opportunities for developers and offering a platform where everyone can contribute, we hope to keep this powerful culture growing strong.

src/content/topic/en/open-source2.md

@@ -0,0 +1,32 @@
+---
+title: 'Open Source Projects'
+description: 'At Persian Flutter, we wholeheartedly believe in open source! Open source projects aren’t just lines of code—they’re a driving force for community growth and recognition. Here, we come together to build high-quality projects that benefit everyone. That means learning, collaboration, and progress—all in one place!'
+image: './../images/open-source.png'
+---
+
+## What We’ve Gained, What We Can Share
+
+Throughout our professional journeys, we’ve all benefited from free resources and open source projects—learning from them and growing along the way. Maybe it’s time each of us contributed back, in our own unique way, to keep this culture thriving and available to everyone.
+
+## Persian Flutter’s Role in Open Source
+
+In the Persian Flutter community, we put great emphasis on open source projects and resources. We believe that contributing to open source isn’t just about writing code; it’s also a path for personal and professional development.
+
+When we collaborate on open source projects, we do more than just improve our programming skills. We learn how to work together effectively, exchange knowledge, and grow by learning from each other. This process not only makes us better developers, but helps us become more open-minded and supportive individuals.
+
+At Persian Flutter, our goal is to keep this spirit alive—supporting open source projects and creating a platform where anyone can get involved. Because for us, open source isn’t just about code; it’s about collaboration, learning, and building a brighter future together.
+
+## Our Mission at Persian Flutter
+
+We at **Persian Flutter** have a clear focus on open source: **to create a space for learning, growth, and collaboration.** we want to **make a real impact and spread this culture far and wide.**
+
+### Our Objectives:
+
+- **Develop Practical and Educational Projects**  
+  We aim to build high-quality open source projects that not only serve real-world needs but also help developers pick up new skills and advance their expertise.
+
+- **Boost the Global Standing of the Persian Flutter Community**  
+  By producing standard, impactful open source projects and engaging with the wider community, we strive to establish Persian Flutter as a credible and influential presence in the global developer sphere.
+
+- **Promote the Open Source Culture**  
+  We want to spread the open source ethos as a model for collaboration and knowledge sharing. By creating learning opportunities for developers and offering a platform where everyone can contribute, we hope to keep this powerful culture growing strong.

src/content/topic/fa/open-source.md

@@ -1,6 +1,7 @@
 ---
 title: 'پروژه های Open Source'
 description: 'توی پرشین فلاتر، ما به اوپن سورس بودن اعتقاد داریم! پروژه‌های متن‌باز فقط یه سری کد نیستن، بلکه به رشد و اعتبار جامعه‌ی برنامه‌نویسی کمک می‌کنن. ما اینجا کنار هم پروژه‌هایی می‌سازیم که هم کیفیت بالایی داشته باشن، هم به درد بقیه بخورن. این یعنی یادگیری، همکاری و پیشرفت، همه در کنار هم!'
+image: './../images/open-source.png'
 ---
 
 ## دانشی که گرفتیم، دانشی که می‌توانیم به اشتراک بگذاریم