diff --git a/src/components/BentoGrid.astro b/src/components/BentoGrid.astro new file mode 100644 index 0000000..c1764de --- /dev/null +++ b/src/components/BentoGrid.astro @@ -0,0 +1,39 @@ +--- +/** + * BentoGrid — 12-column asymmetric bento grid container. + * Use as children. + * + * Example: + * + * ... + * ... + * + */ +--- + +
+ +
+ + diff --git a/src/components/BentoTile.astro b/src/components/BentoTile.astro new file mode 100644 index 0000000..b586d90 --- /dev/null +++ b/src/components/BentoTile.astro @@ -0,0 +1,162 @@ +--- +/** + * BentoTile — a single bento grid cell. + * + * Props: + * span: 3 | 4 | 5 | 6 | 7 | 8 | 12 (default 6) + * rows: 1 | 2 | 3 (default 1) + * surface: 'white' | 'soft' | 'yellow' | 'purple' | 'purple-soft' | 'teal' | 'mint' | 'dark' | 'coral' + * minHeight: optional inline min-height CSS value + * eyebrow: optional small uppercase label above title + * title: optional H2 title + * reveal: boolean, animate on scroll into view (default true) + * + * Example: + * + *

...content...

+ * + */ + +interface Props { + span?: 3 | 4 | 5 | 6 | 7 | 8 | 12; + rows?: 1 | 2 | 3; + surface?: 'white' | 'soft' | 'yellow' | 'purple' | 'purple-soft' | 'teal' | 'mint' | 'dark' | 'coral'; + minHeight?: string; + eyebrow?: string; + title?: string; + reveal?: boolean; + class?: string; +} + +const { + span = 6, + rows = 1, + surface = 'white', + minHeight, + eyebrow, + title, + reveal = true, + class: className = '', +} = Astro.props; + +const spanClass = `span-${span}`; +const rowsClass = rows > 1 ? `rows-${rows}` : ''; +const surfaceClass = `surface-${surface}`; +const revealClass = reveal ? 'reveal' : ''; +--- + +
+ {eyebrow &&
{eyebrow}
} + {title &&

{title}

} +
+ +
+
+ + diff --git a/src/components/DecoOrb.astro b/src/components/DecoOrb.astro new file mode 100644 index 0000000..31d20a3 --- /dev/null +++ b/src/components/DecoOrb.astro @@ -0,0 +1,68 @@ +--- +/** + * DecoOrb — decorative parallax blur orb for section backgrounds. + * Pure decoration, never blocks clicks, always behind content. + * + * Props: + * color: 'yellow' | 'soft' | 'purple' | 'mint' | 'teal' (default 'yellow') + * size: CSS dimension (default '400px') + * speed: parallax speed 0.0–1.0 (default 0.4) + * position: { top?, right?, bottom?, left? } CSS positions + * blur: CSS blur value (default '60px') + * opacity: CSS opacity 0–1 (default 0.5) + * + * Example: + * + */ + +interface Props { + color?: 'yellow' | 'soft' | 'purple' | 'mint' | 'teal'; + size?: string; + speed?: number; + position?: { top?: string; right?: string; bottom?: string; left?: string }; + blur?: string; + opacity?: number; +} + +const { + color = 'yellow', + size = '400px', + speed = 0.4, + position = {}, + blur = '60px', + opacity = 0.5, +} = Astro.props; + +const styleStr = [ + `width: ${size};`, + `height: ${size};`, + `filter: blur(${blur});`, + `opacity: ${opacity};`, + position.top ? `top: ${position.top};` : '', + position.right ? `right: ${position.right};` : '', + position.bottom ? `bottom: ${position.bottom};` : '', + position.left ? `left: ${position.left};` : '', +].join(' '); +--- + + + + diff --git a/src/content/pages/about.md b/src/content/pages/about.md new file mode 100644 index 0000000..e153945 --- /dev/null +++ b/src/content/pages/about.md @@ -0,0 +1,86 @@ +--- +title: "เกี่ยวกับเรา" +subtitle: "ที่ปรึกษาที่ทำงานเอง ไม่ใช่ทีมขายที่ส่งงานต่อ" +hero_badge: "เกี่ยวกับเรา" +--- + +# เกี่ยวกับมอร์มินิมอร์ + +## เริ่มจากตรงนี้ + +มอร์มินิมอร์ ก่อตั้งปี 2020 จากประสบการณ์ตรงที่เห็น SME ไทยเสียเงินหลายแสนไปกับ + +- เว็บไซต์ที่ "สวยแต่ไม่มีคนเข้า" +- โฆษณาที่ "ยิงเยอะแต่ไม่มีคนซื้อ" +- AI tools ที่ "ว้าวแต่ใช้ไม่เป็น" + +เราเลยตั้งใจว่าจะทำให้ต่าง + +## นโยบายของเรา + +**เป้าหมายของเราคือการเพิ่มกำไรให้ลูกค้า** เพราะถ้าลูกค้ามีกำไรมากขึ้น ลูกค้าก็จะสามารถใช้บริการเราต่อไปได้ + +ทุกระบบที่ส่งมอบต้องตอบคำถามเดียวให้ได้: **"ลูกค้ามีกำไรเพิ่มขึ้นจริงไหม"** — ไม่ใช่แค่ส่งงานตามสัญญา + +## วิธีทำงานของเรา + +เราไม่ได้ทำงานแบบเดียวกับทุกที่ — เพราะลูกค้าแต่ละคนมีบริบท งบประมาณ และทีมต่างกัน + +- **งานที่ต้องใช้ความเชี่ยวชาญเฉพาะทาง** — เราจะทำเอง เพราะถ้าเราไม่ทำเอง เราจะตอบคำถามลูกค้าไม่ได้ +- **งานที่ต้องทำซ้ำ ๆ ปริมาณเยอะ** — เราจะใช้ bot หรือ outsource ให้คนที่เชี่ยวชาญเฉพาะด้าน เพราะเรื่องบางเรื่อง คนที่ทำเป็นอาชีพจะทำได้ดีกว่า +- **งานที่ต้องตอบลูกค้าตลอด 24 ชั่วโมง** — เราจะใช้ bot ช่วยคัดกรองเบื้องต้น แล้วเราจะตามด้วยคน เพราะบางเรื่อง bot ตอบไม่ได้ + +สรุปคือ — **ผลงานที่ออกมาจะขึ้นอยู่กับบริบทของลูกค้า ไม่ใช่วิธีทำงานของเรา** เราเลือกวิธีที่จะทำให้ลูกค้าได้ผลลัพธ์ที่ดีที่สุด ไม่ใช่วิธีที่เราถนัดที่สุด + +## เราเชื่ออะไร + +- **เว็บสวยไม่ได้แปลว่าขายได้** — เว็บหลายเว็บที่ดูดีที่สุด ขายแย่ที่สุดก็มี +- **AI ไม่ได้แทนทุกอย่าง** — แต่ถ้ารู้จักใช้ จะประหยัดหรือเปิดโอกาสใหม่ที่คาดไม่ถึง +- **จ่ายแพงไม่ได้แปลว่าดี** — งาน 80% ใช้ของถูกได้ ส่วนที่เหลือค่อยใช้ของแพง +- **ทำเผื่อมากเกินไป** มักจะทำให้จ่ายเกินความจำเป็น +- **"สิ่งที่ถูกต้อง" ไม่ใช่ "สิ่งที่ลูกค้าต้องการ" เสมอไป** — เราเช็คเสมอว่าสิ่งที่เราจะทำตรงกับที่ลูกค้าต้องการจริงไหม +- **ระบบที่สุดยอดที่คนใช้ไม่เป็น = เสียเงินเปล่า** — เราเน้นให้คนใช้ได้จริง ไม่ใช่แค่ส่งของแพง ๆ + +## เบื้องหลังการทำงาน + +เรานั่งทำงานที่บ้าน ใช้ MacBook ตัวเดียว แต่มี **เครื่องมือด้าน marketing intelligence** ที่ช่วยให้เราเข้าใจตลาดได้ลึกกว่าคนทั่วไป: + +- **ระบบดูโฆษณาคู่แข่ง** — ดูว่าคู่แข่งยิงโฆษณาอะไร คำไหน convert ดี งบประมาณเท่าไหร่ เพื่อให้ลูกค้าวางกลยุทธ์ได้โดยไม่ต้องเดา +- **ระบบวิเคราะห์ keyword + SEO gap** — หาโอกาสที่คู่แข่งยังไม่ได้ทำ เพื่อให้ลูกค้าได้ traffic ก่อน +- **ระบบติดตาม trend ตลาด** — รู้ว่าตลาดกำลังไปทางไหนก่อนที่ลูกค้าจะรู้ตัว +- **Stack:** JavaScript, Python, PHP, n8n, OpenAI API, Meta API, Google Analytics, Looker Studio — แล้วแต่งาน + +## เรื่องเล่าจากลูกค้า + +> "จ่ายไม่อั้นเปิดตลาดใหม่ให้ที" +> — ลูกค้าหลังขยายช่องทางการตลาดสำเร็จ + +> "ผลตอบรับดีเกินคาดแฮะ" +> — ลูกค้าหลังปรับกลยุทธ์โฆษณา + +> "ผมตามประชุมแต่ลูกค้าบอกว่า 'ไม่ต้องหรอก เพราะคนทักมาจนยุ่งไปหมดแล้ว'" +> — ลูกค้าหลังใช้ระบบจองออนไลน์/แชทบอททำงานแทน + +> "พี่คนโทรมาเพิ่มขึ้นครับ แถมถามสินค้าที่ไม่เคยมีคนถามด้วย" +> — ลูกค้าหลัง SEO ติดอันดับและมีคนเข้าเว็บเพิ่ม + +(เรื่องเล่าจากคำตอบลูกค้าจริง ที่ระบุไว้ในบริบทการสนทนาตอนเริ่มโปรเจกต์) + +## ลูกค้าที่เหมาะกับเรา + +- SME ที่ต้องการคนช่วยดูเรื่อง Online Marketing และระบบ IT +- ลูกค้าที่ไม่มีความรู้ IT มาก แต่จำเป็นต้องใช้ระบบ IT +- คนที่ต้องการที่ปรึกษาจริง ๆ ไม่ใช่คนมาขายของ + +## ลูกค้าที่ไม่เหมาะ + +- องค์กรขนาดใหญ่ที่ต้องการความเป็นทางการสูง + การเมืองเยอะ + ต้องสร้างภาพลักษณ์เกินตัว +- คนที่อยากได้ของฟรี หรือจ่ายน้อยระดับพัน แต่คาดหวังงานระดับแสน +- กลุ่ม IT ทั่วไป — เป็นคู่แข่งเกือบทั้งหมด ยกเว้นกลุ่มขาย Software เฉพาะทาง เช่น ERP + +## กระบวนการทำงาน + +1. **ปรึกษาฟรี 30-60 นาที** — คุยกับเจ้าของธุรกิจ ฟังปัญหา เป้าหมาย งบประมาณ ให้คำแนะนำเบื้องต้น ไม่ผูก commitment +2. **วางแผน + ส่ง Proposal** — วิเคราะห์เชิงลึก ดูคู่แข่ง ส่ง Proposal เป็น PDF คุณอ่าน ถามคำถาม แก้ไข scope ได้ก่อนเซ็น +3. **ดำเนินการ** — เราจะแจ้งความคืบหน้าของงานเป็นช่วง ๆ ผ่าน LINE Group ของโปรเจกต์ คุณเห็นว่าเราทำอะไรไปแล้วบ้าง และจะมี demo เมื่อเราพร้อมส่งงานรอบใหญ่ ๆ เท่านั้น — เราไม่อยากผูกมัดตัวเองกับ deadline แบบ sprint เพราะงานจริงไม่ได้แบ่งเป็นรอบสั้น ๆ ได้ตลอด +4. **ส่งมอบ + ดูแล** — ส่งมอบงาน + อบรมทีม + มอบคู่มือ หลังส่งมอบ ถ้ามีการปรับเปลี่ยนเล็ก ๆ น้อย ๆ หรือแก้ไขจุดบกพร่อง เราจะดูแลให้โดยไม่คิดค่าใช้จ่ายเพิ่ม ยกเว้นกรณีที่เป็นการสร้าง feature ใหม่ หรือปรับแต่งครั้งใหญ่ เราจะคิดค่าใช้จ่ายเป็นครั้ง ๆ ไปตามขอบเขตงาน diff --git a/src/pages/about.astro b/src/pages/about.astro index 1e449ef..db6bd43 100644 --- a/src/pages/about.astro +++ b/src/pages/about.astro @@ -3,7 +3,9 @@ import Base from '../layouts/Base.astro'; import Navigation from '../components/Navigation.astro'; import Footer from '../components/Footer.astro'; import PageHero from '../components/PageHero.astro'; -import Icon from '../components/Icon.astro'; +import BentoGrid from '../components/BentoGrid.astro'; +import BentoTile from '../components/BentoTile.astro'; +import DecoOrb from '../components/DecoOrb.astro'; import { getEntry, render } from 'astro:content'; import type { CollectionEntry } from 'astro:content'; @@ -20,18 +22,59 @@ const { Content } = await render(about); subtitle="บริษัท มอร์มินิมอร์ จำกัด — นโยบายของเราคือสร้างระบบที่ทำให้ลูกค้ามีกำไรมากขึ้น ไม่ใช่ทำเว็บไซต์ออกมาเยอะแล้วลืม เราเป็น Partner ที่นั่งทำงานข้างคุณจนระบบติดและใช้งานได้จริง" /> - -
-
-
- -
+ +
+ + +
+ + +

