You:

0 / 0

Frontend Handoff · v1.0

Landing Page Spec
Goals11.ai

เกมทายผลบอลฟรี · AI ช่วยวิเคราะห์ · สมัครผ่าน Telegram · ยิง Meta ads

Brand: goals11.ai

Goal: ดึง traffic จาก Meta ads → กดสมัครผ่าน Telegram bot

Compliance: Whitelist (เกมทักษะ ไม่ใช่พนัน)

Channel: Telegram deeplink (ไม่มี email/SMS form)

01 Objective & Success Metric

เป้าหมายเดียวของหน้านี้: ทำให้ผู้เข้าชมกดปุ่ม CTA ไปคุยกับ Telegram bot แล้วสมัครเล่นเกมจบใน TG

Metric	Target	Floor
CTA click-through rate	35%+	20%
Telegram bot start	25%+ ของ click	15%
Mobile LCP (load)	< 2.0s	2.5s
Mobile CLS	< 0.05	0.1
Bounce rate	< 45%	60%

02 Compliance · กฎเหล็กของ Meta

หน้านี้ต้องผ่าน Meta crawler. ถ้ามีคำหรือรูปต้องห้ามแม้จุดเดียว → ad disapprove + BM โดน flag

✅ ใช้คำกลุ่มนี้
ทายผล · เกมทาย · แข่งขัน · สะสมแต้ม · รางวัล · contest · prediction · AI วิเคราะห์ · เล่นฟรี · ทักษะ · ความรู้บอล

❌ ห้ามใช้เด็ดขาด (ทั้งใน copy, alt-text, meta tag, filename, URL)
ทีเด็ด · แทง · พนัน · เครดิตฟรี · เซียน · ราคาน้ำ · น้ำบอล · ดวง · เสี่ยง · ชนะเงิน · ฝาก · ถอน · บาคาร่า · สล็อต · คาสิโน · payout · bet · gamble · winnings

❌ ห้ามใส่ในรูป/วิดีโอ
นักบอลที่จำหน้าได้ (Messi, Ronaldo, นักบอลไทย ทุกคน) · โลโก้สโมสร (Real Madrid, Liverpool, บุรีรัมย์ ฯลฯ) · ชื่อ league (พรีเมียร์ลีก, ลาลีกา, ไทยลีก) · เสื้อสโมสรของจริง · footage แมตช์จริง · ลูกเต๋า · ไพ่ · เงินกอง · เหรียญทอง pile

✅ Subject ที่ใช้แทนได้
ลูกบอล generic · สนามว่าง · ตาข่าย · silhouette ผู้เล่นมุมหลัง · เสื้อสีเรียบไม่มีโลโก้ · mascot illustration · AI dashboard mockup · graph/data · ธงสีเรียบ

03 Page Structure (9 sections)

┌─────────────────────────────────────────────────┐ │ [01] HERO above fold│ │ Logo · Headline · Sub · CTA Telegram · Trust │ ├─────────────────────────────────────────────────┤ │ [02] HOW IT WORKS · 3-step │ │ สมัคร TG → ทายบอล → รับรางวัล │ ├─────────────────────────────────────────────────┤ │ [03] AI FEATURE · มี video/screenshot │ ├─────────────────────────────────────────────────┤ │ [04] PRIZE SHOWCASE · รูปของรางวัล + มูลค่า │ ├─────────────────────────────────────────────────┤ │ [05] SOCIAL PROOF · testimonial + ตัวเลข │ ├─────────────────────────────────────────────────┤ │ [06] LIVE ACTIVITY TICKER (optional) │ ├─────────────────────────────────────────────────┤ │ [07] FAQ · 5 คำถาม (สำคัญต่อ Meta!) │ ├─────────────────────────────────────────────────┤ │ [08] FINAL CTA · ปุ่ม Telegram ใหญ่ │ ├─────────────────────────────────────────────────┤ │ [09] FOOTER · legal, contact, age-gate │ └─────────────────────────────────────────────────┘ [STICKY] CTA mobile ลอยอยู่ขอบล่างตลอด

04 Section Details

① Hero Section

Headline: เกมทายผลบอลที่คนไทยเล่นมากสุด
Sub: ทายแม่น สะสมแต้ม แลกของจริง · AI ช่วยวิเคราะห์
CTA: ปุ่มหลัก: เริ่มเล่นฟรีบน Telegram + icon TG · link = https://t.me/<botname>?start=lp_meta
Trust strip: 👥 50,000+ ผู้เล่น · 🤖 AI วิเคราะห์ 1,200+ แมตช์/สัปดาห์ · ⭐ 4.8/5
Visual: Mockup หน้าจอ Telegram chat กับ bot (รูป chat fake compliant)
Height: Mobile: 100vh max · Desktop: 80vh — CTA ต้องเห็นโดยไม่ scroll

