diff --git a/src/pages/index.astro b/src/pages/index.astro index 873d764..94f1e18 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -153,32 +153,59 @@ const featuredPortfolio = portfolio.filter(p => const tileCopy = [ { eyebrow: 'ที่ปรึกษาด้าน AI', + surface: 'teal', subtitle: 'การนำ AI มาปรับใช้ในองค์กร เพื่อลดต้นทุนและเวลา รวมถึงการรักษาความรู้จากพนักงานที่เชี่ยวชาญ', objective: 'รักษาความรู้ขององค์กร ลดต้นทุนและเวลาการทำงาน', + bullets: [ + 'วิเคราะห์ workflow ที่เหมาะกับ AI ก่อนลงทุน', + 'เลือก AI Model ที่คุ้มค่า ไม่ใช่แพงสุด', + 'วางระบบ AI Agent ที่พนักงานใช้จริง', + ], }, { eyebrow: 'วางระบบ Automation', + surface: 'coral', subtitle: 'การออกแบบระบบ Automation สำหรับธุรกิจคุณโดยเฉพาะ', objective: 'ลดต้นทุนและเวลา', + bullets: [ + 'ดู Workflow ก่อน เลือกเครื่องมือที่เหมาะสม', + 'ลดเวลางานซ้ำจากชั่วโมงเป็นนาที', + 'ระบบทำงานอัตโนมัติ พนักงานไม่เสียเวลาทำ Manual', + ], }, { eyebrow: 'ที่ปรึกษาการตลาดออนไลน์', + surface: 'dark', subtitle: 'ออกแบบและวางกลยุทธ์ตามสถิติ กลุ่มเป้าหมาย และการทำงานขององค์กรคุณ', objective: 'เพิ่มยอดขาย', + bullets: [ + 'วางกลยุทธ์จากสถิติกลุ่มเป้าหมาย ไม่ใช่เดา', + 'ดู Platform ที่ Convert ดี ตัดอันที่เสียเงินเปล่า', + 'ระบบเก็บข้อมูล + วิเคราะห์ผล ค่อย ๆ ปรับ', + ], }, { eyebrow: 'พัฒนาเว็บไซต์', + surface: 'purple', subtitle: 'พัฒนาเว็บไซต์ที่สร้างผลลัพธ์ได้จริง สวยงาม และลูกค้าสามารถดูแลได้เอง', objective: 'เพิ่มยอดขาย และความน่าเชื่อถือให้ธุรกิจ', + bullets: [ + 'เว็บที่ขายได้ + ลูกค้าดูแลเอง ไม่ต้องพึ่งเราทุกครั้ง', + 'ออกแบบ SEO + GEO ให้ติดทั้ง Google และ AI Search', + 'เลือก Tech Stack ที่เหมาะกับธุรกิจ ไม่ใช่ของถูกแต่พังบ่อย', + ], }, ]; // 2x2 layout — each tile span 6 (6+6 per row, 2 rows) const span = 6; - const surface = (['yellow', 'purple-soft', 'mint', 'soft'] as const)[i]; const copy = tileCopy[i]; + const surface = copy.surface; return (

{copy.subtitle}

+
เป้าหมาย: {copy.objective} @@ -348,8 +375,49 @@ const featuredPortfolio = portfolio.filter(p => margin-bottom: 16px; } .surface-yellow .mega-subtitle { color: var(--color-black); opacity: 0.85; } - .surface-purple-soft .mega-subtitle, - .surface-mint .mega-subtitle, + .surface-purple-soft .mega-subtitle { color: var(--color-black); } + .surface-soft .mega-subtitle { color: var(--color-gray-700); } + + /* Bullet list for service tiles */ + .mega-bullets { + list-style: none; + padding: 0; + margin-bottom: 20px; + } + .mega-bullets li { + position: relative; + padding-left: 20px; + font-size: 14px; + line-height: 1.6; + margin-bottom: 8px; + } + .mega-bullets li::before { + content: ''; + position: absolute; + left: 0; + top: 9px; + width: 8px; + height: 8px; + border-radius: 50%; + background: currentColor; + opacity: 0.4; + } + + /* Light text on dark service tiles */ + .surface-teal .mega-subtitle, + .surface-teal .mega-bullets, + .surface-teal .mega-bullets li::before, + .surface-coral .mega-subtitle, + .surface-coral .mega-bullets, + .surface-coral .mega-bullets li::before, + .surface-dark .mega-subtitle, + .surface-dark .mega-bullets, + .surface-dark .mega-bullets li::before, + .surface-purple .mega-subtitle, + .surface-purple .mega-bullets, + .surface-purple .mega-bullets li::before { + color: rgba(255, 255, 255, 0.95); + } .surface-soft .mega-subtitle { color: var(--color-gray-700); } .mega-objective { display: inline-flex;