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/components/Community.astro

@@ -1,11 +1,20 @@
 ---
-import Description from '../components/Description.astro'
-import Button from '../components/Button.astro'
+import Description from '@/components/Description.astro'
+import Button from '@/components/Button.astro'
 import { motion } from 'motion/react'
 import { Github, Check } from 'lucide-astro'
-import { getTitleAnimation } from '../animations'
-import ComImage from '../assets/ComImage.png'
+import { getTitleAnimation } from '@/animations'
+import ComImage from '@/assets/ComImage.png'
 import Image from 'astro/components/Image.astro'
+import { getLocale, getUI } from '@/utils/i18n'
+
+const locale = getLocale(Astro)
+
+const {
+  routes: {
+    index: { community },
+  },
+} = getUI(locale)
 ---
 
 <section
@@ -13,20 +22,22 @@ import Image from 'astro/components/Image.astro'
   class="relative flex w-full flex-col items-center px-4 text-start md:px-0 md:text-center lg:pt-36"
 >
   <Description class="mb-2 px-4 text-6xl font-bold">
-    <motion.span client:load {...getTitleAnimation(0.2)}> Our </motion.span>
-    <motion.span client:load {...getTitleAnimation(0.4)}> Core </motion.span>
-    <motion.span client:load {...getTitleAnimation(0.6)}> Values </motion.span>
+    <motion.span client:load {...getTitleAnimation(0.2)}>
+      {community.title[0]}
+    </motion.span>
+    <motion.span client:load {...getTitleAnimation(0.4)}>
+      {community.title[1]}
+    </motion.span>
+    <motion.span client:load {...getTitleAnimation(0.6)}>
+      {community.title[2]}
+    </motion.span>
   </Description>
   <motion.p
     client:load
     {...getTitleAnimation(0.6)}
     className="px-4 md:px-24 lg:w-1/2 lg:px-0"
   >
-    We make it not only a priority, but a necessity to ensure that Zen always
-    strikes the right balance between beauty, performance, and privacy. We are
-    committed to making Zen the most beautiful, productive, and
-    privacy-respecting browser out there — without compromising on your
-    experience.
+    {community.description}
   </motion.p>
   <div
     class="mt-6 flex w-full flex-wrap gap-3 px-4 sm:gap-10 sm:px-0 md:justify-center"
@@ -34,7 +45,7 @@ import Image from 'astro/components/Image.astro'
     <motion.span client:load {...getTitleAnimation(0.8)}>
       <Button class:list={['px-4']} href="https://github.com/zen-browser">
         <Github class="size-4" />
-        <span>Free and open-source</span>
+        <span>{community.lists.freeAndOpenSource.title}</span>
       </Button>
     </motion.span>
     <motion.div
@@ -43,7 +54,7 @@ import Image from 'astro/components/Image.astro'
       className="flex items-center gap-4"
     >
       <Check class="size-4" />
-      <span>Simple yet powerful</span>
+      <span>{community.lists.simpleYetPowerful.title}</span>
     </motion.div>
     <motion.div
       client:load
@@ -51,7 +62,7 @@ import Image from 'astro/components/Image.astro'
       className="flex items-center gap-4"
     >
       <Check class="size-4" />
-      <span>Private and always up-to-date</span>
+      <span>{community.lists.privateAndAlwaysUpToDate.title}</span>
     </motion.div>
   </div>
   <motion.span
@@ -61,7 +72,7 @@ import Image from 'astro/components/Image.astro'
   >
     <Image
       src={ComImage}
-      alt="Community"
+      alt={community.images.community.alt}
       class="my-24 rounded-3xl shadow-md lg:mx-auto lg:w-3/4 dark:opacity-80"
     />
   </motion.span>