🛠️ ARIS V1 · MOCKUP INDEX · ใช้สำหรับนำทางระหว่าง mockup pages เท่านั้น (ไม่อยู่ใน production)
ARIS V1 · AI Marketing Studio

V1 Mockup Index

รวม HTML mockups ทั้งหมดสำหรับ V1 — สร้างหน้าตาก่อน · จะนำไปเป็น Next.js หลังจาก approve การออกแบบทั้งหมด

เสร็จแล้ว 22 / 22 หน้า · 🎉 100%
V1 Mockup phase COMPLETE
last updated: 2026-05-16 · +A7 Marketing Funnel
Session 1
Public (5)
Session 2
Build Flow (4)
Session 3
Dashboard (7)
Session 4
Admin (7)
Design System · NEW
Dime-style 3D Clay Icon Library 29 ICONS

Cream + Emerald + Marigold · 3D claymorphism · Imagen 4 · ใช้บน Landing + Login + Dashboard

Session 1 · Public Area

PUBLIC ✓ 5 / 5 หน้า

หน้าที่ทุกคนเห็นก่อน login · landing + pricing + faq + login + feasibility (pre-flight)

P1 DONE
🏠

Landing

รูปหน้าแรก · ปัญหา · ความสามารถ · รูปแบบเว็บ · ตัวอย่าง · ปุ่มหลัก

/index.html
P2 DONE
💰

Pricing

3 packages · feature compare table · pricing FAQ

/pricing.html
P3 DONE
❓

FAQ

8 categories · search · filter · contact block

/faq.html
P4 DONE
🔐

Login / Register

Email + Google · tab toggle · trust aside

/login.html
NEW
P10 ✓ done
💡

ARIS คืออะไร · Concept

Positioning · 5 outcomes · 8 deliverables · comparison table · who is this for · benefit-focused Thai

/concept.html
NEW
P6 DONE
🤝

เกี่ยวกับเรา

Founder story · 6 values · team · 3 commitments · contact channels · trust building

/about.html
NEW
P5 DONE
✨

เช็คความพร้อม

Pre-flight · 7 คำถาม · AI ให้คะแนน 0-100 · ประเมิน CPL/ROAS · แนะนำแพ็กเกจ · เตือนจุดเสี่ยง

/feasibility-check.html

Session 2 · Build Flow

CUSTOMER ✓ 4 / 4 หน้า

การสร้างหน้าเว็บขายของครั้งแรก · ตั้งค่าเริ่มต้น → AI สร้างเว็บ → ดูตัวอย่าง → แก้ไข

C1 DONE
📝

ขั้นตอนการตั้งค่าเริ่มต้น

5-step wizard · brand → audience → media → template → setup · TANA pre-filled

/app/onboarding.html
C2 DONE
🤖

AI Processing

10 steps live · animated progress · ETA · live preview thumb · fun facts

/app/generating.html
C3 DONE
✏️

Page Editor

3 ช่อง · รายการ section · ดูตัวอย่างสดทุกขนาดจอ · ช่องแก้ไข · AI ช่วยปรับข้อความ (6 โหมด)

/app/editor.html
C4 DONE
🎨

Template Gallery

4 templates · filter · preview modal · swap with confirm + quota warning

/app/templates.html

Session 3 · Customer Dashboard

CUSTOMER ✓ 7 / 7 หน้า

หลังเผยแพร่เว็บ · จัดการเว็บ · ดูผู้สนใจ · ตั้งค่าการติดตามผล · แพ็กเกจ · การจัดส่ง · ขอความช่วยเหลือ — shared app shell (topbar + sidebar) ทั้ง 7 หน้า

C5 DONE
📊

Dashboard

สถานะหน้าหลัก · 4 ตัวเลขสำคัญ · ลูกค้าที่สนใจล่าสุด · สถานะการติดตามผล · ทางลัด · ปุ่มอัปเกรด

/app/dashboard.html
C6 DONE
🌐

Domain Settings

URL · เปลี่ยน subdomain · custom domain 3-step · DNS table · provider help · Meta verify

/app/domain.html
C7 DONE
📋

ผู้สนใจ (Leads)