② How It Works (3 steps)

Step	Headline	Sub	Icon
1	เปิด Telegram	กดปุ่มเดียว เข้าคุยกับบอท	💬
2	ทายผลบอล	AI ช่วยวิเคราะห์ก่อนเลือก	🎯
3	รับรางวัลจริง	สะสมแต้ม แลกของจริง	🏆

③ AI Feature Demo

โชว์ความต่าง: ทำไม goals11 ต่างจากเกมทายผลทั่วไป

Video/screen recording 15-30s AI dashboard ขณะใช้งาน (autoplay, muted, loop)
3 stat points เช่น "วิเคราะห์ 1,200+ แมตช์/สัปดาห์", "ความแม่นย้อนหลัง 87%", "อัพเดต realtime ทุก 30 วินาที"
Graph/data viz mockup กราฟ prediction trend (ไม่ต้อง real data)

④ Prize Showcase

Layout: Grid 3-4 รูป + tier (รายเดือน / รายสัปดาห์ / daily)
Items: iPhone · ทอง · voucher · gift card — รูปจริง ไม่ใช่ render
Headline: รางวัลที่แจกไปแล้ว ฿X,XXX,XXX
Copy rule: ใช้คำ "รางวัล / ของรางวัล / prize" — ❌ ห้ามใช้ "เงินรางวัล / ชนะเงิน / payout"

⑤ Social Proof

Testimonials 3-6 ราย รูป (avatar OK ถ้าไม่มีรูปจริง) + ชื่อ alias + คำพูดสั้น 1-2 บรรทัด
Trust numbers "50,000+ ผู้เล่น" / "แจกรางวัลแล้ว ฿X" / "อันดับ 1 บน Telegram Thailand"
Star rating 4.8/5 พร้อมจำนวน review
หลีกเลี่ยง logo สื่อจริงที่ไม่ได้รับ permission

⑥ Live Activity Ticker Optional

Ticker เลื่อนแนวนอน/แนวตั้ง แสดง "คุณ John ทายถูก 3 คู่ +500 แต้ม" หมุนทุก 3-5 วินาที

สร้าง FOMO. ถ้าทำ — ต้องเป็น JS-driven array ไม่ต้องต่อ realtime API. 30-50 entries หมุนวน

⑦ FAQ (สำคัญต่อ Meta crawler!)

Accordion 5 คำถาม. Meta crawler อ่าน text นี้เพื่อตัดสินว่าเป็น game หรือ gambling

Q	A (เขียนแบบนี้)
เกมนี้เล่นยังไง?	เกมทักษะ (skill-based) ใช้ความรู้บอลทายผลเก็บแต้ม
ต้องเติมเงินไหม?	"ไม่ต้องเติมเงิน เล่นฟรี 100%" (สำคัญที่สุด)
รางวัลคืออะไร?	ของจริง / voucher — ไม่ใช่เงินจากการเดิมพัน
อายุเท่าไหร่เล่นได้?	20 ปีขึ้นไป
ปลอดภัยไหม?	data encrypt, privacy policy, ติดต่อทีมงานได้ตลอด

⑧ Final CTA

ปุ่มขนาดใหญ่ etc กลางหน้า — text เดียวกับ hero CTA, link เดียวกัน. มี secondary trust strip ใต้ปุ่ม

⑨ Footer

Privacy Policy · Terms of Service (link required)
Contact: Telegram channel + support email
Company info (entity ที่จดทะเบียน — Fred จะส่งให้)
"เล่นอย่างมีสติ · เกมสำหรับผู้ที่มีอายุ 20 ปีขึ้นไป" bold ใต้สุด
Copyright + ปี
Age-gate popup ตอนเข้าครั้งแรก (cookie 30 วัน)

📌 Sticky Mobile CTA

Mobile only: ปุ่ม CTA ลอยขอบล่างตลอด หลัง scroll ผ่าน hero 50% — full-width, สีเดียวกับ hero CTA

05 CTA Telegram Deeplink

ทุกปุ่ม CTA ในหน้าต้อง link ไป Telegram bot พร้อม ?start=<source> เพื่อ track ที่มา

ตำแหน่ง	Deeplink (Fred จะให้ bot username)
Hero CTA	`t.me/{BOT}?start=lp_hero`
Final CTA	`t.me/{BOT}?start=lp_final`
Sticky mobile	`t.me/{BOT}?start=lp_sticky`
FAQ section	`t.me/{BOT}?start=lp_faq`

