Enhance ContributionCalendar component and update development.astro for better contribution visualization

- Modify getCalendarDays function to start the week on Monday and improve date calculations.
- Add getMonthLabels function to generate month labels for the contribution calendar.
- Update styling and structure of the ContributionCalendar for improved layout and responsiveness.
- Integrate ContributionCalendar into development.astro to visually represent code contributions over the past year, enhancing project transparency.

src/pages/development.astro

@@ -2,6 +2,9 @@
 import Layout from '../layouts/Layout.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 lang = Astro.params.lang || 'en';
 const t = getTranslation(lang);
@@ -40,12 +43,32 @@ const formatDate = (dateString: string) => {
     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>
   <div class="max-w-4xl mx-auto px-4 py-8">
-    <h1 class="text-4xl font-bold mb-8">{t.development.title || 'Development Progress'}</h1>
-    
+    <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">
+      This page provides a transparent overview of the ongoing development activity for the <strong>365DevNet</strong> project. The contribution calendar below visually represents code contributions (commits) made over the past year, with darker squares indicating more active days. Below the calendar, you'll find a list of the most recent commits, including details about each change. This helps users, contributors, and stakeholders track project progress and stay up to date with the latest updates.
+    </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>