chore(website): remove marketing site from app repo (moved to separate project ~/Gitea/Sales Trainer Website)
Per owner: this repo should contain only the app. The marketing landing site now lives in its own git repo (Sales Trainer Website); not pushed.
This commit is contained in:
Macky
@@ -1,26 +0,0 @@
|
||||
# Sales Trainer — Marketing Website
|
||||
|
||||
Standalone, self-contained landing site to market the **Sales Trainer** app (AI sales-roleplay
|
||||
coach, Thailand market). **TH-primary with an EN toggle.**
|
||||
|
||||
## Files
|
||||
- `index.html` — the whole page (markup + inline JS for the TH/EN language toggle and scroll cue).
|
||||
- `main.css` — all styling (Hallmark-inspired warm-cream + coral-red design system, tokens at `:root`).
|
||||
|
||||
## Local preview
|
||||
```bash
|
||||
cd website
|
||||
python3 -m http.server 8000
|
||||
# open http://localhost:8000
|
||||
```
|
||||
(It's a pure static site — no build step, no dependencies.)
|
||||
|
||||
## Deploy
|
||||
Can be served from any static host (nginx, `python -m http.server`, Netlify, an EasyPanel static/
|
||||
nginx service, or the repo's existing infra). Point the document root at the `website/` folder.
|
||||
|
||||
## Owner action required BEFORE public launch
|
||||
- **Pricing is placeholder.** The pricing section uses `—` + "ราคาโปรด confirm / price to confirm"
|
||||
labels. Set real prices before publishing publicly. (No fabricated numbers were invented.)
|
||||
- Confirm all copy (phone/contact info, offer details) is accurate before going live.
|
||||
- Optional: add real product screenshots / a real demo link to replace/augment the CSS chat mockup.
|
||||
@@ -1,647 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="th" data-page-lang="th">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
|
||||
<title>Sales Trainer — ฝึกปิดการขาย กับลูกค้า AI ที่ต่อรองและปฏิเสธจริง</title>
|
||||
<meta name="description" content="Sales Trainer: โปรแกรมฝึกขายระดับองค์กร ให้พนักงานแชต 1:1 กับลูกค้าจำลอง 15 คนที่มีปัญหาจริง, ต่อรองจริง และมี AI โค้ชแนะนำวิธีตอบให้ดีขึ้นในทุกข้อความ">
|
||||
<meta property="og:title" content="Sales Trainer — ฝึกปิดการขายกับลูกค้า AI ที่ต่อรองจริง">
|
||||
<meta property="og:description" content="อัปโหลดสินค้า → AI สร้างลูกค้าจำลอง 15 คนที่มีปัญหาและข้อต่อรองจริง → พนักงานแชตฝึกปิดการขาย ได้รับโค้ชแนะนำแบบต่อข้อความ">
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Sarabun:wght@400;500;600;700&display=swap" rel="stylesheet">
|
||||
<link rel="stylesheet" href="main.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- ================= NAV (N5 floating pill) ================= -->
|
||||
<nav class="nav" aria-label="Main">
|
||||
<div class="nav__inner">
|
||||
<a class="nav__brand" href="#top">
|
||||
<span class="nav__mark" aria-hidden="true">
|
||||
<svg class="lucide" viewBox="0 0 24 24"><path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z"/></svg>
|
||||
</span>
|
||||
Sales Trainer
|
||||
</a>
|
||||
<div class="nav__links">
|
||||
<a class="nav__link" href="#how" data-lang="th">วิธีใช้งาน</a>
|
||||
<a class="nav__link" href="#how" data-lang="en">How it works</a>
|
||||
<a class="nav__link" href="#tiers" data-lang="th">เกรดลูกค้า</a>
|
||||
<a class="nav__link" href="#tiers" data-lang="en">Tiers</a>
|
||||
<a class="nav__link" href="#pricing" data-lang="th">ราคา</a>
|
||||
<a class="nav__link" href="#pricing" data-lang="en">Pricing</a>
|
||||
<a class="nav__link" href="#faq" data-lang="th">คำถาม</a>
|
||||
<a class="nav__link" href="#faq" data-lang="en">FAQ</a>
|
||||
</div>
|
||||
<div class="nav__cta">
|
||||
<div class="lang" role="group" aria-label="Language">
|
||||
<button class="lang__btn" data-lang-btn="th" aria-pressed="true">TH</button>
|
||||
<button class="lang__btn" data-lang-btn="en" aria-pressed="false">EN</button>
|
||||
</div>
|
||||
<a class="btn btn--primary" href="#cta" data-lang="th">ขอเดโม</a>
|
||||
<a class="btn btn--primary" href="#cta" data-lang="en">Book demo</a>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- ================= HERO (workbench open) ================= -->
|
||||
<header class="hero" id="top">
|
||||
<div class="container">
|
||||
<div class="hero__grid">
|
||||
<div class="hero__copy reveal" style="--i:0">
|
||||
<span class="hero__tag" data-lang="th">สำหรับทีมขาย · องค์กรไทย</span>
|
||||
<span class="hero__tag" data-lang="en">For Thai sales teams</span>
|
||||
<h1 data-lang="th">ฝึกปิดการขาย กับ<span class="u">ลูกค้า AI ที่ต่อรองและปฏิเสธจริง</span></h1>
|
||||
<h1 data-lang="en">Practice closing deals against <span class="u">AI customers who push back</span></h1>
|
||||
<p class="hero__lede" data-lang="th">
|
||||
อัปโหลดหรืออธิบายสินค้าใน 5 นาที — AI จะสร้างลูกค้าจำลอง <strong>15 คน</strong> ที่มีปัญหา ความลังเล
|
||||
และข้อต่อรองเหมือนจริง พนักงานของคุณแชต 1:1 เพื่อปิดการขาย แล้วได้รับ <strong>AI โค้ชแนะนำวิธีตอบให้ดีขึ้น</strong>
|
||||
ทุกข้อความ ไม่ใช่แค่คะแนน
|
||||
</p>
|
||||
<p class="hero__lede" data-lang="en">
|
||||
Describe your product in five minutes. AI builds <strong>15 customer personas</strong> with real pains,
|
||||
doubts and negotiation levers. Your reps chat one-on-one to close the sale and get <strong>per-message coaching</strong>
|
||||
on how to answer better — not just a score.
|
||||
</p>
|
||||
<div class="hero__actions">
|
||||
<a class="btn btn--accent" href="#cta" data-lang="th">ขอทดลอง / รับเดโม</a>
|
||||
<a class="btn btn--accent" href="#cta" data-lang="en">Request a demo</a>
|
||||
<a class="btn btn--ghost" href="#tour" data-lang="th">ดูตัวอย่างบทสนทนา ↓</a>
|
||||
<a class="btn btn--ghost" href="#tour" data-lang="en">See a live example ↓</a>
|
||||
</div>
|
||||
<p class="hero__note" data-lang="th">ภาษาไทย + อังกฤษ · ใช้กับ LINE / Facebook / โทรศัพท์ · เหมาะกับทีมขาย B2B</p>
|
||||
<p class="hero__note" data-lang="en">TH + EN · for LINE / Facebook / phone selling · built for B2B teams</p>
|
||||
</div>
|
||||
|
||||
<div class="hero__visual reveal" style="--i:1" aria-hidden="true">
|
||||
<div class="hero__phone-glow"></div>
|
||||
<div class="chat">
|
||||
<div class="chat__bar">
|
||||
<div class="chat__avatar" style="--i:0">คุณ</div>
|
||||
<div class="chat__who">
|
||||
<div class="chat__name">คุณภา — เจ้าของร้านกาแฟ</div>
|
||||
<div class="chat__meta" data-lang="th">เกรด C · ยังไม่สนใจ แต่มีปัญหา</div>
|
||||
<div class="chat__meta" data-lang="en">Tier C · unsold, in pain</div>
|
||||
</div>
|
||||
<span class="chat__status"><span class="dot"></span><span data-lang="th">ออนไลน์</span><span data-lang="en">online</span></span>
|
||||
</div>
|
||||
<div class="chat__body">
|
||||
<div class="msg theirs">
|
||||
<div class="msg__bubble">เปิดร้าน 8 โมงถึง 6 โมง ฉันไม่มีเวลาคุยหรอก ขายรถอะไรก็เข้าเรื่องมาเลย</div>
|
||||
<span class="msg__time">09:41</span>
|
||||
</div>
|
||||
<div class="msg mine">
|
||||
<div class="msg__bubble">เข้าใจครับ ร้านเปิดทั้งวันไม่สะดวกเสียเวลาคุย ฉันเข้าใจ — ขอถามสั้นๆ หน่อยได้ไหมว่า ช่วงพีคที่คนเยอะๆ รถส่งของรอบเดียวทันไหมครับ?</div>
|
||||
<span class="msg__time">09:42</span>
|
||||
</div>
|
||||
<div class="msg theirs">
|
||||
<div class="msg__bubble">…ก็วันเสาร์บ่ายๆ บางทีไม่ทัน แล้วมันเกี่ยวอะไรกับรถ?</div>
|
||||
<span class="msg__time">09:43</span>
|
||||
</div>
|
||||
<div class="coach">
|
||||
<div class="coach__head">
|
||||
<span class="coach__badge">
|
||||
<svg class="lucide" viewBox="0 0 24 24"><path d="M12 2a10 10 0 0 1 10 10 10 10 0 0 1-10 10A10 10 0 0 1 2 12 10 10 0 0 1 12 2z"/><path d="m7 13 3 3 7-7"/></svg>
|
||||
AI Coach
|
||||
</span>
|
||||
<span class="coach__score" data-lang="th">ข้อก่อนหน้า: 62 · <strong>ข้อนี้ 84</strong> ↑</span>
|
||||
<span class="coach__score" data-lang="en">last 62 · this 84 ↑</span>
|
||||
</div>
|
||||
<p class="coach__text" data-lang="th"><strong>ทำได้ดี</strong> — คุณอ้างอิงปัญหาจริง (เวลาพีคไม่ทัน) แทนที่จะขายตรงๆ ลองทวนประโยคนี้: «เข้าใจว่าวันเสาร์บ่ายคนเยอะ» แล้วค่อยชวนคุยเรื่องรอบส่ง ยังอย่าพูดราคาก่อน เกรด C จะปิดยากถ้ายังไม่ได้แก้ปม</p>
|
||||
<p class="coach__text" data-lang="en"><strong>Good turn.</strong> You anchored on a real pain (peak-hour backlog) instead of selling cold. Parrot their words, then raise delivery — hold off on price. Tier-C won't close until the pain is solved.</p>
|
||||
<a class="btn btn--ghost" href="#coach" data-lang="th">เห็นโค้ชหลังจบเกม</a>
|
||||
<a class="btn btn--ghost" href="#coach" data-lang="en">See the full debrief</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="chat__input" aria-hidden="true">
|
||||
<span class="field" data-lang="th">พิมพ์ข้อความ…</span>
|
||||
<span class="field" data-lang="en">Type a message…</span>
|
||||
<button class="send" tabindex="-1" aria-hidden="true">
|
||||
<svg class="lucide" viewBox="0 0 24 24"><path d="m22 2-7 20-4-9-9-4z"/><path d="M22 2 11 13"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main id="tour">
|
||||
|
||||
<!-- ================= HOW IT WORKS ================= -->
|
||||
<section class="section" id="how">
|
||||
<div class="container">
|
||||
<div class="shead reveal" style="--i:0">
|
||||
<span class="shead__label" data-lang="th">วิธีใช้งาน</span>
|
||||
<span class="shead__label" data-lang="en">How it works</span>
|
||||
<h2 data-lang="th">จากสินค้าของคุณ สู่พนักงานที่ปิดขายเก่งขึ้น — ใน 3 ขั้น</h2>
|
||||
<h2 data-lang="en">From your product to sharper closers — in three steps</h2>
|
||||
</div>
|
||||
<div class="steps">
|
||||
<div class="step reveal" style="--i:1">
|
||||
<h3 data-lang="th">ป้อนสินค้า / บริการ / ไอเดีย</h3>
|
||||
<h3 data-lang="en">Describe your product</h3>
|
||||
<p data-lang="th">Admin อัปโหลดไฟล์หรือพิมพ์คำอธิบายสินค้า บริการ หรือไอเดียใหม่ ระบบใช้ข้อมูลจริงเพื่อดึง "ปัญหาของลูกค้า" ออกมา ไม่ใช่จากสูตรสำเร็จทั่วไป</p>
|
||||
<p data-lang="en">Admins upload a file or describe the product, service or idea. The system pulls real customer pains from your actual offer — not generic scripts.</p>
|
||||
<div class="pills"><span class="pill">PDF · MD · TXT</span><span class="pill">ฟอร์ม</span><span class="pill">หลายผลิตภัณฑ์</span></div>
|
||||
</div>
|
||||
<div class="step reveal" style="--i:2">
|
||||
<h3 data-lang="th">AI สร้างลูกค้าจำลอง 15 คน</h3>
|
||||
<h3 data-lang="en">AI builds 15 personas</h3>
|
||||
<p data-lang="th">ระบบสร้างลูกค้า 15 คน เกรด A/B/C เกรดละ 5 คน แต่ละคนมีปัญหา จุดต่อรอง และวิธีเปิดบทสนทนาที่ต่างกัน — เหมือนได้ทีมเพื่อนร่วมงานที่เล่นบทลูกค้าจริง</p>
|
||||
<p data-lang="en">Fifteen personas — five per buying-intent tier — each with distinct pains, negotiation levers and conversation openers. Like a full role-play cast that never tires.</p>
|
||||
<div class="pills"><span class="pill">เกรด A/B/C</span><span class="pill">LINE / Facebook</span><span class="pill">ปรับเองได้</span></div>
|
||||
</div>
|
||||
<div class="step reveal" style="--i:3">
|
||||
<h3 data-lang="th">พนักงานแชตฝึก + ได้โค้ช</h3>
|
||||
<h3 data-lang="en">Reps chat, then get coached</h3>
|
||||
<p data-lang="th">แชต 1:1 เหมือนคุยจริง ลูกค้าต่อรอง ถ่วง และไม่ยอมซื้อถ้ายังไม่แก้ปม หลังแต่ละข้อความและหลังจบเกม AI โค้ชบอกวิธีตอบให้ดีขึ้น พร้อมสรุปจุดอ่อน</p>
|
||||
<p data-lang="en">One-on-one chat, exactly like reality. Customers negotiate, stall and refuse until the pain is resolved. A judge AI coaches every weak turn and summarises your weak areas.</p>
|
||||
<div class="pills"><span class="pill">โค้ชต่อข้อความ</span><span class="pill">สรุปจุดอ่อน</span><span class="pill">ติดตามผล</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ================= CORE EXPERIENCE / WORKBENCH 1 ================= -->
|
||||
<section class="section section--tint" id="experience">
|
||||
<div class="container">
|
||||
<div class="shead reveal" style="--i:0">
|
||||
<span class="shead__label" data-lang="th">ประสบการณ์หลัก</span>
|
||||
<span class="shead__label" data-lang="en">The core moment</span>
|
||||
<h2 data-lang="th">บทสนทนาที่เหมือนจริง มากกว่าการโรลเพลย์กับเพื่อนร่วมงาน</h2>
|
||||
<h2 data-lang="en">Conversations that feel real — not role-play with a colleague</h2>
|
||||
</div>
|
||||
|
||||
<div class="frame reveal" style="--i:1">
|
||||
<div class="frame__media" aria-hidden="true">
|
||||
<div class="chat">
|
||||
<div class="chat__bar">
|
||||
<div class="chat__avatar" style="--i:0">กบ</div>
|
||||
<div class="chat__who">
|
||||
<div class="chat__name">คุณกบ — ผู้จัดการฝ่ายซื้อ</div>
|
||||
<div class="chat__meta" data-lang="th">เกรด B · ลังเล กำลังหาข้อมูล</div>
|
||||
<div class="chat__meta" data-lang="en">Tier B · unsure, researching</div>
|
||||
</div>
|
||||
<span class="chat__status"><span class="dot"></span><span data-lang="th">พิมพ์…</span><span data-lang="en">typing…</span></span>
|
||||
</div>
|
||||
<div class="chat__body">
|
||||
<div class="msg theirs">
|
||||
<div class="msg__bubble">ราคาแพงไปนี่นา ของคู่แข่งถูกกว่าตั้ง 20%</div>
|
||||
<span class="msg__time">10:02</span>
|
||||
</div>
|
||||
<div class="msg mine">
|
||||
<div class="msg__bubble">20% จริงๆ นะครับ… งั้นช่วยบอกหน่อยได้ไหมว่า ราคาต่าง 20% นั้น ตัดฟีเจอร์อะไรออกไปบ้างใจเราส่งให้ครบ</div>
|
||||
<span class="msg__time">10:03</span>
|
||||
</div>
|
||||
<div class="typing"><i></i><i></i><i></i></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="frame__copy">
|
||||
<h3 data-lang="th">ลูกค้าทุกเกรด "ต่อรองได้" และ "แพ้ได้"</h3>
|
||||
<h3 data-lang="en">Every tier negotiates — and every tier can lose you</h3>
|
||||
<p data-lang="th">ลูกค้า A ที่พร้อมซื้อก็ยังเถียงเรื่องส่วนลด ลูกค้า C ที่บอกว่าไม่สนใจก็ยังมีปมที่แก้ได้ ความจริงคือการขายไม่มีบทที่เขียนไว้แล้ว — และเกมนี้ก็ไม่ได้การันตีชัยชนะให้ใคร</p>
|
||||
<p data-lang="en">Ready-to-buy A-tiers still haggle on discount. Not-interested C-tiers still hide a pain you could solve. Real selling has no script — and this game guarantees nobody a win.</p>
|
||||
<ul class="lines">
|
||||
<li>
|
||||
<span class="ic"><svg class="lucide" viewBox="0 0 24 24"><path d="M12 2a10 10 0 0 1 10 10 10 10 0 0 1-10 10A10 10 0 0 1 2 12 10 10 0 0 1 12 2z"/><path d="m7 13 3 3 7-7"/></svg></span>
|
||||
<span data-lang="th">เลเวอเรจต่อรอง: ราคา, ของแถม, รอบส่ง, ขอบเขตงาน, เงื่อนไขชำระ</span>
|
||||
<span data-lang="en">Negotiation levers: price, freebies, delivery, scope, payment</span>
|
||||
</li>
|
||||
<li>
|
||||
<span class="ic"><svg class="lucide" viewBox="0 0 24 24"><path d="M12 2a10 10 0 0 1 10 10 10 10 0 0 1-10 10A10 10 0 0 1 2 12 10 10 0 0 1 12 2z"/><path d="m7 13 3 3 7-7"/></svg></span>
|
||||
<span data-lang="th">ลูกค้าอาจ "ดูเหมือนจะซื้อ" แล้วถอนใจ — เกรด C แบบพิเศษ</span>
|
||||
<span data-lang="en">Some persona appears to buy, stumbles, still carries pain</span>
|
||||
</li>
|
||||
<li>
|
||||
<span class="ic"><svg class="lucide" viewBox="0 0 24 24"><path d="M12 2a10 10 0 0 1 10 10 10 10 0 0 1-10 10A10 10 0 0 1 2 12 10 10 0 0 1 12 2z"/><path d="m7 13 3 3 7-7"/></svg></span>
|
||||
<span data-lang="th">การเริ่มขายก็มีหลากหลาย — ลูกค้าอาจเปิดบท หรือให้พนักงานเปิดเอง (เช่น ประกัน)</span>
|
||||
<span data-lang="en">Outbound mode too — your rep opens the sale, like insurance</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ================= COACHING / WORKBENCH 2 ================= -->
|
||||
<section class="section" id="coach">
|
||||
<div class="container">
|
||||
<div class="frame frame--rev reveal" style="--i:0">
|
||||
<div class="frame__copy">
|
||||
<h3 data-lang="th">ไม่ใช่แค่คะแนน — คือโค้ชที่บอกว่า "ข้อนี้ควรตอบแบบไหน"</h3>
|
||||
<h3 data-lang="en">Not just a score — a coach that shows you how to answer</h3>
|
||||
<p data-lang="th">หลังจบแต่ละเกม AI ผู้ตัดสินแยกอิสระ (ไม่มีตัวช่วยเรื่องความเร็ว) จะสรุปว่าเกมแพ้หรือชนะ ให้โค้ชต่อข้อความอ่อนๆ พร้อมคำแนะนำ วิเคราะห์จุดอ่อนซ้ำๆ และกระดานชนะ/แพ้ เพื่อให้ผู้จัดการเห็นว่าใครปิดยากตรงไหน</p>
|
||||
<p data-lang="en">A separate judge LLM (no speed bias) scores each turn, then a coach explains how to improve the weak ones. You get a weak-area analysis and a win/lose board — so managers see exactly where reps struggle.</p>
|
||||
<ul class="lines">
|
||||
<li>
|
||||
<span class="ic"><svg class="lucide" viewBox="0 0 24 24"><path d="M12 2a10 10 0 0 1 10 10 10 10 0 0 1-10 10A10 10 0 0 1 2 12 10 10 0 0 1 12 2z"/><path d="m7 13 3 3 7-7"/></svg></span>
|
||||
<span data-lang="th">ค่าเฉลี่ย 71 ของบาร์ส่งของ → สร้างเกมซ้ำปมนั้นให้พนักงาน</span>
|
||||
<span data-lang="en">Persistent weak area → one-shot practice until it's fixed</span>
|
||||
</li>
|
||||
<li>
|
||||
<span class="ic"><svg class="lucide" viewBox="0 0 24 24"><path d="M12 2a10 10 0 0 1 10 10 10 10 0 0 1-10 10A10 10 0 0 1 2 12 10 10 0 0 1 12 2z"/><path d="m7 13 3 3 7-7"/></svg></span>
|
||||
<span data-lang="th">ลูกค้าคนหนึ่งคุยได้ครั้งเดียว — จึงต้องตั้งใจจริง เหมือนบทจริง</span>
|
||||
<span data-lang="en">One persona, one shot — focus like a real lead</span>
|
||||
</li>
|
||||
<li>
|
||||
<span class="ic"><svg class="lucide" viewBox="0 0 24 24"><path d="M12 2a10 10 0 0 1 10 10 10 10 0 0 1-10 10A10 10 0 0 1 2 12 10 10 0 0 1 12 2z"/><path d="m7 13 3 3 7-7"/></svg></span>
|
||||
<span data-lang="th">ธุรกิจของคุณเอง สร้างลูกค้าจำลองต่อยอดจากจุดอ่อนทีมได้</span>
|
||||
<span data-lang="en">Admins mint new personas from real weak areas</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="frame__media" aria-hidden="true">
|
||||
<div class="chat">
|
||||
<div class="chat__bar">
|
||||
<div class="chat__avatar" style="--i:0">ผ</div>
|
||||
<div class="chat__who"><div class="chat__name">รายงานเกมจบ</div><div class="chat__meta" data-lang="th">ยอดรวม 12 คน</div><div class="chat__meta" data-lang="en">12 personas</div></div>
|
||||
</div>
|
||||
<div class="chat__body">
|
||||
<div class="coach" style="max-width:100%">
|
||||
<div class="coach__head">
|
||||
<span class="coach__badge"><svg class="lucide" viewBox="0 0 24 24"><path d="M12 2a10 10 0 0 1 10 10 10 10 0 0 1-10 10A10 10 0 0 1 2 12 10 10 0 0 1 12 2z"/><path d="m7 13 3 3 7-7"/></svg> Debrief</span>
|
||||
<span class="coach__score" data-lang="th">ชนะ 8 · แพ้ 4</span>
|
||||
<span class="coach__score" data-lang="en">8 won · 4 lost</span>
|
||||
</div>
|
||||
<p class="coach__text" data-lang="th"><strong>จุดอ่อนซ้ำ: การรับมือข้อโต้แย้งเรื่องราคา</strong> — แพ้ 3 เกมจากปมราคา โดยเฉพาะเกรด C. ลองฝึกรอบใหม่เฉพาะบท "ลูกค้าถามราคาก่อน" ได้จากปุ่มด้านล่าง ข้อแนะนำ: ทวนราคาคู่แข่งก่อน แล้วชี้สิ่งที่ต่าง ไม่ใช่ลดราคาทันที</p>
|
||||
<p class="coach__text" data-lang="en"><strong>Recurring weak area: handling price objections.</strong> 3 of 4 losses came from price, mostly vs Tier C. Re-practice the "they ask price first" scenario. Tip: mirror their figure before reframing value — don't cave to discount.</p>
|
||||
<div class="chat__input" style="border:0;padding:var(--space-sm) 0 0;background:transparent">
|
||||
<span class="btn btn--accent" data-lang="th">ฝึกซ้ำปมราคา</span>
|
||||
<span class="btn btn--accent" data-lang="en">Re-practice price</span>
|
||||
</div>
|
||||
<div class="chat__input" style="border:0;padding:var(--space-sm) 0 0;background:transparent">
|
||||
<span class="btn btn--ghost" data-lang="th">ดูกระดานชนะ/แพ้ ของทีม</span>
|
||||
<span class="btn btn--ghost" data-lang="en">Team win/lose board</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ================= PERSONA TIERS ================= -->
|
||||
<section class="section section--tint" id="tiers">
|
||||
<div class="container">
|
||||
<div class="shead center reveal" style="--i:0">
|
||||
<span class="shead__label" data-lang="th">เกรดลูกค้า</span>
|
||||
<span class="shead__label" data-lang="en">Persona tiers</span>
|
||||
<h2 data-lang="th">15 ลูกค้าจำลอง แบ่งตามความพร้อมซื้อ</h2>
|
||||
<h2 data-lang="en">Fifteen personas, ranked by buying intent</h2>
|
||||
<p data-lang="th">ทุกเกรดมีคนที่แพ้ให้ได้ — ยิ่งเกรด C ยิ่งต้องแก้ปมก่อนจึงจะปิดได้</p>
|
||||
<p data-lang="en">Every tier can lose you. Tier C most of all — you must solve the pain before anything closes.</p>
|
||||
</div>
|
||||
<div class="tiers">
|
||||
<div class="tier reveal" style="--i:1">
|
||||
<div class="tier__letter">A</div>
|
||||
<h3 data-lang="th">พร้อมซื้อ</h3>
|
||||
<h3 data-lang="en">Ready to buy</h3>
|
||||
<p class="tier__sub" data-lang="th">มีปัญหาและกำลังตัดสินใจ แต่ก็ยังต่อรอง</p>
|
||||
<p class="tier__sub" data-lang="en">In pain and deciding — but still haggles.</p>
|
||||
<ul>
|
||||
<li><span class="ic"><svg class="lucide" viewBox="0 0 24 24"><path d="M12 2a10 10 0 0 1 10 10 10 10 0 0 1-10 10A10 10 0 0 1 2 12 10 10 0 0 1 12 2z"/><path d="m7 13 3 3 7-7"/></svg></span><span data-lang="th">ต้องการส่วนลด ของแถม รอบส่ง</span><span data-lang="en">Wants discount, freebies, delivery</span></li>
|
||||
<li><span class="ic"><svg class="lucide" viewBox="0 0 24 24"><path d="M12 2a10 10 0 0 1 10 10 10 10 0 0 1-10 10A10 10 0 0 1 2 12 10 10 0 0 1 12 2z"/><path d="m7 13 3 3 7-7"/></svg></span><span data-lang="th">ให้ปิดได้ถ้าขายเข้าปมและจัดการข้อต่อรอง</span><span data-lang="en">Closes if you hit the pain and handle the ask</span></li>
|
||||
</ul>
|
||||
<p class="tier__foot" data-lang="th">จำนวน: 5 คน</p>
|
||||
<p class="tier__foot" data-lang="en">Count: 5 personas</p>
|
||||
</div>
|
||||
<div class="tier reveal" style="--i:2">
|
||||
<div class="tier__letter">B</div>
|
||||
<h3 data-lang="th">ลังเล กำลังศึกษา</h3>
|
||||
<h3 data-lang="en">Unsure, researching</h3>
|
||||
<p class="tier__sub" data-lang="th">ยังไม่เชื่อ ยังเปรียบเทียบ ต้องการข้อมูลและความไว้วางใจ</p>
|
||||
<p class="tier__sub" data-lang="en">On the fence, comparing options, needs trust.</p>
|
||||
<ul>
|
||||
<li><span class="ic"><svg class="lucide" viewBox="0 0 24 24"><path d="M12 2a10 10 0 0 1 10 10 10 10 0 0 1-10 10A10 10 0 0 1 2 12 10 10 0 0 1 12 2z"/><path d="m7 13 3 3 7-7"/></svg></span><span data-lang="th">ถามเยอะ อ้างคู่แข่ง อ้างงบ</span><span data-lang="en">Asks a lot, cites competitors and budget</span></li>
|
||||
<li><span class="ic"><svg class="lucide" viewBox="0 0 24 24"><path d="M12 2a10 10 0 0 1 10 10 10 10 0 0 1-10 10A10 10 0 0 1 2 12 10 10 0 0 1 12 2z"/><path d="m7 13 3 3 7-7"/></svg></span><span data-lang="th">ต้องสร้างเหตุผลซื้อก่อน ไม่งั้นหดตัว</span><span data-lang="en">Needs a reason to buy or it stalls</span></li>
|
||||
</ul>
|
||||
<p class="tier__foot" data-lang="th">จำนวน: 5 คน</p>
|
||||
<p class="tier__foot" data-lang="en">Count: 5 personas</p>
|
||||
</div>
|
||||
<div class="tier tier--hardest reveal" style="--i:3">
|
||||
<div class="tier__letter">C</div>
|
||||
<h3 data-lang="th">ไม่สนใจ แต่มีปม (ยากสุด)</h3>
|
||||
<h3 data-lang="en">Not interested — but in pain</h3>
|
||||
<p class="tier__sub" data-lang="th">บอกว่าไม่ซื้อ แต่มีปัญหาที่แก้ได้ ถ้าเข้าไปถึงปม</p>
|
||||
<p class="tier__sub" data-lang="en">Says no, yet carries a solvable pain.</p>
|
||||
<ul>
|
||||
<li><span class="ic"><svg class="lucide" viewBox="0 0 24 24"><path d="M12 2a10 10 0 0 1 10 10 10 10 0 0 1-10 10A10 10 0 0 1 2 12 10 10 0 0 1 12 2z"/><path d="m7 13 3 3 7-7"/></svg></span><span data-lang="th">มี "ปมแดง" ที่ไม่เกี่ยวข้องโดยตรง — ต้องแยกให้ออก</span><span data-lang="en">Carries a red-herring pain — learn to tell them apart</span></li>
|
||||
<li><span class="ic"><svg class="lucide" viewBox="0 0 24 24"><path d="M12 2a10 10 0 0 1 10 10 10 10 0 0 1-10 10A10 10 0 0 1 2 12 10 10 0 0 1 12 2z"/><path d="m7 13 3 3 7-7"/></svg></span><span data-lang="th">ผู้ขายต้องเปิดบท (outbound) — ใช้กับประกัน / B2B</span><span data-lang="en">Rep must open the sale — outbound selling</span></li>
|
||||
<li><span class="ic"><svg class="lucide" viewBox="0 0 24 24"><path d="M12 2a10 10 0 0 1 10 10 10 10 0 0 1-10 10A10 10 0 0 1 2 12 10 10 0 0 1 12 2z"/><path d="m7 13 3 3 7-7"/></svg></span><span data-lang="th">ไม่แก้ปมก่อน = แพ้ ไม่ว่าขายเก่งแค่ไหน</span><span data-lang="en">Skip the pain and you lose, no matter how well you pitch</span></li>
|
||||
</ul>
|
||||
<p class="tier__foot" data-lang="th">จำนวน: 5 คน (รวมแบบ "ดูเหมือนซื้อแต่ถอน")</p>
|
||||
<p class="tier__foot" data-lang="en">Count: 5 (incl. the "nearly bought" one)</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ================= WHY / VALUE PROPS ================= -->
|
||||
<section class="section" id="why">
|
||||
<div class="container">
|
||||
<div class="shead reveal" style="--i:0">
|
||||
<span class="shead__label" data-lang="th">ทำไมต้อง Sales Trainer</span>
|
||||
<span class="shead__label" data-lang="en">Why it works</span>
|
||||
<h2 data-lang="th">ที่ที่โรลเพลย์กับเพื่อนร่วมงานไปไม่ถึง</h2>
|
||||
<h2 data-lang="en">Where colleague role-play can't reach</h2>
|
||||
</div>
|
||||
<div class="props">
|
||||
<div class="prop reveal" style="--i:1">
|
||||
<span class="ic"><svg class="lucide" viewBox="0 0 24 24"><path d="M12 2a10 10 0 0 1 10 10 10 10 0 0 1-10 10A10 10 0 0 1 2 12 10 10 0 0 1 12 2z"/><path d="m9 12 2 2 4-4"/></svg></span>
|
||||
<h3 data-lang="th">ลูกค้าจำลองมี "ปัญหาจริง"</h3>
|
||||
<h3 data-lang="en">Personas with real pains</h3>
|
||||
<p data-lang="th">ปัญหา ความลังเล และจุดต่อรอง มาจากข้อมูลสินค้าของคุณจริง ไม่ใช่บทที่ตายตัว พนักงานเจอสถานการณ์ที่ไม่มีทางลัด</p>
|
||||
<p data-lang="en">Pains, doubts and levers derive from your actual offer — no shortcut scripts, no canned responses.</p>
|
||||
</div>
|
||||
<div class="prop wide reveal" style="--i:2">
|
||||
<span class="ic"><svg class="lucide" viewBox="0 0 24 24"><path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"/><path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"/></svg></span>
|
||||
<h3 data-lang="th">โค้ชต่อข้อความ + สรุปจบเกม — ไม่ใช่แค่คะแนน</h3>
|
||||
<h3 data-lang="en">Per-turn coaching + debrief — not just a number</h3>
|
||||
<p data-lang="th">AI ผู้ตัดสินจะชี้ว่าข้อไหนอ่อน แล้วบอกวิธีตอบให้ดีขึ้น พร้อมวิเคราะห์จุดอ่อนซ้ำและกระดานชนะ/แพ้ ให้ผู้จัดการเห็นภาพว่าใครฝึกอะไรต่อ</p>
|
||||
<p data-lang="en">A judge LLM flags weak turns and shows how to answer better, then surfaces recurring weak areas and a win/lose board for managers to act on.</p>
|
||||
</div>
|
||||
<div class="prop reveal" style="--i:3">
|
||||
<span class="ic"><svg class="lucide" viewBox="0 0 24 24"><path d="M13 2 3 14h9l-1 8 10-12h-9l1-8z"/></svg></span>
|
||||
<h3 data-lang="th">โอกาสเดียว เหมือนลูกค้าจริง</h3>
|
||||
<h3 data-lang="en">One shot, like a real deal</h3>
|
||||
<p data-lang="th">ลูกค้าคนหนึ่งคุยได้ครั้งเดียว ความตั้งใจจึงเท่ากับการคุยกับลีดจริง — ยกระดับความมุ่งมั่นของทุกเกม</p>
|
||||
<p data-lang="en">Each persona can be chatted once — the attention of a real lead, and the stakes to match.</p>
|
||||
</div>
|
||||
<div class="prop wide reveal" style="--i:4">
|
||||
<span class="ic"><svg class="lucide" viewBox="0 0 24 24"><path d="M3 3v18h18"/><path d="m19 9-5 5-4-4-3 3"/></svg></span>
|
||||
<h3 data-lang="th">แดชบอร์ดผู้ดูแล — เห็นภาพรวมทั้งทีม</h3>
|
||||
<h3 data-lang="en">Admin analytics across the team</h3>
|
||||
<p data-lang="th">อัตราปิด คะแนนเฉลี่ย และ "ลูกค้าที่ปิดยากสุด" ต่อคนต่อทีม ผู้จัดการเห็นจุดแข็งจุดอ่อนก่อนประชุม ไม่ใช่หลังหมดเดือน</p>
|
||||
<p data-lang="en">Close rate, average score and the hardest personas per rep and per team — so managers see the gaps before the meeting, not after the month.</p>
|
||||
</div>
|
||||
<div class="prop reveal" style="--i:5">
|
||||
<span class="ic"><svg class="lucide" viewBox="0 0 24 24"><path d="M12 20h9"/><path d="M16.5 3.5a2.12 2.12 0 0 1 3 3L7 19l-4 1 1-4z"/></svg></span>
|
||||
<h3 data-lang="th">ปรับแต่งได้ ไม่ใช่กล่องปิด</h3>
|
||||
<h3 data-lang="en">Not a closed box</h3>
|
||||
<p data-lang="th">Admin แก้ไขลูกค้า เพิ่มลูกค้าจากจุดอ่อนทีม และสร้างเกมใหม่ได้ตามธุรกิจที่เปลี่ยนไป</p>
|
||||
<p data-lang="en">Admins hand-edit personas, mint new ones from weak areas, and spin up fresh scenarios as your business changes.</p>
|
||||
</div>
|
||||
<div class="prop reveal" style="--i:6">
|
||||
<span class="ic"><svg class="lucide" viewBox="0 0 24 24"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg></span>
|
||||
<h3 data-lang="th">ไทย + อังกฤษ</h3>
|
||||
<h3 data-lang="en">Thai + English</h3>
|
||||
<p data-lang="th">ใช้ได้สองภาษา เหมาะกับทีมที่ขายผ่าน LINE / Facebook / โทรศัพท์ กับลูกค้าทั้งไทยและต่างชาติ</p>
|
||||
<p data-lang="en">Fully bilingual — for teams selling on LINE, Facebook and phone to Thai and international buyers.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ================= WHO IT'S FOR ================= -->
|
||||
<section class="section section--tint" id="for">
|
||||
<div class="container">
|
||||
<div class="shead reveal" style="--i:0">
|
||||
<span class="shead__label" data-lang="th">เหมาะกับใคร</span>
|
||||
<span class="shead__label" data-lang="en">Who it's for</span>
|
||||
<h2 data-lang="th">สร้างขึ้นเพื่อคนที่ต้องรับผิดชอบผลการขาย</h2>
|
||||
<h2 data-lang="en">Built for the people accountable for sales results</h2>
|
||||
</div>
|
||||
<div class="aud">
|
||||
<div class="aud__card reveal" style="--i:1">
|
||||
<span class="ic"><svg class="lucide" viewBox="0 0 24 24"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M22 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg></span>
|
||||
<h3 data-lang="th">ผู้จัดการทีมขาย</h3>
|
||||
<h3 data-lang="en">Sales managers</h3>
|
||||
<p data-lang="th">อยากเห็นจุดอ่อนของทีมเป็นรายคน เลือกฝึกปมที่แพ้ซ้ำ และดันอัตราปิดขึ้นโดยไม่ต้องรอโรลเพลย์</p>
|
||||
<p data-lang="en">See per-rep weak spots, drill the losses, and lift close rate without waiting on role-play.</p>
|
||||
</div>
|
||||
<div class="aud__card reveal" style="--i:2">
|
||||
<span class="ic"><svg class="lucide" viewBox="0 0 24 24"><path d="M22 10v6M2 10l10-5 10 5-10 5z"/><path d="M6 12v5c3 3 9 3 12 0v-5"/></svg></span>
|
||||
<h3 data-lang="th">เทรนเนอร์ / ฝ่าย L&D</h3>
|
||||
<h3 data-lang="en">Trainers & L&D</h3>
|
||||
<p data-lang="th">ได้แบบฝึกหัดที่สเกลได้ ไม่ต้องจัดคู่คน ไม่ต้องเขียนบทใหม่ทุกครั้ง และวัดผลเป็นข้อมูลจริง</p>
|
||||
<p data-lang="en">A drill that scales — no pairing people up, no re-scripting, and outcomes measured as data.</p>
|
||||
</div>
|
||||
<div class="aud__card reveal" style="--i:3">
|
||||
<span class="ic"><svg class="lucide" viewBox="0 0 24 24"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><path d="M9 22V12h6v10"/></svg></span>
|
||||
<h3 data-lang="th">สถาบัน / เอเจนซี่ที่ขาย B2B</h3>
|
||||
<h3 data-lang="en">Academies & B2B sellers</h3>
|
||||
<p data-lang="th">บริษัทที่ขายผ่าน LINE, Facebook หรือโทรศัพท์ ต้องการพนักงานหน้าใหม่ที่ปิดเป็นเร็ว ไม่ใช่เรียนรู้กับลูกค้าจริง</p>
|
||||
<p data-lang="en">Teams selling via LINE, Facebook or phone that want new reps closing fast — not learning on real customers.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ================= PRICING ================= -->
|
||||
<section class="section" id="pricing">
|
||||
<div class="container">
|
||||
<div class="shead center reveal" style="--i:0">
|
||||
<span class="shead__label" data-lang="th">ราคา</span>
|
||||
<span class="shead__label" data-lang="en">Pricing</span>
|
||||
<h2 data-lang="th">แผนสำหรับทีมขาย</h2>
|
||||
<h2 data-lang="en">Plans for your team</h2>
|
||||
<p data-lang="th">ตัวเลขด้านล่างเป็นที่ยืนยันโดยเจ้าของ — กรุณาติดต่อเพื่อรับราคาจริง</p>
|
||||
<p data-lang="en">Amounts below await owner confirmation — contact us for the real figure.</p>
|
||||
</div>
|
||||
<div class="pricing">
|
||||
<div class="price reveal" style="--i:1">
|
||||
<div class="price__head">
|
||||
<div class="price__name" data-lang="th">ทีม</div>
|
||||
<div class="price__name" data-lang="en">Team</div>
|
||||
<div class="price__desc" data-lang="th">สำหรับทีมขาย SME ที่ต้องการเริ่มฝึกจริง</div>
|
||||
<div class="price__desc" data-lang="en">For SME sales teams ready to drill for real.</div>
|
||||
</div>
|
||||
<div class="price__amount">
|
||||
<span class="price__num">—<small> บาท</small></span>
|
||||
</div>
|
||||
<p class="price__per" data-lang="th">ต่อเดือน · รายเดือน / รายปี</p>
|
||||
<p class="price__per" data-lang="en">per month · monthly or yearly</p>
|
||||
<p class="price__confirm" data-lang="th">⏳ ราคาให้ยืนยันโดยเจ้าของ (placeholder)</p>
|
||||
<p class="price__confirm" data-lang="en">⏳ price to confirm by owner (placeholder)</p>
|
||||
<ul>
|
||||
<li><span class="ic"><svg class="lucide" viewBox="0 0 24 24"><path d="M12 2a10 10 0 0 1 10 10 10 10 0 0 1-10 10A10 10 0 0 1 2 12 10 10 0 0 1 12 2z"/><path d="m7 13 3 3 7-7"/></svg></span><span data-lang="th">ผู้ใช้งานไม่จำกัดภายในทีม</span><span data-lang="en">Unlimited users in-team</span></li>
|
||||
<li><span class="ic"><svg class="lucide" viewBox="0 0 24 24"><path d="M12 2a10 10 0 0 1 10 10 10 10 0 0 1-10 10A10 10 0 0 1 2 12 10 10 0 0 1 12 2z"/><path d="m7 13 3 3 7-7"/></svg></span><span data-lang="th">สร้างผลิตภัณฑ์และลูกค้า 15 คน</span><span data-lang="en">Build products & the 15 personas</span></li>
|
||||
<li><span class="ic"><svg class="lucide" viewBox="0 0 24 24"><path d="M12 2a10 10 0 0 1 10 10 10 10 0 0 1-10 10A10 10 0 0 1 2 12 10 10 0 0 1 12 2z"/><path d="m7 13 3 3 7-7"/></svg></span><span data-lang="th">โค้ช + สรุปจุดอ่อน + กระดานชนะ/แพ้</span><span data-lang="en">Coaching, weak areas & win/lose board</span></li>
|
||||
<li><span class="ic"><svg class="lucide" viewBox="0 0 24 24"><path d="M12 2a10 10 0 0 1 10 10 10 10 0 0 1-10 10A10 10 0 0 1 2 12 10 10 0 0 1 12 2z"/><path d="m7 13 3 3 7-7"/></svg></span><span data-lang="th">ไทย + อังกฤษ</span><span data-lang="en">Thai + English</span></li>
|
||||
</ul>
|
||||
<a class="btn btn--ghost" href="#cta" data-lang="th">สอบถามราคา</a>
|
||||
<a class="btn btn--ghost" href="#cta" data-lang="en">Ask for price</a>
|
||||
<p class="price__pick" data-lang="th">เริ่มต้นได้จากการทดลอง / เดโม</p>
|
||||
<p class="price__pick" data-lang="en">Start with a demo or pilot</p>
|
||||
</div>
|
||||
<div class="price price--featured reveal" style="--i:2">
|
||||
<div class="price__head">
|
||||
<div class="price__name" data-lang="th">องค์กร</div>
|
||||
<div class="price__name" data-lang="en">Enterprise</div>
|
||||
<div class="price__desc" data-lang="th">สำหรับหลายทีม หลายผลิตภัณฑ์ ต้องการวิเคราะห์ลึกแบบ enterprise</div>
|
||||
<div class="price__desc" data-lang="en">Multiple teams & products with deep analytics.</div>
|
||||
</div>
|
||||
<div class="price__amount">
|
||||
<span class="price__num">—<small> บาท</small></span>
|
||||
</div>
|
||||
<p class="price__per" data-lang="th">รายปี · ต่อรองได้</p>
|
||||
<p class="price__per" data-lang="en">yearly · negotiable</p>
|
||||
<p class="price__confirm" data-lang="th">⏳ ราคาให้ยืนยันโดยเจ้าของ (placeholder)</p>
|
||||
<p class="price__confirm" data-lang="en">⏳ price to confirm by owner (placeholder)</p>
|
||||
<ul>
|
||||
<li><span class="ic"><svg class="lucide" viewBox="0 0 24 24"><path d="M12 2a10 10 0 0 1 10 10 10 10 0 0 1-10 10A10 10 0 0 1 2 12 10 10 0 0 1 12 2z"/><path d="m7 13 3 3 7-7"/></svg></span><span data-lang="th">หลายทีม / หลายผลิตภัณฑ์</span><span data-lang="en">Multiple teams & products</span></li>
|
||||
<li><span class="ic"><svg class="lucide" viewBox="0 0 24 24"><path d="M12 2a10 10 0 0 1 10 10 10 10 0 0 1-10 10A10 10 0 0 1 2 12 10 10 0 0 1 12 2z"/><path d="m7 13 3 3 7-7"/></svg></span><span data-lang="th">แดชบอร์ดผู้ดูแลขั้นสูง (อัตราปิด / ปมยาก)</span><span data-lang="en">Advanced admin analytics (close rate / hard pains)</span></li>
|
||||
<li><span class="ic"><svg class="lucide" viewBox="0 0 24 24"><path d="M12 2a10 10 0 0 1 10 10 10 10 0 0 1-10 10A10 10 0 0 1 2 12 10 10 0 0 1 12 2z"/><path d="m7 13 3 3 7-7"/></svg></span><span data-lang="th">on-premise / SSO / สนับสนุนเฉพาะ</span><span data-lang="en">On-premise / SSO / dedicated support</span></li>
|
||||
<li><span class="ic"><svg class="lucide" viewBox="0 0 24 24"><path d="M12 2a10 10 0 0 1 10 10 10 10 0 0 1-10 10A10 10 0 0 1 2 12 10 10 0 0 1 12 2z"/><path d="m7 13 3 3 7-7"/></svg></span><span data-lang="th">เทรนนิ่งออนบอร์ดสำหรับทีมของคุณ</span><span data-lang="en">Onboarding training for your team</span></li>
|
||||
</ul>
|
||||
<a class="btn btn--accent" href="#cta" data-lang="th">ขอใบเสนอราคา</a>
|
||||
<a class="btn btn--accent" href="#cta" data-lang="en">Request a quote</a>
|
||||
<p class="price__pick" data-lang="th">เหมาะสำหรับบริษัทที่ต้องการควบคุมข้อมูลในองค์กร</p>
|
||||
<p class="price__pick" data-lang="en">Best when you want data in-house</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ================= FAQ ================= -->
|
||||
<section class="section section--tint" id="faq">
|
||||
<div class="container">
|
||||
<div class="shead center reveal" style="--i:0">
|
||||
<span class="shead__label" data-lang="th">คำถามที่พบบ่อย</span>
|
||||
<span class="shead__label" data-lang="en">FAQ</span>
|
||||
<h2 data-lang="th">คำถามที่ผู้จัดการทีมขายมักถาม</h2>
|
||||
<h2 data-lang="en">Questions sales managers ask</h2>
|
||||
</div>
|
||||
<div class="faq">
|
||||
<details class="accordion" open>
|
||||
<summary class="accordion__head">
|
||||
<span data-lang="th">Sales Trainer ต่างจากโรลเพลย์กับเพื่อนร่วมงานยังไง?</span>
|
||||
<span data-lang="en">How is this different from role-playing with colleagues?</span>
|
||||
<span class="chev"><svg class="lucide" viewBox="0 0 24 24"><path d="m6 9 6 6 6-6"/></svg></span>
|
||||
</summary>
|
||||
<div class="accordion__panel"><div>
|
||||
<p class="accordion__body" data-lang="th">ลูกค้าร่วมงานรู้อยู่แล้วว่าคุณจะพูดอะไร และไม่อยากทำให้คุณเสียหน้า จึงไม่เคยผลักดัน. ที่นี่ลูกค้า AI มีปัญหาจริง ต่อรองจริง ปฏิเสธจริง และมีโค้ชให้คำแนะนำทุกข้อความ — ไม่ใช่แฟนเพลงของคุณ</p>
|
||||
<p class="accordion__body" data-lang="en">Colleagues already know what you'll say and don't want to bruise you — so they never push. AI customers have real pains, negotiate and refuse, and a coach gives feedback on every turn. No hard feelings, no favours.</p>
|
||||
</div></div>
|
||||
</details>
|
||||
<details class="accordion">
|
||||
<summary class="accordion__head">
|
||||
<span data-lang="th">ต้องเตรียมอะไรมาก่อนไหม?</span>
|
||||
<span data-lang="en">How much prep do we need?</span>
|
||||
<span class="chev"><svg class="lucide" viewBox="0 0 24 24"><path d="m6 9 6 6 6-6"/></svg></span>
|
||||
</summary>
|
||||
<div class="accordion__panel"><div>
|
||||
<p class="accordion__body" data-lang="th">แค่คำอธิบายสินค้า บริการ หรือไอเดียของคุณ (พิมพ์หรืออัปโหลด PDF/MD/TXT). AI สร้างลูกค้า 15 คนให้อัตโนมัติ แล้ว admin แก้ไขเพิ่มเติมได้ตามต้องการ</p>
|
||||
<p class="accordion__body" data-lang="en">Just a description of your product, service or idea (typed or uploaded as PDF/MD/TXT). AI builds the 15 personas; admins can then hand-tune them.</p>
|
||||
</div></div>
|
||||
</details>
|
||||
<details class="accordion">
|
||||
<summary class="accordion__head">
|
||||
<span data-lang="th">ทีมขาย B2B ที่ขายผ่าน LINE / Facebook / โทรศัพท์ใช้ได้ไหม?</span>
|
||||
<span data-lang="en">Does it suit teams selling on LINE / Facebook / phone?</span>
|
||||
<span class="chev"><svg class="lucide" viewBox="0 0 24 24"><path d="m6 9 6 6 6-6"/></svg></span>
|
||||
</summary>
|
||||
<div class="accordion__panel"><div>
|
||||
<p class="accordion__body" data-lang="th">ได้. ระบบออกแบบมาเพื่อการสนทนาขายแบบไทยจริง — ตั้งช่องทาง LINE/Facebook, รองรับ outbound (ผู้ขายเปิดบท) เหมือนการขายประกันหรือ B2B และใช้ได้สองภาษาไทย/อังกฤษ</p>
|
||||
<p class="accordion__body" data-lang="en">Yes. It's built for real Thai conversation selling — set the channel to LINE or Facebook, support outbound opens (like insurance or B2B), and work in both Thai and English.</p>
|
||||
</div></div>
|
||||
</details>
|
||||
<details class="accordion">
|
||||
<summary class="accordion__head">
|
||||
<span data-lang="th">ลูกค้า AI "แพ้ให้" พนักงานได้จริงไหม?</span>
|
||||
<span data-lang="en">Can the AI customer actually lose?</span>
|
||||
<span class="chev"><svg class="lucide" viewBox="0 0 24 24"><path d="m6 9 6 6 6-6"/></svg></span>
|
||||
</summary>
|
||||
<div class="accordion__panel"><div>
|
||||
<p class="accordion__body" data-lang="th">ได้และตั้งใจให้เป็นแบบนั้น. ทุกเกรดต่อรองและปฏิเสธได้; เกรด C แพ้ได้ถ้ายังไม่แก้ปม ที่สำคัญลูกค้าคนหนึ่งคุยได้ครั้งเดียว ทำให้เกมไม่มีทางลัดและผลคือจริงจัง</p>
|
||||
<p class="accordion__body" data-lang="en">Yes — by design. Every tier negotiates and can refuse; Tier C won't close until the pain is solved. And each persona can only be chatted once, so there's no gaming the system.</p>
|
||||
</div></div>
|
||||
</details>
|
||||
<details class="accordion">
|
||||
<summary class="accordion__head">
|
||||
<span data-lang="th">โค้ช AI ตัดสินแบบไหน?</span>
|
||||
<span data-lang="en">How is the AI judge / coach powered?</span>
|
||||
<span class="chev"><svg class="lucide" viewBox="0 0 24 24"><path d="m6 9 6 6 6-6"/></svg></span>
|
||||
</summary>
|
||||
<div class="accordion__panel"><div>
|
||||
<p class="accordion__body" data-lang="th">มีตัวตัดสิน (judge) แยกจากผู้เล่น ทำให้คะแนนไม่เอนเอียงด้วยความเร็ว แล้วโค้ชอีกระบบหนึ่งจะให้คำแนะนำวิธีตอบที่ดีกว่าในข้อที่อ่อน พร้อมสรุปจุดอ่อนซ้ำ</p>
|
||||
<p class="accordion__body" data-lang="en">A separate judge LLM scores each turn (no speed factor), then a coaching layer explains how to answer better on weak turns and surfaces recurring weak areas.</p>
|
||||
</div></div>
|
||||
</details>
|
||||
<details class="accordion">
|
||||
<summary class="accordion__head">
|
||||
<span data-lang="th">ติดตั้งที่ไหน? ข้อมูลของบริษัทปลอดภัยไหม?</span>
|
||||
<span data-lang="en">Where does it run? Is our data safe?</span>
|
||||
<span class="chev"><svg class="lucide" viewBox="0 0 24 24"><path d="m6 9 6 6 6-6"/></svg></span>
|
||||
</summary>
|
||||
<div class="accordion__panel"><div>
|
||||
<p class="accordion__body" data-lang="th">มีทั้ง SaaS และ on-premise สำหรับองค์กร. การเข้าถึงเป็นแบบหลายบทบาท (admin/user) ไม่มีการสมัครเอง — ควบคุมได้ว่าใครเห็นอะไร. ติดต่อเพื่อคุยรายละเอียดการจัดเก็บข้อมูลกับทีมเรา</p>
|
||||
<p class="accordion__body" data-lang="en">SaaS or on-premise for enterprises. Role-based access (admin/user) with no self-registration — you control who sees what. Contact us to discuss data residency for your org.</p>
|
||||
</div></div>
|
||||
</details>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ================= CTA ================= -->
|
||||
<section class="cta" id="cta">
|
||||
<div class="container">
|
||||
<div class="cta__panel reveal" style="--i:0">
|
||||
<h2 data-lang="th">ให้ทีมของคุณได้ฝึกปิดการขาย กับลูกค้าที่ปฏิเสธจริง</h2>
|
||||
<h2 data-lang="en">Let your team close against customers who really say no</h2>
|
||||
<p data-lang="th">ขอเดโม 30 นาที — เราจะพาคุณดูว่าสินค้าของคุณกลายเป็นลูกค้า 15 คนได้ยังไง และทีมของคุณจะได้โค้ชอะไรกลับมา</p>
|
||||
<p data-lang="en">Book a 30-minute demo. We'll show how your product becomes 15 real personas, and what coaching your team takes home.</p>
|
||||
<div class="cta__actions">
|
||||
<a class="btn btn--accent" href="mailto:hello@example.com" data-lang="th">ติดต่อขอเดโม</a>
|
||||
<a class="btn btn--accent" href="mailto:hello@example.com" data-lang="en">Request a demo</a>
|
||||
<a class="btn btn--ghost" href="mailto:hello@example.com" data-lang="th">hello@ตัวอย่าง.com</a>
|
||||
<a class="btn btn--ghost" href="mailto:hello@example.com" data-lang="en">hello@example.com</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</main>
|
||||
|
||||
<!-- ================= FOOTER (Ft5 statement) ================= -->
|
||||
<footer class="footer">
|
||||
<div class="container">
|
||||
<p class="footer__statement" data-lang="th">ฝึกขายจนเป็นธรรมชาติ — ไม่ใช่แค่เรียนสูตร</p>
|
||||
<p class="footer__statement" data-lang="en">Practice until selling is <span class="u">natural</span>, not rehearsed.</p>
|
||||
<div class="footer__meta">
|
||||
<span class="footer__brand">
|
||||
<span class="nav__mark" aria-hidden="true"><svg class="lucide" viewBox="0 0 24 24"><path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z"/></svg></span>
|
||||
Sales Trainer
|
||||
</span>
|
||||
<div class="footer__links">
|
||||
<a class="foot__link" href="#how" data-lang="th">วิธีใช้งาน</a><a class="foot__link" href="#how" data-lang="en">How it works</a>
|
||||
<a class="foot__link" href="#pricing" data-lang="th">ราคา</a><a class="foot__link" href="#pricing" data-lang="en">Pricing</a>
|
||||
<a class="foot__link" href="#faq" data-lang="th">คำถาม</a><a class="foot__link" href="#faq" data-lang="en">FAQ</a>
|
||||
</div>
|
||||
<span class="footer__copy">© 2026 Sales Trainer · <span data-lang="th">ฝึกขายให้เป็นธรรมชาติ กับลูกค้า AI ที่ต่อรองจริง</span><span data-lang="en">practice made real.</span></span>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script>
|
||||
/* ---- language toggle (TH primary · EN secondary) ---- */
|
||||
(function () {
|
||||
// lang inits empty so the first apply() actually runs and hides the non-default language
|
||||
var lang = '';
|
||||
var root = document.documentElement;
|
||||
|
||||
function apply(next) {
|
||||
if (next === lang) return;
|
||||
lang = next;
|
||||
root.setAttribute('lang', next);
|
||||
root.setAttribute('data-page-lang', next);
|
||||
// toggle every [data-lang] element
|
||||
document.querySelectorAll('[data-lang]').forEach(function (el) {
|
||||
var on = el.getAttribute('data-lang') === lang;
|
||||
el.style.display = on ? '' : 'none';
|
||||
});
|
||||
document.querySelectorAll('[data-lang-btn]').forEach(function (b) {
|
||||
b.setAttribute('aria-pressed', b.getAttribute('data-lang-btn') === lang ? 'true' : 'false');
|
||||
});
|
||||
}
|
||||
document.querySelectorAll('[data-lang-btn]').forEach(function (btn) {
|
||||
btn.addEventListener('click', function () { apply(btn.getAttribute('data-lang-btn')); });
|
||||
});
|
||||
apply('th');
|
||||
})();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
424
website/main.css
424
website/main.css
@@ -1,424 +0,0 @@
|
||||
/* Hallmark · genre: modern-minimal · macrostructure: Workbench · theme: Coral · enrichment: Tier-A CSS chat mockup · nav: N5 Floating pill · footer: Ft5 Statement
|
||||
* pre-emit critique: P5 H4 E5 S4 R5 V5
|
||||
* audience = Thai sales managers / trainers / L&D (SME + enterprise) · use = request a demo / buy · tone = professional, warm, builder */
|
||||
:root {
|
||||
/* ---- colour (Coral: warm-grey paper band L>85% · coral accent hue ~25 · roman-ish sans) ---- */
|
||||
--color-paper: oklch(97% 0.012 60);
|
||||
--color-paper-2: oklch(94% 0.014 60);
|
||||
--color-rule: oklch(85% 0.012 60);
|
||||
--color-neutral: oklch(56% 0.008 55);
|
||||
--color-muted: oklch(42% 0.008 50);
|
||||
--color-ink: oklch(20% 0.010 45);
|
||||
--color-accent: oklch(58% 0.20 30); /* coral */
|
||||
--color-accent-2: oklch(70% 0.16 35);
|
||||
--color-focus: oklch(55% 0.20 28);
|
||||
--color-success: oklch(50% 0.12 150);
|
||||
--color-danger: oklch(52% 0.16 25);
|
||||
|
||||
/* ---- type (Sarabun — user brand: TH+EN body & headers) ---- */
|
||||
--font-body: "Sarabun", ui-sans-serif, system-ui, sans-serif;
|
||||
--font-display: "Sarabun", ui-sans-serif, system-ui, sans-serif;
|
||||
--font-outlier: "Sarabun", ui-sans-serif, system-ui, sans-serif;
|
||||
|
||||
--text-xs: 0.72rem;
|
||||
--text-sm: 0.85rem;
|
||||
--text-base: 1rem;
|
||||
--text-md: 1.2rem;
|
||||
--text-lg: 1.45rem;
|
||||
--text-xl: 1.8rem;
|
||||
--text-2xl: 2.2rem;
|
||||
--text-3xl: 2.8rem;
|
||||
--text-display: clamp(2.5rem, 5vw + 1rem, 4.4rem);
|
||||
--text-display-s: clamp(2rem, 4vw + 0.75rem, 3.2rem);
|
||||
|
||||
/* ---- space (4pt scale) ---- */
|
||||
--space-3xs: 0.125rem;
|
||||
--space-2xs: 0.25rem;
|
||||
--space-xs: 0.5rem;
|
||||
--space-sm: 0.75rem;
|
||||
--space-md: 1rem;
|
||||
--space-lg: 1.5rem;
|
||||
--space-xl: 2.5rem;
|
||||
--space-2xl: 4rem;
|
||||
--space-3xl: 6rem;
|
||||
--space-4xl: 9rem;
|
||||
|
||||
/* ---- motion ---- */
|
||||
--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
|
||||
--ease-in: cubic-bezier(0.7, 0, 0.84, 0);
|
||||
--ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
|
||||
--dur-micro: 120ms;
|
||||
--dur-short: 220ms;
|
||||
--dur-long: 420ms;
|
||||
|
||||
/* ---- depth + z ---- */
|
||||
--z-base: 1;
|
||||
--z-raised: 10;
|
||||
--z-sticky: 200;
|
||||
--z-modal: 400;
|
||||
|
||||
--radius-sm: 0.375rem;
|
||||
--radius-md: 0.75rem;
|
||||
--radius-lg: 1.25rem;
|
||||
--radius-pill: 999px;
|
||||
}
|
||||
|
||||
/* ================= base ================= */
|
||||
* { box-sizing: border-box; }
|
||||
html { overflow-x: clip; }
|
||||
body { overflow-x: clip; margin: 0; }
|
||||
body {
|
||||
font-family: var(--font-body);
|
||||
font-size: var(--text-base);
|
||||
line-height: 1.6;
|
||||
color: var(--color-ink);
|
||||
background: var(--color-paper);
|
||||
-webkit-font-smoothing: antialiased;
|
||||
text-rendering: optimizeLegibility;
|
||||
}
|
||||
img { max-width: 100%; display: block; }
|
||||
a { color: inherit; }
|
||||
h1,h2,h3,h4 { font-family: var(--font-display); line-height: 1.14; letter-spacing: -0.01em; margin: 0; font-style: normal; }
|
||||
p { margin: 0; }
|
||||
ul { margin: 0; padding: 0; list-style: none; }
|
||||
:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; border-radius: 2px; }
|
||||
::selection { background: var(--color-accent-2); color: var(--color-ink); }
|
||||
|
||||
.container {
|
||||
width: 100%;
|
||||
max-width: 72rem;
|
||||
margin-inline: auto;
|
||||
padding-inline: clamp(1rem, 4vw, 2rem);
|
||||
}
|
||||
|
||||
/* single-line affordances — note: .accordion__head is NOT here, its question text must wrap */
|
||||
.btn, .nav__link, .foot__link, .lang__btn { white-space: nowrap; }
|
||||
|
||||
/* ================= buttons ================= */
|
||||
.btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: var(--space-xs);
|
||||
font-family: var(--font-display);
|
||||
font-weight: 700;
|
||||
font-size: var(--text-sm);
|
||||
line-height: 1;
|
||||
letter-spacing: 0.01em;
|
||||
padding: 0.875rem 1.4rem;
|
||||
border-radius: var(--radius-pill);
|
||||
border: 1px solid transparent;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
transition: transform var(--dur-micro) var(--ease-out), background-color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out);
|
||||
}
|
||||
.btn--primary { background: var(--color-ink); color: var(--color-paper); }
|
||||
.btn--primary:hover { transform: translateY(-1px); background: var(--color-accent); color: var(--color-ink); }
|
||||
.btn--primary:active { transform: translateY(0); }
|
||||
.btn--ghost { border-color: var(--color-rule); background: transparent; color: var(--color-ink); }
|
||||
.btn--ghost:hover { transform: translateY(-1px); border-color: var(--color-accent); color: var(--color-accent); }
|
||||
.btn--ghost:active { transform: translateY(0); }
|
||||
.btn--accent { background: var(--color-accent); color: var(--color-ink); }
|
||||
.btn--accent:hover { transform: translateY(-1px); background: var(--color-ink); color: var(--color-paper); }
|
||||
.btn--accent:active { transform: translateY(0); }
|
||||
@media (pointer: coarse) { .btn { min-height: 48px; } }
|
||||
|
||||
/* ================= language toggle ================= */
|
||||
.lang {
|
||||
display: inline-flex;
|
||||
border: 1px solid var(--color-rule);
|
||||
border-radius: var(--radius-pill);
|
||||
overflow: hidden;
|
||||
background: color-mix(in oklch, var(--color-paper) 80%, transparent);
|
||||
}
|
||||
.lang__btn {
|
||||
font-family: var(--font-display);
|
||||
font-weight: 700;
|
||||
font-size: var(--text-xs);
|
||||
letter-spacing: 0.06em;
|
||||
padding: 0.45rem 0.85rem;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
color: var(--color-muted);
|
||||
cursor: pointer;
|
||||
transition: background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out);
|
||||
}
|
||||
.lang__btn:hover { color: var(--color-ink); }
|
||||
.lang__btn[aria-pressed="true"] { background: var(--color-ink); color: var(--color-paper); }
|
||||
.lang__btn[aria-pressed="true"]:hover { color: var(--color-paper); }
|
||||
|
||||
/* ================= nav (N5 floating pill) ================= */
|
||||
.nav {
|
||||
position: sticky;
|
||||
top: var(--space-sm);
|
||||
z-index: var(--z-sticky);
|
||||
padding-inline: clamp(1rem, 4vw, 2rem);
|
||||
}
|
||||
.nav__inner {
|
||||
max-width: 68rem;
|
||||
margin-inline: auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: var(--space-md);
|
||||
padding: var(--space-xs) var(--space-sm);
|
||||
background: color-mix(in oklch, var(--color-paper) 82%, transparent);
|
||||
backdrop-filter: blur(14px) saturate(140%);
|
||||
-webkit-backdrop-filter: blur(14px) saturate(140%);
|
||||
border: 1px solid var(--color-rule);
|
||||
border-radius: var(--radius-pill);
|
||||
box-shadow: 0 1px 2px oklch(20% 0.01 45 / 0.05);
|
||||
}
|
||||
.nav__brand { display: flex; align-items: center; gap: var(--space-xs); font-family: var(--font-display); font-weight: 700; letter-spacing: -0.01em; text-decoration: none; font-size: 1.05rem; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
||||
.nav__mark { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; background: var(--color-accent); color: var(--color-ink); flex: 0 0 auto; }
|
||||
.nav__mark svg { width: 15px; height: 15px; }
|
||||
.nav__links { display: flex; align-items: center; gap: var(--space-lg); }
|
||||
.nav__link { font-family: var(--font-display); font-weight: 600; font-size: var(--text-sm); color: var(--color-muted); text-decoration: none; transition: color var(--dur-short) var(--ease-out); }
|
||||
.nav__link:hover { color: var(--color-accent); }
|
||||
.nav__cta { display: flex; align-items: center; gap: var(--space-sm); min-width: 0; }
|
||||
.nav__cta .lang { flex: 0 0 auto; }
|
||||
/* nav links only below 64rem — keeps brand + lang + CTA a single safe line on tablets/phones */
|
||||
@media (max-width: 64rem) {
|
||||
.nav__links { display: none; }
|
||||
}
|
||||
@media (max-width: 40rem) {
|
||||
/* drop the nav CTA text button on phones — the hero already carries it; keep brand + lang */
|
||||
.nav__cta .btn { display: none; }
|
||||
.nav__brand { font-size: 0.95rem; }
|
||||
.lang__btn { padding: 0.4rem 0.7rem; }
|
||||
}
|
||||
|
||||
/* ================= hero (workbench open) ================= */
|
||||
.hero { padding-top: clamp(3rem, 8vw, 6rem); padding-bottom: var(--space-3xl); position: relative; }
|
||||
.hero__grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: var(--space-3xl); align-items: center; }
|
||||
.hero__tag {
|
||||
display: inline-flex; align-items: center; gap: var(--space-xs);
|
||||
font-family: var(--font-display); font-weight: 600; font-size: var(--text-xs);
|
||||
letter-spacing: 0.04em; text-transform: uppercase;
|
||||
color: var(--color-accent);
|
||||
border: 1px solid color-mix(in oklch, var(--color-accent) 40%, var(--color-rule));
|
||||
border-radius: var(--radius-pill);
|
||||
padding: 0.35rem 0.8rem; margin-bottom: var(--space-md);
|
||||
}
|
||||
.hero h1 { font-size: var(--text-display); font-weight: 700; overflow-wrap: anywhere; min-width: 0; margin-bottom: var(--space-lg); line-height: 1.16; }
|
||||
/* per-word underline that wraps cleanly (box-decoration-break stays with each fragment) */
|
||||
.hero h1 .u {
|
||||
text-decoration: none;
|
||||
background-image: linear-gradient(var(--color-accent), var(--color-accent));
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 0.13em;
|
||||
background-position: 0 100%;
|
||||
-webkit-box-decoration-break: clone;
|
||||
box-decoration-break: clone;
|
||||
padding-bottom: 0.06em;
|
||||
}
|
||||
.hero__lede { font-size: var(--text-md); color: var(--color-muted); max-width: 46ch; margin-bottom: var(--space-xl); }
|
||||
.hero__lede strong { color: var(--color-ink); }
|
||||
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-md); align-items: center; }
|
||||
.hero__note { margin-top: var(--space-lg); font-size: var(--text-xs); color: var(--color-neutral); }
|
||||
|
||||
/* hero chat preview (small, floating behind) */
|
||||
.hero__visual { position: relative; }
|
||||
.hero__phone-glow { position: absolute; inset: 8% -4% -8% -4%; background: radial-gradient(120% 90% at 70% 20%, oklch(0.85 0.13 40 / 0.5), transparent 70%); filter: blur(30px); z-index: 0; }
|
||||
@media (max-width: 60rem) {
|
||||
.hero__grid { grid-template-columns: 1fr; gap: var(--space-2xl); }
|
||||
.hero__visual { order: 2; }
|
||||
}
|
||||
|
||||
/* ================= chat mockup (Tier-A pure CSS) ================= */
|
||||
.chat {
|
||||
--chat-max: 560px;
|
||||
width: 100%;
|
||||
max-width: var(--chat-max);
|
||||
margin-inline: auto;
|
||||
background: var(--color-paper-2);
|
||||
border: 1px solid var(--color-rule);
|
||||
border-radius: var(--radius-lg);
|
||||
overflow: hidden;
|
||||
box-shadow: 0 1px 2px oklch(20% 0.01 45 / 0.05), 0 20px 50px -30px oklch(20% 0.05 45 / 0.35);
|
||||
z-index: 1; position: relative;
|
||||
}
|
||||
.chat__bar { display: flex; align-items: center; gap: var(--space-sm); padding: var(--space-md) var(--space-lg); border-bottom: 1px solid var(--color-rule); background: var(--color-paper); }
|
||||
.chat__avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--color-accent-2); display: grid; place-items: center; color: var(--color-ink); font-weight: 700; font-size: var(--text-xs); flex: 0 0 auto; }
|
||||
.chat__who { line-height: 1.25; }
|
||||
.chat__name { font-family: var(--font-display); font-weight: 700; font-size: var(--text-sm); }
|
||||
.chat__meta { font-size: var(--text-xs); color: var(--color-neutral); }
|
||||
.chat__status { margin-left: auto; display: inline-flex; align-items: center; gap: 0.4em; font-size: var(--text-xs); color: var(--color-neutral); }
|
||||
.chat__status .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--color-success); }
|
||||
.chat__tier { font-size: var(--text-xs); font-family: var(--font-display); font-weight: 700; letter-spacing: 0.04em; color: var(--color-muted); border: 1px solid var(--color-rule); border-radius: var(--radius-sm); padding: 0.1rem 0.45rem; }
|
||||
.chat__tier--C { color: var(--color-danger); border-color: color-mix(in oklch, var(--color-danger) 40%, var(--color-rule)); }
|
||||
|
||||
.chat__body { padding: var(--space-lg); display: flex; flex-direction: column; gap: var(--space-sm); }
|
||||
.msg { display: flex; gap: var(--space-xs); max-width: 86%; }
|
||||
.msg.mine { align-self: flex-end; flex-direction: row-reverse; }
|
||||
.msg.bubble-only { align-self: flex-end; }
|
||||
.msg__bubble { padding: var(--space-sm) var(--space-md); border-radius: var(--radius-md); font-size: var(--text-sm); line-height: 1.5; }
|
||||
.msg.theirs .msg__bubble { background: #fff; border: 1px solid var(--color-rule); border-top-left-radius: 4px; color: var(--color-ink); }
|
||||
.msg.mine .msg__bubble { background: var(--color-ink); color: var(--color-paper); border-top-right-radius: 4px; }
|
||||
.msg__time { font-size: var(--text-xs); color: var(--color-neutral); align-self: flex-end; padding: 0 0.3rem; }
|
||||
|
||||
/* coaching reveal card */
|
||||
.coach { align-self: flex-end; max-width: 92%; border: 1px solid var(--color-rule); background: #fff; border-radius: var(--radius-md); padding: var(--space-md); box-shadow: 0 1px 2px oklch(20% 0.01 45 / 0.05); }
|
||||
.coach__head { display: flex; align-items: center; gap: var(--space-xs); margin-bottom: var(--space-xs); }
|
||||
.coach__badge { display: inline-flex; align-items: center; gap: 0.35em; font-family: var(--font-display); font-weight: 700; font-size: var(--text-xs); letter-spacing: 0.03em; color: var(--color-accent); }
|
||||
.coach__score { margin-left: auto; font-family: var(--font-display); font-weight: 700; font-size: var(--text-xs); color: var(--color-muted); }
|
||||
.coach__text { font-size: var(--text-sm); color: var(--color-muted); line-height: 1.55; }
|
||||
.coach__text strong { color: var(--color-ink); }
|
||||
.coach .btn--ghost { margin-top: var(--space-sm); padding: 0.5rem 0.9rem; font-size: var(--text-xs); }
|
||||
|
||||
/* typing indicator */
|
||||
.typing { display: inline-flex; gap: 4px; padding: var(--space-sm) var(--space-md); background: #fff; border: 1px solid var(--color-rule); border-radius: var(--radius-md); border-top-left-radius: 4px; }
|
||||
.typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--color-neutral); animation: blink 1.3s infinite ease-in-out; }
|
||||
.typing i:nth-child(2){ animation-delay: 0.2s; }
|
||||
.typing i:nth-child(3){ animation-delay: 0.4s; }
|
||||
@keyframes blink { 0%, 60%, 100% { opacity: 0.25; } 30% { opacity: 1; } }
|
||||
|
||||
.chat__input { display: flex; align-items: center; gap: var(--space-sm); padding: var(--space-md) var(--space-lg); border-top: 1px solid var(--color-rule); background: var(--color-paper); flex-wrap: wrap; }
|
||||
.chat__input .field { flex: 1; }
|
||||
.chat__input .send { width: 40px; height: 40px; border-radius: 50%; border: 0; background: var(--color-accent); color: var(--color-ink); display: grid; place-items: center; cursor: pointer; flex: 0 0 auto; }
|
||||
|
||||
/* ================= section heads ================= */
|
||||
.section { padding-block: var(--space-3xl); }
|
||||
.section--tint { background: var(--color-paper-2); }
|
||||
.shead { max-width: 40rem; margin-bottom: var(--space-2xl); }
|
||||
.shead.center { margin-inline: auto; text-align: center; }
|
||||
.shead__label { font-family: var(--font-display); font-weight: 600; font-size: var(--text-xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-accent); margin-bottom: var(--space-sm); }
|
||||
.shead h2 { font-size: var(--text-2xl); font-weight: 700; margin-bottom: var(--space-sm); overflow-wrap: anywhere; }
|
||||
.shead p { color: var(--color-muted); font-size: var(--text-md); }
|
||||
|
||||
/* ================= steps (F4) ================= */
|
||||
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-xl); counter-reset: step; }
|
||||
.step { position: relative; padding-top: var(--space-xl); border-top: 1px solid var(--color-rule); }
|
||||
.step::before {
|
||||
counter-increment: step; content: "0" counter(step);
|
||||
position: absolute; top: -0.7rem; left: 0;
|
||||
font-family: var(--font-display); font-weight: 700; font-size: var(--text-sm);
|
||||
letter-spacing: 0.04em; color: var(--color-accent);
|
||||
background: var(--color-paper); padding-right: var(--space-sm);
|
||||
}
|
||||
.step h3 { font-size: var(--text-lg); margin-bottom: var(--space-sm); }
|
||||
.step p { color: var(--color-muted); font-size: var(--text-sm); max-width: 32ch; }
|
||||
.step .pills { display: flex; flex-wrap: wrap; gap: var(--space-2xs); margin-top: var(--space-md); }
|
||||
.pill { font-family: var(--font-display); font-weight: 600; font-size: var(--text-xs); color: var(--color-muted); background: var(--color-paper-2); border: 1px solid var(--color-rule); border-radius: var(--radius-pill); padding: 0.3rem 0.7rem; }
|
||||
@media (max-width: 60rem) { .steps { grid-template-columns: 1fr; gap: var(--space-2xl); } .step::before { background: var(--color-paper-2); } }
|
||||
|
||||
/* ================= workbench frames ================= */
|
||||
.frame { display: grid; grid-template-columns: minmax(0, 1fr) 1fr; gap: var(--space-3xl); align-items: center; }
|
||||
.frame--rev .frame__media { order: 2; }
|
||||
.frame--rev .frame__copy { order: 1; }
|
||||
.frame__media { position: relative; min-width: 0; }
|
||||
.frame__copy h3 { font-size: var(--text-xl); margin-bottom: var(--space-md); }
|
||||
.frame__copy p { color: var(--color-muted); max-width: 48ch; font-size: var(--text-md); }
|
||||
.frame__copy p + p { margin-top: var(--space-md); }
|
||||
.frame__copy ul.lines { margin-top: var(--space-lg); display: grid; gap: var(--space-sm); }
|
||||
.frame__copy ul.lines li { display: flex; gap: var(--space-sm); align-items: flex-start; }
|
||||
.frame__copy ul.lines .ic { color: var(--color-accent); flex: 0 0 auto; margin-top: 2px; }
|
||||
@media (max-width: 60rem) {
|
||||
.frame { grid-template-columns: 1fr; gap: var(--space-xl); }
|
||||
.frame--rev .frame__media { order: 1; } .frame--rev .frame__copy { order: 2; }
|
||||
}
|
||||
|
||||
/* ================= persona tiers ================= */
|
||||
.tiers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-lg); }
|
||||
.tier { border: 1px solid var(--color-rule); border-radius: var(--radius-lg); padding: var(--space-xl); background: var(--color-paper); display: flex; flex-direction: column; }
|
||||
.tier__letter { font-family: var(--font-display); font-weight: 700; font-size: var(--text-3xl); line-height: 1; color: var(--color-accent); }
|
||||
.tier h3 { font-size: var(--text-lg); margin: var(--space-xs) 0; }
|
||||
.tier__sub { font-size: var(--text-sm); color: var(--color-muted); margin-bottom: var(--space-md); }
|
||||
.tier ul { display: grid; gap: var(--space-sm); }
|
||||
.tier ul li { display: flex; gap: var(--space-sm); font-size: var(--text-sm); color: var(--color-muted); align-items: flex-start; }
|
||||
.tier ul li .ic { color: var(--color-accent); flex: 0 0 auto; margin-top: 2px; }
|
||||
.tier__foot { margin-top: var(--space-lg); padding-top: var(--space-md); border-top: 1px solid var(--color-rule); font-size: var(--text-xs); color: var(--color-neutral); }
|
||||
.tier--hardest { border-color: color-mix(in oklch, var(--color-danger) 35%, var(--color-rule)); }
|
||||
.tier--hardest .tier__letter { color: var(--color-danger); }
|
||||
.tier--hardest .tier__foot { color: var(--color-danger); }
|
||||
@media (max-width: 60rem) { .tiers { grid-template-columns: 1fr; } }
|
||||
|
||||
/* ================= value props (asymmetric, 12-col) ================= */
|
||||
.props { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--space-lg); }
|
||||
.prop { grid-column: span 4; border-top: 1px solid var(--color-rule); padding-top: var(--space-lg); }
|
||||
.prop.wide { grid-column: span 6; }
|
||||
.prop .ic { color: var(--color-accent); margin-bottom: var(--space-md); }
|
||||
.prop h3 { font-size: var(--text-lg); margin-bottom: var(--space-sm); }
|
||||
.prop p { color: var(--color-muted); font-size: var(--text-sm); max-width: 40ch; }
|
||||
@media (max-width: 60rem) { .prop, .prop.wide { grid-column: span 12; } }
|
||||
|
||||
/* ================= who it's for (F6-ish product card grid) ================= */
|
||||
.aud { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-lg); }
|
||||
.aud__card { border: 1px solid var(--color-rule); border-radius: var(--radius-lg); padding: var(--space-xl); background: var(--color-paper); }
|
||||
.aud__card .ic { color: var(--color-accent); margin-bottom: var(--space-md); }
|
||||
.aud__card h3 { font-size: var(--text-lg); margin-bottom: var(--space-sm); }
|
||||
.aud__card p { color: var(--color-muted); font-size: var(--text-sm); }
|
||||
@media (max-width: 60rem) { .aud { grid-template-columns: 1fr; } }
|
||||
|
||||
/* ================= pricing ================= */
|
||||
.pricing { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-xl); align-items: stretch; }
|
||||
.price { border: 1px solid var(--color-rule); border-radius: var(--radius-lg); padding: var(--space-xl); background: var(--color-paper); display: flex; flex-direction: column; }
|
||||
.price--featured { border: 2px solid var(--color-accent); }
|
||||
.price__head { margin-bottom: var(--space-lg); }
|
||||
.price__name { font-family: var(--font-display); font-weight: 700; font-size: var(--text-md); margin-bottom: var(--space-2xs); }
|
||||
.price__desc { font-size: var(--text-sm); color: var(--color-muted); }
|
||||
.price__amount { display: flex; align-items: baseline; gap: var(--space-xs); margin: var(--space-lg) 0 var(--space-2xs); }
|
||||
.price__num { font-family: var(--font-display); font-weight: 700; font-size: var(--text-3xl); }
|
||||
.price__num small { font-size: var(--text-sm); font-weight: 600; color: var(--color-muted); }
|
||||
.price__per { font-size: var(--text-xs); color: var(--color-neutral); }
|
||||
.price__confirm { font-size: var(--text-xs); color: var(--color-neutral); border: 1px dashed var(--color-rule); border-radius: var(--radius-sm); padding: var(--space-xs) var(--space-sm); margin-bottom: var(--space-lg); background: color-mix(in oklch, var(--color-paper-2) 50%, transparent); }
|
||||
.price ul { display: grid; gap: var(--space-sm); margin-bottom: var(--space-lg); }
|
||||
.price ul li { display: flex; gap: var(--space-sm); font-size: var(--text-sm); color: var(--color-muted); align-items: flex-start; }
|
||||
.price ul li .ic { color: var(--color-accent); flex: 0 0 auto; margin-top: 2px; }
|
||||
.price .btn { margin-top: auto; }
|
||||
.price__pick { text-align: center; font-size: var(--text-xs); color: var(--color-neutral); margin-top: var(--space-md); }
|
||||
@media (max-width: 40rem) { .pricing { grid-template-columns: 1fr; } }
|
||||
|
||||
/* ================= FAQ ================= */
|
||||
.faq { max-width: 46rem; margin-inline: auto; display: grid; gap: var(--space-sm); }
|
||||
.accordion { border: 1px solid var(--color-rule); border-radius: var(--radius-md); background: var(--color-paper); overflow: hidden; }
|
||||
.accordion__head {
|
||||
width: 100%; display: flex; align-items: center; gap: var(--space-md);
|
||||
padding: var(--space-md) var(--space-lg); background: transparent; border: 0; text-align: left;
|
||||
cursor: pointer; font-family: var(--font-display); font-weight: 600; font-size: var(--text-base); color: var(--color-ink);
|
||||
}
|
||||
.accordion__head > span:first-of-type { flex: 1 1 auto; min-width: 0; }
|
||||
.accordion__head .chev { color: var(--color-accent); transition: transform var(--dur-short) var(--ease-in-out); flex: 0 0 auto; }
|
||||
.accordion__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--dur-long) var(--ease-in-out); }
|
||||
.accordion__panel > div { overflow: hidden; }
|
||||
.accordion__body { padding: 0 var(--space-lg) var(--space-md); color: var(--color-muted); font-size: var(--text-sm); max-width: 60ch; }
|
||||
.accordion[open] .accordion__panel { grid-template-rows: 1fr; }
|
||||
.accordion[open] .chev { transform: rotate(180deg); }
|
||||
.accordion__head::-webkit-details-marker { display: none; }
|
||||
|
||||
/* ================= CTA ================= */
|
||||
.cta { padding-block: var(--space-3xl); }
|
||||
.cta__panel { position: relative; text-align: center; padding: var(--space-3xl) var(--space-xl); border-radius: var(--radius-lg); background: var(--color-ink); color: var(--color-paper); overflow: hidden; }
|
||||
.cta__panel::before { content: ""; position: absolute; inset: -20% -30% -20% -30%; background: radial-gradient(60% 60% at 60% 30%, oklch(0.7 0.16 40 / 0.4), transparent 70%); z-index: 0; }
|
||||
.cta__panel > * { position: relative; z-index: 1; }
|
||||
.cta__panel h2 { font-size: var(--text-2xl); margin-bottom: var(--space-md); overflow-wrap: anywhere; }
|
||||
.cta__panel p { color: color-mix(in oklch, var(--color-paper) 75%, transparent); max-width: 46ch; margin: 0 auto var(--space-xl); }
|
||||
.cta__actions { display: flex; flex-wrap: wrap; gap: var(--space-md); justify-content: center; }
|
||||
.cta__actions .btn--accent { background: var(--color-accent); color: var(--color-ink); }
|
||||
.cta__actions .btn--ghost { border-color: color-mix(in oklch, var(--color-paper) 40%, transparent); color: var(--color-paper); }
|
||||
.cta__actions .btn--ghost:hover { color: var(--color-ink); background: var(--color-paper); border-color: var(--color-paper); }
|
||||
|
||||
/* ================= footer (Ft5 statement) ================= */
|
||||
.footer { padding-block: var(--space-3xl) var(--space-xl); }
|
||||
.footer__statement { font-family: var(--font-display); font-weight: 700; font-size: var(--text-xl); max-width: 20ch; line-height: 1.25; margin-bottom: var(--space-xl); overflow-wrap: anywhere; }
|
||||
.footer__statement .u { color: var(--color-accent); }
|
||||
.footer__meta { display: flex; flex-wrap: wrap; gap: var(--space-md) var(--space-2xl); align-items: center; justify-content: space-between; padding-top: var(--space-lg); border-top: 1px solid var(--color-rule); }
|
||||
.footer__brand { font-family: var(--font-display); font-weight: 700; display: flex; align-items: center; gap: var(--space-xs); }
|
||||
.footer__links { display: flex; gap: var(--space-lg); }
|
||||
.foot__link { font-size: var(--text-sm); color: var(--color-muted); text-decoration: none; }
|
||||
.foot__link:hover { color: var(--color-accent); }
|
||||
.footer__copy { font-size: var(--text-xs); color: var(--color-neutral); }
|
||||
@media (max-width: 40rem) { .footer__meta { flex-direction: column; align-items: flex-start; } }
|
||||
|
||||
/* ================= reveal ================= */
|
||||
.reveal { opacity: 0; transform: translateY(10px); animation: reveal var(--dur-long) var(--ease-out) forwards; animation-delay: calc(var(--i, 0) * 60ms); }
|
||||
@keyframes reveal { to { opacity: 1; transform: none; } }
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
*, *::before, *::after { animation-duration: 150ms !important; animation-iteration-count: 1 !important; transition-duration: 150ms !important; }
|
||||
.reveal { animation: reveal-reduced 150ms linear forwards; }
|
||||
@keyframes reveal-reduced { to { opacity: 1; transform: none; } }
|
||||
}
|
||||
|
||||
/* ---- rows of inline SVG line icons (lucide-style, single colour) ---- */
|
||||
svg.lucide { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vertical-align: -0.12em; }
|
||||
.ic svg.lucide { width: 22px; height: 22px; }
|
||||
Reference in New Issue
Block a user