# PRD: Company Profile Website - CV Cloud Point Indonesia

## 1. Project Overview

**Nama Proyek:** Company Profile Website CV Cloud Point Indonesia

**Tujuan:** Membangun website company profile profesional dengan CMS backend untuk manajemen konten dan sistem lead management.

---

## 2. Company Information

| Field | Value |
|-------|-------|
| Nama Perusahaan | CV Cloud Point Indonesia |
| Bidang Usaha | Jasa IT (Reseller Google Workspace, Pembuatan Website, Apps, Konsultasi IT) |
| Alamat | Jl. Semeru CD 3 Kepuh Permai Waru, Sidoarjo, 61256 Jawa Timur - Indonesia |
| Kontak | 08563372278 |

---

## 3. Tech Stack

| Layer | Technology |
|-------|------------|
| Frontend | Next.js 14+ (App Router) |
| Styling | Tailwind CSS |
| Backend | Next.js API Routes |
| Database | MySQL |
| ORM | Prisma |
| Auth | NextAuth.js |
| Deployment | VPS (Node.js) |

---

## 4. Color Palette (Brand Colors)

### Primary Palette

| Color | Hex | Usage |
|-------|-----|-------|
| **Brand Blue** | `#3675EF` | Primary buttons, links, accents, hero backgrounds |
| **Dark Gray** | `#545555` | Secondary text, borders, subtle elements |
| **White** | `#FFFFFF` | Backgrounds, cards, text on dark |

### Extended Palette

| Color | Hex | Usage |
|-------|-----|-------|
| Brand Blue Light | `#5A94F5` | Hover states, lighter accents |
| Brand Blue Dark | `#2A5BC7` | Active states, darker accents |
| Gray 50 | `#F9FAFB` | Page backgrounds |
| Gray 100 | `#F3F4F6` | Card backgrounds, section alternate |
| Gray 200 | `#E5E7EB` | Borders, dividers |
| Gray 300 | `#D1D5DB` | Disabled states |
| Gray 600 | `#4B5563` | Body text |
| Gray 800 | `#1F2937` | Headings, dark text |
| Gray 900 | `#111827` | Footer backgrounds |
| Success | `#10B981` | Success messages, CTA highlights |
| Warning | `#F59E0B` | Warnings |
| Error | `#EF4444` | Error messages |

### Usage Guidelines

| Element | Color |
|---------|-------|
| Header Background | White (`#FFFFFF`) |
| Header Text | Gray 800 (`#1F2937`) |
| Header CTA Button | Brand Blue (`#3675EF`) |
| Hero Background | Brand Blue (`#3675EF`) |
| Hero Text | White (`#FFFFFF`) |
| Section Alternate BG | Gray 50 (`#F9FAFB`) |
| Primary Button | Brand Blue (`#3675EF`) |
| Primary Button Hover | Brand Blue Dark (`#2A5BC7`) |
| Secondary Button | Brand Gray (`#545555`) |
| Body Text | Gray 600 (`#4B5563`) |
| Headings | Gray 800 (`#1F2937`) |
| Links | Brand Blue (`#3675EF`) |
| Footer Background | Gray 900 (`#111827`) |
| Footer Text | White (`#FFFFFF`) |
| Cards | White (`#FFFFFF`) |
| Card Borders | Gray 200 (`#E5E7EB`) |

### Accent Colors for Services

| Service | Accent Color |
|---------|--------------|
| Google Workspace | `#3675EF` (Brand Blue) |
| Website Development | `#5A94F5` (Blue Light) |
| Apps Development | `#545555` (Brand Gray) |
| IT Consulting | `#10B981` (Success Green) |

---

## 5. Fitur Website (Frontend)

### 5.1 Public Pages

