Multi-Page Site

---
judul: "PromptJS Showcase"
---

Gaya:
    body
        font-family: 'Inter', system-ui, sans-serif
        margin: 0
        padding: 0
        background: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%)
        color: #e0e0e0
        min-height: 100vh
    .site-header
        background: rgba(15,12,41,0.9)
        backdrop-filter: blur(20px)
        -webkit-backdrop-filter: blur(20px)
        border-bottom: 1px solid rgba(255,255,255,0.08)
        padding: 16px 32px
        display: flex
        align-items: center
        justify-content: space-between
        position: sticky
        top: 0
        z-index: 50
    .site-header h1
        margin: 0
        font-size: 1.2rem
        font-weight: 800
        background: linear-gradient(135deg, #7dd3fc, #d3b6e9)
        -webkit-background-clip: text
        -webkit-text-fill-color: transparent
        background-clip: text
    .site-header nav
        display: flex
        gap: 8px
    .site-header nav a
        color: #8888a0
        padding: 6px 16px
        border-radius: 8px
        font-size: 0.9rem
        font-weight: 500
        text-decoration: none
        transition: all 0.15s ease
        border-bottom: 2px solid transparent
    .site-header nav a:hover
        color: #e0e0e0
        background: rgba(255,255,255,0.05)
    .hero-section
        text-align: center
        padding: 80px 20px 60px
    .hero-section h1
        font-size: 2.8rem
        font-weight: 900
        margin: 0 0 12px
        letter-spacing: -1px
        background: linear-gradient(135deg, #7dd3fc, #d3b6e9, #86efac)
        -webkit-background-clip: text
        -webkit-text-fill-color: transparent
        background-clip: text
    .hero-section p
        font-size: 1.1rem
        color: #8888a0
        max-width: 500px
        margin: 0 auto 24px
        line-height: 1.6
    .cta-btn
        display: inline-block
        padding: 14px 36px
        background: linear-gradient(135deg, #7dd3fc, #4f9ef7)
        color: #0f172a
        border-radius: 12px
        font-weight: 700
        font-size: 1rem
        cursor: pointer
        border: none
        text-decoration: none
        transition: all 0.15s ease
        box-shadow: 0 4px 20px rgba(125,211,252,0.15)
    .cta-btn:hover
        transform: translateY(-2px)
        box-shadow: 0 8px 30px rgba(125,211,252,0.25)
    .features
        display: grid
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr))
        gap: 20px
        max-width: 800px
        margin: 0 auto
        padding: 0 20px 60px
    .feature-item
        background: rgba(255,255,255,0.04)
        border: 1px solid rgba(255,255,255,0.06)
        border-radius: 16px
        padding: 24px
        text-align: center
        backdrop-filter: blur(8px)
    .feature-item .icon
        font-size: 2rem
        margin-bottom: 8px
    .feature-item h3
        margin: 0 0 4px
        font-size: 1rem
        color: #e0e0e0
    .feature-item p
        margin: 0
        font-size: 0.8rem
        color: #64748b
    footer
        text-align: center
        padding: 24px
        border-top: 1px solid rgba(255,255,255,0.06)
        color: #475569
        font-size: 0.8rem

Halaman Beranda:
    Buat header.site-header:
        Buat h1: $judul
        Buat nav:
            Buat a:
                "Beranda"
                href = "index.html"
            Buat a:
                "Tentang"
                href = "tentang.html"
            Buat a:
                "Blog"
                href = "blog.html"

    Buat div.hero-section:
        Buat h1: "Tulis dengan Bahasa Kamu Pahami"
        Buat p: "PromptJS — DSL bilingual Indonesia-English yang compile ke vanilla JS. Zero dependencies, zero runtime overhead."
        Buat a.cta-btn:
            "🚀 Mulai Sekarang"
            href = "https://github.com/raarion/promptjs"

    Buat div.features:
        Buat div.feature-item:
            Buat div.icon: "🌐"
            Buat h3: "Bilingual"
            Buat p: "Keyword ID & EN"
        Buat div.feature-item:
            Buat div.icon: "⚡"
            Buat h3: "Reaktif"
            Buat p: "Proxy-based data"
        Buat div.feature-item:
            Buat div.icon: "📦"
            Buat h3: "Zero Deps"
            Buat p: "Vanilla JS output"

    Buat footer:
        "PromptJS v1.0 — MIT License © raarion"