---
layout: home

hero:
  name: 'Frontend Architecture'
  text: 'Enterprise Monorepo'
  tagline: 'A scalable, standardized foundation for Web & Desktop applications. Built for performance, consistency, and velocity.'
  actions:
    - theme: brand
      text: Get Started
      link: /setup
    - theme: alt
      text: View Architecture
      link: /overview

features:
  - title: 🧩 App Layout Engine
    details: Core App Shell wrapping Mantine for rapid, consistent layout creation across all products.
    link: /packages/ui/CORE-APP-SHELL
    linkText: Explore App Shell
  - title: 📝 Form Primitives
    details: RHF + Zod + Mantine components designed for O(1) render cost and deep type safety.
    link: /packages/ui/FORM-COMPONENTS
    linkText: View Forms
  - title: 🖥️ Desktop Ecosystem
    details: Complete Electron integration with secure Inter-Process Communication (IPC) and Bridge Architecture.
    link: /apps/desktop/
    linkText: Desktop Docs
  - title: 🔌 Core Architecture
    details: Robust state management, Event Bus, first-class i18n, and unified Storage layers.
    link: /packages/core-api/
    linkText: Explore Core
---

<div class="custom-divider"></div>
<div class="bento-container">
  <div class="bento-header">
    <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>
  <div class="bento-grid">
    <div class="bento-card">
      <div class="bento-icon">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"></path></svg>
      </div>
      <h3>Unified Tooling</h3>
      <p>By enforcing strict linting, formatting, and building patterns at the root (powered by Turborepo), we ensure that every application in the ecosystem adheres to our high standards without duplicate configuration.</p>
    </div>
    <div class="bento-card">
      <div class="bento-icon">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline><line x1="12" y1="22.08" x2="12" y2="12"></line></svg>
      </div>
      <h3>Shared Domain Logic</h3>
      <p>The separation of UI components and Core logic guarantees that our web and desktop applications all share the exact same state management and event-driven architecture, drastically reducing cognitive load.</p>
    </div>
    <div class="bento-card">
      <div class="bento-icon">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"></polygon></svg>
      </div>
      <h3>Accelerated Velocity</h3>
      <p>With a rich library of 22+ advanced Form components, pre-configured Vite/TypeScript environments, and an enterprise App Shell, teams can stop reinventing the wheel and start building product features on day one.</p>
    </div>
  </div>
</div>

<style scoped>
/* ==========================================================================
   SECTION 1: GLOBAL & HERO BACKGROUNDS (Masked Dot Grid & Top Glow)
   ========================================================================== */
:global(.VPHome) {
  position: relative;
  z-index: 0;
}

/* Efek Brand Glow memancar halus dari atas tengah (Area Hero) */
:global(.VPHome::before) {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  max-width: 1200px;
  height: 800px;
  background: radial-gradient(ellipse at top, var(--vp-c-brand-soft) 0%, transparent 70%);
  filter: blur(100px);
  z-index: -1;
  pointer-events: none;
}

/* Efek Dot Grid yang dibatasi hanya setinggi Hero dan memudar ke bawah */
:global(.VPHome::after) {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 600px;
  background-image: radial-gradient(var(--vp-c-divider) 1px, transparent 1px);
  background-size: 24px 24px;
  background-position: top center;
  z-index: -2;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, black 40%, transparent 100%);
  mask-image: linear-gradient(to bottom, black 40%, transparent 100%);
}


/* ==========================================================================
   SECTION 2: BENTO CONTAINER & HEADER (Structured Minimalism)
   ========================================================================== */
/* Divider dengan jarak vertikal yang presisi dan lega */
.custom-divider {
  width: 100%;
  height: 1px;
  background-color: var(--vp-c-divider);
  margin: 80px 0 64px 0; 
}

.bento-container {
  max-width: 1152px;
  margin: auto;
  padding: 0 24px;
  position: relative;
}

.bento-header {
  text-align: center;
  margin-bottom: 64px;
}

.bento-header h2 {
  font-size: 2.5em;
  font-weight: 700;
  margin-bottom: 20px;
  color: var(--vp-c-text-1);
  letter-spacing: -0.02em;
  line-height: 1.2;
  border-top: none;
  padding-top: 0;
  margin-top: 0;
}

.bento-header p {
  font-size: 1.15em;
  color: var(--vp-c-text-2);
  max-width: 760px; /* Memaksa teks membungkus menjadi 2 baris yang ideal */
  margin: 0 auto;
  line-height: 1.6;
}


/* ==========================================================================
   SECTION 2: BENTO GRID & CARD DESIGN (Premium Glassmorphism)
   ========================================================================== */
.bento-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
}

.bento-card {
  background: var(--vp-c-bg-soft);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--vp-c-divider); /* Border solid yang tipis dan bersih */
  border-radius: 16px;
  padding: 40px 32px; /* Spacing dalam yang luas memberikan kesan premium */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  /* Transisi mulus untuk pergerakan, border, dan bayangan */
  transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), 
              border-color 0.4s ease, 
              box-shadow 0.4s ease;

  /* Perubahan Utama: Bayangan statis yang sangat halus (elegan, tidak berisik) */
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  
  /* Transisi hover yang lebih lembut dan "mahal" */
  transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
}

/* Interaksi hover kartu: Terangkat sedikit dengan pendaran tipis warna brand */
.bento-card:hover {
  /* Elevasi yang lebih tinggi saat di-hover */
  transform: translateY(-8px);
  
  /* Shadow saat hover: Warna brand dengan opasitas sangat rendah agar tetap profesional */
  box-shadow: 0 20px 25px -5px rgba(101, 46, 217, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  
  /* Border sedikit lebih terang */
  border-color: var(--vp-c-brand-1);
}

.bento-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: var(--vp-c-bg-mute);
  color: var(--vp-c-brand-1); 
  margin-bottom: 24px;
  transition: background 0.3s ease, color 0.3s ease, transform 0.3s ease;
}

.bento-icon svg {
  width: 24px;
  height: 24px;
}

/* Interaksi hover ikon: Mengisi warna latar dengan warna brand */
.bento-card:hover .bento-icon {
  background: var(--vp-c-brand-1);
  color: #ffffff;
  transform: scale(1.05);
}

.bento-card h3 {
  font-size: 1.3em;
  font-weight: 600;
  color: var(--vp-c-text-1);
  margin-top: 0;
  margin-bottom: 16px;
}

.bento-card p {
  font-size: 1em;
  color: var(--vp-c-text-2);
  line-height: 1.6;
  margin: 0;
}


/* ==========================================================================
   9. MEDIA QUERIES (Responsive Adaptations)
   ========================================================================== */
@media (max-width: 768px) {
  .custom-divider {
    margin: 48px 0;
  }
  .bento-header {
    margin-bottom: 48px;
  }
  .bento-header h2 {
    font-size: 2em;
  }
  .bento-header p {
    font-size: 1.05em;
  }
  .bento-card {
    padding: 32px 24px;
  }
}

@media (max-width: 480px) {
  .bento-grid {
    grid-template-columns: 1fr; /* Menjadi satu kolom penuh pada ponsel kecil */
  }
  .bento-card {
    padding: 24px;
  }
}
</style>