| Halaman | Deskripsi |
|---------|-----------|
| **Home** | Hero section, highlights layanan, CTA, trust signals |
| **Layanan** | Detail semua layanan (Google Workspace, Web Dev, Apps Dev, IT Consulting) |
| **Tentang Kami** | Profil perusahaan, visi misi, tim |
| **Portofolio** | Showcase project yang sudah dikerjakan |
| **Blog** | Artikel seputar IT |
| **Kontak** | Form kontak, peta lokasi, info kontak |

### 5.2 Landing Page Elements

- Hero Section: Headline, subheadline, CTA button
- Service Cards: 4 layanan utama
- Why Choose Us: Keunggulan perusahaan
- Testimonials: Client testimonials
- Clients/Partners Logo
- CTA Section: Ajakan menghubungi
- Footer: Info kontak, social media, quick links

---

## 6. Fitur Backend (CMS)

### 6.1 Authentication

| Fitur | Deskripsi |
|-------|-----------|
| Login | Email + password |
| Role | Admin, Editor |
| Session | JWT-based |

### 6.2 Content Management

| Module | Fields |
|--------|--------|
| **Hero Section** | Title, subtitle, CTA text, CTA link, background image |
| **Services** | Name, description, icon, image, benefits[], order, status |
| **About** | Company description, vision, mission, values, images |
| **Portofolio** | Title, client, description, images[], category, year, link |
| **Testimonials** | Client name, company, photo, content, rating |
| **Clients** | Name, logo image, website URL |
| **Contact Info** | Address, phone, email, maps embed, social links |
| **Footer** | Links, copyright text, social links |
| **Pages** | Static page content (FAQ, Terms, etc) |
| **Blog** | Title, content, excerpt, category, tags, featured image |

### 6.3 Media Management

- Upload gambar (logo, foto, portofolio)
- Image optimization otomatis
- Gallery management
- File type: JPG, PNG, WebP, SVG

---

## 7. Fitur Lead Management

### 7.1 Lead Capture

| Source | Method |
|--------|--------|
| Contact Form | Form di halaman kontak |
| WhatsApp Button | Direct link ke WhatsApp |
| Service Inquiry | Form per layanan |
| CTA Button | Form popup/modal |

### 7.2 Lead Data Structure

```
Lead {
  id: UUID
  name: String
  email: String
  phone: String (nullable)
  company: String (nullable)
  service_interest: Enum (google_workspace, web_dev, apps_dev, consulting, other)
  message: Text
  source: Enum (contact_form, whatsapp, service_page, cta, blog)
  status: Enum (new, contacted, qualified, converted, lost)
  notes: Text (admin notes)
  created_at: DateTime
  updated_at: DateTime
}
```

### 7.3 Lead Dashboard

- List semua leads dengan filter & search
- Filter by: status, service, date range, source
- Lead detail view
- Update status & tambah notes
- Export ke CSV
- Statistics: total leads, conversion rate, leads by service

---

## 8. Internationalization (i18n)

| Fitur | Deskripsi |
|-------|-----------|
| **Language Switcher** | Toggle ID/EN di header |
| **URL Structure** | `/id/layanan` dan `/en/services` |
| **Content Storage** | JSON fields untuk setiap translatable field |
| **Default Language** | Indonesia (ID) |

### Database Changes

Setiap table dengan konten perlu kolom translatable:

```sql
services: id, slug_id, slug_en, name_id, name_en, description_id, description_en, ...
```

---

## 9. Blog Module

### Blog Table

```sql
blog_posts: id, title_id, title_en, slug_id, slug_en, 
            excerpt_id, excerpt_en, content_id, content_en,
            featured_image, author_id, category_id, 
            tags(JSON), is_published, published_at, 
            meta_title, meta_description, created_at, updated_at

blog_categories: id, name_id, name_en, slug_id, slug_en, created_at

blog_tags: id, name_id, name_en, slug_id, slug_en
```

### Frontend Pages

| Halaman | Deskripsi |
|---------|-----------|
| `/blog` | Blog listing, filter by category |
| `/blog/[slug]` | Blog detail |
| `/blog/category/[slug]` | Category page |

### Admin Pages

