Refactor development page and enhance translations for improved clarity

- Consolidate the "Web Development" link in the navigation for better structure.
- Add an introductory text to the development section in translations for clearer context.
- Update various translation entries for consistency and clarity across multiple languages.
- Remove the development.astro page as its functionality is now integrated elsewhere.

src/pages/[lang]/development.astro

@@ -0,0 +1,114 @@
+---
+import Layout from '../../layouts/PageLayout.astro';
+import { getPermalink } from '../../utils/permalinks';
+import { getTranslation } from '../../i18n/translations';
+import React, { useMemo } from 'react';
+import dynamic from 'astro/dynamic';
+import ContributionCalendar from '../../components/ContributionCalendar.jsx';
+
+const metadata = {
+  title: 'Development Progress | 365DevNet',
+  description: 'See the latest development activity, code contributions, and commit history for the 365DevNet project.',
+};
+
+const lang = Astro.params.lang || 'en';
+const t = getTranslation(lang);
+
+// Fetch Git repository data at build time
+const GITEA_COMMITS_URL = 'https://git.365devnet.eu/api/v1/repos/365DevNet/365devnet/commits?sha=main&stat=true&verification=true&files=true';
+
+// Fetch commits data
+let commits: any[] = [];
+try {
+  const headers: Record<string, string> = {
+    'accept': 'application/json',
+  };
+  // Use Authorization header if token is present
+  if (import.meta.env.GITEA_TOKEN) {
+    headers['Authorization'] = `token ${import.meta.env.GITEA_TOKEN}`;
+  }
+  const commitsResponse = await fetch(GITEA_COMMITS_URL, {
+    headers,
+  });
+
+  if (commitsResponse.ok) {
+    commits = await commitsResponse.json();
+  } else {
+    console.error('Failed to fetch commits:', commitsResponse.statusText);
+  }
+} catch (error) {
+  console.error('Error fetching commits:', error);
+}
+
+// Format date to a readable format
+const formatDate = (dateString: string) => {
+  return new Date(dateString).toLocaleDateString(lang, {
+    year: 'numeric',
+    month: 'long',
+    day: 'numeric',
+  });
+};
+
+// Helper: Group commits by date (YYYY-MM-DD)
+function getContributionData(commits) {
+  const contributions = {};
+  for (const commit of commits) {
+    const date = commit.commit?.author?.date?.slice(0, 10);
+    if (date) {
+      contributions[date] = (contributions[date] || 0) + 1;
+    }
+  }
+  return contributions;
+}
+
+const contributionData = getContributionData(commits);
+---
+
+<Layout metadata={metadata}>
+  <div class="max-w-4xl mx-auto px-4 py-8">
+    <h1 class="text-4xl font-bold mb-4">{t.development.title || 'Development Progress'}</h1>
+    <p class="mb-8 text-lg text-gray-700 dark:text-gray-300">
+      {t.development.intro}
+    </p>
+    {/* Contribution Calendar */}
+    <div class="mb-8">
+      <ContributionCalendar data={contributionData} client:only="react" />
+    </div>
+    <div class="space-y-8">
+      <section>
+        <h2 class="text-2xl font-semibold mb-4">{t.development.latestCommits || 'Latest Commits'}</h2>
+        {Array.isArray(commits) && commits.length > 0 ? (
+          <div class="space-y-4">
+            {commits.slice(0, 10).map((commit) => (
+              <div class="bg-gray-50 dark:bg-gray-800 p-4 rounded-lg">
+                <div class="flex justify-between items-start">
+                  <div>
+                    <h3 class="font-medium">{commit.commit?.message?.split('\n')[0] || 'No message'}</h3>
+                    <p class="text-sm text-gray-600 dark:text-gray-400">{commit.commit?.message || ''}</p>
+                  </div>
+                  <span class="text-sm text-gray-500">{commit.commit?.author?.date ? formatDate(commit.commit.author.date) : ''}</span>
+                </div>
+                <div class="mt-2 text-sm">
+                  <span class="text-gray-500">Commit:</span>{' '}
+                  {commit.html_url ? (
+                    <a href={commit.html_url} target="_blank" rel="noopener">
+                      <code class="bg-gray-100 dark:bg-gray-700 px-2 py-1 rounded">
+                        {commit.sha ? commit.sha.slice(0, 7) : ''}
+                      </code>
+                    </a>
+                  ) : (
+                    <code class="bg-gray-100 dark:bg-gray-700 px-2 py-1 rounded">
+                      {commit.sha ? commit.sha.slice(0, 7) : ''}
+                    </code>
+                  )}
+                </div>
+              </div>
+            ))}
+          </div>
+        ) : (
+          <p class="text-gray-600 dark:text-gray-400">Unable to fetch commit history at this time.</p>
+        )}
+      </section>
+    </div>
+  </div>
+</Layout>