feat: redesign documentation landing page with custom theme and updated site navigation

apps/docs-dev/src/.vitepress/config.mts

@@ -3,7 +3,7 @@ import { withMermaid } from 'vitepress-plugin-mermaid'
 
 const config = withMermaid(
   defineConfig({
-    title: "Frontend Monorepo Docs",
+    title: "Frontend Monorepo",
     description: "Centralized documentation for the Enterprise Frontend Monorepo",
 
     themeConfig: {
@@ -13,39 +13,39 @@ const config = withMermaid(
 
       sidebar: [
         {
-          text: 'Introduction',
+          text: 'Getting Started',
           items: [
-            { text: 'Overview', link: '/overview' },
-            { text: 'Local Setup', link: '/setup' },
+            { text: 'Project Overview', link: '/overview' },
+            { text: 'Development Setup', link: '/setup' },
           ],
         },
         {
-          text: 'Core Architecture & State',
+          text: 'Core Architecture',
           collapsed: false,
           items: [
-            { text: 'Core API Engine', link: '/packages/core-api/' },
-            { text: 'Core Events', link: '/packages/core-events/' },
-            { text: 'Core Storage', link: '/packages/core-storage/' },
-            { text: 'Core Internationalization', link: '/packages/core-i18n/' },
-            { text: 'IPC Architecture', link: '/apps/desktop/IPC_ARCHITECTURE' },
+            { text: 'API & Domain Logic', link: '/packages/core-api/' },
+            { text: 'Event Bus System', link: '/packages/core-events/' },
+            { text: 'Storage & Persistence', link: '/packages/core-storage/' },
+            { text: 'I18n & Localization', link: '/packages/core-i18n/' },
+          ],
+        },
+       {
+          text: 'UI System',
+          collapsed: false,
+          items: [
+            { text: 'Overview', link: '/packages/ui/' },
+            { text: 'App Layout', link: '/packages/ui/CORE-APP-SHELL' },
+            { text: 'Form Primitives', link: '/packages/ui/FORM-COMPONENTS' },
           ],
         },
         {
-          text: 'UI System & Layouts',
+          text: 'Desktop Ecosystem',
           collapsed: false,
           items: [
-            { text: 'UI Components Overview', link: '/packages/ui/' },
-            { text: 'Core App Shell', link: '/packages/ui/CORE-APP-SHELL' },
-            { text: 'Form Components', link: '/packages/ui/FORM-COMPONENTS' },
-          ],
-        },
-        {
-          text: 'Applications & Configuration',
-          collapsed: false,
-          items: [
-            { text: 'Desktop Application', link: '/apps/desktop/' },
-            { text: 'Desktop Configuration', link: '/apps/desktop/CONFIGURATION' },
-            { text: 'Desktop Auto Updater', link: '/apps/desktop/AUTO_UPDATER' },
+          { text: 'Overview', link: '/apps/desktop/' },
+          { text: 'Lifecycle & Configuration', link: '/apps/desktop/CONFIGURATION' },
+          { text: 'IPC & Bridge Architecture', link: '/apps/desktop/IPC_ARCHITECTURE' },
+          { text: 'Distribution & Auto-Update', link: '/apps/desktop/AUTO_UPDATER' },
           ],
         },
       ],

apps/docs-dev/src/.vitepress/theme/custom.css

@@ -0,0 +1,87 @@
+/**
+ * VitePress Custom Theme CSS
+ * Applying brand color #652ed9 and its variants
+ */
+
+:root {
+  /* Brand color #652ed9 */
+  --vp-c-brand-1: #652ed9;
+  --vp-c-brand-2: #804aea;
+  --vp-c-brand-3: #9b6ff8;
+  --vp-c-brand-soft: rgba(101, 46, 217, 0.16);
+
+  /* Hover states */
+  --vp-button-brand-hover-bg: var(--vp-c-brand-2);
+  --vp-button-brand-hover-text: var(--vp-c-white);
+  --vp-button-brand-active-bg: var(--vp-c-brand-1);
+
+  /* Focus states */
+  --vp-custom-block-brand-border: var(--vp-c-brand-1);
+}
+
+.dark {
+  /* Slightly adjusted variants for dark mode, keeping the primary brand color consistent */
+  --vp-c-brand-1: #8a57f3;
+  --vp-c-brand-2: #7a42ec;
+  --vp-c-brand-3: #652ed9;
+  --vp-c-brand-soft: rgba(101, 46, 217, 0.25);
+}
+
+/* Custom Enterprise Section Styles */
+.enterprise-section {
+  max-width: 1152px;
+  margin: 0 auto;
+  padding: 64px 24px;
+}
+.enterprise-section h2 {
+  font-size: 2.2em;
+  font-weight: 700;
+  margin-bottom: 0.5em;
+  letter-spacing: -0.02em;
+  line-height: 1.2;
+}
+.enterprise-section > p {
+  font-size: 1.2em;
+  color: var(--vp-c-text-2);
+  margin-bottom: 2.5em;
+  max-width: 700px;
+}
+.enterprise-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+  gap: 24px;
+}
+.enterprise-card {
+  padding: 32px 24px;
+  border-radius: 12px;
+  background-color: var(--vp-c-bg-soft);
+  border: 1px solid var(--vp-c-divider);
+  transition: border-color 0.25s, background-color 0.25s, transform 0.25s;
+}
+.enterprise-card:hover {
+  border-color: var(--vp-c-brand-1);
+  transform: translateY(-2px);
+}
+.enterprise-card h3 {
+  font-size: 1.25em;
+  font-weight: 600;
+  margin-bottom: 0.75em;
+  color: var(--vp-c-text-1);
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.enterprise-card h3::before {
+  content: '';
+  display: inline-block;
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background-color: var(--vp-c-brand-1);
+}
+.enterprise-card p {
+  font-size: 1em;
+  color: var(--vp-c-text-2);
+  line-height: 1.6;
+  margin: 0;
+}

apps/docs-dev/src/.vitepress/theme/index.ts

@@ -0,0 +1,6 @@
+import DefaultTheme from 'vitepress/theme'
+import './custom.css'
+
+export default {
+  extends: DefaultTheme,
+}