| Halaman | Fitur |
|---------|-------|
| `/admin/blog` | List posts, filter, search |
| `/admin/blog/new` | Create post (rich text editor) |
| `/admin/blog/[id]` | Edit post |
| `/admin/blog/categories` | Manage categories |

---

## 10. Database Schema (MySQL)

```sql
-- Users (CMS)
CREATE TABLE users (
    id VARCHAR(36) PRIMARY KEY,
    name VARCHAR(255) NOT NULL,
    email VARCHAR(255) UNIQUE NOT NULL,
    password_hash VARCHAR(255) NOT NULL,
    role ENUM('admin', 'editor') DEFAULT 'editor',
    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
    updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP
);

-- Services
CREATE TABLE services (
    id VARCHAR(36) PRIMARY KEY,
    slug_id VARCHAR(255) UNIQUE NOT NULL,
    slug_en VARCHAR(255) UNIQUE NOT NULL,
    name_id VARCHAR(255) NOT NULL,
    name_en VARCHAR(255) NOT NULL,
    description_id TEXT NOT NULL,
    description_en TEXT NOT NULL,
    benefits_id JSON,
    benefits_en JSON,
    icon VARCHAR(100),
    image VARCHAR(500),
    order_index INT DEFAULT 0,
    is_active BOOLEAN DEFAULT true,
    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
    updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP
);

-- Portofolio
CREATE TABLE portofolios (
    id VARCHAR(36) PRIMARY KEY,
    slug_id VARCHAR(255) UNIQUE NOT NULL,
    slug_en VARCHAR(255) UNIQUE NOT NULL,
    title_id VARCHAR(255) NOT NULL,
    title_en VARCHAR(255) NOT NULL,
    client_name VARCHAR(255),
    description_id TEXT,
    description_en TEXT,
    images JSON,
    category VARCHAR(100),
    year INT,
    link VARCHAR(500),
    is_featured BOOLEAN DEFAULT false,
    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
    updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP
);

-- Testimonials
CREATE TABLE testimonials (
    id VARCHAR(36) PRIMARY KEY,
    client_name VARCHAR(255) NOT NULL,
    company VARCHAR(255),
    photo VARCHAR(500),
    content_id TEXT NOT NULL,
    content_en TEXT NOT NULL,
    rating INT DEFAULT 5,
    is_active BOOLEAN DEFAULT true,
    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);

-- Clients/Partners
CREATE TABLE clients (
    id VARCHAR(36) PRIMARY KEY,
    name VARCHAR(255) NOT NULL,
    logo VARCHAR(500) NOT NULL,
    website_url VARCHAR(500),
    is_active BOOLEAN DEFAULT true,
    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);

-- Site Settings
CREATE TABLE site_settings (
    id VARCHAR(36) PRIMARY KEY,
    `key` VARCHAR(100) UNIQUE NOT NULL,
    value TEXT,
    type ENUM('text', 'image', 'json', 'boolean') DEFAULT 'text',
    `group` VARCHAR(50),
    updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP
);

-- Pages (static content)
CREATE TABLE pages (
    id VARCHAR(36) PRIMARY KEY,
    slug_id VARCHAR(255) UNIQUE NOT NULL,
    slug_en VARCHAR(255) UNIQUE NOT NULL,
    title_id VARCHAR(255) NOT NULL,
    title_en VARCHAR(255) NOT NULL,
    content_id LONGTEXT,
    content_en LONGTEXT,
    meta_title_id VARCHAR(255),
    meta_title_en VARCHAR(255),
    meta_description_id TEXT,
    meta_description_en TEXT,
    is_published BOOLEAN DEFAULT true,
    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
    updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP
);

-- Blog Categories
CREATE TABLE blog_categories (
    id VARCHAR(36) PRIMARY KEY,
    slug_id VARCHAR(255) UNIQUE NOT NULL,
    slug_en VARCHAR(255) UNIQUE NOT NULL,
    name_id VARCHAR(100) NOT NULL,
    name_en VARCHAR(100) NOT NULL,
    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);

-- Blog Posts
CREATE TABLE blog_posts (
    id VARCHAR(36) PRIMARY KEY,
    slug_id VARCHAR(255) UNIQUE NOT NULL,
    slug_en VARCHAR(255) UNIQUE NOT NULL,
    title_id VARCHAR(255) NOT NULL,
    title_en VARCHAR(255) NOT NULL,
    excerpt_id TEXT,
    excerpt_en TEXT,
    content_id LONGTEXT,
    content_en LONGTEXT,
    featured_image VARCHAR(500),
    author_id VARCHAR(36),
    category_id VARCHAR(36),
    tags JSON,
    is_published BOOLEAN DEFAULT false,
    published_at TIMESTAMP NULL,
    meta_title_id VARCHAR(255),
    meta_title_en VARCHAR(255),
    meta_description_id TEXT,
    meta_description_en TEXT,
    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
    updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
    FOREIGN KEY (author_id) REFERENCES users(id),
    FOREIGN KEY (category_id) REFERENCES blog_categories(id)
);

-- Blog Tags
CREATE TABLE blog_tags (
    id VARCHAR(36) PRIMARY KEY,
    slug_id VARCHAR(255) UNIQUE NOT NULL,
    slug_en VARCHAR(255) UNIQUE NOT NULL,
    name_id VARCHAR(100) NOT NULL,
    name_en VARCHAR(100) NOT NULL,
    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);

-- Blog Post Tags (junction)
CREATE TABLE blog_post_tags (
    post_id VARCHAR(36),
    tag_id VARCHAR(36),
    PRIMARY KEY (post_id, tag_id),
    FOREIGN KEY (post_id) REFERENCES blog_posts(id) ON DELETE CASCADE,
    FOREIGN KEY (tag_id) REFERENCES blog_tags(id) ON DELETE CASCADE
);

-- Leads
CREATE TABLE leads (
    id VARCHAR(36) PRIMARY KEY,
    name VARCHAR(255) NOT NULL,
    email VARCHAR(255) NOT NULL,
    phone VARCHAR(50),
    company VARCHAR(255),
    service_interest ENUM('google_workspace', 'web_dev', 'apps_dev', 'consulting', 'other'),
    message TEXT,
    source ENUM('contact_form', 'whatsapp', 'service_page', 'cta', 'blog') DEFAULT 'contact_form',
    status ENUM('new', 'contacted', 'qualified', 'converted', 'lost') DEFAULT 'new',
    notes TEXT,
    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
    updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP
);

-- Media
CREATE TABLE media (
    id VARCHAR(36) PRIMARY KEY,
    filename VARCHAR(500) NOT NULL,
    original_name VARCHAR(500) NOT NULL,
    mime_type VARCHAR(100) NOT NULL,
    size INT NOT NULL,
    path VARCHAR(500) NOT NULL,
    alt_text VARCHAR(255),
    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);

-- Site Settings Initial Data
INSERT INTO site_settings (`key`, value, `group`) VALUES
('company_name', 'CV Cloud Point Indonesia', 'general'),
('company_phone', '08563372278', 'contact'),
('company_email', 'info@cloudpoint.co.id', 'contact'),
('company_address_id', 'Jl. Semeru CD 3 Kepuh Permai Waru, Sidoarjo, 61256 Jawa Timur - Indonesia', 'contact'),
('company_address_en', 'Jl. Semeru CD 3 Kepuh Permai Waru, Sidoarjo, 61256 East Java - Indonesia', 'contact'),
('whatsapp_number', '628563372278', 'contact'),
('facebook_url', '', 'social'),
('instagram_url', '', 'social'),
('linkedin_url', '', 'social'),
('twitter_url', '', 'social'),
('footer_copyright', '© 2024 CV Cloud Point Indonesia. All rights reserved.', 'footer');
```

