Add Web Development section to navigation and update development.astro metadata

- Introduce a new "Web Development" section in the navigation with a link to 365devnet.
- Update the import statement in development.astro to use PageLayout.
- Add metadata for improved SEO, including title and description for the development page.

src/navigation.ts

@@ -43,6 +43,16 @@ export const getHeaderData = (lang = 'en') => {
       {
         text: t.development.title,
         links: [
+          {
+            text: 'Web Development',
+            links: [
+              {
+                text: '365devnet',
+                href: getPermalink('/development', 'page', lang),
+                isHashLink: false,
+              },
+            ],
+          },
           {
             text: 'Anti-FP Shield+',
             href: getPermalink('/antifp', 'page', lang),

src/pages/development.astro

@@ -1,11 +1,16 @@
 ---
-import Layout from '../layouts/Layout.astro';
+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);
 
@@ -59,7 +64,7 @@ function getContributionData(commits) {
 const contributionData = getContributionData(commits);
 ---
 
-<Layout>
+<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">