# Asset Guide — GOFLOW Enterprise Portal

คู่มือเตรียมภาพสำหรับเว็บไซต์ GOFLOW — ทีมออกแบบ/การตลาดดูตารางนี้แล้วรู้ทันทีว่าต้องเตรียมภาพอะไร ขนาดเท่าไร วางที่ไหน

## ตาราง Asset หลัก

| ตำแหน่งในเว็บ | ชื่อไฟล์ | ขนาดแนะนำ | อัตราส่วน | สถานะ |
|---|---|---|---|---|
| Hero หน้าแรก (เต็มจอ) | `hero-headquarters.webp` | 1920×1080 | 16:9 | ✅ มีแล้ว |
| หน้า About (เต็มภาพ) | `about-headquarters.webp` | 1706×960 | 16:9 | ✅ มีแล้ว |
| หน้า Careers (ทีมทำงาน) | `careers-team.webp` | 1706×569 | 3:1 | ✅ มีแล้ว |
| หน้า Investor (Dashboard) | `investor-dashboard.webp` | 610×569 | 1.07:1 | ✅ มีแล้ว |
| การ์ด GOFLOW Logistics | `logistics-center.webp` | 341×569 | 3:5 | ✅ มีแล้ว |
| การ์ด GOFLOW Retail Tech | `retail-tech.webp` | 341×569 | 3:5 | ✅ มีแล้ว |
| การ์ด GOFLOW Data Analytics | `data-analytics.webp` | 418×569 | 3:4 | ✅ มีแล้ว |
| การ์ด GOFLOW Media Studio | `media-studio.webp` | 341×569 | 3:5 | ✅ มีแล้ว |
| การ์ด GOFLOW Agriculture | `agriculture-lab.webp` | 342×569 | 3:5 | ✅ มีแล้ว |
| ป้ายแผนก 5 ใบ (แกลเลอรี) | `sign-*.webp` | 341×117 | 3:1 | ✅ มีแล้ว |

## รายการที่ต้องเตรียมเพิ่ม (Placeholder)

| ตำแหน่ง | ชื่อไฟล์ที่คาดหวัง | ขนาดแนะนำ | อัตราส่วน | หมายเหตุ |
|---|---|---|---|---|
| Hero 2 (AI Command Center) | `hero-ai-command-center.webp` | 1920×1080 | 16:9 | ภาพศูนย์ควบคุม AI |
| Hero 3 (Data Center) | `hero-data-center.webp` | 1920×1080 | 16:9 | ภาพ Data Center |
| การ์ด GOFLOW AI | `goflow-ai.webp` | 1200×900 | 4:3 | ภาพ AI Brain |
| การ์ด Marketplace | `marketplace-dashboard.webp` | 1200×900 | 4:3 | ภาพหน้าจอ Marketplace |
| การ์ด Wallet | `wallet-dashboard.webp` | 1200×900 | 4:3 | ภาพหน้าจอ Wallet |
| Executive Dashboard | `executive-dashboard.webp` | 1600×900 | 16:9 | ภาพ KPI รวม |
| AI Agent Gallery | `agent-{ชื่อ}.webp` | 512×512 | 1:1 | Avatar Agent (CEO/Finance/Market/Agri/Logistics) |
| Architecture v3 | `architecture-v3.webp` | 2000×1200 | 5:3 | แผนภาพสถาปัตยกรรม |
| Roadmap Timeline | `roadmap.webp` | 1600×900 | 16:9 | เส้นทาง 2026–2030 |
| Interactive Map | `thailand-map.webp` | 1600×900 | 16:9 | แผนที่จังหวัด/สหกรณ์/ร้านค้า |

## ขั้นตอนเพิ่มภาพใหม่

1. เตรียมภาพตามขนาดในตาราง (เว้นพื้นที่ข้อความสำคัญให้ห่างขอบ ≥ 8%)
2. วางไฟล์ในโฟลเดอร์ที่ตรง: `assets/<หมวด>/<ชื่อไฟล์>.webp`
3. อัปเดตหน้าเว็บที่ต้องการ (แก้ `src` ใน `<img>` หรือ background ใน CSS)
4. อัปโหลดขึ้น VPS: `assets/` → `/var/www/goflow-portal/assets/`
5. ตรวจสอบที่ `https://portal.goflow.click/`

> แหล่งภาพปัจจุบัน: ภาพถ่ายสำนักงานใหญ่ GOFLOW (Bangkok) — ใช้ภาพเดียวตัดย่อยได้ 13 assets ตามตารางบน