ai-consult service has data.services[i].items (not .bullets), so .map(bullets) crashed during build. Use s.bullets || s.items || [] fallback. Also data-surface defaults to 'white' when missing.
Apply Bento Grid + decorative parallax orb system from about.astro
to all remaining pages (home, services, portfolio, faq, contact,
terms, privacy, blog list, blog detail, services detail).
Layout changes (consistent across all pages):
- Main content sections use <BentoGrid> + <BentoTile>
- 2-3 <DecoOrb> per page for decorative parallax (no parallax blobs
behind text — orbs are pure decoration, z-index: 0, pointer-events: none)
- Surface variants: white, soft, yellow, purple-soft, teal, mint, dark
(rotated across pages for visual variety)
- Asymmetric span strategy (8+4, 7+5, 6+6) instead of flat grids
- Process sections use clean 4x1 grid
- Pull quote + yellow CTA kept as-is (standalone sections)
Content rules preserved:
- All Thai content kept verbatim
- No fabricated statistics
- No emoji icons (use text numerals 01 02 03 04)
- All design tokens from global.css (no hardcoded hex)
- Existing global classes (.container, .section, .btn, .section-badge,
.section-title, .cta-section, etc.) reused — no design system break
Build verified: 22 pages built in 1.80s, no errors.
Co-Authored-By: Claude <noreply@anthropic.com>
- Add --font-display, --font-body, --font-mono CSS variables in :root
(they were referenced everywhere but never defined; Kanit wasn't loading)
- Remove Noto Sans Thai import (Kanit handles Latin + Thai natively)
- Fix hero/PageHero line-height: 1/1.1 → 1.3 to prevent Thai vowel clipping
(was caused by overflow:hidden on .word-wrapper combined with line-height:1)
- Replace .word-wrapper overflow:hidden with padding so Thai descenders
stay visible during kinetic-title animation
- Bump word translateY from 100% → 110% so word slides up cleanly
- Bump global h1-h6 line-height from 1.1 → 1.25
Build: 18 pages, 0 errors
- All 4 service pages (webdev, marketing, automation, ai-consult) redesigned
- Magazine-style hero with decorative elements and features card
- Service-specific content from old site:
- WebDev: features, included items, tech options, pricing, FAQs
- Marketing: channels, AI features, targets, FAQs
- Automation: capabilities, targets, FAQs
- Tech Consult: services, why us, FAQs
- Consistent magazine styling across all service pages
- Updated [slug].astro with new sections: Hero, Why, Target, FAQ
- Enhanced all service MDX files with hero, why, target, and FAQ data
- WebDev: Added hero content about AI-powered editable websites
- Automation: Added hero content about data integration and AI
- Marketing: Added hero content about multi-channel automation
- AI Consult: Added hero content about AI strategy and implementation
- Added gradient transitions between sections in global.css
- Portfolio section now has gradient-top (dark to white fade)
- Blog section now has gradient-bottom (white fade from dark)
- Reduced portfolio overlay opacity from 0.85 to 0.65
- Added border to blog cards for white-on-white visibility
- Blog cards now have primary color accent on hover