---

## 11. Project Structure

```
cv-cloudpoint/
├── prisma/
│   └── schema.prisma
├── public/
│   └── uploads/
├── src/
│   ├── app/
│   │   ├── (frontend)/           # Public pages
│   │   │   ├── layout.tsx
│   │   │   ├── page.tsx          # Home
│   │   │   ├── layanan/
│   │   │   │   ├── page.tsx      # All services
│   │   │   │   └── [slug]/
│   │   │   │       └── page.tsx  # Service detail
│   │   │   ├── portofolio/
│   │   │   │   ├── page.tsx
│   │   │   │   └── [slug]/
│   │   │   │       └── page.tsx
│   │   │   ├── tentang-kami/
│   │   │   │   └── page.tsx
│   │   │   ├── blog/
│   │   │   │   ├── page.tsx
│   │   │   │   └── [slug]/
│   │   │   │       └── page.tsx
│   │   │   └── kontak/
│   │   │       └── page.tsx
│   │   │
│   │   ├── admin/                # CMS Backend
│   │   │   ├── layout.tsx
│   │   │   ├── login/
│   │   │   │   └── page.tsx
│   │   │   ├── dashboard/
│   │   │   │   └── page.tsx
│   │   │   ├── content/
│   │   │   │   ├── services/
│   │   │   │   ├── portofolio/
│   │   │   │   ├── testimonials/
│   │   │   │   ├── clients/
│   │   │   │   └── settings/
│   │   │   ├── blog/
│   │   │   │   ├── page.tsx      # Blog list
│   │   │   │   ├── new/
│   │   │   │   │   └── page.tsx  # Create blog
│   │   │   │   └── [id]/
│   │   │   │       └── page.tsx  # Edit blog
│   │   │   └── leads/
│   │   │       ├── page.tsx      # Lead list
│   │   │       └── [id]/
│   │   │           └── page.tsx  # Lead detail
│   │   │
│   │   └── api/                  # API Routes
│   │       ├── auth/
│   │       ├── services/
│   │       ├── portofolio/
│   │       ├── blog/
│   │       ├── leads/
│   │       ├── media/
│   │       └── settings/
│   │
│   ├── components/
│   │   ├── frontend/             # Public components
│   │   │   ├── Header.tsx
│   │   │   ├── Footer.tsx
│   │   │   ├── Hero.tsx
│   │   │   ├── ServiceCard.tsx
│   │   │   ├── ContactForm.tsx
│   │   │   └── ...
│   │   └── admin/                # CMS components
│   │       ├── Sidebar.tsx
│   │       ├── DataTable.tsx
│   │       ├── MediaUploader.tsx
│   │       ├── RichTextEditor.tsx
│   │       └── ...
│   │
│   ├── lib/
│   │   ├── prisma.ts             # Prisma client
│   │   ├── auth.ts               # NextAuth config
│   │   └── utils.ts
│   │
│   └── types/
│       └── index.ts
│
├── .env
├── next.config.js
├── tailwind.config.ts
├── package.json
└── tsconfig.json
```

