feat: revamp documentation landing page and update project naming convention
This commit is contained in:
Firman Ramdhani
@@ -1,5 +1,5 @@
|
||||
{
|
||||
"name": "@repo/docs-dev",
|
||||
"name": "docs-dev",
|
||||
"version": "0.0.0",
|
||||
"type": "module",
|
||||
"private": true,
|
||||
|
||||
@@ -26,62 +26,3 @@
|
||||
--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;
|
||||
}
|
||||
|
||||
+238
-29
@@ -14,43 +14,252 @@ hero:
|
||||
link: /overview
|
||||
|
||||
features:
|
||||
- title: 🧩 Component Library
|
||||
details: A centralized, highly accessible UI component library built for scale.
|
||||
link: /packages/ui/
|
||||
linkText: Explore Components
|
||||
- title: 🔌 Core API Engine
|
||||
details: Robust state management and data fetching patterns across all applications.
|
||||
- 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: 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
|
||||
linkText: Explore Core
|
||||
---
|
||||
|
||||
<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">
|
||||
<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, we ensure that every application in the ecosystem adheres to our high standards without duplicate configuration.</p>
|
||||
<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="enterprise-card">
|
||||
<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 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>
|
||||
<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="enterprise-card">
|
||||
<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>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>
|
||||
<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>
|
||||
Reference in New Issue
Block a user