- 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>
Scoped CSS in BentoTile.astro was supposed to enforce
min-width: 0 + width: 100%, but the tiles were still
rendering at different widths in the same row.
Adding a global !important override in global.css that
applies to ALL .bento-tile instances regardless of
scoping, plus a flex column layout so tile-body fills
available space and pushes the CTA to the bottom.
This guarantees equal width + equal height in the row.
Co-Authored-By: Claude <noreply@anthropic.com>
Tiles in the same row had different widths because grid items
default to min-width: auto, which makes them grow to fit their
intrinsic content width instead of dividing the row equally.
Add min-width: 0, width: 100%, and box-sizing: border-box to
bento-tile so all tiles in a row are exactly equal width.
Co-Authored-By: Claude <noreply@anthropic.com>
--container-max was 1400px which left visible whitespace on
screens 1600px+ wide. Bump to 1600px so service/problem bento
tiles fill more of the viewport.
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>
Layout redesign:
- Add BentoGrid, BentoTile, DecoOrb components
- Add accent palette (purple/teal/mint/coral) to global tokens
- Rewrite about.astro using Bento Grid (12-col, surface variants)
- Decorative parallax blur orbs in 4 sections
- Value/process tiles use numerals 01-04 instead of emoji
Content updates per user feedback:
- Remove "Soloprenuer" emphasis
- Remove TOC ("เนื้อหาในหน้านี้") — not needed for short content
- Outsource + bot acknowledged as part of approach
- Replace AI stack with marketing intelligence tools
(ad spy, SEO gap, trend tracking)
- No fabricated stat numbers — placeholders show "—"
(only "5+ ปี" kept as verifiable, founded 2020)
- Post-delivery: small changes free, charge only for new features
- No Sprint methodology — flexible timeline, demo when ready
Co-Authored-By: Claude <noreply@anthropic.com>
- about.astro: change .values-grid from 4 columns to 2x2 (max-width 900px)
for visual balance with 4 cards. Drop the duplicate 2-col breakpoint
that became redundant after the desktop change.
- about.astro: switch from deprecated entry.render() to render(entry)
to match Astro v6 content collection API.
- content.config.ts: pages collection glob pattern '**/*.{md,mdx}'
silently matched zero files when the collection only had root-level
files; switch to '*.{md,mdx}' so the loader actually picks up
about.md and home.md.
- 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)
The logo container had a 1px gray border + 0 4px 20px drop shadow that
made it look like a floating button. User wants a flush, clean look —
keep the rounded bottom corners and white background (visual prominence)
but drop the border and shadow. Also remove the hover box-shadow
intensification.
Build: 18 pages, 0 errors
- 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
- 6 page-level content files in src/content/pages/
(home, about, services, portfolio, faq, contact) with full
conversion-optimized copy from research-audit
- 9 portfolio items in src/content/portfolio/ with new schema
fields: industry, what_we_did, result
- 20 FAQ items in src/content/faq/ across 5 categories:
บริการ, ราคา, ระยะเวลา, AI & เทคนิค, หลังการขาย
- 1 settings file (site identity, contact, social links)
All values quoted for YAML safety with Thai characters and URLs.
All answers specific (no 'ติดต่อเรา' cop-outs) with real numbers:
- 2-4x conversion stat
- 100,000 THB minimum threshold for SME fit
- 12% lead-to-customer (3x SaaS avg)
- 90%+ AI chat indistinguishable from human
- 30 day warranty, 1 refund case in 5 years
- Rush service +30% for 50% faster
- global.css: rewrite all CSS variables for light-first theme
- White bg, dark text, yellow accent (preserved)
- New --color-bg, --color-bg-soft, --color-bg-alt tokens
- All button variants audited: btn-primary (yellow/black, never matches
any white/yellow/soft bg), btn-dark (black/white, safe on yellow/light),
btn-outline-dark, btn-outline-light (only on dark), btn-outline-yellow
- Form inputs: white bg, dark text, gray border, yellow focus ring
- Nav: white bg, dark text, yellow hover underline
- Footer: white bg, dark text, social icons on soft bg
- Section variants: .section-soft, .section-yellow (utility classes)
- Removed dark variants: .section-dark, .btn-dark-as-section-bg
- Base.astro: theme-color = #fed400 (yellow)
- Hero.astro: kinetic hero on WHITE bg with yellow badge + dark text
- PageHero.astro: light hero with yellow accent line at bottom
- Navigation.astro: white bg, dark links, yellow CTA, white logo banner
with /images/logo-long-black.png (works on light/yellow)
- Footer.astro: white bg, dark text, social icons, yellow CTA
- Card components: white bg, gray border, yellow hover state
- Remove emdash from astro.config.mjs (no more SSR/runtime)
- Remove emdash + @astrojs/node from package.json
- Switch output from 'server' to 'static'
- Rewrite src/content.config.ts with 6 collections:
pages, services, portfolio, faq, settings, blog
- Keep live.config.ts as inert stub for build compat
- Push new content from content-temp/pages/ into src/content/pages/
with full schema (title, subtitle, badge, hero_image, show_cta, cta_*, etc.)
Build: 18 static pages, 0 errors
- Portfolio page: magazine hero, category filters, dark theme grid
- Blog index page: editorial featured post, card grid layout
- Consistent magazine styling with wave transitions
- 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
- 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
- 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