---

## 12. Halaman Admin (CMS)

| Halaman | Fitur |
|---------|-------|
| **Dashboard** | Statistik: total leads, leads bulan ini, quick actions |
| **Content > Hero** | Edit hero section (title, subtitle, CTA, gambar) |
| **Content > Layanan** | CRUD layanan, urutan, status aktif |
| **Content > Portofolio** | CRUD portofolio, gambar, kategori |
| **Content > Testimonials** | CRUD testimonials |
| **Content > Clients** | CRUD client logos |
| **Content > Pengaturan** | Info kontak, social links, SEO settings, footer |
| **Content > Halaman** | Edit konten statis (tentang kami, FAQ, dll) |
| **Blog** | CRUD blog posts, kategori, tags |
| **Media** | Upload & manage gambar |
| **Leads** | Dashboard leads, filter, search, update status |
| **Pengguna** | Manage admin users |

---

## 13. API Endpoints

### Public API

| Method | Endpoint | Description |
|--------|----------|-------------|
| GET | `/api/settings` | Get site settings |
| GET | `/api/services` | List services |
| GET | `/api/services/[slug]` | Service detail |
| GET | `/api/portofolio` | List portofolio |
| GET | `/api/portofolio/[slug]` | Portofolio detail |
| GET | `/api/testimonials` | List testimonials |
| GET | `/api/clients` | List clients |
| GET | `/api/blog` | List blog posts |
| GET | `/api/blog/[slug]` | Blog post detail |
| POST | `/api/leads` | Submit lead form |
| POST | `/api/contact` | Submit contact form |

