Before: .tile-link-overlay contained the .mega-cta text. Both overlay and .mega-objective were positioned at the bottom of the tile, causing visual overlap.
After: .mega-cta is a normal-flow <span> in tile-body (pushed to bottom via margin-top: auto). .tile-link-overlay is now an empty click target (no inner content, no padding, no flex).
Changes:
- Colors changed from yellow/purple-soft/mint/soft (same as problem section)
→ teal / coral / dark / purple (visually distinct from problems)
- Each tile now has 3 bullet points under subtitle to fill tile height
- Bullet styles: dot markers with currentColor at 0.4 opacity
- Text light (white) on dark surfaces (teal, coral, dark, purple)
- bullet list: mega-bullets class with proper spacing
Per user spec:
1. Home portfolio now shows only 4 specific clients in order:
Dataroot → Jet Industries → ทวนทอง 99 → สำนักงานกฎหมาย ตถาตา
(was filtering by featured: true, now filters by slug)
2. PortfolioCard: what_we_did moved from always-visible to
yellow hover overlay (shown above "เยี่ยมชมเว็บไซต์" button).
All cards now have uniform layout:
- Default: image + name + industry + category + result
- On hover (desktop): overlay shows what_we_did text + visit button
- No hover effect on mobile (tap navigates to URL)
3. Added what_we_did + result to 3 cards that were missing them:
- Jet Industries, ทวนทอง 99, สำนักงานกฎหมาย ตถาตา
Co-Authored-By: Claude <noreply@anthropic.com>
- badge: "เราจะช่วยคุณเพิ่มกำไร" → "Moreminimore"
- title: "เราช่วยวางระบบงาน..." → "เราจะช่วยคุณเพิ่มกำไร"
- subtitle: "รับทำเว็บ ที่ปรึกษา..." → "เราช่วยวางระบบงาน และใช้สถิติวางกลยุทธ์ทางการตลาด"
Update Hero.astro default props to match so other pages
that consume <Hero /> without props get the same copy.
Co-Authored-By: Claude <noreply@anthropic.com>
The home service section had each bento-tile wrapped in an
<a href="/services/..."> tag. This caused two problems:
1. The <a> became the grid item instead of the .bento-tile,
so the .bento-tile's grid-column: span 3 was ignored.
The <a> defaulted to display: block and stretched to
100% width, so all 4 tiles in a row had the same wide
width — but the grid was no longer dividing them equally.
2. Astro's scoped CSS only applies to elements with the
matching data-astro-cid attribute. The <a> wrapper had
its own scope, and the .bento-grid > a selector wasn't
styled — so the grid layout didn't propagate correctly.
Fix: remove the <a> wrapper. Make the whole tile clickable
by adding an absolutely-positioned <a class="tile-link-overlay">
inside the tile (covers the entire tile, sits behind text via
z-index). The .bento-tile is now a direct child of .bento-grid
and grid-column: span 3 works as expected.
Result: 4 tiles width 3/12 each, exactly filling one row,
clickable from anywhere on the tile.
Co-Authored-By: Claude <noreply@anthropic.com>
Service section on home page had two issues:
1. Tiles were different heights (longer content = taller tile)
because .bento-tile had no min-height
2. Two service tiles showed the same title (AI Consult + Automation
Consult) because src/content/services/ has 4 old + 4 -new mdx
files; .slice(0, 4) grabbed the first 4 alphabetically which
contained duplicate base slugs
Fixes:
- Add min-height: 380px + flex column to BentoTile so all tiles
in a row are visually equal regardless of content length
- Add dedupedServices helper in index.astro that groups services
by base slug and prefers the -new version when both exist
- Use dedupedServices.slice(0, 4) instead of services.slice(0, 4)
Result: 4 unique services (ai-consult-new, automation-new,
marketing-new, webdev-new) at equal height, filling the row.
Co-Authored-By: Claude <noreply@anthropic.com>
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>
- Remove EmDash: uninstalled emdash + @emdash-cms/* packages
- Delete src/utils/site-identity.ts (only file importing emdash)
- Delete src/live.config.ts (emdash stub)
- Delete src/content/pages/ (6 MD files: home/about/services/contact/faq/portfolio)
- Remove 'pages' collection from src/content.config.ts
- Hardcode home content as constants in src/pages/index.astro
- Fix duplicate 'megaphone' key in icon-paths.ts (pre-existing bug blocking build)
Home page redesign:
- New hero policy: 'เพิ่มยอดขาย ลดต้นทุน ลดเวลา' (replaces stats claim)
- Remove stats section (no claims until validated)
- 12 problem cards in 4 service buckets (3 each), outline-badge Lucide icons
- New pull quote: 'กำไรที่มากขึ้นของลูกค้า'
- Fix portfolio preview bug (was loading blog collection, now loads portfolio)
About page:
- Sync hero with new policy
- New 'นโยบายของเรา' section in story
- New dark pull-quote band with mission statement
Hero component:
- Remove hard-coded trust strip (50+/40+/5+/100% stats)
- Remove hard-coded secondary CTA
- Replace with named slots so callers can opt in
CLAUDE.md: updated to reflect new architecture (no CMS, static-only)
Verified: npm run build clean (18 pages, 1.74s)
- Hero section with decorative elements and stats card
- Services section with asymmetric magazine grid
- Featured service card with dark background
- Pull quote editorial section
- Portfolio masonry grid layout
- Blog editorial layout with featured post
- High contrast CTA section
- 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