Behavior: Mobile → เปิด Telegram app ตรง · Desktop → เปิด Telegram Web. ถ้าไม่มี Telegram → fallback หน้า install

06 Tracking · Pixel & CAPI

Meta Pixel ติด head ทุกหน้า
Meta Conversions API (CAPI) server-side — ห้ามขาด (Pixel-only ไม่พอใน 2026)
Event: PageView เมื่อโหลดหน้า
Event: ViewContent เมื่อ scroll ถึง section AI feature
Event: Lead เมื่อกด CTA Telegram (ก่อน redirect)
Event: CompleteRegistration ยิงจาก backend เมื่อ TG bot ได้ user ใหม่ (webhook → CAPI)

Custom event: CTAClick พร้อม param ตำแหน่ง (hero/final/sticky/faq)
Custom event: ScrollDepth ที่ 25/50/75/100%
Custom event: FAQOpen เมื่อ user expand FAQ item
GTM container ครอบทุกอย่าง (ง่ายต่อการเพิ่ม pixel อื่น TikTok/Google)
Microsoft Clarity ติดด้วย (heatmap ฟรี)
UTM params รับ + ส่งต่อใน TG deeplink param ทุกครั้ง

07 Design System (committed)

Color strategy: Committed — Brand color 30-50% ของ surface
Primary: #00E68A (green — sport + trust) — ใช้กับ CTA
Secondary: #1AA3FF (blue — AI tech accent)
Accent: #FFC233 (gold — รางวัล/prize highlight)
Background: Dark — #0A0E1A base, #11162A elevated
Text: #E8ECF7 (body), #A4ADCC (dim) — ❌ ห้าม #FFF หรือ #000
Font (TH): Kanit heading (700/800), Sarabun body (400/500/600)
Font (EN): Inter or system-ui
Scale: 4pt: 4/8/12/16/24/32/48/64/96
Radius: 10px card, 999px pill (CTA), 14px modal
Shadow: ใช้น้อย — เน้น border + background contrast

✅ DO
Mobile-first · text-wrap balance ทุก heading · focus-visible ทุก interactive · prefers-reduced-motion · button ≥ 48×48px touch target · CTA ใหญ่กว่า text 1.5x

❌ DON'T
Gradient text · pure #000/#FFF · side-stripe border บน card · glassmorphism เป็น default · animate layout properties · hover-only functionality · cards ทั้งหน้า · พื้น dark + text สี gray

08 Tech Stack แนะนำ

Layer	เลือก	เหตุผล
Framework	Nuxt 3 หรือ Next 14	SSG/SSR = SEO + LCP เร็ว
Styling	Tailwind CSS	scope dev เร็ว
Host	Cloudflare Pages	free, CDN ทั่วโลก, fast
DNS	Cloudflare	SSL free, analytics
Domain	Njalla (privacy)	opsec
Image	`next/image` หรือ `nuxt/image`	auto WebP/AVIF, lazy load
Analytics	GTM + Pixel + Clarity	ครบในตัวเดียว
Form	❌ ไม่มี — CTA ทั้งหมดไป Telegram	ตามที่ตกลง

09 Performance Budget

LCP < 2.0s mobile (4G)
CLS < 0.05 (อย่าให้ layout shift)
Total page size < 1.5MB รวมรูป
Total requests < 30
JS bundle < 200KB gzipped
Hero image preload + responsive srcset
Font display swap + preload Kanit/Sarabun woff2
Video lazy load below fold
No render-blocking JS ใน head

10 Assets · Fred จะส่งให้

#	Asset	Format	Status
1	Logo goals11.ai	SVG (vector preferred) + PNG 2x	รอ Fred
2	Screenshot/video Telegram chat กับ bot	MP4 + frames PNG	รอ Fred
3	Video/screenshot AI dashboard	MP4 15-30s, screenshots	รอ Fred
4	รูปของรางวัล	JPG/PNG 1200×1200+	รอ Fred
5	Testimonial content	text + avatar (gen ได้)	Hermes generate
6	Hero background image	JPG 2400×1600 (stadium generic, no logo)	Hermes generate (Fal.ai)
7	Telegram bot username + deeplink	string	รอ Fred
8	Privacy Policy + ToS text	markdown/html	Hermes draft
9	Meta Pixel ID + CAPI access token	string	หลังตั้ง BM
10	GTM container ID	string GTM-XXX	รอ setup

11 Copy Draft (พร้อม paste ลง code)

Hero