เพราะถ้าลูกค้ามีกำไรมากขึ้น ลูกค้าก็จะสามารถใช้บริการเราต่อไปได้

+

ทุกระบบที่ส่งมอบต้องตอบคำถามเดียวให้ได้: "ลูกค้ามีกำไรเพิ่มขึ้นจริงไหม" — ไม่ใช่แค่ส่งงานตามสัญญา

+ + + +

เพราะลูกค้าแต่ละคนมีบริบท งบประมาณ และทีมต่างกัน

+
    +
  • ✅ งานที่ต้องใช้ความเชี่ยวชาญเฉพาะทาง — เราทำเอง เพราะถ้าไม่ทำเอง จะตอบคำถามลูกค้าไม่ได้
    • +
  • ✅ งานที่ต้องทำซ้ำ ๆ ปริมาณเยอะ — เราใช้ bot หรือ outsource ให้คนเชี่ยวชาญ เพราะคนที่ทำเป็นอาชีพจะดีกว่า
    • +
  • ✅ งานที่ต้องตอบลูกค้าตลอด 24 ชั่วโมง — bot ช่วยคัดกรองเบื้องต้น แล้วเราตามด้วยคน
    • +
+

สรุป: ผลงานที่ออกมาขึ้นอยู่กับบริบทของลูกค้า ไม่ใช่วิธีทำงานของเรา — เราเลือกวิธีที่ทำให้ลูกค้าได้ผลลัพธ์ที่ดีที่สุด ไม่ใช่วิธีที่เราถนัดที่สุด

