// ThaiHao Marketing Pre-launch — single-page React artifact const { useState, useEffect, useRef, useMemo, useCallback } = React; // ============ Content (TH / EN / 简体) ============ const CONTENT = { "th-TH": { nav: { smes: "สำหรับผู้ประกอบการ", about: "เกี่ยวกับเรา" }, hero: { eyebrow: "เปิดให้บริการเร็วๆ นี้ · LAUNCHING SOON", headline: "นำสินค้าไทยข้ามแดน\nสู่ผู้บริโภคจีน\nผ่าน KOL live commerce", sub: "แพลตฟอร์ม cross-border ที่จัดการ KOL distribution · logistics · compliance ครบในขั้นตอนเดียว", cta: "ลงทะเบียนผู้ประกอบการ", secondary: "ดูว่าทำงานยังไง", note: "เปิดรับสมัครรอบแรก · จำกัด 50 แบรนด์", scrollHint: "เลื่อนลง" }, value: { eyebrow: "สิ่งที่ ThaiHao ดูแลให้", title: "ทำงานข้ามแดนเหมือนทำงานในประเทศ", items: [ { icon: "ti-broadcast", title: "คัดสรร KOL คุณภาพในประเทศจีน", desc: "เครือข่าย KOL ที่ได้รับการตรวจสอบประวัติและผลงานในแต่ละหมวดสินค้า" }, { icon: "ti-truck-delivery", title: "จัดการ logistics และ compliance ครบวงจร", desc: "พิธีการศุลกากร คลังสินค้าทัณฑ์บน และการชำระภาษีดูแลตั้งแต่ต้นจนจบ" }, { icon: "ti-chart-bar", title: "ค่าธรรมเนียมโปร่งใส วัดผลทุก live session", desc: "รายงานยอดขาย ค่าคอมมิชชั่น และ ROI ของแต่ละ live แบบ real-time" }] }, forwhom: { eyebrow: "เหมาะกับใคร", title: "สำหรับแบรนด์ไทยในหมวดสินค้าเหล่านี้", items: [ { icon: "ti-rosette", title: "ความงามและของใช้ส่วนบุคคล", desc: "skincare · cosmetics · personal care" }, { icon: "ti-leaf", title: "อาหารและเครื่องดื่ม", desc: "snacks · beverages · เครื่องปรุง" }, { icon: "ti-heart", title: "สุขภาพและไลฟ์สไตล์", desc: "อาหารเสริม · wellness · กีฬา" }, { icon: "ti-home", title: "ของใช้ในบ้าน", desc: "home goods · เครื่องครัว · ของแต่งบ้าน" }] }, how: { eyebrow: "ขั้นตอนการทำงาน", title: "ตั้งแต่ลงทะเบียนถึงรับชำระเงิน", steps: [ { n: "01", title: "ลงทะเบียน", desc: "ส่งข้อมูลผู้ประกอบการและสินค้า" }, { n: "02", title: "ตรวจสอบและคัดสรร", desc: "ทีมงานตรวจสอบและจับคู่ KOL" }, { n: "03", title: "Live commerce", desc: "KOL ในจีนนำสินค้าออกขายผ่าน livestream" }, { n: "04", title: "จัดส่งและชำระเงิน", desc: "Cross-border fulfillment + settlement" }] }, trust: { eyebrow: "พื้นฐานที่เชื่อถือได้", title: "ออกแบบมาเพื่อการทำงานข้ามแดนอย่างจริงจัง", items: [ { value: "PDPA + PIPL compliant", caption: "กรอบกฎหมายคุ้มครองข้อมูล" }, { value: "BKK ↔ SZX", caption: "ทีมงานในกรุงเทพและเซินเจิ้น" }, { value: "50 แบรนด์", caption: "เปิดรับสมัครรอบแรก จำกัดจำนวน" }] }, cta2: { title: "พร้อมส่งสินค้าข้ามแดน?", sub: "ลงทะเบียนเพื่อรับการประเมินเบื้องต้นจากทีมงาน ภายใน 5 วันทำการ", note: "เปิดรับสมัครรอบแรก · จำกัด 50 แบรนด์" }, faq: { eyebrow: "คำถามที่พบบ่อย", title: "สิ่งที่ผู้ประกอบการถามบ่อย", items: [ { q: "ค่าธรรมเนียมคิดอย่างไร?", a: "ค่าธรรมเนียมคิดจากยอดขายจริงต่อ live session ไม่มีค่าบริการรายเดือนหรือค่าแรกเข้า รายละเอียดจะแจ้งหลังตรวจสอบสินค้า" }, { q: "ใช้เวลานานแค่ไหนจากลงทะเบียนจนถึง live ครั้งแรก?", a: "โดยเฉลี่ย 4-6 สัปดาห์ ขึ้นอยู่กับความพร้อมของเอกสาร การตรวจสอบ compliance และ KOL slot ที่ตรงกับหมวดสินค้า" }, { q: "สินค้าต้องผ่าน FDA ไทยและจีนทั้งสองฝั่งหรือไม่?", a: "สินค้าที่เข้าข่ายได้ผ่านมาตรฐานของทั้งสองประเทศ ทีมงานช่วยประสานงานขอจดทะเบียนได้หากยังไม่พร้อม" }, { q: "ระยะเวลาการชำระเงินหลัง live จบ?", a: "ชำระสุทธิภายใน 14 วันหลังปิด live พร้อมรายงานสรุปต่อ session และ SKU" }] }, footer: { tag: "Cross-border live commerce ระหว่างไทยและจีน", contactTitle: "ติดต่อ", linksTitle: "ลิงก์", links: [ { label: "นโยบายความเป็นส่วนตัว", href: "#privacy" }, { label: "เงื่อนไขการใช้บริการ", href: "#terms" }], copy: "© 2026 ThaiHao · กรุงเทพ — เซินเจิ้น", backToTop: "กลับขึ้นบนสุด" } }, "en-US": { nav: { smes: "For brands", about: "About" }, hero: { eyebrow: "Launching soon · เปิดให้บริการเร็วๆ นี้", headline: "Bringing Thai brands\nto Chinese consumers\nthrough KOL live commerce", sub: "A cross-border platform handling KOL distribution, logistics and compliance in a single workflow.", cta: "Register your brand", secondary: "See how it works", note: "First cohort open · limited to 50 brands", scrollHint: "Scroll" }, value: { eyebrow: "What ThaiHao handles", title: "Work across borders the way you work at home", items: [ { icon: "ti-broadcast", title: "Vetted KOL distribution in China", desc: "A network of KOLs verified by track record and category fit." }, { icon: "ti-truck-delivery", title: "End-to-end logistics and compliance", desc: "Customs clearance, bonded warehousing, and duties handled from start to finish." }, { icon: "ti-chart-bar", title: "Transparent fees, every live measured", desc: "Real-time sales, commission and ROI reporting on every livestream." }] }, forwhom: { eyebrow: "Who it's for", title: "Built for Thai brands in these categories", items: [ { icon: "ti-rosette", title: "Beauty and personal care", desc: "Skincare, cosmetics, personal care" }, { icon: "ti-leaf", title: "Food and beverage", desc: "Snacks, beverages, seasonings" }, { icon: "ti-heart", title: "Health and lifestyle", desc: "Supplements, wellness, fitness" }, { icon: "ti-home", title: "Home goods", desc: "Household, kitchen, home decor" }] }, how: { eyebrow: "How it works", title: "From application to settlement", steps: [ { n: "01", title: "Apply", desc: "Submit brand and product information" }, { n: "02", title: "Review and match", desc: "Our team vets and pairs you with KOLs" }, { n: "03", title: "Live commerce", desc: "KOLs in China sell your products via livestream" }, { n: "04", title: "Fulfill and settle", desc: "Cross-border fulfillment plus settlement" }] }, trust: { eyebrow: "Foundations", title: "Designed for serious cross-border work", items: [ { value: "PDPA + PIPL compliant", caption: "Data protection on both sides" }, { value: "BKK ↔ SZX", caption: "Teams in Bangkok and Shenzhen" }, { value: "50 brands", caption: "Limited first cohort, applications open" }] }, cta2: { title: "Ready to cross the border?", sub: "Register and our team will return an initial assessment within 5 business days.", note: "First cohort open · limited to 50 brands" }, faq: { eyebrow: "Common questions", title: "What brands ask us most", items: [ { q: "How are fees structured?", a: "Commission is taken from confirmed sales per live session. No monthly retainer or per-product listing fee. The exact rate depends on category and is disclosed before contract." }, { q: "How long from application to first live?", a: "Typically 4–6 weeks, depending on product readiness, compliance review, and KOL slot availability for your category." }, { q: "Do products need Thai FDA and Chinese registrations?", a: "Exported goods must meet both jurisdictions' standards. Our team coordinates with your regulatory contacts so the process doesn't stall." }, { q: "How does settlement work after a live session?", a: "Settlement runs within 14 business days of the live. Reporting is itemized per session and per SKU." }] }, footer: { tag: "Cross-border live commerce between Thailand and China", contactTitle: "Contact", linksTitle: "Links", links: [ { label: "Privacy policy", href: "#privacy" }, { label: "Terms of service", href: "#terms" }], copy: "© 2026 ThaiHao · Bangkok — Shenzhen", backToTop: "Back to top" } }, "zh-CN": { nav: { smes: "面向品牌方", about: "关于我们" }, hero: { eyebrow: "即将上线 · LAUNCHING SOON", headline: "通过 KOL 直播电商\n把泰国品牌带给\n中国消费者", sub: "一个跨境平台,在同一流程内完成 KOL 分发、物流与合规。", cta: "品牌方注册", secondary: "了解运作方式", note: "首批名额开放 · 限 50 个品牌", scrollHint: "下滑" }, value: { eyebrow: "ThaiHao 负责的部分", title: "把跨境做得像在本地一样", items: [ { icon: "ti-broadcast", title: "经过筛选的中国 KOL 分发", desc: "按品类匹配、经过资质与业绩核验的 KOL 网络。" }, { icon: "ti-truck-delivery", title: "端到端的物流与合规", desc: "清关、保税仓储与税费,全流程托管。" }, { icon: "ti-chart-bar", title: "透明费率,每场直播可量化", desc: "实时呈现每场直播的销售、佣金与 ROI。" }] }, forwhom: { eyebrow: "适合谁", title: "面向以下品类的泰国品牌", items: [ { icon: "ti-rosette", title: "美妆与个护", desc: "护肤 · 彩妆 · 个人护理" }, { icon: "ti-leaf", title: "食品与饮料", desc: "零食 · 饮品 · 调味" }, { icon: "ti-heart", title: "健康与生活方式", desc: "保健品 · 健身 · 大健康" }, { icon: "ti-home", title: "家居用品", desc: "家居 · 厨具 · 装饰" }] }, how: { eyebrow: "运作方式", title: "从申请到结算", steps: [ { n: "01", title: "提交申请", desc: "提交品牌与产品资料" }, { n: "02", title: "审核与匹配", desc: "团队审核并匹配合适的 KOL" }, { n: "03", title: "直播带货", desc: "中国 KOL 通过直播销售你的产品" }, { n: "04", title: "履约与结算", desc: "跨境履约与资金结算" }] }, trust: { eyebrow: "底层基础", title: "为严肃的跨境业务而设计", items: [ { value: "PDPA + PIPL 合规", caption: "两地数据保护框架" }, { value: "BKK ↔ SZX", caption: "曼谷与深圳双团队" }, { value: "50 个品牌", caption: "首批名额有限,正在开放" }] }, cta2: { title: "准备好走出去了吗?", sub: "提交申请,团队将在 5 个工作日内返回初步评估。", note: "首批名额开放 · 限 50 个品牌" }, faq: { eyebrow: "常见问题", title: "品牌方问得最多的几个问题", items: [ { q: "费率怎么计?", a: "佣金仅从每场直播的确认销售中抽取,不收月费与上架费。具体费率依品类而定,在签约前明示。" }, { q: "从申请到首场直播需要多久?", a: "一般 4–6 周,取决于产品准备、合规审核以及品类匹配的 KOL 档期。" }, { q: "产品需要泰国 FDA 和中国备案吗?", a: "出口产品需同时满足两地标准。团队会与品牌方的法规联系人协调,避免流程停滞。" }, { q: "直播后的结算怎么走?", a: "结算在直播后 14 个工作日内完成。报表按场、按 SKU 明细呈现。" }] }, footer: { tag: "中泰之间的跨境直播电商", contactTitle: "联系我们", linksTitle: "链接", links: [ { label: "隐私政策", href: "#privacy" }, { label: "服务条款", href: "#terms" }], copy: "© 2026 ThaiHao · 曼谷 — 深圳", backToTop: "回到顶部" } } }; const LANGS = [ { id: "th-TH", flag: "🇹🇭", label: "TH" }, { id: "en-US", flag: "🇬🇧", label: "EN" }, { id: "zh-CN", flag: "🇨🇳", label: "简体" }]; const REGISTER_URL = "https://register.thaihao.co"; // Marquee terms — supply-chain vocabulary, language-mixed by design. // These are facts of the business; show them like a ticker. const MARQUEE_ITEMS = [ "Cross-border live commerce", "ผ่านพิธีการศุลกากร", "PDPA + PIPL compliant", "保税仓 · Bonded warehouse", "KOL distribution", "BKK ↔ SZX", "Cold chain ready", "跨境结算 · Settlement", "Real-time analytics", "中国海关 customs cleared", "Returns + refund handling"]; // ============ Atoms ============ function Wordmark({ size = "sm" }) { const src = (window.__resources && window.__resources.logo) || "assets/thaihao-logo.png"; return ( ThaiHao); } function LanguageToggle({ value, onChange }) { return (
{LANGS.map((l) => )}
); } function PrimaryCTA({ children, size }) { return ( {children} ); } // ============ Topbar ============ function Topbar({ lang, setLang, t }) { const [scrolled, setScrolled] = useState(false); useEffect(() => { const onScroll = () => setScrolled(window.scrollY > 80); onScroll(); window.addEventListener("scroll", onScroll, { passive: true }); return () => window.removeEventListener("scroll", onScroll); }, []); return (
); } // ============ Reveal wrapper ============ function Reveal({ as: Tag = "div", className = "", children, ...rest }) { const ref = useRef(null); useEffect(() => { const el = ref.current; if (!el) return; const io = new IntersectionObserver( (entries) => { entries.forEach((e) => { if (e.isIntersecting) { el.classList.add("is-visible"); io.unobserve(el); } }); }, { threshold: 0.12, rootMargin: "0px 0px -40px 0px" } ); io.observe(el); return () => io.disconnect(); }, []); return ( {children} ); } // ============ Sections ============ function Hero({ t, accent }) { const lines = t.hero.headline.split("\n"); return (
{t.hero.eyebrow}
{accent !== false ? : null}

