PARALLAX — เว็บไซต์

เว็บไซต์เต็มรูปแบบของ PARALLAX (Agentic Lead Generation & CRM Platform) เนื้อหาทั้งหมดเป็นภาษาไทย ตามทะเบียนเสียงที่กำหนดไว้ใน Master Blueprint v2

Next.js 16 (App Router · Turbopack) · React 19 · Tailwind CSS 4 · TypeScript

---

เริ่มใช้งาน

npm run dev

เปิด http://localhost:3040 (พอร์ตกำหนดไว้ใน .claude/launch.json ของโฟลเดอร์แม่)

npm run build && npm start

---

โครงสร้างหน้า

เส้นทาง	เนื้อหา	อ้างอิง blueprint
/	หน้าแรก — ตำแหน่ง เครื่องยนต์ บรีฟเช้า และหลักฐาน	§0, 3, 6–10
/problem	ปัญหา สถิติ 2569 แรงที่เปลี่ยนตลาด และตำแหน่ง	§1, 2, 3
/platform	สถาปัตยกรรมห้าชั้น สามแกน การกำกับ มาร์จิ้น	§6, 11, 12, 22
/platform/keep	Keep — ห้าขั้นตอนและกลุ่มที่ระบบคืนมา	§7
/platform/reach	Reach — ห้าขั้นตอนและท่าทีต่อข้อมูล	§8
/platform/proof	Proof — กติกาวัดตามขนาดกลุ่ม และ ROI Tracker	§10
/platform/learning	การเรียนรู้ข้ามลูกค้า — คูเมืองที่ซื้อทางลัดไม่ได้	§9
/product	ระบบชื่อสินค้า บรีฟเช้า ฟีเจอร์ทั้งหมด การเริ่มใช้	§4, 13
/demo	เดโมสาธารณะของบรีฟเช้า เปิดได้ทันทีโดยไม่ต้องเข้าสู่ระบบ	—
/customers	สี่รูปทรงวงจร เกณฑ์คัด และวิธีเจาะตลาด	§5
/playbook	MST Golf — ต้นแบบที่ต่อข้อมูลแล้ว	§15
/pricing	สี่ชั้นราคาและสิ่งที่ตั้งใจไม่ทำ	§17
/company	ชื่อ แบรนด์ สองทะเบียนเสียง ทีม แผนเดินทาง ภูมิศาสตร์	§4, 20, 22, 23, 24
/investors	GTM ขนาดตลาด เศรษฐศาสตร์ต่อบัญชี BMC ความเสี่ยง	§14, 16, 18, 19, 21, ภาคผนวก
/trust	PDPA ความยินยอม เพดานการส่ง	§11
/contact	แบบฟอร์มและช่องทางอีเมล	—
/console	ประตูทางเข้าของ webapp — จะถูกแทนที่ในเฟสถัดไป	—

/sitemap.xml · /robots.txt · /opengraph-image · /icon.svg สร้างอัตโนมัติ /console ถูกตั้ง noindex ไว้แล้ว

---

⚠️ สิ่งที่ต้องตั้งค่าก่อนขึ้นจริง

POST /api/contact ตรวจสอบข้อมูลครบถ้วน แต่ ยังไม่มีปลายทาง ถ้าไม่ตั้งค่า CONTACT_WEBHOOK_URL ระบบจะเขียน log บนเซิร์ฟเวอร์อย่างเดียว และผู้ส่งจะเห็นหน้าขอบคุณ — แปลว่า lead จะหายไป

# .env.local
CONTACT_WEBHOOK_URL="https://hooks.zapier.com/..."   # หรือ Make / Slack / n8n / API ของคุณเอง
ANTHROPIC_API_KEY="sk-ant-..."                        # ไม่ตั้งก็ใช้ได้ แต่ AI จะถอยไปใช้สูตรสำเร็จ

ANTHROPIC_API_KEY ไม่ใช่ของบังคับ — ถ้าไม่ตั้ง Console ยังทำงานครบทุกหน้า โดยสลับไปใช้สูตรที่ deterministic และติดป้ายบอกไว้ทุกจุดที่ใช้งาน รายละเอียดอยู่ที่หัวข้อ AI ใช้ตรงไหน

payload ที่ส่งไปยัง webhook:

{
  "name": "", "company": "", "email": "", "phone": "",
  "cycle": "", "baseSize": "", "topic": "", "message": "",
  "receivedAt": "ISO-8601"
}

ถ้า webhook ตอบไม่ใช่ 2xx ระบบจะคืน 502 และหน้าเว็บจะแนะนำให้อีเมลหา [email protected] แทน

---

ระบบดีไซน์

ทั้งหมดอยู่ใน app/globals.css เป็น token และ utility ไม่ใช่คลาสกระจัดกระจาย

ทิศทาง — light-first พื้นหลักคือขาวและฟ้าอ่อน ตัวหนังสือเป็น navy เข้ม พื้นเข้มใช้เป็น accent เท่านั้น (ปกติ 1–2 บล็อกต่อหน้า และ footer) พาเลตต์เย็นล้วน ไม่มีโทนอุ่นเลย

