หอพัก · ร้านอาหาร · อีเวนต์ · Co-working · สปา · คลินิก · เช่ารถ · สตูดิโอ · สถานที่จัดงาน · สนามกีฬา · ทัวร์
ภาพหน้าจอจริงจากแอป BookingHub (เวอร์ชัน v1.1)
Live URL: https://codehub.sj88ai.com/bookinghub/
Source: /workspace/bookinghub/index.html (20KB, 700+ lines)
Version: v1.0
Color: Purple/Pink gradient #7c3aed → #ec4899
Category: Landing Page
BookingHub เป็น Meta-Landing Page ที่รวม 11 แอปจองทั้งหมดไว้ในที่เดียว — เป็น entry point สำหรับผู้ใช้ที่ต้องการสำรวจ booking apps
| Feature | Description |
|---|---|
| 🌟 Hero Section | Multi-color gradient text "ทุกการจอง ในที่เดียว" |
| 🔍 Search Box | ค้นหาแอปจอง |
| 📊 Stats Hero | 11 apps · 500+ businesses · 100K+ users · 4.9★ |
| 🎨 11 App Cards | แต่ละแอปมี gradient + icon + tags + CTA |
| 🏷️ Category Filter | Travel / Lifestyle / Professional |
| 🌈 Stats Bar | 11 apps · 100% free · 0 signup · 24/7 |
| ✨ Feature Tiles | 3 features (เร็ว, PromptPay, ใช้งานจริง) |
| 🚀 CTA Section | "พร้อมเริ่มจองยัง?" |
| 🦶 Footer | ลิงก์ไป 11 แอป |
แต่ละการ์ดแสดง: - Icon emoji ขนาดใหญ่ - Category (ตัวพิมพ์ใหญ่) - ชื่อแอป + tagline - Description 2 บรรทัด - Tags (3-4 tags) - Stats (✓ Live + lines/items) - CTA "เปิดดู →" (สีเดียวกับ category)
APPS = [
{id, slug, name, icon, cat, catLabel, color, gradient, tagline, desc, tags, stats},
... 11 items
];
// Categories
const CATS = [
{id:'all', label:'ทั้งหมด (11)'},
{id:'travel', label:'✈️ ท่องเที่ยว (3)'},
{id:'lifestyle', label:'🍽️ ไลฟ์สไตล์ (4)'},
{id:'professional', label:'💼 บริการ (4)'},
];
render(filter) // re-render cards
filterCat(cat, el)
| # | App | Color | Category |
|---|---|---|---|
| 1 | 🏨 StayHub | gold | Travel |
| 2 | 🍽️ DineBook | orange | Lifestyle |
| 3 | 🎫 EventTix | purple | Lifestyle |
| 4 | 💼 CoSpace | cyan | Professional |
| 5 | 💅 GlowBook | pink | Lifestyle |
| 6 | 🏥 MedBook | blue | Professional |
| 7 | 🚗 DriveRent | red | Professional |
| 8 | 🎬 StudioBook | indigo | Professional |
| 9 | 🏛️ VenueHub | teal | Lifestyle |
| 10 | 🏋️ FitBook | green | Lifestyle |
| 11 | ✈️ TourLane | sky | Travel |
📌 Live: https://codehub.sj88ai.com/bookinghub/ 📌 Entry point: เข้า BookingHub แล้วเลือกแอปที่ต้องการ
ฟีเจอร์ครบครันที่มีใน BookingHub — ดูรายละเอียดในแท็บ "คู่มือฉบับเต็ม"
คลิกที่ filter pills ด้านบนเพื่อเลือกประเภทที่ต้องการ
คลิกที่การ์ดรายการที่สนใจ เพื่อเปิด modal รายละเอียด
เลือกวันที่, เวลา, จำนวนคน และตัวเลือกเพิ่มเติม
กดปุ่มยืนยัน → ระบบจะแสดง QR PromptPay เพื่อชำระเงิน