{lines.map((line, i) => {line} )}

{t.hero.sub}

{t.hero.cta} {t.hero.secondary}
{t.hero.note}
{t.hero.scrollHint}
); } function Marquee({ items }) { // Duplicate items so the looped translateX(-50%) lands cleanly. const doubled = items.concat(items); return ( ); } function ValueProp({ t }) { return (
{t.value.eyebrow}

{t.value.title}

 {t.value.items.map((it, i) =>

{it.title}

{it.desc}

)}
); } function ForWhom({ t }) { return (
{t.forwhom.eyebrow}

{t.forwhom.title}

 {t.forwhom.items.map((it, i) =>

{it.title}

{it.desc}

)}
); } function HowItWorks({ t }) { return (
{t.how.eyebrow}

{t.how.title}

 {t.how.steps.map((s, i) =>
{s.n} {i < t.how.steps.length - 1 ? : null}

{s.title}

{s.desc}

)}
); } function Trust({ t }) { return (
{t.trust.eyebrow}

{t.trust.title}

 {t.trust.items.map((it, i) =>

{it.value}

{it.caption}
)}
); } function CTARepeat({ t }) { return (

{t.cta2.title}

{t.cta2.sub}

{t.hero.cta}

{t.cta2.note}
); } function FAQ({ t }) { return (
{t.faq.eyebrow}

{t.faq.title}

 {t.faq.items.map((it, i) =>
{it.q}

{it.a}

)}
); } function Footer({ t }) { return ( ); } // ============ App ============ const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{ "accentLine": true, "showFaq": true, "showMarquee": true, "primary": "#AC0022" } /*EDITMODE-END*/; const PRIMARY_OPTIONS = [ "#AC0022", // Brand default — deep red "#800017", // Pressed — deeper, more authoritative "#C81F35", // Hover — warmer, more vivid "#7A1F1F" // Wine — softer ]; // Derive hover/pressed shades from a single base color function shade(hex, pct) { const h = hex.replace("#", ""); const r = parseInt(h.slice(0, 2), 16); const g = parseInt(h.slice(2, 4), 16); const b = parseInt(h.slice(4, 6), 16); const f = (c) => Math.max(0, Math.min(255, Math.round(c + (pct > 0 ? (255 - c) * pct : c * pct)))); const to2 = (n) => n.toString(16).padStart(2, "0"); return "#" + to2(f(r)) + to2(f(g)) + to2(f(b)); } function App() { const [t, setTweak] = useTweaks(TWEAK_DEFAULTS); const [lang, setLangState] = useState(() => { try { const stored = localStorage.getItem("thaihao.lang"); if (stored && CONTENT[stored]) return stored; } catch (e) {} return "th-TH"; }); const setLang = useCallback((l) => { setLangState(l); try {localStorage.setItem("thaihao.lang", l);} catch (e) {} }, []); useEffect(() => { const langAttr = lang === "th-TH" ? "th" : lang === "zh-CN" ? "zh-Hans" : "en"; document.documentElement.setAttribute("lang", langAttr); }, [lang]); // Apply primary color tweak by overriding CSS vars on :root useEffect(() => { const root = document.documentElement; root.style.setProperty("--thaihao-primary", t.primary); root.style.setProperty("--thaihao-primary-hover", shade(t.primary, 0.15)); root.style.setProperty("--thaihao-primary-pressed", shade(t.primary, -0.2)); }, [t.primary]); const content = CONTENT[lang]; return (
{t.showMarquee ? : null} {t.showFaq ? : null}