feat(i18n): implement internationalization support and refactor components for localization

- Added i18n configuration to `astro.config.mjs` for managing locales.
- Introduced utility functions for locale handling in `i18n.ts`.
- Updated various components (e.g., `BackButton`, `Button`, `Community`, `Footer`, `Hero`, `NavBar`, etc.) to utilize localized strings.
- Created new localized pages for `about`, `donate`, `download`, `release-notes`, and others.
- Removed outdated pages and adjusted imports to reflect new structure.
- Enhanced the `ModsList` component to support localization.
- Added English language JSON file for translations.
- Improved overall code organization and structure for better maintainability.

src/pages/[...locale]/about.astro

@@ -0,0 +1,84 @@
+---
+import Button from '@/components/Button.astro'
+import Description from '@/components/Description.astro'
+import Layout from '@/layouts/Layout.astro'
+import { getLocale, getUI } from '@/utils/i18n'
+export { getStaticPaths } from '@/utils/i18n'
+
+const locale = getLocale(Astro)
+
+const {
+  routes: {
+    about,
+  },
+  layout
+} = getUI(locale)
+---
+
+<Layout
+  title={layout.about.title}
+  description={layout.about.description}
+>
+  <main
+    class="relative flex min-h-screen flex-col items-center justify-center py-24"
+  >
+    <div class="mb-24 p-4 text-center lg:w-1/2">
+      <Description class="text-6xl font-bold">{about.title}</Description>
+      <Description>
+        {about.description}
+      </Description>
+      <Button href="/donate" class="mx-auto mt-4 w-fit" isPrimary
+        >{about.littleHelp}</Button
+      >
+    </div>
+    <div
+      class="relative flex w-full flex-col items-center justify-center lg:flex-row"
+    >
+      <div class="flex flex-col p-8 lg:w-1/3 lg:pr-24">
+        <div class="text-4xl font-bold lg:text-6xl">{about.mainTeam.title}</div>
+        <Description>
+          {about.mainTeam.description}
+        </Description>
+        <div class="mt-4">
+          <ul>
+            {Object.entries(about.mainTeam.members).map(([key, member]) => (
+              <li class="text-sm">
+                {member.link ? (
+                  <a href={member.link === true ? '' : member.link}>
+                    <strong class="zen-link font-bold">{member.name}</strong>
+                  </a>
+                  <span class="opacity-60"> : {member.description}</span>
+                ) : (
+                  <strong class="font-bold">{member.name}</strong>
+                  <span class="opacity-60"> : {member.description}</span>
+                )}
+              </li>
+            ))}
+          </ul>
+        </div>
+      </div>
+      <div class="absolute hidden h-full w-[1px] bg-dark opacity-15 lg:block">
+      </div>
+      <div class="flex flex-col p-8 lg:w-1/3 lg:pl-24">
+        <div class="text-4xl font-bold lg:text-6xl">{about.contributors.title}</div>
+        <Description>
+          {about.contributors.description}
+        </Description>
+        <a href="https://github.com/zen-browser/desktop/graphs/contributors"
+          ><img
+            src="https://contributors-img.web.app/image?repo=zen-browser/desktop"
+            alt="Contributors"
+            class="mt-8"
+          /></a
+        >
+        <a href="https://github.com/zen-browser/www/graphs/contributors"
+          ><img
+            src="https://contributors-img.web.app/image?repo=zen-browser/www"
+            alt="Contributors (website)"
+            class="mt-8"
+          /></a
+        >
+      </div>
+    </div>
+  </main>
+</Layout>