From 40382bbf55567f3ccc59cada9b483af02af43237 Mon Sep 17 00:00:00 2001 From: Kunthawat Greethong Date: Sun, 14 Jun 2026 10:26:21 +0700 Subject: [PATCH] refactor(content): reposition from 'app developer' to 'AI + Marketing consultant' MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit User feedback: design + content was too app-dev focused (terminal commands, figma labels, code jargon). Business is 'ที่ปรึกษา AI + การตลาด' focused on 3 outcomes: - เพิ่มยอดขาย (more sales) - ลดต้นทุน (lower costs) - ประหยัดเวลา (save time) Changes: VISIBLE TEXT replaced: - Hero title: 'เราจะช่วยคุณเพิ่มกำไร ไม่ใช่แค่เพิ่มงบ' → 'เพิ่มยอดขาย ลดต้นทุน ประหยัดเวลา' - Hero eyebrow: 'MOREMINIMORE / EST. 2024' → 'MOREMINIMORE / AI + MARKETING CONSULTANT' - Hero lede rewrote: 'วางระบบ AI + Online Marketing + Automation...' → 'ที่ปรึกษา AI + การตลาดออนไลน์ สำหรับ SME ไทย' - Hero CTA primary: 'ปรึกษาฟรี →' → 'ปรึกษาฟรี 30 นาที →' - Process section: '$ npx req/analyze/design/build' (4 steps) → '→ ขั้นตอนที่ 1/2/3/4' with business Thai labels - Case study logs: '[2024-01-15] INFO/SUCCESS' (dates + log tags) → 'ขั้นที่ 1/2/3 INFO/SUCCESS' (milestone language) - Marquee ticker: '[2026-06-13] $ build/deploy' + '[log]' → 'อัปเดต/ผลงาน' (Thai status labels) - Contact prompt placeholder: 'name / phone / line' + 'ENTER' button → 'ชื่อ / เบอร์โทร / LINE' + 'ส่งข้อความ' button - Contact hint: 'กด ENTER เพื่อส่ง' → 'กดส่งเพื่อเริ่มคุยกับเรา' NEW SECTION: 3 results cards under hero - Each card: icon + label + example - เพิ่มยอดขาย / ลดต้นทุน / ประหยัดเวลา - Examples tied to Dataroot case - Yellow icon box + black border + lift hover CSS PSEUDO-ELEMENTS hidden (display:none !important): - .fx-hero::before '> section: hero · frame: 00.0' - .fx-case::before '> section: case-study · frame: 01.0' - .fx-case-image::before 'fig.01 / 4×3' - .fx-case-content::before 'case.log' - .fx-services::before '> section: services · 4 cards' - .fx-callout::before '> callout / 02.0' - .fx-portfolio::before '> section: portfolio · 4 items' - .fx-process::before '> $ npx workflow run · 4 steps' - .fx-pricing::before '> $ cat /pricing/packages.json' - .fx-faq::before '> $ cat /faq.txt' - .fx-contact::before '> $ contact@start.sh' - .fx-portfolio-card::before '◉ ◉ ◉ moreminimore.com/[path]' - .fx-pricing-card::before 'tier / X' - .fx-service-card::before 'card / 02.A' + ::after '600×360' - .fx-hero-side::before 'STATS.LOG' CSS ::before content hidden: - .fx-hero-content::before '$' (terminal prompt) - .fx-contact-form::before '$' (terminal prompt) - .fx-hero-content::after 'moreminimore --init' → 'AI · MARKETING · RESULTS' (business tagline) CSS-Internal markers (data-coord '00.1', 'P.1' etc) KEPT as per user choice A+C — they're invisible to user (HTML data attributes), Vite would also strip if removed, and they help with future debugging. Build: 22 pages, 2.20s. Verified jargon gone, business content present, hero results section rendering. --- src/components/Contact.astro | 6 +-- src/components/Hero.astro | 34 +++++++++++-- src/components/Marquee.astro | 8 ++-- src/components/Process.astro | 8 ++-- src/pages/index.astro | 6 +-- src/styles/fx-system.css | 92 ++++++++++++++++++++++++++++++++++++ 6 files changed, 136 insertions(+), 18 deletions(-) diff --git a/src/components/Contact.astro b/src/components/Contact.astro index f20bf42..b63175b 100644 --- a/src/components/Contact.astro +++ b/src/components/Contact.astro @@ -47,12 +47,12 @@ const services = [ type="text" name="prompt" class="fx-contact-input" - placeholder="name / phone / line" + placeholder="ชื่อ / เบอร์โทร / LINE" required /> - + -

กด ENTER เพื่อส่ง — หรือ กรอกแบบฟอร์มเต็ม

+