H1: เกมทายผลบอลที่คนไทยเล่นมากสุด

Sub: ทายแม่น สะสมแต้ม แลกของจริง · มี AI ช่วยวิเคราะห์ทุกแมตช์

CTA: 🎮 เริ่มเล่นฟรีบน Telegram

Trust: 👥 50,000+ ผู้เล่น · 🤖 AI วิเคราะห์ · ⭐ 4.8/5

How it works

1. เปิด Telegram — กดปุ่มเดียว เข้าคุยกับบอท
2. ทายผลบอล — AI ช่วยวิเคราะห์ก่อนเลือก
3. รับรางวัลจริง — สะสมแต้ม แลกของจริง

AI feature

H2: AI ที่วิเคราะห์ฟุตบอลแม่นกว่าใคร
Sub: โมเดลของเรา เรียนรู้จาก 10 ปีของข้อมูลบอลทั่วโลก ช่วยให้คุณทายผลแม่นขึ้น
Stats: 1,200+ แมตช์/สัปดาห์ · ความแม่นย้อนหลัง 87% · อัพเดต realtime

Prize

H2: รางวัลที่แจกไปแล้ว ฿XX,XXX,XXX
Sub: iPhone, ทอง, voucher — รับจริงทุกเดือน

Final CTA

H2: พร้อมทายแล้วใช่ไหม?
Sub: เปิด Telegram แล้วเริ่มเล่นได้เลย ฟรี 100%
CTA: 🎮 เริ่มเล่นฟรีบน Telegram

12 Frontend Dev Checklist

📐 Structure

9 sections ครบตามโครงด้านบน (hero / how / AI / prize / proof / ticker / FAQ / final CTA / footer)
Sticky mobile CTA หลัง scroll hero 50%
Age-gate popup ครั้งแรก (cookie 30 วัน)
Semantic HTML (h1 ตัวเดียว, landmarks, button/a ถูกต้อง)

🎨 Design

Color palette ตาม spec (primary #00E68A, dark base)
Kanit + Sarabun font preload
4pt spacing scale
Mobile-first responsive (320 / 768 / 1024 / 1440)
Touch target ≥ 48×48px
focus-visible ทุก interactive element
prefers-reduced-motion media query

🔗 Telegram Integration

Deeplink ทุกปุ่ม CTA ไป t.me/{BOT}?start=lp_<position>
Mobile detect → เปิด app · Desktop → เปิด web
Fallback หน้า install ถ้าไม่มี Telegram
Source param ส่งต่อ UTM

📊 Tracking

Meta Pixel ติด head
CAPI ตั้ง server-side
Standard events: PageView, ViewContent, Lead
Custom events: CTAClick (with position), ScrollDepth, FAQOpen
GTM container ครอบ
Microsoft Clarity ติด

⚡ Performance

LCP < 2.0s mobile 4G
CLS < 0.05
Total page < 1.5MB
Hero image preload + srcset
Lazy load below fold
Font display:swap
Lighthouse score: Performance 90+, SEO 95+, Accessibility 95+

🛡️ Compliance

คำต้องห้ามไม่มีในหน้านี้ (grep test)
Alt text รูปทุกตัวไม่มีคำต้องห้าม
Meta tag title/description ใช้คำ safe เท่านั้น
Footer มี "เล่นอย่างมีสติ · 20+"
Privacy + ToS link ใน footer
Age-gate ทำงาน

✅ Pre-launch QA

Test ทุก CTA → เปิด Telegram bot จริง
Test Pixel + CAPI ยิง event ครบ (Meta Events Manager)
Test mobile iOS Safari · Android Chrome · Desktop Chrome/Safari/Firefox
Test slow 3G — ยัง usable ไหม
Test screen reader (VoiceOver / TalkBack) — landmarks อ่านออกไหม
404 / offline page
robots.txt + sitemap.xml
OG image + Twitter card
Favicon (16/32/180/192/512)

13 Handoff Notes

ก่อนเริ่ม code — frontend dev ต้องมี:

โลโก้ goals11.ai (SVG)
Telegram bot username
Domain ที่ deploy
Cloudflare Pages access
Meta Pixel ID + CAPI token (ได้หลัง BM พร้อม — ใส่ทีหลัง OK)

ขณะ dev — ใช้ assets placeholder ได้:

Hero BG: https://v3b.fal.media/files/b/0a9ec5a0/FuAicSDugyjliBhakrpBD_NUWuaPR2.png
รูปของรางวัล: ใช้ stock + watermark ระบุ "placeholder"
Testimonial avatar: ui-avatars.com หรือ DiceBear