A scalable, standardized foundation for Web & Desktop applications. Built for performance, consistency, and velocity.
theme
text
link
brand
Get Started
/setup
theme
text
link
alt
View Architecture
/overview
title
details
link
linkText
🧩 App Layout Engine
Core App Shell wrapping Mantine for rapid, consistent layout creation across all products.
/packages/ui/CORE-APP-SHELL
Explore App Shell
title
details
link
linkText
📝 Form Primitives
RHF + Zod + Mantine components designed for O(1) render cost and deep type safety.
/packages/ui/FORM-COMPONENTS
View Forms
title
details
link
linkText
🖥️ Desktop Ecosystem
Complete Electron integration with secure Inter-Process Communication (IPC) and Bridge Architecture.
/apps/desktop/
Desktop Docs
title
details
link
linkText
🔌 Core Architecture
Robust state management, Event Bus, first-class i18n, and unified Storage layers.
/packages/core-api/
Explore Core
Why this Monorepo Exists
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.
Unified Tooling
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.
Shared Domain Logic
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.
Accelerated Velocity
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.
<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>
