# PRD — PT. KOMO PLAT INDONESIA (Company Profile)

## Original Problem Statement
Company profile website for "PT. KOMO PLAT INDONESIA" (printing/manufacturing). Pages: Beranda, Katalog (categories + sub-categories), Kontak (Admin Pusat + 3 cabang), Alamat (3 cabang). Style: modern professional, dominant white + yellow/red accents, red bold brand name with logo, dynamic scroll animations. Features: dark/light mode, auto-English outside Indonesia + manual ID/EN switch, global search. Requested stack HTML+Vanilla JS → built with React (user approved).

## Stack / Architecture
- Frontend: React (CRA + craco), TailwindCSS, shadcn/ui, framer-motion, Lenis smooth scroll, next-themes.
- Backend: FastAPI + MongoDB (motor). Endpoints under /api.
- i18n: custom context (`src/i18n/I18nContext.jsx`), auto-detect via ipapi.co, localStorage `komo_lang`.
- Content data: `src/data/content.js` (bilingual categories, branches, admin).

## User Personas
- Prospective customers (personal & corporate) browsing printing/manufacturing services.
- International visitors (auto English).

## Implemented (2026-07-28)
- Beranda: kinetic hero (masked line reveal + parallax), stats, red marquee, numbered manifesto chapters, featured category bento grid, 3-branch section at bottom.
- Katalog: 13 categories as shadcn Accordion with expandable sub-categories; deep-link `?open=<id>`.
- Kontak: 4 contact cards + contact form (POST /api/contact → MongoDB) with sonner toast.
- Alamat: 3 branch cards with embedded maps + directions links.
- Global search (Cmd/Ctrl+K command palette), dark/light toggle, ID/EN switcher, geo auto-language banner.
- Backend: POST/GET /api/contact with email validation. Tests at /app/backend/tests/test_contact_api.py (6/6 pass).

## Backlog (next)
- P1: Admin dashboard to view/manage contact submissions.
- P1: Replace placeholder branch data/logo with real content; upload real Gill Sans font if licensed.
- P2: WhatsApp Business deep-link CTA + email notification on new contact (Resend).
- P2: SEO meta/OG tags per page, sitemap.