+ + + +

เห็น SME ไทยเสียเงินหลายแสนไปกับเว็บไซต์ "สวยแต่ไม่มีคนเข้า" และ AI tools "ว้าวแต่ใช้ไม่เป็น"

+ + + +
    +
  • เว็บสวยไม่ได้แปลว่าขายได้
    • +
  • AI ไม่ได้แทนทุกอย่าง — แต่ถ้ารู้จักใช้...
    • +
  • จ่ายแพงไม่ได้แปลว่าดี
    • +
  • "สิ่งที่ถูกต้อง" ไม่ใช่ "สิ่งที่ลูกค้าต้องการ" เสมอไป
    • +
  • ระบบที่คนใช้ไม่เป็น = เสียเงินเปล่า
    • +
+ + + +

นั่งทำงานที่บ้าน ใช้ MacBook ตัวเดียว แต่มีเครื่องมือที่ช่วยให้เข้าใจตลาดได้ลึกกว่าคนทั่วไป:

+
    +
  • ระบบดูโฆษณาคู่แข่ง — ดูว่าคู่แข่งยิงโฆษณาอะไร คำไหน convert ดี
    • +
  • วิเคราะห์ keyword + SEO gap — หาโอกาสที่คู่แข่งยังไม่ได้ทำ
    • +
  • ติดตาม trend ตลาด — รู้ก่อนลูกค้าว่าตลาดกำลังไปทางไหน
    • +
