feat(i18n): add i18n support and restructure pages for localization

- Configure i18n in astro.config.mjs with English as default locale
- Add translation files and i18n utilities
- Reorganize pages under [locale] subdirectory
- Update components to use translated strings
- Add language routing and fallback handling

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

@@ -0,0 +1,82 @@
+---
+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>