Enhance ContributionCalendar and development.astro for dark mode support and improved commit display

- Refactor ContributionCalendar to support light and dark color schemes based on user preference.
- Implement dark mode detection using a MutationObserver to dynamically adjust styles.
- Update development.astro to include a new CollapsibleIntro component for better user experience.
- Improve commit display logic to format messages with bullet points and enhance layout for clarity.

src/components/CollapsibleIntro.jsx

@@ -0,0 +1,45 @@
+import React, { useState, useEffect } from 'react';
+
+export default function CollapsibleIntro({ text }) {
+  const STORAGE_KEY = 'devnet-intro-collapsed';
+  const [collapsed, setCollapsed] = useState(false);
+
+  useEffect(() => {
+    const stored = localStorage.getItem(STORAGE_KEY);
+    if (stored === 'true') setCollapsed(true);
+  }, []);
+
+  useEffect(() => {
+    localStorage.setItem(STORAGE_KEY, collapsed ? 'true' : 'false');
+  }, [collapsed]);
+
+  return (
+    <div className="mb-8">
+      <button
+        type="button"
+        className="flex items-center gap-2 text-blue-600 dark:text-blue-400 hover:underline focus:outline-none mb-2"
+        onClick={() => setCollapsed((c) => !c)}
+        aria-expanded={!collapsed}
+        aria-controls="devnet-intro-text"
+      >
+        <span>{collapsed ? 'Show more' : 'Show less'}</span>
+        <svg
+          className={`transition-transform duration-200 w-4 h-4 ${collapsed ? 'rotate-0' : 'rotate-180'}`}
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="2"
+          viewBox="0 0 24 24"
+        >
+          <path strokeLinecap="round" strokeLinejoin="round" d="M19 9l-7 7-7-7" />
+        </svg>
+      </button>
+      <div
+        id="devnet-intro-text"
+        style={{ display: collapsed ? 'none' : 'block' }}
+        className="text-lg text-gray-700 dark:text-gray-300"
+      >
+        {text}
+      </div>
+    </div>
+  );
+}