Template Configuration

TOR 4.2.2 — เลือก Design System จาก 3 Template ที่แตกต่าง (สี, style, font, sidebar)

Design System — เลือก 1 จาก 3 Template
Color Configuration (ปรับสีเพิ่มเติม)
สีชื่อใช้งานHex

Primary (สีหลัก)

Header, Sidebar active, ปุ่มหลัก

Secondary (สีรอง)

Badge, ปุ่มรอง

Accent (เน้น)

Hover, Active state

Background (พื้นหลัง)

พื้นหลังหน้าจอ

Card (การ์ด)

พื้นหลังการ์ด

Foreground (ตัวอักษร)

สีตัวอักษรหลัก

Sidebar Background

พื้นหลัง Sidebar

Sidebar Accent

สี Active/Hover ใน Sidebar

Landing Page — Section ลำดับ & แสดง/ซ่อน
#Sectionคำอธิบายแสดงลำดับ
1
Hero Section
Banner หลัก + สถิติสมาชิก
2
แผนที่สมาชิก
Interactive Thailand Map + ค้นหาตามจังหวัด
3
SACIT Shop Banner
Banner ร้านค้า SACIT
4
กิจกรรมล่าสุด
การ์ดกิจกรรม 3 รายการ
5
Call to Action
ปุ่มเข้าสู่ระบบ / สมัครสมาชิก
6
Footer
ข้อมูลติดต่อ + ลิงก์ที่เกี่ยวข้อง
Typography
UI Settings
Live Preview
SACIT Data IntelligenceAI
หน้าแรก
สมาชิก
สินค้า
KPI 1
KPI 2
KPI 3
📋 Config JSON
{
  "name": "SACIT Royal",
  "colors": {
    "primary": "#533193",
    "secondary": "#FAA61A",
    "accent": "#1AAB9F",
    "background": "#F2EFFF",
    "card": "#FFFFFF",
    "foreground": "#1a1a2e",
    "sidebarBg": "#FFFFFF",
    "sidebarAccent": "#F2EFFF"
  },
  "sections": [
    {
      "id": "hero",
      "label": "Hero Section",
      "desc": "Banner หลัก + สถิติสมาชิก",
      "visible": true
    },
    {
      "id": "map",
      "label": "แผนที่สมาชิก",
      "desc": "Interactive Thailand Map + ค้นหาตามจังหวัด",
      "visible": true
    },
    {
      "id": "shop",
      "label": "SACIT Shop Banner",
      "desc": "Banner ร้านค้า SACIT",
      "visible": true
    },
    {
      "id": "activities",
      "label": "กิจกรรมล่าสุด",
      "desc": "การ์ดกิจกรรม 3 รายการ",
      "visible": true
    },
    {
      "id": "cta",
      "label": "Call to Action",
      "desc": "ปุ่มเข้าสู่ระบบ / สมัครสมาชิก",
      "visible": true
    },
    {
      "id": "footer",
      "label": "Footer",
      "desc": "ข้อมูลติดต่อ + ลิงก์ที่เกี่ยวข้อง",
      "visible": true
    }
  ],
  "fonts": {
    "heading": "Kanit",
    "body": "Sarabun"
  },
  "borderRadius": "0.75rem",
  "sidebarStyle": "light"
}