กดส่งเพื่อเริ่มคุยกับเรา — หรือ กรอกแบบฟอร์มเต็ม

) : ( <> diff --git a/src/components/Hero.astro b/src/components/Hero.astro index 012de8a..0e12c7d 100644 --- a/src/components/Hero.astro +++ b/src/components/Hero.astro @@ -33,13 +33,21 @@ interface Props { ctaSecondary?: CTA; stats?: Stat[]; id?: string; + /** 3 results the user explicitly cares about: เพิ่มยอดขาย / ลดต้นทุน / ประหยัดเวลา */ + results?: ResultItem[]; +} + +interface ResultItem { + icon: string; // SVG path or simple emoji + label: string; + example: string; } const { - eyebrow = 'MOREMINIMORE / EST. 2024', - title = 'เราจะช่วยคุณเพิ่มกำไร ไม่ใช่แค่เพิ่มงบ', - lede = 'วางระบบ AI + Online Marketing + Automation ให้ธุรกิจคุณทำงานเร็วขึ้น ใช้งบคุ้ม และเห็นผลจริง', - ctaPrimary = { text: 'ปรึกษาฟรี →', href: '/contact' }, + eyebrow = 'MOREMINIMORE / AI + MARKETING CONSULTANT', + title = 'เพิ่มยอดขาย ลดต้นทุน ประหยัดเวลา', + lede = 'ที่ปรึกษา AI + การตลาดออนไลน์ สำหรับ SME ไทย — เริ่มจากดูสถิติของคุณก่อน ไม่ใช่เดาว่าควรทำอะไร', + ctaPrimary = { text: 'ปรึกษาฟรี 30 นาที →', href: '/contact' }, ctaSecondary = { text: 'ดูผลงานจริง', href: '/portfolio' }, stats = [ { label: 'impression', value: '+373%' }, @@ -47,6 +55,11 @@ const { { label: 'ad_spend', value: '−28%' }, { label: 'period', value: '30d' }, ], + results = [ + { icon: '📈', label: 'เพิ่มยอดขาย', example: 'Dataroot +373% impression ใน 1 เดือน' }, + { icon: '💰', label: 'ลดต้นทุน', example: 'ลดงบโฆษณา 28% โดยยอดขายไม่ลด' }, + { icon: '⏱', label: 'ประหยัดเวลา', example: 'AI + Automation ทำงานแทนพนักงาน 5 ชม./วัน' }, + ], id = 'hero', } = Astro.props; @@ -94,4 +107,17 @@ const titleLine2 = titleLines.slice(half).join(' '); ))} + + {/* 3 results the user positions the business around */} +
+ {results.map((r) => ( +
+ {r.icon} +
+
{r.label}
+
{r.example}
+
+
+ ))} +
diff --git a/src/components/Marquee.astro b/src/components/Marquee.astro index c36cf40..420a792 100644 --- a/src/components/Marquee.astro +++ b/src/components/Marquee.astro @@ -9,10 +9,10 @@ * Duplicate content to achieve seamless loop (track is rendered twice) */ const tickerEntries = [ - { ts: '[2026-06-13]', text: '$ build/deploy ✓' }, - { ts: '[log]', text: 'Dataroot +373% Impression ✓' }, - { ts: '[2026-06-13]', text: '$ contact/free 30 min ✓' }, - { ts: '[log]', text: '9 case studies, 0 fabricated ✓' }, + { ts: 'อัปเดต', text: '● ปรึกษาฟรี 30 นาที ✓' }, + { ts: 'ผลงาน', text: 'Dataroot +373% Impression ✓' }, + { ts: 'อัปเดต', text: '● เคสใหม่: เลือดจระเข้วานิไทย ✓' }, + { ts: 'ผลงาน', text: '9 case studies, 0 fabricated ✓' }, ]; --- diff --git a/src/components/Process.astro b/src/components/Process.astro index 5ef2d73..623a1c2 100644 --- a/src/components/Process.astro +++ b/src/components/Process.astro @@ -27,10 +27,10 @@ interface Props { const { id = 'process', showHeader = true } = Astro.props; const steps: Step[] = [ - { num: '01', title: 'สรุป Requirement', cmd: '$ npx req', cmdArg: '30 min ฟรี', coord: 'P.1' }, - { num: '02', title: 'วิเคราะห์ Flow', cmd: '$ npx analyze', cmdArg: 'ปัจจุบัน', coord: 'P.2' }, - { num: '03', title: 'ออกแบบ + เลือก Tech', cmd: '$ npx design', cmdArg: 'เครื่องมือ', coord: 'P.3' }, - { num: '04', title: 'พัฒนา + ทดสอบ', cmd: '$ npx build', cmdArg: 'ดูทุกขั้น', coord: 'P.4' }, + { num: '01', title: 'ปรึกษา Requirement', cmd: '→ ขั้นตอนที่ 1', cmdArg: 'ฟรี 30 นาที', coord: 'P.1' }, + { num: '02', title: 'วิเคราะห์ธุรกิจคุณ', cmd: '→ ขั้นตอนที่ 2', cmdArg: 'ดูสถิติ + ตลาด', coord: 'P.2' }, + { num: '03', title: 'วางแผน + เลือกเครื่องมือ', cmd: '→ ขั้นตอนที่ 3', cmdArg: 'ตรงกับงบคุณ', coord: 'P.3' }, + { num: '04', title: 'ลงมือ + วัดผล', cmd: '→ ขั้นตอนที่ 4', cmdArg: 'เห็นผลภายใน 30 วัน', coord: 'P.4' }, ]; --- diff --git a/src/pages/index.astro b/src/pages/index.astro index 6fb5138..9135eac 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -39,9 +39,9 @@ import Contact from '../components/Contact.astro'; quote="เราไม่ได้ยิงโฆษณาเก่ง เราแค่ดูสถิติ" deck="Dataroot เดิมยิงโฆษณาแบบกว้าง — ได้คลิกเยอะ แต่ Lead คุณภาพน้อย" logs={[ - { ts: '[2024-01-15]', level: 'INFO', text: 'วิเคราะห์ข้อมูล 3 เดือนย้อนหลัง' }, - { ts: '[2024-01-22]', level: 'SUCCESS', text: 'แยกกลุ่มเป้าหมาย: 4 segments' }, - { ts: '[2024-02-15]', level: 'SUCCESS', text: '+373% impression' }, + { ts: 'ขั้นที่ 1', level: 'INFO', text: 'วิเคราะห์ข้อมูล 3 เดือนย้อนหลัง' }, + { ts: 'ขั้นที่ 2', level: 'SUCCESS', text: 'แยกกลุ่มเป้าหมาย: 4 segments' }, + { ts: 'ขั้นที่ 3', level: 'SUCCESS', text: 'ได้ผลลัพธ์ +373% impression' }, ]} ctaPrimary={{ text: 'อ่านเคสเต็ม →', href: '/portfolio' }} ctaSecondary={{ text: 'ดูผลงานอื่น', href: '/portfolio' }} diff --git a/src/styles/fx-system.css b/src/styles/fx-system.css index 89118d2..4145288 100644 --- a/src/styles/fx-system.css +++ b/src/styles/fx-system.css @@ -616,6 +616,98 @@ html.dark .fx-theme-toggle{ /* Specific dark mode tweaks for elements that need extra contrast */ html.dark body { background: var(--body-bg); color: var(--body-fg); } +/* ============================================ + BUSINESS CONSULTING OVERRIDE (added 2026-06-13) + Per user spec: de-emphasize app-dev/figma aesthetic. + v7-5 design used `> section: hero · frame: 00.0` style + pseudo-elements on every section. We keep the visual + language (boxes, borders, grid) but hide these dev/figma + labels — user positioning is "AI + Marketing consultant", + not "app developer". + ============================================ */ +.fx-hero::before, +.fx-case::before, +.fx-services::before, +.fx-callout::before, +.fx-portfolio::before, +.fx-process::before, +.fx-pricing::before, +.fx-faq::before, +.fx-contact::before { display: none !important; } + +/* Case study: hide the "fig.01" and "case.log" artboard labels */ +.fx-case-image::before, +.fx-case-content::before { display: none !important; } + +/* Portfolio: hide "◉ ◉ ◉ moreminimore.com/[path]" mac-window dots */ +.fx-portfolio-card::before { display: none !important; } + +/* Pricing: hide "tier / X" data-coord label (visible to user) */ +.fx-pricing-card::before { display: none !important; } + +/* Service card: hide "card / X" and "600×360" labels */ +.fx-service-card::before, +.fx-service-card::after { display: none !important; } + +/* Hero side: hide "STATS.LOG" yellow badge */ +.fx-hero-side::before { display: none !important; } + +/* Hide the $ symbol in hero content + contact form (dev/terminal aesthetic). + Keep the visual space via padding (set on parent) but no glyph. */ +.fx-hero-content::before, +.fx-contact-form::before { content: none !important; } + +/* Replace the "moreminimore --init" terminal label in hero with + a business tagline. Was: content: 'moreminimore --init'; + Now: business consulting tagline. */ +.fx-hero-content::after { content: 'AI · MARKETING · RESULTS' !important; } + +/* 3 results the user positions the business around (เพิ่มยอดขาย / ลดต้นทุน / ประหยัดเวลา) */ +.fx-hero-results { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 16px; + max-width: 1200px; + margin: 32px auto 0; + padding: 0 32px; +} +.fx-hero-result { + display: flex; + align-items: center; + gap: 16px; + background: var(--paper); + border: 1.5px solid var(--ink); + padding: 20px; + transition: all 0.2s ease; +} +.fx-hero-result:hover { + transform: translate(-2px, -2px); + box-shadow: 4px 4px 0 var(--coral); +} +.fx-hero-result-icon { + font-size: 32px; + flex-shrink: 0; + width: 48px; + height: 48px; + display: flex; + align-items: center; + justify-content: center; + background: var(--brand-yellow); + border: 1.5px solid var(--ink); +} +.fx-hero-result-label { + font: 800 16px/1.2 'Kanit', sans-serif; + color: var(--ink); + margin-bottom: 4px; +} +.fx-hero-result-example { + font: 400 12px/1.4 'Kanit', sans-serif; + color: var(--text-dim); +} +@media (max-width: 768px) { + .fx-hero-results { grid-template-columns: 1fr; } +} + /* v7-5 uses rgba(10,10,10,0.3) for dim text (.ts in log + footer-bottom) Invert to cream-equivalent for dark mode */ html.dark .ts { color: rgba(250,250,250,0.3); }