สี — ink / ink-2 / ink-3 / ink-4 (navy สำหรับตัวหนังสือ) · paper / paper-2 / line (พื้นสว่างและเส้นไรผม) · signal #0047ff · azure · sky · cyan (แกนน้ำเงินอิ่ม) · abyss #00113d (พื้น accent) · frost (ตัวหนังสือบนพื้น accent)

ตัวอักษร — sans ล้วน ไม่มี serif IBM Plex Sans Thai (เนื้อหาและตัวเลข) · IBM Plex Mono (ป้ายกำกับ) ใช้ผ่าน utility t-display t-h1 t-h2 t-h3 t-lead t-body t-small t-label t-numeral (น้ำหนัก 300 + tabular figures) t-thai

สนามไล่สี (CI) — <Field variant="aurora" | "wash" | "deep" /> aurora คือพื้นสว่างสำหรับ hero — ขาวฝั่งที่วางตัวหนังสือ ไล่ไปฟ้าอิ่มและ navy ที่มุมขวาล่าง · wash คือเวอร์ชันเบาสำหรับ section ทั่วไป · deep คือ accent เข้ม .field__blob เป็นตัวครอบที่รับ animation ส่วน <i> ข้างในรับ gradient และ blur แยกกันเพื่อให้ compositor ใช้ blur ที่ raster ไว้แล้วซ้ำ แทนที่จะเบลอ ก้อนขนาดพันพิกเซลใหม่ทุกเฟรม ขนาดคิดเป็น vmax เพื่อให้สีน้ำเงินยังมีน้ำหนัก บนจอมือถือ ทุก animation ปิดเองเมื่อผู้ใช้เปิด prefers-reduced-motion

เกรน — .grain--light ใช้ soft-light จึงเกาะเฉพาะบริเวณที่มีสี และปล่อยพื้นขาวไว้สะอาด · .grain--dark ใช้ overlay บนพื้น accent

แถบตัวเลขแบบ Stripe — <StatBand items={[{value,label,sub}]} /> เส้นไรผมคั่นทุกคอลัมน์ ตัวเลขใหญ่น้ำหนักบาง วางบนพื้นขาวเสมอ ไม่วางทับ gradient

เลย์เอาต์ — shell (คอนเทนเนอร์) · band / band-sm (ระยะห่างแนวตั้ง) · surface-dark / surface-paper / surface-mist

---

การเคลื่อนไหวและความยาวข้อความ

ทุกตัวอยู่ใน components/reveal.tsx (client) และ app/globals.css เข้ามาเมื่อเลื่อนถึงครั้งเดียว แล้วเลิกสังเกต — การเคลื่อนไหวที่วนซ้ำ ทุกครั้งที่เลื่อนผ่านเป็นสิ่งกวนใจตั้งแต่ครั้งที่สอง

ตัว	ใช้ตอน
Reveal + dir	up · left · right · scale · fade — คอลัมน์ซ้ายเข้าจากซ้าย กราฟิกเข้าแบบ scale จึงรู้สึกเป็นการจัดวาง ไม่ใช่เอฟเฟกต์ที่แปะทับ
Stagger	ลูกในกริดเข้าไล่กัน แทน delay={i * 70} ที่เคยเขียนมือกระจายสิบกว่าจุดด้วยค่าไม่ตรงกัน
Numeral	ตัวเลขไล่ขึ้นเมื่อเลื่อนถึง อยู่ใน Stat/StatBand จึงได้ทั้งเว็บ · แยก prefix/suffix เอง (฿786,800 · 12.49% · 6×) และค่าที่ไล่อยู่ถูกซ่อนจากโปรแกรมอ่านหน้าจอ
LineReveal	หัวเรื่องเข้าทีละบรรทัด แบ่งด้วย \n ที่ส่งเข้ามา ไม่ใช่เดาจากความกว้าง (ซึ่งจะแตกคนละที่ทุกขนาดจอ)
ReadingProgress	แถบบางบนสุด · rAF + listener แบบ passive
More	รายละเอียดที่พับไว้ — details/summary จริง จึงค้นด้วย ⌘F ได้

ตัวกันเนื้อหาหายถาวร — สถานะตั้งต้นของทุกตัวคือ opacity: 0 ถ้า IntersectionObserver ไม่เคยรายงาน ผลไม่ใช่ "ไม่มีอนิเมชัน" แต่คือหน้าว่าง และเกิดขึ้นจริง: แท็บที่อยู่เบื้องหลังมี visibilityState = hidden จน observer ไม่รายงานการตัดกัน (เจอตอนทดสอบ ทั้งหน้าค้างที่ opacity 0) จึงตั้งเวลาปลดล็อกไว้ 1.5 วินาที และเพิ่ม @media print ที่บังคับให้ ทุกอย่างมองเห็นและคลี่ตัวพับออก — การเคลื่อนไหวเป็นของเสริม เนื้อหาไม่ใช่

ทุกตัวเคารพ prefers-reduced-motion ทั้งทาง CSS และทาง JS — ตัวเลขที่ไล่ขึ้นต้องขึ้นค่าสุดท้ายทันที ไม่ใช่ไล่เร็วขึ้น

This is the beginning of the README. Read the rest at the original. Read the full README ↗