+

Stack: JavaScript, Python, PHP, n8n, OpenAI API, Meta API, Google Analytics, Looker Studio

+ +
-
-
+
+ + +
นโยบายของเรา @@ -48,7 +91,7 @@ const { Content } = await render(about);

- ความต่างของเรา เราเขียนโค้ดเอง ไม่ใช่เอาไป Outsource เราตอบแชตเอง ไม่ใช่ให้ Bot ตอบลูกค้า เราวางแผนเอง ไม่ใช่ใช้ Template เดียวกับทุกคน + วิธีทำงานของเรา เราไม่ได้ทำงานแบบเดียวกับทุกที่ — งานที่ต้องใช้ความเชี่ยวชาญเฉพาะทางเราทำเอง งานที่ต้องทำซ้ำ ๆ ปริมาณเยอะเราใช้ bot หรือ outsource ให้คนเชี่ยวชาญ เพราะคนที่ทำเป็นอาชีพจะดีกว่า

@@ -59,20 +102,20 @@ const { Content } = await render(about);
- 40+ + — ลูกค้าที่กลับมาใช้บริการซ้ำ
- 50+ + — โปรเจกต์ที่ส่งมอบ
5+ - ปีของการทำงานหนัก + ปีของการทำงานหนัก (ก่อตั้งปี 2020)
- 100% - โค้ดโดยทีมเรา ไม่ Outsource + — + อุตสาหกรรมที่รับ
@@ -81,7 +124,9 @@ const { Content } = await render(about);
-
+ + +
ค่านิยมของเรา

@@ -90,33 +135,25 @@ const { Content } = await render(about);

