Balok

Marketing landing page for Balok AI — an AI-powered productivity workspace focused on deep work, team workflows, and tool integrations, delivered as a fast, maintainable single page.

Live: balok.akwancakra.my.id

Hero, navigation, value proposition, and social proof — dark mode with brand accents.

• Responsive navbar: transparent at top, glass blur on scroll, hide on scroll down / show on scroll up, mobile menu
• Hero with ray-light visual, gradient headline, dual CTAs (Start Free / View Demo)
• Reveal-on-first-view animations (reveal-once)
• Count-up for headline KPI numbers
• Email CTA form with toasts (svelte-sonner), no server persistence
• Article carousel with local images under static/images/articles
• Workflow feature section with card illustrations (static/images/components/)
• Custom brand SVG icons
• Anti-drag behavior on images where applicable

• Framework: SvelteKit 2, Svelte 5
• Language: TypeScript 5
• Build: Vite 7
• Styling: Tailwind CSS v4 (@tailwindcss/vite), tw-animate-css, tokens in src/app.css
• UI: Bits UI, shadcn-svelte-style components
• Icons: Lucide (Svelte)
• Other: mode-watcher, svelte-sonner, tailwind-merge / clsx / tailwind-variants, layerchart (where used)
• Deploy: @sveltejs/adapter-node → node build (see ecosystem.config.cjs for PM2 and deploy/nginx-balok.conf for reverse proxy)

balok/
├─ deploy/                 # sample nginx config
├─ docs/
├─ src/
│  ├─ lib/
│  │  ├─ actions/          # reveal-once, count-up, etc.
│  │  ├─ components/       # brand, ui (bits-ui / shadcn)
│  │  └─ sections/landing/ # main page sections
│  ├─ routes/
│  │  ├─ +layout.svelte
│  │  └─ +page.svelte
│  └─ app.css
├─ static/
│  └─ images/
│     ├─ articles/
│     ├─ components/       # workflow card illustrations
│     ├─ partners/
│     └─ balok-screenshot.png   # README preview
├─ ecosystem.config.cjs    # sample PM2 config
└─ README.md

Components in src/lib/sections/landing/:

• BalokNavbar.svelte
• BalokHero.svelte
• BalokFeatureWorkflowSection.svelte
• BalokProductivityInsightsSection.svelte
• BalokAdoptionUsageSection.svelte
• BalokProductivityArticlesSection.svelte
• BalokFaqSection.svelte
• BalokCommunityCtaSection.svelte
• BalokFooter.svelte

• Node.js 20+
• npm 10+

git clone https://github.com/akwancakra/balok.git
cd balok
npm install
npm run dev

Open http://localhost:5173.

npm run build
npm run preview

• Semantic tokens live in src/app.css (@theme inline, CSS variables).
• Prefer classes such as bg-background, text-foreground, border-border, bg-primary, etc.
• Avoid legacy hardcoded colors (background-light, surface-dark, …).

• Reveal: src/lib/actions/reveal-once.ts + .reveal-on-load in app.css
• Count-up: src/lib/actions/count-up.ts
• Toast: global toaster in +layout.svelte — toast.success / toast.error

• File at static/foo/bar.png → URL /foo/bar.png
• Articles: static/images/articles/
• README / marketing screenshot: static/images/balok-screenshot.png
• Workflow cards: static/images/components/

GitHub Actions workflow (.github/workflows/deploy.yml): build on push to main, then deploy to a VPS over SSH. Build uses PUBLIC_SITE_URL aligned with the production domain.

npm run check may still report:

• BalokFaqSection.svelte: non-relative index.ts import; collapsible prop vs Accordion types
• Warning: chart-container.svelte (state_referenced_locally)

• docs/project-initialization.md
• docs/project-structure.md
• docs/tech-stack.md

• Akwan Cakra Tajimalela — GitHub · LinkedIn · Email