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: 'Project Overview', link: '/overview' },
-            { text: 'Local Setup', link: '/setup' },
+            { text: 'Development Setup', link: '/setup' },
           ],
         },
         {
-          text: 'Core Architecture & State',
+          text: 'Core Architecture',
           collapsed: false,
           items: [
-            { text: 'Core API Engine', link: '/packages/core-api/' },
+            { text: 'API & Domain Logic', link: '/packages/core-api/' },
-            { text: 'Core Events', link: '/packages/core-events/' },
+            { text: 'Event Bus System', link: '/packages/core-events/' },
-            { text: 'Core Storage', link: '/packages/core-storage/' },
+            { text: 'Storage & Persistence', link: '/packages/core-storage/' },
-            { text: 'Core Internationalization', link: '/packages/core-i18n/' },
+            { text: 'I18n & Localization', link: '/packages/core-i18n/' },
-            { text: 'IPC Architecture', link: '/apps/desktop/IPC_ARCHITECTURE' },
           ],
         },
        {
-          text: 'UI System & Layouts',
+          text: 'UI System',
           collapsed: false,
           items: [
-            { text: 'UI Components Overview', link: '/packages/ui/' },
+            { text: 'Overview', link: '/packages/ui/' },
-            { text: 'Core App Shell', link: '/packages/ui/CORE-APP-SHELL' },
+            { text: 'App Layout', link: '/packages/ui/CORE-APP-SHELL' },
-            { text: 'Form Components', link: '/packages/ui/FORM-COMPONENTS' },
+            { text: 'Form Primitives', link: '/packages/ui/FORM-COMPONENTS' },
           ],
         },
         {
-          text: 'Applications & Configuration',
+          text: 'Desktop Ecosystem',
           collapsed: false,
           items: [
-            { text: 'Desktop Application', link: '/apps/desktop/' },
+          { text: 'Overview', link: '/apps/desktop/' },
-            { text: 'Desktop Configuration', link: '/apps/desktop/CONFIGURATION' },
+          { text: 'Lifecycle & Configuration', link: '/apps/desktop/CONFIGURATION' },
-            { text: 'Desktop Auto Updater', link: '/apps/desktop/AUTO_UPDATER' },
+          { 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,
+}

apps/docs-dev/src/index.md

@@ -1,24 +1,56 @@
 ---
 layout: home
+
 hero:
-  name: "Frontend Monorepo Template Docs"
+  name: "Frontend Architecture"
-  text: "Centralized Documentation Engine"
+  text: "Enterprise Monorepo"
-  tagline: "Enterprise-ready Web & Desktop architecture documentation."
+  tagline: "A scalable, standardized foundation for Web & Desktop applications. Built for performance, consistency, and velocity."
   actions:
     - theme: brand
       text: Get Started
-      link: /packages/core-api/
+      link: /setup
     - theme: alt
-      text: UI Components
+      text: View Architecture
-      link: /packages/ui/
+      link: /overview
-    - theme: alt
+
-      text: View on Git
-      link: https://git.eigen.co.id/eigen/fe-monorepo-template
 features:
-  - title: Centralized Source of Truth
+  - title: 🧩 Component Library
-    details: All documentation for apps and packages is unified here.
+    details: A centralized, highly accessible UI component library built for scale.
-  - title: Markdown Powered
+    link: /packages/ui/
-    details: Simple to maintain and read.
+    linkText: Explore Components
-  - title: Built with VitePress
+  - title: 🔌 Core API Engine
-    details: Fast, responsive, and reliable documentation engine.
+    details: Robust state management and data fetching patterns across all applications.
+    link: /packages/core-api/
+    linkText: View API Engine
+  - title: 🌐 Internationalization
+    details: First-class i18n support built into the core for global reach.
+    link: /packages/core-i18n/
+    linkText: Read i18n Docs
+  - title: 🖥️ Desktop IPC
+    details: Secure and performant Inter-Process Communication architecture for desktop apps.
+    link: /apps/desktop/IPC_ARCHITECTURE
+    linkText: Explore IPC
 ---
+
+<div class="enterprise-section" >
+  <h2>Why this Monorepo Exists</h2>
+  <p>Building high-end enterprise applications requires strict consistency, shared tooling, and well-defined boundaries. This monorepo serves as the absolute source of truth for our frontend ecosystem.</p>
+  
+  <div class="enterprise-grid">
+    <div class="enterprise-card">
+      <h3>Unified Tooling</h3>
+      <p>By enforcing strict linting, formatting, and building patterns at the root, we ensure that every application in the ecosystem adheres to our high standards without duplicate configuration.</p>
+    </div>
+    
+    <div class="enterprise-card">
+      <h3>Shared Domain Logic</h3>
+      <p>The separation of UI and Core logic means our web, desktop, and potential mobile applications all share the same state management and event-driven architecture, reducing cognitive load.</p>
+    </div>
+    
+    <div class="enterprise-card">
+      <h3>Accelerated Velocity</h3>
+      <p>Stop reinventing the wheel. With a rich library of primitive components and pre-configured Vite/TypeScript environments, teams can start building product features on day one.</p>
+    </div>
+  </div>
+</div>
+