4-stat header · search · filter chips · bulk actions · table · side detail panel · timeline

/app/leads.html
C8 DONE
📈

การติดตามผล

Pixel ID config · 3 events (PageView/ViewContent/Lead) · test event terminal · CAPI placeholder

/app/tracking.html
C9 DONE
📦

การจัดส่ง

Master toggle · 4 shipping methods (radio) · bank/COD payment · 4 carriers · auto-notify rules

/app/shipping.html
C10 DONE
💳

แพ็กเกจของฉัน

Plan hero + usage bars · next invoice · slip dropzone · 3-plan compare · history · billing info · danger zone

/app/billing.html
C11 DONE
🛟

ขอความช่วยเหลือ

4 channel tiles · ticket form (topic/subject/desc) · history · popular FAQ · working hours

/app/support.html

Session 4 · Admin Panel

ADMIN ✓ 7 / 7 หน้า · เสร็จ

หน้าฉัน (Eakalarp / ARIS Operator) · dark theme · internal-only · ดูแลทั้ง platform จากที่นี่

A1 DONE
🎛️

Admin Dashboard

MRR · KPIs · revenue chart · pending tasks · system health · AI cost · top pages

/admin/dashboard.html
A2 DONE
👥

Customers

5 stats · search · filter chips · bulk actions · table 8 ลูกค้า · login-as · pagination

/admin/customers.html
A3 DONE
💸

Payments / Slip Queue

queue + slip preview + OCR auto-detect 5 จุด + approve/reject + ขอสลิปใหม่

/admin/payments.html
A4 DONE
📑

Pages Monitor

92 เว็บทั้งระบบ · domain status · tracking health · traffic sparklines · incidents alerts

/admin/pages.html
A5 ✓

Support Tickets

3-คอลัมน์ · ticket list (SLA sort) · conversation + AI auto-context + AI suggested reply · canned

/admin/support.html
A6 ✓

System Settings ⚙️

lifecycle (trial 7d → grace 30d → archive) · ราคาแพ็กเกจ · quota table · AI budget · payment · audit log · ทุกค่าปรับได้

/admin/settings.html
NEW
A8 ✓
🎬

Landing Showcase

จัดการ showcase บนหน้า landing · 4 อุตสาหกรรม (TANA · คลินิก · เครื่องสำอาง · เครื่องมือแพทย์) · toggle on/off · จัดลำดับ · auto-cycle setting

/admin/showcase.html
NEW
A7 ✓
📊

Marketing & Funnel

ARIS.com tracking · 13 events spec · Pixel/CAPI/GA4 config · funnel KPIs · live event stream · install snippet — ไม่ใช่ Pixel ลูกค้า

/admin/marketing.html

TANA · Case Study

TENANT

TANA = ลูกค้าตัวอย่าง · ใช้ Template B · ทดสอบ flow จริง

TANA LIVE
🦶

TANA Sale Page

ครีมทาเท้าแตก · Template B · senior-friendly

/Tana/landing-page/preview.html

📦 เก็บถาวร (เวอร์ชันเก่า)

v0 Ads Platform (deprecated)

เก่า · ก่อน pivot · เก็บไว้ reference เท่านั้น · อย่า link จากที่อื่น

→ ดูเหตุผลใน _archive/v0-ads-platform/README.md

📋 V1 Build Order

  1. Session 1 (Public · ✓ DONE) — ปูทาง marketing · กระตุ้น signup
  2. Session 2 (Build Flow · ✓ DONE) — หัวใจของ ARIS · ตั้งค่าเริ่มต้น → AI สร้างเว็บ → แก้ไข
  3. Session 3 (แดชบอร์ดลูกค้า · ✓ DONE) — หลังเผยแพร่เว็บ · จัดการลูกค้าที่สนใจ/การติดตามผล
  4. Session 4 (Admin · ✓ DONE) — internal tools สำหรับฉันใช้ดูแลลูกค้า
  5. Data Model ← NEXT — Supabase schema + jsonb shapes สำหรับ page content
  6. Backend — Next.js 14/15 · Supabase Auth/DB/Storage · Vercel deploy
📖 ดูเต็มที่ .ai/V1_SPEC.md