### Admin API (Protected)

| Method | Endpoint | Description |
|--------|----------|-------------|
| POST | `/api/auth/login` | Login |
| GET/POST/PUT/DELETE | `/api/admin/services` | CRUD services |
| GET/POST/PUT/DELETE | `/api/admin/portofolio` | CRUD portofolio |
| GET/POST/PUT/DELETE | `/api/admin/testimonials` | CRUD testimonials |
| GET/POST/PUT/DELETE | `/api/admin/clients` | CRUD clients |
| GET/POST/PUT/DELETE | `/api/admin/blog` | CRUD blog posts |
| GET/PUT | `/api/admin/settings` | Update settings |
| GET | `/api/admin/leads` | List leads |
| GET/PUT | `/api/admin/leads/[id]` | Lead detail/update |
| POST | `/api/admin/media` | Upload media |
| GET/DELETE | `/api/admin/media/[id]` | Get/delete media |

---

## 14. Deployment Strategy

### VPS Requirements

| Spec | Minimum |
|------|---------|
| OS | Ubuntu 22.04 LTS |
| RAM | 2 GB |
| Storage | 20 GB |
| Node.js | v20 LTS |
| MySQL | 8.0 |

### Setup Steps

```bash
# 1. Update system
apt update && apt upgrade -y

# 2. Install Node.js 20 LTS
curl -fsSL https://deb.nodesource.com/setup_20.x | bash -
apt install -y nodejs

# 3. Install MySQL
apt install -y mysql-server
mysql_secure_installation

# 4. Create database
mysql -u root -p
CREATE DATABASE cloudpoint_db;
CREATE USER 'cloudpoint_user'@'localhost' IDENTIFIED BY 'your_password';
GRANT ALL PRIVILEGES ON cloudpoint_db.* TO 'cloudpoint_user'@'localhost';
FLUSH PRIVILEGES;

# 5. Install PM2
npm install -g pm2

# 6. Install Nginx
apt install -y nginx

# 7. Setup firewall
ufw allow OpenSSH
ufw allow 'Nginx Full'
ufw enable
```

### Deployment Steps

```bash
# 1. Clone repository
cd /var/www
git clone https://github.com/yourrepo/cv-cloudpoint.git
cd cv-cloudpoint

# 2. Install dependencies
npm install

# 3. Setup environment
cp .env.example .env
nano .env  # Edit database credentials

# 4. Setup database
npx prisma db push
npx prisma db seed

# 5. Build
npm run build

# 6. Start with PM2
pm2 start npm --name "cloudpoint" -- start
pm2 save
pm2 startup

# 7. Configure Nginx
nano /etc/nginx/sites-available/cloudpoint
```

### Nginx Configuration

```nginx
server {
    listen 80;
    server_name yourdomain.com www.yourdomain.com;

    location / {
        proxy_pass http://localhost:3000;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
        proxy_cache_bypass $http_upgrade;
    }

    location /_next/static {
        proxy_pass http://localhost:3000;
        proxy_cache_valid 200 365d;
    }

    location /uploads {
        alias /var/www/cv-cloudpoint/public/uploads;
        expires 30d;
    }
}
```

### SSL Setup (Let's Encrypt)

```bash
apt install -y certbot python3-certbot-nginx
certbot --nginx -d yourdomain.com -d www.yourdomain.com
```