-
-
- -
+
+
01

เข้าใจธุรกิจก่อนเขียนโค้ด

30 นาทีแรกของทุกโปรเจกต์คือการถาม ไม่ใช่การ present เราถามจนเข้าใจว่าคุณขายให้ใคร กำไรเท่าไหร่ ปวดหัวตรงไหน แล้วค่อยแนะนำ solution

-
- -
+
02

เป็น Partner ไม่ใช่ Vendor

เราแชร์ progress ทุกสัปดาห์ผ่าน LINE Group เดียวกับที่ลูกค้าใช้ คุณเห็นทุก decision ไม่มี hidden cost ไม่มี "อันนี้เพิ่มเงินนะ" ตอนใกล้ deliver

-
- -
+
03

Deliver ตรงเวลา หรือบอกล่วงหน้า

เราไม่สัญญา deadline แบบเลื่อนได้ ถ้าจะติด เราจะบอกก่อน 7 วัน ไม่ใช่บอกตอนส่งงาน เคสไหนที่เคยส่งช้า เราคืนเงิน Pro-rata

-
- -
+
04

ดูแลหลังส่งมอบ

-

เว็บไซต์ที่ส่งแล้วทิ้งเป็นเว็บตาย เราเลยมีแพ็คเกจดูแลรายเดือนเริ่ม 2,000 บาท รวมอัปเดตเนื้อหา ปรับ SEO แก้บั๊ก ตอบคำถามผ่าน LINE

+

ปรับเล็ก ๆ น้อย ๆ ฟรี — คิดค่าใช้จ่ายเฉพาะ feature ใหม่หรือปรับแต่งครั้งใหญ่เท่านั้น

@@ -136,7 +173,9 @@ const { Content } = await render(about);
-
+ + +
กระบวนการทำงาน

@@ -146,7 +185,7 @@ const { Content } = await render(about);

-
+
01

ปรึกษาฟรี

30–60 นาทีคุยกับเจ้าของธุรกิจ ฟัง pain points, เป้าหมาย, budget ให้คำแนะนำเบื้องต้นฟรี ไม่ผูก commitment

@@ -154,17 +193,19 @@ const { Content } = await render(about);
02

วางแผน

-

วิเคราะห์เชิงลึก ดูคู่แข่ง ส่ง Proposal เป็นเอกสาร PDF คุณอ่าน ถามคำถาม แก้ไข scope ได้ก่อนเซ็น

+

วิเคราะห์เชิงลึก ดูคู่แข่ง ส่ง Proposal เป็น PDF คุณอ่าน ถามคำถาม แก้ไข scope ได้ก่อนเซ็น

-
+
03

ดำเนินการ

-

พัฒนาแบบ Sprint ส่ง demo ให้ทดสอบทุก 7–14 วัน เห็นงานจริง ไม่ใช่ "เดี๋ยวส่งทีเดียวตอนจบ"

+

แจ้งความคืบหน้าเป็นช่วง ๆ ผ่าน LINE Group — demo เมื่อเราพร้อมส่งงานรอบใหญ่ ๆ ไม่ sprint ไม่ deadline ล็อก

-
+
04 -

สนับสนุน

-

ส่งมอบงาน + อบรมทีม + มอบคู่มือ ติดตามผลทุกเดือน แนะนำสิ่งที่ควรปรับปรุง ต่อยอด หรือยกเลิก

+
+

ส่งมอบ + ดูแล

+

ส่งมอบงาน + อบรมทีม + มอบคู่มือ หลังส่งมอบปรับเล็ก ๆ น้อย ๆ ฟรี — คิดค่าใช้จ่ายเฉพาะ feature ใหม่หรือปรับแต่งครั้งใหญ่

+
@@ -190,92 +231,125 @@ const { Content } = await render(about); + + diff --git a/src/styles/global.css b/src/styles/global.css index 3dd761e..3f01acc 100644 --- a/src/styles/global.css +++ b/src/styles/global.css @@ -15,6 +15,16 @@ --color-primary: #fed400; /* yellow accent */ --color-primary-dark: #e6c100; /* hover state */ --color-primary-light: #fff5b3; /* tint for subtle backgrounds */ + --color-primary-soft: #fff4b3; /* bento tile surface */ + + /* Accent palette — for bento tile variety */ + --color-purple: #7c3aed; + --color-purple-soft: #ede9fe; + --color-teal: #0d9488; + --color-teal-soft: #ccfbf1; + --color-mint: #10b981; + --color-mint-soft: #d1fae5; + --color-coral: #f97316; --color-black: #0a0a0a; /* primary text */ --color-white: #ffffff; /* pure white */