---

## 15. NPM Dependencies

```json
{
  "dependencies": {
    "next": "^14.0.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "@prisma/client": "^5.0.0",
    "next-auth": "^4.24.0",
    "next-intl": "^3.0.0",
    "bcryptjs": "^2.4.3",
    "uuid": "^9.0.0",
    "sharp": "^0.32.0",
    "react-quill": "^2.0.0",
    "date-fns": "^2.30.0",
    "clsx": "^2.0.0",
    "react-hot-toast": "^2.4.0"
  },
  "devDependencies": {
    "typescript": "^5.0.0",
    "@types/node": "^20.0.0",
    "@types/react": "^18.2.0",
    "prisma": "^5.0.0",
    "tailwindcss": "^3.3.0",
    "autoprefixer": "^10.4.0",
    "postcss": "^8.4.0"
  }
}
```

---

## 16. Development Phases

### Phase 1: Setup & Foundation (Days 1-2)
- [ ] Project initialization (Next.js, Tailwind, Prisma)
- [ ] Database schema setup
- [ ] Authentication setup (NextAuth)
- [ ] i18n setup (next-intl)
- [ ] Project structure

### Phase 2: Frontend (Days 3-5)
- [ ] Layout components (Header, Footer, Language Switcher)
- [ ] Home page
- [ ] Services pages (list + detail)
- [ ] Portofolio page (list + detail)
- [ ] About page
- [ ] Contact page with form
- [ ] Blog pages (list + detail + category)

### Phase 3: CMS Backend (Days 6-9)
- [ ] Admin dashboard layout
- [ ] Login page
- [ ] Content management (all modules)
- [ ] Blog management (with rich text editor)
- [ ] Media management
- [ ] Settings management

### Phase 4: Lead Management (Days 10-11)
- [ ] Lead capture forms (all sources)
- [ ] Lead dashboard
- [ ] Lead detail & status management
- [ ] Export ke CSV

### Phase 5: Polish & Deploy (Days 12-14)
- [ ] SEO optimization
- [ ] Performance optimization
- [ ] Responsive testing
- [ ] Dummy data seeding
- [ ] VPS setup
- [ ] Deployment

---

## 17. Status

| Phase | Status |
|-------|--------|
| Phase 1: Setup | Completed |
| Phase 2: Frontend | Completed |
| Phase 3: CMS Backend | Completed |
| Phase 4: Lead Management | Completed |
| Phase 5: Polish & Deploy | Pending |

### Completed
- [x] Project initialization
- [x] Tailwind CSS with brand colors (#3675EF, #545555, #FFFFFF)
- [x] Header & Footer components
- [x] Home page (Hero, Services, Why Choose Us, Testimonials, CTA)
- [x] Layanan page
- [x] Tentang Kami page
- [x] Portofolio page
- [x] Blog page
- [x] Kontak page
- [x] Prisma + SQLite database setup
- [x] NextAuth.js authentication
- [x] Admin layout with sidebar
- [x] Admin login page
- [x] Admin dashboard with statistics
- [x] Services CRUD (Admin + API)
- [x] Portofolio CRUD (Admin + API)
- [x] Testimonials CRUD (Admin + API)
- [x] Clients CRUD (Admin + API)
- [x] Blog CRUD (Admin + API)
- [x] Leads management (Admin + API)
- [x] Settings management (Admin + API)
- [x] Database seeding (admin user, services, testimonials, blog categories)

### Login Credentials
- Email: admin@cloudpoint.co.id
- Password: admin123

### Admin Routes
- `/admin/login` - Login page
- `/admin/dashboard` - Dashboard with statistics
- `/admin/services` - Manage services
- `/admin/portofolio` - Manage portofolio
- `/admin/testimonials` - Manage testimonials
- `/admin/clients` - Manage clients/partners
- `/admin/blog` - Manage blog posts
- `/admin/leads` - Manage leads
- `/admin/settings` - Site settings